@charset "UTF-8";
/* ============================================================
 * MAIN.SCSS - Single Entry Point for All Platform CSS
 * Created: November 8, 2025
 * Purpose: Consolidated SCSS compilation for 10-platform system
 * Output: apps/static/css/app.css + app.min.css
 * ============================================================ */
/* ============================================================
 * 1. CORE FOUNDATION (Load First)
 * Design tokens, reset, typography, framework basics
 * ============================================================ */
:root {
  --dna-heading-font: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --dna-body-font: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --brand-primary-dark: var(--md3-on-primary-container);
  --brand-primary-rgb: 15, 117, 189;
  --brand-secondary-dark: var(--md3-on-secondary-container);
  --brand-secondary-rgb: 247, 44, 147;
  --color-accent: var(--md3-tertiary);
  --color-success: #4CAF50;
  --color-success-light: #81C784;
  --color-success-dark: #388E3C;
  --color-success-rgb: 76, 175, 80;
  --color-warning: #FF9800;
  --color-warning-light: #FFB74D;
  --color-warning-dark: #F57C00;
  --color-warning-rgb: 255, 152, 0;
  --color-danger: var(--md3-error);
  --color-danger-light: var(--md3-error-container);
  --color-danger-dark: var(--md3-on-error-container);
  --color-danger-rgb: 244, 67, 54;
  --color-info: #00BCD4;
  --color-info-light: #4DD0E1;
  --color-info-dark: #0097A7;
  --color-info-rgb: 0, 188, 212;
  --brand-secondary-accessible: #C41E6B;
  --color-warning-accessible: #B36200;
  --color-success-accessible: #2E7D32;
  --color-info-accessible: #007B8A;
  --color-text-light: #595959;
  --color-white: #FFFFFF;
  --color-gray-50: #FAFAFA;
  --color-gray-100: #F5F5F5;
  --color-gray-200: #EEEEEE;
  --color-gray-300: #E0E0E0;
  --color-gray-400: #BDBDBD;
  --color-gray-500: #9E9E9E;
  --color-gray-600: #757575;
  --color-gray-700: #616161;
  --color-gray-800: #424242;
  --color-gray-900: #212121;
  --color-black: #000000;
  --color-text-primary: var(--md3-on-surface);
  --color-text-secondary: var(--md3-on-surface-variant);
  --color-text-muted: var(--color-gray-500);
  --color-text-inverse: var(--color-white);
  --color-background: var(--md3-background);
  --color-background-alt: var(--md3-surface-container-low);
  --color-surface: var(--md3-surface);
  --color-surface-elevated: var(--md3-surface-container);
  --gradient-primary: linear-gradient(135deg, var(--md3-primary) 0%, var(--md3-secondary) 100%);
  --gradient-secondary: linear-gradient(135deg, var(--md3-secondary) 0%, var(--md3-tertiary) 100%);
  --gradient-success: linear-gradient(135deg, #4CAF50 0%, #8BC34A 100%);
  --gradient-premium: linear-gradient(135deg, #FFD700 0%, #FFA000 100%);
  --gradient-dark: linear-gradient(135deg, var(--color-gray-800) 0%, var(--color-gray-900) 100%);
}

:root {
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-secondary: 'Raleway', var(--font-primary);
  --font-mono: 'SF Mono', Monaco, 'Cascadia Code', monospace;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-md: 1.125rem;
  --font-size-lg: 1.333rem;
  --font-size-xl: 1.777rem;
  --font-size-2xl: 2.369rem;
  --font-size-3xl: 3.157rem;
  --font-size-4xl: 4.209rem;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-black: 900;
  --line-height-tight: 1.25;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose: 2;
  --letter-spacing-tighter: -0.05em;
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em;
  --letter-spacing-wider: 0.05em;
  --letter-spacing-widest: 0.1em;
  --md3-display-large-size: 3.5625rem;
  --md3-display-large-line-height: 4rem;
  --md3-display-large-tracking: -0.016rem;
  --md3-display-large-weight: 400;
  --md3-display-medium-size: 2.8125rem;
  --md3-display-medium-line-height: 3.25rem;
  --md3-display-medium-tracking: 0;
  --md3-display-medium-weight: 400;
  --md3-display-small-size: 2.25rem;
  --md3-display-small-line-height: 2.75rem;
  --md3-display-small-tracking: 0;
  --md3-display-small-weight: 400;
  --md3-headline-large-size: 2rem;
  --md3-headline-large-line-height: 2.5rem;
  --md3-headline-large-tracking: 0;
  --md3-headline-large-weight: 400;
  --md3-headline-medium-size: 1.75rem;
  --md3-headline-medium-line-height: 2.25rem;
  --md3-headline-medium-tracking: 0;
  --md3-headline-medium-weight: 400;
  --md3-headline-small-size: 1.5rem;
  --md3-headline-small-line-height: 2rem;
  --md3-headline-small-tracking: 0;
  --md3-headline-small-weight: 400;
  --md3-title-large-size: 1.375rem;
  --md3-title-large-line-height: 1.75rem;
  --md3-title-large-tracking: 0;
  --md3-title-large-weight: 400;
  --md3-title-medium-size: 1rem;
  --md3-title-medium-line-height: 1.5rem;
  --md3-title-medium-tracking: 0.009rem;
  --md3-title-medium-weight: 500;
  --md3-title-small-size: 0.875rem;
  --md3-title-small-line-height: 1.25rem;
  --md3-title-small-tracking: 0.006rem;
  --md3-title-small-weight: 500;
  --md3-body-large-size: 1rem;
  --md3-body-large-line-height: 1.5rem;
  --md3-body-large-tracking: 0.031rem;
  --md3-body-large-weight: 400;
  --md3-body-medium-size: 0.875rem;
  --md3-body-medium-line-height: 1.25rem;
  --md3-body-medium-tracking: 0.016rem;
  --md3-body-medium-weight: 400;
  --md3-body-small-size: 0.75rem;
  --md3-body-small-line-height: 1rem;
  --md3-body-small-tracking: 0.025rem;
  --md3-body-small-weight: 400;
  --md3-label-large-size: 0.875rem;
  --md3-label-large-line-height: 1.25rem;
  --md3-label-large-tracking: 0.006rem;
  --md3-label-large-weight: 500;
  --md3-label-medium-size: 0.75rem;
  --md3-label-medium-line-height: 1rem;
  --md3-label-medium-tracking: 0.031rem;
  --md3-label-medium-weight: 500;
  --md3-label-small-size: 0.6875rem;
  --md3-label-small-line-height: 1rem;
  --md3-label-small-tracking: 0.031rem;
  --md3-label-small-weight: 500;
}

.md3-display-large {
  font-size: var(--md3-display-large-size);
  line-height: var(--md3-display-large-line-height);
  letter-spacing: var(--md3-display-large-tracking);
  font-weight: var(--md3-display-large-weight);
}

.md3-display-medium {
  font-size: var(--md3-display-medium-size);
  line-height: var(--md3-display-medium-line-height);
  letter-spacing: var(--md3-display-medium-tracking);
  font-weight: var(--md3-display-medium-weight);
}

.md3-display-small {
  font-size: var(--md3-display-small-size);
  line-height: var(--md3-display-small-line-height);
  letter-spacing: var(--md3-display-small-tracking);
  font-weight: var(--md3-display-small-weight);
}

.md3-headline-large {
  font-size: var(--md3-headline-large-size);
  line-height: var(--md3-headline-large-line-height);
  letter-spacing: var(--md3-headline-large-tracking);
  font-weight: var(--md3-headline-large-weight);
}

.md3-headline-medium {
  font-size: var(--md3-headline-medium-size);
  line-height: var(--md3-headline-medium-line-height);
  letter-spacing: var(--md3-headline-medium-tracking);
  font-weight: var(--md3-headline-medium-weight);
}

.md3-headline-small {
  font-size: var(--md3-headline-small-size);
  line-height: var(--md3-headline-small-line-height);
  letter-spacing: var(--md3-headline-small-tracking);
  font-weight: var(--md3-headline-small-weight);
}

.md3-title-large {
  font-size: var(--md3-title-large-size);
  line-height: var(--md3-title-large-line-height);
  letter-spacing: var(--md3-title-large-tracking);
  font-weight: var(--md3-title-large-weight);
}

.md3-title-medium {
  font-size: var(--md3-title-medium-size);
  line-height: var(--md3-title-medium-line-height);
  letter-spacing: var(--md3-title-medium-tracking);
  font-weight: var(--md3-title-medium-weight);
}

.md3-title-small {
  font-size: var(--md3-title-small-size);
  line-height: var(--md3-title-small-line-height);
  letter-spacing: var(--md3-title-small-tracking);
  font-weight: var(--md3-title-small-weight);
}

.md3-body-large {
  font-size: var(--md3-body-large-size);
  line-height: var(--md3-body-large-line-height);
  letter-spacing: var(--md3-body-large-tracking);
  font-weight: var(--md3-body-large-weight);
}

.md3-body-medium {
  font-size: var(--md3-body-medium-size);
  line-height: var(--md3-body-medium-line-height);
  letter-spacing: var(--md3-body-medium-tracking);
  font-weight: var(--md3-body-medium-weight);
}

.md3-body-small {
  font-size: var(--md3-body-small-size);
  line-height: var(--md3-body-small-line-height);
  letter-spacing: var(--md3-body-small-tracking);
  font-weight: var(--md3-body-small-weight);
}

.md3-label-large {
  font-size: var(--md3-label-large-size);
  line-height: var(--md3-label-large-line-height);
  letter-spacing: var(--md3-label-large-tracking);
  font-weight: var(--md3-label-large-weight);
}

.md3-label-medium {
  font-size: var(--md3-label-medium-size);
  line-height: var(--md3-label-medium-line-height);
  letter-spacing: var(--md3-label-medium-tracking);
  font-weight: var(--md3-label-medium-weight);
}

.md3-label-small {
  font-size: var(--md3-label-small-size);
  line-height: var(--md3-label-small-line-height);
  letter-spacing: var(--md3-label-small-tracking);
  font-weight: var(--md3-label-small-weight);
}

:root {
  --space-unit: 0.5rem;
  --space-xxs: calc(var(--space-unit) * 0.5);
  --space-xs: var(--space-unit);
  --space-sm: calc(var(--space-unit) * 1.5);
  --space-md: calc(var(--space-unit) * 2);
  --space-lg: calc(var(--space-unit) * 3);
  --space-xl: calc(var(--space-unit) * 4);
  --space-2xl: calc(var(--space-unit) * 6);
  --space-3xl: calc(var(--space-unit) * 8);
  --space-4xl: calc(var(--space-unit) * 12);
  --space-5xl: calc(var(--space-unit) * 16);
  --space-inline: var(--space-md);
  --space-stack: var(--space-lg);
  --space-section: var(--space-4xl);
  --space-gutter: var(--space-lg);
}

:root {
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1536px;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-2xl: 1400px;
  --grid-columns: 12;
  --grid-gutter: var(--space-lg);
}

:root {
  --radius-none: 0;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;
  --border-none: 0;
  --border-thin: 1px;
  --border-medium: 2px;
  --border-thick: 4px;
  --border-color: var(--color-gray-200);
  --border-color-hover: var(--color-gray-300);
  --border-color-focus: var(--md3-primary);
}

:root {
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.02);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.02);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
  --shadow-primary: 0 4px 14px 0 rgba(15, 117, 189, 0.3);
  --shadow-secondary: 0 4px 14px 0 rgba(247, 44, 147, 0.3);
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
  --shadow-inner-lg: inset 0 4px 8px 0 rgba(0, 0, 0, 0.08);
}

:root {
  --duration-instant: 0ms;
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
  --duration-slower: 700ms;
  --ease-linear: linear;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --md3-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --md3-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
  --md3-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
  --md3-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --md3-easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);
  --md3-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1);
  --md3-duration-short1: 50ms;
  --md3-duration-short2: 100ms;
  --md3-duration-short3: 150ms;
  --md3-duration-short4: 200ms;
  --md3-duration-medium1: 250ms;
  --md3-duration-medium2: 300ms;
  --md3-duration-medium3: 350ms;
  --md3-duration-medium4: 400ms;
  --md3-duration-long1: 450ms;
  --md3-duration-long2: 500ms;
  --transition-default: all var(--md3-duration-medium2) var(--md3-easing-emphasized);
  --transition-fast: all var(--md3-duration-short3) var(--md3-easing-emphasized);
  --transition-slow: all var(--md3-duration-long2) var(--md3-easing-emphasized);
}

:root {
  --z-negative: -1;
  --z-base: 0;
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --z-notification: 1080;
}

:root {
  --button-padding-x: var(--space-lg);
  --button-padding-y: var(--space-sm);
  --button-font-weight: var(--font-weight-medium);
  --button-border-radius: var(--radius-md);
  --button-transition: var(--transition-fast);
  --card-padding: var(--space-lg);
  --card-radius: var(--radius-lg);
  --card-shadow: var(--shadow-md);
  --card-shadow-hover: var(--shadow-lg);
  --input-padding-x: var(--space-md);
  --input-padding-y: var(--space-sm);
  --input-border-radius: var(--radius-md);
  --input-border-color: var(--border-color);
  --input-focus-color: var(--md3-primary);
  --input-focus-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.1);
  --nav-height: 64px;
  --nav-background: rgba(255, 255, 255, 0.95);
  --nav-backdrop-filter: blur(10px);
  --modal-backdrop: rgba(0, 0, 0, 0.5);
  --modal-radius: var(--radius-xl);
  --modal-shadow: var(--shadow-2xl);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-background: var(--md3-background);
    --color-surface: var(--md3-surface);
    --color-text-primary: var(--md3-on-surface);
    --color-text-secondary: var(--md3-on-surface-variant);
    --border-color: var(--md3-outline-variant);
  }
}
:root[data-bs-theme=dark] {
  --color-background: var(--md3-background);
  --color-surface: var(--md3-surface);
  --color-text-primary: var(--md3-on-surface);
  --color-text-secondary: var(--md3-on-surface-variant);
  --border-color: var(--md3-outline-variant);
}

@media (prefers-color-scheme: dark) {
  body, main {
    background-color: var(--md3-background, #111318) !important;
    color: var(--md3-on-surface, #e1e2e8);
  }
  .bg-light {
    background-color: var(--md3-surface-container, #1d2024) !important;
  }
  .bg-white, .bg-gray-light {
    background-color: var(--md3-surface-container-low, #191c21) !important;
  }
  .bg-gray {
    background-color: var(--md3-surface-container-high, #272a2e) !important;
  }
  .card, .card-elevated {
    background-color: var(--md3-surface-container-low, #191c21) !important;
    border-color: var(--md3-outline-variant, #42474e);
  }
  .card-body {
    background-color: transparent !important;
  }
  .step-card, .science-card, .testimonial-card,
  .step-details, .info-box {
    background-color: var(--md3-surface-container-low, #191c21) !important;
    color: var(--md3-on-surface, #e1e2e8);
  }
  footer, footer.bg-dark, footer.bg-light {
    background-color: var(--md3-surface-container-lowest, #0e1116) !important;
    color: var(--md3-on-surface, #e1e2e8) !important;
  }
  footer .text-muted {
    color: var(--md3-on-surface-variant, #c2c6d0) !important;
  }
  footer a {
    color: var(--md3-primary, #a9c7ff);
  }
  .how-it-works-section, .services-section, .features-section,
  .content-section, .testimonials-section, .faq-section,
  .concerns-section, #concerns, #services, #showcase,
  .telehealth-info, .showcase {
    background-color: var(--md3-surface-container, #1d2024);
    color: var(--md3-on-surface, #e1e2e8);
  }
  section h2, section h3, section h4, section h5, section h6 {
    color: var(--md3-on-surface, #e1e2e8);
  }
  section p, section li, section dd {
    color: var(--md3-on-surface-variant, #c2c6d0);
  }
  .text-muted {
    color: var(--md3-on-surface-variant, #c2c6d0) !important;
  }
  .text-dark {
    color: var(--md3-on-surface, #e1e2e8) !important;
  }
  .trust-bar, .py-3.bg-light.border-bottom {
    background-color: var(--md3-surface-container, #1d2024) !important;
    border-bottom-color: var(--md3-outline-variant, #42474e) !important;
  }
  .form-control, .form-select {
    background-color: var(--md3-surface-container-high, #272a2e);
    color: var(--md3-on-surface, #e1e2e8);
    border-color: var(--md3-outline, #72777f);
  }
  .dropdown-menu {
    background-color: var(--md3-surface-container, #1d2024);
    border-color: var(--md3-outline-variant, #42474e);
  }
  .dropdown-item {
    color: var(--md3-on-surface, #e1e2e8);
  }
  .dropdown-item:hover, .dropdown-item:focus {
    background-color: var(--md3-surface-container-high, #272a2e);
  }
}
[data-bs-theme=dark] body, [data-bs-theme=dark] main {
  background-color: var(--md3-background, #111318) !important;
  color: var(--md3-on-surface, #e1e2e8);
}
[data-bs-theme=dark] .bg-light {
  background-color: var(--md3-surface-container, #1d2024) !important;
}
[data-bs-theme=dark] .bg-white, [data-bs-theme=dark] .bg-gray-light {
  background-color: var(--md3-surface-container-low, #191c21) !important;
}
[data-bs-theme=dark] .bg-gray {
  background-color: var(--md3-surface-container-high, #272a2e) !important;
}
[data-bs-theme=dark] .card, [data-bs-theme=dark] .card-elevated {
  background-color: var(--md3-surface-container-low, #191c21) !important;
  border-color: var(--md3-outline-variant, #42474e);
}
[data-bs-theme=dark] .card-body {
  background-color: transparent !important;
}
[data-bs-theme=dark] .step-card, [data-bs-theme=dark] .science-card, [data-bs-theme=dark] .testimonial-card,
[data-bs-theme=dark] .step-details, [data-bs-theme=dark] .info-box {
  background-color: var(--md3-surface-container-low, #191c21) !important;
  color: var(--md3-on-surface, #e1e2e8);
}
[data-bs-theme=dark] footer, [data-bs-theme=dark] footer.bg-dark, [data-bs-theme=dark] footer.bg-light {
  background-color: var(--md3-surface-container-lowest, #0e1116) !important;
  color: var(--md3-on-surface, #e1e2e8) !important;
}
[data-bs-theme=dark] footer .text-muted {
  color: var(--md3-on-surface-variant, #c2c6d0) !important;
}
[data-bs-theme=dark] footer a {
  color: var(--md3-primary, #a9c7ff);
}
[data-bs-theme=dark] .how-it-works-section, [data-bs-theme=dark] .services-section, [data-bs-theme=dark] .features-section,
[data-bs-theme=dark] .content-section, [data-bs-theme=dark] .testimonials-section, [data-bs-theme=dark] .faq-section,
[data-bs-theme=dark] .concerns-section, [data-bs-theme=dark] #concerns, [data-bs-theme=dark] #services, [data-bs-theme=dark] #showcase,
[data-bs-theme=dark] .telehealth-info, [data-bs-theme=dark] .showcase {
  background-color: var(--md3-surface-container, #1d2024);
  color: var(--md3-on-surface, #e1e2e8);
}
[data-bs-theme=dark] section h2, [data-bs-theme=dark] section h3, [data-bs-theme=dark] section h4, [data-bs-theme=dark] section h5, [data-bs-theme=dark] section h6 {
  color: var(--md3-on-surface, #e1e2e8);
}
[data-bs-theme=dark] section p, [data-bs-theme=dark] section li, [data-bs-theme=dark] section dd {
  color: var(--md3-on-surface-variant, #c2c6d0);
}
[data-bs-theme=dark] .text-muted {
  color: var(--md3-on-surface-variant, #c2c6d0) !important;
}
[data-bs-theme=dark] .text-dark {
  color: var(--md3-on-surface, #e1e2e8) !important;
}
[data-bs-theme=dark] .trust-bar, [data-bs-theme=dark] .py-3.bg-light.border-bottom {
  background-color: var(--md3-surface-container, #1d2024) !important;
  border-bottom-color: var(--md3-outline-variant, #42474e) !important;
}
[data-bs-theme=dark] .form-control, [data-bs-theme=dark] .form-select {
  background-color: var(--md3-surface-container-high, #272a2e);
  color: var(--md3-on-surface, #e1e2e8);
  border-color: var(--md3-outline, #72777f);
}
[data-bs-theme=dark] .dropdown-menu {
  background-color: var(--md3-surface-container, #1d2024);
  border-color: var(--md3-outline-variant, #42474e);
}
[data-bs-theme=dark] .dropdown-item {
  color: var(--md3-on-surface, #e1e2e8);
}
[data-bs-theme=dark] .dropdown-item:hover, [data-bs-theme=dark] .dropdown-item:focus {
  background-color: var(--md3-surface-container-high, #272a2e);
}

:root {
  --spring-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --spring-wobbly: cubic-bezier(0.18, 0.89, 0.32, 1.28);
  --spring-gentle: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --duration-micro: 100ms;
  --duration-quick: 200ms;
  --duration-smooth: 400ms;
  --duration-leisurely: 800ms;
  --transition-bounce: all var(--duration-normal) var(--spring-bounce);
  --transition-spring: all var(--duration-smooth) var(--spring-wobbly);
  --transition-micro: all var(--duration-micro) var(--ease-out);
}

:root {
  --gradient-brand: linear-gradient(135deg, var(--md3-primary) 0%, var(--md3-secondary) 100%);
  --gradient-success-vibrant: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-light) 100%);
  --gradient-warning-vibrant: linear-gradient(135deg, var(--color-warning) 0%, var(--color-warning-light) 100%);
  --gradient-danger-vibrant: linear-gradient(135deg, var(--color-danger) 0%, var(--color-danger-light) 100%);
  --gradient-info-vibrant: linear-gradient(135deg, var(--color-info) 0%, var(--color-info-light) 100%);
  --gradient-subtle: linear-gradient(135deg, var(--color-gray-50) 0%, var(--color-white) 100%);
  --gradient-surface: linear-gradient(135deg, var(--color-white) 0%, var(--color-gray-50) 100%);
  --gradient-hero: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 50%, var(--color-accent) 100%);
  --gradient-hero-dark: linear-gradient(135deg, var(--color-gray-900) 0%, var(--color-gray-800) 100%);
}

:root {
  --shadow-primary-light: 0 4px 14px 0 rgba(var(--brand-primary-rgb), 0.15);
  --shadow-primary-strong: 0 8px 28px 0 rgba(var(--brand-primary-rgb), 0.4);
  --shadow-secondary-light: 0 4px 14px 0 rgba(var(--brand-secondary-rgb), 0.15);
  --shadow-secondary-strong: 0 8px 28px 0 rgba(var(--brand-secondary-rgb), 0.4);
  --shadow-hover: 0 12px 24px -6px rgba(0, 0, 0, 0.12);
  --shadow-active: 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-focus: 0 0 0 4px rgba(var(--brand-primary-rgb), 0.15);
  --shadow-glass: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
  --shadow-glass-hover: 0 16px 48px 0 rgba(31, 38, 135, 0.25);
}

:root {
  --button-padding-sm: var(--space-xs) var(--space-md);
  --button-padding-lg: var(--space-md) var(--space-xl);
  --button-height-sm: 32px;
  --button-height-md: 40px;
  --button-height-lg: 48px;
  --card-padding-sm: var(--space-md);
  --card-padding-lg: var(--space-xl);
  --card-gap: var(--space-lg);
  --nav-height-sm: 56px;
  --nav-height-lg: 72px;
  --nav-padding: var(--space-md) var(--space-lg);
  --input-height: 48px;
  --input-height-sm: 36px;
  --input-height-lg: 56px;
  --label-font-size: var(--font-size-sm);
  --helper-font-size: var(--font-size-xs);
}

@media (max-width: 767px) {
  :root {
    --space-section: var(--space-3xl);
    --card-padding: var(--space-md);
    --nav-height: var(--nav-height-sm);
    --font-size-4xl: 2.5rem;
    --font-size-3xl: 2rem;
    --font-size-2xl: 1.75rem;
  }
}
@media (min-width: 1200px) {
  :root {
    --space-section: calc(var(--space-4xl) + var(--space-lg));
    --card-padding: var(--space-xl);
    --nav-height: var(--nav-height-lg);
  }
}
.text-brand {
  color: var(--brand-primary) !important;
}

.text-accent {
  color: var(--brand-secondary) !important;
}

.bg-brand {
  background-color: var(--brand-primary) !important;
}

.bg-accent {
  background-color: var(--brand-secondary) !important;
}

.bg-gradient-brand {
  background: var(--gradient-brand) !important;
}

.bg-gradient-hero {
  background: var(--gradient-hero) !important;
}

.border-brand {
  border-color: var(--brand-primary) !important;
}

.border-radius-token {
  border-radius: var(--radius-md) !important;
}

.shadow-token {
  box-shadow: var(--shadow-md) !important;
}

.shadow-hover-token {
  box-shadow: var(--shadow-hover) !important;
}

:export {
  primaryColor: var(--brand-primary);
  secondaryColor: var(--brand-secondary);
  breakpointMd: var(--breakpoint-md);
  breakpointLg: var(--breakpoint-lg);
  durationNormal: var(--duration-normal);
  springBounce: var(--spring-bounce);
  shadowPrimary: var(--shadow-primary);
}

/* ============================================================
 * FRAMEWORK CONSOLIDATED CSS - Bootstrap 5 + Nifty Patterns
 * Created: November 2, 2025
 * Purpose: Replace Nifty.css functionality for Bootstrap 5
 * Based on: DNAR baseline patterns adapted for BS5
 * ============================================================ */
/* Base typography (migrated from base.html inline <style>) */
body {
  font-family: var(--dna-body-font);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--dna-heading-font);
}

/* ============================================================
 * 1. DASHBOARD COMPONENTS (Nifty-style polish)
 * ============================================================ */
/* Dashboard Cards (was .panel in BS3/Nifty) */
.dashboard-card,
.card-dashboard {
  margin-bottom: 20px;
  background-color: #fff;
  border: 1px solid #e9e9e9;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: all 0.3s ease;
}

.dashboard-card:hover,
.card-dashboard:hover {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  transform: translateY(-2px);
}

.dashboard-card-header,
.card-dashboard .card-header {
  padding: 15px 20px;
  background-color: #fafafa;
  border-bottom: 1px solid #e9e9e9;
  border-radius: 3px 3px 0 0;
  font-weight: 600;
}

.dashboard-card-body,
.card-dashboard .card-body {
  padding: 20px;
}

.dashboard-card-footer,
.card-dashboard .card-footer {
  padding: 15px 20px;
  background-color: #fafafa;
  border-top: 1px solid #e9e9e9;
  border-radius: 0 0 3px 3px;
}

/* Stats Boxes (Nifty-style) */
.stats-box {
  padding: 25px;
  text-align: center;
  border-radius: 6px;
  background: #fff;
  border: 1px solid #e9e9e9;
  transition: all 0.3s ease;
}

.stats-box:hover {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
  transform: translateY(-3px);
}

.stats-number {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: #2b425b;
}

.stats-label {
  font-size: 0.875rem;
  text-transform: uppercase;
  color: #849eab;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.stats-change {
  margin-top: 10px;
  font-size: 0.85rem;
}

.stats-change.positive {
  color: #27c24c;
}

.stats-change.negative {
  color: #f05050;
}

/* ============================================================
 * 2. SPACING UTILITIES (Nifty pad-X/mar-X patterns)
 * ============================================================ */
/* Padding utilities */
.pad-all {
  padding: 15px !important;
}

.pad-ver {
  padding-top: 15px !important;
  padding-bottom: 15px !important;
}

.pad-hor {
  padding-left: 15px !important;
  padding-right: 15px !important;
}

.pad-top {
  padding-top: 15px !important;
}

.pad-btm {
  padding-bottom: 15px !important;
}

.pad-lft {
  padding-left: 15px !important;
}

.pad-rgt {
  padding-right: 15px !important;
}

.pad-no {
  padding: 0 !important;
}

/* Large padding */
.pad-all-lg {
  padding: 30px !important;
}

.pad-ver-lg {
  padding-top: 30px !important;
  padding-bottom: 30px !important;
}

.pad-hor-lg {
  padding-left: 30px !important;
  padding-right: 30px !important;
}

/* Small padding */
.pad-all-sm {
  padding: 10px !important;
}

.pad-ver-sm {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

.pad-hor-sm {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

/* Margin utilities */
.mar-all {
  margin: 15px !important;
}

.mar-ver {
  margin-top: 15px !important;
  margin-bottom: 15px !important;
}

.mar-hor {
  margin-left: 15px !important;
  margin-right: 15px !important;
}

.mar-top {
  margin-top: 15px !important;
}

.mar-btm {
  margin-bottom: 15px !important;
}

.mar-lft {
  margin-left: 15px !important;
}

.mar-rgt {
  margin-right: 15px !important;
}

.mar-no {
  margin: 0 !important;
}

/* Large margin */
.mar-all-lg {
  margin: 30px !important;
}

.mar-ver-lg {
  margin-top: 30px !important;
  margin-bottom: 30px !important;
}

.mar-hor-lg {
  margin-left: 30px !important;
  margin-right: 30px !important;
}

/* Small margin */
.mar-all-sm {
  margin: 10px !important;
}

.mar-ver-sm {
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}

.mar-hor-sm {
  margin-left: 10px !important;
  margin-right: 10px !important;
}

/* ============================================================
 * 3. TYPOGRAPHY UTILITIES (Nifty text helpers)
 * ============================================================ */
.text-thin {
  font-weight: 100 !important;
}

.text-light {
  font-weight: 300 !important;
}

.text-normal {
  font-weight: 400 !important;
}

.text-semibold {
  font-weight: 600 !important;
}

.text-bold {
  font-weight: 700 !important;
}

.text-xs {
  font-size: 0.75rem !important;
}

.text-sm {
  font-size: 0.875rem !important;
}

.text-md {
  font-size: 1rem !important;
}

.text-lg {
  font-size: 1.125rem !important;
}

.text-xl {
  font-size: 1.25rem !important;
}

.text-2x {
  font-size: 1.5rem !important;
}

.text-3x {
  font-size: 2rem !important;
}

.text-4x {
  font-size: 2.5rem !important;
}

.text-5x {
  font-size: 3rem !important;
}

/* Text colors (Nifty defaults) */
.text-main {
  color: #2b425b !important;
}

.text-light {
  color: #758697 !important;
}

.text-muted {
  color: #849eab !important;
}

.text-gray {
  color: #e6eaed !important;
}

.text-gray-dark {
  color: #c8d1d8 !important;
}

/* ============================================================
 * 4. BACKGROUND UTILITIES (Nifty bg-* patterns)
 * ============================================================ */
.bg-trans {
  background-color: transparent !important;
}

.bg-light {
  background-color: #fff !important;
}

.bg-gray-light {
  background-color: #f5f6f8 !important;
}

.bg-gray {
  background-color: #e6eaed !important;
}

.bg-gray-dark {
  background-color: #c8d1d8 !important;
}

.bg-trans-light {
  background-color: hsla(0, 0%, 100%, 0.1) !important;
}

.bg-trans-dark {
  background-color: rgba(0, 0, 0, 0.05) !important;
}

.bg-pink {
  background-color: #ec407a !important;
}

.bg-pink,
.bg-pink a {
  color: #fff !important;
}

/* ============================================================
 * 5. FORM ENHANCEMENTS (Nifty form styling)
 * ============================================================ */
.form-control-nifty,
.form-control-dashboard {
  border-color: #e9e9e9;
  border-radius: 3px;
  font-size: 14px;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control-nifty:focus,
.form-control-dashboard:focus {
  border-color: #5fa6d3;
  box-shadow: 0 0 0 0.2rem rgba(95, 166, 211, 0.25);
}

/* Form groups with icons */
.input-group-icon {
  position: relative;
}

.input-group-icon .form-control {
  padding-left: 45px;
}

.input-group-icon .input-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #849eab;
  z-index: 10;
}

/* ============================================================
 * 6. TABLE STYLING (Nifty tables)
 * ============================================================ */
.table-dashboard {
  background-color: #fff;
  margin-bottom: 20px;
}

.table-dashboard thead th {
  background-color: #fafafa;
  border-bottom: 2px solid #e9e9e9;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  padding: 12px 15px;
}

.table-dashboard tbody td {
  padding: 12px 15px;
  border-bottom: 1px solid #f5f6f8;
  vertical-align: middle;
}

.table-dashboard tbody tr:hover {
  background-color: #fafafa;
}

/* ============================================================
 * 7. BOX SHADOWS & EFFECTS (Nifty polish)
 * ============================================================ */
.box-shadow {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24) !important;
}

.box-shadow-md {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23) !important;
}

.box-shadow-lg {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22) !important;
}

.box-shadow-xl {
  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22) !important;
}

.box-hover {
  transition: all 0.3s ease;
}

.box-hover:hover {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  transform: translateY(-2px);
}

/* ============================================================
 * 8. LOADING & SPINNERS (Nifty loaders)
 * ============================================================ */
.spinner-dashboard {
  width: 40px;
  height: 40px;
  margin: 40px auto;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #0F75BD;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* ============================================================
 * 10. ALERTS & NOTIFICATIONS (Nifty style)
 * ============================================================ */
.alert-dashboard {
  padding: 15px 20px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 3px;
  position: relative;
}

.alert-dashboard .close {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
}

.alert-dashboard-success {
  background-color: #dff0d8;
  border-color: #d6e9c6;
  color: #3c763d;
}

.alert-dashboard-info {
  background-color: #d9edf7;
  border-color: #bce8f1;
  color: #31708f;
}

.alert-dashboard-warning {
  background-color: #fcf8e3;
  border-color: #faebcc;
  color: #8a6d3b;
}

.alert-dashboard-danger {
  background-color: #f2dede;
  border-color: #ebccd1;
  color: #a94442;
}

/* ============================================================
 * 11. ADDITIONAL NIFTY UTILITIES (from legacy nifty.css)
 * ============================================================ */
/* Brand text styling */
.brand-text {
  display: block;
  font-size: 18px;
  font-weight: 600;
}

/* Display utilities */
.box-inline {
  display: inline-block !important;
}

/* Accordion border fix (for thescience.html) */
.accordion-item > .accordion-header + .accordion-collapse > .accordion-body {
  border-top: 0;
}

/* Note: .btn-rounded is already defined in utilities-final.css */
/* ============================================================
 * BRAND CONSOLIDATED CSS - Material Design 3 Color System
 * Generated: February 2026
 * Generator: scripts/generate_md3_colors.py
 *
 * Architecture:
 *   - MD3 dynamic color generation from source colors via HCT color space
 *   - 32 color roles per site (light mode) + dark mode support
 *   - Backward-compatible aliases: --brand-primary -> --md3-primary
 *   - WCAG 2.2 AA compliant (4.5:1 text, 3:1 UI components)
 *
 * DO NOT EDIT MANUALLY - Regenerate with:
 *   python3 scripts/generate_md3_colors.py
 * ============================================================ */
/* ============================================================
 * 1. MD3 COLOR SYSTEM DEFAULTS (DNA Romance)
 * ============================================================ */
:root {
  /* DNA Romance (Dating) - Source: #0F75BD */
  --md3-primary: #0F75BD;
  --md3-on-primary: #ffffff;
  --md3-primary-container: #d4e3fe;
  --md3-on-primary-container: #001d36;
  --md3-secondary: #F72C93;
  --md3-on-secondary: #ffffff;
  --md3-secondary-container: #ffd9e5;
  --md3-on-secondary-container: #39081f;
  --md3-tertiary: #854f56;
  --md3-on-tertiary: #ffffff;
  --md3-tertiary-container: #ffd9dd;
  --md3-on-tertiary-container: #380a15;
  --md3-error: #bf0031;
  --md3-on-error: #ffffff;
  --md3-error-container: #fedad8;
  --md3-on-error-container: #430002;
  --md3-surface: #f6f9ff;
  --md3-on-surface: #191c21;
  --md3-surface-variant: #dbe3f1;
  --md3-on-surface-variant: #404753;
  --md3-surface-container-lowest: #ffffff;
  --md3-surface-container-low: #f0f4fb;
  --md3-surface-container: #eaeef5;
  --md3-surface-container-high: #e4e8f0;
  --md3-surface-container-highest: #dfe3ea;
  --md3-outline: #707784;
  --md3-outline-variant: #bfc7d5;
  --md3-inverse-surface: #2d3136;
  --md3-inverse-on-surface: #edf1f8;
  --md3-inverse-primary: #a3c9fe;
  --md3-background: #f6f9ff;
  --md3-on-background: #191c21;
  /* Backward-compatible aliases */
  --brand-primary: var(--md3-primary);
  --brand-secondary: var(--md3-secondary);
  --brand-primary-light: var(--md3-primary-container);
  --brand-secondary-light: var(--md3-secondary-container);
  /* Typography */
  --font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-secondary: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Typography colors (from MD3 surface roles) */
  --text-body: var(--md3-on-surface-variant);
  --text-strong: var(--md3-on-surface);
  /* Standard semantic colors (shared across all sites) */
  --brand-success: #27c24c;
  --brand-info: #23b7e5;
  --brand-warning: #f39c12;
  --brand-danger: var(--md3-error);
  --brand-dark: #2b425b;
  --brand-light: var(--md3-surface-container-low);
  /* Spacing (8px grid system - MD3 aligned) */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 48px;
  /* Border radius (MD3 shape system) */
  --radius-none: 0;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 28px;
  --radius-full: 9999px;
  /* MD3 Elevation (tinted surface + shadow) */
  --shadow-1dp: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  --shadow-4dp: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  --shadow-8dp: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  --shadow-16dp: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  --shadow-24dp: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
  /* Aliases for backward compatibility */
  --shadow-sm: var(--shadow-1dp);
  --shadow-md: var(--shadow-4dp);
  --shadow-lg: var(--shadow-16dp);
}

/* Dark mode (DNA Romance default) - OS preference */
@media (prefers-color-scheme: dark) {
  :root {
    --md3-primary: #a3c9fe;
    --md3-on-primary: #003257;
    --md3-primary-container: #00497b;
    --md3-on-primary-container: #d4e3fe;
    --md3-secondary: #f4b5cb;
    --md3-on-secondary: #511f34;
    --md3-secondary-container: #6b364b;
    --md3-on-secondary-container: #ffd9e5;
    --md3-tertiary: #f5b7bd;
    --md3-on-tertiary: #512129;
    --md3-tertiary-container: #6a383f;
    --md3-on-tertiary-container: #ffd9dd;
    --md3-error: #feb4b0;
    --md3-on-error: #680016;
    --md3-error-container: #920023;
    --md3-on-error-container: #fedad8;
    --md3-surface: #101419;
    --md3-on-surface: #dfe3ea;
    --md3-surface-variant: #404753;
    --md3-on-surface-variant: #bfc7d5;
    --md3-surface-container-lowest: #0a0e15;
    --md3-surface-container-low: #191c21;
    --md3-surface-container: #1d2025;
    --md3-surface-container-high: #272a30;
    --md3-surface-container-highest: #32353b;
    --md3-outline: #89919e;
    --md3-outline-variant: #404753;
    --md3-inverse-surface: #dfe3ea;
    --md3-inverse-on-surface: #2d3136;
    --md3-inverse-primary: #0062a1;
    --md3-background: #101419;
    --md3-on-background: #dfe3ea;
  }
}
/* Dark mode (DNA Romance default) - Manual toggle */
:root[data-bs-theme=dark] {
  --md3-primary: #a3c9fe;
  --md3-on-primary: #003257;
  --md3-primary-container: #00497b;
  --md3-on-primary-container: #d4e3fe;
  --md3-secondary: #f4b5cb;
  --md3-on-secondary: #511f34;
  --md3-secondary-container: #6b364b;
  --md3-on-secondary-container: #ffd9e5;
  --md3-tertiary: #f5b7bd;
  --md3-on-tertiary: #512129;
  --md3-tertiary-container: #6a383f;
  --md3-on-tertiary-container: #ffd9dd;
  --md3-error: #feb4b0;
  --md3-on-error: #680016;
  --md3-error-container: #920023;
  --md3-on-error-container: #fedad8;
  --md3-surface: #101419;
  --md3-on-surface: #dfe3ea;
  --md3-surface-variant: #404753;
  --md3-on-surface-variant: #bfc7d5;
  --md3-surface-container-lowest: #0a0e15;
  --md3-surface-container-low: #191c21;
  --md3-surface-container: #1d2025;
  --md3-surface-container-high: #272a30;
  --md3-surface-container-highest: #32353b;
  --md3-outline: #89919e;
  --md3-outline-variant: #404753;
  --md3-inverse-surface: #dfe3ea;
  --md3-inverse-on-surface: #2d3136;
  --md3-inverse-primary: #0062a1;
  --md3-background: #101419;
  --md3-on-background: #dfe3ea;
}

/* ============================================================
 * 2. MULTI-TENANT BRAND THEMING (10 Sites)
 * ============================================================
 * Generated from MD3 dynamic color system.
 * Each site's palette is generated from a single source color
 * using HCT (Hue, Chroma, Tone) color space math.
 *
 * PLATFORM FAMILIES:
 * - Dating: DNA Romance, DateMetriX, DNA Matchmakers
 * - Family: Gene Pool, Paired Genes
 * - Medical: Heritable Health, WellMatched, Gene Recovery
 * - AI: AI Dating Wingman
 * - Ancestry: Global DNA Tree
 * ============================================================ */
/* --- DATING PLATFORMS (Blue/Purple + Pink (romance, trust)) --- */
/* DNA Romance (Default) - Source: #0F75BD | Hue: 270° */
/* Colors defined in :root above */
[data-site=dnaromance],
body.site-dnaromance {
  /* DNA Romance uses :root defaults - no overrides needed */
}

/* DateMetriX - Source: #6A1B9A | Hue: 316° | Psychology, depth, insight */
[data-site=datemetrix],
body.site-datemetrix {
  --md3-primary: #6A1B9A;
  --md3-on-primary: #ffffff;
  --md3-primary-container: #f3daff;
  --md3-on-primary-container: #30004f;
  --md3-secondary: #695971;
  --md3-on-secondary: #ffffff;
  --md3-secondary-container: #efdcf8;
  --md3-on-secondary-container: #24162b;
  --md3-tertiary: #854f54;
  --md3-on-tertiary: #ffffff;
  --md3-tertiary-container: #ffdadc;
  --md3-on-tertiary-container: #380b13;
  --md3-error: #bf0031;
  --md3-on-error: #ffffff;
  --md3-error-container: #fedad8;
  --md3-on-error-container: #430002;
  --md3-surface: #fdf8ff;
  --md3-on-surface: #1e1a1f;
  --md3-surface-variant: #e9dfed;
  --md3-on-surface-variant: #4c444f;
  --md3-surface-container-lowest: #ffffff;
  --md3-surface-container-low: #f7f2f9;
  --md3-surface-container: #f1ecf3;
  --md3-surface-container-high: #ebe6ed;
  --md3-surface-container-highest: #e6e1e8;
  --md3-outline: #7d7480;
  --md3-outline-variant: #cdc3d1;
  --md3-inverse-surface: #332f34;
  --md3-inverse-on-surface: #f4eff6;
  --md3-inverse-primary: #e6b4ff;
  --md3-background: #fdf8ff;
  --md3-on-background: #1e1a1f;
  /* Backward-compatible aliases */
  --brand-primary: var(--md3-primary);
  --brand-secondary: var(--md3-secondary);
  --brand-primary-light: var(--md3-primary-container);
  --brand-secondary-light: var(--md3-secondary-container);
}

@media (prefers-color-scheme: dark) {
  [data-site=datemetrix],
  body.site-datemetrix {
    --md3-primary: #e6b4ff;
    --md3-on-primary: #4e007b;
    --md3-primary-container: #6a1b9a;
    --md3-on-primary-container: #f3daff;
    --md3-secondary: #d3c0db;
    --md3-on-secondary: #392b41;
    --md3-secondary-container: #514158;
    --md3-on-secondary-container: #efdcf8;
    --md3-tertiary: #f5b7bb;
    --md3-on-tertiary: #512128;
    --md3-tertiary-container: #6a383d;
    --md3-on-tertiary-container: #ffdadc;
    --md3-error: #feb4b0;
    --md3-on-error: #680016;
    --md3-error-container: #920023;
    --md3-on-error-container: #fedad8;
    --md3-surface: #161217;
    --md3-on-surface: #e6e1e8;
    --md3-surface-variant: #4c444f;
    --md3-on-surface-variant: #cdc3d1;
    --md3-surface-container-lowest: #110c13;
    --md3-surface-container-low: #1e1a1f;
    --md3-surface-container: #221e23;
    --md3-surface-container-high: #2c292e;
    --md3-surface-container-highest: #373339;
    --md3-outline: #978e9a;
    --md3-outline-variant: #4c444f;
    --md3-inverse-surface: #e6e1e8;
    --md3-inverse-on-surface: #332f34;
    --md3-inverse-primary: #8638b6;
    --md3-background: #161217;
    --md3-on-background: #e6e1e8;
  }
}
[data-bs-theme=dark] [data-site=datemetrix],
[data-bs-theme=dark] body.site-datemetrix,
[data-bs-theme=dark][data-site=datemetrix],
body.site-datemetrix[data-bs-theme=dark] {
  --md3-primary: #e6b4ff;
  --md3-on-primary: #4e007b;
  --md3-primary-container: #6a1b9a;
  --md3-on-primary-container: #f3daff;
  --md3-secondary: #d3c0db;
  --md3-on-secondary: #392b41;
  --md3-secondary-container: #514158;
  --md3-on-secondary-container: #efdcf8;
  --md3-tertiary: #f5b7bb;
  --md3-on-tertiary: #512128;
  --md3-tertiary-container: #6a383d;
  --md3-on-tertiary-container: #ffdadc;
  --md3-error: #feb4b0;
  --md3-on-error: #680016;
  --md3-error-container: #920023;
  --md3-on-error-container: #fedad8;
  --md3-surface: #161217;
  --md3-on-surface: #e6e1e8;
  --md3-surface-variant: #4c444f;
  --md3-on-surface-variant: #cdc3d1;
  --md3-surface-container-lowest: #110c13;
  --md3-surface-container-low: #1e1a1f;
  --md3-surface-container: #221e23;
  --md3-surface-container-high: #2c292e;
  --md3-surface-container-highest: #373339;
  --md3-outline: #978e9a;
  --md3-outline-variant: #4c444f;
  --md3-inverse-surface: #e6e1e8;
  --md3-inverse-on-surface: #332f34;
  --md3-inverse-primary: #8638b6;
  --md3-background: #161217;
  --md3-on-background: #e6e1e8;
}

/* DNA Matchmakers - Source: #1A237E | Hue: 300° | Premium, exclusive, elite */
[data-site=dnamatchmakers],
body.site-dnamatchmakers {
  --md3-primary: #1A237E;
  --md3-on-primary: #ffffff;
  --md3-primary-container: #e6defe;
  --md3-on-primary-container: #00115a;
  --md3-secondary: #615b75;
  --md3-on-secondary: #ffffff;
  --md3-secondary-container: #e6defd;
  --md3-on-secondary-container: #1c192e;
  --md3-tertiary: #834f5f;
  --md3-on-tertiary: #ffffff;
  --md3-tertiary-container: #ffd9e3;
  --md3-on-tertiary-container: #370a1c;
  --md3-error: #bf0031;
  --md3-on-error: #ffffff;
  --md3-error-container: #fedad8;
  --md3-on-error-container: #430002;
  --md3-surface: #faf8ff;
  --md3-on-surface: #1c1b20;
  --md3-surface-variant: #e4e0f0;
  --md3-on-surface-variant: #484551;
  --md3-surface-container-lowest: #ffffff;
  --md3-surface-container-low: #f4f2fa;
  --md3-surface-container: #efedf4;
  --md3-surface-container-high: #e9e7ef;
  --md3-surface-container-highest: #e3e1e9;
  --md3-outline: #787583;
  --md3-outline-variant: #c8c4d3;
  --md3-inverse-surface: #313035;
  --md3-inverse-on-surface: #f2f0f7;
  --md3-inverse-primary: #cbbeff;
  --md3-background: #faf8ff;
  --md3-on-background: #1c1b20;
  /* Backward-compatible aliases */
  --brand-primary: var(--md3-primary);
  --brand-secondary: var(--md3-secondary);
  --brand-primary-light: var(--md3-primary-container);
  --brand-secondary-light: var(--md3-secondary-container);
}

@media (prefers-color-scheme: dark) {
  [data-site=dnamatchmakers],
  body.site-dnamatchmakers {
    --md3-primary: #cbbeff;
    --md3-on-primary: #1b247f;
    --md3-primary-container: #3c3999;
    --md3-on-primary-container: #e6defe;
    --md3-secondary: #cac2e0;
    --md3-on-secondary: #322d44;
    --md3-secondary-container: #49435c;
    --md3-on-secondary-container: #e6defd;
    --md3-tertiary: #f2b6c7;
    --md3-on-tertiary: #502131;
    --md3-tertiary-container: #693747;
    --md3-on-tertiary-container: #ffd9e3;
    --md3-error: #feb4b0;
    --md3-on-error: #680016;
    --md3-error-container: #920023;
    --md3-on-error-container: #fedad8;
    --md3-surface: #141218;
    --md3-on-surface: #e3e1e9;
    --md3-surface-variant: #484551;
    --md3-on-surface-variant: #c8c4d3;
    --md3-surface-container-lowest: #0f0d14;
    --md3-surface-container-low: #1c1b20;
    --md3-surface-container: #201f24;
    --md3-surface-container-high: #2b292f;
    --md3-surface-container-highest: #35343a;
    --md3-outline: #928f9d;
    --md3-outline-variant: #484551;
    --md3-inverse-surface: #e3e1e9;
    --md3-inverse-on-surface: #313035;
    --md3-inverse-primary: #5951b4;
    --md3-background: #141218;
    --md3-on-background: #e3e1e9;
  }
}
[data-bs-theme=dark] [data-site=dnamatchmakers],
[data-bs-theme=dark] body.site-dnamatchmakers,
[data-bs-theme=dark][data-site=dnamatchmakers],
body.site-dnamatchmakers[data-bs-theme=dark] {
  --md3-primary: #cbbeff;
  --md3-on-primary: #1b247f;
  --md3-primary-container: #3c3999;
  --md3-on-primary-container: #e6defe;
  --md3-secondary: #cac2e0;
  --md3-on-secondary: #322d44;
  --md3-secondary-container: #49435c;
  --md3-on-secondary-container: #e6defd;
  --md3-tertiary: #f2b6c7;
  --md3-on-tertiary: #502131;
  --md3-tertiary-container: #693747;
  --md3-on-tertiary-container: #ffd9e3;
  --md3-error: #feb4b0;
  --md3-on-error: #680016;
  --md3-error-container: #920023;
  --md3-on-error-container: #fedad8;
  --md3-surface: #141218;
  --md3-on-surface: #e3e1e9;
  --md3-surface-variant: #484551;
  --md3-on-surface-variant: #c8c4d3;
  --md3-surface-container-lowest: #0f0d14;
  --md3-surface-container-low: #1c1b20;
  --md3-surface-container: #201f24;
  --md3-surface-container-high: #2b292f;
  --md3-surface-container-highest: #35343a;
  --md3-outline: #928f9d;
  --md3-outline-variant: #484551;
  --md3-inverse-surface: #e3e1e9;
  --md3-inverse-on-surface: #313035;
  --md3-inverse-primary: #5951b4;
  --md3-background: #141218;
  --md3-on-background: #e3e1e9;
}

/* --- MEDICAL PLATFORMS (Teal/Green/Purple (calm, professional, health)) --- */
/* Heritable Health - Source: #00695C | Hue: 180° | Clinical calm, health trust */
[data-site=heritablehealth],
body.site-heritablehealth {
  --md3-primary: #00695C;
  --md3-on-primary: #ffffff;
  --md3-primary-container: #58fbe1;
  --md3-on-primary-container: #00211b;
  --md3-secondary: #3e665e;
  --md3-on-secondary: #ffffff;
  --md3-secondary-container: #c0ebe2;
  --md3-on-secondary-container: #00211b;
  --md3-tertiary: #216580;
  --md3-on-tertiary: #ffffff;
  --md3-tertiary-container: #bfe9ff;
  --md3-on-tertiary-container: #001f2b;
  --md3-error: #bf0031;
  --md3-on-error: #ffffff;
  --md3-error-container: #fedad8;
  --md3-on-error-container: #430002;
  --md3-surface: #f1fcf9;
  --md3-on-surface: #151d1b;
  --md3-surface-variant: #d2e7e2;
  --md3-on-surface-variant: #384a46;
  --md3-surface-container-lowest: #ffffff;
  --md3-surface-container-low: #ebf6f3;
  --md3-surface-container: #e5f0ee;
  --md3-surface-container-high: #e0eae8;
  --md3-surface-container-highest: #dae5e2;
  --md3-outline: #687b77;
  --md3-outline-variant: #b6cbc6;
  --md3-inverse-surface: #2a3230;
  --md3-inverse-on-surface: #e8f3f0;
  --md3-inverse-primary: #2ddec5;
  --md3-background: #f1fcf9;
  --md3-on-background: #151d1b;
  /* Backward-compatible aliases */
  --brand-primary: var(--md3-primary);
  --brand-secondary: var(--md3-secondary);
  --brand-primary-light: var(--md3-primary-container);
  --brand-secondary-light: var(--md3-secondary-container);
}

@media (prefers-color-scheme: dark) {
  [data-site=heritablehealth],
  body.site-heritablehealth {
    --md3-primary: #2ddec5;
    --md3-on-primary: #003830;
    --md3-primary-container: #005046;
    --md3-on-primary-container: #58fbe1;
    --md3-secondary: #a4cfc6;
    --md3-on-secondary: #0e3730;
    --md3-secondary-container: #264d46;
    --md3-on-secondary-container: #c0ebe2;
    --md3-tertiary: #92cfec;
    --md3-on-tertiary: #003547;
    --md3-tertiary-container: #004d65;
    --md3-on-tertiary-container: #bfe9ff;
    --md3-error: #feb4b0;
    --md3-on-error: #680016;
    --md3-error-container: #920023;
    --md3-on-error-container: #fedad8;
    --md3-surface: #0b1513;
    --md3-on-surface: #dae5e2;
    --md3-surface-variant: #384a46;
    --md3-on-surface-variant: #b6cbc6;
    --md3-surface-container-lowest: #04100e;
    --md3-surface-container-low: #151d1b;
    --md3-surface-container: #19211f;
    --md3-surface-container-high: #232c2a;
    --md3-surface-container-highest: #2e3635;
    --md3-outline: #819590;
    --md3-outline-variant: #384a46;
    --md3-inverse-surface: #dae5e2;
    --md3-inverse-on-surface: #2a3230;
    --md3-inverse-primary: #006b5e;
    --md3-background: #0b1513;
    --md3-on-background: #dae5e2;
  }
}
[data-bs-theme=dark] [data-site=heritablehealth],
[data-bs-theme=dark] body.site-heritablehealth,
[data-bs-theme=dark][data-site=heritablehealth],
body.site-heritablehealth[data-bs-theme=dark] {
  --md3-primary: #2ddec5;
  --md3-on-primary: #003830;
  --md3-primary-container: #005046;
  --md3-on-primary-container: #58fbe1;
  --md3-secondary: #a4cfc6;
  --md3-on-secondary: #0e3730;
  --md3-secondary-container: #264d46;
  --md3-on-secondary-container: #c0ebe2;
  --md3-tertiary: #92cfec;
  --md3-on-tertiary: #003547;
  --md3-tertiary-container: #004d65;
  --md3-on-tertiary-container: #bfe9ff;
  --md3-error: #feb4b0;
  --md3-on-error: #680016;
  --md3-error-container: #920023;
  --md3-on-error-container: #fedad8;
  --md3-surface: #0b1513;
  --md3-on-surface: #dae5e2;
  --md3-surface-variant: #384a46;
  --md3-on-surface-variant: #b6cbc6;
  --md3-surface-container-lowest: #04100e;
  --md3-surface-container-low: #151d1b;
  --md3-surface-container: #19211f;
  --md3-surface-container-high: #232c2a;
  --md3-surface-container-highest: #2e3635;
  --md3-outline: #819590;
  --md3-outline-variant: #384a46;
  --md3-inverse-surface: #dae5e2;
  --md3-inverse-on-surface: #2a3230;
  --md3-inverse-primary: #006b5e;
  --md3-background: #0b1513;
  --md3-on-background: #dae5e2;
}

/* WellMatched - Source: #2E7D32 | Hue: 140° | Wellness, nature, health */
[data-site=wellmatched],
body.site-wellmatched {
  --md3-primary: #2E7D32;
  --md3-on-primary: #ffffff;
  --md3-primary-container: #a6f5a1;
  --md3-on-primary-container: #042100;
  --md3-secondary: #50644d;
  --md3-on-secondary: #ffffff;
  --md3-secondary-container: #d2e9cf;
  --md3-on-secondary-container: #0f1f0b;
  --md3-tertiary: #14696b;
  --md3-on-tertiary: #ffffff;
  --md3-tertiary-container: #a4eff1;
  --md3-on-tertiary-container: #002021;
  --md3-error: #bf0031;
  --md3-on-error: #ffffff;
  --md3-error-container: #fedad8;
  --md3-on-error-container: #430002;
  --md3-surface: #f5fbf4;
  --md3-on-surface: #191d18;
  --md3-surface-variant: #dae6d8;
  --md3-on-surface-variant: #40493f;
  --md3-surface-container-lowest: #ffffff;
  --md3-surface-container-low: #eff5ee;
  --md3-surface-container: #eaefe9;
  --md3-surface-container-high: #e4eae3;
  --md3-surface-container-highest: #dee4dd;
  --md3-outline: #707a6e;
  --md3-outline-variant: #becabd;
  --md3-inverse-surface: #2d322d;
  --md3-inverse-on-surface: #edf2ec;
  --md3-inverse-primary: #8bd986;
  --md3-background: #f5fbf4;
  --md3-on-background: #191d18;
  /* Backward-compatible aliases */
  --brand-primary: var(--md3-primary);
  --brand-secondary: var(--md3-secondary);
  --brand-primary-light: var(--md3-primary-container);
  --brand-secondary-light: var(--md3-secondary-container);
}

@media (prefers-color-scheme: dark) {
  [data-site=wellmatched],
  body.site-wellmatched {
    --md3-primary: #8bd986;
    --md3-on-primary: #003a07;
    --md3-primary-container: #005310;
    --md3-on-primary-container: #a6f5a1;
    --md3-secondary: #b6cdb3;
    --md3-on-secondary: #233521;
    --md3-secondary-container: #384c36;
    --md3-on-secondary-container: #d2e9cf;
    --md3-tertiary: #89d3d5;
    --md3-on-tertiary: #003739;
    --md3-tertiary-container: #004f52;
    --md3-on-tertiary-container: #a4eff1;
    --md3-error: #feb4b0;
    --md3-on-error: #680016;
    --md3-error-container: #920023;
    --md3-on-error-container: #fedad8;
    --md3-surface: #10150f;
    --md3-on-surface: #dee4dd;
    --md3-surface-variant: #40493f;
    --md3-on-surface-variant: #becabd;
    --md3-surface-container-lowest: #091008;
    --md3-surface-container-low: #191d18;
    --md3-surface-container: #1d211c;
    --md3-surface-container-high: #272b26;
    --md3-surface-container-highest: #313631;
    --md3-outline: #899487;
    --md3-outline-variant: #40493f;
    --md3-inverse-surface: #dee4dd;
    --md3-inverse-on-surface: #2d322d;
    --md3-inverse-primary: #1a6d23;
    --md3-background: #10150f;
    --md3-on-background: #dee4dd;
  }
}
[data-bs-theme=dark] [data-site=wellmatched],
[data-bs-theme=dark] body.site-wellmatched,
[data-bs-theme=dark][data-site=wellmatched],
body.site-wellmatched[data-bs-theme=dark] {
  --md3-primary: #8bd986;
  --md3-on-primary: #003a07;
  --md3-primary-container: #005310;
  --md3-on-primary-container: #a6f5a1;
  --md3-secondary: #b6cdb3;
  --md3-on-secondary: #233521;
  --md3-secondary-container: #384c36;
  --md3-on-secondary-container: #d2e9cf;
  --md3-tertiary: #89d3d5;
  --md3-on-tertiary: #003739;
  --md3-tertiary-container: #004f52;
  --md3-on-tertiary-container: #a4eff1;
  --md3-error: #feb4b0;
  --md3-on-error: #680016;
  --md3-error-container: #920023;
  --md3-on-error-container: #fedad8;
  --md3-surface: #10150f;
  --md3-on-surface: #dee4dd;
  --md3-surface-variant: #40493f;
  --md3-on-surface-variant: #becabd;
  --md3-surface-container-lowest: #091008;
  --md3-surface-container-low: #191d18;
  --md3-surface-container: #1d211c;
  --md3-surface-container-high: #272b26;
  --md3-surface-container-highest: #313631;
  --md3-outline: #899487;
  --md3-outline-variant: #40493f;
  --md3-inverse-surface: #dee4dd;
  --md3-inverse-on-surface: #2d322d;
  --md3-inverse-primary: #1a6d23;
  --md3-background: #10150f;
  --md3-on-background: #dee4dd;
}

/* Gene Recovery - Source: #2E7D32 | Hue: 128° | Healing, growth, recovery */
[data-site=generecovery],
body.site-generecovery {
  --md3-primary: #2E7D32;
  --md3-on-primary: #ffffff;
  --md3-primary-container: #b8f5b0;
  --md3-on-primary-container: #002204;
  --md3-secondary: #52634f;
  --md3-on-secondary: #ffffff;
  --md3-secondary-container: #d5e8cf;
  --md3-on-secondary-container: #111f0f;
  --md3-tertiary: #386568;
  --md3-on-tertiary: #ffffff;
  --md3-tertiary-container: #bbebee;
  --md3-on-tertiary-container: #002022;
  --md3-error: #bf0031;
  --md3-on-error: #ffffff;
  --md3-error-container: #fedad8;
  --md3-on-error-container: #410009;
  --md3-surface: #fcfcf6;
  --md3-on-surface: #1a1c19;
  --md3-surface-variant: #dee5d8;
  --md3-on-surface-variant: #424940;
  --md3-surface-container-lowest: #ffffff;
  --md3-surface-container-low: #f6f6f0;
  --md3-surface-container: #f0f1eb;
  --md3-surface-container-high: #eaebe5;
  --md3-surface-container-highest: #e4e6e0;
  --md3-outline: #72796e;
  --md3-outline-variant: #c2c9bd;
  --md3-inverse-surface: #2f312d;
  --md3-inverse-on-surface: #f0f1eb;
  --md3-inverse-primary: #9dd896;
  --md3-background: #fcfcf6;
  --md3-on-background: #1a1c19;
  /* Backward-compatible aliases */
  --brand-primary: var(--md3-primary);
  --brand-secondary: var(--md3-secondary);
  --brand-primary-light: var(--md3-primary-container);
  --brand-secondary-light: var(--md3-secondary-container);
}

@media (prefers-color-scheme: dark) {
  [data-site=generecovery],
  body.site-generecovery {
    --md3-primary: #9dd896;
    --md3-on-primary: #00390a;
    --md3-primary-container: #1a6323;
    --md3-on-primary-container: #b8f5b0;
    --md3-secondary: #b9ccb4;
    --md3-on-secondary: #253424;
    --md3-secondary-container: #3b4b39;
    --md3-on-secondary-container: #d5e8cf;
    --md3-tertiary: #a0ced2;
    --md3-on-tertiary: #003739;
    --md3-tertiary-container: #1f4d50;
    --md3-on-tertiary-container: #bbebee;
    --md3-error: #feb4b0;
    --md3-on-error: #680016;
    --md3-error-container: #920023;
    --md3-on-error-container: #fedad8;
    --md3-surface: #121412;
    --md3-on-surface: #e2e3dd;
    --md3-surface-variant: #424940;
    --md3-on-surface-variant: #c2c9bd;
    --md3-surface-container-lowest: #0d0f0c;
    --md3-surface-container-low: #1a1c19;
    --md3-surface-container: #1e201d;
    --md3-surface-container-high: #282a27;
    --md3-surface-container-highest: #333532;
    --md3-outline: #8c9388;
    --md3-outline-variant: #424940;
    --md3-inverse-surface: #e2e3dd;
    --md3-inverse-on-surface: #2f312d;
    --md3-inverse-primary: #2E7D32;
    --md3-background: #121412;
    --md3-on-background: #e2e3dd;
  }
}
[data-bs-theme=dark] [data-site=generecovery],
[data-bs-theme=dark] body.site-generecovery,
[data-bs-theme=dark][data-site=generecovery],
body.site-generecovery[data-bs-theme=dark] {
  --md3-primary: #9dd896;
  --md3-on-primary: #00390a;
  --md3-primary-container: #1a6323;
  --md3-on-primary-container: #b8f5b0;
  --md3-secondary: #b9ccb4;
  --md3-on-secondary: #253424;
  --md3-secondary-container: #3b4b39;
  --md3-on-secondary-container: #d5e8cf;
  --md3-tertiary: #a0ced2;
  --md3-on-tertiary: #003739;
  --md3-tertiary-container: #1f4d50;
  --md3-on-tertiary-container: #bbebee;
  --md3-error: #feb4b0;
  --md3-on-error: #680016;
  --md3-error-container: #920023;
  --md3-on-error-container: #fedad8;
  --md3-surface: #121412;
  --md3-on-surface: #e2e3dd;
  --md3-surface-variant: #424940;
  --md3-on-surface-variant: #c2c9bd;
  --md3-surface-container-lowest: #0d0f0c;
  --md3-surface-container-low: #1a1c19;
  --md3-surface-container: #1e201d;
  --md3-surface-container-high: #282a27;
  --md3-surface-container-highest: #333532;
  --md3-outline: #8c9388;
  --md3-outline-variant: #424940;
  --md3-inverse-surface: #e2e3dd;
  --md3-inverse-on-surface: #2f312d;
  --md3-inverse-primary: #2E7D32;
  --md3-background: #121412;
  --md3-on-background: #e2e3dd;
}

/* --- FAMILY PLATFORMS (Blue/Purple + Warm (trust, bonding)) --- */
/* Gene Pool - Source: #00838F | Hue: 211° | Life, growth, family planning */
[data-site=genepool],
body.site-genepool {
  --md3-primary: #00838F;
  --md3-on-primary: #ffffff;
  --md3-primary-container: #8ef2ff;
  --md3-on-primary-container: #002024;
  --md3-secondary: #38656b;
  --md3-on-secondary: #ffffff;
  --md3-secondary-container: #bbebf1;
  --md3-on-secondary-container: #002024;
  --md3-tertiary: #436085;
  --md3-on-tertiary: #ffffff;
  --md3-tertiary-container: #d3e3ff;
  --md3-on-tertiary-container: #001d36;
  --md3-error: #bf0031;
  --md3-on-error: #ffffff;
  --md3-error-container: #fedad8;
  --md3-on-error-container: #430002;
  --md3-surface: #f0fbfd;
  --md3-on-surface: #151d1e;
  --md3-surface-variant: #d0e7ea;
  --md3-on-surface-variant: #374a4d;
  --md3-surface-container-lowest: #ffffff;
  --md3-surface-container-low: #eaf6f7;
  --md3-surface-container: #e5f0f1;
  --md3-surface-container-high: #dfeaec;
  --md3-surface-container-highest: #d9e5e6;
  --md3-outline: #667b7e;
  --md3-outline-variant: #b4cbce;
  --md3-inverse-surface: #293233;
  --md3-inverse-on-surface: #e7f3f4;
  --md3-inverse-primary: #0cdbee;
  --md3-background: #f0fbfd;
  --md3-on-background: #151d1e;
  /* Backward-compatible aliases */
  --brand-primary: var(--md3-primary);
  --brand-secondary: var(--md3-secondary);
  --brand-primary-light: var(--md3-primary-container);
  --brand-secondary-light: var(--md3-secondary-container);
}

@media (prefers-color-scheme: dark) {
  [data-site=genepool],
  body.site-genepool {
    --md3-primary: #0cdbee;
    --md3-on-primary: #00363c;
    --md3-primary-container: #004f56;
    --md3-on-primary-container: #8ef2ff;
    --md3-secondary: #a0cfd5;
    --md3-on-secondary: #01363c;
    --md3-secondary-container: #1f4d53;
    --md3-on-secondary-container: #bbebf1;
    --md3-tertiary: #adc8f3;
    --md3-on-tertiary: #0b3253;
    --md3-tertiary-container: #29486c;
    --md3-on-tertiary-container: #d3e3ff;
    --md3-error: #feb4b0;
    --md3-on-error: #680016;
    --md3-error-container: #920023;
    --md3-on-error-container: #fedad8;
    --md3-surface: #0b1516;
    --md3-on-surface: #d9e5e6;
    --md3-surface-variant: #374a4d;
    --md3-on-surface-variant: #b4cbce;
    --md3-surface-container-lowest: #031012;
    --md3-surface-container-low: #151d1e;
    --md3-surface-container: #192122;
    --md3-surface-container-high: #232b2d;
    --md3-surface-container-highest: #2d3638;
    --md3-outline: #7f9597;
    --md3-outline-variant: #374a4d;
    --md3-inverse-surface: #d9e5e6;
    --md3-inverse-on-surface: #293233;
    --md3-inverse-primary: #026972;
    --md3-background: #0b1516;
    --md3-on-background: #d9e5e6;
  }
}
[data-bs-theme=dark] [data-site=genepool],
[data-bs-theme=dark] body.site-genepool,
[data-bs-theme=dark][data-site=genepool],
body.site-genepool[data-bs-theme=dark] {
  --md3-primary: #0cdbee;
  --md3-on-primary: #00363c;
  --md3-primary-container: #004f56;
  --md3-on-primary-container: #8ef2ff;
  --md3-secondary: #a0cfd5;
  --md3-on-secondary: #01363c;
  --md3-secondary-container: #1f4d53;
  --md3-on-secondary-container: #bbebf1;
  --md3-tertiary: #adc8f3;
  --md3-on-tertiary: #0b3253;
  --md3-tertiary-container: #29486c;
  --md3-on-tertiary-container: #d3e3ff;
  --md3-error: #feb4b0;
  --md3-on-error: #680016;
  --md3-error-container: #920023;
  --md3-on-error-container: #fedad8;
  --md3-surface: #0b1516;
  --md3-on-surface: #d9e5e6;
  --md3-surface-variant: #374a4d;
  --md3-on-surface-variant: #b4cbce;
  --md3-surface-container-lowest: #031012;
  --md3-surface-container-low: #151d1e;
  --md3-surface-container: #192122;
  --md3-surface-container-high: #232b2d;
  --md3-surface-container-highest: #2d3638;
  --md3-outline: #7f9597;
  --md3-outline-variant: #374a4d;
  --md3-inverse-surface: #d9e5e6;
  --md3-inverse-on-surface: #293233;
  --md3-inverse-primary: #026972;
  --md3-background: #0b1516;
  --md3-on-background: #d9e5e6;
}

/* Paired Genes - Source: #5E35B1 | Hue: 308° | Couples, genetics, bonding */
[data-site=pairedgenes],
body.site-pairedgenes {
  --md3-primary: #5E35B1;
  --md3-on-primary: #ffffff;
  --md3-primary-container: #ecdcff;
  --md3-on-primary-container: #13006b;
  --md3-secondary: #655a73;
  --md3-on-secondary: #ffffff;
  --md3-secondary-container: #ebddfa;
  --md3-on-secondary-container: #20172d;
  --md3-tertiary: #844f5a;
  --md3-on-tertiary: #ffffff;
  --md3-tertiary-container: #ffd9df;
  --md3-on-tertiary-container: #380a18;
  --md3-error: #bf0031;
  --md3-on-error: #ffffff;
  --md3-error-container: #fedad8;
  --md3-on-error-container: #430002;
  --md3-surface: #fbf8ff;
  --md3-on-surface: #1d1b20;
  --md3-surface-variant: #e7e0ee;
  --md3-on-surface-variant: #4a4550;
  --md3-surface-container-lowest: #ffffff;
  --md3-surface-container-low: #f6f2fa;
  --md3-surface-container: #f0ecf4;
  --md3-surface-container-high: #eae7ee;
  --md3-surface-container-highest: #e4e1e8;
  --md3-outline: #7b7582;
  --md3-outline-variant: #cac4d2;
  --md3-inverse-surface: #322f35;
  --md3-inverse-on-surface: #f3eff7;
  --md3-inverse-primary: #d7bafe;
  --md3-background: #fbf8ff;
  --md3-on-background: #1d1b20;
  /* Backward-compatible aliases */
  --brand-primary: var(--md3-primary);
  --brand-secondary: var(--md3-secondary);
  --brand-primary-light: var(--md3-primary-container);
  --brand-secondary-light: var(--md3-secondary-container);
}

@media (prefers-color-scheme: dark) {
  [data-site=pairedgenes],
  body.site-pairedgenes {
    --md3-primary: #d7bafe;
    --md3-on-primary: #34118a;
    --md3-primary-container: #522ba5;
    --md3-on-primary-container: #ecdcff;
    --md3-secondary: #cec1de;
    --md3-on-secondary: #362c43;
    --md3-secondary-container: #4d425a;
    --md3-on-secondary-container: #ebddfa;
    --md3-tertiary: #f4b6c1;
    --md3-on-tertiary: #51212c;
    --md3-tertiary-container: #6a3742;
    --md3-on-tertiary-container: #ffd9df;
    --md3-error: #feb4b0;
    --md3-on-error: #680016;
    --md3-error-container: #920023;
    --md3-on-error-container: #fedad8;
    --md3-surface: #151218;
    --md3-on-surface: #e4e1e8;
    --md3-surface-variant: #4a4550;
    --md3-on-surface-variant: #cac4d2;
    --md3-surface-container-lowest: #100d14;
    --md3-surface-container-low: #1d1b20;
    --md3-surface-container: #211f24;
    --md3-surface-container-high: #2b292e;
    --md3-surface-container-highest: #363439;
    --md3-outline: #948e9c;
    --md3-outline-variant: #4a4550;
    --md3-inverse-surface: #e4e1e8;
    --md3-inverse-on-surface: #322f35;
    --md3-inverse-primary: #6f43c1;
    --md3-background: #151218;
    --md3-on-background: #e4e1e8;
  }
}
[data-bs-theme=dark] [data-site=pairedgenes],
[data-bs-theme=dark] body.site-pairedgenes,
[data-bs-theme=dark][data-site=pairedgenes],
body.site-pairedgenes[data-bs-theme=dark] {
  --md3-primary: #d7bafe;
  --md3-on-primary: #34118a;
  --md3-primary-container: #522ba5;
  --md3-on-primary-container: #ecdcff;
  --md3-secondary: #cec1de;
  --md3-on-secondary: #362c43;
  --md3-secondary-container: #4d425a;
  --md3-on-secondary-container: #ebddfa;
  --md3-tertiary: #f4b6c1;
  --md3-on-tertiary: #51212c;
  --md3-tertiary-container: #6a3742;
  --md3-on-tertiary-container: #ffd9df;
  --md3-error: #feb4b0;
  --md3-on-error: #680016;
  --md3-error-container: #920023;
  --md3-on-error-container: #fedad8;
  --md3-surface: #151218;
  --md3-on-surface: #e4e1e8;
  --md3-surface-variant: #4a4550;
  --md3-on-surface-variant: #cac4d2;
  --md3-surface-container-lowest: #100d14;
  --md3-surface-container-low: #1d1b20;
  --md3-surface-container: #211f24;
  --md3-surface-container-high: #2b292e;
  --md3-surface-container-highest: #363439;
  --md3-outline: #948e9c;
  --md3-outline-variant: #4a4550;
  --md3-inverse-surface: #e4e1e8;
  --md3-inverse-on-surface: #322f35;
  --md3-inverse-primary: #6f43c1;
  --md3-background: #151218;
  --md3-on-background: #e4e1e8;
}

/* --- AI PLATFORMS (Indigo + Pink (wisdom, technology)) --- */
/* AI Dating Wingman - Source: #5C6BC0 | Hue: 292° | AI, technology, innovation */
[data-site=datingwingman],
body.site-datingwingman {
  --md3-primary: #5C6BC0;
  --md3-on-primary: #ffffff;
  --md3-primary-container: #e0e0ff;
  --md3-on-primary-container: #001849;
  --md3-secondary: #5c5c76;
  --md3-on-secondary: #ffffff;
  --md3-secondary-container: #e0e0ff;
  --md3-on-secondary-container: #171a30;
  --md3-tertiary: #815065;
  --md3-on-tertiary: #ffffff;
  --md3-tertiary-container: #ffd8e7;
  --md3-on-tertiary-container: #360b21;
  --md3-error: #bf0031;
  --md3-on-error: #ffffff;
  --md3-error-container: #fedad8;
  --md3-on-error-container: #430002;
  --md3-surface: #f9f9ff;
  --md3-on-surface: #1b1b20;
  --md3-surface-variant: #e1e1f0;
  --md3-on-surface-variant: #464652;
  --md3-surface-container-lowest: #ffffff;
  --md3-surface-container-low: #f3f3fb;
  --md3-surface-container: #ededf5;
  --md3-surface-container-high: #e8e7ef;
  --md3-surface-container-highest: #e2e2e9;
  --md3-outline: #767683;
  --md3-outline-variant: #c5c5d4;
  --md3-inverse-surface: #303036;
  --md3-inverse-on-surface: #f0f0f8;
  --md3-inverse-primary: #bfc2ff;
  --md3-background: #f9f9ff;
  --md3-on-background: #1b1b20;
  /* Backward-compatible aliases */
  --brand-primary: var(--md3-primary);
  --brand-secondary: var(--md3-secondary);
  --brand-primary-light: var(--md3-primary-container);
  --brand-secondary-light: var(--md3-secondary-container);
}

@media (prefers-color-scheme: dark) {
  [data-site=datingwingman],
  body.site-datingwingman {
    --md3-primary: #bfc2ff;
    --md3-on-primary: #002c73;
    --md3-primary-container: #274190;
    --md3-on-primary-container: #e0e0ff;
    --md3-secondary: #c4c4e2;
    --md3-on-secondary: #2d2e46;
    --md3-secondary-container: #44455e;
    --md3-on-secondary-container: #e0e0ff;
    --md3-tertiary: #efb7ce;
    --md3-on-tertiary: #4e2136;
    --md3-tertiary-container: #67384d;
    --md3-on-tertiary-container: #ffd8e7;
    --md3-error: #feb4b0;
    --md3-on-error: #680016;
    --md3-error-container: #920023;
    --md3-on-error-container: #fedad8;
    --md3-surface: #131318;
    --md3-on-surface: #e2e2e9;
    --md3-surface-variant: #464652;
    --md3-on-surface-variant: #c5c5d4;
    --md3-surface-container-lowest: #0e0d14;
    --md3-surface-container-low: #1b1b20;
    --md3-surface-container: #1f1f25;
    --md3-surface-container-high: #29292f;
    --md3-surface-container-highest: #34343a;
    --md3-outline: #908f9e;
    --md3-outline-variant: #464652;
    --md3-inverse-surface: #e2e2e9;
    --md3-inverse-on-surface: #303036;
    --md3-inverse-primary: #4658ab;
    --md3-background: #131318;
    --md3-on-background: #e2e2e9;
  }
}
[data-bs-theme=dark] [data-site=datingwingman],
[data-bs-theme=dark] body.site-datingwingman,
[data-bs-theme=dark][data-site=datingwingman],
body.site-datingwingman[data-bs-theme=dark] {
  --md3-primary: #bfc2ff;
  --md3-on-primary: #002c73;
  --md3-primary-container: #274190;
  --md3-on-primary-container: #e0e0ff;
  --md3-secondary: #c4c4e2;
  --md3-on-secondary: #2d2e46;
  --md3-secondary-container: #44455e;
  --md3-on-secondary-container: #e0e0ff;
  --md3-tertiary: #efb7ce;
  --md3-on-tertiary: #4e2136;
  --md3-tertiary-container: #67384d;
  --md3-on-tertiary-container: #ffd8e7;
  --md3-error: #feb4b0;
  --md3-on-error: #680016;
  --md3-error-container: #920023;
  --md3-on-error-container: #fedad8;
  --md3-surface: #131318;
  --md3-on-surface: #e2e2e9;
  --md3-surface-variant: #464652;
  --md3-on-surface-variant: #c5c5d4;
  --md3-surface-container-lowest: #0e0d14;
  --md3-surface-container-low: #1b1b20;
  --md3-surface-container: #1f1f25;
  --md3-surface-container-high: #29292f;
  --md3-surface-container-highest: #34343a;
  --md3-outline: #908f9e;
  --md3-outline-variant: #464652;
  --md3-inverse-surface: #e2e2e9;
  --md3-inverse-on-surface: #303036;
  --md3-inverse-primary: #4658ab;
  --md3-background: #131318;
  --md3-on-background: #e2e2e9;
}

/* --- ANCESTRY PLATFORMS (Brown + Teal (heritage, discovery)) --- */
/* Global DNA Tree - Source: #5D4037 | Hue: 43° | Heritage, earth, roots */
[data-site=globaldnatree],
body.site-globaldnatree {
  --md3-primary: #5D4037;
  --md3-on-primary: #ffffff;
  --md3-primary-container: #ffdbd0;
  --md3-on-primary-container: #360f00;
  --md3-secondary: #77574d;
  --md3-on-secondary: #ffffff;
  --md3-secondary-container: #ffdbd0;
  --md3-on-secondary-container: #2e150a;
  --md3-tertiary: #636038;
  --md3-on-tertiary: #ffffff;
  --md3-tertiary-container: #eae4b6;
  --md3-on-tertiary-container: #1f1c00;
  --md3-error: #bf0031;
  --md3-on-error: #ffffff;
  --md3-error-container: #fedad8;
  --md3-on-error-container: #430002;
  --md3-surface: #fff8f6;
  --md3-on-surface: #211a18;
  --md3-surface-variant: #f2ded8;
  --md3-on-surface-variant: #53433e;
  --md3-surface-container-lowest: #ffffff;
  --md3-surface-container-low: #fcf1ee;
  --md3-surface-container: #f6ece9;
  --md3-surface-container-high: #f0e6e3;
  --md3-surface-container-highest: #eae0dd;
  --md3-outline: #85736e;
  --md3-outline-variant: #d6c2bc;
  --md3-inverse-surface: #362f2c;
  --md3-inverse-on-surface: #f9efeb;
  --md3-inverse-primary: #feb59e;
  --md3-background: #fff8f6;
  --md3-on-background: #211a18;
  /* Backward-compatible aliases */
  --brand-primary: var(--md3-primary);
  --brand-secondary: var(--md3-secondary);
  --brand-primary-light: var(--md3-primary-container);
  --brand-secondary-light: var(--md3-secondary-container);
}

@media (prefers-color-scheme: dark) {
  [data-site=globaldnatree],
  body.site-globaldnatree {
    --md3-primary: #feb59e;
    --md3-on-primary: #611300;
    --md3-primary-container: #7f2b14;
    --md3-on-primary-container: #ffdbd0;
    --md3-secondary: #e4beb3;
    --md3-on-secondary: #452921;
    --md3-secondary-container: #5d4036;
    --md3-on-secondary-container: #ffdbd0;
    --md3-tertiary: #cdc89b;
    --md3-on-tertiary: #33320c;
    --md3-tertiary-container: #4a4821;
    --md3-on-tertiary-container: #eae4b6;
    --md3-error: #feb4b0;
    --md3-on-error: #680016;
    --md3-error-container: #920023;
    --md3-on-error-container: #fedad8;
    --md3-surface: #19120f;
    --md3-on-surface: #eae0dd;
    --md3-surface-variant: #53433e;
    --md3-on-surface-variant: #d6c2bc;
    --md3-surface-container-lowest: #150c08;
    --md3-surface-container-low: #211a18;
    --md3-surface-container: #251e1c;
    --md3-surface-container-high: #302826;
    --md3-surface-container-highest: #3b3331;
    --md3-outline: #9f8d87;
    --md3-outline-variant: #53433e;
    --md3-inverse-surface: #eae0dd;
    --md3-inverse-on-surface: #362f2c;
    --md3-inverse-primary: #9c432a;
    --md3-background: #19120f;
    --md3-on-background: #eae0dd;
  }
}
[data-bs-theme=dark] [data-site=globaldnatree],
[data-bs-theme=dark] body.site-globaldnatree,
[data-bs-theme=dark][data-site=globaldnatree],
body.site-globaldnatree[data-bs-theme=dark] {
  --md3-primary: #feb59e;
  --md3-on-primary: #611300;
  --md3-primary-container: #7f2b14;
  --md3-on-primary-container: #ffdbd0;
  --md3-secondary: #e4beb3;
  --md3-on-secondary: #452921;
  --md3-secondary-container: #5d4036;
  --md3-on-secondary-container: #ffdbd0;
  --md3-tertiary: #cdc89b;
  --md3-on-tertiary: #33320c;
  --md3-tertiary-container: #4a4821;
  --md3-on-tertiary-container: #eae4b6;
  --md3-error: #feb4b0;
  --md3-on-error: #680016;
  --md3-error-container: #920023;
  --md3-on-error-container: #fedad8;
  --md3-surface: #19120f;
  --md3-on-surface: #eae0dd;
  --md3-surface-variant: #53433e;
  --md3-on-surface-variant: #d6c2bc;
  --md3-surface-container-lowest: #150c08;
  --md3-surface-container-low: #211a18;
  --md3-surface-container: #251e1c;
  --md3-surface-container-high: #302826;
  --md3-surface-container-highest: #3b3331;
  --md3-outline: #9f8d87;
  --md3-outline-variant: #53433e;
  --md3-inverse-surface: #eae0dd;
  --md3-inverse-on-surface: #362f2c;
  --md3-inverse-primary: #9c432a;
  --md3-background: #19120f;
  --md3-on-background: #eae0dd;
}

/* ============================================================
 * 3. NAVBAR GRADIENT (for templates using brand gradient)
 * ============================================================ */
/* Navbar gradient background - uses MD3 primary + secondary */
.navbar-gradient {
  background: linear-gradient(135deg, var(--md3-primary) 0%, var(--md3-secondary) 100%);
}

/* ============================================================
 * 4. BUTTON STYLES (MD3 aligned)
 * ============================================================ */
/* Primary Button - MD3 Filled */
.btn-primary,
.btn-brand {
  background-color: var(--md3-primary) !important;
  border-color: var(--md3-primary) !important;
  color: var(--md3-on-primary) !important;
  font-weight: 600;
  letter-spacing: 0.3px;
  transition: all 0.3s ease;
  box-shadow: var(--shadow-4dp);
}

.btn-primary:hover,
.btn-brand:hover {
  background-color: var(--md3-primary) !important;
  border-color: var(--md3-primary) !important;
  filter: brightness(1.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

@media (prefers-reduced-motion: reduce) {
  .btn-primary:hover,
  .btn-brand:hover {
    filter: none;
    opacity: 0.9;
  }
}
.btn-primary:active,
.btn-brand:active {
  box-shadow: var(--shadow-4dp);
  filter: brightness(0.95);
}

/* Secondary Button - MD3 Filled Tonal */
.btn-secondary,
.btn-accent {
  background-color: var(--md3-secondary-container) !important;
  border-color: var(--md3-secondary-container) !important;
  color: var(--md3-on-secondary-container) !important;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-secondary:hover,
.btn-accent:hover {
  filter: brightness(0.95);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Ghost Button - MD3 Outlined */
.btn-ghost {
  background-color: transparent !important;
  border: 2px solid var(--md3-outline) !important;
  color: var(--md3-primary) !important;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-ghost:hover {
  background-color: var(--md3-primary) !important;
  border-color: var(--md3-primary) !important;
  color: var(--md3-on-primary) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Glass Button */
.btn-glass {
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #fff !important;
  transition: all 0.3s ease;
}

.btn-glass:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Button Sizes */
.btn-xl {
  padding: 15px 40px;
  font-size: 1.125rem;
}

.btn-lg {
  padding: 12px 30px;
  font-size: 1rem;
}

.btn-sm {
  padding: 6px 15px;
  font-size: 0.875rem;
}

/* Button Width Classes */
.btn-block {
  width: 100%;
}

.btn-width-lg {
  min-width: 200px;
}

.btn-width-md {
  min-width: 150px;
}

.btn-width-sm {
  min-width: 100px;
}

/* Social Login Buttons */
.btn-google {
  background-color: #ffffff !important;
  border: 1px solid #dadce0 !important;
  color: #3c4043 !important;
}

.btn-google:hover {
  background-color: #f8f9fa !important;
  box-shadow: var(--shadow-1dp);
}

.btn-facebook {
  background-color: #1877f2 !important;
  border-color: #1877f2 !important;
  color: #ffffff !important;
}

.btn-facebook:hover {
  background-color: #166fe5 !important;
}

.btn-twitter {
  background-color: #1da1f2 !important;
  border-color: #1da1f2 !important;
  color: #ffffff !important;
}

.btn-twitter:hover {
  background-color: #1a91da !important;
}

/* ============================================================
 * 5. NAVIGATION STYLES
 * ============================================================ */
.navbar-brand {
  font-family: var(--font-family-primary);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--md3-primary) !important;
}

.navbar-nav .nav-link {
  padding: 10px 15px;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
  color: var(--md3-on-surface) !important;
}

.navbar-nav .nav-link:hover {
  color: var(--md3-primary) !important;
}

.navbar-nav .nav-link.active {
  color: var(--md3-primary) !important;
  font-weight: 600;
}

/* Dropdown improvements */
.dropdown-menu {
  border: none;
  box-shadow: var(--shadow-16dp);
  border-radius: var(--radius-md);
  padding: 10px 0;
  background-color: var(--md3-surface-container);
}

.dropdown-item {
  padding: 10px 20px;
  font-size: 14px;
  transition: all 0.2s ease;
}

.dropdown-item:hover {
  background-color: var(--md3-surface-container-highest);
  color: var(--md3-primary) !important;
  padding-left: 25px;
}

/* ============================================================
 * 6. FORM STYLES
 * ============================================================ */
.form-control,
.form-select {
  border-color: var(--md3-outline-variant);
  border-radius: var(--radius-xs);
  font-size: 14px;
  padding: 10px 15px;
  transition: all 0.3s ease;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--md3-primary);
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--md3-primary) 25%, transparent);
}

/* Custom checkbox/radio */
.form-check-input:checked {
  background-color: var(--md3-primary);
  border-color: var(--md3-primary);
}

/* Form labels */
.form-label {
  font-weight: 600;
  color: var(--md3-on-surface);
  margin-bottom: 8px;
  font-size: 14px;
}

/* ============================================================
 * 7. CARD STYLES (MD3 elevated surface)
 * ============================================================ */
.card {
  border: none;
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-md);
  transition: all 0.3s ease;
  background-color: var(--md3-surface-container-low);
}

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

.card-header {
  background-color: var(--md3-surface-container);
  border-bottom: 2px solid var(--md3-primary);
  font-weight: 600;
  padding: 15px 20px;
}

.card-body {
  padding: 20px;
}

/* Match Cards */
.match-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all 0.3s ease;
}

.match-card:hover {
  transform: scale(1.02);
  box-shadow: var(--shadow-24dp);
}

.match-card-badge {
  position: absolute;
  top: 15px;
  right: 15px;
  background: var(--md3-secondary);
  color: var(--md3-on-secondary);
  padding: 5px 15px;
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: 12px;
}

/* ============================================================
 * 8. ALERT STYLES
 * ============================================================ */
.alert-debug {
  background-color: var(--md3-surface);
  border-color: var(--md3-outline-variant);
  color: var(--md3-on-surface);
}

.alert-error {
  background-color: var(--md3-error-container);
  border-color: var(--md3-error);
  color: var(--md3-on-error-container);
}

.alert-brand {
  background-color: var(--md3-primary-container);
  border-color: var(--md3-primary);
  color: var(--md3-on-primary-container);
}

/* ============================================================
 * 9. UTILITY CLASSES
 * ============================================================ */
/* Text utilities */
.text-brand-primary {
  color: var(--md3-primary) !important;
}

.text-brand-secondary {
  color: var(--md3-secondary) !important;
}

.text-brand-accent {
  color: var(--md3-tertiary) !important;
}

/* Background utilities */
.bg-brand-primary {
  background-color: var(--md3-primary) !important;
}

.bg-brand-secondary {
  background-color: var(--md3-secondary) !important;
}

.bg-brand-accent {
  background-color: var(--md3-tertiary) !important;
}

/* Border utilities */
.border-brand-primary {
  border-color: var(--md3-primary) !important;
}

.border-brand-secondary {
  border-color: var(--md3-secondary) !important;
}

/* Gradient backgrounds */
.bg-gradient-primary {
  background: linear-gradient(135deg, var(--md3-primary) 0%, var(--md3-secondary) 100%) !important;
}

.bg-gradient-secondary {
  background: linear-gradient(135deg, var(--md3-secondary) 0%, var(--md3-tertiary) 100%) !important;
}

/* Cursor utilities */
.cursor-pointer {
  cursor: pointer !important;
}

.cursor-move {
  cursor: move !important;
}

.cursor-not-allowed {
  cursor: not-allowed !important;
}

/* Text transform */
.text-capitalize {
  text-transform: capitalize !important;
}

.text-lowercase {
  text-transform: lowercase !important;
}

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

/* Font weight */
.fw-100 {
  font-weight: 100 !important;
}

.fw-200 {
  font-weight: 200 !important;
}

.fw-300 {
  font-weight: 300 !important;
}

.fw-400 {
  font-weight: 400 !important;
}

.fw-500 {
  font-weight: 500 !important;
}

.fw-600 {
  font-weight: 600 !important;
}

.fw-700 {
  font-weight: 700 !important;
}

.fw-800 {
  font-weight: 800 !important;
}

.fw-900 {
  font-weight: 900 !important;
}

/* ============================================================
 * 10. ANIMATIONS & TRANSITIONS
 * ============================================================ */
.transition-all {
  transition: all 0.3s ease !important;
}

.transition-fast {
  transition: all 0.15s ease !important;
}

.transition-slow {
  transition: all 0.4s ease !important;
}

/* Hover lift effect */
.hover-lift:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-16dp);
}

/* Hover grow effect */
.hover-grow:hover {
  transform: scale(1.05);
}

/* Pulse animation */
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
.pulse {
  animation: pulse 2s infinite;
}

/* ============================================================
 * 11. HERO SECTIONS
 * ============================================================ */
.hero-section {
  position: relative;
  padding: 80px 0;
  background-image: url("../images/background/background3XL.53227de9949d.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
}
.hero-section h1, .hero-section h2, .hero-section h3, .hero-section h4, .hero-section h5, .hero-section h6, .hero-section p, .hero-section .lead {
  color: #fff;
}
.hero-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.6) 100%);
  z-index: 1;
}
.hero-section > * {
  position: relative;
  z-index: 2;
}

[data-site=datemetrix] .hero-section {
  background-image: url("../images/background/matchmaking_background.57d377677b3f.webp");
}

[data-site=genepool] .hero-section {
  background-image: url("../images/donors/pexels-maria-lindsey-content-creator-5834140.eb725d6cffa6.webp");
}

.gradient-hero {
  position: relative;
  padding: 100px 0 80px;
  background: linear-gradient(135deg, var(--md3-primary) 0%, var(--md3-secondary) 100%);
  color: #fff;
}
.gradient-hero h1, .gradient-hero h2, .gradient-hero h3, .gradient-hero h4, .gradient-hero h5, .gradient-hero h6, .gradient-hero p, .gradient-hero .lead {
  color: #fff !important;
}
.gradient-hero .btn-outline-light {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.8);
}
.gradient-hero .btn-outline-light:hover {
  background-color: rgba(255, 255, 255, 0.15);
  color: #ffffff !important;
  border-color: #ffffff;
}
.gradient-hero .btn-light {
  background-color: #ffffff;
  color: var(--md3-primary, #0F75BD) !important;
  border-color: #ffffff;
}
.gradient-hero .btn-light:hover {
  background-color: rgba(255, 255, 255, 0.9);
}

.hero-title {
  font-family: var(--font-family-primary);
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 20px;
  line-height: 1.2;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8), 0 4px 16px rgba(0, 0, 0, 0.4);
}

.hero-subtitle {
  font-size: 1.25rem;
  font-weight: 300;
  opacity: 0.95;
  margin-bottom: 30px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.3);
}

.text-over-image {
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8), 0 4px 16px rgba(0, 0, 0, 0.4);
}

.hero-buttons {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  justify-content: center;
}

@media (max-width: 768px) {
  .hero-title {
    font-size: 2rem;
  }
  .hero-subtitle {
    font-size: 1rem;
  }
  .hero-section {
    padding: 60px 0;
  }
}
/* ============================================================
 * 12. COMPONENT SPECIFIC STYLES
 * ============================================================ */
/* Profile cards */
.profile-card {
  text-align: center;
  padding: 30px;
}

.profile-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  margin: 0 auto 20px;
  border: 4px solid var(--md3-primary);
}

/* Stats widgets */
.stats-widget {
  padding: 20px;
  background: var(--md3-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.stats-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--md3-primary);
}

.stats-label {
  font-size: 0.875rem;
  color: var(--md3-on-surface-variant);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Timeline */
.timeline-item {
  position: relative;
  padding-left: 40px;
  margin-bottom: 30px;
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 0;
  bottom: -30px;
  width: 2px;
  background: var(--md3-outline-variant);
}

.timeline-dot {
  position: absolute;
  left: 0;
  top: 5px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--md3-primary);
  border: 3px solid var(--md3-surface);
  box-shadow: var(--shadow-4dp);
}

/**
 * Colossal-Inspired Visual Enhancements
 *
 * Purpose: Premium visual design inspired by Colossal.com
 * - Enhanced multi-tenant theming with CSS custom properties
 * - Modern spacing and layout utilities
 * - Smooth transitions and microinteractions
 * - Scientific aesthetic for DNA/genetics platforms
 *
 * Created: 2025-10-25
 */
/* ========================================
   ENHANCED CSS CUSTOM PROPERTIES
   Multi-Tenant Theme System
   ======================================== */
:root {
  /* Core Brand Colors (defaults - overridden by tenant themes) */
  --tenant-primary: var(--brand-primary, #0F75BD);
  --tenant-secondary: var(--brand-secondary, #F72C93);
  --tenant-accent: #60cfff;
  /* Semantic Colors */
  --color-text-primary: #1a1a1a;
  --color-text-secondary: #4a4a4a;
  --color-text-muted: #767676;
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #f8f9fa;
  --color-bg-dark: #1a1a1a;
  /* Scientific Palette (Colossal-inspired) */
  --color-scientific-blue: #0A4B7D;
  --color-scientific-teal: #1B7F8F;
  --color-scientific-purple: #6B46C1;
  --color-scientific-pink: #EC4899;
  /* Spacing Scale (8pt grid system) */
  --space-xs: 0.5rem; /* 8px */
  --space-sm: 1rem; /* 16px */
  --space-md: 1.5rem; /* 24px */
  --space-lg: 2.5rem; /* 40px */
  --space-xl: 4rem; /* 64px */
  --space-2xl: 6rem; /* 96px */
  --space-3xl: 8rem; /* 128px */
  /* Typography Scale (Fluid) */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.625vw, 1.5rem);
  --text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.875rem);
  --text-2xl: clamp(1.5rem, 1.3rem + 1vw, 2.25rem);
  --text-3xl: clamp(1.875rem, 1.5rem + 1.875vw, 3rem);
  --text-4xl: clamp(2.25rem, 1.8rem + 2.25vw, 3.75rem);
  --text-5xl: clamp(3rem, 2.4rem + 3vw, 5rem);
  /* Layout Constraints */
  --content-max-width: min(90rem, 100vw - 4rem);
  --content-narrow: min(42rem, 100vw - 2rem);
  --content-reading: min(65ch, 100vw - 2rem);
  /* Border Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;
  /* Shadows - Material Design Elevation (0-24dp) */
  --shadow-sm: 0 1px 3px 0 rgba(0,0,0,0.12), 0 1px 2px 0 rgba(0,0,0,0.24); /* Material 1dp */
  --shadow-md: 0 2px 4px -1px rgba(0,0,0,0.20), 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12); /* Material 4dp - cards at rest */
  --shadow-lg: 0 4px 5px -2px rgba(0,0,0,0.20), 0 7px 10px 1px rgba(0,0,0,0.14), 0 2px 16px 1px rgba(0,0,0,0.12); /* Material 8dp - raised elements */
  --shadow-xl: 0 8px 10px -5px rgba(0,0,0,0.20), 0 16px 24px 2px rgba(0,0,0,0.14), 0 6px 30px 5px rgba(0,0,0,0.12); /* Material 16dp - dialogs/modals */
  --shadow-2xl: 0 11px 15px -7px rgba(0,0,0,0.20), 0 24px 38px 3px rgba(0,0,0,0.14), 0 9px 46px 8px rgba(0,0,0,0.12); /* Material 24dp - maximum depth */
  --shadow: var(--shadow-md); /* Default shadow alias */
  /* Transitions (premium feel) */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slowest: 500ms cubic-bezier(0.4, 0, 0.2, 1);
  /* Z-index scale */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
}

/* ========================================
   FLUID TYPOGRAPHY
   Colossal-inspired scaling
   ======================================== */
.text-fluid-xs {
  font-size: var(--text-xs);
}

.text-fluid-sm {
  font-size: var(--text-sm);
}

.text-fluid-base {
  font-size: var(--text-base);
}

.text-fluid-lg {
  font-size: var(--text-lg);
}

.text-fluid-xl {
  font-size: var(--text-xl);
}

.text-fluid-2xl {
  font-size: var(--text-2xl);
}

.text-fluid-3xl {
  font-size: var(--text-3xl);
}

.text-fluid-4xl {
  font-size: var(--text-4xl);
}

.text-fluid-5xl {
  font-size: var(--text-5xl);
}

/* Enhanced display typography */
.display-fluid {
  font-size: var(--text-5xl);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.display-fluid-2 {
  font-size: var(--text-4xl);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.lead-text {
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--color-text-secondary);
}

/* ========================================
   PREMIUM SPACING UTILITIES
   Generous white space like Colossal
   ======================================== */
.space-y-xs > * + * {
  margin-top: var(--space-xs) !important;
}

.space-y-sm > * + * {
  margin-top: var(--space-sm) !important;
}

.space-y-md > * + * {
  margin-top: var(--space-md) !important;
}

.space-y-lg > * + * {
  margin-top: var(--space-lg) !important;
}

.space-y-xl > * + * {
  margin-top: var(--space-xl) !important;
}

.space-y-2xl > * + * {
  margin-top: var(--space-2xl) !important;
}

.space-y-3xl > * + * {
  margin-top: var(--space-3xl) !important;
}

.section-padding {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}

.section-padding-lg {
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-2xl);
}

@media (min-width: 768px) {
  .section-padding {
    padding-top: var(--space-2xl);
    padding-bottom: var(--space-2xl);
  }
  .section-padding-lg {
    padding-top: var(--space-3xl);
    padding-bottom: var(--space-3xl);
  }
}
/* ========================================
   CONTENT CONTAINERS
   ======================================== */
.content-container {
  max-width: var(--content-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

.content-narrow {
  max-width: var(--content-narrow);
  margin-left: auto;
  margin-right: auto;
}

.content-reading {
  max-width: var(--content-reading);
  margin-left: auto;
  margin-right: auto;
}

/* ========================================
   FULL-WIDTH SECTIONS
   Colossal-style immersive sections
   ======================================== */
.full-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.hero-section {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

@media (min-width: 768px) {
  .hero-section {
    min-height: 70vh;
  }
}
@media (min-width: 1024px) {
  .hero-section {
    min-height: 80vh;
  }
}
/* ========================================
   VIDEO BACKGROUNDS
   Like Colossal's immersive media
   ======================================== */
.video-background-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
}

.video-background-wrapper video {
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  object-fit: cover;
}

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.6));
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
}

/* ========================================
   PREMIUM CARDS
   Enhanced depth and interactions
   ======================================== */
.card-premium {
  background: var(--color-bg-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-base);
  overflow: hidden;
}

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

.card-glass {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* ========================================
   SMOOTH TRANSITIONS
   Colossal-quality microinteractions
   ======================================== */
.transition-fast {
  transition: all var(--transition-fast);
}

.transition-base {
  transition: all var(--transition-base);
}

.transition-slow {
  transition: all var(--transition-slow);
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

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

.hover-brightness:hover {
  filter: brightness(1.1);
}

/* ========================================
   SCROLL ANIMATIONS SUPPORT
   Prepared for AOS library
   ======================================== */
[data-aos] {
  pointer-events: auto;
}

.aos-init[data-aos][data-aos].aos-animate {
  pointer-events: auto;
}

/* Custom AOS durations */
[data-aos-duration="400"] {
  transition-duration: 400ms;
}

[data-aos-duration="600"] {
  transition-duration: 600ms;
}

[data-aos-duration="800"] {
  transition-duration: 800ms;
}

[data-aos-duration="1000"] {
  transition-duration: 1000ms;
}

/* ========================================
   GRADIENT OVERLAYS
   Scientific aesthetic
   ======================================== */
.gradient-overlay-primary {
  position: relative;
}

.gradient-overlay-primary::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--tenant-primary), var(--tenant-secondary));
  opacity: 0.1;
  pointer-events: none;
}

.gradient-text {
  background: linear-gradient(135deg, var(--tenant-primary), var(--tenant-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

/* ========================================
   SCIENTIFIC VISUALIZATION ELEMENTS
   DNA helix, molecular structures, etc.
   ======================================== */
.dna-pattern-bg {
  background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(var(--tenant-primary), 0.03) 10px, rgba(var(--tenant-primary), 0.03) 20px);
}

.molecular-dots {
  background-image: radial-gradient(circle, var(--tenant-accent) 1px, transparent 1px);
  background-size: 20px 20px;
  opacity: 0.1;
}

/* ========================================
   ACCESSIBILITY PRESERVED
   All enhancements maintain WCAG 2.2 AA
   ======================================== */
.reduce-motion {
  transition: none !important;
  animation: none !important;
}

@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;
  }
}
/* ========================================
   PRINT STYLES
   ======================================== */
@media print {
  .video-background-wrapper,
  .gradient-overlay-primary::before {
    display: none !important;
  }
  .card-premium,
  .card-glass {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
  }
}
/*
 * DNA Romance Utility Classes
 *
 * Purpose: Eliminates need for inline styles across templates
 * Architecture: Mobile-first, responsive utilities using design system tokens
 *
 * Created: 2025-10-06
 * Replaces: 1,200+ inline style occurrences
 */
/* ========================================
   DISPLAY UTILITIES
   Note: Bootstrap already provides these, but included for completeness
   ======================================== */
/* These are already in Bootstrap - templates should use Bootstrap classes */
/* .d-none, .d-block, .d-inline-block, .d-flex, etc. */
/* ========================================
   SIZING UTILITIES - LOGOS
   ======================================== */
/* Logo Sizing - Responsive, maintains aspect ratio */
.logo-xs {
  max-width: 50px;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.logo-sm {
  max-width: 77px;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.logo-md {
  max-width: 90px;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.logo-lg {
  max-width: 120px;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.logo-xl {
  max-width: 194px;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.logo-2xl {
  max-width: 330px;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* ========================================
   SIZING UTILITIES - ICONS
   ======================================== */
/* Icon Sizing - Square aspect ratio, consistent sizing */
.icon-xs {
  width: 25px;
  height: 25px;
  object-fit: contain;
}

.icon-sm {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.icon-md {
  width: 60px;
  height: 60px;
  object-fit: contain;
}

.icon-lg {
  width: 80px;
  height: 80px;
  object-fit: contain;
}

.icon-xl {
  width: 120px;
  height: 120px;
  object-fit: contain;
}

/* Special case: Flag icons with right spacing */
.flag-icon {
  width: 25px;
  height: 25px;
  padding-right: 5px;
  object-fit: contain;
}

/* Flag icon sizes (for about page language sections) */
.flag-icon-lg {
  width: 24px;
  height: 24px;
  object-fit: contain;
  vertical-align: middle;
}

.flag-icon-sm {
  width: 20px;
  height: 20px;
  object-fit: contain;
  vertical-align: middle;
}

/* ========================================
   IMAGE SIZING UTILITIES - V8.5 CODE QUALITY CAMPAIGN
   ======================================== */
/*
 * V8.5 Code Quality Campaign - 5-LLM Consensus Approved
 * Date: November 1, 2025
 * Purpose: Replace inline style="" attributes across templates
 * Consensus: 93.2% agreement across 5 LLMs
 * LLMs: Claude Opus 4.5, GPT-4, GPT-5, GROK-4, Gemini 2.5 Pro
 *
 * Replaces patterns like:
 *   <img style="max-width: 40px">
 *   <img style="max-width: 150px">
 *   <img style="max-width: 200px">
 *
 * Performance benefit: ~90% reduction (2-3KB inline → 300 bytes cached CSS)
 */
/* Small icon images (40px) - Features, bullet points */
.img-icon-sm {
  max-width: 40px;
  height: auto;
}

/* Medium icon images (120px) - Section icons */
.img-icon-md {
  max-width: 120px;
  height: auto;
}

/* Large icon images (150px) - Prominent features */
.img-icon-lg {
  max-width: 150px;
  height: auto;
}

/* Hero images (200px) - Landing page heroes */
.img-hero {
  max-width: 200px;
  height: auto;
}

/* Mobile app screenshots (330px) - Phone mockups */
.img-screenshot {
  max-width: 330px;
  height: auto;
}

/* Blog featured images (31.25rem = 500px) - MBTI personality posts */
.img-blog-featured {
  max-width: 31.25rem;
  height: auto;
}

/* Responsive images - Full width on mobile, constrained on desktop */
.img-fluid {
  max-width: 100%;
  height: auto;
}

/* Lazy loading hint (performance optimization) */
.img-lazy {
  loading: lazy;
}

/* ========================================
   HERO SECTION UTILITIES - V8.5
   ======================================== */
/* WebP-supported browsers - Use WebP format for better performance */
/* WCAG 2.1 AA: Dark overlay for text contrast on image backgrounds */
.webp {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.65) 50%, rgba(0, 0, 0, 0.75) 100%), url("/static/images/background/0.cbe3ca0a2ea7.webp") center top;
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 600px;
}

/* Non-WebP browsers fallback - Use JPEG format */
.nowebp {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.65) 50%, rgba(0, 0, 0, 0.75) 100%), url("/static/images/background/0.aefa1440a095.jpg") center top;
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 600px;
}

/* Brazilian Portuguese variant backgrounds */
.webp-brazilian {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.65) 50%, rgba(0, 0, 0, 0.75) 100%), url("/static/images/background/background5_br.590961c44b14.webp") center top;
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 600px;
}

.nowebp-brazilian {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.65) 50%, rgba(0, 0, 0, 0.75) 100%), url("/static/images/background/background5_br.9e2d34e4e7e1.jpg") center top;
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 600px;
}

/* Mobile-specific backgrounds with dark overlay */
@media screen and (max-width: 767px) {
  .webp {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.65) 50%, rgba(0, 0, 0, 0.75) 100%), url("/static/images/background/0_mobile.5f96b7c62f87.webp") center top;
    background-size: cover;
  }
  .nowebp {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.65) 50%, rgba(0, 0, 0, 0.75) 100%), url("/static/images/background/0_mobile.26b0b299a0a1.jpg") center top;
    background-size: cover;
  }
}
/* Legacy hero-bg-couple class for compatibility */
.hero-bg-couple {
  /* Will be overridden by .webp or .nowebp classes added dynamically */
  min-height: 600px;
}

/* Glass morphism effect for hero card */
.hero-card-glass {
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: none !important;
  box-shadow: none !important;
  padding: 30px 40px;
  border-radius: 20px;
}

/* White text with important override (for dark hero backgrounds) */
.text-white-force {
  color: #ffffff !important;
}

/* ========================================
   COLOR UTILITIES - BRAND
   ======================================== */
/* Brand Colors - Multi-tenant aware via CSS variables */
.text-brand-primary {
  color: var(--brand-primary, #0F75BD) !important;
}

.bg-brand-primary {
  background-color: var(--brand-primary, #0F75BD) !important;
}

.text-brand-secondary {
  color: var(--brand-secondary, #F72C93) !important;
}

.bg-brand-secondary {
  background-color: var(--brand-secondary, #F72C93) !important;
}

.text-brand-accent {
  color: #60cfff !important;
}

.bg-brand-accent {
  background-color: #60cfff !important;
}

.text-muted-gray {
  color: #767676 !important;
}

.bg-muted-gray {
  background-color: #767676 !important;
}

/* Link colors with hover states */
.link-brand {
  color: var(--brand-primary, #0F75BD) !important;
  text-decoration: none;
}

.link-brand:hover {
  color: var(--brand-secondary, #F72C93) !important;
  text-decoration: underline;
}

/* ========================================
   OPACITY UTILITIES
   ======================================== */
.opacity-0 {
  opacity: 0 !important;
}

.opacity-25 {
  opacity: 0.25 !important;
}

.opacity-50 {
  opacity: 0.5 !important;
}

.opacity-60 {
  opacity: 0.6 !important;
}

.opacity-75 {
  opacity: 0.75 !important;
}

.opacity-100 {
  opacity: 1 !important;
}

/* ========================================
   OBJECT FIT UTILITIES
   ======================================== */
.object-contain {
  object-fit: contain !important;
}

.object-cover {
  object-fit: cover !important;
}

.object-fill {
  object-fit: fill !important;
}

.object-none {
  object-fit: none !important;
}

.object-scale-down {
  object-fit: scale-down !important;
}

/* ========================================
   MAX-WIDTH UTILITIES
   ======================================== */
.max-w-50 {
  max-width: 50px !important;
}

.max-w-62 {
  max-width: 62px !important;
}

.max-w-77 {
  max-width: 77px !important;
}

.max-w-88 {
  max-width: 88px !important;
}

.max-w-90 {
  max-width: 90px !important;
}

.max-w-120 {
  max-width: 120px !important;
}

.max-w-194 {
  max-width: 194px !important;
}

.max-w-330 {
  max-width: 330px !important;
}

.max-w-412 {
  max-width: 412px !important;
}

.max-w-600 {
  max-width: 600px !important;
}

/* Responsive max-width */
@media (min-width: 768px) {
  .max-w-md-none {
    max-width: none !important;
  }
}
/* ========================================
   MAX-HEIGHT UTILITIES
   ======================================== */
.max-h-75 {
  max-height: 75px !important;
}

.max-h-80 {
  max-height: 80px !important;
}

.max-h-100 {
  max-height: 100px !important;
}

/* ========================================
   WIDTH UTILITIES
   Explicit widths to replace inline styles
   ======================================== */
.w-fit {
  width: fit-content !important;
}

.w-150 {
  width: 150px !important;
}

.w-200 {
  width: 200px !important;
}

.w-250 {
  width: 250px !important;
}

.w-300 {
  width: 300px !important;
}

/* ========================================
   SEMANTIC COLOR UTILITIES - MATCHING CATEGORIES
   Used across templates for DNA/personality matching categories
   ======================================== */
/* Romance category - Pink/Magenta (genetic attraction) */
.text-romance {
  color: var(--brand-secondary, #F72C93) !important;
}

.bg-romance {
  background-color: var(--brand-secondary, #F72C93) !important;
}

/* Personality category - Blue (MBTI compatibility) */
.text-personality {
  color: var(--brand-primary, #0F75BD) !important;
}

.bg-personality {
  background-color: var(--brand-primary, #0F75BD) !important;
}

/* Attraction category - Purple (physical attraction) */
.text-attraction {
  color: #B723A6 !important;
}

.bg-attraction {
  background-color: #B723A6 !important;
}

/* Interests category - Indigo (shared interests) */
.text-interests {
  color: #4834AF !important;
}

.bg-interests {
  background-color: #4834AF !important;
}

/* Health category - Green (genetic health compatibility) */
.text-health {
  color: var(--color-success-accessible, #2E7D32) !important;
}

.bg-health {
  background-color: var(--color-success-accessible, #2E7D32) !important;
}

/* ========================================
   MARGIN UTILITIES (Supplement Bootstrap)
   ======================================== */
/* Additional margin utilities not in Bootstrap */
.mt-16 {
  margin-top: 16px !important;
}

.mr-12 {
  margin-right: 12px !important;
}

.mb-16 {
  margin-bottom: 16px !important;
}

/* ========================================
   BUTTON UTILITIES
   ======================================== */
/* Rounded button utility */
.btn-rounded {
  border-radius: 25px !important;
}

/* Primary brand button - consistent styling */
.btn-brand-primary {
  background-color: var(--brand-primary, #0F75BD) !important;
  border-color: var(--brand-primary, #0F75BD) !important;
  color: white !important;
}

.btn-brand-primary:hover {
  background-color: var(--brand-secondary, #F72C93) !important;
  border-color: var(--brand-secondary, #F72C93) !important;
  color: white !important;
}

/* ========================================
   HELPER UTILITIES
   ======================================== */
/* Full width responsive images */
.img-fluid-max {
  width: 100%;
  max-width: 100%;
  height: auto;
}

/* Vertical alignment helpers */
.v-align-middle {
  vertical-align: middle !important;
}

.v-align-top {
  vertical-align: top !important;
}

.v-align-bottom {
  vertical-align: bottom !important;
}

/* Box sizing (mainly for email compatibility) */
.box-border {
  box-sizing: border-box !important;
}

/* ========================================
   SOCIAL LOGIN ICON UTILITIES
   WCAG 2.1 AA Compliant - 44x44px minimum
   ======================================== */
.social-icon-44 {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.social-icon-44-mr {
  width: 44px;
  height: 44px;
  object-fit: contain;
  margin-right: 12px;
}

/* Touch target minimum (WCAG 2.1 AA - 44x44px minimum) */
.touch-target {
  min-width: 44px;
  min-height: 44px;
}

.touch-target-height {
  min-height: 44px;
}

/* Cursor utilities */
.cursor-pointer {
  cursor: pointer;
}

/* Video embed responsive (16:9 aspect ratio) */
.video-embed-responsive {
  width: 100%;
  aspect-ratio: 16/9;
}

/* App store badge images (194px max-width) */
.app-badge-img {
  width: 100%;
  max-width: 194px;
  height: auto;
}

/* Mobile mockup images (320px max-width) */
.mockup-mobile {
  max-width: 320px;
  width: 100%;
  height: auto;
}

/* Blog content padding (30px horizontal) - for article text blocks */
.blog-content-padding {
  padding-left: 30px;
  padding-right: 30px;
}

/* Blog heading with brand color */
.blog-heading-brand {
  padding-left: 30px;
  padding-right: 30px;
  color: #0F75BD;
}

/* ========================================
   RESPONSIVE UTILITIES
   ======================================== */
/* Hide on mobile only */
@media (max-width: 767px) {
  .hide-mobile {
    display: none !important;
  }
}
/* Hide on desktop only */
@media (min-width: 768px) {
  .hide-desktop {
    display: none !important;
  }
}
/* ========================================
   TEXT UTILITIES (Supplement Bootstrap)
   ======================================== */
.text-wrap {
  white-space: normal !important;
}

.text-nowrap {
  white-space: nowrap !important;
}

/* ========================================
   DOCUMENTATION
   ======================================== */
/*
 * Usage Examples:
 *
 * Logo sizing:
 *   <img src="logo.svg" class="logo-xl" alt="Logo">
 *
 * Icon sizing:
 *   <img src="icon.png" class="icon-md" alt="">
 *
 * Brand colors:
 *   <span class="text-brand-primary">DNA Romance</span>
 *   <div class="bg-brand-secondary">...</div>
 *
 * Display utilities:
 *   <div class="d-none">Hidden</div>  (Bootstrap)
 *   <div class="d-block">Visible</div>  (Bootstrap)
 *
 * Opacity:
 *   <div class="opacity-60">Faded content</div>
 *
 * Object fit:
 *   <img src="photo.jpg" class="object-cover">
 *
 * Social login icons (WCAG compliant):
 *   <img src="apple.svg" class="social-icon-44-mr" alt="">
 *
 * IMPORTANT: Email templates should continue using inline styles
 * as email clients do not support external CSS reliably.
 */
/* ============================================================
 * Combined 902 lines from enhancements.css (417) + utilities.css (487)
 * ============================================================ */
/*
 * ACCESSIBILITY CONSOLIDATED - ALL ACCESSIBILITY STYLES
 * 📋 CONTAINS: WCAG compliance, focus indicators, touch targets, mobile compliance
 * 🎯 PERFORMANCE: Loads first (critical for assistive technology)
 * 📏 SIZE: ~200 lines | GZIPPED: ~4KB | CRITICAL: Yes
 *
 * Following Steve Jobs design principles and WCAG 2.1 AA/AAA guidelines
 * Minimum contrast ratios: 4.5:1 for normal text, 3:1 for large text
 * Minimum touch targets: 44x44px (iOS HIG, Android Material Design, WCAG 2.5.5)
 */
/* =================================================================
   CRITICAL: Prevent Horizontal Scroll - Allow Dropdown Overflow on Desktop
   ================================================================= */
html, body {
  max-width: 100% !important;
}

/* Only restrict overflow on mobile to prevent horizontal scroll */
@media (max-width: 991px) {
  html, body {
    overflow-x: hidden !important;
  }
}
* {
  max-width: 100%;
}

.container, .container-fluid, .row {
  max-width: 100% !important;
}

/* Only restrict overflow on mobile */
@media (max-width: 991px) {
  .container, .container-fluid, .row {
    overflow-x: hidden !important;
  }
}
/* Ensure images and media don't cause overflow */
img, video, embed, object {
  max-width: 100% !important;
  height: auto !important;
}

/* iframe needs special handling - don't break Bootstrap ratio containers */
iframe {
  max-width: 100%;
}

.ratio iframe {
  height: 100% !important;
}

/* Fix common overflow culprits */
pre, code {
  max-width: 100% !important;
  overflow-x: auto !important;
  word-wrap: break-word !important;
}

/* Tables - use wrapper for horizontal scroll, don't break display:table */
.table-responsive,
.table-wrapper {
  max-width: 100% !important;
  overflow-x: auto !important;
}

table {
  max-width: 100% !important;
  /* NOTE: Do NOT use display:block - it breaks Bootstrap table layout */
}

/* =================================================================
   Keyboard Navigation Focus Indicators
   IMPORTANT: Never use outline: none without alternative focus indicators
   ================================================================= */
/* Modern :focus-visible for keyboard-only focus */
:focus-visible {
  outline: 3px solid var(--bs-primary, #0f75bd) !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #0f75bd !important;
  outline-offset: 2px !important;
}

/* Enhanced focus for buttons */
.btn:focus-visible {
  outline: 3px solid var(--md3-primary, #0f75bd) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--md3-primary, #0f75bd) 25%, transparent);
}

/* Enhanced focus for form controls */
.form-control:focus,
.form-select:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--md3-primary, #0f75bd) !important;
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--md3-primary, #0f75bd) 25%, transparent) !important;
  outline: 3px solid var(--md3-primary, #0f75bd) !important;
  outline-offset: 2px !important;
}

/* Enhanced focus for links */
a:focus-visible {
  outline: 3px solid var(--md3-primary, #0f75bd) !important;
  outline-offset: 2px !important;
  text-decoration: underline;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  :focus-visible,
  button:focus-visible,
  a:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible {
    outline-width: 4px !important;
  }
}
/* =================================================================
   Skip to Main Content Link (Screen Reader Navigation)
   ================================================================= */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: #fff;
  padding: 12px 16px; /* Increased from 8px for better spacing */
  min-height: 44px; /* WCAG 2.5.8 minimum touch target */
  display: flex;
  align-items: center;
  text-decoration: none;
  border-radius: 0 0 4px 0;
  z-index: 100;
}

.skip-link:focus {
  top: 0;
}

/* =================================================================
   Touch Target Compliance - Mobile First
   iOS: 44x44px minimum (Apple HIG)
   Android: 48x48dp minimum (Material Design)
   WCAG 2.5.5 (Level AAA): 44x44px minimum
   ================================================================= */
/* Universal Button Touch Targets - Mobile */
@media (max-width: 768px) {
  .btn,
  .btn-sm,
  .btn-lg,
  button[type=submit],
  button[type=button],
  button[type=reset],
  input[type=submit],
  input[type=button],
  input[type=reset],
  a.button,
  .button {
    min-height: 44px !important;
    max-height: 60px !important;
    min-width: 44px !important;
    padding: 12px 20px !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
  }
  .btn-sm {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 10px 16px !important;
  }
  .btn-lg {
    min-height: 48px !important;
    min-width: 48px !important;
    padding: 14px 24px !important;
  }
}
/* =================================================================
   Transform Animation Ban (Interactive States)
   Policy: No transform-based animations (scale/rotate/translate) on interactive states.
   Rationale: Improves accessibility, reduces motion sensitivity issues, and
              aligns with project guardrails. Does not affect Bootstrap
              components that rely on transform for placement.
   ================================================================= */
/* Do not interfere with Bootstrap components that rely on transform for placement */
.dropdown-menu,
.tooltip,
.popover,
.offcanvas,
.modal { /* explicitly untouched */ }

/* Buttons and links */
.btn:hover,
.btn:focus,
.btn:active,
a.btn:hover,
a.btn:focus,
a.btn:active,
.nav-link:hover,
.nav-link:focus,
.list-group-item:hover,
.list-group-item:focus,
.navbar-brand:hover,
.navbar-brand:focus {
  transform: none !important;
}

/* Cards - allow subtle MD3 elevation lift (translateY only, max 4px) */
/* Do NOT allow scale transforms - only vertical lift for depth perception */
.hover-scale:hover,
.hover-scale:focus,
.hover-lift:hover,
.hover-lift:focus,
.feature-card:hover,
.feature-card:focus,
.profile-card:hover,
.profile-card:focus {
  transform: none !important;
}

/* Images and icons that previously scaled on hover */
img.hover-scale:hover,
img.hover-scale:focus,
.icon.hover-scale:hover,
.icon.hover-scale:focus {
  transform: none !important;
}

/* Restrict transitions to permitted properties - cards get transform for MD3 elevation lift */
.btn,
.nav-link,
.list-group-item,
.navbar-brand,
.feature-card,
.profile-card,
.hover-scale,
.hover-lift {
  transition-property: opacity, background-color, color, border-color, box-shadow !important;
}

.card,
.service-box,
.faq-item {
  transition-property: opacity, background-color, color, border-color, box-shadow, transform !important;
}

/* Include custom hero CTA classes */
.btn-hero-primary,
.btn-hero-secondary {
  transform: none !important;
  transition-property: opacity, background-color, color, border-color, box-shadow !important;
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .card,
  .nav-link,
  .list-group-item,
  .navbar-brand,
  .feature-card,
  .profile-card,
  .hover-scale,
  .hover-lift {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}
/* Desktop: Maintain 44px minimum for Apple HIG compliance */
@media (min-width: 769px) {
  .btn {
    min-height: 40px !important;
    padding: 10px 24px !important;
  }
  .btn-sm {
    min-height: 36px !important;
    padding: 8px 16px !important;
  }
  .btn-lg {
    min-height: 48px !important;
    padding: 12px 32px !important;
  }
}
/* Icon-only buttons */
.btn-icon,
.icon-button,
button.icon-only {
  min-height: 44px !important;
  min-width: 44px !important;
  padding: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Form controls touch targets */
input[type=text],
input[type=email],
input[type=password],
input[type=tel],
input[type=number],
input[type=search],
input[type=date],
input[type=time],
input[type=url],
select,
textarea {
  min-height: 44px !important;
  padding: 10px 12px !important;
  touch-action: manipulation;
}

/* Checkboxes and radio buttons - Apple HIG 44x44px minimum
   Per user request: visual size increased to 44x44px
   HIGH SPECIFICITY to override Bootstrap CDN - loads after Bootstrap */
html body input[type=checkbox],
html body input[type=radio],
html body .form-check input[type=checkbox],
html body .form-check input[type=radio] {
  min-height: 44px !important;
  min-width: 44px !important;
  width: 44px !important;
  height: 44px !important;
  margin: 0 !important;
  cursor: pointer;
  accent-color: var(--brand-primary, #0f75bd);
}

/* Bootstrap 5 form-check - 44px touch target */
html body .form-check {
  min-height: 48px !important;
  display: flex !important;
  align-items: center !important;
  padding: 4px 0 !important;
  gap: 8px;
}

html body .form-check-input,
html body .form-check-input[type=checkbox],
html body .form-check-input[type=radio] {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  margin-top: 0 !important;
  margin-right: 8px !important;
  cursor: pointer;
  flex-shrink: 0;
  accent-color: var(--brand-primary, #0f75bd);
}

.form-check-label {
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  padding-left: 0 !important;
  cursor: pointer;
}

/* =================================================================
   Small Text Links - WCAG 2.5.8 Touch Target Compliance
   Links like "Forgot password?", "Sign up", "Privacy Policy"
   ================================================================= */
a.text-link,
a.small-link,
a.auth-link,
.auth-links a,
.form-text a,
.card-footer a,
.text-muted a,
a.link-primary,
a.link-secondary {
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 8px 4px !important;
}

/* Logo links in navbar */
.navbar-brand,
a.navbar-brand,
header a:has(img),
nav a:has(img) {
  min-height: 44px !important;
  min-width: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Custom nav toggle buttons (hamburger menus) - MOBILE ONLY */
/* Don't override Bootstrap's responsive display on desktop */
/* 48px minimum for hamburger - Apple HIG recommends 44pt, Material 48dp */
@media (max-width: 991.98px) {
  .nav-beautiful-toggle,
  .navbar-toggler,
  button[aria-label="Toggle navigation"] {
    min-height: 48px !important;
    min-width: 48px !important;
    padding: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}
/* Password toggle buttons */
.btn-link.position-absolute,
button[type=button].btn-link {
  min-height: 44px !important;
  min-width: 44px !important;
  padding: 10px !important;
}

/* CTA and outline buttons - ensure 44px minimum */
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-light,
.btn-outline-dark,
a.btn[role=button],
.hero-section a.btn,
.cta-section a.btn {
  min-height: 44px !important;
  min-width: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Inline text links - use padding for touch targets, NOT display:inline-flex */
/* display:inline-flex breaks normal text flow in paragraphs */
main a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand),
article a,
section a:not(.btn):not(.nav-link),
.card-body a:not(.btn),
.content a,
p a,
li a:not(.nav-link):not(.dropdown-item) {
  /* Use padding to increase touch target without breaking text flow */
  padding: 8px 4px !important;
  margin: -8px -4px !important; /* Offset padding to maintain visual position */
  /* Do NOT use display:inline-flex - it breaks inline text flow */
}

/* All buttons must be 44px minimum in both dimensions */
.btn {
  min-height: 44px !important;
  min-width: 44px !important;
}

/* Social/icon links and small nav items */
footer a,
.social-links a,
[class*=social] a,
a:has(> i.fa),
a:has(> i.fab),
a:has(> i.fas),
a:has(> svg) {
  min-height: 44px !important;
  min-width: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Form check (Bootstrap 5 pattern) */
.form-check {
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  padding: 10px 0 !important;
}

/* Navigation items */
.nav-link,
.nav-item a,
.navbar-nav a {
  min-height: 44px !important;
  padding: 10px 16px !important;
  display: flex !important;
  align-items: center !important;
}

/* Dropdown items */
.dropdown-item {
  min-height: 44px !important;
  padding: 10px 20px !important;
  display: flex !important;
  align-items: center !important;
}

/* Pagination links */
.pagination .page-link {
  min-height: 44px !important;
  min-width: 44px !important;
  padding: 10px 15px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* =================================================================
   iOS Zoom Prevention - Font Size Compliance
   iOS Safari zooms when input font-size < 16px
   ================================================================= */
@media (max-width: 768px) {
  body,
  input,
  select,
  textarea,
  button,
  .form-control,
  .form-select,
  .btn {
    font-size: 16px !important;
    -webkit-text-size-adjust: 100%;
  }
  .small,
  .text-sm,
  .btn-sm,
  .badge,
  label,
  .form-label {
    font-size: 16px !important;
  }
}
/* =================================================================
   Plugin Touch Target Overrides
   ================================================================= */
.dropzone .dz-preview .dz-remove,
.btn-close,
.modal-close,
[aria-label*=close],
[aria-label*=Close] {
  min-height: 44px !important;
  min-width: 44px !important;
  padding: 12px !important;
  touch-action: manipulation;
}

/* =================================================================
   Screen Reader Only Content
   ================================================================= */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =================================================================
   Footer Touch Targets - WCAG 2.5.8 Compliance
   Footer links must have 44px minimum touch target
   ================================================================= */
footer a,
.footer a,
.site-footer a,
[role=contentinfo] a {
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 10px 8px !important;
}

footer .list-unstyled li,
.footer .list-unstyled li {
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
}

/* Footer social icons */
footer .social-links a,
.footer .social-links a,
footer [class*=social] a,
.footer [class*=social] a {
  min-width: 44px !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px !important;
}

/* =================================================================
   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;
  }
}
/* =================================================================
   High Contrast Mode
   ================================================================= */
@media (prefers-contrast: high) {
  .btn-primary {
    background-color: #000080;
    color: #ffffff;
    border: 2px solid #ffffff;
  }
  .btn-secondary {
    background-color: #333333;
    color: #ffffff;
    border: 2px solid #ffffff;
  }
}
/* =================================================================
   Dark Mode Adjustments
   ================================================================= */
@media (prefers-color-scheme: dark) {
  .btn-primary {
    background-color: #3385ff;
    color: #ffffff;
  }
  :focus-visible {
    outline-color: #3385ff;
    box-shadow: 0 0 0 3px rgba(51, 133, 255, 0.5);
  }
}
[data-bs-theme=dark] .btn-primary {
  background-color: #3385ff;
  color: #ffffff;
}
[data-bs-theme=dark] :focus-visible {
  outline-color: #3385ff;
  box-shadow: 0 0 0 3px rgba(51, 133, 255, 0.5);
}

/* =================================================================
   Touch Feedback
   ================================================================= */
@media (hover: none) and (pointer: coarse) {
  .btn:active,
  button:active,
  a[role=button]:active {
    transform: scale(0.98);
    opacity: 0.9;
  }
}
/* Ensure proper cursor for clickable elements */
button,
[role=button],
.btn,
.clickable {
  cursor: pointer !important;
}

/* =================================================================
   Critical Contrast Fixes - WCAG Maximum Specificity Overrides
   Migrated from: includes/critical-contrast-fixes.html
   ================================================================= */
/* Global CSS variable overrides for contrast compliance */
:root {
  --bs-secondary: #374151 !important;
  --bs-secondary-rgb: 55, 65, 81 !important;
  --bs-gray-600: #4b5563 !important;
  --bs-gray-700: #374151 !important;
  --text-muted-color: #374151 !important;
  --text-secondary-color: #374151 !important;
}

/* Light mode only - prevent dark-on-dark in dark mode */
html:not([data-bs-theme=dark]) body .text-muted,
html:not([data-bs-theme=dark]) body .text-secondary,
html:not([data-bs-theme=dark]) body .text-body-secondary,
html:not([data-bs-theme=dark]) body [class*=muted],
html:not([data-bs-theme=dark]) body [class*=secondary] {
  color: #374151 !important;
}

html:not([data-bs-theme=dark]) body input::placeholder,
html:not([data-bs-theme=dark]) body textarea::placeholder,
html:not([data-bs-theme=dark]) body select option {
  color: #4b5563 !important;
  opacity: 1 !important;
}

html:not([data-bs-theme=dark]) body small,
html:not([data-bs-theme=dark]) body .small,
html:not([data-bs-theme=dark]) body .form-text,
html:not([data-bs-theme=dark]) body .help-text,
html:not([data-bs-theme=dark]) body .help-block {
  color: #374151 !important;
}

html:not([data-bs-theme=dark]) body .table-secondary,
html:not([data-bs-theme=dark]) body .table-light,
html:not([data-bs-theme=dark]) body .text-black-50,
html:not([data-bs-theme=dark]) body .text-white-50 {
  color: #374151 !important;
}

/* Dark mode placeholder and muted text - light on dark for readability */
[data-bs-theme=dark] input::placeholder,
[data-bs-theme=dark] textarea::placeholder {
  color: #9ca3af !important;
  opacity: 1 !important;
}
[data-bs-theme=dark] .text-muted,
[data-bs-theme=dark] .text-body-secondary,
[data-bs-theme=dark] small,
[data-bs-theme=dark] .small,
[data-bs-theme=dark] .form-text,
[data-bs-theme=dark] .help-text {
  color: #9ca3af !important;
}

html body .bg-secondary {
  background-color: #4b5563 !important;
  color: #ffffff !important;
}

html body *:focus {
  outline: 3px solid color-mix(in srgb, var(--md3-primary, #0f75bd) 50%, transparent) !important;
  outline-offset: 2px !important;
}

/* =================================================================
   FORM ACCESSIBILITY FIXES
   ================================================================= */
/* Fix Bootstrap 5 form-floating label overlap */
.form-floating > label {
  padding: 1rem 0.75rem;
  pointer-events: none;
  transform-origin: 0 0;
  transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
  opacity: 0.65;
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}

/* Ensure password fields have proper spacing */
.form-floating.mb-2 {
  margin-bottom: 0.5rem !important;
}

.form-floating.mb-4 {
  margin-bottom: 1.5rem !important;
}

/* Fix icon spacing in floating labels */
.form-floating > label i.fas {
  margin-right: 0.5rem;
}

/* Password strength container spacing */
.password-strength-container {
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}

/* Social login button accessibility */
.btn-apple,
.btn-google {
  background-color: transparent;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  padding: 0.5rem;
  transition: all 0.2s ease-in-out;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-apple:hover,
.btn-google:hover {
  background-color: #f8f9fa;
  border-color: #adb5bd;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.btn-apple:focus-visible,
.btn-google:focus-visible {
  outline: 3px solid var(--brand-primary, #007bff);
  outline-offset: 2px;
}

/* ============================================================
 * 2. COMPONENTS (Interactive Elements)
 * Buttons, cards, forms, navigation
 * ============================================================ */
.btn {
  display: inline-block;
  position: relative;
  overflow: hidden;
  font-weight: var(--md3-label-large-weight, 500);
  font-size: var(--md3-label-large-size, 0.875rem);
  line-height: var(--md3-label-large-line-height, 1.25rem);
  letter-spacing: var(--md3-label-large-tracking, 0.006rem);
  text-align: center;
  /* Allow i18n labels to wrap on small screens */
  white-space: normal;
  max-width: 100%;
  overflow-wrap: anywhere;
  vertical-align: middle;
  user-select: none;
  border: 1px solid transparent;
  padding: 0.625rem 1.5rem;
  min-height: 44px;
  border-radius: var(--radius-full, 100px);
  transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  text-decoration: none;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: currentColor;
  opacity: 0;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.btn:hover {
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
}
.btn:hover::before {
  opacity: 0.08;
}
.btn:active::before {
  opacity: 0.12;
}
.btn:focus-visible::before {
  opacity: 0.12;
}
@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
  .btn::before {
    transition: none;
  }
}
.btn:focus-visible {
  outline: 2px solid var(--md3-primary, #0F75BD);
  outline-offset: 2px;
}
.btn:disabled, .btn.disabled {
  opacity: 0.38;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}

.btn-primary {
  background-color: var(--md3-primary, var(--color-brand-primary));
  color: var(--md3-on-primary, white);
  border-color: var(--md3-primary, var(--color-brand-primary));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
}
.btn-primary:hover {
  background-color: var(--md3-primary, var(--color-brand-primary));
  border-color: var(--md3-primary, var(--color-brand-primary));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
}

.btn-secondary {
  background-color: var(--md3-secondary, #C41E6B);
  color: var(--md3-on-secondary, white);
  border-color: var(--md3-secondary, #C41E6B);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
}
.btn-secondary:hover {
  background-color: var(--md3-secondary, #C41E6B);
  border-color: var(--md3-secondary, #C41E6B);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
}

.btn-success {
  background-color: #28a745;
  color: white;
  border-color: #28a745;
}
.btn-success:hover {
  background-color: #218838;
  border-color: #1e7e34;
}

.btn-danger {
  background-color: #dc3545;
  color: white;
  border-color: #dc3545;
}
.btn-danger:hover {
  background-color: #c82333;
  border-color: #bd2130;
}

.btn-warning {
  background-color: #ffc107;
  color: #212529;
  border-color: #ffc107;
}
.btn-warning:hover {
  background-color: #e0a800;
  border-color: #d39e00;
}

.btn-info {
  background-color: #17a2b8;
  color: white;
  border-color: #17a2b8;
}
.btn-info:hover {
  background-color: #138496;
  border-color: #117a8b;
}

.btn-outline-primary {
  color: var(--md3-primary, var(--color-brand-primary));
  border-color: var(--md3-outline, currentColor);
  background-color: transparent;
  box-shadow: none;
}
.btn-outline-primary:hover {
  background-color: var(--md3-primary, var(--color-brand-primary));
  color: var(--md3-on-primary, white);
  border-color: var(--md3-primary, var(--color-brand-primary));
}
.btn-outline-secondary {
  color: var(--md3-secondary, var(--color-brand-secondary));
  border-color: var(--md3-outline, currentColor);
  background-color: transparent;
  box-shadow: none;
}
.btn-outline-secondary:hover {
  background-color: var(--md3-secondary, var(--color-brand-secondary));
  color: var(--md3-on-secondary, white);
  border-color: var(--md3-secondary, var(--color-brand-secondary));
}

.btn-tonal {
  background-color: var(--md3-primary-container);
  color: var(--md3-on-primary-container);
  border: none;
  box-shadow: none;
}
.btn-tonal:hover {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
}

.btn-dna {
  background: var(--gradient-dna-primary);
  color: white;
  border: none;
  position: relative;
  overflow: hidden;
}
.btn-dna::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: var(--gradient-dna-primary);
  filter: blur(10px);
  opacity: 0;
  transition: opacity 0.3s;
  z-index: -1;
}
.btn-dna:hover::before {
  opacity: 0.7;
}

.btn-premium {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}
.btn-premium:hover {
  filter: brightness(1.15);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
}

.btn-icon {
  padding: 0.5rem;
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.btn-icon--sm {
  width: 2rem;
  height: 2rem;
  padding: 0.25rem;
}
.btn-icon--lg {
  width: 3rem;
  height: 3rem;
  padding: 0.75rem;
}

.btn-sm {
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  min-height: 36px;
}

.btn-lg {
  padding: 0.75rem 1.5rem;
  font-size: 1.125rem;
  min-height: 48px;
}

.btn-block {
  display: block;
  width: 100%;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: var(--md3-surface-container-low, #fff);
  background-clip: border-box;
  border: none;
  border-radius: var(--radius-md, 12px);
  transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1), transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08);
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15), 0 8px 24px rgba(0, 0, 0, 0.12);
}

.card-header {
  padding: 0.75rem 1.25rem;
  margin-bottom: 0;
  background-color: var(--md3-surface-container, rgba(0, 0, 0, 0.03));
  border-bottom: 1px solid var(--md3-outline-variant, rgba(0, 0, 0, 0.125));
}
.card-header:first-child {
  border-radius: calc(var(--radius-md, 12px) - 1px) calc(var(--radius-md, 12px) - 1px) 0 0;
}

.card-body {
  flex: 1 1 auto;
  padding: 1.25rem;
}

.card-footer {
  padding: 0.75rem 1.25rem;
  background-color: var(--md3-surface-container, rgba(0, 0, 0, 0.03));
  border-top: 1px solid var(--md3-outline-variant, rgba(0, 0, 0, 0.125));
}
.card-footer:last-child {
  border-radius: 0 0 calc(var(--radius-md, 12px) - 1px) calc(var(--radius-md, 12px) - 1px);
}

.card-dna {
  background: linear-gradient(135deg, rgba(236, 43, 161, 0.05) 0%, rgba(211, 50, 132, 0.05) 100%);
  border: 2px solid var(--color-dna-primary);
  position: relative;
  overflow: hidden;
}
.card-dna::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gradient-dna-primary);
}

.card-premium {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  box-shadow: 0 10px 40px rgba(102, 126, 234, 0.3);
}
.card-premium .card-header,
.card-premium .card-footer {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

.card-glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
}

.card-dashboard {
  background: #fff;
  border: none;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
  border-radius: 10px;
}
.card-dashboard:hover {
  transform: none;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.08);
}

.feed-card {
  margin-bottom: 1.5rem;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.match-card {
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
}
.match-card:hover {
  transform: scale(1.02);
}

.swipe-card {
  position: absolute;
  width: 100%;
  height: 100%;
  background: white;
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  cursor: grab;
}
.swipe-card:active {
  cursor: grabbing;
}

.profile-card {
  text-align: center;
  padding: 2rem;
}
.profile-card .profile-image {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  margin: 0 auto 1rem;
  border: 4px solid var(--color-brand-primary);
}

.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}
.icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}
.icon--xs {
  width: 1rem;
  height: 1rem;
}
.icon--sm {
  width: 1.25rem;
  height: 1.25rem;
}
.icon--lg {
  width: 2rem;
  height: 2rem;
}
.icon--xl {
  width: 3rem;
  height: 3rem;
}
.icon--primary {
  color: var(--color-brand-primary);
}
.icon--secondary {
  color: var(--color-brand-secondary);
}
.icon--success {
  color: #28a745;
}
.icon--danger {
  color: #dc3545;
}
.icon--warning {
  color: #ffc107;
}
.icon--info {
  color: #17a2b8;
}
.icon--interactive {
  cursor: pointer;
  transition: all 0.3s ease;
}
.icon--interactive:hover {
  transform: scale(1.1);
  opacity: 0.8;
}
.icon--interactive:active {
  transform: scale(0.95);
}
.icon-badge {
  position: relative;
}
.icon-badge::after {
  content: attr(data-count);
  position: absolute;
  top: -5px;
  right: -5px;
  background: var(--color-danger);
  color: white;
  font-size: 0.625rem;
  padding: 2px 5px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
}
.icon-text {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.icon-text--left .icon {
  order: -1;
}
.icon-text--right .icon {
  order: 1;
}
.icon-loading {
  animation: spin 1s linear infinite;
}
.icon-loading--pulse {
  animation: pulse 1.5s ease-in-out infinite;
}
.icon-loading--dots::after {
  content: "...";
  animation: dots 1.5s steps(4, end) infinite;
}

.icon-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  background: var(--color-background-secondary);
  border-radius: 50%;
}
.icon-container--square {
  border-radius: 0.25rem;
}
.icon-container--interactive {
  cursor: pointer;
  transition: all 0.3s ease;
}
.icon-container--interactive:hover {
  background: var(--color-brand-primary);
  color: white;
}

.icon-dna--helix::before {
  content: "🧬";
  font-size: 1.5rem;
}
.icon-dna--compatibility {
  background: var(--gradient-dna-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
@keyframes dots {
  0%, 20% {
    content: ".";
  }
  40% {
    content: "..";
  }
  60%, 100% {
    content: "...";
  }
}
/*
 * SOCIAL LOGIN BUTTONS
 * 📋 CONTAINS: Universal neutral social login button styles
 * 🎯 SCSS VERSION: Compiled via public.scss
 *
 * WCAG 2.1 AA Compliant | Apple HIG Compliant | Material Design Compliant
 * Icons: 24px consistent across all viewports (matches Google/Apple/GitHub patterns)
 */
/* =================================================================
   BASE SOCIAL LOGIN BUTTON
   Universal neutral design - NO brand colors allowed
   ================================================================= */
.btn-social-login {
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  overflow: visible !important;
  min-height: 44px;
  max-height: none !important;
  padding: 10px 16px !important;
  width: 100%;
  background-color: #FFFFFF !important;
  color: #1f1f1f !important;
  border: 1px solid #dadce0 !important;
  font-size: 14px !important;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 8px;
  box-shadow: none;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.btn-social-login .social-icon,
.btn-social-login img {
  width: 24px !important;
  height: 24px !important;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
  border-radius: 4px;
}
.btn-social-login span {
  flex: 1;
  text-align: center;
  font-weight: 500;
  color: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =================================================================
   RESPONSIVE SIZING
   ================================================================= */
@media (max-width: 576px) {
  .btn-social-login {
    padding: 10px 12px;
    gap: 10px;
    font-size: 13px;
  }
}
/* =================================================================
   INTERACTION STATES
   ================================================================= */
.btn-social-login:hover {
  background-color: #F8F9FA !important;
  border-color: #6C757D !important;
  color: #000000 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  text-decoration: none;
}

.btn-social-login:focus,
.btn-social-login:focus-visible {
  outline: 3px solid #0078D4 !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(0, 120, 212, 0.15) !important;
  background-color: #FFFFFF !important;
  border-color: #0078D4 !important;
}

.btn-social-login:active {
  background-color: #E9ECEF !important;
  border-color: #6C757D !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-social-login:disabled,
.btn-social-login[aria-disabled=true] {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
  background-color: #E9ECEF !important;
  border-color: #CED4DA !important;
  color: #6C757D !important;
}

/* =================================================================
   PROVIDER-SPECIFIC OVERRIDES (minimal)
   ================================================================= */
.btn-social-login[href*=apple-id] span {
  font-weight: 600;
}

/* =================================================================
   ACCESSIBILITY ENHANCEMENTS
   ================================================================= */
@media (prefers-contrast: high) {
  .btn-social-login {
    border-width: 2px !important;
    border-color: #000000 !important;
  }
  .btn-social-login:focus, .btn-social-login:focus-visible {
    outline-width: 4px !important;
    outline-color: #000000 !important;
  }
}
@media (prefers-color-scheme: dark) {
  .btn-social-login {
    background-color: #343A40 !important;
    border-color: #6C757D !important;
    color: #F8F9FA !important;
  }
  .btn-social-login:hover {
    background-color: #495057 !important;
    border-color: #ADB5BD !important;
    color: #FFFFFF !important;
  }
  .btn-social-login:focus, .btn-social-login:focus-visible {
    outline-color: #4DB8FF !important;
    border-color: #4DB8FF !important;
  }
}
[data-bs-theme=dark] .btn-social-login {
  background-color: #343A40 !important;
  border-color: #6C757D !important;
  color: #F8F9FA !important;
}
[data-bs-theme=dark] .btn-social-login:hover {
  background-color: #495057 !important;
  border-color: #ADB5BD !important;
  color: #FFFFFF !important;
}
[data-bs-theme=dark] .btn-social-login:focus, [data-bs-theme=dark] .btn-social-login:focus-visible {
  outline-color: #4DB8FF !important;
  border-color: #4DB8FF !important;
}

@media (prefers-reduced-motion: reduce) {
  .btn-social-login {
    transition: none;
  }
}
/* =================================================================
   RTL (Right-to-Left) LANGUAGE SUPPORT
   ================================================================= */
[dir=rtl] .btn-social-login {
  flex-direction: row-reverse;
}
[dir=rtl] .btn-social-login .social-icon,
[dir=rtl] .btn-social-login img {
  margin-right: 0;
  margin-left: 12px;
}

/* =================================================================
   LEGACY BROWSER SUPPORT
   ================================================================= */
@supports not (gap: 12px) {
  .btn-social-login .social-icon,
  .btn-social-login img {
    margin-right: 12px;
  }
  [dir=rtl] .btn-social-login .social-icon,
  [dir=rtl] .btn-social-login img {
    margin-right: 0;
    margin-left: 12px;
  }
}
/* =================================================================
   PRINT STYLES
   ================================================================= */
@media print {
  .btn-social-login {
    display: none;
  }
}
/* ============================================================
 * MAIN.SCSS - Single Entry Point for All Platform CSS
 * Created: November 8, 2025
 * Purpose: Consolidated SCSS compilation for 10-platform system
 * Output: apps/static/css/app.css + app.min.css
 * ============================================================ */
/* ============================================================
 * 1. CORE FOUNDATION (Load First)
 * Design tokens, reset, typography, framework basics
 * ============================================================ */
/* ============================================================
   WORLD-CLASS COMPONENTS - DNA Romance Design System
   Modern, accessible, performant component styles
   ============================================================ */
/* ==========================================================
   BASE STYLES & RESETS
   ========================================================== */
* {
  box-sizing: border-box;
}

/* Focus Visible - Keyboard Navigation Only */
:focus {
  outline: none;
}

:focus-visible {
  outline: 3px solid var(--brand-primary-400);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Smooth Scrolling */
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-height);
}

/* 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;
  }
}
/* ==========================================================
   BUTTONS - World Class
   ========================================================== */
.btn-world-class {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  font-family: var(--font-family-base);
  font-size: var(--text-base);
  font-weight: var(--btn-font-weight);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  border: none;
  border-radius: var(--btn-border-radius);
  cursor: pointer;
  transition: var(--btn-transition);
  transform-origin: center;
  overflow: hidden;
  /* Minimum touch target size */
  min-height: 44px;
  min-width: 44px;
  /* Ripple Effect */
}
.btn-world-class::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transform: translate(-50%, -50%);
  transition: width var(--duration-slow), height var(--duration-slow);
}
.btn-world-class:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.btn-world-class:active {
  transform: translateY(0);
  transition-duration: var(--duration-instant);
}
.btn-world-class:active::before {
  width: 300px;
  height: 300px;
}
.btn-world-class {
  /* Variants */
}
.btn-world-class.btn-primary {
  background-color: var(--brand-primary-500);
  color: white;
}
.btn-world-class.btn-primary:hover {
  background-color: var(--brand-primary-600);
}
.btn-world-class.btn-secondary {
  background-color: var(--color-gray-200);
  color: var(--color-gray-800);
}
.btn-world-class.btn-secondary:hover {
  background-color: var(--color-gray-300);
}
.btn-world-class.btn-ghost {
  background-color: transparent;
  color: var(--brand-primary-500);
}
.btn-world-class.btn-ghost:hover {
  background-color: rgba(var(--brand-primary-500), 0.1);
}
.btn-world-class {
  /* Sizes */
}
.btn-world-class.btn-sm {
  padding: var(--space-xs) var(--space-md);
  font-size: var(--text-sm);
}
.btn-world-class.btn-lg {
  padding: var(--space-md) var(--space-xl);
  font-size: var(--text-lg);
}
.btn-world-class {
  /* Loading State */
}
.btn-world-class.btn-loading {
  color: transparent;
}
.btn-world-class.btn-loading::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  margin: auto;
  border: 2px solid transparent;
  border-radius: 50%;
  border-top-color: currentColor;
  animation: btn-loading-spin 1s ease infinite;
}

@keyframes btn-loading-spin {
  to {
    transform: rotate(360deg);
  }
}
/* ==========================================================
   FORMS - World Class
   ========================================================== */
.form-field-world-class {
  position: relative;
  margin-bottom: var(--space-lg);
}
.form-field-world-class input,
.form-field-world-class textarea,
.form-field-world-class select {
  width: 100%;
  padding: var(--form-field-padding-y) var(--form-field-padding-x);
  font-family: var(--font-family-base);
  font-size: var(--text-base);
  line-height: var(--line-height-normal);
  color: var(--color-gray-900);
  background-color: white;
  border: var(--form-field-border-width) solid var(--form-field-border-color);
  border-radius: var(--form-field-border-radius);
  transition: all var(--duration-fast) var(--easing-default);
  /* Minimum height for touch targets */
  min-height: 44px;
}
.form-field-world-class input:focus,
.form-field-world-class textarea:focus,
.form-field-world-class select:focus {
  border-color: var(--form-field-focus-color);
  box-shadow: var(--form-field-focus-shadow);
}
.form-field-world-class input:valid,
.form-field-world-class textarea:valid,
.form-field-world-class select:valid {
  border-color: var(--color-success);
}
.form-field-world-class input:invalid:not(:placeholder-shown),
.form-field-world-class textarea:invalid:not(:placeholder-shown),
.form-field-world-class select:invalid:not(:placeholder-shown) {
  border-color: var(--color-error);
}
.form-field-world-class input:disabled,
.form-field-world-class textarea:disabled,
.form-field-world-class select:disabled {
  background-color: var(--color-gray-100);
  cursor: not-allowed;
  opacity: 0.6;
}
.form-field-world-class {
  /* Floating Labels */
}
.form-field-world-class label {
  position: absolute;
  top: 50%;
  left: var(--form-field-padding-x);
  transform: translateY(-50%);
  font-size: var(--text-base);
  color: var(--color-gray-500);
  pointer-events: none;
  transition: all var(--duration-fast) var(--easing-default);
  background-color: white;
  padding: 0 var(--space-2xs);
}
.form-field-world-class input:focus ~ label,
.form-field-world-class input:not(:placeholder-shown) ~ label,
.form-field-world-class textarea:focus ~ label,
.form-field-world-class textarea:not(:placeholder-shown) ~ label,
.form-field-world-class select:focus ~ label,
.form-field-world-class select:valid ~ label {
  top: 0;
  font-size: var(--text-sm);
  color: var(--form-field-focus-color);
}
.form-field-world-class {
  /* Help Text */
}
.form-field-world-class .form-help {
  margin-top: var(--space-xs);
  font-size: var(--text-sm);
  color: var(--color-gray-600);
}
.form-field-world-class {
  /* Error Messages */
}
.form-field-world-class .form-error {
  margin-top: var(--space-xs);
  font-size: var(--text-sm);
  color: var(--color-error);
  display: none;
}
.form-field-world-class.has-error input,
.form-field-world-class.has-error textarea,
.form-field-world-class.has-error select {
  border-color: var(--color-error);
}
.form-field-world-class.has-error .form-error {
  display: block;
}
.form-field-world-class {
  /* Success State */
}
.form-field-world-class.has-success input,
.form-field-world-class.has-success textarea,
.form-field-world-class.has-success select {
  border-color: var(--color-success);
}

/* Password Strength Indicator */
.password-strength {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2xs);
  height: 4px;
  margin-top: var(--space-xs);
}
.password-strength .strength-bar {
  background: var(--color-gray-300);
  border-radius: var(--radius-full);
  transition: background var(--duration-fast) var(--easing-default);
}
.password-strength[data-strength=weak] .strength-bar:nth-child(1) {
  background: var(--color-error);
}
.password-strength[data-strength=fair] .strength-bar:nth-child(-n+2) {
  background: var(--color-warning);
}
.password-strength[data-strength=good] .strength-bar:nth-child(-n+3) {
  background: var(--color-info);
}
.password-strength[data-strength=strong] .strength-bar {
  background: var(--color-success);
}

/* ==========================================================
   CARDS - World Class
   ========================================================== */
.card-world-class {
  position: relative;
  background: white;
  border-radius: var(--card-border-radius);
  box-shadow: var(--card-shadow);
  padding: var(--card-padding);
  transition: all var(--duration-normal) var(--easing-default);
  cursor: pointer;
}
.card-world-class::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  box-shadow: var(--card-shadow-hover);
  opacity: 0;
  transition: opacity var(--duration-normal) var(--easing-default);
}
.card-world-class:hover {
  transform: translateY(-4px);
}
.card-world-class:hover::before {
  opacity: 1;
}
.card-world-class .card-header {
  margin-bottom: var(--space-md);
}
.card-world-class .card-header h3 {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
}
.card-world-class .card-body {
  color: var(--color-gray-600);
  line-height: var(--line-height-relaxed);
}
.card-world-class .card-footer {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-gray-200);
}

/* ==========================================================
   LOADING STATES - World Class
   ========================================================== */
/* Skeleton Loading */
.skeleton {
  position: relative;
  overflow: hidden;
  background-color: var(--color-gray-200);
}
.skeleton::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%);
  animation: skeleton-shimmer 2s infinite;
}
.skeleton.skeleton-text {
  height: 1em;
  border-radius: var(--radius-sm);
}
.skeleton.skeleton-title {
  height: 1.5em;
  width: 50%;
  border-radius: var(--radius-sm);
}
.skeleton.skeleton-button {
  height: 44px;
  width: 120px;
  border-radius: var(--radius-full);
}
.skeleton.skeleton-avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
}

@keyframes skeleton-shimmer {
  100% {
    transform: translateX(100%);
  }
}
/* Pulse Loader */
.pulse-loader {
  display: inline-block;
  width: 40px;
  height: 40px;
}
.pulse-loader::after {
  content: " ";
  display: block;
  width: 32px;
  height: 32px;
  margin: 4px;
  border-radius: 50%;
  border: 3px solid var(--brand-primary-500);
  border-color: var(--brand-primary-500) transparent var(--brand-primary-500) transparent;
  animation: pulse-spin 1.2s linear infinite;
}

@keyframes pulse-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* ==========================================================
   NAVIGATION - World Class
   ========================================================== */
.nav-world-class {
  position: sticky;
  top: 0;
  z-index: var(--z-index-sticky);
  background: white;
  box-shadow: var(--shadow-sm);
  height: var(--nav-height);
}
.nav-world-class .nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 var(--space-lg);
  max-width: var(--container-7xl);
  margin: 0 auto;
}
.nav-world-class .nav-brand {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-gray-900);
  text-decoration: none;
}
.nav-world-class .nav-menu {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-world-class .nav-item a {
  display: flex;
  align-items: center;
  padding: var(--nav-item-padding-y) var(--nav-item-padding-x);
  color: var(--color-gray-600);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: all var(--duration-fast) var(--easing-default);
}
.nav-world-class .nav-item a:hover {
  background-color: var(--color-gray-100);
  color: var(--color-gray-900);
}
.nav-world-class .nav-item a.active {
  background-color: var(--brand-primary-100);
  color: var(--brand-primary-700);
}
.nav-world-class {
  /* Mobile Menu Toggle */
}
.nav-world-class .nav-toggle {
  display: none;
}
@media (max-width: 768px) {
  .nav-world-class .nav-toggle {
    display: block;
  }
}
.nav-world-class {
  /* Mobile Navigation */
}
@media (max-width: 768px) {
  .nav-world-class .nav-menu {
    position: fixed;
    top: var(--nav-height);
    left: -100%;
    width: 100%;
    height: calc(100vh - var(--nav-height));
    background: white;
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-lg);
    box-shadow: var(--shadow-xl);
    transition: left var(--duration-normal) var(--easing-default);
  }
  .nav-world-class .nav-menu.is-open {
    left: 0;
  }
  .nav-world-class .nav-item a {
    padding: var(--space-md);
    width: 100%;
  }
}

/* ==========================================================
   MODALS - World Class
   ========================================================== */
.modal-world-class {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  background-color: var(--modal-backdrop-color);
  z-index: var(--z-index-modal);
  opacity: 0;
  visibility: hidden;
  transition: all var(--duration-normal) var(--easing-default);
}
.modal-world-class.is-open {
  opacity: 1;
  visibility: visible;
}
.modal-world-class .modal-content {
  position: relative;
  width: 100%;
  max-width: var(--container-lg);
  max-height: 90vh;
  background: white;
  border-radius: var(--modal-border-radius);
  box-shadow: var(--modal-shadow);
  padding: var(--modal-padding);
  overflow-y: auto;
  transform: scale(0.9);
  transition: transform var(--duration-normal) var(--easing-bounce);
}
.modal-world-class.is-open .modal-content {
  transform: scale(1);
}
.modal-world-class .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-lg);
}
.modal-world-class .modal-header h2 {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
}
.modal-world-class .modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--duration-fast) var(--easing-default);
}
.modal-world-class .modal-close:hover {
  background-color: var(--color-gray-100);
}

/* ==========================================================
   ANIMATIONS - World Class
   ========================================================== */
/* Slide Animations */
.animate-slide-up {
  animation: slideUp var(--duration-normal) var(--easing-default) both;
}

.animate-slide-down {
  animation: slideDown var(--duration-normal) var(--easing-default) both;
}

.animate-slide-left {
  animation: slideLeft var(--duration-normal) var(--easing-default) both;
}

.animate-slide-right {
  animation: slideRight var(--duration-normal) var(--easing-default) both;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes slideLeft {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes slideRight {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/* Fade Animations */
.animate-fade-in {
  animation: fadeIn var(--duration-normal) var(--easing-default) both;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* Scale Animations */
.animate-scale-in {
  animation: scaleIn var(--duration-normal) var(--easing-bounce) both;
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
/* Pulse Animation */
.animate-pulse {
  animation: pulse 2s var(--easing-default) infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
/* ==========================================================
   UTILITY CLASSES - World Class
   ========================================================== */
/* Accessibility */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Skip Links */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--brand-primary-500);
  color: white;
  padding: var(--space-xs) var(--space-sm);
  text-decoration: none;
  border-radius: 0 0 var(--radius-md) 0;
  z-index: var(--z-index-top);
  transition: top var(--duration-fast) var(--easing-default);
}
.skip-link:focus {
  top: 0;
}

/* Touch Targets */
.touch-target {
  position: relative;
}
.touch-target::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: max(100%, 44px);
  height: max(100%, 44px);
}

/* Container Queries Ready */
.container-query {
  container-type: inline-size;
}

/* Performance Optimizations */
.gpu-accelerated {
  will-change: transform;
  transform: translateZ(0);
}

.content-visibility-auto {
  content-visibility: auto;
  contain-intrinsic-size: 0 400px;
}

/* ============================================================
   DNA ROMANCE - 2025 CUTTING-EDGE GENETIC COMPONENTS
   World-class design patterns for genetic dating platform
   ============================================================ */
/* ==========================================================
   DNA THEMED DESIGN TOKENS
   ========================================================== */
:root {
  /* DNA Color Palette - Scientific yet vibrant */
  --dna-helix-primary: #3B82F6; /* Blue - DNA base pair */
  --dna-helix-secondary: #EC4899; /* Pink - Complementary strand */
  --dna-helix-tertiary: #10B981; /* Green - Genetic match */
  --dna-helix-quaternary: #F59E0B; /* Amber - Potential match */
  /* Genetic Compatibility Colors */
  --compatibility-excellent: #059669; /* Emerald 600 */
  --compatibility-very-good: #65A30D; /* Lime 600 */
  --compatibility-good: #CA8A04; /* Yellow 600 */
  --compatibility-fair: #DC2626; /* Red 600 */
  --compatibility-poor: #991B1B; /* Red 800 */
  /* Scientific Data Visualization */
  --data-viz-background: rgba(59, 130, 246, 0.05);
  --data-viz-grid: rgba(59, 130, 246, 0.1);
  --data-viz-accent: rgba(236, 72, 153, 0.8);
  /* Premium/Luxury Gradients */
  --gradient-genetic: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --gradient-premium-dna: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  --gradient-science: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  --gradient-luxury: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
  /* DNA Animation Properties */
  --dna-rotation-speed: 20s;
  --helix-pulse-speed: 3s;
  --data-flow-speed: 2s;
}

/* ==========================================================
   DNA HELIX ANIMATIONS
   ========================================================== */
@keyframes dna-helix-rotate {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
@keyframes dna-pulse {
  0%, 100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}
@keyframes genetic-flow {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}
@keyframes compatibility-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 var(--compatibility-excellent);
  }
  70% {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  }
}
@keyframes data-stream {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-100%);
    opacity: 0;
  }
}
/* ==========================================================
   DNA HELIX COMPONENT
   ========================================================== */
.dna-helix-container {
  position: relative;
  width: 120px;
  height: 200px;
  margin: 0 auto;
  perspective: 1000px;
}
.dna-helix-container .dna-helix {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: dna-helix-rotate var(--dna-rotation-speed) linear infinite;
}
.dna-helix-container .dna-helix .helix-strand {
  position: absolute;
  width: 4px;
  height: 100%;
  background: linear-gradient(to bottom, var(--dna-helix-primary), var(--dna-helix-secondary));
  border-radius: 2px;
  transform-origin: center;
}
.dna-helix-container .dna-helix .helix-strand:nth-child(1) {
  transform: rotateY(0deg) translateZ(40px);
}
.dna-helix-container .dna-helix .helix-strand:nth-child(2) {
  transform: rotateY(60deg) translateZ(40px);
}
.dna-helix-container .dna-helix .helix-strand:nth-child(3) {
  transform: rotateY(120deg) translateZ(40px);
}
.dna-helix-container .dna-helix .helix-strand:nth-child(4) {
  transform: rotateY(180deg) translateZ(40px);
}
.dna-helix-container .dna-helix .helix-strand:nth-child(5) {
  transform: rotateY(240deg) translateZ(40px);
}
.dna-helix-container .dna-helix .helix-strand:nth-child(6) {
  transform: rotateY(300deg) translateZ(40px);
}
.dna-helix-container .dna-helix .base-pair {
  position: absolute;
  width: 80px;
  height: 2px;
  background: var(--dna-helix-tertiary);
  left: 50%;
  transform: translateX(-50%);
  border-radius: 1px;
  animation: dna-pulse var(--helix-pulse-speed) ease-in-out infinite;
}
.dna-helix-container .dna-helix .base-pair:nth-child(7) {
  top: 18px;
  animation-delay: 0.2s;
}
.dna-helix-container .dna-helix .base-pair:nth-child(8) {
  top: 36px;
  animation-delay: 0.4s;
}
.dna-helix-container .dna-helix .base-pair:nth-child(9) {
  top: 54px;
  animation-delay: 0.6s;
}
.dna-helix-container .dna-helix .base-pair:nth-child(10) {
  top: 72px;
  animation-delay: 0.8s;
}
.dna-helix-container .dna-helix .base-pair:nth-child(11) {
  top: 90px;
  animation-delay: 1s;
}
.dna-helix-container .dna-helix .base-pair:nth-child(12) {
  top: 108px;
  animation-delay: 1.2s;
}
.dna-helix-container .dna-helix .base-pair:nth-child(13) {
  top: 126px;
  animation-delay: 1.4s;
}
.dna-helix-container .dna-helix .base-pair:nth-child(14) {
  top: 144px;
  animation-delay: 1.6s;
}
.dna-helix-container .dna-helix .base-pair:nth-child(15) {
  top: 162px;
  animation-delay: 1.8s;
}
.dna-helix-container .dna-helix .base-pair:nth-child(16) {
  top: 180px;
  animation-delay: 2s;
}

/* Micro DNA Helix for Icons */
.dna-helix-micro {
  width: 24px;
  height: 32px;
  position: relative;
  display: inline-block;
}
.dna-helix-micro::before, .dna-helix-micro::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 100%;
  background: linear-gradient(45deg, var(--dna-helix-primary), var(--dna-helix-secondary));
  border-radius: 1px;
}
.dna-helix-micro::before {
  left: 6px;
  transform: rotate(-15deg);
}
.dna-helix-micro::after {
  right: 6px;
  transform: rotate(15deg);
}

/* ==========================================================
   GENETIC COMPATIBILITY CARDS
   ========================================================== */
.genetic-profile-card {
  position: relative;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 24px;
  padding: 32px;
  margin: 16px 0;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  cursor: pointer;
}
.genetic-profile-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gradient-genetic);
  border-radius: 24px 24px 0 0;
}
.genetic-profile-card::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.genetic-profile-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
}
.genetic-profile-card:hover::after {
  opacity: 1;
}
.genetic-profile-card .profile-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px;
}
.genetic-profile-card .profile-header .profile-avatar {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--dna-helix-primary);
  animation: compatibility-pulse 3s infinite;
}
.genetic-profile-card .profile-header .profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.genetic-profile-card .profile-header .profile-avatar .genetic-indicator {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 24px;
  height: 24px;
  background: var(--compatibility-excellent);
  border: 3px solid white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: white;
  font-weight: 700;
}
.genetic-profile-card .profile-header .profile-info {
  flex: 1;
}
.genetic-profile-card .profile-header .profile-info h3 {
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 700;
  color: var(--color-gray-900);
  font-family: var(--font-secondary);
}
.genetic-profile-card .profile-header .profile-info .profile-meta {
  color: var(--color-gray-600);
  font-size: 16px;
  margin-bottom: 12px;
}
.genetic-profile-card .profile-header .profile-info .compatibility-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  background: var(--gradient-genetic);
  color: white;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
}
.genetic-profile-card .profile-header .profile-info .compatibility-badge .dna-icon {
  width: 16px;
  height: 16px;
}
.genetic-profile-card .genetic-compatibility {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 16px;
  margin: 24px 0;
}
.genetic-profile-card .genetic-compatibility .compatibility-metric {
  text-align: center;
}
.genetic-profile-card .genetic-compatibility .compatibility-metric .metric-value {
  font-size: 32px;
  font-weight: 800;
  color: var(--dna-helix-primary);
  font-family: var(--font-secondary);
  margin-bottom: 4px;
}
.genetic-profile-card .genetic-compatibility .compatibility-metric .metric-label {
  font-size: 14px;
  color: var(--color-gray-600);
  font-weight: 500;
}
.genetic-profile-card .genetic-compatibility .compatibility-metric .metric-bar {
  width: 100%;
  height: 4px;
  background: var(--color-gray-200);
  border-radius: 2px;
  margin: 8px 0;
  overflow: hidden;
}
.genetic-profile-card .genetic-compatibility .compatibility-metric .metric-bar .metric-fill {
  height: 100%;
  background: var(--gradient-genetic);
  border-radius: 2px;
  transition: width 1s ease-out;
}
.genetic-profile-card .genetic-traits .traits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 12px;
}
.genetic-profile-card .genetic-traits .traits-grid .trait-pill {
  padding: 8px 16px;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 20px;
  text-align: center;
  font-size: 14px;
  color: var(--dna-helix-primary);
  font-weight: 500;
  transition: all 0.3s ease;
}
.genetic-profile-card .genetic-traits .traits-grid .trait-pill:hover {
  background: rgba(59, 130, 246, 0.2);
  transform: translateY(-2px);
}
.genetic-profile-card .genetic-traits .traits-grid .trait-pill.match {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.2);
  color: var(--compatibility-excellent);
}

/* ==========================================================
   DATA VISUALIZATION COMPONENTS
   ========================================================== */
.genetic-data-viz {
  position: relative;
  background: var(--data-viz-background);
  border: 1px solid var(--data-viz-grid);
  border-radius: 16px;
  padding: 24px;
  margin: 24px 0;
}
.genetic-data-viz .viz-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.genetic-data-viz .viz-header h4 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-gray-900);
}
.genetic-data-viz .viz-header .viz-legend {
  display: flex;
  gap: 16px;
}
.genetic-data-viz .viz-header .viz-legend .legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}
.genetic-data-viz .viz-header .viz-legend .legend-item .legend-color {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.genetic-data-viz .compatibility-chart {
  position: relative;
  height: 200px;
  background: repeating-linear-gradient(90deg, transparent, transparent 40px, var(--data-viz-grid) 40px, var(--data-viz-grid) 41px);
}
.genetic-data-viz .compatibility-chart .chart-bar {
  position: absolute;
  bottom: 0;
  width: 60px;
  background: var(--gradient-genetic);
  border-radius: 4px 4px 0 0;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.genetic-data-viz .compatibility-chart .chart-bar::after {
  content: attr(data-value);
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  font-weight: 600;
  color: var(--dna-helix-primary);
}
.genetic-data-viz .compatibility-chart .chart-bar:nth-child(1) {
  left: 20px;
  animation-delay: 0.1s;
}
.genetic-data-viz .compatibility-chart .chart-bar:nth-child(2) {
  left: 100px;
  animation-delay: 0.2s;
}
.genetic-data-viz .compatibility-chart .chart-bar:nth-child(3) {
  left: 180px;
  animation-delay: 0.3s;
}
.genetic-data-viz .compatibility-chart .chart-bar:nth-child(4) {
  left: 260px;
  animation-delay: 0.4s;
}
.genetic-data-viz .compatibility-chart .chart-bar:nth-child(5) {
  left: 340px;
  animation-delay: 0.5s;
}
.genetic-data-viz .compatibility-chart .chart-bar:nth-child(6) {
  left: 420px;
  animation-delay: 0.6s;
}
.genetic-data-viz .dna-sequence-viz {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
  margin: 20px 0;
}
.genetic-data-viz .dna-sequence-viz .sequence-base {
  width: 20px;
  height: 20px;
  margin: 0 2px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: white;
  animation: genetic-flow var(--data-flow-speed) ease-in-out infinite;
}
.genetic-data-viz .dna-sequence-viz .sequence-base.adenine {
  background: #FF6B6B;
}
.genetic-data-viz .dna-sequence-viz .sequence-base.thymine {
  background: #4ECDC4;
}
.genetic-data-viz .dna-sequence-viz .sequence-base.guanine {
  background: #45B7D1;
}
.genetic-data-viz .dna-sequence-viz .sequence-base.cytosine {
  background: #96CEB4;
}
.genetic-data-viz .dna-sequence-viz .sequence-base:nth-child(1) {
  animation-delay: 0.1s;
}
.genetic-data-viz .dna-sequence-viz .sequence-base:nth-child(2) {
  animation-delay: 0.2s;
}
.genetic-data-viz .dna-sequence-viz .sequence-base:nth-child(3) {
  animation-delay: 0.3s;
}
.genetic-data-viz .dna-sequence-viz .sequence-base:nth-child(4) {
  animation-delay: 0.4s;
}
.genetic-data-viz .dna-sequence-viz .sequence-base:nth-child(5) {
  animation-delay: 0.5s;
}
.genetic-data-viz .dna-sequence-viz .sequence-base:nth-child(6) {
  animation-delay: 0.6s;
}
.genetic-data-viz .dna-sequence-viz .sequence-base:nth-child(7) {
  animation-delay: 0.7s;
}
.genetic-data-viz .dna-sequence-viz .sequence-base:nth-child(8) {
  animation-delay: 0.8s;
}
.genetic-data-viz .dna-sequence-viz .sequence-base:nth-child(9) {
  animation-delay: 0.9s;
}
.genetic-data-viz .dna-sequence-viz .sequence-base:nth-child(10) {
  animation-delay: 1s;
}
.genetic-data-viz .dna-sequence-viz .sequence-base:nth-child(11) {
  animation-delay: 1.1s;
}
.genetic-data-viz .dna-sequence-viz .sequence-base:nth-child(12) {
  animation-delay: 1.2s;
}
.genetic-data-viz .dna-sequence-viz .sequence-base:nth-child(13) {
  animation-delay: 1.3s;
}
.genetic-data-viz .dna-sequence-viz .sequence-base:nth-child(14) {
  animation-delay: 1.4s;
}
.genetic-data-viz .dna-sequence-viz .sequence-base:nth-child(15) {
  animation-delay: 1.5s;
}
.genetic-data-viz .dna-sequence-viz .sequence-base:nth-child(16) {
  animation-delay: 1.6s;
}
.genetic-data-viz .dna-sequence-viz .sequence-base:nth-child(17) {
  animation-delay: 1.7s;
}
.genetic-data-viz .dna-sequence-viz .sequence-base:nth-child(18) {
  animation-delay: 1.8s;
}
.genetic-data-viz .dna-sequence-viz .sequence-base:nth-child(19) {
  animation-delay: 1.9s;
}
.genetic-data-viz .dna-sequence-viz .sequence-base:nth-child(20) {
  animation-delay: 2s;
}

/* ==========================================================
   SCIENTIFIC DATA DISPLAYS
   ========================================================== */
.genetic-report-card {
  background: white;
  border-radius: 20px;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
  overflow: hidden;
  margin: 24px 0;
}
.genetic-report-card .report-header {
  background: var(--gradient-science);
  padding: 32px;
  text-align: center;
  color: white;
}
.genetic-report-card .report-header .report-title {
  font-size: 28px;
  font-weight: 800;
  margin-bottom: 8px;
  font-family: var(--font-secondary);
}
.genetic-report-card .report-header .report-subtitle {
  font-size: 16px;
  opacity: 0.9;
}
.genetic-report-card .report-header .genetic-score {
  display: inline-block;
  margin-top: 20px;
  padding: 16px 32px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50px;
  backdrop-filter: blur(10px);
}
.genetic-report-card .report-header .genetic-score .score-value {
  font-size: 48px;
  font-weight: 900;
  font-family: var(--font-secondary);
}
.genetic-report-card .report-header .genetic-score .score-label {
  font-size: 14px;
  opacity: 0.8;
  margin-top: 4px;
}
.genetic-report-card .report-sections {
  padding: 32px;
}
.genetic-report-card .report-sections .report-section {
  margin-bottom: 32px;
}
.genetic-report-card .report-sections .report-section:last-child {
  margin-bottom: 0;
}
.genetic-report-card .report-sections .report-section .section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.genetic-report-card .report-sections .report-section .section-header .section-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gradient-genetic);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
}
.genetic-report-card .report-sections .report-section .section-header .section-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-gray-900);
  margin: 0;
}
.genetic-report-card .report-sections .report-section .genetic-markers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}
.genetic-report-card .report-sections .report-section .genetic-markers .marker-item {
  padding: 16px;
  background: rgba(59, 130, 246, 0.05);
  border: 1px solid rgba(59, 130, 246, 0.1);
  border-radius: 12px;
}
.genetic-report-card .report-sections .report-section .genetic-markers .marker-item .marker-name {
  font-weight: 600;
  color: var(--color-gray-900);
  margin-bottom: 8px;
}
.genetic-report-card .report-sections .report-section .genetic-markers .marker-item .marker-value {
  font-size: 14px;
  color: var(--color-gray-600);
  margin-bottom: 12px;
}
.genetic-report-card .report-sections .report-section .genetic-markers .marker-item .compatibility-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
}
.genetic-report-card .report-sections .report-section .genetic-markers .marker-item .compatibility-indicator .indicator-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.genetic-report-card .report-sections .report-section .genetic-markers .marker-item .compatibility-indicator .indicator-dot.excellent {
  background: var(--compatibility-excellent);
}
.genetic-report-card .report-sections .report-section .genetic-markers .marker-item .compatibility-indicator .indicator-dot.good {
  background: var(--compatibility-good);
}
.genetic-report-card .report-sections .report-section .genetic-markers .marker-item .compatibility-indicator .indicator-dot.fair {
  background: var(--compatibility-fair);
}
.genetic-report-card .report-sections .report-section .genetic-markers .marker-item .compatibility-indicator .indicator-text {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ==========================================================
   INTERACTIVE GENETIC ELEMENTS
   ========================================================== */
.genetic-interaction-panel {
  position: relative;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 24px;
  padding: 32px;
  margin: 24px 0;
  overflow: hidden;
}
.genetic-interaction-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 20% 50%, rgba(59, 130, 246, 0.1) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(236, 72, 153, 0.1) 0%, transparent 50%), radial-gradient(circle at 40% 80%, rgba(16, 185, 129, 0.1) 0%, transparent 50%);
  pointer-events: none;
}
.genetic-interaction-panel .interaction-header {
  text-align: center;
  margin-bottom: 32px;
}
.genetic-interaction-panel .interaction-header h3 {
  font-size: 28px;
  font-weight: 800;
  margin-bottom: 12px;
  background: var(--gradient-genetic);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.genetic-interaction-panel .genetic-sliders {
  display: grid;
  gap: 24px;
}
.genetic-interaction-panel .genetic-sliders .slider-group .slider-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.genetic-interaction-panel .genetic-sliders .slider-group .slider-label .label-text {
  font-weight: 600;
  color: var(--color-gray-900);
}
.genetic-interaction-panel .genetic-sliders .slider-group .slider-label .label-value {
  font-weight: 700;
  color: var(--dna-helix-primary);
}
.genetic-interaction-panel .genetic-sliders .slider-group .genetic-slider {
  position: relative;
  height: 8px;
  background: var(--color-gray-200);
  border-radius: 4px;
  cursor: pointer;
}
.genetic-interaction-panel .genetic-sliders .slider-group .genetic-slider .slider-track {
  position: absolute;
  height: 100%;
  background: var(--gradient-genetic);
  border-radius: 4px;
  transition: width 0.3s ease;
}
.genetic-interaction-panel .genetic-sliders .slider-group .genetic-slider .slider-thumb {
  position: absolute;
  top: -6px;
  width: 20px;
  height: 20px;
  background: white;
  border: 3px solid var(--dna-helix-primary);
  border-radius: 50%;
  cursor: grab;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  transition: all 0.3s ease;
}
.genetic-interaction-panel .genetic-sliders .slider-group .genetic-slider .slider-thumb:hover {
  transform: scale(1.2);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
.genetic-interaction-panel .genetic-sliders .slider-group .genetic-slider .slider-thumb:active {
  cursor: grabbing;
  transform: scale(1.1);
}

/* ==========================================================
   PREMIUM/LUXURY STYLING
   ========================================================== */
.premium-genetic-card {
  position: relative;
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
  border: 2px solid transparent;
  border-radius: 32px;
  padding: 40px;
  margin: 32px 0;
  overflow: hidden;
}
.premium-genetic-card::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  background: var(--gradient-luxury);
  border-radius: 32px;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: xor;
  -webkit-mask-composite: xor;
}
.premium-genetic-card .premium-badge {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 8px 16px;
  background: var(--gradient-premium-dna);
  color: white;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
.premium-genetic-card .luxury-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 24px;
  margin: 32px 0;
}
.premium-genetic-card .luxury-metrics .luxury-metric {
  text-align: center;
  padding: 24px;
  background: rgba(59, 130, 246, 0.03);
  border-radius: 20px;
  transition: all 0.4s ease;
}
.premium-genetic-card .luxury-metrics .luxury-metric:hover {
  background: rgba(59, 130, 246, 0.08);
  transform: translateY(-4px);
}
.premium-genetic-card .luxury-metrics .luxury-metric .metric-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 16px;
  background: var(--gradient-genetic);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
}
.premium-genetic-card .luxury-metrics .luxury-metric .metric-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-gray-900);
  margin-bottom: 8px;
}
.premium-genetic-card .luxury-metrics .luxury-metric .metric-description {
  font-size: 14px;
  color: var(--color-gray-600);
  line-height: 1.5;
}

/* ==========================================================
   TRUST & SCIENCE INDICATORS
   ========================================================== */
.trust-indicators {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin: 40px 0;
  flex-wrap: wrap;
}
.trust-indicators .trust-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  background: white;
  border-radius: 50px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  transition: all 0.3s ease;
}
.trust-indicators .trust-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.trust-indicators .trust-badge .trust-icon {
  width: 24px;
  height: 24px;
  color: var(--dna-helix-primary);
}
.trust-indicators .trust-badge .trust-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-gray-800);
}

.scientific-credibility {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(236, 72, 153, 0.05) 100%);
  border: 1px solid rgba(59, 130, 246, 0.1);
  border-radius: 20px;
  padding: 32px;
  margin: 32px 0;
  text-align: center;
}
.scientific-credibility .credibility-header {
  margin-bottom: 24px;
}
.scientific-credibility .credibility-header .credibility-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  background: var(--gradient-science);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 32px;
}
.scientific-credibility .credibility-header .credibility-title {
  font-size: 24px;
  font-weight: 800;
  color: var(--color-gray-900);
  margin-bottom: 8px;
}
.scientific-credibility .credibility-header .credibility-subtitle {
  font-size: 16px;
  color: var(--color-gray-600);
}
.scientific-credibility .credibility-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 24px;
}
.scientific-credibility .credibility-stats .stat-item .stat-number {
  font-size: 32px;
  font-weight: 900;
  color: var(--dna-helix-primary);
  font-family: var(--font-secondary);
}
.scientific-credibility .credibility-stats .stat-item .stat-label {
  font-size: 14px;
  color: var(--color-gray-600);
  margin-top: 4px;
}

/* ==========================================================
   RESPONSIVE DESIGN
   ========================================================== */
@media (max-width: 768px) {
  .genetic-profile-card {
    padding: 24px;
    margin: 12px 0;
  }
  .genetic-profile-card .profile-header {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }
  .genetic-profile-card .genetic-compatibility {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .genetic-data-viz {
    padding: 16px;
  }
  .genetic-data-viz .compatibility-chart {
    height: 150px;
  }
  .premium-genetic-card {
    padding: 24px;
    margin: 20px 0;
  }
  .premium-genetic-card .luxury-metrics {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .trust-indicators {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
}
/* ==========================================================
   ACCESSIBILITY ENHANCEMENTS
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  .dna-helix {
    animation: none;
  }
  .dna-pulse,
  .genetic-flow,
  .data-stream,
  .compatibility-pulse {
    animation: none;
  }
  .genetic-profile-card:hover {
    transform: none;
  }
}
/* High contrast mode support */
@media (prefers-contrast: high) {
  .genetic-profile-card {
    border: 2px solid var(--color-gray-900);
  }
  .trait-pill {
    border: 2px solid var(--dna-helix-primary);
  }
  .compatibility-indicator .indicator-dot {
    border: 2px solid var(--color-gray-900);
  }
}
/* ==========================================================
   PERFORMANCE OPTIMIZATIONS
   ========================================================== */
.genetic-profile-card,
.genetic-data-viz,
.premium-genetic-card {
  contain: layout style paint;
}

.dna-helix {
  will-change: transform;
}

.genetic-slider .slider-thumb {
  will-change: transform;
}

/* ============================================================
   GENETIC UTILITIES 2025 - Advanced CSS Utilities
   Cutting-edge utility classes for genetic dating platform
   ============================================================ */
/* ==========================================================
   GLASSMORPHISM UTILITIES
   ========================================================== */
.glass-surface {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.glass-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.08) 100%);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15), inset 0 1px 0 0 rgba(255, 255, 255, 0.2);
}

.glass-nav {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

/* ==========================================================
   MORPHISM EFFECTS
   ========================================================== */
.neumorphism {
  background: #f0f0f0;
  box-shadow: 8px 8px 16px #d1d1d1, -8px -8px 16px #ffffff;
  border-radius: 20px;
}

.neumorphism-inset {
  background: #f0f0f0;
  box-shadow: inset 8px 8px 16px #d1d1d1, inset -8px -8px 16px #ffffff;
  border-radius: 20px;
}

.soft-morphism {
  background: linear-gradient(145deg, #ffffff, #f0f0f0);
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1), -5px -5px 10px rgba(255, 255, 255, 0.7);
  border-radius: 16px;
}

/* ==========================================================
   GRADIENT UTILITIES
   ========================================================== */
.gradient-genetic {
  background: var(--gradient-genetic);
}

.gradient-premium-dna {
  background: var(--gradient-premium-dna);
}

.gradient-science {
  background: var(--gradient-science);
}

.gradient-luxury {
  background: var(--gradient-luxury);
}

.gradient-text-genetic {
  background: var(--gradient-genetic);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gradient-text-premium {
  background: var(--gradient-premium-dna);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gradient-border {
  position: relative;
  background: white;
  border-radius: 16px;
}
.gradient-border::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  background: var(--gradient-genetic);
  border-radius: 16px;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: xor;
  -webkit-mask-composite: xor;
}

/* ==========================================================
   ANIMATION UTILITIES
   ========================================================== */
.animate-float {
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}
.animate-glow {
  animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
  from {
    box-shadow: 0 0 20px var(--dna-helix-primary);
  }
  to {
    box-shadow: 0 0 30px var(--dna-helix-primary), 0 0 40px var(--dna-helix-primary);
  }
}
.animate-gradient {
  background-size: 200% 200%;
  animation: gradient-shift 3s ease infinite;
}

@keyframes gradient-shift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.animate-pulse-slow {
  animation: pulse-slow 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse-slow {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}
.animate-bounce-in {
  animation: bounce-in 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes bounce-in {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.animate-slide-in-up {
  animation: slide-in-up 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes slide-in-up {
  0% {
    transform: translateY(100px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
/* ==========================================================
   INTERACTIVE STATES
   ========================================================== */
.hover-lift {
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.hover-lift:hover {
  transform: translateY(-8px);
}

.hover-glow {
  transition: box-shadow 0.3s ease;
}
.hover-glow:hover {
  box-shadow: 0 0 20px rgba(var(--brand-primary-rgb), 0.4);
}

.hover-scale {
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.hover-scale:hover {
  transform: scale(1.05);
}

.hover-tilt {
  transition: transform 0.3s ease;
}
.hover-tilt:hover {
  transform: perspective(1000px) rotateY(10deg) rotateX(5deg);
}

.interactive-card {
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.interactive-card:hover {
  transform: translateY(-12px);
  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
}
.interactive-card:active {
  transform: translateY(-6px);
  transition-duration: 0.1s;
}

/* ==========================================================
   LOADING & PLACEHOLDER UTILITIES
   ========================================================== */
.skeleton-loading {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 2s infinite;
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
.pulse-loading {
  animation: pulse-loading 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse-loading {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
.spinner-dna {
  width: 40px;
  height: 40px;
  border: 4px solid var(--color-gray-200);
  border-top: 4px solid var(--dna-helix-primary);
  border-radius: 50%;
  animation: spinner-rotate 1s linear infinite;
}

@keyframes spinner-rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* ==========================================================
   LAYOUT UTILITIES
   ========================================================== */
.container-fluid {
  width: 100%;
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
  margin-left: auto;
  margin-right: auto;
}

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

.grid-auto-fill {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--space-lg);
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

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

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

/* ==========================================================
   SPACING UTILITIES
   ========================================================== */
.m-auto {
  margin: auto;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.my-auto {
  margin-top: auto;
  margin-bottom: auto;
}

.m-xs {
  margin: var(--space-xs);
}

.mt-xs {
  margin-top: var(--space-xs);
}

.mr-xs {
  margin-right: var(--space-xs);
}

.mb-xs {
  margin-bottom: var(--space-xs);
}

.ml-xs {
  margin-left: var(--space-xs);
}

.mx-xs {
  margin-left: var(--space-xs);
  margin-right: var(--space-xs);
}

.my-xs {
  margin-top: var(--space-xs);
  margin-bottom: var(--space-xs);
}

.p-xs {
  padding: var(--space-xs);
}

.pt-xs {
  padding-top: var(--space-xs);
}

.pr-xs {
  padding-right: var(--space-xs);
}

.pb-xs {
  padding-bottom: var(--space-xs);
}

.pl-xs {
  padding-left: var(--space-xs);
}

.px-xs {
  padding-left: var(--space-xs);
  padding-right: var(--space-xs);
}

.py-xs {
  padding-top: var(--space-xs);
  padding-bottom: var(--space-xs);
}

.m-sm {
  margin: var(--space-sm);
}

.mt-sm {
  margin-top: var(--space-sm);
}

.mr-sm {
  margin-right: var(--space-sm);
}

.mb-sm {
  margin-bottom: var(--space-sm);
}

.ml-sm {
  margin-left: var(--space-sm);
}

.mx-sm {
  margin-left: var(--space-sm);
  margin-right: var(--space-sm);
}

.my-sm {
  margin-top: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.p-sm {
  padding: var(--space-sm);
}

.pt-sm {
  padding-top: var(--space-sm);
}

.pr-sm {
  padding-right: var(--space-sm);
}

.pb-sm {
  padding-bottom: var(--space-sm);
}

.pl-sm {
  padding-left: var(--space-sm);
}

.px-sm {
  padding-left: var(--space-sm);
  padding-right: var(--space-sm);
}

.py-sm {
  padding-top: var(--space-sm);
  padding-bottom: var(--space-sm);
}

.m-md {
  margin: var(--space-md);
}

.mt-md {
  margin-top: var(--space-md);
}

.mr-md {
  margin-right: var(--space-md);
}

.mb-md {
  margin-bottom: var(--space-md);
}

.ml-md {
  margin-left: var(--space-md);
}

.mx-md {
  margin-left: var(--space-md);
  margin-right: var(--space-md);
}

.my-md {
  margin-top: var(--space-md);
  margin-bottom: var(--space-md);
}

.p-md {
  padding: var(--space-md);
}

.pt-md {
  padding-top: var(--space-md);
}

.pr-md {
  padding-right: var(--space-md);
}

.pb-md {
  padding-bottom: var(--space-md);
}

.pl-md {
  padding-left: var(--space-md);
}

.px-md {
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}

.py-md {
  padding-top: var(--space-md);
  padding-bottom: var(--space-md);
}

.m-lg {
  margin: var(--space-lg);
}

.mt-lg {
  margin-top: var(--space-lg);
}

.mr-lg {
  margin-right: var(--space-lg);
}

.mb-lg {
  margin-bottom: var(--space-lg);
}

.ml-lg {
  margin-left: var(--space-lg);
}

.mx-lg {
  margin-left: var(--space-lg);
  margin-right: var(--space-lg);
}

.my-lg {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.p-lg {
  padding: var(--space-lg);
}

.pt-lg {
  padding-top: var(--space-lg);
}

.pr-lg {
  padding-right: var(--space-lg);
}

.pb-lg {
  padding-bottom: var(--space-lg);
}

.pl-lg {
  padding-left: var(--space-lg);
}

.px-lg {
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
}

.py-lg {
  padding-top: var(--space-lg);
  padding-bottom: var(--space-lg);
}

.m-xl {
  margin: var(--space-xl);
}

.mt-xl {
  margin-top: var(--space-xl);
}

.mr-xl {
  margin-right: var(--space-xl);
}

.mb-xl {
  margin-bottom: var(--space-xl);
}

.ml-xl {
  margin-left: var(--space-xl);
}

.mx-xl {
  margin-left: var(--space-xl);
  margin-right: var(--space-xl);
}

.my-xl {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-xl);
}

.p-xl {
  padding: var(--space-xl);
}

.pt-xl {
  padding-top: var(--space-xl);
}

.pr-xl {
  padding-right: var(--space-xl);
}

.pb-xl {
  padding-bottom: var(--space-xl);
}

.pl-xl {
  padding-left: var(--space-xl);
}

.px-xl {
  padding-left: var(--space-xl);
  padding-right: var(--space-xl);
}

.py-xl {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}

.m-2xl {
  margin: var(--space-2xl);
}

.mt-2xl {
  margin-top: var(--space-2xl);
}

.mr-2xl {
  margin-right: var(--space-2xl);
}

.mb-2xl {
  margin-bottom: var(--space-2xl);
}

.ml-2xl {
  margin-left: var(--space-2xl);
}

.mx-2xl {
  margin-left: var(--space-2xl);
  margin-right: var(--space-2xl);
}

.my-2xl {
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-2xl);
}

.p-2xl {
  padding: var(--space-2xl);
}

.pt-2xl {
  padding-top: var(--space-2xl);
}

.pr-2xl {
  padding-right: var(--space-2xl);
}

.pb-2xl {
  padding-bottom: var(--space-2xl);
}

.pl-2xl {
  padding-left: var(--space-2xl);
}

.px-2xl {
  padding-left: var(--space-2xl);
  padding-right: var(--space-2xl);
}

.py-2xl {
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-2xl);
}

.m-3xl {
  margin: var(--space-3xl);
}

.mt-3xl {
  margin-top: var(--space-3xl);
}

.mr-3xl {
  margin-right: var(--space-3xl);
}

.mb-3xl {
  margin-bottom: var(--space-3xl);
}

.ml-3xl {
  margin-left: var(--space-3xl);
}

.mx-3xl {
  margin-left: var(--space-3xl);
  margin-right: var(--space-3xl);
}

.my-3xl {
  margin-top: var(--space-3xl);
  margin-bottom: var(--space-3xl);
}

.p-3xl {
  padding: var(--space-3xl);
}

.pt-3xl {
  padding-top: var(--space-3xl);
}

.pr-3xl {
  padding-right: var(--space-3xl);
}

.pb-3xl {
  padding-bottom: var(--space-3xl);
}

.pl-3xl {
  padding-left: var(--space-3xl);
}

.px-3xl {
  padding-left: var(--space-3xl);
  padding-right: var(--space-3xl);
}

.py-3xl {
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-3xl);
}

.m-4xl {
  margin: var(--space-4xl);
}

.mt-4xl {
  margin-top: var(--space-4xl);
}

.mr-4xl {
  margin-right: var(--space-4xl);
}

.mb-4xl {
  margin-bottom: var(--space-4xl);
}

.ml-4xl {
  margin-left: var(--space-4xl);
}

.mx-4xl {
  margin-left: var(--space-4xl);
  margin-right: var(--space-4xl);
}

.my-4xl {
  margin-top: var(--space-4xl);
  margin-bottom: var(--space-4xl);
}

.p-4xl {
  padding: var(--space-4xl);
}

.pt-4xl {
  padding-top: var(--space-4xl);
}

.pr-4xl {
  padding-right: var(--space-4xl);
}

.pb-4xl {
  padding-bottom: var(--space-4xl);
}

.pl-4xl {
  padding-left: var(--space-4xl);
}

.px-4xl {
  padding-left: var(--space-4xl);
  padding-right: var(--space-4xl);
}

.py-4xl {
  padding-top: var(--space-4xl);
  padding-bottom: var(--space-4xl);
}

.m-5xl {
  margin: var(--space-5xl);
}

.mt-5xl {
  margin-top: var(--space-5xl);
}

.mr-5xl {
  margin-right: var(--space-5xl);
}

.mb-5xl {
  margin-bottom: var(--space-5xl);
}

.ml-5xl {
  margin-left: var(--space-5xl);
}

.mx-5xl {
  margin-left: var(--space-5xl);
  margin-right: var(--space-5xl);
}

.my-5xl {
  margin-top: var(--space-5xl);
  margin-bottom: var(--space-5xl);
}

.p-5xl {
  padding: var(--space-5xl);
}

.pt-5xl {
  padding-top: var(--space-5xl);
}

.pr-5xl {
  padding-right: var(--space-5xl);
}

.pb-5xl {
  padding-bottom: var(--space-5xl);
}

.pl-5xl {
  padding-left: var(--space-5xl);
}

.px-5xl {
  padding-left: var(--space-5xl);
  padding-right: var(--space-5xl);
}

.py-5xl {
  padding-top: var(--space-5xl);
  padding-bottom: var(--space-5xl);
}

/* ==========================================================
   TYPOGRAPHY UTILITIES
   ========================================================== */
.text-gradient {
  background: var(--gradient-genetic);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-shadow-soft {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.text-shadow-strong {
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.hero-security-text {
  font-size: 0.95rem;
  font-weight: 500;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9), 0 0 14px rgba(0, 0, 0, 0.6);
  background: rgba(0, 0, 0, 0.4);
  padding: 8px 20px;
  border-radius: 100px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  letter-spacing: 0.02em;
}

.fw-extra-light {
  font-weight: 200;
}

.fw-light {
  font-weight: var(--font-weight-light);
}

.fw-normal {
  font-weight: var(--font-weight-regular);
}

.fw-medium {
  font-weight: var(--font-weight-medium);
}

.fw-semibold {
  font-weight: var(--font-weight-semibold);
}

.fw-bold {
  font-weight: var(--font-weight-bold);
}

.fw-black {
  font-weight: var(--font-weight-black);
}

.letter-spacing-tight {
  letter-spacing: var(--letter-spacing-tight);
}

.letter-spacing-normal {
  letter-spacing: var(--letter-spacing-normal);
}

.letter-spacing-wide {
  letter-spacing: var(--letter-spacing-wide);
}

.letter-spacing-wider {
  letter-spacing: var(--letter-spacing-wider);
}

/* ==========================================================
   COLOR UTILITIES
   ========================================================== */
.text-dna-primary {
  color: var(--dna-helix-primary);
}

.text-dna-secondary {
  color: var(--dna-helix-secondary);
}

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

.text-compatibility-excellent {
  color: var(--compatibility-excellent);
}

.text-compatibility-good {
  color: var(--compatibility-good);
}

.text-compatibility-fair {
  color: var(--compatibility-fair);
}

.bg-dna-primary {
  background-color: var(--dna-helix-primary);
}

.bg-dna-secondary {
  background-color: var(--dna-helix-secondary);
}

.bg-dna-tertiary {
  background-color: var(--dna-helix-tertiary);
}

.border-dna-primary {
  border-color: var(--dna-helix-primary);
}

.border-dna-secondary {
  border-color: var(--dna-helix-secondary);
}

/* ==========================================================
   GENETIC THEMED ICONS
   ========================================================== */
.icon-dna::before {
  content: "🧬";
  font-style: normal;
}

.icon-microscope::before {
  content: "🔬";
  font-style: normal;
}

.icon-brain::before {
  content: "🧠";
  font-style: normal;
}

.icon-heart::before {
  content: "💖";
  font-style: normal;
}

.icon-shield::before {
  content: "🛡️";
  font-style: normal;
}

.icon-sparkles::before {
  content: "✨";
  font-style: normal;
}

/* ==========================================================
   RESPONSIVE UTILITIES
   ========================================================== */
@media (max-width: 768px) {
  .mobile-hidden {
    display: none;
  }
  .mobile-only {
    display: block;
  }
  .mobile-text-center {
    text-align: center;
  }
  .mobile-text-left {
    text-align: left;
  }
  .mobile-flex-column {
    flex-direction: column;
  }
  .mobile-flex-column > * + * {
    margin-top: var(--space-md);
    margin-left: 0;
  }
}
@media (min-width: 769px) {
  .desktop-only {
    display: block;
  }
  .mobile-only {
    display: none;
  }
}
/* ==========================================================
   ACCESSIBILITY UTILITIES
   ========================================================== */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.focus-ring:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.5);
  border-radius: var(--radius-md);
}

@media (prefers-reduced-motion: reduce) {
  .reduced-motion {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================
   PERFORMANCE OPTIMIZATION UTILITIES
   ========================================================== */
.gpu-layer {
  will-change: transform;
  transform: translateZ(0);
}

.content-visibility-auto {
  content-visibility: auto;
  contain-intrinsic-size: 0 400px;
}

.no-select {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.pointer-events-none {
  pointer-events: none;
}

.pointer-events-auto {
  pointer-events: auto;
}

/* ============================================================
   DNA-THEMED EFFECTS & PARTICLE SYSTEM
   Premium visual effects for genetic dating platform
   ============================================================ */
/* ==========================================================
   DNA HELIX BACKGROUND PATTERNS
   ========================================================== */
.dna-background {
  position: relative;
  overflow: hidden;
}
.dna-background::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 25% 25%, rgba(15, 117, 189, 0.1) 0%, transparent 50%), radial-gradient(circle at 75% 75%, rgba(247, 44, 147, 0.1) 0%, transparent 50%), url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg stroke='%23f72c93' stroke-width='1' stroke-opacity='0.05'%3E%3Cpath d='M15,15 Q30,30 45,15 Q30,45 15,45 Q30,30 45,45'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 300px 300px, 400px 400px, 60px 60px;
  background-position: 0 0, 100px 100px, 0 0;
  animation: dna-background-flow 30s linear infinite;
  opacity: 0.6;
  z-index: -1;
}
.dna-background--animated::before {
  animation: dna-background-flow 20s linear infinite, dna-background-pulse 8s ease-in-out infinite;
}
.dna-background--subtle::before {
  opacity: 0.3;
  background-size: 200px 200px, 300px 300px, 40px 40px;
}
.dna-background--intense::before {
  opacity: 0.8;
  background-size: 400px 400px, 500px 500px, 80px 80px;
}

@keyframes dna-background-flow {
  0% {
    opacity: 0.6;
  }
  50% {
    opacity: 0.4;
  }
  100% {
    opacity: 0.6;
  }
}
@keyframes dna-background-pulse {
  0%, 100% {
    opacity: 0.6;
  }
  50% {
    opacity: 0.3;
  }
}
/* ==========================================================
   FLOATING PARTICLE SYSTEM
   ========================================================== */
.particle-container {
  position: relative;
  overflow: hidden;
}
.particle-container .particle {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  animation: particle-float 8s linear infinite;
}
.particle-container .particle--xs {
  width: 2px;
  height: 2px;
}
.particle-container .particle--sm {
  width: 4px;
  height: 4px;
}
.particle-container .particle--md {
  width: 6px;
  height: 6px;
}
.particle-container .particle--lg {
  width: 8px;
  height: 8px;
}
.particle-container .particle--primary {
  background: var(--brand-primary);
  box-shadow: 0 0 10px rgba(var(--brand-primary-rgb), 0.5);
}
.particle-container .particle--secondary {
  background: var(--brand-secondary);
  box-shadow: 0 0 10px rgba(var(--brand-secondary-rgb), 0.5);
}
.particle-container .particle--white {
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
.particle-container .particle:nth-child(1) {
  animation-delay: 0s;
  left: 10%;
}
.particle-container .particle:nth-child(2) {
  animation-delay: 1s;
  left: 20%;
}
.particle-container .particle:nth-child(3) {
  animation-delay: 2s;
  left: 30%;
}
.particle-container .particle:nth-child(4) {
  animation-delay: 3s;
  left: 40%;
}
.particle-container .particle:nth-child(5) {
  animation-delay: 4s;
  left: 50%;
}
.particle-container .particle:nth-child(6) {
  animation-delay: 5s;
  left: 60%;
}
.particle-container .particle:nth-child(7) {
  animation-delay: 6s;
  left: 70%;
}
.particle-container .particle:nth-child(8) {
  animation-delay: 7s;
  left: 80%;
}
.particle-container .particle:nth-child(9) {
  animation-delay: 0.5s;
  left: 90%;
}
.particle-container .particle:nth-child(10) {
  animation-delay: 1.5s;
  left: 15%;
}

@keyframes particle-float {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* ==========================================================
   DNA STRAND ANIMATIONS
   ========================================================== */
.dna-strand {
  position: relative;
  height: 200px;
  width: 4px;
  margin: 0 auto;
}
.dna-strand .strand-segment {
  position: absolute;
  width: 100%;
  height: 20px;
  background: linear-gradient(to bottom, var(--brand-primary), var(--brand-secondary));
  border-radius: 2px;
  animation: strand-twist 3s ease-in-out infinite;
}
.dna-strand .strand-segment:nth-child(1) {
  top: 0;
  animation-delay: 0s;
}
.dna-strand .strand-segment:nth-child(2) {
  top: 20px;
  animation-delay: 0.2s;
}
.dna-strand .strand-segment:nth-child(3) {
  top: 40px;
  animation-delay: 0.4s;
}
.dna-strand .strand-segment:nth-child(4) {
  top: 60px;
  animation-delay: 0.6s;
}
.dna-strand .strand-segment:nth-child(5) {
  top: 80px;
  animation-delay: 0.8s;
}
.dna-strand .strand-segment:nth-child(6) {
  top: 100px;
  animation-delay: 1s;
}
.dna-strand .strand-segment:nth-child(7) {
  top: 120px;
  animation-delay: 1.2s;
}
.dna-strand .strand-segment:nth-child(8) {
  top: 140px;
  animation-delay: 1.4s;
}
.dna-strand .strand-segment:nth-child(9) {
  top: 160px;
  animation-delay: 1.6s;
}
.dna-strand .strand-segment:nth-child(10) {
  top: 180px;
  animation-delay: 1.8s;
}
.dna-strand .base-pair {
  position: absolute;
  width: 30px;
  height: 2px;
  background: var(--color-accent);
  left: 50%;
  transform: translateX(-50%);
  border-radius: 1px;
  animation: base-pair-pulse 2s ease-in-out infinite;
}
.dna-strand .base-pair:nth-child(odd) {
  animation-delay: 0s;
}
.dna-strand .base-pair:nth-child(even) {
  animation-delay: 1s;
}

@keyframes strand-twist {
  0%, 100% {
    opacity: 1;
    background: linear-gradient(to bottom, var(--brand-primary), var(--brand-secondary));
  }
  50% {
    opacity: 0.7;
    background: linear-gradient(to bottom, var(--brand-secondary), var(--brand-primary));
  }
}
@keyframes base-pair-pulse {
  0%, 100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}
/* ==========================================================
   GENETIC CONSTELLATION EFFECT
   ========================================================== */
.genetic-constellation {
  position: relative;
  min-height: 400px;
}
.genetic-constellation .constellation-point {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--brand-primary);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(var(--brand-primary-rgb), 0.8);
  animation: constellation-twinkle 3s ease-in-out infinite;
}
.genetic-constellation .constellation-point:nth-child(1) {
  top: 20%;
  left: 15%;
  animation-delay: 0s;
}
.genetic-constellation .constellation-point:nth-child(2) {
  top: 30%;
  left: 85%;
  animation-delay: 0.5s;
}
.genetic-constellation .constellation-point:nth-child(3) {
  top: 60%;
  left: 25%;
  animation-delay: 1s;
}
.genetic-constellation .constellation-point:nth-child(4) {
  top: 80%;
  left: 70%;
  animation-delay: 1.5s;
}
.genetic-constellation .constellation-point:nth-child(5) {
  top: 15%;
  left: 60%;
  animation-delay: 2s;
}
.genetic-constellation .constellation-point:nth-child(6) {
  top: 45%;
  left: 10%;
  animation-delay: 2.5s;
}
.genetic-constellation .constellation-point:nth-child(7) {
  top: 70%;
  left: 90%;
  animation-delay: 3s;
}
.genetic-constellation .constellation-point:nth-child(8) {
  top: 35%;
  left: 45%;
  animation-delay: 3.5s;
}
.genetic-constellation .constellation-point::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--connection-length, 50px);
  height: 1px;
  background: linear-gradient(90deg, rgba(var(--brand-primary-rgb), 0.3) 0%, transparent 100%);
  transform: translate(-50%, -50%) rotate(var(--connection-angle, 45deg));
  animation: connection-pulse 4s ease-in-out infinite;
  animation-delay: inherit;
}

@keyframes constellation-twinkle {
  0%, 100% {
    opacity: 0.4;
  }
  50% {
    opacity: 1;
  }
}
@keyframes connection-pulse {
  0%, 100% {
    opacity: 0.1;
  }
  50% {
    opacity: 0.6;
  }
}
/* ==========================================================
   COMPATIBILITY VISUALIZATION
   ========================================================== */
.compatibility-visual {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto;
}
.compatibility-visual .compatibility-ring {
  position: absolute;
  inset: 0;
  border: 3px solid transparent;
  border-radius: 50%;
  animation: compatibility-spin 4s linear infinite;
}
.compatibility-visual .compatibility-ring--outer {
  border-color: var(--brand-primary) transparent var(--brand-primary) transparent;
  animation-duration: 6s;
}
.compatibility-visual .compatibility-ring--middle {
  inset: 20px;
  border-color: transparent var(--brand-secondary) transparent var(--brand-secondary);
  animation-duration: 4s;
  animation-direction: reverse;
}
.compatibility-visual .compatibility-ring--inner {
  inset: 40px;
  border-color: var(--color-accent) transparent var(--color-accent) transparent;
  animation-duration: 3s;
}
.compatibility-visual .compatibility-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  background: var(--gradient-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  box-shadow: var(--shadow-lg);
  animation: compatibility-pulse 2s ease-in-out infinite;
}
.compatibility-visual .genetic-marker {
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--color-success);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(var(--color-success-rgb), 0.6);
  animation: marker-orbit 8s linear infinite;
}
.compatibility-visual .genetic-marker:nth-child(1) {
  top: 10px;
  left: 50%;
  animation-delay: 0s;
}
.compatibility-visual .genetic-marker:nth-child(2) {
  top: 50%;
  right: 10px;
  animation-delay: 2s;
}
.compatibility-visual .genetic-marker:nth-child(3) {
  bottom: 10px;
  left: 50%;
  animation-delay: 4s;
}
.compatibility-visual .genetic-marker:nth-child(4) {
  top: 50%;
  left: 10px;
  animation-delay: 6s;
}

@keyframes compatibility-spin {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}
@keyframes compatibility-pulse {
  0%, 100% {
    opacity: 1;
    box-shadow: var(--shadow-lg);
  }
  50% {
    opacity: 0.9;
    box-shadow: var(--shadow-xl);
  }
}
@keyframes marker-orbit {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}
/* ==========================================================
   PREMIUM HERO EFFECTS
   ========================================================== */
.hero-dna-effects {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}
.hero-dna-effects::before {
  content: "";
  position: absolute;
  inset: -20%;
  background-image: radial-gradient(circle at 20% 20%, rgba(15, 117, 189, 0.15) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(247, 44, 147, 0.15) 0%, transparent 50%), radial-gradient(circle at 60% 40%, rgba(124, 77, 255, 0.1) 0%, transparent 50%);
  animation: hero-dna-flow 20s ease-in-out infinite;
  z-index: -1;
}
.hero-dna-effects .genetic-element {
  position: absolute;
  opacity: 0.1;
  animation: genetic-float 15s ease-in-out infinite;
}
.hero-dna-effects .genetic-element--helix {
  width: 100px;
  height: 200px;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20,20 Q50,100 80,180' fill='none' stroke='%230F75BD' stroke-width='3'/%3E%3Cpath d='M80,20 Q50,100 20,180' fill='none' stroke='%23F72C93' stroke-width='3'/%3E%3C/svg%3E") no-repeat;
  background-size: contain;
  top: 20%;
  left: 10%;
  animation-delay: 0s;
}
.hero-dna-effects .genetic-element--molecule {
  width: 80px;
  height: 80px;
  background: var(--gradient-primary);
  border-radius: 50%;
  top: 60%;
  right: 15%;
  animation-delay: 5s;
}
.hero-dna-effects .genetic-element--strand {
  width: 150px;
  height: 4px;
  background: var(--gradient-secondary);
  border-radius: 2px;
  top: 40%;
  left: 70%;
  animation-delay: 10s;
  transform-origin: left center;
}

@keyframes hero-dna-flow {
  0%, 100% {
    opacity: 0.8;
  }
  50% {
    opacity: 0.6;
  }
}
@keyframes genetic-float {
  0%, 100% {
    opacity: 0.1;
  }
  50% {
    opacity: 0.3;
  }
}
/* ==========================================================
   LOVE CHEMISTRY EFFECTS
   ========================================================== */
.chemistry-reaction {
  position: relative;
  padding: var(--space-xl);
}
.chemistry-reaction .chemical-bond {
  position: absolute;
  width: 2px;
  height: 60px;
  background: var(--gradient-primary);
  animation: bond-vibration 1.5s ease-in-out infinite;
  transform-origin: center;
}
.chemistry-reaction .chemical-bond:nth-child(1) {
  top: 20%;
  left: 30%;
  animation-delay: 0s;
}
.chemistry-reaction .chemical-bond:nth-child(2) {
  top: 40%;
  right: 25%;
  animation-delay: 0.3s;
}
.chemistry-reaction .chemical-bond:nth-child(3) {
  bottom: 30%;
  left: 60%;
  animation-delay: 0.6s;
}
.chemistry-reaction .chemical-bond::before, .chemistry-reaction .chemical-bond::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--brand-secondary);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(var(--brand-secondary-rgb), 0.5);
}
.chemistry-reaction .chemical-bond::before {
  top: -6px;
  left: -5px;
}
.chemistry-reaction .chemical-bond::after {
  bottom: -6px;
  left: -5px;
}
.chemistry-reaction .love-spark {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--brand-secondary);
  border-radius: 50%;
  animation: spark-twinkle 2s ease-in-out infinite;
}
.chemistry-reaction .love-spark:nth-child(even) {
  animation-delay: 1s;
}

@keyframes bond-vibration {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}
@keyframes spark-twinkle {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
/* ==========================================================
   RESPONSIVE EFFECTS
   ========================================================== */
@media (max-width: 767px) {
  .dna-background::before {
    background-size: 200px 200px, 250px 250px, 40px 40px;
  }
  .particle-container .particle:nth-child(n+6) {
    display: none;
  }
  .genetic-constellation {
    min-height: 300px;
  }
  .genetic-constellation .constellation-point:nth-child(n+6) {
    display: none;
  }
  .compatibility-visual {
    width: 150px;
    height: 150px;
  }
  .compatibility-visual .compatibility-center {
    width: 60px;
    height: 60px;
    font-size: var(--font-size-xl);
  }
  .hero-dna-effects .genetic-element--helix {
    width: 60px;
    height: 120px;
  }
  .hero-dna-effects .genetic-element--molecule {
    width: 50px;
    height: 50px;
  }
  .hero-dna-effects .genetic-element--strand {
    width: 100px;
    height: 3px;
  }
}
/* ==========================================================
   ACCESSIBILITY & PERFORMANCE
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  .dna-background,
  .particle-container .particle,
  .dna-strand .strand-segment,
  .genetic-constellation .constellation-point,
  .compatibility-visual .compatibility-ring,
  .hero-dna-effects::before,
  .chemistry-reaction .chemical-bond,
  .chemistry-reaction .love-spark {
    animation: none !important;
  }
  .genetic-element {
    opacity: 0.05 !important;
    transform: none !important;
  }
}
.performance-mode .dna-background::before,
.performance-mode .hero-dna-effects::before {
  animation-duration: 60s;
  will-change: auto;
}
.performance-mode .particle-container .particle {
  animation-duration: 20s;
}
.performance-mode .genetic-constellation .constellation-point::before,
.performance-mode .chemistry-reaction .chemical-bond,
.performance-mode .chemistry-reaction .love-spark {
  display: none;
}

.dna-background::before,
.particle-container .particle,
.compatibility-visual .compatibility-ring,
.hero-dna-effects::before {
  will-change: transform;
  transform: translateZ(0);
}

.btn-dna {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--button-padding-y) var(--button-padding-x);
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  font-weight: var(--button-font-weight);
  line-height: var(--line-height-tight);
  text-decoration: none;
  border: var(--border-thin) solid transparent;
  border-radius: var(--button-border-radius);
  cursor: pointer;
  transition: var(--button-transition);
  position: relative;
  overflow: hidden;
}
.btn-dna::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.4s, height 0.4s;
}
.btn-dna:hover::before {
  width: 300px;
  height: 300px;
}
.btn-dna--primary {
  background: var(--gradient-primary);
  color: var(--color-white);
  box-shadow: var(--shadow-primary);
}
.btn-dna--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
.btn-dna--secondary {
  background: var(--gradient-secondary);
  color: var(--color-white);
  box-shadow: var(--shadow-secondary);
}
.btn-dna--secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
.btn-dna--ghost {
  background: transparent;
  color: var(--brand-primary);
  border-color: var(--brand-primary);
}
.btn-dna--ghost:hover {
  background: var(--brand-primary);
  color: var(--color-white);
}
.btn-dna--glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--color-white);
}
.btn-dna--glass:hover {
  background: rgba(255, 255, 255, 0.2);
}
.btn-dna--sm {
  padding: var(--space-xxs) var(--space-md);
  font-size: var(--font-size-sm);
}
.btn-dna--lg {
  padding: var(--space-md) var(--space-xl);
  font-size: var(--font-size-lg);
}
.btn-dna:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}
.btn-dna--loading {
  color: transparent;
}
.btn-dna--loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  top: 50%;
  left: 50%;
  margin-left: -8px;
  margin-top: -8px;
  border: 2px solid var(--color-white);
  border-radius: 50%;
  border-top-color: transparent;
  animation: btn-loading-spinner 0.8s linear infinite;
}

@keyframes btn-loading-spinner {
  to {
    transform: rotate(360deg);
  }
}
.card-dna, .match-card {
  background: var(--color-surface);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
  box-shadow: var(--card-shadow);
  transition: var(--transition-default);
  position: relative;
  overflow: hidden;
  transition: transform var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);
}
.card-dna:hover, .match-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.card-dna--glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.card-dna--gradient-border {
  background: var(--color-surface);
  background-clip: padding-box;
  border: 2px solid transparent;
}
.card-dna--gradient-border::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--card-radius);
  padding: 2px;
  background: var(--gradient-primary);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.card-dna--premium {
  background: var(--gradient-premium);
  color: var(--color-white);
}
.card-dna--premium::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
  transform: rotate(45deg);
  animation: shimmer 3s infinite;
}
.card-dna__header {
  margin-bottom: var(--space-md);
}
.card-dna__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin: 0;
}
.card-dna__subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-top: var(--space-xs);
}
.card-dna__body {
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}
.card-dna__footer {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: var(--border-thin) solid var(--border-color);
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%) rotate(45deg);
  }
  100% {
    transform: translateX(100%) rotate(45deg);
  }
}
.match-card {
  position: relative;
  overflow: visible;
}
.match-card__compatibility {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--gradient-primary);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  box-shadow: var(--shadow-lg);
}
.match-card__compatibility--high {
  background: var(--gradient-success);
}
.match-card__compatibility--medium {
  background: linear-gradient(135deg, var(--color-warning) 0%, #FFB74D 100%);
}
.match-card__avatar {
  width: 100%;
  height: 200px;
  border-radius: var(--radius-lg);
  object-fit: cover;
  margin-bottom: var(--space-md);
}
.match-card__info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-sm);
}
.match-card__name {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}
.match-card__age {
  color: var(--color-text-secondary);
}
.match-card__badges {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
  margin-top: var(--space-sm);
}
.match-card__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xxs);
  padding: var(--space-xxs) var(--space-sm);
  background: var(--color-gray-100);
  color: var(--color-text-secondary);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
}
.match-card__badge--verified {
  background: rgba(76, 175, 80, 0.1);
  color: var(--color-success);
}
.match-card__badge--premium {
  background: rgba(255, 215, 0, 0.1);
  color: #F57C00;
}

.input-dna {
  position: relative;
  margin-bottom: var(--space-lg);
}
.input-dna__field {
  width: 100%;
  padding: var(--input-padding-y) var(--input-padding-x);
  padding-top: calc(var(--input-padding-y) + 12px);
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  border: var(--border-thin) solid var(--input-border-color);
  border-radius: var(--input-border-radius);
  background: var(--color-surface);
  transition: var(--transition-fast);
}
.input-dna__field:focus {
  outline: none;
  border-color: var(--input-focus-color);
  box-shadow: var(--input-focus-shadow);
}
.input-dna__field:focus + .input-dna__label, .input-dna__field:not(:placeholder-shown) + .input-dna__label {
  top: 8px;
  font-size: var(--font-size-xs);
  color: var(--input-focus-color);
}
.input-dna__label {
  position: absolute;
  left: var(--input-padding-x);
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  transition: var(--transition-fast);
  pointer-events: none;
  background: var(--color-surface);
  padding: 0 var(--space-xxs);
}
.input-dna__helper {
  margin-top: var(--space-xs);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}
.input-dna__error {
  color: var(--color-danger);
}
.input-dna--glass .input-dna__field {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.feature-card {
  text-align: center;
  padding: var(--space-xl);
  transition: var(--transition-default);
}
.feature-card__icon {
  width: 80px;
  height: 80px;
  margin: 0 auto var(--space-lg);
  background: var(--gradient-primary);
  border-radius: var(--radius-2xl);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--color-white);
  box-shadow: var(--shadow-lg);
  transition: var(--transition-default);
}
.feature-card:hover .feature-card__icon {
  transform: scale(1.1) rotate(5deg);
}
.feature-card__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-sm);
  color: var(--color-text-primary);
}
.feature-card__description {
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

.stat-card {
  text-align: center;
}
.stat-card__value {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: var(--space-xs);
}
.stat-card__label {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
}
.stat-card__trend {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xxs);
  margin-top: var(--space-sm);
  font-size: var(--font-size-sm);
  color: var(--color-success);
}
.stat-card__trend--up {
  color: var(--color-success);
}
.stat-card__trend--down {
  color: var(--color-danger);
}

.hero-dna {
  position: relative;
  min-height: 600px;
  display: flex;
  align-items: center;
  padding: var(--space-section) 0;
  overflow: hidden;
}
.hero-dna::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50,30 Q60,50 50,70 Q40,50 50,30' fill='none' stroke='%23f72c93' stroke-width='0.5' opacity='0.1'/%3E%3C/svg%3E");
  background-size: 100px 100px;
  animation: dna-float 20s linear infinite;
  opacity: 0.1;
}
.hero-dna__content {
  position: relative;
  z-index: 1;
}
.hero-dna__title {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-tight);
  margin-bottom: var(--space-lg);
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-dna__subtitle {
  font-size: var(--font-size-xl);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-xl);
  max-width: 600px;
}
.hero-dna__cta {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.hero-dna__image {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 50%;
  height: auto;
  opacity: 0.1;
}
@media (min-width: 768px) {
  .hero-dna__image {
    opacity: 1;
  }
}

@keyframes dna-float {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  100% {
    transform: translate(-100px, -100px) rotate(360deg);
  }
}
.nav-dna {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-height);
  background: var(--nav-background);
  backdrop-filter: var(--nav-backdrop-filter);
  -webkit-backdrop-filter: var(--nav-backdrop-filter);
  box-shadow: var(--shadow-sm);
  z-index: var(--z-sticky);
  transition: var(--transition-default);
}
.nav-dna--scrolled {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: var(--shadow-md);
}
.nav-dna__container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-lg);
  max-width: var(--container-xl);
  margin: 0 auto;
}
.nav-dna__logo {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  text-decoration: none;
}
.nav-dna__logo img {
  height: 40px;
  width: auto;
}
.nav-dna__menu {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-dna__link {
  color: var(--color-text-primary);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
  transition: var(--transition-fast);
  position: relative;
}
.nav-dna__link::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--gradient-primary);
  transition: width var(--duration-fast) var(--ease-out);
}
.nav-dna__link:hover::after, .nav-dna__link--active::after {
  width: 100%;
}
.nav-dna__actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.modal-dna {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  opacity: 0;
  visibility: hidden;
  transition: var(--transition-default);
}
.modal-dna--open {
  opacity: 1;
  visibility: visible;
}
.modal-dna__backdrop {
  position: absolute;
  inset: 0;
  background: var(--modal-backdrop);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.modal-dna__content {
  position: relative;
  background: var(--color-surface);
  border-radius: var(--modal-radius);
  box-shadow: var(--modal-shadow);
  max-width: 500px;
  width: 100%;
  max-height: 90vh;
  overflow: auto;
  transform: scale(0.9);
  transition: transform var(--duration-normal) var(--ease-bounce);
}
.modal-dna--open .modal-dna__content {
  transform: scale(1);
}
.modal-dna__header {
  padding: var(--space-xl) var(--space-xl) 0;
}
.modal-dna__title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  margin: 0;
}
.modal-dna__body {
  padding: var(--space-lg) var(--space-xl);
}
.modal-dna__footer {
  padding: 0 var(--space-xl) var(--space-xl);
  display: flex;
  gap: var(--space-md);
  justify-content: flex-end;
}
.modal-dna__close {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--color-gray-100);
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-fast);
}
.modal-dna__close:hover {
  background: var(--color-gray-200);
  transform: rotate(90deg);
}

.skeleton {
  background: linear-gradient(90deg, var(--color-gray-200) 25%, var(--color-gray-100) 50%, var(--color-gray-200) 75%);
  background-size: 400% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
  border-radius: var(--radius-md);
}
.skeleton--text {
  height: 1em;
  margin-bottom: var(--space-xs);
}
.skeleton--text:last-child {
  width: 80%;
}
.skeleton--title {
  height: 2em;
  width: 60%;
  margin-bottom: var(--space-md);
}
.skeleton--avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
.skeleton--card {
  height: 300px;
}

@keyframes skeleton-loading {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}
.glass-effect {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.gradient-text {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hover-lift {
  transition: transform var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);
}
.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.card-glass, .panel-glass {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-xl);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  transition: all var(--duration-normal) var(--ease-out);
}
.card-glass:hover, .panel-glass:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  transform: translateY(-2px);
}
.card-glass--dark {
  background: rgba(0, 0, 0, 0.1);
  border-color: rgba(255, 255, 255, 0.1);
}
.card-glass--dark:hover {
  background: rgba(0, 0, 0, 0.15);
}
.card-glass--colored {
  background: rgba(15, 117, 189, 0.1);
  border-color: rgba(15, 117, 189, 0.3);
}
.card-glass--colored:hover {
  background: rgba(15, 117, 189, 0.15);
  border-color: rgba(15, 117, 189, 0.4);
}

.panel-glass {
  padding: var(--space-xl);
  margin-bottom: var(--space-lg);
}

.form-floating-dna {
  position: relative;
  margin-bottom: var(--space-lg);
}
.form-floating-dna .form-control {
  height: calc(3.5rem + 2px);
  padding: 1rem var(--space-md);
  font-size: var(--font-size-base);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.9);
  transition: all var(--duration-fast) var(--ease-out);
}
.form-floating-dna .form-control::placeholder {
  color: transparent;
}
.form-floating-dna .form-control:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  background: var(--color-white);
}
.form-floating-dna .form-control:focus ~ label, .form-floating-dna .form-control:not(:placeholder-shown) ~ label {
  opacity: 1;
  transform: translateY(-1.5rem) scale(0.85);
  color: var(--brand-primary);
}
.form-floating-dna .form-control.is-invalid {
  border-color: var(--color-danger);
}
.form-floating-dna .form-control.is-invalid:focus {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
.form-floating-dna label {
  position: absolute;
  top: 1rem;
  left: var(--space-md);
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  pointer-events: none;
  transform-origin: 0 0;
  transition: all var(--duration-fast) var(--ease-out);
  background: linear-gradient(to bottom, transparent 0%, transparent 40%, white 40%, white 100%);
  padding: 0 var(--space-xs);
}
.form-floating-dna.form-floating-glass .form-control {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--color-white);
}
.form-floating-dna.form-floating-glass .form-control:focus {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.4);
}
.form-floating-dna.form-floating-glass label {
  color: rgba(255, 255, 255, 0.8);
  background: transparent;
}

.skeleton-loader {
  position: relative;
  overflow: hidden;
  background: var(--color-gray-100);
}
.skeleton-loader::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0));
  animation: shimmer 2s infinite;
}
.skeleton-loader--text {
  height: 1rem;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-sm);
}
.skeleton-loader--text:last-child {
  width: 60%;
}
.skeleton-loader--title {
  height: 2rem;
  width: 50%;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
}
.skeleton-loader--avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}
.skeleton-loader--button {
  height: 48px;
  width: 120px;
  border-radius: var(--radius-md);
}
.skeleton-loader--card {
  height: 320px;
  border-radius: var(--radius-xl);
}
.skeleton-loader--image {
  width: 100%;
  height: 200px;
  border-radius: var(--radius-lg);
}

@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}
.hero-modern {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.hero-modern::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: radial-gradient(circle at 20% 80%, rgba(247, 44, 147, 0.3) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(15, 117, 189, 0.3) 0%, transparent 50%), radial-gradient(circle at 40% 40%, rgba(124, 77, 255, 0.2) 0%, transparent 50%);
  animation: gradient-animation 15s ease infinite;
}
.hero-modern__content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  padding: var(--space-xl);
}
.hero-modern__title {
  font-size: clamp(2.5rem, 8vw, 5rem);
  font-weight: var(--font-weight-black);
  color: var(--color-white);
  margin-bottom: var(--space-lg);
  animation: fadeInUp 1s ease-out;
  line-height: 1.2;
}
.hero-modern__title span {
  background: linear-gradient(to right, #FFD700, #FFA000);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-modern__subtitle {
  font-size: clamp(1.2rem, 3vw, 1.5rem);
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: var(--space-2xl);
  animation: fadeInUp 1s ease-out 0.2s both;
  line-height: 1.6;
}
.hero-modern__cta {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  flex-wrap: wrap;
  animation: fadeInUp 1s ease-out 0.4s both;
}
.hero-modern__scroll {
  position: absolute;
  bottom: var(--space-xl);
  left: 50%;
  transform: translateX(-50%);
  color: var(--color-white);
  font-size: 1.5rem;
  cursor: pointer;
  opacity: 0.6;
  transition: all var(--duration-fast);
}
.hero-modern__scroll:hover {
  opacity: 1;
  transform: translateX(-50%) translateY(-4px);
}
.hero-modern__shape {
  position: absolute;
  opacity: 0.03;
  pointer-events: none;
}
.hero-modern__shape--1 {
  top: 10%;
  left: 10%;
  width: 100px;
  height: 100px;
  background: var(--brand-secondary);
  border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
}
.hero-modern__shape--2 {
  top: 60%;
  right: 10%;
  width: 150px;
  height: 150px;
  background: var(--brand-primary);
  border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
}
.hero-modern__shape--3 {
  bottom: 10%;
  left: 30%;
  width: 80px;
  height: 80px;
  background: var(--color-accent);
  border-radius: 41% 59% 41% 59%/41% 59% 41% 59%;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.btn-hover-fill {
  position: relative;
  overflow: hidden;
  transition: all var(--duration-normal) var(--ease-out);
  z-index: 1;
}
.btn-hover-fill::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  transition: all var(--duration-normal) var(--ease-out);
  z-index: -1;
}
.btn-hover-fill:hover::before {
  width: 100%;
}
.btn-hover-fill:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.btn-hover-slide {
  position: relative;
  overflow: hidden;
  transition: all var(--duration-normal) var(--ease-out);
}
.btn-hover-slide span {
  position: relative;
  z-index: 2;
}
.btn-hover-slide::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: var(--gradient-primary);
  transition: left var(--duration-normal) var(--ease-out);
  z-index: 1;
}
.btn-hover-slide:hover::before {
  left: 0;
}
.btn-hover-slide:hover {
  color: var(--color-white);
}

.btn-hover-glow {
  transition: all var(--duration-normal) var(--ease-out);
}
.btn-hover-glow:hover {
  box-shadow: 0 0 20px rgba(var(--brand-primary-rgb), 0.5);
  transform: translateY(-2px);
}

.btn-hover-pulse {
  position: relative;
}
.btn-hover-pulse::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--brand-primary);
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: all var(--duration-slow) var(--ease-out);
}
.btn-hover-pulse:hover::before {
  animation: pulse-grow 1s ease-out infinite;
}

@keyframes pulse-grow {
  0% {
    opacity: 0.5;
    transform: translate(-50%, -50%) scale(0.9);
  }
  50% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.5);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.5);
  }
}
.micro-interaction {
  transition: all var(--duration-fast) var(--ease-out);
  cursor: pointer;
}
.micro-interaction:active {
  transform: scale(0.95);
}

.dna-helix-loader {
  width: 100px;
  height: 100px;
  position: relative;
  margin: 0 auto;
}
.dna-helix-loader .helix {
  width: 100%;
  height: 100%;
  position: relative;
  animation: rotate 2s linear infinite;
}
.dna-helix-loader .helix .strand {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.dna-helix-loader .helix .strand:nth-child(1) {
  border: 3px solid transparent;
  border-left-color: var(--brand-primary);
  border-right-color: var(--brand-primary);
  animation: strand1 1.5s ease-in-out infinite;
}
.dna-helix-loader .helix .strand:nth-child(2) {
  border: 3px solid transparent;
  border-top-color: var(--brand-secondary);
  border-bottom-color: var(--brand-secondary);
  animation: strand2 1.5s ease-in-out infinite;
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}
@keyframes strand1 {
  0%, 100% {
    transform: rotateX(0deg) rotateY(0deg);
  }
  50% {
    transform: rotateX(180deg) rotateY(0deg);
  }
}
@keyframes strand2 {
  0%, 100% {
    transform: rotateX(90deg) rotateY(0deg);
  }
  50% {
    transform: rotateX(90deg) rotateY(180deg);
  }
}
.grid-dna {
  display: grid;
  gap: var(--grid-gutter);
}
.grid-dna--2 {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.grid-dna--3 {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.grid-dna--4 {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
@media (min-width: 768px) {
  .grid-dna--md-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-dna--md-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid-dna--md-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

.btnn {
  border: 1px solid #fff;
  display: inline-block;
  padding: 10px 29px;
  text-transform: uppercase;
  color: #fff;
  border-radius: 25px;
  text-decoration: none;
  transition: all 0.3s ease;
}
.btnn:hover {
  background: #fff;
  color: #272727;
  text-decoration: none;
}
.btnn:focus {
  outline: 3px solid var(--focus-color, #0F75BD);
  outline-offset: 2px;
}
.btnn.btn-primary {
  background-color: #0F75BD;
  border-color: #0F75BD;
  color: #fff;
}
.btnn.btn-primary:hover {
  background-color: #0a5a8f;
  border-color: #0a5a8f;
  color: #fff;
}
.btnn.btn-danger {
  background-color: #dc3545;
  border-color: #dc3545;
  color: #fff;
}
.btnn.btn-danger:hover {
  background-color: #c82333;
  border-color: #bd2130;
  color: #fff;
}
.btnn.btn-info {
  background-color: #17a2b8;
  border-color: #17a2b8;
  color: #fff;
}
.btnn.btn-info:hover {
  background-color: #138496;
  border-color: #117a8b;
  color: #fff;
}
.btnn.btn-success {
  background-color: #28a745;
  border-color: #28a745;
  color: #fff;
}
.btnn.btn-success:hover {
  background-color: #218838;
  border-color: #1e7e34;
  color: #fff;
}
.btnn.btn-warning {
  background-color: #ffc107;
  border-color: #ffc107;
  color: #212529;
}
.btnn.btn-warning:hover {
  background-color: #e0a800;
  border-color: #d39e00;
  color: #212529;
}
.btnn.btn-secondary {
  background-color: #6c757d;
  border-color: #6c757d;
  color: #fff;
}
.btnn.btn-secondary:hover {
  background-color: #5a6268;
  border-color: #545b62;
  color: #fff;
}
.btnn.btn-lg {
  padding: 12px 36px;
  font-size: 1.125rem;
}
.btnn.btn-sm {
  padding: 8px 20px;
  font-size: 0.875rem;
}
.btnn.btn-block {
  display: block;
  width: 100%;
  margin-bottom: 0.5rem;
}
.btnn:disabled, .btnn.disabled {
  opacity: 0.65;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-join-now {
  background-color: #d33284;
  color: white;
  font-weight: bold;
  padding-left: 20px;
  padding-right: 20px;
  /* Allow long i18n labels to wrap */
  white-space: normal;
  overflow-wrap: anywhere;
  max-width: 100%;
  margin-top: 30px;
}
.btn-join-now:hover {
  background-color: #b8275e;
  color: white;
}

.banner3-content .btnn,
.banner4-content .btnn {
  margin-right: 30px;
}
.banner3-content .btnn:hover,
.banner4-content .btnn:hover {
  color: #fff;
}

.banner4-content .btnn {
  color: #fff;
  border-color: #2c2c2c;
  background: #2c2c2c;
}
.banner4-content .btnn:hover {
  background: rgba(44, 44, 44, 0.9);
}

.gallery-section .btnn {
  margin-top: 45px;
}

.callout-content .btnn:hover {
  color: #fff;
}

.our-story .btnn:hover {
  color: #fff;
}

.plan2 .btnn {
  font-weight: 400;
  margin-top: 30px;
}
.plan2 .btnn:hover {
  color: #fff;
}

#version5-callout .btnn {
  background: #fff;
  color: #6d6d6d;
}

.text-with-btn .btnn {
  background: #6d6d6d;
}
.text-with-btn .btnn:hover {
  color: white;
  box-shadow: 0 5px 15px rgba(145, 92, 182, 0.4);
}

.sorting-content .btnn {
  background: #6d6d6d;
  border-color: #6d6d6d;
}
.sorting-content .btnn:hover {
  color: #fff;
}

#CTA .btnn {
  margin-bottom: 15px;
  padding: 12px 30px;
  font-weight: 600;
  font-size: 16px;
}
#CTA .btnn.text-white {
  color: #fff !important;
}
#CTA .btnn {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
#CTA .btnn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

@media (max-width: 767px) {
  .banner3-content .btnn,
  .banner4-content .btnn {
    margin-bottom: 20px;
  }
  .gallery-section .btnn {
    margin-bottom: 30px;
  }
  #CTA .btnn {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}
@media (max-width: 575px) {
  .btnn {
    padding: 10px 20px;
    font-size: 14px;
  }
  .slider .btnn {
    padding: 10px 22px;
  }
}
@media (prefers-color-scheme: dark) {
  .btnn:hover {
    background: rgba(255, 255, 255, 0.9);
    color: #000;
  }
}
[data-bs-theme=dark] .btnn:hover {
  background: rgba(255, 255, 255, 0.9);
  color: #000;
}

@media (prefers-contrast: high) {
  .btnn {
    border-width: 2px;
    font-weight: 600;
  }
}
@media print {
  .btnn {
    border: 1px solid #000;
    color: #000;
  }
}
.modern-footer {
  background: linear-gradient(135deg, #1a252f 0%, #2c3e50 100%);
  border-top: 4px solid var(--brand-secondary, #F72C93);
}

.modern-footer .text-secondary,
.modern-footer .text-muted {
  color: #b0b8c4 !important;
}

.modern-footer .nav-link.text-secondary:hover {
  color: #ffffff !important;
}

.modern-footer .btn-outline-light:hover {
  background-color: var(--brand-secondary, #F72C93) !important;
  border-color: var(--brand-secondary, #F72C93) !important;
}

.site-footer {
  background-color: var(--md3-inverse-surface, #212529);
  color: var(--md3-inverse-on-surface, #dee2e6);
  border-top: 3px solid var(--md3-primary, #343a40);
}
.site-footer .text-muted,
.site-footer .text-secondary {
  color: #b0b8c4 !important;
}
.site-footer a:not(.btn):not(.social-link) {
  color: #d4d9e0 !important;
  text-decoration: none;
}
.site-footer a:not(.btn):not(.social-link):hover {
  color: #ffffff !important;
}

.footer-logo {
  filter: brightness(0) invert(1);
  max-height: 50px;
}

.footer-tagline {
  font-size: 0.875rem;
  color: var(--md3-inverse-on-surface, #dee2e6) !important;
}

.footer-heading {
  font-size: 1.25rem;
  font-weight: 600;
  color: #fff;
}

.footer-subheading {
  font-size: var(--md3-label-large-size, 0.875rem);
  line-height: var(--md3-label-large-line-height, 1.25rem);
  letter-spacing: var(--md3-label-large-tracking, 0.006rem);
  font-weight: var(--md3-label-large-weight, 500);
  color: #e0e4e8;
  text-transform: uppercase;
}

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background-color: rgba(255, 255, 255, 0.08);
  color: #d4d9e0 !important;
  border-radius: 50%;
  text-decoration: none;
  transition: background-color 0.28s cubic-bezier(0.2, 0, 0, 1), color 0.28s cubic-bezier(0.2, 0, 0, 1), transform 0.28s cubic-bezier(0.2, 0, 0, 1);
}

.social-link:hover {
  background-color: var(--brand-primary, var(--bs-primary));
  color: #fff !important;
  transform: translateY(-3px);
}

.footer-links {
  margin: 0;
  padding: 0;
}

.footer-link {
  color: #d4d9e0;
  text-decoration: none;
  font-size: var(--md3-body-medium-size, 0.875rem);
  line-height: var(--md3-body-medium-line-height, 1.25rem);
  letter-spacing: var(--md3-body-medium-tracking, 0.016rem);
  transition: color 0.28s cubic-bezier(0.2, 0, 0, 1);
  padding: 0.5rem 0;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
}

.footer-link:hover {
  color: #ffffff !important;
  text-decoration: none;
}

.footer-divider {
  opacity: 0.25;
  margin: 2rem 0;
}

.footer-legal-link {
  font-size: 0.875rem;
  transition: color 0.3s ease;
}

.footer-legal-link:hover {
  color: #fff !important;
  text-decoration: none;
}

@media (max-width: 767px) {
  .footer-bottom {
    text-align: center;
  }
  .footer-legal {
    justify-content: center;
  }
}
.site-footer {
  margin-top: auto;
}

footer.bg-dark {
  background-color: var(--md3-inverse-surface, #212529) !important;
  border-top: 3px solid var(--md3-primary, #343a40);
}
footer.bg-dark .text-white-50,
footer.bg-dark .text-muted,
footer.bg-dark .text-secondary,
footer.bg-dark .text-body-secondary,
footer.bg-dark small,
footer.bg-dark .small {
  color: #b0b8c4 !important;
}
footer.bg-dark a:not(.btn) {
  color: #d4d9e0 !important;
  text-decoration: none;
}
footer.bg-dark a:not(.btn):hover {
  color: #ffffff !important;
}
footer.bg-dark p {
  color: #b0b8c4;
}

.navbar-gradient {
  background: linear-gradient(135deg, var(--md3-primary), var(--md3-secondary, var(--md3-primary)));
}

/**
 * A/B Testing Styles
 * ==================
 * Styles for A/B test variants across the platform.
 *
 * Variant D = DNAR Legacy style (Bootstrap 3-era design)
 */
.text-shadow-heavy {
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.8), 0 2px 4px rgba(0, 0, 0, 0.5);
}

.text-shadow-light {
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}

.legacy-hero-content {
  padding: 2rem 0;
}

.legacy-h1 {
  font-size: 75px !important;
  line-height: 75px !important;
  font-weight: 700;
  letter-spacing: 2px;
  margin-bottom: 20px;
}
@media (max-width: 991.98px) {
  .legacy-h1 {
    font-size: 60px !important;
    line-height: 65px !important;
  }
}
@media (max-width: 767.98px) {
  .legacy-h1 {
    font-size: 46px !important;
    line-height: 50px !important;
    letter-spacing: 1px;
  }
}
@media (max-width: 575.98px) {
  .legacy-h1 {
    font-size: 36px !important;
    line-height: 42px !important;
  }
}

.legacy-h3 {
  font-size: 25px;
  font-weight: 500;
  color: #fff;
  margin-bottom: 40px;
}
@media (max-width: 767.98px) {
  .legacy-h3 {
    font-size: 20px;
    line-height: 30px;
  }
}

.hero-section.dna-variant-d,
.dna-variant-d .hero-section {
  padding-top: 180px !important;
  padding-bottom: 180px !important;
}
@media (max-width: 767.98px) {
  .hero-section.dna-variant-d,
  .dna-variant-d .hero-section {
    padding-top: 100px !important;
    padding-bottom: 100px !important;
  }
}

.legacy-btn-primary {
  background-color: #d33284 !important;
  border-color: #d33284 !important;
  color: #fff !important;
  min-width: 200px;
  font-weight: bold;
  text-transform: uppercase;
  border-radius: 25px;
  padding: 12px 30px;
}
.legacy-btn-primary:hover {
  background-color: #b92a72 !important;
  border-color: #b92a72 !important;
}

.legacy-btn-secondary {
  background-color: #0F75BD !important;
  border-color: #0F75BD !important;
  color: #fff !important;
  min-width: 150px;
  border-radius: 25px;
  padding: 12px 30px;
}
.legacy-btn-secondary:hover {
  background-color: #0c5a94 !important;
  border-color: #0c5a94 !important;
}

.ab-dna-a.d-none,
.ab-dna-b.d-none,
.ab-dna-c.d-none,
.ab-dna-d.d-none {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  pointer-events: none;
}

.ab-dna-a:not(.d-none),
.ab-dna-b:not(.d-none),
.ab-dna-c:not(.d-none),
.ab-dna-d:not(.d-none) {
  opacity: 1;
  visibility: visible;
  position: relative;
  pointer-events: auto;
}

[data-ab-preview=a] .ab-dna-a,
[data-ab-preview=b] .ab-dna-b,
[data-ab-preview=c] .ab-dna-c,
[data-ab-preview=d] .ab-dna-d {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: relative !important;
}

[data-ab-preview=a] .ab-dna-b,
[data-ab-preview=a] .ab-dna-c,
[data-ab-preview=a] .ab-dna-d,
[data-ab-preview=b] .ab-dna-a,
[data-ab-preview=b] .ab-dna-c,
[data-ab-preview=b] .ab-dna-d,
[data-ab-preview=c] .ab-dna-a,
[data-ab-preview=c] .ab-dna-b,
[data-ab-preview=c] .ab-dna-d,
[data-ab-preview=d] .ab-dna-a,
[data-ab-preview=d] .ab-dna-b,
[data-ab-preview=d] .ab-dna-c {
  display: none !important;
}

/* ============================================================
 * 3. PREMIUM & DNA-SPECIFIC COMPONENTS
 * Advanced components, DNA visualizations, genetic utilities
 * ============================================================ */
/* ============================================================
   PREMIUM VISUAL POLISH - DNA Romance Design System
   World-class typography, animations, and visual effects
   ============================================================ */
/* ==========================================================
   ADVANCED TYPOGRAPHY SYSTEM
   ========================================================== */
:root {
  --text-display: clamp(2.5rem, 8vw, 5.5rem);
  --text-hero: clamp(2rem, 6vw, 4rem);
  --text-h1: clamp(1.75rem, 4vw, 3rem);
  --text-h2: clamp(1.5rem, 3vw, 2.25rem);
  --text-h3: clamp(1.25rem, 2.5vw, 1.875rem);
  --text-h4: clamp(1.125rem, 2vw, 1.5rem);
  --text-h5: clamp(1rem, 1.5vw, 1.25rem);
  --text-h6: clamp(0.875rem, 1.2vw, 1.125rem);
  --text-lead: clamp(1.125rem, 2vw, 1.25rem);
  --text-body: 1rem;
  --text-body-sm: 0.875rem;
  --text-caption: 0.75rem;
  --text-overline: 0.625rem;
  --line-height-display: 0.95;
  --line-height-hero: 1.1;
  --line-height-heading: 1.25;
  --line-height-body: 1.6;
  --line-height-caption: 1.4;
  --letter-spacing-display: -0.025em;
  --letter-spacing-hero: -0.02em;
  --letter-spacing-heading: -0.01em;
  --letter-spacing-body: 0;
  --letter-spacing-caption: 0.025em;
  --letter-spacing-overline: 0.1em;
}

.text-display {
  font-family: var(--font-secondary);
  font-size: var(--text-display);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-display);
  letter-spacing: var(--letter-spacing-display);
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.text-hero {
  font-family: var(--font-secondary);
  font-size: var(--text-hero);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-hero);
  letter-spacing: var(--letter-spacing-hero);
  color: var(--color-text-primary);
  text-rendering: optimizeLegibility;
}
.text-hero--gradient {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-lead {
  font-size: var(--text-lead);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-body);
  color: var(--color-text-secondary);
  max-width: 65ch;
}

.text-overline {
  font-size: var(--text-overline);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-overline);
  text-transform: uppercase;
  color: var(--brand-primary);
  margin-bottom: var(--space-sm);
}

.text-shimmer {
  background: linear-gradient(90deg, var(--color-text-primary) 0%, var(--brand-primary) 50%, var(--color-text-primary) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer-text 3s ease-in-out infinite;
}

.text-shadow-soft {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.text-shadow-strong {
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

@keyframes shimmer-text {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}
/* ==========================================================
   ENHANCED COLOR SYSTEM
   ========================================================== */
:root {
  --brand-primary-50: #e6f3ff;
  --brand-primary-100: #b3d9ff;
  --brand-primary-200: #80bfff;
  --brand-primary-300: #4da6ff;
  --brand-primary-400: #1a8cff;
  --brand-primary-500: #0F75BD;
  --brand-primary-600: #0c5ea0;
  --brand-primary-700: #094783;
  --brand-primary-800: #063066;
  --brand-primary-900: #031949;
  --brand-secondary-50: #fef0f7;
  --brand-secondary-100: #fcc2e0;
  --brand-secondary-200: #fa94ca;
  --brand-secondary-300: #f866b3;
  --brand-secondary-400: #f6389c;
  --brand-secondary-500: #F72C93;
  --brand-secondary-600: #d41f7a;
  --brand-secondary-700: #b11661;
  --brand-secondary-800: #8e0d48;
  --brand-secondary-900: #6b042f;
  --gradient-dawn: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
  --gradient-sunset: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
  --gradient-ocean: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --gradient-forest: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
  --gradient-royal: linear-gradient(135deg, #667db6 0%, #0082c8 100%);
  --gradient-rose: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  --gradient-dna-helix: linear-gradient(
    45deg,
    var(--brand-primary) 0%,
    var(--brand-secondary) 25%,
    var(--color-accent) 50%,
    var(--brand-secondary) 75%,
    var(--brand-primary) 100%
  );
  --gradient-genetic: linear-gradient(
    135deg,
    #667eea 0%,
    #764ba2 25%,
    #f093fb 50%,
    #f5576c 75%,
    #4facfe 100%
  );
  --glass-bg-light: rgba(255, 255, 255, 0.08);
  --glass-bg-dark: rgba(0, 0, 0, 0.08);
  --glass-border: rgba(255, 255, 255, 0.2);
  --glass-backdrop: blur(20px);
}

/* ==========================================================
   ADVANCED SHADOW SYSTEM
   ========================================================== */
:root {
  --shadow-01: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-02: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-03: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-04: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-05: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-06: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-primary-soft: 0 4px 14px 0 rgba(var(--brand-primary-rgb), 0.15);
  --shadow-primary-medium: 0 8px 28px 0 rgba(var(--brand-primary-rgb), 0.25);
  --shadow-primary-strong: 0 16px 48px 0 rgba(var(--brand-primary-rgb), 0.35);
  --shadow-secondary-soft: 0 4px 14px 0 rgba(var(--brand-secondary-rgb), 0.15);
  --shadow-secondary-medium: 0 8px 28px 0 rgba(var(--brand-secondary-rgb), 0.25);
  --shadow-secondary-strong: 0 16px 48px 0 rgba(var(--brand-secondary-rgb), 0.35);
  --shadow-hover: 0 12px 24px -8px rgba(0, 0, 0, 0.15);
  --shadow-active: 0 2px 4px -1px rgba(0, 0, 0, 0.08);
  --shadow-focus: 0 0 0 4px rgba(var(--brand-primary-rgb), 0.12);
  --shadow-inner-soft: inset 0 1px 3px 0 rgba(0, 0, 0, 0.05);
  --shadow-inner-strong: inset 0 2px 8px 0 rgba(0, 0, 0, 0.1);
  --shadow-glass: 0 8px 32px 0 rgba(31, 38, 135, 0.12);
}

/* ==========================================================
   PREMIUM ANIMATION SYSTEM
   ========================================================== */
:root {
  --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-bounce-in: cubic-bezier(0.6, 0.04, 0.98, 0.335);
  --ease-bounce-out: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-back-in: cubic-bezier(0.6, -0.28, 0.735, 0.045);
  --ease-back-out: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-elastic-out: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --duration-instant: 0ms;
  --duration-micro: 75ms;
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-medium: 400ms;
  --duration-slow: 600ms;
  --duration-slower: 900ms;
  --duration-slowest: 1200ms;
  --transition-smooth: all var(--duration-normal) var(--ease-smooth);
  --transition-bounce: all var(--duration-medium) var(--ease-bounce-out);
  --transition-elastic: all var(--duration-slow) var(--ease-elastic-out);
  --transition-micro: all var(--duration-micro) var(--ease-out);
}

.animate-fade-in {
  animation: fadeIn var(--duration-medium) var(--ease-smooth) forwards;
}

.animate-slide-up {
  animation: slideUp var(--duration-medium) var(--ease-bounce-out) forwards;
}

.animate-scale-in {
  animation: scaleIn var(--duration-normal) var(--ease-elastic-out) forwards;
}

.animate-float {
  animation: float 3s var(--ease-smooth) infinite;
}

.animate-pulse {
  animation: pulse 2s var(--ease-smooth) infinite;
}

.animate-bounce {
  animation: bounce 2s var(--ease-bounce-out) infinite;
}

.animate-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  animation: slideUp var(--duration-medium) var(--ease-bounce-out) forwards;
}
.animate-stagger > *:nth-child(1) {
  animation-delay: 0ms;
}
.animate-stagger > *:nth-child(2) {
  animation-delay: 100ms;
}
.animate-stagger > *:nth-child(3) {
  animation-delay: 200ms;
}
.animate-stagger > *:nth-child(4) {
  animation-delay: 300ms;
}
.animate-stagger > *:nth-child(5) {
  animation-delay: 400ms;
}
.animate-stagger > *:nth-child(6) {
  animation-delay: 500ms;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}
@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    transform: translateY(0);
  }
  40%, 43% {
    transform: translateY(-10px);
  }
  70% {
    transform: translateY(-5px);
  }
  90% {
    transform: translateY(-2px);
  }
}
/* ==========================================================
   PREMIUM BUTTON SYSTEM
   ========================================================== */
.btn-premium {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-lg);
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  text-decoration: none;
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: var(--transition-smooth);
  overflow: hidden;
  min-height: 44px;
  min-width: 44px;
}
.btn-premium::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width var(--duration-slow), height var(--duration-slow);
  pointer-events: none;
}
.btn-premium:hover {
  transform: translateY(-2px);
}
.btn-premium:active {
  transform: translateY(0);
  transition-duration: var(--duration-micro);
}
.btn-premium:active::before {
  width: 300px;
  height: 300px;
}
.btn-premium--primary {
  background: var(--gradient-primary);
  color: var(--color-white);
  box-shadow: var(--shadow-primary-soft);
}
.btn-premium--primary:hover {
  box-shadow: var(--shadow-primary-medium);
}
.btn-premium--primary:focus-visible {
  box-shadow: var(--shadow-primary-medium), var(--shadow-focus);
}
.btn-premium--secondary {
  background: var(--gradient-secondary);
  color: var(--color-white);
  box-shadow: var(--shadow-secondary-soft);
}
.btn-premium--secondary:hover {
  box-shadow: var(--shadow-secondary-medium);
}
.btn-premium--glass {
  background: var(--glass-bg-light);
  backdrop-filter: var(--glass-backdrop);
  -webkit-backdrop-filter: var(--glass-backdrop);
  border: 1px solid var(--glass-border);
  color: var(--color-white);
  box-shadow: var(--shadow-glass);
}
.btn-premium--glass:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}
.btn-premium--gradient-border {
  background: var(--color-white);
  color: var(--brand-primary);
  border: 2px solid transparent;
  background-clip: padding-box;
}
.btn-premium--gradient-border::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: var(--gradient-primary);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: xor;
  -webkit-mask-composite: xor;
  pointer-events: none;
}
.btn-premium--gradient-border:hover {
  color: var(--color-white);
}
.btn-premium--gradient-border:hover::after {
  background: var(--gradient-primary);
}
.btn-premium--sm {
  padding: var(--space-xs) var(--space-md);
  font-size: var(--font-size-sm);
  min-height: 36px;
}
.btn-premium--lg {
  padding: var(--space-md) var(--space-xl);
  font-size: var(--font-size-lg);
  min-height: 56px;
}
.btn-premium--xl {
  padding: var(--space-lg) var(--space-2xl);
  font-size: var(--font-size-xl);
  min-height: 64px;
}
.btn-premium--loading {
  color: transparent;
  pointer-events: none;
}
.btn-premium--loading::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  top: 50%;
  left: 50%;
  margin-left: -10px;
  margin-top: -10px;
  border: 2px solid var(--color-white);
  border-radius: 50%;
  border-top-color: transparent;
  animation: spinner 0.8s linear infinite;
}
.btn-premium:disabled, .btn-premium--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}
.btn-premium:disabled::before, .btn-premium--disabled::before {
  display: none;
}

@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}
/* ==========================================================
   PREMIUM FORM SYSTEM
   ========================================================== */
.form-group-premium {
  position: relative;
  margin-bottom: var(--space-lg);
}
.form-group-premium .form-control {
  width: 100%;
  height: 56px;
  padding: 0 var(--space-md);
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  background: var(--color-white);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-lg);
  transition: var(--transition-smooth);
}
.form-group-premium .form-control::placeholder {
  color: var(--color-text-muted);
  opacity: 0.7;
}
.form-group-premium .form-control:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 4px rgba(var(--brand-primary-rgb), 0.1);
  background: var(--color-white);
}
.form-group-premium .form-control.is-invalid {
  border-color: var(--color-danger);
}
.form-group-premium .form-control.is-invalid:focus {
  box-shadow: 0 0 0 4px rgba(var(--color-danger-rgb), 0.1);
}
.form-group-premium .form-control.is-valid {
  border-color: var(--color-success);
}
.form-group-premium .form-control.is-valid:focus {
  box-shadow: 0 0 0 4px rgba(var(--color-success-rgb), 0.1);
}
.form-group-premium--floating .form-control {
  padding-top: 24px;
}
.form-group-premium--floating .form-control::placeholder {
  color: transparent;
}
.form-group-premium--floating .form-control:focus + label, .form-group-premium--floating .form-control:not(:placeholder-shown) + label {
  transform: translateY(-24px) scale(0.85);
  color: var(--brand-primary);
}
.form-group-premium--floating label {
  position: absolute;
  top: 50%;
  left: var(--space-md);
  transform: translateY(-50%);
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  transition: var(--transition-smooth);
  pointer-events: none;
  background: var(--color-white);
  padding: 0 var(--space-xs);
  transform-origin: left center;
}
.form-group-premium--glass .form-control {
  background: var(--glass-bg-light);
  backdrop-filter: var(--glass-backdrop);
  -webkit-backdrop-filter: var(--glass-backdrop);
  border-color: var(--glass-border);
  color: var(--color-white);
}
.form-group-premium--glass .form-control::placeholder {
  color: rgba(255, 255, 255, 0.7);
}
.form-group-premium--glass .form-control:focus {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.4);
}
.form-group-premium--glass.form-group-premium--floating label {
  background: transparent;
  color: rgba(255, 255, 255, 0.8);
}
.form-group-premium .form-help {
  margin-top: var(--space-xs);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}
.form-group-premium .form-help.is-invalid {
  color: var(--color-danger);
}
.form-group-premium .form-help.is-valid {
  color: var(--color-success);
}

/* ==========================================================
   PREMIUM CARD SYSTEM
   ========================================================== */
.card-premium {
  position: relative;
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  box-shadow: var(--shadow-03);
  transition: var(--transition-smooth);
  overflow: hidden;
}
.card-premium:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-05);
}
.card-premium--glass {
  background: var(--glass-bg-light);
  backdrop-filter: var(--glass-backdrop);
  -webkit-backdrop-filter: var(--glass-backdrop);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-glass);
}
.card-premium--glass:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
}
.card-premium--gradient-border {
  border: 2px solid transparent;
  background-clip: padding-box;
}
.card-premium--gradient-border::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: var(--gradient-primary);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: xor;
  -webkit-mask-composite: xor;
}
.card-premium--shimmer {
  overflow: hidden;
}
.card-premium--shimmer::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
  transform: rotate(45deg);
  animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%) rotate(45deg);
  }
  100% {
    transform: translateX(100%) rotate(45deg);
  }
}
/* ==========================================================
   PREMIUM LOADING STATES
   ========================================================== */
.skeleton-premium {
  background: linear-gradient(90deg, var(--color-gray-200) 25%, var(--color-gray-100) 50%, var(--color-gray-200) 75%);
  background-size: 400% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-md);
}
.skeleton-premium--text {
  height: 1rem;
  margin-bottom: var(--space-xs);
}
.skeleton-premium--text:last-child {
  width: 80%;
}
.skeleton-premium--title {
  height: 2rem;
  width: 60%;
  margin-bottom: var(--space-md);
}
.skeleton-premium--avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
.skeleton-premium--button {
  height: 44px;
  width: 120px;
  border-radius: var(--radius-lg);
}
.skeleton-premium--card {
  height: 300px;
  border-radius: var(--radius-xl);
}

@keyframes skeleton-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
.dna-loader {
  width: 100px;
  height: 100px;
  position: relative;
  margin: 0 auto;
}
.dna-loader .helix {
  width: 100%;
  height: 100%;
  position: relative;
}
.dna-loader .helix .strand {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 3px solid transparent;
  animation: rotate 2s linear infinite;
}
.dna-loader .helix .strand:nth-child(1) {
  border-left-color: var(--brand-primary);
  border-right-color: var(--brand-primary);
  animation-delay: 0s;
}
.dna-loader .helix .strand:nth-child(2) {
  border-top-color: var(--brand-secondary);
  border-bottom-color: var(--brand-secondary);
  animation-delay: -0.5s;
}
.dna-loader .helix .strand:nth-child(3) {
  border-left-color: var(--color-accent);
  border-right-color: var(--color-accent);
  animation-delay: -1s;
  opacity: 0.6;
  transform: scale(0.8);
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}
/* ==========================================================
   UTILITY CLASSES
   ========================================================== */
.glass-light {
  background: var(--glass-bg-light);
  backdrop-filter: var(--glass-backdrop);
  -webkit-backdrop-filter: var(--glass-backdrop);
  border: 1px solid var(--glass-border);
}

.glass-dark {
  background: var(--glass-bg-dark);
  backdrop-filter: var(--glass-backdrop);
  -webkit-backdrop-filter: var(--glass-backdrop);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.bg-gradient-dna {
  background: var(--gradient-dna-helix);
}

.bg-gradient-genetic {
  background: var(--gradient-genetic);
}

.bg-gradient-dawn {
  background: var(--gradient-dawn);
}

.bg-gradient-sunset {
  background: var(--gradient-sunset);
}

.bg-gradient-ocean {
  background: var(--gradient-ocean);
}

.bg-gradient-forest {
  background: var(--gradient-forest);
}

.bg-gradient-royal {
  background: var(--gradient-royal);
}

.bg-gradient-rose {
  background: var(--gradient-rose);
}

.shadow-brand {
  box-shadow: var(--shadow-primary-soft);
}

.shadow-brand-strong {
  box-shadow: var(--shadow-primary-strong);
}

.shadow-glass {
  box-shadow: var(--shadow-glass);
}

.transition-smooth {
  transition: var(--transition-smooth);
}

.transition-bounce {
  transition: var(--transition-bounce);
}

.transition-elastic {
  transition: var(--transition-elastic);
}

.transition-micro {
  transition: var(--transition-micro);
}

.hover-lift {
  transition: var(--transition-smooth);
}
.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

.hover-glow {
  transition: var(--transition-smooth);
}
.hover-glow:hover {
  box-shadow: 0 0 20px rgba(var(--brand-primary-rgb), 0.4);
}

.hover-scale {
  transition: var(--transition-smooth);
}
.hover-scale:hover {
  transform: scale(1.05);
}

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

.text-gradient-primary {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-gradient-secondary {
  background: var(--gradient-secondary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ==========================================================
   RESPONSIVE DESIGN
   ========================================================== */
@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;
  }
}
@media (max-width: 767px) {
  .text-display {
    font-size: clamp(2rem, 8vw, 3rem);
  }
  .text-hero {
    font-size: clamp(1.5rem, 6vw, 2.5rem);
  }
  .btn-premium {
    min-height: 48px;
  }
  .btn-premium--lg {
    min-height: 56px;
  }
  .form-group-premium .form-control {
    height: 52px;
  }
  .card-premium {
    padding: var(--space-lg);
  }
}
@media (prefers-contrast: high) {
  .btn-premium {
    border: 2px solid;
  }
  .form-group-premium .form-control {
    border-width: 2px;
  }
  .card-premium {
    border: 1px solid var(--color-gray-400);
  }
}
/* ============================================================
   PREMIUM UTILITIES - DNA Romance Design System
   Comprehensive utility classes for premium visual polish
   ============================================================ */
/* ==========================================================
   LAYOUT UTILITIES
   ========================================================== */
.d-flex {
  display: flex;
}

.d-inline-flex {
  display: inline-flex;
}

.flex-column {
  flex-direction: column;
}

.flex-row {
  flex-direction: row;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

.justify-content-start {
  justify-content: flex-start;
}

.justify-content-center {
  justify-content: center;
}

.justify-content-end {
  justify-content: flex-end;
}

.justify-content-between {
  justify-content: space-between;
}

.justify-content-around {
  justify-content: space-around;
}

.justify-content-evenly {
  justify-content: space-evenly;
}

.align-items-start {
  align-items: flex-start;
}

.align-items-center {
  align-items: center;
}

.align-items-end {
  align-items: flex-end;
}

.align-items-stretch {
  align-items: stretch;
}

.align-items-baseline {
  align-items: baseline;
}

.align-self-start {
  align-self: flex-start;
}

.align-self-center {
  align-self: center;
}

.align-self-end {
  align-self: flex-end;
}

.align-self-stretch {
  align-self: stretch;
}

.flex-grow-1 {
  flex-grow: 1;
}

.flex-shrink-1 {
  flex-shrink: 1;
}

.flex-fill {
  flex: 1 1 auto;
}

.d-grid {
  display: grid;
}

.d-inline-grid {
  display: inline-grid;
}

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

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

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

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

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

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

.gap-0 {
  gap: 0;
}

.gap-1 {
  gap: var(--space-xxs);
}

.gap-2 {
  gap: var(--space-xs);
}

.gap-3 {
  gap: var(--space-sm);
}

.gap-4 {
  gap: var(--space-md);
}

.gap-5 {
  gap: var(--space-lg);
}

.gap-6 {
  gap: var(--space-xl);
}

.gap-8 {
  gap: var(--space-2xl);
}

.position-static {
  position: static;
}

.position-relative {
  position: relative;
}

.position-absolute {
  position: absolute;
}

.position-fixed {
  position: fixed;
}

.position-sticky {
  position: sticky;
}

.top-0 {
  top: 0;
}

.right-0 {
  right: 0;
}

.bottom-0 {
  bottom: 0;
}

.left-0 {
  left: 0;
}

.inset-0 {
  inset: 0;
}

.z-0 {
  z-index: 0;
}

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

.z-20 {
  z-index: 20;
}

.z-30 {
  z-index: 30;
}

.z-40 {
  z-index: 40;
}

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

/* ==========================================================
   SPACING UTILITIES
   ========================================================== */
.m-0 {
  margin: 0;
}

.m-1 {
  margin: var(--space-xxs);
}

.m-2 {
  margin: var(--space-xs);
}

.m-3 {
  margin: var(--space-sm);
}

.m-4 {
  margin: var(--space-md);
}

.m-5 {
  margin: var(--space-lg);
}

.m-6 {
  margin: var(--space-xl);
}

.m-8 {
  margin: var(--space-2xl);
}

.m-auto {
  margin: auto;
}

.mt-0 {
  margin-top: 0;
}

.mt-1 {
  margin-top: var(--space-xxs);
}

.mt-2 {
  margin-top: var(--space-xs);
}

.mt-3 {
  margin-top: var(--space-sm);
}

.mt-4 {
  margin-top: var(--space-md);
}

.mt-5 {
  margin-top: var(--space-lg);
}

.mt-6 {
  margin-top: var(--space-xl);
}

.mt-8 {
  margin-top: var(--space-2xl);
}

.mb-0 {
  margin-bottom: 0;
}

.mb-1 {
  margin-bottom: var(--space-xxs);
}

.mb-2 {
  margin-bottom: var(--space-xs);
}

.mb-3 {
  margin-bottom: var(--space-sm);
}

.mb-4 {
  margin-bottom: var(--space-md);
}

.mb-5 {
  margin-bottom: var(--space-lg);
}

.mb-6 {
  margin-bottom: var(--space-xl);
}

.mb-8 {
  margin-bottom: var(--space-2xl);
}

.ms-0 {
  margin-left: 0;
}

.ms-1 {
  margin-left: var(--space-xxs);
}

.ms-2 {
  margin-left: var(--space-xs);
}

.ms-3 {
  margin-left: var(--space-sm);
}

.ms-4 {
  margin-left: var(--space-md);
}

.ms-5 {
  margin-left: var(--space-lg);
}

.ms-6 {
  margin-left: var(--space-xl);
}

.ms-8 {
  margin-left: var(--space-2xl);
}

.ms-auto {
  margin-left: auto;
}

.me-0 {
  margin-right: 0;
}

.me-1 {
  margin-right: var(--space-xxs);
}

.me-2 {
  margin-right: var(--space-xs);
}

.me-3 {
  margin-right: var(--space-sm);
}

.me-4 {
  margin-right: var(--space-md);
}

.me-5 {
  margin-right: var(--space-lg);
}

.me-6 {
  margin-right: var(--space-xl);
}

.me-8 {
  margin-right: var(--space-2xl);
}

.me-auto {
  margin-right: auto;
}

.p-0 {
  padding: 0;
}

.p-1 {
  padding: var(--space-xxs);
}

.p-2 {
  padding: var(--space-xs);
}

.p-3 {
  padding: var(--space-sm);
}

.p-4 {
  padding: var(--space-md);
}

.p-5 {
  padding: var(--space-lg);
}

.p-6 {
  padding: var(--space-xl);
}

.p-8 {
  padding: var(--space-2xl);
}

.pt-0 {
  padding-top: 0;
}

.pt-1 {
  padding-top: var(--space-xxs);
}

.pt-2 {
  padding-top: var(--space-xs);
}

.pt-3 {
  padding-top: var(--space-sm);
}

.pt-4 {
  padding-top: var(--space-md);
}

.pt-5 {
  padding-top: var(--space-lg);
}

.pt-6 {
  padding-top: var(--space-xl);
}

.pt-8 {
  padding-top: var(--space-2xl);
}

.pb-0 {
  padding-bottom: 0;
}

.pb-1 {
  padding-bottom: var(--space-xxs);
}

.pb-2 {
  padding-bottom: var(--space-xs);
}

.pb-3 {
  padding-bottom: var(--space-sm);
}

.pb-4 {
  padding-bottom: var(--space-md);
}

.pb-5 {
  padding-bottom: var(--space-lg);
}

.pb-6 {
  padding-bottom: var(--space-xl);
}

.pb-8 {
  padding-bottom: var(--space-2xl);
}

.ps-0 {
  padding-left: 0;
}

.ps-1 {
  padding-left: var(--space-xxs);
}

.ps-2 {
  padding-left: var(--space-xs);
}

.ps-3 {
  padding-left: var(--space-sm);
}

.ps-4 {
  padding-left: var(--space-md);
}

.ps-5 {
  padding-left: var(--space-lg);
}

.ps-6 {
  padding-left: var(--space-xl);
}

.ps-8 {
  padding-left: var(--space-2xl);
}

.pe-0 {
  padding-right: 0;
}

.pe-1 {
  padding-right: var(--space-xxs);
}

.pe-2 {
  padding-right: var(--space-xs);
}

.pe-3 {
  padding-right: var(--space-sm);
}

.pe-4 {
  padding-right: var(--space-md);
}

.pe-5 {
  padding-right: var(--space-lg);
}

.pe-6 {
  padding-right: var(--space-xl);
}

.pe-8 {
  padding-right: var(--space-2xl);
}

/* ==========================================================
   TYPOGRAPHY UTILITIES
   ========================================================== */
.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-light {
  font-weight: var(--font-weight-light);
}

.font-normal {
  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);
}

.font-black {
  font-weight: var(--font-weight-black);
}

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

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

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

.text-start {
  text-align: left;
}

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

.text-end {
  text-align: right;
}

.text-justify {
  text-align: justify;
}

.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.capitalize {
  text-transform: capitalize;
}

.normal-case {
  text-transform: none;
}

.underline {
  text-decoration: underline;
}

.no-underline {
  text-decoration: none;
}

.line-through {
  text-decoration: line-through;
}

.leading-none {
  line-height: 1;
}

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

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

.leading-normal {
  line-height: var(--line-height-normal);
}

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

.leading-loose {
  line-height: var(--line-height-loose);
}

.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);
}

.tracking-widest {
  letter-spacing: var(--letter-spacing-widest);
}

/* ==========================================================
   COLOR UTILITIES
   ========================================================== */
.text-primary {
  color: var(--brand-primary) !important;
}

.text-secondary {
  color: var(--brand-secondary) !important;
}

.text-accent {
  color: var(--color-accent) !important;
}

.text-success {
  color: var(--color-success) !important;
}

.text-warning {
  color: var(--color-warning) !important;
}

.text-danger {
  color: var(--color-danger) !important;
}

.text-info {
  color: var(--color-info) !important;
}

.text-white {
  color: var(--color-white) !important;
}

.text-black {
  color: var(--color-black) !important;
}

.text-muted {
  color: var(--color-text-muted) !important;
}

.bg-primary {
  background-color: var(--brand-primary) !important;
}

.bg-secondary {
  background-color: var(--brand-secondary) !important;
}

.bg-accent {
  background-color: var(--color-accent) !important;
}

.bg-success {
  background-color: var(--color-success) !important;
}

.bg-warning {
  background-color: var(--color-warning) !important;
}

.bg-danger {
  background-color: var(--color-danger) !important;
}

.bg-info {
  background-color: var(--color-info) !important;
}

.bg-white {
  background-color: var(--color-white) !important;
}

.bg-black {
  background-color: var(--color-black) !important;
}

.bg-transparent {
  background-color: transparent !important;
}

.bg-gray-50 {
  background-color: var(--color-gray-50) !important;
}

.bg-gray-100 {
  background-color: var(--color-gray-100) !important;
}

.bg-gray-200 {
  background-color: var(--color-gray-200) !important;
}

.bg-gray-300 {
  background-color: var(--color-gray-300) !important;
}

.bg-gray-400 {
  background-color: var(--color-gray-400) !important;
}

.bg-gray-500 {
  background-color: var(--color-gray-500) !important;
}

.bg-gray-600 {
  background-color: var(--color-gray-600) !important;
}

.bg-gray-700 {
  background-color: var(--color-gray-700) !important;
}

.bg-gray-800 {
  background-color: var(--color-gray-800) !important;
}

.bg-gray-900 {
  background-color: var(--color-gray-900) !important;
}

.bg-gradient-primary {
  background: var(--gradient-primary) !important;
}

.bg-gradient-secondary {
  background: var(--gradient-secondary) !important;
}

.bg-gradient-success {
  background: var(--gradient-success) !important;
}

.bg-gradient-premium {
  background: var(--gradient-premium) !important;
}

.bg-gradient-dark {
  background: var(--gradient-dark) !important;
}

/* ==========================================================
   BORDER UTILITIES
   ========================================================== */
.border-0 {
  border: 0 !important;
}

.border {
  border: var(--border-thin) solid var(--border-color) !important;
}

.border-2 {
  border: var(--border-medium) solid var(--border-color) !important;
}

.border-4 {
  border: var(--border-thick) solid var(--border-color) !important;
}

.border-t {
  border-top: var(--border-thin) solid var(--border-color) !important;
}

.border-r {
  border-right: var(--border-thin) solid var(--border-color) !important;
}

.border-b {
  border-bottom: var(--border-thin) solid var(--border-color) !important;
}

.border-l {
  border-left: var(--border-thin) solid var(--border-color) !important;
}

.border-primary {
  border-color: var(--brand-primary) !important;
}

.border-secondary {
  border-color: var(--brand-secondary) !important;
}

.border-success {
  border-color: var(--color-success) !important;
}

.border-warning {
  border-color: var(--color-warning) !important;
}

.border-danger {
  border-color: var(--color-danger) !important;
}

.border-white {
  border-color: var(--color-white) !important;
}

.border-transparent {
  border-color: transparent !important;
}

.rounded-none {
  border-radius: 0 !important;
}

.rounded-sm {
  border-radius: var(--radius-sm) !important;
}

.rounded {
  border-radius: var(--radius-md) !important;
}

.rounded-md {
  border-radius: var(--radius-md) !important;
}

.rounded-lg {
  border-radius: var(--radius-lg) !important;
}

.rounded-xl {
  border-radius: var(--radius-xl) !important;
}

.rounded-2xl {
  border-radius: var(--radius-2xl) !important;
}

.rounded-full {
  border-radius: var(--radius-full) !important;
}

/* ==========================================================
   SHADOW UTILITIES
   ========================================================== */
.shadow-none {
  box-shadow: none !important;
}

.shadow-sm {
  box-shadow: var(--shadow-sm) !important;
}

.shadow {
  box-shadow: var(--shadow-md) !important;
}

.shadow-md {
  box-shadow: var(--shadow-md) !important;
}

.shadow-lg {
  box-shadow: var(--shadow-lg) !important;
}

.shadow-xl {
  box-shadow: var(--shadow-xl) !important;
}

.shadow-2xl {
  box-shadow: var(--shadow-2xl) !important;
}

.shadow-primary {
  box-shadow: var(--shadow-primary) !important;
}

.shadow-secondary {
  box-shadow: var(--shadow-secondary) !important;
}

.shadow-inner {
  box-shadow: var(--shadow-inner) !important;
}

/* ==========================================================
   TRANSFORM UTILITIES
   ========================================================== */
.transform {
  transform: var(--transform, none);
}

.transform-none {
  transform: none !important;
}

.scale-0 {
  --transform: scale(0);
}

.scale-50 {
  --transform: scale(0.5);
}

.scale-75 {
  --transform: scale(0.75);
}

.scale-90 {
  --transform: scale(0.9);
}

.scale-95 {
  --transform: scale(0.95);
}

.scale-100 {
  --transform: scale(1);
}

.scale-105 {
  --transform: scale(1.05);
}

.scale-110 {
  --transform: scale(1.1);
}

.scale-125 {
  --transform: scale(1.25);
}

.scale-150 {
  --transform: scale(1.5);
}

.rotate-0 {
  --transform: rotate(0deg);
}

.rotate-1 {
  --transform: rotate(1deg);
}

.rotate-2 {
  --transform: rotate(2deg);
}

.rotate-3 {
  --transform: rotate(3deg);
}

.rotate-6 {
  --transform: rotate(6deg);
}

.rotate-12 {
  --transform: rotate(12deg);
}

.rotate-45 {
  --transform: rotate(45deg);
}

.rotate-90 {
  --transform: rotate(90deg);
}

.rotate-180 {
  --transform: rotate(180deg);
}

.translate-x-0 {
  --transform: translateX(0);
}

.translate-x-1 {
  --transform: translateX(var(--space-xxs));
}

.translate-x-2 {
  --transform: translateX(var(--space-xs));
}

.translate-x-4 {
  --transform: translateX(var(--space-md));
}

.translate-y-0 {
  --transform: translateY(0);
}

.translate-y-1 {
  --transform: translateY(var(--space-xxs));
}

.translate-y-2 {
  --transform: translateY(var(--space-xs));
}

.translate-y-4 {
  --transform: translateY(var(--space-md));
}

/* ==========================================================
   INTERACTION UTILITIES
   ========================================================== */
.cursor-auto {
  cursor: auto;
}

.cursor-default {
  cursor: default;
}

.cursor-pointer {
  cursor: pointer;
}

.cursor-wait {
  cursor: wait;
}

.cursor-text {
  cursor: text;
}

.cursor-move {
  cursor: move;
}

.cursor-help {
  cursor: help;
}

.cursor-not-allowed {
  cursor: not-allowed;
}

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

.select-text {
  user-select: text;
}

.select-all {
  user-select: all;
}

.select-auto {
  user-select: auto;
}

.pointer-events-none {
  pointer-events: none;
}

.pointer-events-auto {
  pointer-events: auto;
}

/* ==========================================================
   VISIBILITY UTILITIES
   ========================================================== */
.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}

.opacity-0 {
  opacity: 0;
}

.opacity-25 {
  opacity: 0.25;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-75 {
  opacity: 0.75;
}

.opacity-100 {
  opacity: 1;
}

.overflow-auto {
  overflow: auto;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-visible {
  overflow: visible;
}

.overflow-scroll {
  overflow: scroll;
}

.overflow-x-auto {
  overflow-x: auto;
}

.overflow-x-hidden {
  overflow-x: hidden;
}

.overflow-y-auto {
  overflow-y: auto;
}

.overflow-y-hidden {
  overflow-y: hidden;
}

/* ==========================================================
   DISPLAY UTILITIES
   ========================================================== */
.d-block {
  display: block;
}

.d-inline {
  display: inline;
}

.d-inline-block {
  display: inline-block;
}

.d-none {
  display: none;
}

/* ==========================================================
   ANIMATION UTILITIES
   ========================================================== */
.transition {
  transition: var(--transition-default);
}

.transition-none {
  transition: none;
}

.transition-fast {
  transition: var(--transition-fast);
}

.transition-slow {
  transition: var(--transition-slow);
}

.hover\:scale-105:hover {
  opacity: 0.95;
}

.hover\:scale-110:hover {
  opacity: 0.9;
}

.hover\:-translate-y-1:hover {
  box-shadow: var(--shadow-md);
}

.hover\:-translate-y-2:hover {
  box-shadow: var(--shadow-lg);
}

.hover\:shadow-lg:hover {
  box-shadow: var(--shadow-lg);
}

.hover\:shadow-xl:hover {
  box-shadow: var(--shadow-xl);
}

.focus\:outline-none:focus {
  outline: none;
}

.focus\:ring:focus {
  box-shadow: var(--shadow-focus);
}

.focus\:ring-primary:focus {
  box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.1);
}

/* ==========================================================
   RESPONSIVE UTILITIES
   ========================================================== */
@media (min-width: 576px) {
  .sm\:d-block {
    display: block;
  }
  .sm\:d-none {
    display: none;
  }
  .sm\:text-left {
    text-align: left;
  }
  .sm\:text-center {
    text-align: center;
  }
  .sm\:text-right {
    text-align: right;
  }
}
@media (min-width: 768px) {
  .md\:d-block {
    display: block;
  }
  .md\:d-none {
    display: none;
  }
  .md\:d-flex {
    display: flex;
  }
  .md\:flex-row {
    flex-direction: row;
  }
  .md\:flex-col {
    flex-direction: column;
  }
  .md\:text-left {
    text-align: left;
  }
  .md\:text-center {
    text-align: center;
  }
  .md\:text-right {
    text-align: right;
  }
  .md\:text-base {
    font-size: var(--font-size-base);
  }
  .md\:text-lg {
    font-size: var(--font-size-lg);
  }
  .md\:text-xl {
    font-size: var(--font-size-xl);
  }
  .md\:text-2xl {
    font-size: var(--font-size-2xl);
  }
}
@media (min-width: 992px) {
  .lg\:d-block {
    display: block;
  }
  .lg\:d-none {
    display: none;
  }
  .lg\:d-flex {
    display: flex;
  }
  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  .lg\:text-left {
    text-align: left;
  }
  .lg\:text-center {
    text-align: center;
  }
  .lg\:text-right {
    text-align: right;
  }
}
@media (min-width: 1200px) {
  .xl\:d-block {
    display: block;
  }
  .xl\:d-none {
    display: none;
  }
  .xl\:grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  .xl\:grid-cols-5 {
    grid-template-columns: repeat(5, 1fr);
  }
  .xl\:grid-cols-6 {
    grid-template-columns: repeat(6, 1fr);
  }
}
/* ==========================================================
   PREMIUM DNA-SPECIFIC UTILITIES
   ========================================================== */
.dna-pulse {
  animation: dna-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.dna-spin {
  animation: dna-spin 3s linear infinite;
}

.dna-float {
  animation: dna-float 6s ease-in-out infinite;
}

.dna-glow {
  animation: dna-glow 3s ease-in-out infinite;
}

@keyframes dna-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.05);
  }
}
@keyframes dna-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes dna-float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}
@keyframes dna-glow {
  0%, 100% {
    box-shadow: 0 0 5px rgba(var(--brand-primary-rgb), 0.5);
  }
  50% {
    box-shadow: 0 0 20px rgba(var(--brand-primary-rgb), 0.8);
  }
}
.compatibility-high {
  background: var(--gradient-success);
  color: var(--color-white);
  animation: compatibility-glow 2s ease-in-out infinite;
}

.compatibility-medium {
  background: var(--gradient-warning-vibrant);
  color: var(--color-white);
}

.compatibility-low {
  background: var(--color-gray-400);
  color: var(--color-white);
}

@keyframes compatibility-glow {
  0%, 100% {
    box-shadow: 0 0 10px rgba(var(--color-success-rgb), 0.5);
  }
  50% {
    box-shadow: 0 0 20px rgba(var(--color-success-rgb), 0.8);
  }
}
.love-chemistry {
  position: relative;
}
.love-chemistry::before {
  content: "💕";
  position: absolute;
  top: -10px;
  right: -10px;
  font-size: 1.2em;
  animation: love-beat 1.5s ease-in-out infinite;
  opacity: 0.8;
}

@keyframes love-beat {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
  }
}
.match-percentage {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-lg);
}
.match-percentage::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--brand-primary) 0%, var(--brand-primary) var(--percentage, 75%), var(--color-gray-200) var(--percentage, 75%), var(--color-gray-200) 100%);
  z-index: -1;
  animation: percentage-rotate 2s ease-in-out;
}

@keyframes percentage-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/* ==========================================================
   ACCESSIBILITY UTILITIES
   ========================================================== */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.not-sr-only {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

.focus-within\:ring:focus-within {
  box-shadow: var(--shadow-focus);
}

.focus-visible\:ring:focus-visible {
  box-shadow: var(--shadow-focus);
}

/* ==========================================================
   PRINT UTILITIES
   ========================================================== */
@media print {
  .print\:d-none {
    display: none !important;
  }
  .print\:d-block {
    display: block !important;
  }
  .print\:text-black {
    color: black !important;
  }
  .print\:bg-transparent {
    background: transparent !important;
  }
}
/* ==========================================================
   HIGH CONTRAST MODE SUPPORT
   ========================================================== */
@media (prefers-contrast: high) {
  .text-muted {
    color: var(--color-text-secondary) !important;
  }
  .bg-gray-100,
  .bg-gray-200 {
    border: 1px solid var(--color-gray-400);
  }
  .btn-premium,
  .card-premium {
    border: 1px solid var(--color-gray-600);
  }
}
/* ============================================================
 * 4. FEATURE-SPECIFIC MODULES
 * Swipe cards, matchmaking, who viewed me
 * ============================================================ */
/* Swipe Feature Styles */
/* Container */
.swipe-container {
  position: relative;
  min-height: 80vh;
  padding: 20px 0;
}

/* Cards Container */
.swipe-cards-container {
  position: relative;
  height: 600px;
  max-width: 400px;
  margin: 0 auto;
  perspective: 1000px;
}

/* Individual Swipe Card */
.swipe-card {
  position: absolute;
  width: 100%;
  height: 100%;
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  cursor: grab;
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.swipe-card:active {
  cursor: grabbing;
}

/* Card Stack Effect */
.swipe-card:nth-child(1) {
  z-index: 4;
}

.swipe-card:nth-child(2) {
  z-index: 3;
  transform: scale(0.95) translateY(10px);
  opacity: 0.9;
}

.swipe-card:nth-child(3) {
  z-index: 2;
  transform: scale(0.9) translateY(20px);
  opacity: 0.8;
}

.swipe-card:nth-child(n+4) {
  display: none;
}

/* Card Image */
.swipe-card-image {
  width: 100%;
  height: 60%;
  border-radius: 16px 16px 0 0;
  overflow: hidden;
  position: relative;
}

.swipe-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Card Info */
.swipe-card-info {
  padding: 20px;
  height: 40%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.swipe-card-info h3 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: #333;
}

.swipe-card-info .location {
  color: #595959;
  font-size: 0.9rem;
  margin-top: 5px;
}

.swipe-card-info .bio {
  margin-top: 10px;
  color: #495057;
  font-size: 0.95rem;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* Swipe Indicators */
.swipe-indicator {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: bold;
  font-size: 1.5rem;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.swipe-indicator.like {
  right: 20px;
  background: #28a745;
  color: white;
  transform: translateY(-50%) rotate(15deg);
}

.swipe-indicator.nope {
  left: 20px;
  background: #dc3545;
  color: white;
  transform: translateY(-50%) rotate(-15deg);
}

.swipe-indicator.superlike {
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: #17a2b8;
  color: white;
}

/* Show indicators on swipe */
.swipe-card.swiping-right .swipe-indicator.like {
  opacity: 1;
}

.swipe-card.swiping-left .swipe-indicator.nope {
  opacity: 1;
}

.swipe-card.swiping-up .swipe-indicator.superlike {
  opacity: 1;
}

/* Action Buttons */
.swipe-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
}

.swipe-action-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.swipe-action-btn:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.swipe-action-btn:active {
  opacity: 0.8;
}

.swipe-action-btn.dislike {
  border-color: #dc3545;
  color: #dc3545;
}

.swipe-action-btn.dislike:hover {
  background: #dc3545;
  color: white;
}

.swipe-action-btn.superlike {
  border-color: #17a2b8;
  color: #17a2b8;
}

.swipe-action-btn.superlike:hover {
  background: #17a2b8;
  color: white;
}

.swipe-action-btn.like {
  border-color: #28a745;
  color: #28a745;
}

.swipe-action-btn.like:hover {
  background: #28a745;
  color: white;
}

.swipe-action-btn i {
  font-size: 1.5rem;
}

/* Swipe Animations */
@keyframes swipeRight {
  to {
    transform: translateX(150%);
    opacity: 0;
  }
}
@keyframes swipeLeft {
  to {
    transform: translateX(-150%);
    opacity: 0;
  }
}
@keyframes swipeUp {
  to {
    transform: translateY(-150%);
    opacity: 0;
  }
}
.swipe-card.swiped-right {
  animation: swipeRight 0.5s ease-out forwards;
}

.swipe-card.swiped-left {
  animation: swipeLeft 0.5s ease-out forwards;
}

.swipe-card.swiped-up {
  animation: swipeUp 0.5s ease-out forwards;
}

/* Empty State */
.swipe-empty-state {
  text-align: center;
  padding: 60px 20px;
}

.swipe-empty-state i {
  font-size: 4rem;
  color: #dee2e6;
  margin-bottom: 20px;
}

.swipe-empty-state h3 {
  color: #595959;
  margin-bottom: 10px;
}

.swipe-empty-state p {
  color: #adb5bd;
}

/* Match Modal */
.match-modal {
  text-align: center;
}

.match-modal .modal-body {
  padding: 40px;
}

.match-modal .match-avatars {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 30px;
}

.match-modal .match-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid white;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.match-modal .match-avatar:nth-child(2) {
  margin-left: -30px;
}

.match-modal h2 {
  color: #28a745;
  margin-bottom: 10px;
}

/* Mobile Responsiveness */
@media (max-width: 576px) {
  .swipe-cards-container {
    height: 500px;
    max-width: 90%;
  }
  .swipe-action-btn {
    width: 50px;
    height: 50px;
  }
  .swipe-action-btn i {
    font-size: 1.25rem;
  }
  .swipe-card-info h3 {
    font-size: 1.25rem;
  }
}
/* Touch Feedback */
.swipe-card.touching {
  transition: none;
}

/* Loading State */
.swipe-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
}

.swipe-loading .spinner-border {
  width: 3rem;
  height: 3rem;
}

.matchmaking-background {
  background: url("../images/background/matchmaking_background.26c60df5e89a.jpg") repeat top fixed;
}

.top-button {
  font-weight: 700 !important;
  margin: 10px 20px !important;
  padding: 10px 25px !important;
}

.top-button-font-color {
  color: #fff;
}

.top-button-border {
  border: 2px solid #fff !important;
}

ul li {
  display: inline;
}

div p {
  color: #5C5D61;
}

.filter-checkbox-group {
  max-height: 150px;
  overflow-y: auto;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  padding: 0.5rem;
}
.filter-checkbox-group.small {
  max-height: 100px;
  font-size: 0.875rem;
}
.filter-checkbox-group input[type=checkbox] {
  margin-right: 0.5rem;
}
.filter-checkbox-group label {
  display: block;
  margin-bottom: 0.25rem;
}

#enhancedFilterModal .modal-body {
  max-height: 70vh;
  overflow-y: auto;
}
#enhancedFilterModal .accordion-button {
  padding: 0.75rem;
  font-size: 0.95rem;
}
#enhancedFilterModal h6 {
  border-bottom: 2px solid var(--brand-primary, var(--bs-primary));
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}

.modal-trigger:hover {
  border: 5px solid #555;
  transition: transform 0.2s;
  transform: scale(1.1);
}

/* ============================================================
 * 5. PAGE-SPECIFIC STYLES
 * Science/How It Works, Pricing, About, Blog, etc.
 * ============================================================ */
/* ============================================================
 * MAIN.SCSS - Single Entry Point for All Platform CSS
 * Created: November 8, 2025
 * Purpose: Consolidated SCSS compilation for 10-platform system
 * Output: apps/static/css/app.css + app.min.css
 * ============================================================ */
/* ============================================================
 * 1. CORE FOUNDATION (Load First)
 * Design tokens, reset, typography, framework basics
 * ============================================================ */
.science-hero {
  background: linear-gradient(135deg, var(--color-brand-primary) 0%, var(--color-brand-tertiary) 100%);
  padding: var(--space-32) 0;
  position: relative;
  overflow: hidden;
}
.science-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}
.science-hero__content {
  position: relative;
  z-index: 1;
  text-align: center;
  color: var(--text-inverse);
}
.science-hero__title {
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-6);
  line-height: var(--line-height-tight);
}
.science-hero__subtitle {
  font-size: var(--font-size-h4);
  opacity: 0.95;
  max-width: 800px;
  margin: 0 auto var(--space-8);
  line-height: var(--line-height-relaxed);
}
.science-hero__badges {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
}
.science-hero__badge {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-2xl);
  font-size: var(--font-size-body-sm);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.science-hero__badge i {
  font-size: var(--font-size-body);
}
@media (max-width: 767px) {
  .science-hero {
    padding: var(--space-16) 0;
  }
  .science-hero__title {
    font-size: var(--font-size-h1);
  }
  .science-hero__subtitle {
    font-size: var(--font-size-body);
  }
}

.trust-bar {
  background: var(--bg-surface);
  padding: var(--space-6) 0;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
.trust-bar__container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-8);
}
.trust-bar__item {
  text-align: center;
  flex: 1;
  min-width: 150px;
}
.trust-bar__number {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-primary);
  display: block;
}
.trust-bar__label {
  font-size: var(--font-size-body-sm);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: var(--space-1);
}
.trust-bar__icon {
  font-size: var(--font-size-h1);
  color: var(--color-brand-primary);
  margin-bottom: var(--space-2);
}
@media (max-width: 575px) {
  .trust-bar__container {
    flex-direction: column;
    gap: var(--space-6);
  }
  .trust-bar__item {
    width: 100%;
  }
}

.science-content {
  padding: var(--space-20) 0;
}
.science-content__section {
  margin-bottom: var(--space-16);
}
.science-content__section:last-child {
  margin-bottom: 0;
}
.science-content__header {
  text-align: center;
  margin-bottom: var(--space-12);
}
.science-content__title {
  font-size: var(--font-size-h2);
  color: var(--text-primary);
  margin-bottom: var(--space-4);
  position: relative;
  display: inline-block;
}
.science-content__title::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: var(--color-brand-primary);
  border-radius: var(--radius-full);
}
.science-content__description {
  font-size: var(--font-size-body-lg);
  color: var(--text-secondary);
  max-width: 700px;
  margin: var(--space-6) auto 0;
  line-height: var(--line-height-relaxed);
}

.science-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-md);
  transition: transform var(--duration-normal) var(--easing-default), box-shadow var(--duration-normal) var(--easing-default);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.science-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.science-card__icon {
  width: 80px;
  height: 80px;
  background: var(--color-brand-primary);
  background: linear-gradient(135deg, var(--color-brand-primary), var(--color-brand-tertiary));
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-6);
  font-size: var(--font-size-h1);
  color: var(--text-inverse);
}
.science-card__title {
  font-size: var(--font-size-h4);
  color: var(--text-primary);
  margin-bottom: var(--space-3);
  font-weight: var(--font-weight-semibold);
}
.science-card__content {
  color: var(--text-secondary);
  line-height: var(--line-height-relaxed);
  flex-grow: 1;
}
.science-card__stat {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
  font-size: var(--font-size-body-sm);
  color: var(--color-success);
  font-weight: var(--font-weight-medium);
}
.science-card__stat i {
  margin-right: var(--space-2);
}
@media (prefers-reduced-motion: reduce) {
  .science-card {
    transition: none;
  }
  .science-card:hover {
    transform: none;
  }
}

.process-timeline {
  position: relative;
  padding: var(--space-12) 0;
}
.process-timeline__line {
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: calc(100% - 80px);
  background: var(--border-default);
  z-index: 0;
}
@media (max-width: 991px) {
  .process-timeline__line {
    left: 40px;
  }
}
.process-timeline__item {
  position: relative;
  display: flex;
  align-items: flex-start;
  margin-bottom: var(--space-12);
  z-index: 1;
}
.process-timeline__item:nth-child(even) {
  flex-direction: row-reverse;
}
@media (max-width: 991px) {
  .process-timeline__item:nth-child(even) {
    flex-direction: row;
  }
}
.process-timeline__item:last-child {
  margin-bottom: 0;
}
.process-timeline__number {
  width: 80px;
  height: 80px;
  background: var(--bg-card);
  border: 3px solid var(--color-brand-primary);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-primary);
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}
.process-timeline__content {
  flex: 1;
  max-width: 400px;
  padding: 0 var(--space-8);
}
@media (max-width: 991px) {
  .process-timeline__content {
    padding-left: var(--space-8);
    padding-right: 0;
  }
}
.process-timeline__title {
  font-size: var(--font-size-h4);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
  font-weight: var(--font-weight-semibold);
}
.process-timeline__description {
  color: var(--text-secondary);
  line-height: var(--line-height-relaxed);
}
.process-timeline__duration {
  display: inline-block;
  margin-top: var(--space-2);
  padding: var(--space-1) var(--space-3);
  background: var(--bg-surface);
  border-radius: var(--radius-full);
  font-size: var(--font-size-body-sm);
  color: var(--text-tertiary);
}

.research-citations {
  background: var(--bg-surface);
  padding: var(--space-16) 0;
  border-radius: var(--radius-lg);
}
.research-citations__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.research-citations__item {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  margin-bottom: var(--space-4);
  border-left: 4px solid var(--color-brand-primary);
}
.research-citations__title {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}
.research-citations__authors {
  font-size: var(--font-size-body-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-1);
}
.research-citations__journal {
  font-size: var(--font-size-body-sm);
  color: var(--text-tertiary);
  font-style: italic;
}
.research-citations__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-2);
  color: var(--link-default);
  font-size: var(--font-size-body-sm);
  text-decoration: none;
}
.research-citations__link:hover {
  color: var(--link-hover);
  text-decoration: underline;
}
.research-citations__link i {
  font-size: var(--font-size-label);
}

.science-faq__item {
  border-bottom: 1px solid var(--border-subtle);
  padding: var(--space-6) 0;
}
.science-faq__item:last-child {
  border-bottom: none;
}
.science-faq__question {
  font-size: var(--font-size-body-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-3);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.science-faq__question i {
  color: var(--color-brand-primary);
  flex-shrink: 0;
  margin-top: 2px;
}
.science-faq__answer {
  color: var(--text-secondary);
  line-height: var(--line-height-relaxed);
  padding-left: calc(var(--space-3) + 1.25em);
}

.science-cta {
  background: linear-gradient(135deg, var(--color-brand-primary) 0%, var(--color-brand-tertiary) 100%);
  padding: var(--space-20) 0;
  text-align: center;
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
}
.science-cta::before, .science-cta::after {
  content: "";
  position: absolute;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.1);
}
.science-cta::before {
  width: 300px;
  height: 300px;
  top: -150px;
  right: -150px;
}
.science-cta::after {
  width: 200px;
  height: 200px;
  bottom: -100px;
  left: -100px;
}
.science-cta__content {
  position: relative;
  z-index: 1;
}
.science-cta__title {
  font-size: var(--font-size-h2);
  color: var(--text-inverse);
  margin-bottom: var(--space-4);
}
.science-cta__description {
  font-size: var(--font-size-body-lg);
  color: var(--text-inverse);
  opacity: 0.95;
  max-width: 600px;
  margin: 0 auto var(--space-8);
}
.science-cta__button {
  display: inline-block;
  padding: var(--space-4) var(--space-8);
  background: var(--color-white);
  color: var(--color-brand-primary);
  font-size: var(--font-size-body-lg);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  border-radius: var(--radius-full);
  transition: transform var(--duration-normal) var(--easing-default), box-shadow var(--duration-normal) var(--easing-default);
  box-shadow: var(--shadow-lg);
}
.science-cta__button:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-xl);
  color: var(--color-brand-primary);
  text-decoration: none;
}
.science-cta__button:focus-visible {
  outline: 3px solid var(--color-white);
  outline-offset: 2px;
}
.science-cta__trust {
  margin-top: var(--space-6);
  font-size: var(--font-size-body-sm);
  color: var(--text-inverse);
  opacity: 0.9;
}
.science-cta__trust i {
  margin-right: var(--space-2);
}

@media (prefers-color-scheme: dark) {
  .science-hero__badge {
    background: rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.2);
  }
  .science-card:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  }
  .research-citations__item {
    border-left-color: var(--color-brand-secondary);
  }
}
[data-bs-theme=dark] .science-hero__badge {
  background: rgba(0, 0, 0, 0.4);
  border-color: rgba(255, 255, 255, 0.2);
}
[data-bs-theme=dark] .science-card:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
[data-bs-theme=dark] .research-citations__item {
  border-left-color: var(--color-brand-secondary);
}

@media (prefers-contrast: high) {
  .science-hero__badge {
    border-width: 2px;
  }
  .process-timeline__number {
    border-width: 4px;
  }
  .science-cta__button {
    border: 2px solid var(--color-brand-primary);
  }
}
@media (prefers-reduced-motion: reduce) {
  .science-card,
  .science-cta__button {
    transition: none;
  }
}
@media print {
  .science-hero {
    background: none;
    color: var(--text-primary);
  }
  .trust-bar,
  .science-cta {
    display: none;
  }
  .science-card {
    box-shadow: none;
    border: 1px solid var(--border-default);
  }
}
/* ============================================================
 * MAIN.SCSS - Single Entry Point for All Platform CSS
 * Created: November 8, 2025
 * Purpose: Consolidated SCSS compilation for 10-platform system
 * Output: apps/static/css/app.css + app.min.css
 * ============================================================ */
/* ============================================================
 * 1. CORE FOUNDATION (Load First)
 * Design tokens, reset, typography, framework basics
 * ============================================================ */
/* ============================================================
 * BLOG PAGE STYLES
 * Following new SCSS architecture and UX/UI standards
 * Created: November 9, 2025
 * ============================================================ */
/* ============================================================
 * 1. BLOG LAYOUT & CONTAINER
 * ============================================================ */
.blog-section {
  padding: 80px 0;
  background: #ffffff;
  min-height: 100vh;
}

.blog-container {
  padding-left: 10% !important;
  padding-right: 10% !important;
  max-width: 100% !important;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .blog-container {
    padding-left: 5% !important;
    padding-right: 5% !important;
  }
}

.post-content {
  max-width: 800px;
  margin: 0 auto;
  font-size: 1.125rem;
  line-height: 1.75;
  color: var(--text-primary, #212529);
}
.post-content p {
  margin-bottom: 1.5rem;
  font-size: 16px;
}
.post-content h2, .post-content h3, .post-content h4, .post-content h5, .post-content h6 {
  margin-top: 2rem;
  margin-bottom: 1rem;
  color: var(--text-heading, #212529);
}
.post-content img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 2rem 0;
}

/* ============================================================
 * 2. DNA ROMANCE BRAND COLORS FOR BLOG POSTS
 * Migrated from brand_Blog.css (Dec 7, 2025)
 * ============================================================ */
.post {
  margin: auto;
  padding-left: 10px;
  padding-right: 10px;
}
.post p {
  text-align: left;
  margin: auto;
}
.post h1, .post h2 {
  color: var(--brand-primary, #0F75BD);
  text-align: center;
}
.post h3, .post h4 {
  color: var(--brand-secondary, #F72C93);
  text-align: left;
}

/* ============================================================
 * 3. BLOG HEADER & META
 * ============================================================ */
.post-header {
  text-align: center;
  margin-bottom: 3rem;
  padding-bottom: 2rem;
  border-bottom: 2px solid #e9ecef;
}

.post-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--text-heading, #212529);
  margin-bottom: 1rem;
  line-height: 1.2;
}
@media (max-width: 768px) {
  .post-title {
    font-size: 1.875rem;
  }
}

.post-meta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  color: var(--text-muted, #595959);
  font-size: 14px;
}
.post-meta .meta-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.post-meta .meta-item i {
  color: var(--brand-primary, #007bff);
}

/* ============================================================
 * 4. BLOG NAVIGATION
 * ============================================================ */
.blog-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 3rem 0;
  padding: 2rem 0;
  border-top: 2px solid #e9ecef;
  flex-wrap: wrap;
  gap: 1rem;
}
.blog-navigation .btn,
.blog-navigation .btnn {
  border: 1px solid var(--brand-primary, #007bff);
  display: inline-block;
  padding: 10px 29px;
  text-transform: uppercase;
  color: #fff;
  background: var(--brand-primary, #007bff);
  border-radius: 4px !important;
  text-decoration: none;
  transition: all 0.3s ease;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.blog-navigation .btn:hover,
.blog-navigation .btnn:hover {
  background: var(--brand-primary-dark, #0056b3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  filter: brightness(1.1);
}
.blog-navigation .btn i,
.blog-navigation .btnn i {
  margin-right: 0.5rem;
}
.blog-navigation .btn.btn-secondary,
.blog-navigation .btnn.btn-secondary {
  background: transparent;
  color: var(--brand-primary, #007bff);
  border: 1px solid var(--brand-primary, #007bff);
}
.blog-navigation .btn.btn-secondary:hover,
.blog-navigation .btnn.btn-secondary:hover {
  background: var(--brand-primary, #007bff);
  color: #fff;
}

.post-navigation {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin: 3rem 0;
}
@media (max-width: 768px) {
  .post-navigation {
    grid-template-columns: 1fr;
  }
}
.post-navigation .nav-previous,
.post-navigation .nav-next {
  padding: 1.5rem;
  background: #f8f9fa;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.3s ease;
}
.post-navigation .nav-previous:hover,
.post-navigation .nav-next:hover {
  background: #e9ecef;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.post-navigation .nav-previous .nav-label,
.post-navigation .nav-next .nav-label {
  font-size: 14px;
  color: #595959;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.post-navigation .nav-previous .nav-title,
.post-navigation .nav-next .nav-title {
  font-size: 16px;
  color: var(--text-primary, #212529);
  font-weight: 600;
}
.post-navigation .nav-next {
  text-align: right;
}

/* ============================================================
 * 5. BLOG TAGS & CATEGORIES
 * ============================================================ */
.blog-meta-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 2rem 0;
  align-items: center;
}
.blog-meta-tags i {
  color: var(--brand-primary, #007bff);
  margin-right: 0.5rem;
}

.blog-tag,
.blog-category {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  background: #e9ecef;
  color: #495057;
  border-radius: 4px;
  font-size: 14px;
  text-decoration: none;
  transition: all 0.2s ease;
}
.blog-tag:hover,
.blog-category:hover {
  background: var(--brand-primary, #007bff);
  color: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* ============================================================
 * 6. BLOG CARDS (List View)
 * ============================================================ */
.blog-cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 2rem;
  margin: 3rem 0;
}
@media (max-width: 768px) {
  .blog-cards-container {
    grid-template-columns: 1fr;
  }
}

.blog-card {
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
  text-decoration: none;
  display: flex;
  flex-direction: column;
}
.blog-card:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  filter: brightness(1.02);
}
.blog-card .blog-card-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.blog-card .blog-card-content {
  padding: 1.5rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.blog-card .blog-card-content .blog-card-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-heading, #212529);
  margin-bottom: 0.75rem;
  line-height: 1.3;
}
.blog-card .blog-card-content .blog-card-excerpt {
  font-size: 14px;
  color: var(--text-muted, #595959);
  line-height: 1.6;
  margin-bottom: 1rem;
  flex-grow: 1;
}
.blog-card .blog-card-content .blog-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: #595959;
}
.blog-card .blog-card-content .blog-card-meta .read-more {
  color: var(--brand-primary, #007bff);
  text-decoration: none;
  font-weight: 500;
}
.blog-card .blog-card-content .blog-card-meta .read-more:hover {
  text-decoration: underline;
}

/* ============================================================
 * 7. BLOG CTA SECTION
 * ============================================================ */
.blog-cta {
  background: #f8f9fa;
  padding: 3rem;
  border-radius: 8px;
  text-align: center;
  margin: 3rem 0;
}
.blog-cta h3 {
  font-size: 24px;
  color: var(--text-heading, #212529);
  margin-bottom: 1rem;
}
.blog-cta p {
  font-size: 16px;
  color: var(--text-muted, #595959);
  margin-bottom: 2rem;
}
.blog-cta .btn-cta {
  display: inline-block;
  padding: 12px 32px;
  background: var(--brand-primary, #007bff);
  color: #fff;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  transition: all 0.3s ease;
}
.blog-cta .btn-cta:hover {
  background: var(--brand-primary-dark, #0056b3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  filter: brightness(1.1);
}

/* ============================================================
 * 8. BLOG SIDEBAR (if needed)
 * ============================================================ */
.blog-sidebar {
  padding: 2rem;
  background: #f8f9fa;
  border-radius: 8px;
}
.blog-sidebar .sidebar-section {
  margin-bottom: 2rem;
}
.blog-sidebar .sidebar-section h3 {
  font-size: 18px;
  color: var(--text-heading, #212529);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--brand-primary, #007bff);
}
.blog-sidebar .sidebar-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.blog-sidebar .sidebar-section ul li {
  padding: 0.5rem 0;
  border-bottom: 1px solid #dee2e6;
}
.blog-sidebar .sidebar-section ul li:last-child {
  border-bottom: none;
}
.blog-sidebar .sidebar-section ul li a {
  color: var(--text-primary, #212529);
  text-decoration: none;
  font-size: 14px;
}
.blog-sidebar .sidebar-section ul li a:hover {
  color: var(--brand-primary, #007bff);
}

/* ============================================================
 * 9. BLOG SEARCH & FILTERS
 * ============================================================ */
.blog-search {
  margin-bottom: 2rem;
}
.blog-search .search-form {
  display: flex;
  gap: 1rem;
}
.blog-search .search-form .form-control {
  flex: 1;
  padding: 0.75rem 1rem;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-size: 16px;
}
.blog-search .search-form .form-control:focus {
  border-color: var(--brand-primary, #007bff);
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
.blog-search .search-form .btn-search {
  padding: 0.75rem 2rem;
  background: var(--brand-primary, #007bff);
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.blog-search .search-form .btn-search:hover {
  background: var(--brand-primary-dark, #0056b3);
}

/* ============================================================
 * 10. REMOVE GRADIENT VIOLATIONS
 * No gradients per UX rules
 * ============================================================ */
.blog-section,
.blog-header,
.blog-footer,
.blog-cta {
  background-image: none !important;
}
.blog-section::before, .blog-section::after,
.blog-header::before,
.blog-header::after,
.blog-footer::before,
.blog-footer::after,
.blog-cta::before,
.blog-cta::after {
  background-image: none !important;
  background: transparent !important;
}

/* ============================================================
 * 11. MOBILE RESPONSIVENESS
 * ============================================================ */
@media (max-width: 768px) {
  .blog-section {
    padding: 60px 0;
  }
  .post-content {
    font-size: 16px;
  }
  .post-content h2 {
    font-size: 1.5rem;
  }
  .post-content h3 {
    font-size: 1.25rem;
  }
  .blog-navigation {
    flex-direction: column;
    gap: 1rem;
  }
  .blog-navigation .btn,
  .blog-navigation .btnn {
    width: 100%;
    text-align: center;
  }
}
/* ============================================================
 * 12. BLOG POST NAVIGATION (Enhanced prev/next/home)
 * Migrated from: includes/blog_navigation.html
 * ============================================================ */
.nav-button {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  border: 2px solid transparent;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
  min-height: 56px;
}
.nav-button::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.6s;
}
.nav-button:hover::before {
  left: 100%;
}
.nav-button:focus {
  outline: 3px solid rgba(var(--brand-primary-rgb, 15, 117, 189), 0.5);
  outline-offset: 3px;
}
.nav-button.previous {
  background: linear-gradient(135deg, var(--brand-primary, #0F75BD) 0%, #1E88E5 50%, #2196F3 100%);
  color: white;
  border-color: rgba(255, 255, 255, 0.2);
}
.nav-button.previous:hover {
  background: linear-gradient(135deg, #1565C0 0%, #1976D2 50%, #1E88E5 100%);
  transform: translateX(-4px) scale(1.02);
  box-shadow: 0 8px 25px rgba(var(--brand-primary-rgb, 15, 117, 189), 0.3);
  color: white;
}
.nav-button.previous .arrow-left {
  transition: transform 0.3s ease;
}
.nav-button.previous:hover .arrow-left {
  transform: translateX(-3px);
}
.nav-button.home {
  background: rgba(255, 255, 255, 0.9);
  color: #2c3e50;
  border-color: rgba(var(--brand-primary-rgb, 15, 117, 189), 0.2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.nav-button.home:hover {
  background: rgba(var(--brand-primary-rgb, 15, 117, 189), 0.1);
  color: var(--brand-primary, #0F75BD);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.nav-button.home .home-icon {
  transition: transform 0.3s ease;
}
.nav-button.home:hover .home-icon {
  transform: scale(1.1);
}
.nav-button.next {
  background: linear-gradient(135deg, var(--brand-secondary, #F72C93) 0%, #E91E63 50%, #FF4081 100%);
  color: white;
  border-color: rgba(255, 255, 255, 0.2);
}
.nav-button.next:hover {
  background: linear-gradient(135deg, #C2185B 0%, #D81B60 50%, var(--brand-secondary, #F72C93) 100%);
  transform: translateX(4px) scale(1.02);
  box-shadow: 0 8px 25px rgba(var(--brand-secondary-rgb, 247, 44, 147), 0.3);
  color: white;
}
.nav-button.next .arrow-right {
  transition: transform 0.3s ease;
}
.nav-button.next:hover .arrow-right {
  transform: translateX(3px);
}

.navigation-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
}

.blog-navigation .nav-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.blog-navigation .nav-item {
  flex: 0 0 auto;
}

.arrow-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.arrow-icon svg {
  transition: all 0.3s ease;
}

@media (max-width: 768px) {
  .blog-navigation .nav-links {
    flex-direction: column;
    gap: 1rem;
  }
  .nav-button {
    padding: 0.875rem 1.25rem;
    font-size: 0.95rem;
    min-height: 52px;
    width: 100%;
    max-width: 280px;
    justify-content: center;
  }
  .nav-button.previous:hover, .nav-button.next:hover {
    transform: scale(1.02);
  }
}
@media (max-width: 480px) {
  .navigation-container {
    padding: 0 15px;
  }
  .nav-button {
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    min-height: 48px;
    border-radius: 10px;
  }
  .nav-text {
    font-size: 0.9rem;
  }
}
@media (prefers-color-scheme: dark) {
  .blog-navigation {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
  }
  .nav-button.home {
    background: rgba(44, 62, 80, 0.9);
    color: #ecf0f1;
    border-color: rgba(255, 255, 255, 0.2);
  }
  .nav-button.home:hover {
    background: rgba(var(--brand-primary-rgb, 15, 117, 189), 0.2);
    color: #ffffff;
  }
}
@media print {
  .blog-navigation {
    display: none;
  }
}
/* ============================================================
 * END OF BLOG STYLES
 * ============================================================ */
/* ============================================================
 * MAIN.SCSS - Single Entry Point for All Platform CSS
 * Created: November 8, 2025
 * Purpose: Consolidated SCSS compilation for 10-platform system
 * Output: apps/static/css/app.css + app.min.css
 * ============================================================ */
/* ============================================================
 * 1. CORE FOUNDATION (Load First)
 * Design tokens, reset, typography, framework basics
 * ============================================================ */
/* ============================================================
 * STEVE JOBS ENHANCED BLOG STYLES
 * Blog page with Steve Jobs design principles
 * Created: November 9, 2025
 * ============================================================ */
/* ============================================================
 * 1. MULTI-TENANT VARIABLES
 * ============================================================ */
body {
  --brand-primary: var(--primary-color);
  --brand-secondary: var(--secondary-color);
  --brand-primary-dark: var(--primary-dark);
  --brand-secondary-dark: var(--secondary-dark);
}

/* ============================================================
 * 2. HERO SECTION ENHANCEMENT
 * Uses brand gradient from _brand.scss
 * ============================================================ */
/* ============================================================
 * 3. BLOG CARDS WITH STEVE JOBS REFINEMENT
 * ============================================================ */
.blog-post-card {
  transition: all 0.3s ease;
  border: 1px solid var(--border-subtle, #e9ecef);
  background: #ffffff;
  border-radius: 8px;
}
.blog-post-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  border-color: var(--primary-color, #0F75BD);
}

/* ============================================================
 * 4. ENHANCED BADGE STYLING
 * ============================================================ */
.blog-date-badge {
  background: var(--primary-dark, #0966a8) !important;
  color: var(--text-on-primary, #ffffff) !important;
  font-weight: 500;
  letter-spacing: 0.5px;
  padding: 6px 16px;
  font-size: 14px;
  border-radius: 4px;
}

/* ============================================================
 * 5. IMPROVED BUTTON STYLING
 * ============================================================ */
.btn-blog-continue {
  background: transparent;
  border: 2px solid var(--primary-color, #0F75BD);
  color: var(--primary-color, #0F75BD);
  padding: 12px 28px;
  font-weight: 600;
  transition: all 0.3s ease;
  border-radius: 4px;
  font-size: 14px;
}
.btn-blog-continue:hover {
  background: var(--primary-color, #0F75BD);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(15, 117, 189, 0.3);
}

/* ============================================================
 * 6. CATEGORY FILTER BUTTONS
 * ============================================================ */
.category-filter {
  border-width: 2px;
  font-weight: 500;
  transition: all 0.3s ease;
  border-radius: 4px;
  font-size: 14px;
}
.category-filter.active {
  background: var(--primary-dark, #0966a8);
  border-color: var(--primary-dark, #0966a8);
  color: #ffffff;
}

/* ============================================================
 * 6b. FEATURED CARD & CATEGORY BUTTONS
 * Migrated from legacy blog.css
 * ============================================================ */
.featured-card {
  background: linear-gradient(135deg, rgba(15, 117, 189, 0.02) 0%, rgba(247, 44, 147, 0.02) 100%);
}

.category-btn {
  transition: all 0.2s ease;
}
.category-btn.active {
  background-color: var(--bs-primary, var(--primary-color)) !important;
  color: white !important;
  border-color: var(--bs-primary, var(--primary-color)) !important;
}

/* ============================================================
 * 7. TAG PILLS
 * Following UX rules: standardized border-radius
 * ============================================================ */
.tag-filter {
  background: rgba(15, 117, 189, 0.1);
  color: var(--primary-color, #0F75BD);
  padding: 6px 14px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s ease;
  display: inline-block;
  margin: 4px;
}
.tag-filter:hover {
  background: var(--primary-color, #0F75BD);
  color: #ffffff;
  transform: translateY(-1px);
}

/* ============================================================
 * 8. MOBILE OPTIMIZATIONS
 * ============================================================ */
@media (max-width: 768px) {
  .steve-jobs-section {
    padding: 40px 0;
  }
  .blog-post-card {
    margin-bottom: 1.5rem;
  }
  .hero-section {
    padding: 30px 0;
  }
  .btn-blog-continue {
    padding: 10px 24px;
    font-size: 14px;
  }
}
/* ============================================================
 * END OF STEVE JOBS BLOG STYLES
 * ============================================================ */
/* ============================================================
 * MAIN.SCSS - Single Entry Point for All Platform CSS
 * Created: November 8, 2025
 * Purpose: Consolidated SCSS compilation for 10-platform system
 * Output: apps/static/css/app.css + app.min.css
 * ============================================================ */
/* ============================================================
 * 1. CORE FOUNDATION (Load First)
 * Design tokens, reset, typography, framework basics
 * ============================================================ */
/* ============================================================
 * BREAKUPS BLOG POST STYLES
 * Specific styles for the Breakups blog article
 * Created: November 9, 2025
 * ============================================================ */
/* ============================================================
 * 1. CARD & PANEL STYLES
 * ============================================================ */
.blog-section .card-title {
  font-size: 1rem;
}

.card-title {
  text-align: center;
}
.card-title a {
  display: block;
  text-decoration: none;
  color: var(--brand-primary, #0F75BD);
  font-size: 16px;
  transition: color 0.2s ease;
}
.card-title a:hover {
  color: var(--brand-primary-dark, #0966a8);
}

.card-header {
  padding: 10px 15px;
}

.card-body ul {
  padding-left: 20px;
}
.card-body ul li {
  margin-bottom: 0.75rem;
  line-height: 1.6;
}

/* ============================================================
 * 2. BUTTON STYLES
 * ============================================================ */
.btn-sm {
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 4px;
  transition: all 0.3s ease;
}
.btn-sm:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* ============================================================
 * 3. PRACTICAL ADVICE SECTION
 * ============================================================ */
.practical-advice h3 {
  margin-top: 2rem;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-heading, #212529);
}
.practical-advice ul {
  margin-bottom: 2rem;
  padding-left: 1.5rem;
}

/* ============================================================
 * 4. CUSTOM MARGIN UTILITIES
 * ============================================================ */
.mt-custom-4 {
  margin-top: 20px;
}

.mt-custom-5 {
  margin-top: 30px;
}

.my-custom-4 {
  margin-top: 20px;
  margin-bottom: 20px;
}

.my-custom-5 {
  margin-top: 30px;
  margin-bottom: 30px;
}

/* ============================================================
 * 5. HEALING QUOTES SECTION
 * ============================================================ */
.healing-quotes {
  margin-top: 30px;
  margin-bottom: 30px;
}
.healing-quotes blockquote {
  border-left: 4px solid var(--brand-primary, #0F75BD);
  font-style: italic;
  color: var(--md3-on-surface-variant, #444);
  padding: 15px 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  margin-bottom: 20px;
  transition: all 0.3s ease;
}
.healing-quotes blockquote:hover {
  background-color: #f1f3f5;
  border-left-color: var(--brand-secondary, #F72C93);
}
.healing-quotes blockquote p {
  margin-bottom: 0.5rem;
  font-size: 16px;
  line-height: 1.6;
}
.healing-quotes .blockquote-footer {
  font-size: 14px;
  color: #595959;
  margin-top: 0.5rem;
  font-style: normal;
}
.healing-quotes .blockquote-footer::before {
  content: "— ";
}

/* ============================================================
 * 6. PAGE LAYOUT
 * ============================================================ */
.page-heading {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--text-heading, #212529);
  margin-bottom: 1.5rem;
  text-align: center;
}
@media (max-width: 768px) {
  .page-heading {
    padding-top: 20px;
    font-size: 1.875rem;
  }
}

/* ============================================================
 * 7. MOBILE RESPONSIVE ADJUSTMENTS
 * ============================================================ */
@media (max-width: 768px) {
  .blog-section h2 {
    margin-top: 20px;
    font-size: 1.5rem;
  }
  .blog-section h3 {
    font-size: 1.25rem;
  }
  .my-custom-4,
  .my-custom-5,
  .mt-custom-5,
  .mt-custom-4 {
    margin-top: 15px;
    margin-bottom: 15px;
  }
  .healing-quotes {
    margin-top: 30px;
    margin-bottom: 30px;
  }
  .healing-quotes blockquote {
    border-left: none;
    border-top: 4px solid var(--brand-primary, #0F75BD);
    padding: 10px 20px;
  }
  .card {
    margin-bottom: 1rem;
  }
}
/* ============================================================
 * 8. TEXT UTILITIES
 * ============================================================ */
.text-center {
  text-align: center;
}

.lead {
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--text-muted, #595959);
}
@media (max-width: 768px) {
  .lead {
    font-size: 1.125rem;
  }
}

/* ============================================================
 * END OF BREAKUPS STYLES
 * ============================================================ */
/* ============================================================
 * MAIN.SCSS - Single Entry Point for All Platform CSS
 * Created: November 8, 2025
 * Purpose: Consolidated SCSS compilation for 10-platform system
 * Output: apps/static/css/app.css + app.min.css
 * ============================================================ */
/* ============================================================
 * 1. CORE FOUNDATION (Load First)
 * Design tokens, reset, typography, framework basics
 * ============================================================ */
/* ============================================================
 * CHIVALRY IS DEAD BLOG POST STYLES
 * Specific styles for the Chivalry blog article
 * Created: November 9, 2025
 * ============================================================ */
/* ============================================================
 * 1. BUTTON STYLES
 * Following UX rules: no gradients, standardized border-radius
 * ============================================================ */
.btn, .btnn {
  display: inline-block;
  padding: 10px 25px;
  margin: 5px;
  text-decoration: none;
  border-radius: 4px;
  transition: all 0.3s ease;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  font-size: 14px;
}

.btn-primary, .btnn.btn-primary {
  background: var(--brand-primary, #0F75BD);
  color: white;
  border: none;
}
.btn-primary:hover, .btnn.btn-primary:hover {
  background: var(--brand-primary-dark, #0966a8);
  box-shadow: 0 5px 15px rgba(15, 117, 189, 0.35);
  filter: brightness(1.1);
}

.btn-info, .btnn.btn-info {
  background: #17a2b8;
  color: white;
  border: none;
}
.btn-info:hover, .btnn.btn-info:hover {
  background: #138496;
  box-shadow: 0 5px 15px rgba(17, 162, 184, 0.35);
  filter: brightness(1.1);
}

.btn-danger, .btnn.btn-danger {
  background: var(--brand-secondary, #F72C93);
  color: white;
  border: none;
}
.btn-danger:hover, .btnn.btn-danger:hover {
  background: var(--brand-secondary-dark, #E91E63);
  box-shadow: 0 5px 15px rgba(247, 44, 147, 0.35);
  filter: brightness(1.1);
}

/* ============================================================
 * 2. PAGINATION STYLES
 * ============================================================ */
.pagination {
  display: flex;
  justify-content: center;
  gap: 15px;
  list-style: none;
  padding: 0;
  margin: 30px 0;
}
.pagination .button {
  background: #f8f9fa;
  color: #333;
  padding: 12px 24px;
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.3s ease;
  border: 1px solid #dee2e6;
}
.pagination .button:hover:not(.disabled) {
  background: #e9ecef;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.pagination .button.disabled {
  opacity: 0.8;
  cursor: not-allowed;
}

/* ============================================================
 * 3. BLOG CONTENT STYLES
 * ============================================================ */
.blog-container {
  max-width: 800px;
  margin: 0 auto;
}

.post-title {
  color: var(--brand-primary, #0F75BD);
  font-size: 2.5rem;
  margin-bottom: 30px;
  font-weight: 700;
}
@media (max-width: 768px) {
  .post-title {
    font-size: 1.875rem;
  }
}

.post-content {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #333;
}
.post-content h2 {
  color: var(--brand-secondary, #F72C93);
  margin: 30px 0 20px;
  font-size: 2rem;
}
@media (max-width: 768px) {
  .post-content h2 {
    font-size: 1.5rem;
  }
}
.post-content h3 {
  color: var(--brand-primary, #0F75BD);
  margin: 25px 0 15px;
  font-size: 1.5rem;
}
@media (max-width: 768px) {
  .post-content h3 {
    font-size: 1.25rem;
  }
}

.post-image {
  margin: 30px 0;
}
.post-image img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

/* ============================================================
 * 4. CUSTOM LIST STYLES
 * ============================================================ */
.custom-list ul {
  padding-left: 0;
}
.custom-list ul li {
  margin-bottom: 15px;
  padding-left: 30px;
  position: relative;
}
.custom-list ul li:before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--brand-secondary, #F72C93);
  font-weight: bold;
  font-size: 1.2rem;
}

/* ============================================================
 * END OF CHIVALRY IS DEAD STYLES
 * ============================================================ */
/* ============================================================
 * MAIN.SCSS - Single Entry Point for All Platform CSS
 * Created: November 8, 2025
 * Purpose: Consolidated SCSS compilation for 10-platform system
 * Output: apps/static/css/app.css + app.min.css
 * ============================================================ */
/* ============================================================
 * 1. CORE FOUNDATION (Load First)
 * Design tokens, reset, typography, framework basics
 * ============================================================ */
/* ============================================================
 * CUFFING SEASON BLOG POST STYLES
 * Specific styles for the Cuffing Season blog article
 * Created: November 9, 2025
 * ============================================================ */
/* ============================================================
 * 1. IMAGE SIZING
 * ============================================================ */
img.max-width-75-percent {
  max-width: 75%;
  display: block;
  margin: 0 auto;
  border-radius: 8px;
}

/* ============================================================
 * 2. CUSTOM LIST STYLES
 * ============================================================ */
.custom-list ul {
  padding-left: 0;
  list-style-type: none;
}
.custom-list ul li {
  font-size: 16px;
  position: relative;
  padding-left: 30px;
  margin-bottom: 10px;
}
.custom-list ul li:before {
  content: "•";
  font-size: 20px;
  position: absolute;
  left: 0;
  top: 0;
  color: var(--brand-primary, #0F75BD);
}

/* ============================================================
 * END OF CUFFING SEASON STYLES
 * ============================================================ */
/* ============================================================
 * MAIN.SCSS - Single Entry Point for All Platform CSS
 * Created: November 8, 2025
 * Purpose: Consolidated SCSS compilation for 10-platform system
 * Output: apps/static/css/app.css + app.min.css
 * ============================================================ */
/* ============================================================
 * 1. CORE FOUNDATION (Load First)
 * Design tokens, reset, typography, framework basics
 * ============================================================ */
/* ============================================================
 * DNA TOOLS BLOG POST STYLES
 * Specific styles for the DNA tools blog article
 * Created: November 9, 2025
 * ============================================================ */
/* ============================================================
 * 1. WRAPPER & LAYOUT
 * ============================================================ */
#wrapper {
  max-width: 800px;
  margin: 0 auto;
}

/* ============================================================
 * 2. POST TITLE & HEADINGS
 * ============================================================ */
.post .title h1 {
  color: var(--brand-primary, #0F75BD);
  font-size: 2.5rem;
  margin-bottom: 30px;
  font-weight: 700;
  text-align: center;
}
@media (max-width: 768px) {
  .post .title h1 {
    font-size: 1.875rem;
  }
}
.post p {
  font-size: 16px;
  line-height: 1.8;
  color: #333;
  margin-bottom: 20px;
}
.post h2 {
  color: var(--brand-secondary, #F72C93);
  margin: 30px 0 20px;
  font-size: 2rem;
  text-align: left;
}
@media (max-width: 768px) {
  .post h2 {
    font-size: 1.5rem;
  }
}
.post h3 {
  color: var(--brand-primary, #0F75BD);
  margin: 25px 0 15px;
  font-size: 1.5rem;
  text-align: left;
}
@media (max-width: 768px) {
  .post h3 {
    font-size: 1.25rem;
  }
}

/* ============================================================
 * 3. BUTTON STYLING
 * No gradients per UX rules
 * ============================================================ */
.btn, .btnn {
  display: inline-block;
  padding: 12px 30px;
  margin: 10px 5px;
  text-decoration: none;
  border-radius: 4px;
  transition: all 0.3s ease;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  border: none;
  font-size: 14px;
}

.btn-primary, .btnn.btn-primary {
  background: var(--brand-primary, #0F75BD);
  color: white;
}
.btn-primary:hover, .btnn.btn-primary:hover {
  background: var(--brand-primary-dark, #0966a8);
  box-shadow: 0 5px 15px rgba(15, 117, 189, 0.35);
  filter: brightness(1.1);
  color: white;
  text-decoration: none;
}

.btn-danger, .btnn.btn-danger {
  background: var(--brand-secondary, #F72C93);
  color: white;
}
.btn-danger:hover, .btnn.btn-danger:hover {
  background: var(--brand-secondary-dark, #E91E63);
  box-shadow: 0 5px 15px rgba(247, 44, 147, 0.35);
  filter: brightness(1.1);
  color: white;
  text-decoration: none;
}

/* ============================================================
 * 4. PAGINATION
 * ============================================================ */
.actions.pagination {
  display: flex;
  justify-content: center;
  gap: 15px;
  list-style: none;
  padding: 0;
  margin: 40px 0;
}
.actions.pagination .button {
  background: #f8f9fa;
  color: #333;
  padding: 12px 24px;
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.3s ease;
  border: 1px solid #dee2e6;
}
.actions.pagination .button:hover:not(.disabled) {
  background: #e9ecef;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.actions.pagination .button.disabled {
  opacity: 0.8;
  cursor: not-allowed;
}

/* ============================================================
 * 5. IMAGE STYLING
 * ============================================================ */
.image.featured {
  margin: 30px 0;
  text-align: center;
}
.image.featured img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

/* ============================================================
 * 6. LIST STYLING
 * FIX: Scoped to .post content only - NOT global ul/li
 * This prevents carets appearing in navbar and other UI components
 * ============================================================ */
.post ul,
.post-content ul,
.blog-content ul,
article ul {
  padding-left: 20px;
}
.post ul li,
.post-content ul li,
.blog-content ul li,
article ul li {
  margin-bottom: 10px;
  list-style-type: none;
  position: relative;
  padding-left: 20px;
}
.post ul li:before,
.post-content ul li:before,
.blog-content ul li:before,
article ul li:before {
  content: "▶";
  position: absolute;
  left: 0;
  color: var(--brand-secondary, #F72C93);
}

/* Ensure navbar and other UI lists don't get carets */
.navbar ul li:before,
.navbar-nav li:before,
.nav li:before,
.dropdown-menu li:before,
.social-login-buttons li:before,
footer ul li:before {
  content: none !important;
}

/* ============================================================
 * 7. TEXT ALIGNMENT FIXES
 * ============================================================ */
.text-center h1, .text-center h2, .text-center h3 {
  text-align: center !important;
}

.post-content {
  text-align: left !important;
}

/* ============================================================
 * END OF DNA TOOLS STYLES
 * ============================================================ */
/**
 * Personality Test Styling
 *
 * Fast, gamified 12-question MBTI personality assessment
 * Bootstrap 5 compatible styling
 *
 * Migrated from: /DATEM (adapted for Bootstrap 5)
 */
.personality-test-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem 1rem;
}
.personality-test-container .progress-section {
  margin-bottom: 2rem;
}
.personality-test-container .progress-section .progress-text {
  text-align: center;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--bs-secondary);
  margin-bottom: 0.5rem;
}
.personality-test-container .progress-section .progress {
  height: 1rem;
  border-radius: 0.5rem;
  background-color: var(--bs-gray-200);
}
.personality-test-container .progress-section .progress .progress-bar {
  background: linear-gradient(90deg, var(--bs-primary) 0%, var(--bs-info) 100%);
  transition: width 0.4s ease-in-out;
  border-radius: 0.5rem;
}
.personality-test-container .question-container {
  background: var(--bs-body-bg);
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1);
  margin-bottom: 2rem;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.personality-test-container .question-container .question-text {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--bs-body-color);
  text-align: center;
  margin-bottom: 2rem;
  line-height: 1.5;
}
@media (max-width: 768px) {
  .personality-test-container .question-container .question-text {
    font-size: 1.25rem;
  }
}
.personality-test-container .choices-container {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}
.personality-test-container .choices-container .choice-container {
  background: var(--bs-light);
  border: 2px solid var(--bs-gray-300);
  border-radius: 0.75rem;
  padding: 1.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.personality-test-container .choices-container .choice-container:hover {
  border-color: var(--bs-primary);
  background: var(--bs-primary-bg-subtle);
  transform: translateY(-2px);
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
}
.personality-test-container .choices-container .choice-container:active {
  transform: translateY(0);
}
.personality-test-container .choices-container .choice-container .choice-text {
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--bs-body-color);
  text-align: center;
  margin: 0;
  cursor: pointer;
  user-select: none;
}
@media (max-width: 768px) {
  .personality-test-container .choices-container .choice-container .choice-text {
    font-size: 1rem;
  }
}
.personality-test-container .choices-container .choice-container.correct {
  border-color: var(--bs-success);
  background: var(--bs-success-bg-subtle);
  animation: pulse 0.6s ease-in-out;
}
.personality-test-container .choices-container .choice-container.correct .choice-text {
  color: var(--bs-success-text-emphasis);
}
.personality-test-container .choices-container .choice-container.correct::after {
  content: "✓";
  position: absolute;
  top: 50%;
  right: 1.5rem;
  transform: translateY(-50%);
  font-size: 2rem;
  color: var(--bs-success);
  animation: checkmark 0.4s ease-in-out;
}
.personality-test-container .loading-container {
  text-align: center;
  padding: 3rem 1rem;
}
.personality-test-container .loading-container .spinner-border {
  width: 3rem;
  height: 3rem;
  color: var(--bs-primary);
}
.personality-test-container .loading-container .loading-text {
  margin-top: 1rem;
  font-size: 1.125rem;
  color: var(--bs-secondary);
}
.personality-test-container .error-container {
  background: var(--bs-danger-bg-subtle);
  border: 1px solid var(--bs-danger-border-subtle);
  border-radius: 0.75rem;
  padding: 2rem;
  text-align: center;
}
.personality-test-container .error-container .error-icon {
  font-size: 3rem;
  color: var(--bs-danger);
  margin-bottom: 1rem;
}
.personality-test-container .error-container .error-text {
  font-size: 1.125rem;
  color: var(--bs-danger-text-emphasis);
  margin-bottom: 1rem;
}
.personality-test-container .error-container .retry-button {
  margin-top: 1rem;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
}
@keyframes checkmark {
  0% {
    opacity: 0;
    transform: translateY(-50%) scale(0.5);
  }
  50% {
    transform: translateY(-50%) scale(1.2);
  }
  100% {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
}
@media (max-width: 576px) {
  .personality-test-container {
    padding: 1rem 0.5rem;
  }
  .personality-test-container .question-container {
    padding: 1.5rem 1rem;
  }
  .personality-test-container .choices-container .choice-container {
    padding: 1.25rem 1rem;
  }
}
@media (prefers-color-scheme: dark) {
  .personality-test-container .question-container {
    background: var(--bs-dark);
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.3);
  }
  .personality-test-container .choices-container .choice-container {
    background: var(--bs-dark);
    border-color: var(--bs-gray-700);
  }
  .personality-test-container .choices-container .choice-container:hover {
    background: var(--bs-dark-bg-subtle);
  }
}
[data-bs-theme=dark] .personality-test-container .question-container {
  background: var(--bs-dark);
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.3);
}
[data-bs-theme=dark] .personality-test-container .choices-container .choice-container {
  background: var(--bs-dark);
  border-color: var(--bs-gray-700);
}
[data-bs-theme=dark] .personality-test-container .choices-container .choice-container:hover {
  background: var(--bs-dark-bg-subtle);
}

.choice-container:focus-visible {
  outline: 3px solid var(--bs-primary);
  outline-offset: 2px;
}
.choice-container[tabindex]:focus {
  border-color: var(--bs-primary);
}

@media print {
  .personality-test-container .progress-section,
  .personality-test-container .choices-container {
    display: none;
  }
  .personality-test-container .question-container {
    box-shadow: none;
    border: 1px solid var(--bs-gray-300);
  }
}
.btn-personality {
  padding: 12px 24px;
  margin: 5px;
  border-radius: 25px;
  font-weight: bold;
  transition: background-color 0.3s ease, transform 0.3s ease, color 0.3s ease;
  background-color: #ffffff;
  color: #343a40;
}
.btn-personality.btn-border-blue {
  border: 2px solid var(--brand-secondary, #f72c93);
}
.btn-personality.btn-border-blue:hover {
  transform: scale(1.05);
  background-color: var(--brand-primary, #0F75BD);
  color: #ffffff;
}
.btn-personality.btn-border-pink {
  border: 2px solid var(--brand-primary, #0F75BD);
}
.btn-personality.btn-border-pink:hover {
  transform: scale(1.05);
  background-color: var(--brand-secondary, #f72c93);
  color: #ffffff;
}
.btn-personality.btn-large {
  font-size: 1.5em;
  padding: 20px 40px;
}
.btn-personality.btn-large.btn-border-pink {
  border: 2px solid var(--brand-primary, #0F75BD);
}
.btn-personality.btn-large.btn-border-pink:hover {
  transform: scale(1.05);
  background-color: var(--brand-secondary, #f72c93);
  color: #ffffff;
}

#finalScore.btn-border-gray {
  border: 2px solid #cccccc;
}

.app-option {
  display: inline-block;
  margin: 15px;
  text-align: center;
}

.app-logo {
  width: 180px;
  height: 180px;
  object-fit: cover;
  border-radius: 15%;
  box-shadow: 1px 4px 8px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: 0.3s;
}
.app-logo:hover {
  opacity: 0.7;
}

.app-link,
.store-buttons a {
  display: block;
  margin-top: 10px;
}

.app-description {
  margin: 10px 0;
  color: #555;
  font-size: 0.9em;
}

/**
 * Geography Quiz Styles
 * Uses CSS variables from _brand.scss for site-aware theming
 */
.geography-quiz-landing .quiz-stats .stat-item {
  text-align: center;
}
.geography-quiz-landing .quiz-stats .stat-item .stat-number {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  color: var(--brand-primary);
  line-height: 1.2;
}
.geography-quiz-landing .quiz-stats .stat-item .stat-label {
  font-size: 0.875rem;
  color: var(--bs-secondary-color);
}
.geography-quiz-landing .region-grid {
  max-width: 900px;
  margin: 0 auto;
}
.geography-quiz-landing .region-card {
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: 2px solid transparent;
}
.geography-quiz-landing .region-card:hover, .geography-quiz-landing .region-card:focus {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  border-color: var(--brand-primary);
}
.geography-quiz-landing .region-card:focus {
  outline: 3px solid var(--brand-primary-light);
  outline-offset: 2px;
}
.geography-quiz-landing .region-card .region-icon {
  color: var(--brand-primary);
  opacity: 0.8;
}
.geography-quiz-landing .region-card .card-footer .btn {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
}
.geography-quiz-landing .region-card .card-footer .btn:hover {
  background: var(--brand-secondary);
  border-color: var(--brand-secondary);
}
.geography-quiz-landing .how-it-works .step-item .step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--brand-primary);
  color: white;
  font-weight: 600;
  font-size: 0.875rem;
}
.geography-quiz-landing .dating-cta {
  border-top: 1px solid var(--bs-border-color);
  padding-top: 1.5rem;
}

.geography-quiz-play .quiz-header .progress {
  background: var(--bs-tertiary-bg);
  border-radius: 4px;
  overflow: hidden;
}
.geography-quiz-play .quiz-header .progress-bar {
  background: linear-gradient(90deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
  transition: width 0.3s ease;
}
.geography-quiz-play .quiz-card {
  max-width: 700px;
  margin: 0 auto;
}
.geography-quiz-play .map-container {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  aspect-ratio: 4/3;
  background: var(--bs-tertiary-bg);
  border-radius: 8px;
  overflow: hidden;
}
.geography-quiz-play .map-container .map-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.geography-quiz-play .geography-map {
  width: 100%;
  height: 100%;
}
.geography-quiz-play .geography-map.map-enter {
  animation: mapFadeIn 0.4s ease;
}
.geography-quiz-play .geography-map .country-highlighted {
  fill: var(--brand-primary);
  stroke: var(--brand-secondary);
  stroke-width: 2px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
  animation: countryPulse 2s ease-in-out infinite;
}
.geography-quiz-play .geography-map .country-dimmed {
  fill: #e0e0e0;
  stroke: #ccc;
  stroke-width: 0.5px;
  transition: fill 0.2s ease;
}
.geography-quiz-play .choices-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  max-width: 500px;
  margin: 0 auto;
}
@media (max-width: 480px) {
  .geography-quiz-play .choices-container {
    grid-template-columns: 1fr;
  }
}
.geography-quiz-play .choice-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 20px;
  font-size: 1rem;
  font-weight: 500;
  border: 2px solid var(--bs-border-color);
  border-radius: 8px;
  background: white;
  transition: all 0.2s ease;
}
.geography-quiz-play .choice-btn.choice-enter {
  animation: choiceSlideIn 0.3s ease forwards;
  opacity: 0;
}
.geography-quiz-play .choice-btn:hover:not(:disabled) {
  border-color: var(--brand-primary);
  background: var(--brand-primary-light);
  transform: scale(1.02);
}
.geography-quiz-play .choice-btn:focus {
  outline: 3px solid var(--brand-primary-light);
  outline-offset: 2px;
}
.geography-quiz-play .choice-btn.correct {
  border-color: var(--bs-success);
  background: var(--bs-success-bg-subtle);
  color: var(--bs-success);
  animation: correctPop 0.3s ease;
}
.geography-quiz-play .choice-btn.correct::after {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-left: 8px;
}
.geography-quiz-play .choice-btn.incorrect {
  border-color: var(--bs-danger);
  background: var(--bs-danger-bg-subtle);
  color: var(--bs-danger);
  animation: incorrectShake 0.4s ease;
}
.geography-quiz-play .choice-btn.incorrect::after {
  content: "\f00d";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-left: 8px;
}
.geography-quiz-play .choice-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}
.geography-quiz-play .choice-btn .choice-flag {
  font-size: 1.25rem;
}
.geography-quiz-play .fun-fact {
  max-width: 500px;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
}
.geography-quiz-play .fun-fact.show {
  opacity: 1;
  transform: translateY(0);
  display: block !important;
}

.geography-quiz-email {
  min-height: 70vh;
  display: flex;
  align-items: center;
}
.geography-quiz-email .email-card {
  max-width: 450px;
  margin: 0 auto;
}
.geography-quiz-email .completion-icon .circle-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
  color: white;
  animation: checkBounce 0.6s ease;
}
.geography-quiz-email .email-form .input-group-text {
  border-right: 0;
}
.geography-quiz-email .email-form .form-control {
  border-left: 0;
}
.geography-quiz-email .email-form .form-control:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 0.25rem var(--brand-primary-light);
}
.geography-quiz-email .email-form .btn-primary {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
}
.geography-quiz-email .email-form .btn-primary:hover {
  background: var(--brand-secondary);
  border-color: var(--brand-secondary);
}
.geography-quiz-email .benefits li {
  padding: 4px 0;
}

.geography-quiz-result .result-card {
  max-width: 700px;
  margin: 0 auto;
}
.geography-quiz-result .badge-display .badge-icon {
  font-size: 3rem;
  display: block;
  margin-bottom: 0.5rem;
}
.geography-quiz-result .badge-display .badge-label {
  font-size: 1.5rem;
  font-weight: 700;
}
.geography-quiz-result .badge-display.badge-genius {
  color: #ffc107;
}
.geography-quiz-result .badge-display.badge-genius .badge-icon {
  animation: starSpin 1s ease;
}
.geography-quiz-result .badge-display.badge-traveler {
  color: var(--brand-primary);
}
.geography-quiz-result .badge-display.badge-explorer {
  color: var(--brand-secondary);
}
.geography-quiz-result .badge-display.badge-newbie {
  color: var(--bs-secondary-color);
}
.geography-quiz-result .score-display {
  font-size: 3rem;
  font-weight: 700;
}
.geography-quiz-result .score-display .score-number {
  color: var(--brand-primary);
}
.geography-quiz-result .score-display .score-separator {
  color: var(--bs-secondary-color);
  margin: 0 4px;
}
.geography-quiz-result .score-display .score-total {
  color: var(--bs-secondary-color);
}
.geography-quiz-result .result-map-container {
  max-width: 500px;
  margin: 0 auto;
}
.geography-quiz-result .result-map {
  aspect-ratio: 4/3;
  background: var(--bs-tertiary-bg);
  border-radius: 8px;
  overflow: hidden;
}
.geography-quiz-result .result-map svg {
  width: 100%;
  height: 100%;
}
.geography-quiz-result .result-map .country-correct {
  fill: var(--bs-success);
  stroke: white;
  stroke-width: 0.5px;
}
.geography-quiz-result .result-map .country-incorrect {
  fill: var(--bs-danger);
  stroke: white;
  stroke-width: 0.5px;
}
.geography-quiz-result .result-map .country-neutral {
  fill: #e0e0e0;
  stroke: #ccc;
  stroke-width: 0.5px;
}
.geography-quiz-result .share-section .btn {
  transition: transform 0.2s ease;
}
.geography-quiz-result .share-section .btn:hover {
  transform: scale(1.05);
}
.geography-quiz-result .dating-cta-card {
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
  max-width: 700px;
  margin: 0 auto;
}
.geography-quiz-result .dating-cta-card .btn-light {
  color: var(--brand-primary);
  font-weight: 600;
}
.geography-quiz-result .dating-cta-card .btn-light:hover {
  transform: scale(1.02);
}

@keyframes mapFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes countryPulse {
  0%, 100% {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
  }
  50% {
    filter: drop-shadow(0 4px 12px var(--brand-primary-light));
  }
}
@keyframes choiceSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes correctPop {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes incorrectShake {
  0%, 100% {
    transform: translateX(0);
  }
  20%, 60% {
    transform: translateX(-5px);
  }
  40%, 80% {
    transform: translateX(5px);
  }
}
@keyframes checkBounce {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes starSpin {
  from {
    transform: rotate(0deg) scale(0.5);
    opacity: 0;
  }
  to {
    transform: rotate(360deg) scale(1);
    opacity: 1;
  }
}
@media (max-width: 576px) {
  .geography-quiz-landing .quiz-stats .stat-number {
    font-size: 1.5rem;
  }
  .geography-quiz-play .choice-btn {
    padding: 12px 16px;
    font-size: 0.9rem;
  }
  .geography-quiz-result .score-display {
    font-size: 2.5rem;
  }
  .geography-quiz-result .badge-display .badge-label {
    font-size: 1.25rem;
  }
}
/* ============================================================
 * MAIN.SCSS - Single Entry Point for All Platform CSS
 * Created: November 8, 2025
 * Purpose: Consolidated SCSS compilation for 10-platform system
 * Output: apps/static/css/app.css + app.min.css
 * ============================================================ */
/* ============================================================
 * 1. CORE FOUNDATION (Load First)
 * Design tokens, reset, typography, framework basics
 * ============================================================ */
:root {
  --dna-primary: var(--color-brand-primary, #0F75BD);
  --dna-secondary: var(--color-brand-secondary, #F72C93);
  --dna-primary-dark: #0966a8;
  --dna-secondary-dark: #e62887;
  --dna-text: #495057;
  --dna-font: 'Raleway', sans-serif;
  --primary-color: var(--dna-primary);
  --secondary-color: var(--dna-secondary);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.1);
  --shadow-md: 0 4px 15px rgba(0,0,0,0.15);
  --radius-sm: 8px;
  --radius-md: 8px;
  --radius-lg: 8px;
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.our-story-section {
  background: rgba(15, 117, 189, 0.05);
  padding: 4rem 0;
}

.mission-statement {
  background: white;
  padding: 2rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.text-gradient {
  color: var(--dna-primary);
  font-weight: var(--font-weight-semibold);
}

.content-card {
  background: white;
  padding: 3rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  margin-bottom: 2rem;
}

.image-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.app-logo {
  width: 120px;
  height: 120px;
  transition: var(--transition-smooth);
}

.app-logo:hover {
  filter: brightness(1.1);
}

.founders-section {
  background: var(--dna-primary);
  color: white;
  padding: 5rem 0;
  margin: 3rem 0;
}
.founders-section h1, .founders-section h2, .founders-section h3, .founders-section h4, .founders-section h5, .founders-section h6 {
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  opacity: 1 !important;
}
.founders-section p, .founders-section .lead {
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  opacity: 1 !important;
}

.founder-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-lg);
  padding: 2rem;
  transition: var(--transition-smooth);
  height: 100%;
}

.founder-card:hover {
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
}

.founder-img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid rgba(255, 255, 255, 0.3);
  transition: var(--transition-smooth);
}

.founder-img:hover {
  border-color: rgba(255, 255, 255, 0.8);
  filter: brightness(1.1);
}

.founder-name {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 1rem 0 0.5rem;
}

.founder-title {
  font-size: 1.1rem;
  opacity: 0.9;
  margin-bottom: 1rem;
}

.founder-bio {
  line-height: 1.6;
  opacity: 0.9;
  font-size: 14px;
}

.founder-social a {
  color: white;
  font-size: 1.2rem;
  margin: 0 0.5rem;
  transition: var(--transition-smooth);
}

.founder-social a:hover {
  opacity: 0.8;
  text-decoration: underline;
}

.press-card {
  transition: all 0.3s ease;
  border-radius: 8px;
  overflow: hidden;
}

.press-card:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2) !important;
  filter: brightness(1.02);
}

.press-card .card-body {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
}

.press-card .card-title {
  color: #212529 !important;
  font-weight: 600;
  transition: color 0.3s ease;
}

.press-card:hover .card-title {
  color: var(--dna-primary) !important;
}

.press-icon {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 768px) {
  .our-story h1 {
    font-size: 2rem !important;
  }
  .app-logo {
    width: 100px;
    height: 100px;
  }
  .founder-img {
    width: 120px;
    height: 120px;
  }
  .press-card .card-title {
    font-size: 1.1rem !important;
  }
}
/* ============================================================
 * MAIN.SCSS - Single Entry Point for All Platform CSS
 * Created: November 8, 2025
 * Purpose: Consolidated SCSS compilation for 10-platform system
 * Output: apps/static/css/app.css + app.min.css
 * ============================================================ */
/* ============================================================
 * 1. CORE FOUNDATION (Load First)
 * Design tokens, reset, typography, framework basics
 * ============================================================ */
:root {
  --dm-primary: #2E86AB;
  --dm-secondary: #A23B72;
  --dm-accent: #E67E00;
  --dm-text: #374151;
  --dm-font: 'Inter', sans-serif;
}

.our-story-section {
  background: rgba(46, 134, 171, 0.05);
  padding: 4rem 0;
}

.text-gradient {
  color: var(--dm-primary);
  font-weight: var(--font-weight-semibold);
}

.btn-primary {
  background: var(--dm-primary);
  border: none;
  border-radius: 8px;
}

.btn-primary:hover {
  background: #256A87;
}

.personality-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin: 2rem 0;
}

.personality-type {
  background: white;
  border: 2px solid transparent;
  border-radius: 8px;
  padding: 1.5rem;
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;
}

.personality-type:hover {
  border-color: var(--dm-primary);
  box-shadow: 0 10px 25px rgba(46, 134, 171, 0.2);
}

.personality-type h4 {
  color: var(--dm-primary);
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
  font-weight: 700;
}

.personality-type p {
  color: var(--dm-text);
  font-size: 14px;
  margin: 0;
}

.founders-section {
  background: var(--dm-primary);
  color: white;
  padding: 5rem 0;
  margin: 3rem 0;
}

.press-card:hover .card-title {
  color: var(--dm-primary) !important;
}

@media (max-width: 768px) {
  .personality-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* ============================================================
 * MAIN.SCSS - Single Entry Point for All Platform CSS
 * Created: November 8, 2025
 * Purpose: Consolidated SCSS compilation for 10-platform system
 * Output: apps/static/css/app.css + app.min.css
 * ============================================================ */
/* ============================================================
 * 1. CORE FOUNDATION (Load First)
 * Design tokens, reset, typography, framework basics
 * ============================================================ */
:root {
  --gp-primary: #059669;
  --gp-secondary: #3B82F6;
  --gp-accent: #8B5CF6;
  --gp-text: #1F2937;
  --gp-font: 'Inter', sans-serif;
}

.our-story-section {
  background: rgba(5, 150, 105, 0.05);
  padding: 4rem 0;
}

.text-gradient {
  color: var(--gp-primary);
  font-weight: var(--font-weight-semibold);
}

.btn-primary {
  background: var(--gp-primary);
  border: none;
  border-radius: 8px;
}

.btn-primary:hover {
  background: #047857;
}

.family-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin: 3rem 0;
}

.family-option-card {
  background: white;
  border-radius: 8px;
  padding: 2rem;
  box-shadow: var(--shadow-md);
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.family-option-card:hover {
  transform: translateY(-5px);
  border-color: var(--gp-primary);
  box-shadow: 0 8px 25px rgba(5, 150, 105, 0.2);
}

.family-option-icon {
  width: 80px;
  height: 80px;
  background: var(--gp-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  font-size: 2rem;
  color: white;
}

.stats-section {
  background: var(--gp-primary);
  color: white;
  padding: 4rem 0;
  margin: 3rem 0;
}

.stat-item {
  text-align: center;
  padding: 2rem;
}

.stat-number {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.stat-label {
  font-size: 1.2rem;
  opacity: 0.9;
}

.founders-section {
  background: var(--gp-primary);
  color: white;
  padding: 5rem 0;
  margin: 3rem 0;
}

.press-card:hover .card-title {
  color: var(--gp-primary) !important;
}

@media (max-width: 768px) {
  .family-options {
    grid-template-columns: 1fr;
  }
  .stat-number {
    font-size: 2rem;
  }
}
/* ============================================================
 * MAIN.SCSS - Single Entry Point for All Platform CSS
 * Created: November 8, 2025
 * Purpose: Consolidated SCSS compilation for 10-platform system
 * Output: apps/static/css/app.css + app.min.css
 * ============================================================ */
/* ============================================================
 * 1. CORE FOUNDATION (Load First)
 * Design tokens, reset, typography, framework basics
 * ============================================================ */
:root {
  --gr-primary: #10B981;
  --gr-secondary: #3B82F6;
  --gr-accent: #8B5CF6;
  --gr-text: #1F2937;
  --gr-font: 'Inter', sans-serif;
}

.our-story-section {
  background: rgba(16, 185, 129, 0.05);
  padding: 4rem 0;
}

.text-gradient {
  color: var(--gr-primary);
  font-weight: var(--font-weight-semibold);
}

.btn-primary {
  background: var(--gr-primary);
  border: none;
  border-radius: 8px;
}

.btn-primary:hover {
  background: #0EA76F;
}

.recovery-timeline {
  position: relative;
  padding: 3rem 0;
  margin: 3rem 0;
}

.recovery-step {
  display: flex;
  align-items: flex-start;
  margin-bottom: 3rem;
  position: relative;
}

.recovery-step::before {
  content: "";
  position: absolute;
  left: 30px;
  top: 60px;
  bottom: -60px;
  width: 2px;
  background: var(--gr-primary);
  opacity: 0.3;
}

.recovery-step:last-child::before {
  display: none;
}

.site-generecovery .step-icon {
  width: 60px;
  height: 60px;
  background: var(--gr-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.5rem;
  margin-right: 2rem;
  flex-shrink: 0;
  box-shadow: var(--shadow-md);
}

.insight-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin: 3rem 0;
}

.insight-card {
  background: rgba(16, 185, 129, 0.05);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 8px;
  padding: 2rem;
  box-shadow: var(--shadow-md);
  transition: all 0.3s ease;
  text-align: center;
  border-top: 4px solid var(--gr-primary);
}

.insight-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(16, 185, 129, 0.2);
}

.founders-section {
  background: var(--gr-primary);
  color: white;
  padding: 5rem 0;
  margin: 3rem 0;
}

.press-card:hover .card-title {
  color: var(--gr-primary) !important;
}

@media (max-width: 768px) {
  .insight-cards {
    grid-template-columns: 1fr;
  }
  .recovery-step {
    flex-direction: column;
    text-align: center;
    margin-bottom: 2rem;
  }
  .site-generecovery .step-icon {
    margin-right: 0;
    margin-bottom: 1rem;
  }
  .recovery-step::before {
    display: none;
  }
}
/* ============================================================
 * MAIN.SCSS - Single Entry Point for All Platform CSS
 * Created: November 8, 2025
 * Purpose: Consolidated SCSS compilation for 10-platform system
 * Output: apps/static/css/app.css + app.min.css
 * ============================================================ */
/* ============================================================
 * 1. CORE FOUNDATION (Load First)
 * Design tokens, reset, typography, framework basics
 * ============================================================ */
/* ============================================================
 * MAIN.SCSS - Single Entry Point for All Platform CSS
 * Created: November 8, 2025
 * Purpose: Consolidated SCSS compilation for 10-platform system
 * Output: apps/static/css/app.css + app.min.css
 * ============================================================ */
/* ============================================================
 * 1. CORE FOUNDATION (Load First)
 * Design tokens, reset, typography, framework basics
 * ============================================================ */
:root {
  --hh-primary: #0891B2;
  --hh-secondary: #7C3AED;
  --hh-accent: #F59E0B;
  --hh-text: #1E293B;
  --hh-font: 'Inter', sans-serif;
}

.our-story-section {
  background: rgba(8, 145, 178, 0.05);
  padding: 4rem 0;
}

.text-gradient {
  color: var(--hh-primary);
  font-weight: var(--font-weight-semibold);
}

.btn-primary {
  background: var(--hh-primary);
  border: none;
  border-radius: 8px;
}

.btn-primary:hover {
  background: #077A9A;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin: 3rem 0;
}

.service-item {
  background: white;
  border-radius: 8px;
  padding: 2.5rem;
  box-shadow: var(--shadow-md);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.service-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--hh-primary);
}

.service-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 30px rgba(8, 145, 178, 0.2);
}

.service-icon {
  width: 70px;
  height: 70px;
  background: rgba(8, 145, 178, 0.1);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  font-size: 2rem;
  color: var(--hh-primary);
}

.process-flow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 3rem 0;
  position: relative;
}

.process-flow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 10%;
  right: 10%;
  height: 2px;
  background: var(--hh-primary);
  z-index: 1;
}

.process-step {
  background: white;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  z-index: 2;
  position: relative;
}

.founders-section {
  background: var(--hh-primary);
  color: white;
  padding: 5rem 0;
  margin: 3rem 0;
}

.press-card:hover .card-title {
  color: var(--hh-primary) !important;
}

@media (max-width: 768px) {
  .service-grid {
    grid-template-columns: 1fr;
  }
  .process-flow {
    flex-direction: column;
    gap: 2rem;
  }
  .process-flow::before {
    display: none;
  }
}
/* ============================================================
 * MAIN.SCSS - Single Entry Point for All Platform CSS
 * Created: November 8, 2025
 * Purpose: Consolidated SCSS compilation for 10-platform system
 * Output: apps/static/css/app.css + app.min.css
 * ============================================================ */
/* ============================================================
 * 1. CORE FOUNDATION (Load First)
 * Design tokens, reset, typography, framework basics
 * ============================================================ */
:root {
  --wm-primary: #00A6CE;
  --wm-secondary: #00D4AA;
  --wm-accent: #FF6B6B;
  --wm-text: #2C3E50;
  --wm-font: 'Inter', sans-serif;
}

.our-story-section {
  background: rgba(0, 166, 206, 0.05);
  padding: 4rem 0;
}

.text-gradient {
  color: var(--wm-primary);
  font-weight: var(--font-weight-semibold);
}

.btn-primary {
  background: var(--wm-primary);
  border: none;
  border-radius: 8px;
}

.btn-primary:hover {
  background: #0095B7;
}

.service-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
  margin: 3rem 0;
}

.service-card {
  background: white;
  border-radius: 8px;
  padding: 3rem;
  box-shadow: var(--shadow-md);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.service-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--wm-primary);
}

.service-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 40px rgba(0, 166, 206, 0.2);
}

.service-icon {
  width: 100px;
  height: 100px;
  background: var(--wm-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 2rem;
  font-size: 3rem;
  color: white;
}

.conditions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin: 2rem 0;
}

.condition-item {
  background: rgba(0, 166, 206, 0.1);
  padding: 1rem;
  border-radius: 8px;
  text-align: center;
  font-weight: 500;
  font-size: 14px;
}

.process-timeline {
  position: relative;
  padding: 2rem 0;
  margin: 3rem 0;
}

.process-step {
  display: flex;
  align-items: center;
  margin-bottom: 3rem;
  position: relative;
}

.process-step::before {
  content: "";
  position: absolute;
  left: 25px;
  top: 50px;
  bottom: -50px;
  width: 2px;
  background: var(--wm-primary);
  opacity: 0.3;
}

.process-step:last-child::before {
  display: none;
}

.step-number {
  width: 50px;
  height: 50px;
  background: var(--wm-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  font-size: 1.5rem;
  margin-right: 2rem;
  flex-shrink: 0;
}

.stats-section {
  background: var(--wm-primary);
  color: white;
  padding: 4rem 0;
  margin: 3rem 0;
}

.stat-item {
  text-align: center;
  padding: 2rem;
}

.stat-number {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.stat-label {
  font-size: 1.2rem;
  opacity: 0.9;
}

.founders-section {
  background: var(--wm-primary);
  color: white;
  padding: 5rem 0;
  margin: 3rem 0;
}

.press-card:hover .card-title {
  color: var(--wm-primary) !important;
}

@media (max-width: 768px) {
  .service-cards {
    grid-template-columns: 1fr;
  }
  .process-step {
    flex-direction: column;
    text-align: center;
  }
  .step-number {
    margin-right: 0;
    margin-bottom: 1rem;
  }
  .process-step::before {
    display: none;
  }
}
/* ============================================================
 * MAIN.SCSS - Single Entry Point for All Platform CSS
 * Created: November 8, 2025
 * Purpose: Consolidated SCSS compilation for 10-platform system
 * Output: apps/static/css/app.css + app.min.css
 * ============================================================ */
/* ============================================================
 * 1. CORE FOUNDATION (Load First)
 * Design tokens, reset, typography, framework basics
 * ============================================================ */
/* ============================================================
 * WELLMATCHED SAFE BLOG STYLES
 * Minimal standalone page styles
 * Created: November 9, 2025
 * ============================================================ */
/* ============================================================
 * 1. BASE STYLES
 * ============================================================ */
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0;
}

/* ============================================================
 * 2. CONTAINER
 * ============================================================ */
.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 24px;
}

/* ============================================================
 * 3. CARD COMPONENT
 * ============================================================ */
.card {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

/* ============================================================
 * 4. UTILITIES
 * ============================================================ */
.muted {
  color: #6b7280;
}

h1 {
  margin: 0 0 8px;
  font-size: 28px;
}

/* ============================================================
 * END OF WELLMATCHED SAFE STYLES
 * ============================================================ */
/*
 * AI Dating Wingman - Page-Specific Styles
 * ==========================================
 * Migrated from inline template CSS: December 30, 2025
 * Uses variables from themes/datingwingman.scss
 */
.dw-body {
  --dw-primary: var(--brand-primary, #6C5CE7);
  --dw-primary-light: var(--brand-primary-light, #A29BFE);
  --dw-secondary: var(--brand-secondary, #FF6B9D);
  --dw-ai-gradient: linear-gradient(135deg, var(--dw-primary), var(--dw-ai-blue));
  --dw-ai-blue: #00B4D8;
  --dw-ai-green: #00F5D4;
  --dw-dark-bg: #0D0D1A;
  --dw-dark-surface: #1A1A2E;
  --dw-dark-border: #2D2D44;
  --dw-dark-text: #F0F0F5;
}

.dw-hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: var(--space-4xl, 4rem) 0;
  background: var(--dw-dark-bg);
  position: relative;
  overflow: hidden;
}
.dw-hero h1, .dw-hero h2, .dw-hero h3, .dw-hero h4, .dw-hero h5, .dw-hero h6 {
  color: var(--dw-dark-text);
}
.dw-hero p, .dw-hero .lead {
  color: var(--color-gray-400, #9CA3AF);
}
.dw-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 50%, rgba(123, 104, 238, 0.1) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(255, 105, 180, 0.1) 0%, transparent 50%);
  animation: dw-gradient-shift 20s ease-in-out infinite;
}

@keyframes dw-gradient-shift {
  0%, 100% {
    transform: scale(1) rotate(0deg);
  }
  50% {
    transform: scale(1.1) rotate(10deg);
  }
}
.dw-hero-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl, 3rem);
  align-items: center;
  position: relative;
  z-index: 1;
}
@media (max-width: 768px) {
  .dw-hero-content {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

.dw-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm, 0.5rem);
  padding: var(--space-xs, 0.25rem) var(--space-md, 1rem);
  background: rgba(123, 104, 238, 0.2);
  border: 1px solid var(--dw-primary);
  border-radius: var(--radius-full, 9999px);
  color: var(--dw-primary-light);
  font-size: var(--font-size-sm, 0.875rem);
  margin-bottom: var(--space-lg, 1.5rem);
}

.dw-status-dot {
  width: 8px;
  height: 8px;
  background: var(--dw-ai-green);
  border-radius: 50%;
  animation: dw-pulse-dot 2s ease-in-out infinite;
}

@keyframes dw-pulse-dot {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
.dw-hero-title {
  font-size: var(--font-size-4xl, 3rem);
  font-weight: var(--font-weight-bold, 700);
  color: var(--dw-dark-text);
  line-height: 1.1;
  margin-bottom: var(--space-lg, 1.5rem);
}

.dw-hero-subtitle {
  font-size: var(--font-size-xl, 1.25rem);
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  line-height: 1.6;
  margin-bottom: var(--space-xl, 2rem);
}

.dw-hero-actions {
  display: flex;
  gap: var(--space-md, 1rem);
  flex-wrap: wrap;
}

.dw-body .btn-beautiful {
  padding: 14px 28px;
  min-height: 44px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.dw-primary-btn {
  background: var(--dw-ai-gradient);
  border: none;
  color: white;
}
.dw-primary-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(123, 104, 238, 0.3);
  color: white;
}

.dw-body .btn-outline {
  background: transparent;
  color: var(--dw-dark-text, #F0F0F5);
  border: 2px solid var(--dw-dark-border, #2D2D44);
}
.dw-body .btn-outline:hover {
  background: var(--dw-dark-surface, #1A1A2E);
  color: var(--dw-primary-light, #9B88FF);
  border-color: var(--dw-primary, #7B68EE);
}

/* WCAG FIX: "See How It Works" link - ensure good contrast - Visual Audit 2026-01-28 */
.dw-body a.btn-outline,
.dw-hero a.btn-outline {
  color: var(--dw-secondary, #FF69B4);
  border-color: rgba(255, 105, 180, 0.5);
}
.dw-body a.btn-outline:hover,
.dw-hero a.btn-outline:hover {
  color: #FF85C0;
  border-color: var(--dw-secondary, #FF69B4);
  background: rgba(255, 105, 180, 0.1);
}

.dw-btn-icon {
  margin-right: var(--space-xs, 0.25rem);
  font-size: 1.2em;
}

.dw-hero-visual .dw-chat-container {
  max-width: 100%;
  margin-left: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
@media (max-width: 768px) {
  .dw-hero-visual .dw-chat-container {
    margin: var(--space-xl, 2rem) auto 0;
  }
}
.dw-hero-visual .dw-chat-container .dw-chat-messages {
  min-height: 280px;
  max-height: 420px;
}

.dw-chat-header {
  background: var(--dw-dark-surface);
  border-bottom: 1px solid var(--dw-dark-border);
  padding: var(--space-md, 1rem);
}

.dw-ai-status {
  display: flex;
  align-items: center;
  gap: var(--space-md, 1rem);
}

.dw-ai-avatar {
  width: 40px;
  height: 40px;
  background: var(--dw-ai-gradient);
  border-radius: 50%;
}

.dw-ai-name {
  font-weight: 600;
  color: var(--dw-dark-text);
}

.dw-ai-status-indicator {
  display: flex;
  align-items: center;
  gap: var(--space-xs, 0.25rem);
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--dw-ai-green);
}

.dw-message {
  display: flex;
  gap: var(--space-md, 1rem);
  margin-bottom: var(--space-lg, 1.5rem);
}
.dw-message.user {
  flex-direction: row-reverse;
}

.dw-message-avatar {
  width: 36px;
  height: 36px;
  background: var(--dw-dark-surface);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25em;
  flex-shrink: 0;
}

.dw-message-content {
  background: var(--dw-dark-surface);
  padding: var(--space-md, 1rem);
  border-radius: var(--radius-lg, 0.75rem);
  color: var(--dw-dark-text, #F0F0F5);
  max-width: 80%;
}
.dw-message-content p {
  margin-bottom: var(--space-sm, 0.5rem);
  color: inherit;
}
.dw-message-content p:last-child {
  margin-bottom: 0;
}

.dw-feature-list {
  list-style: none;
  margin: var(--space-md, 1rem) 0;
  padding: 0;
}
.dw-feature-list li {
  padding: var(--space-xs, 0.25rem) 0;
  color: var(--dw-ai-blue);
}

.dw-typing-indicator {
  display: flex;
  gap: 4px;
  padding: var(--space-sm, 0.5rem);
}

.dw-typing-dot {
  width: 8px;
  height: 8px;
  background: var(--dw-primary);
  border-radius: 50%;
  animation: dw-typing 1.4s infinite both;
}
.dw-typing-dot:nth-child(2) {
  animation-delay: 0.2s;
}
.dw-typing-dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes dw-typing {
  0%, 60%, 100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-6px);
  }
}
.dw-features {
  padding: var(--space-5xl, 5rem) 0;
  background: var(--dw-dark-bg);
}

.dw-section-title {
  text-align: center;
  font-size: var(--font-size-3xl, 2rem);
  color: var(--dw-dark-text);
  margin-bottom: var(--space-3xl, 3rem);
  font-weight: var(--font-weight-bold, 700);
}

.dw-analysis-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-xl, 2rem);
}

.dw-analysis-card {
  background: var(--dw-dark-surface);
  border: 1px solid var(--dw-dark-border);
  border-radius: var(--radius-xl, 1rem);
  padding: var(--space-2xl, 2rem);
  position: relative;
  transition: all var(--duration-normal, 0.3s) ease;
}
.dw-analysis-card:hover {
  border-color: var(--dw-primary);
  transform: translateY(-4px);
}

.dw-analysis-icon {
  font-size: 2.5em;
  margin-bottom: var(--space-md, 1rem);
}

.dw-analysis-title {
  font-size: var(--font-size-lg, 1.125rem);
  color: var(--dw-dark-text);
  margin-bottom: var(--space-sm, 0.5rem);
}

.dw-analysis-value {
  font-size: var(--font-size-2xl, 1.5rem);
  font-weight: var(--font-weight-bold, 700);
  color: var(--dw-primary);
  margin-bottom: var(--space-md, 1rem);
}

.dw-analysis-description {
  color: var(--color-gray-400, #9CA3AF);
  font-size: var(--font-size-sm, 0.875rem);
}

.dw-progress-bar {
  height: 6px;
  background: var(--dw-dark-border);
  border-radius: var(--radius-full, 9999px);
  margin-top: var(--space-lg, 1.5rem);
  overflow: hidden;
}

.dw-progress-fill {
  height: 100%;
  width: var(--dw-progress, 0%);
  background: var(--dw-ai-gradient);
  border-radius: var(--radius-full, 9999px);
  transition: width 1s ease;
}

.dw-ai-thinking {
  display: flex;
  align-items: center;
  gap: var(--space-sm, 0.5rem);
  margin-top: var(--space-lg, 1.5rem);
}

.dw-thinking-animation {
  width: 16px;
  height: 16px;
  border: 2px solid var(--dw-primary);
  border-top-color: transparent;
  border-radius: 50%;
  animation: dw-spin 1s linear infinite;
}

@keyframes dw-spin {
  to {
    transform: rotate(360deg);
  }
}
.dw-thinking-text {
  color: var(--dw-primary);
  font-size: var(--font-size-sm, 0.875rem);
}

.dw-badge-new {
  position: absolute;
  top: var(--space-md, 1rem);
  right: var(--space-md, 1rem);
  padding: var(--space-xs, 0.25rem) var(--space-sm, 0.5rem);
  background: var(--dw-secondary);
  color: white;
  border-radius: var(--radius-full, 9999px);
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: var(--font-weight-bold, 700);
  animation: dw-pulse-badge 2s ease-in-out infinite;
}

@keyframes dw-pulse-badge {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}
.dw-available-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs, 0.25rem);
  padding: var(--space-xs, 0.25rem) var(--space-sm, 0.5rem);
  background: rgba(0, 255, 136, 0.2);
  color: var(--dw-ai-green);
  border-radius: var(--radius-full, 9999px);
  font-size: var(--font-size-sm, 0.875rem);
  margin-top: var(--space-md, 1rem);
}
.dw-available-badge::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--dw-ai-green);
  border-radius: 50%;
  animation: dw-pulse-dot 2s ease-in-out infinite;
}

.dw-suggestions-section {
  padding: var(--space-5xl, 5rem) 0;
  background: var(--dw-dark-surface);
}

.dw-suggestions {
  background: var(--dw-dark-bg);
  border: 1px solid var(--dw-dark-border);
  border-radius: var(--radius-xl, 1rem);
  padding: var(--space-2xl, 2rem);
}

.dw-suggestions-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-xl, 2rem);
}

.dw-suggestions-title {
  font-size: var(--font-size-xl, 1.25rem);
  color: var(--dw-dark-text);
  margin: 0;
}

.dw-ai-badge {
  padding: var(--space-xs, 0.25rem) var(--space-sm, 0.5rem);
  background: var(--dw-ai-gradient);
  color: white;
  border-radius: var(--radius-full, 9999px);
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: var(--font-weight-bold, 700);
}

.dw-suggestions-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg, 1.5rem);
}

.dw-suggestion-item {
  background: var(--dw-dark-surface);
  border: 1px solid var(--dw-dark-border);
  border-radius: var(--radius-lg, 0.75rem);
  padding: var(--space-lg, 1.5rem);
}

.dw-suggestion-badge {
  display: inline-block;
  padding: var(--space-xs, 0.25rem) var(--space-sm, 0.5rem);
  background: rgba(123, 104, 238, 0.2);
  color: var(--dw-primary-light);
  border-radius: var(--radius-sm, 0.25rem);
  font-size: var(--font-size-xs, 0.75rem);
  margin-bottom: var(--space-sm, 0.5rem);
}

.dw-suggestion-content {
  color: var(--dw-dark-text);
  margin-bottom: var(--space-md, 1rem);
}

.dw-suggestion-action {
  color: var(--dw-primary);
  text-decoration: none;
  font-weight: 600;
}
.dw-suggestion-action:hover {
  text-decoration: underline;
}

.dw-chat-container {
  background: var(--dw-dark-bg);
  border: 1px solid var(--dw-dark-border);
  border-radius: var(--radius-xl, 1rem);
  overflow: hidden;
}

.dw-chat-messages {
  padding: var(--space-xl, 2rem);
  min-height: 300px;
  max-height: 400px;
  overflow-y: auto;
}

.dw-scenario-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-top: var(--space-md, 1rem);
}

.dw-scenario-card {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  background: rgba(108, 92, 231, 0.1);
  border: 1px solid rgba(108, 92, 231, 0.25);
  border-radius: 10px;
  color: var(--dw-dark-text);
  cursor: pointer;
  transition: transform 0.15s, background 0.15s;
  text-align: left;
  font-size: 0.85rem;
}
.dw-scenario-card:hover, .dw-scenario-card:focus-visible {
  background: rgba(108, 92, 231, 0.2);
  transform: scale(0.97);
}
.dw-scenario-card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--dw-ai-blue, #00B4D8);
}
.dw-scenario-card:active {
  transform: scale(0.95);
}

.dw-scenario-emoji {
  font-size: 1.25em;
  flex-shrink: 0;
}

.dw-scenario-title {
  font-weight: 600;
}

.dw-fade-in {
  animation: dw-fade-in 0.4s ease-out both;
}

@keyframes dw-fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.dw-chat-input {
  border-top: 1px solid var(--dw-dark-border);
  padding: var(--space-md, 1rem);
}

.dw-input-group {
  display: flex;
  gap: var(--space-sm, 0.5rem);
}

.dw-chat-textarea {
  flex: 1;
  background: var(--dw-dark-surface);
  border: 1px solid var(--dw-dark-border);
  border-radius: var(--radius-lg, 0.75rem);
  padding: var(--space-sm, 0.5rem) var(--space-md, 1rem);
  color: var(--dw-dark-text);
  resize: none;
  max-height: 160px;
  overflow-y: auto;
}
.dw-chat-textarea::placeholder {
  color: var(--color-gray-500, #6B7280);
}
.dw-chat-textarea:focus {
  outline: none;
  border-color: var(--dw-primary);
}

.dw-send-button {
  width: 44px;
  height: 44px;
  background: var(--dw-ai-gradient);
  border: none;
  border-radius: var(--radius-lg, 0.75rem);
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease;
}
.dw-send-button:hover {
  transform: scale(1.05);
}

.dw-trust {
  padding: var(--space-5xl, 5rem) 0;
  background: var(--dw-dark-bg);
}

.dw-trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-xl, 2rem);
  max-width: 1000px;
  margin: 0 auto;
}

.dw-trust-item {
  text-align: center;
  padding: var(--space-xl, 2rem);
}
.dw-trust-item h3 {
  color: var(--dw-dark-text);
  margin-bottom: var(--space-sm, 0.5rem);
}
.dw-trust-item p {
  color: var(--color-gray-400, #9CA3AF);
}

.dw-trust-icon {
  font-size: 3em;
  margin-bottom: var(--space-md, 1rem);
  display: inline-block;
  animation: dw-float 3s ease-in-out infinite;
}

.dw-trust-item:nth-child(2) .dw-trust-icon {
  animation-delay: 0.5s;
}

.dw-trust-item:nth-child(3) .dw-trust-icon {
  animation-delay: 1s;
}

.dw-trust-item:nth-child(4) .dw-trust-icon {
  animation-delay: 1.5s;
}

@keyframes dw-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
.dw-pricing {
  padding: var(--space-5xl, 5rem) 0;
  background: var(--dw-dark-surface);
}

.dw-pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-xl, 2rem);
  max-width: 1000px;
  margin: 0 auto;
}

.dw-pricing-card {
  background: var(--dw-dark-bg);
  border: 1px solid var(--dw-dark-border);
  border-radius: var(--radius-xl, 1rem);
  padding: var(--space-2xl, 2rem);
  text-align: center;
  position: relative;
  transition: all var(--duration-normal, 0.3s) ease;
}
.dw-pricing-card:hover {
  transform: translateY(-4px);
  border-color: var(--dw-primary);
}
.dw-pricing-card.featured {
  border-color: var(--dw-primary);
  transform: scale(1.05);
}
@media (max-width: 768px) {
  .dw-pricing-card.featured {
    transform: none;
  }
}

.dw-pricing-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--dw-ai-gradient);
  color: white;
  padding: var(--space-xs, 0.25rem) var(--space-lg, 1.5rem);
  border-radius: var(--radius-full, 9999px);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-bold, 700);
}

.dw-pricing-title {
  font-size: var(--font-size-xl, 1.25rem);
  color: var(--dw-dark-text);
  margin-bottom: var(--space-md, 1rem);
}

.dw-pricing-price {
  font-size: var(--font-size-3xl, 2rem);
  font-weight: var(--font-weight-bold, 700);
  color: var(--dw-primary);
  margin-bottom: var(--space-xl, 2rem);
}
.dw-pricing-price span {
  font-size: var(--font-size-base, 1rem);
  color: var(--color-gray-400, #9CA3AF);
  font-weight: normal;
}

.dw-pricing-features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-xl, 2rem);
  text-align: left;
}
.dw-pricing-features li {
  padding: var(--space-sm, 0.5rem) 0;
  border-bottom: 1px solid var(--dw-dark-border);
  color: var(--color-gray-300, #D1D5DB);
}
.dw-pricing-features li:last-child {
  border-bottom: none;
}

.dw-cta {
  padding: var(--space-5xl, 5rem) 0;
  background: var(--dw-ai-gradient);
  text-align: center;
  color: white;
}

.dw-cta-content h2 {
  font-size: var(--font-size-3xl, 2rem);
  margin-bottom: var(--space-md, 1rem);
  color: white;
}
.dw-cta-content p {
  font-size: var(--font-size-lg, 1.125rem);
  color: rgba(255, 255, 255, 0.9);
}

.dw-cta-btn {
  background: white;
  color: var(--dw-primary);
  font-weight: var(--font-weight-bold, 700);
  margin-top: var(--space-xl, 2rem);
  min-height: 48px;
  padding: 16px 32px;
}
.dw-cta-btn:hover {
  background: var(--color-gray-100, #F3F4F6);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  color: var(--dw-primary);
}

.dw-cta-note {
  margin-top: var(--space-md, 1rem);
  font-size: var(--font-size-sm, 0.875rem);
  opacity: 0.9;
}

.dw-floating-assistant {
  position: fixed;
  bottom: var(--space-xl, 2rem);
  right: var(--space-xl, 2rem);
  z-index: 1000;
}

.dw-assistant-button {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--dw-ai-gradient);
  border: none;
  color: white;
  font-size: 1.5em;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(123, 104, 238, 0.4);
  transition: transform 0.2s ease;
  position: relative;
}
.dw-assistant-button:hover {
  transform: scale(1.1);
}

.dw-assistant-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 22px;
  height: 22px;
  background: var(--dw-secondary);
  color: white;
  border-radius: 50%;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

.dw-sparkle-effect {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.3;
}

.dw-blog-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.6rem;
  background: var(--dw-dark-bg, #0D0D1A);
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.15s, transform 0.15s;
}
.dw-blog-link:hover, .dw-blog-link:focus-visible {
  background: rgba(108, 92, 231, 0.15);
  transform: translateX(4px);
  outline: none;
}
.dw-blog-link:focus-visible {
  box-shadow: 0 0 0 2px var(--dw-ai-blue, #00B4D8);
}

.dw-blog-emoji {
  font-size: 1.1em;
  flex-shrink: 0;
}

.dw-blog-title {
  color: var(--dw-dark-text, #ccc);
  font-size: 0.85rem;
}

.dw-blog-arrow {
  color: var(--dw-secondary, #FF6B9D);
  margin-left: auto;
  font-size: 0.8rem;
  flex-shrink: 0;
}

.dw-followup-btn {
  display: inline-block;
  margin-top: 0.75rem;
  padding: 0.5rem 1rem;
  background: rgba(0, 180, 216, 0.1);
  border: 1px solid rgba(0, 180, 216, 0.3);
  border-radius: 20px;
  color: var(--dw-ai-blue, #00B4D8);
  font-size: 0.85rem;
  font-style: italic;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}
.dw-followup-btn:hover, .dw-followup-btn:focus-visible {
  background: rgba(0, 180, 216, 0.2);
  transform: scale(1.02);
}
.dw-followup-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--dw-ai-blue, #00B4D8);
}

.dw-thinking-text {
  color: var(--dw-primary-light, #A29BFE);
  font-size: 0.75rem;
  margin-top: 0.25rem;
  opacity: 0.8;
  transition: opacity 0.3s;
}

.dw-soft-nudge {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  background: rgba(108, 92, 231, 0.12);
  border-radius: 10px;
  border: 1px solid rgba(108, 92, 231, 0.25);
}

.dw-soft-nudge-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}

.dw-soft-nudge-title {
  color: var(--dw-ai-purple, #A29BFE);
  font-size: 0.85rem;
  font-weight: bold;
}

.dw-soft-nudge-text {
  color: var(--dw-dark-text, #ccc);
  opacity: 0.85;
  font-size: 0.8rem;
}

.dw-soft-nudge-link {
  color: #FF6B9D;
  font-weight: 600;
  text-decoration: none;
  font-size: 0.85rem;
}
.dw-soft-nudge-link:hover {
  text-decoration: underline;
}

.dw-hard-limit {
  padding: 1.5rem;
  background: linear-gradient(135deg, rgba(108, 92, 231, 0.2), rgba(0, 180, 216, 0.15));
  border-radius: 12px;
  border: 1px solid rgba(108, 92, 231, 0.35);
  text-align: center;
}

.dw-hard-limit-emoji {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.dw-hard-limit-title {
  color: var(--dw-dark-text, #F0F0F5);
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
}

.dw-hard-limit-text {
  color: var(--dw-dark-text, #ccc);
  opacity: 0.85;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.dw-hard-limit-cta {
  display: inline-block;
  padding: 10px 28px;
  background: linear-gradient(135deg, #6C5CE7, #00B4D8);
  color: white;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  transition: transform 0.2s;
}
.dw-hard-limit-cta:hover {
  transform: translateY(-2px);
  color: white;
}

.dw-hard-limit-fine-print {
  color: var(--dw-dark-text, #999);
  opacity: 0.6;
  margin-top: 0.75rem;
  font-size: 0.8rem;
}

.dw-blog-recommendations {
  margin-top: 1.25rem;
  padding: 1rem;
  background: var(--dw-dark-surface, #1A1A2E);
  border-radius: 10px;
  border: 1px solid var(--dw-dark-border, #2D2D44);
}

.dw-blog-recommendations-title {
  color: var(--dw-ai-purple, #A29BFE);
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
}

.dw-blog-recommendations-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/*
 * DNA Matchmakers - Page-Specific Styles
 * =======================================
 * Migrated from inline template CSS: December 30, 2025
 * Uses CSS variables from themes/dnamatchmakers.scss
 */
.dnamatchmakers-hero {
  padding: 100px 0;
  background: linear-gradient(135deg, var(--brand-primary, #1A237E) 0%, var(--brand-secondary, #C2185B) 100%);
  color: white;
}
.dnamatchmakers-hero h1, .dnamatchmakers-hero h2, .dnamatchmakers-hero h3, .dnamatchmakers-hero h4, .dnamatchmakers-hero h5, .dnamatchmakers-hero h6, .dnamatchmakers-hero p, .dnamatchmakers-hero .lead {
  color: white;
}

.hero-badge {
  display: inline-block;
  padding: 8px 20px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50px;
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: 600;
}
.hero-badge i {
  margin-right: 8px;
}

.hero-title {
  font-size: 3.5rem;
  font-weight: 800;
  margin-bottom: 20px;
  color: #fff !important;
}
@media (max-width: 768px) {
  .hero-title {
    font-size: 2.5rem;
  }
}

.hero-subtitle {
  font-size: 1.25rem;
  margin-bottom: 30px;
  opacity: 0.9;
}
@media (max-width: 768px) {
  .hero-subtitle {
    font-size: 1.1rem;
  }
}

.hero-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
}

.step-card {
  padding: 30px;
  background: var(--md3-surface-container-low, #fff);
  border-radius: 15px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
  height: 100%;
}
.step-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
}

.step-number {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, var(--brand-primary, #1A237E), var(--brand-secondary, #C2185B));
  color: white;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 15px;
}

.site-dnamatchmakers .step-icon {
  font-size: 48px;
  color: var(--brand-primary, #1A237E);
  margin-bottom: 15px;
}

.cta-section {
  padding: 80px 0;
}
.cta-section a:not(.btn) {
  color: #FFD700;
  text-decoration: underline;
  font-weight: 500;
}
.cta-section a:not(.btn):hover {
  color: #FFF8DC;
  text-decoration: none;
}

.dnamatchmakers-hero a:not(.btn) {
  color: #FFD700;
  text-decoration: underline;
}
.dnamatchmakers-hero a:not(.btn):hover {
  color: #FFF8DC;
}

.dnamatchmakers-body .btn-beautiful {
  padding: 15px 30px;
  border-radius: 50px;
  font-weight: 600;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
}
.dnamatchmakers-body .primary-btn {
  background: linear-gradient(135deg, var(--brand-primary, #1A237E), var(--brand-secondary, #C2185B));
  color: white;
  border: none;
}
.dnamatchmakers-body .primary-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(26, 35, 126, 0.3);
  color: white;
}
.dnamatchmakers-body .btn-outline {
  background: transparent;
  color: white;
  border: 2px solid white;
}
.dnamatchmakers-body .btn-outline:hover {
  background: white;
  color: var(--brand-primary, #1A237E);
}

/*
 * Global DNA Tree - Page-Specific Styles
 * =======================================
 * Migrated from inline template CSS: December 30, 2025
 * Uses CSS variables from themes/globaldnatree.scss
 */
.site-globaldnatree .globaldnatree-hero,
.globaldnatree-hero,
.container-fluid.globaldnatree-hero {
  background: linear-gradient(135deg, rgba(30, 50, 50, 0.92) 0%, rgba(60, 40, 20, 0.88) 50%, rgba(80, 50, 30, 0.85) 100%) !important;
  color: white !important;
  padding: 80px 0;
  min-height: 400px;
}
.site-globaldnatree .globaldnatree-hero h1, .site-globaldnatree .globaldnatree-hero h2, .site-globaldnatree .globaldnatree-hero h3, .site-globaldnatree .globaldnatree-hero h4, .site-globaldnatree .globaldnatree-hero h5, .site-globaldnatree .globaldnatree-hero h6, .site-globaldnatree .globaldnatree-hero p, .site-globaldnatree .globaldnatree-hero .lead,
.site-globaldnatree .globaldnatree-hero .hero-content h1, .site-globaldnatree .globaldnatree-hero .hero-content h2, .site-globaldnatree .globaldnatree-hero .hero-content p,
.globaldnatree-hero h1,
.globaldnatree-hero h2,
.globaldnatree-hero h3,
.globaldnatree-hero h4,
.globaldnatree-hero h5,
.globaldnatree-hero h6,
.globaldnatree-hero p,
.globaldnatree-hero .lead,
.globaldnatree-hero .hero-content h1,
.globaldnatree-hero .hero-content h2,
.globaldnatree-hero .hero-content p,
.container-fluid.globaldnatree-hero h1,
.container-fluid.globaldnatree-hero h2,
.container-fluid.globaldnatree-hero h3,
.container-fluid.globaldnatree-hero h4,
.container-fluid.globaldnatree-hero h5,
.container-fluid.globaldnatree-hero h6,
.container-fluid.globaldnatree-hero p,
.container-fluid.globaldnatree-hero .lead,
.container-fluid.globaldnatree-hero .hero-content h1,
.container-fluid.globaldnatree-hero .hero-content h2,
.container-fluid.globaldnatree-hero .hero-content p {
  color: white !important;
}
.site-globaldnatree .globaldnatree-hero h1, .site-globaldnatree .globaldnatree-hero h2, .site-globaldnatree .globaldnatree-hero h3, .site-globaldnatree .globaldnatree-hero .display-4, .site-globaldnatree .globaldnatree-hero .h3,
.globaldnatree-hero h1,
.globaldnatree-hero h2,
.globaldnatree-hero h3,
.globaldnatree-hero .display-4,
.globaldnatree-hero .h3,
.container-fluid.globaldnatree-hero h1,
.container-fluid.globaldnatree-hero h2,
.container-fluid.globaldnatree-hero h3,
.container-fluid.globaldnatree-hero .display-4,
.container-fluid.globaldnatree-hero .h3 {
  text-shadow: 0 3px 8px rgba(0, 0, 0, 0.8), 0 1px 4px rgba(0, 0, 0, 0.6) !important;
}
.site-globaldnatree .globaldnatree-hero p, .site-globaldnatree .globaldnatree-hero .lead,
.globaldnatree-hero p,
.globaldnatree-hero .lead,
.container-fluid.globaldnatree-hero p,
.container-fluid.globaldnatree-hero .lead {
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  font-weight: 500;
}
.site-globaldnatree .globaldnatree-hero .cta-buttons .btn-primary,
.globaldnatree-hero .cta-buttons .btn-primary,
.container-fluid.globaldnatree-hero .cta-buttons .btn-primary {
  background: #fff !important;
  color: var(--brand-primary, #2E7D32) !important;
  border: 2px solid #fff !important;
  font-weight: 700;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.site-globaldnatree .globaldnatree-hero .cta-buttons .btn-primary:hover,
.globaldnatree-hero .cta-buttons .btn-primary:hover,
.container-fluid.globaldnatree-hero .cta-buttons .btn-primary:hover {
  background: rgba(255, 255, 255, 0.9) !important;
  color: var(--brand-primary, #2E7D32) !important;
  transform: translateY(-2px);
}
.site-globaldnatree .globaldnatree-hero .cta-buttons .btn-outline-primary,
.globaldnatree-hero .cta-buttons .btn-outline-primary,
.container-fluid.globaldnatree-hero .cta-buttons .btn-outline-primary {
  color: #fff !important;
  border: 2px solid #fff !important;
  background: rgba(255, 255, 255, 0.15) !important;
  font-weight: 600;
}
.site-globaldnatree .globaldnatree-hero .cta-buttons .btn-outline-primary:hover,
.globaldnatree-hero .cta-buttons .btn-outline-primary:hover,
.container-fluid.globaldnatree-hero .cta-buttons .btn-outline-primary:hover {
  background: rgba(255, 255, 255, 0.3) !important;
  transform: translateY(-2px);
}
@media (min-width: 992px) {
  .site-globaldnatree .globaldnatree-hero .hero-content,
  .globaldnatree-hero .hero-content,
  .container-fluid.globaldnatree-hero .hero-content {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

.feature-card {
  background: white;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  height: 100%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
}
.feature-card h3 {
  color: var(--brand-primary, #8B4513);
}

.beta-feature {
  background: rgba(218, 165, 32, 0.1);
  border: 2px dashed #DAA520;
  border-radius: 8px;
  color: var(--brand-primary, #8B4513);
  font-weight: 600;
}
.beta-feature i {
  margin-right: 8px;
  color: #DAA520;
}

.globaldnatree-hero + .alert-warning,
.alert-warning.globaldnatree-alert {
  background-color: var(--brand-primary, #8B4513);
  color: white;
  border: none;
}

.report-hero-circle {
  width: 150px;
  height: 150px;
  font-size: 2.5rem;
  font-weight: bold;
  background: rgba(255, 255, 255, 0.2);
}

.report-hero-circle--sm-text {
  font-size: 2rem;
}

.progress--slim {
  height: 8px;
}

.progress--tall {
  height: 30px;
  border-radius: 15px;
}

.report-empty-icon {
  font-size: 5rem;
  opacity: 0.3;
}

.breadcrumb--dark-bg {
  --bs-breadcrumb-divider-color: rgba(255, 255, 255, 0.5);
}

.chr-label {
  width: 30px;
}

.chr-pct {
  width: 40px;
}

.badge--d0 {
  background: #0083b0;
}

.badge--d1-warm {
  background: #f2c94c;
}

.badge--d1-orange {
  background: #f2994a;
}

.badge--d2 {
  background: #56ab2f;
}

.risk-marker-arrow {
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #212529;
  margin: 0 auto;
}

.risk-marker-pos {
  top: -8px;
  transform: translateX(-50%);
}

.pairedgenes-header {
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
  color: #fff;
  padding-top: 150px !important;
  padding-bottom: 60px !important;
}
.pairedgenes-header h1, .pairedgenes-header h2, .pairedgenes-header h3, .pairedgenes-header .lead {
  color: #fff;
}
.pairedgenes-header h1.display-4 {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  line-height: 1.2;
}
.pairedgenes-header .btn-outline-primary {
  color: #fff !important;
  border-color: #fff !important;
  border-width: 2px !important;
  background-color: transparent !important;
}
.pairedgenes-header .btn-outline-primary:hover, .pairedgenes-header .btn-outline-primary:focus {
  background-color: #fff !important;
  color: var(--brand-primary) !important;
}

.cta-section:not(.bg-light) {
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
}
.cta-section:not(.bg-light) h2, .cta-section:not(.bg-light) p, .cta-section:not(.bg-light) .lead {
  color: #fff !important;
}

.science-card {
  padding: 1.5rem;
  background: var(--md3-surface-container-low, #fff);
  border-radius: var(--bs-border-radius-lg);
  transition: box-shadow 0.2s ease;
}
.science-card:hover {
  box-shadow: var(--bs-box-shadow);
}

.site-pairedgenes .navbar-toggler {
  border-color: rgba(0, 0, 0, 0.3) !important;
  background-color: rgba(255, 255, 255, 0.95) !important;
  padding: 0.5rem 0.75rem !important;
}
.site-pairedgenes .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(51, 51, 51, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}
.site-pairedgenes .navbar .btn-primary {
  white-space: nowrap;
  font-size: 0.875rem;
  line-height: 1.5;
}

/* ============================================================
 * 5. COMPILED LEGACY SCSS
 * Existing SCSS files (style, responsive, feed, etc.)
 * ============================================================ */
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1.6;
  color: #333333;
  background-color: #F4F4F4;
  margin: 0;
  padding: 0;
}

h1 {
  font-size: 2.5rem;
  color: #0F75BD;
  font-weight: 700;
  text-align: center;
  margin-bottom: 1.5rem;
  line-height: 1.2;
}

h2 {
  font-size: 2rem;
  color: #0F75BD;
  font-weight: 600;
  text-align: center;
  margin-bottom: 1.25rem;
  line-height: 1.3;
}

h3, h4 {
  font-size: 1.5rem;
  color: #D91A72;
  font-weight: 600;
  text-align: left;
  margin-bottom: 1rem;
  line-height: 1.4;
}

h5 {
  font-size: 1.125rem;
  color: #333333;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

p {
  font-size: 1rem;
  color: #555555;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.lead {
  font-size: 1.25rem;
  color: #555555;
  font-weight: 400;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

a {
  color: #2D6FC7;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s ease;
}
a:hover {
  color: rgb(30.8913934426, 76.1987704918, 136.6086065574);
  text-decoration: underline;
}

img {
  max-width: 100%;
  height: auto;
  border: none;
}

ul {
  padding: 0;
  list-style: none;
}

input:focus,
textarea:focus {
  box-shadow: none;
  outline: none;
  border-color: #2D6FC7;
}

.container.no-padding {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.btn {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: 1rem;
  padding: 0.75rem 1.5rem;
  border-radius: 25px;
  border: none;
  cursor: pointer;
  text-decoration: none !important;
  transition: all 0.3s ease;
  display: inline-block;
  text-align: center;
}

.btn-primary {
  background: linear-gradient(135deg, #2D6FC7, #50E3C2);
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(74, 144, 226, 0.4);
}
.btn-primary:hover {
  background: linear-gradient(135deg, rgb(35.5942622951, 87.7991803279, 157.4057377049), rgb(36.0344827586, 219.9655172414, 178.6748768473));
  filter: brightness(1.1);
  box-shadow: 0 6px 20px rgba(74, 144, 226, 0.6);
  color: #ffffff;
}

.btn-secondary {
  background: linear-gradient(135deg, #D91A72, rgb(231.8888888889, 62.1111111111, 140.3333333333));
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(247, 44, 147, 0.4);
}
.btn-secondary:hover {
  background: linear-gradient(135deg, rgb(171.4567901235, 20.5432098765, 90.0740740741), #D91A72);
  filter: brightness(1.1);
  box-shadow: 0 6px 20px rgba(247, 44, 147, 0.6);
  color: #ffffff;
}

.btn-lg {
  padding: 1rem 2rem;
  font-size: 1.125rem;
  border-radius: 50px;
}

.card {
  background: #ffffff;
  border: none;
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  overflow: hidden;
}
.card:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
  filter: brightness(1.01);
}

.card-title {
  color: #D91A72;
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.card-text {
  color: #555555;
  font-size: 1rem;
  line-height: 1.6;
}

.banner3 {
  background-image: url("../images/background/background3XL.d79c31b012ae.jpeg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 4rem 0;
  color: #ffffff;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.banner3:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1;
}
.banner3 .container {
  position: relative;
  z-index: 2;
}
.banner3 h1 {
  font-size: 4.5rem;
  margin-bottom: 1rem;
  color: #ffffff;
  font-weight: 700;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.87);
}
.banner3 h2 {
  font-size: 3.6rem;
  margin-bottom: 2rem;
  color: #ffffff;
  font-weight: 400;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.87);
}
.banner3 .btn {
  margin: 0.5rem;
}

.banner3-content {
  position: relative;
  z-index: 3;
  padding: 2rem 0;
}

.c-text-shadow {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.87);
}

#topp.webp,
.banner3.webp {
  background-image: url("../images/background/background3XL.53227de9949d.webp") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

#topp.no-webp,
.banner3.no-webp {
  background-image: url("../images/background/background3XL.d79c31b012ae.jpeg") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.webp {
  background: url("../images/background/background3XL.53227de9949d.webp") repeat center top;
  background-size: cover;
}

.no-webp {
  background: url("../images/background/background3XL.d79c31b012ae.jpeg") repeat center top;
  background-size: cover;
}

.webp-couples {
  background: url("../images/background/couple-skyline.6d622a47bfb4.webp") repeat center top;
  background-size: cover;
}

.no-webp-couples {
  background: url("../images/background/couple-skyline.1993dab4c64e.jpeg") repeat center top;
  background-size: cover;
}

#topp.hero-bg-variant-a,
.hero-section.hero-bg-variant-a,
.banner3.hero-bg-variant-a {
  background-image: url("../images/background/background3XL.53227de9949d.webp") !important;
  background-size: cover !important;
  background-position: center !important;
}

#topp.hero-bg-variant-b,
.hero-section.hero-bg-variant-b,
.banner3.hero-bg-variant-b {
  background-image: url("../images/background/matchmaking_background.57d377677b3f.webp") !important;
  background-size: cover !important;
  background-position: center !important;
}

#topp.hero-bg-variant-c,
.hero-section.hero-bg-variant-c,
.banner3.hero-bg-variant-c {
  background-image: url("../images/background/background5_br.590961c44b14.webp") !important;
  background-size: cover !important;
  background-position: center top !important;
}

#topp.hero-bg-variant-d,
.hero-section.hero-bg-variant-d,
.banner3.hero-bg-variant-d {
  background-image: url("../images/background/background6_br.cf5fba3946d7.webp") !important;
  background-size: cover !important;
  background-position: center top !important;
}

#topp.hero-bg-variant-e,
.hero-section.hero-bg-variant-e,
.banner3.hero-bg-variant-e {
  background-image: url("../images/background/background7_br.4b2056b21245.webp") !important;
  background-size: cover !important;
  background-position: center top !important;
}

.no-webp #topp.hero-bg-variant-a,
.no-webp .hero-section.hero-bg-variant-a {
  background-image: url("../images/background/background3XL.d79c31b012ae.jpeg") !important;
}

.no-webp #topp.hero-bg-variant-b,
.no-webp .hero-section.hero-bg-variant-b {
  background-image: url("../images/background/matchmaking_background.26c60df5e89a.jpg") !important;
}

.no-webp #topp.hero-bg-variant-c,
.no-webp .hero-section.hero-bg-variant-c {
  background-image: url("../images/background/background5_br.9e2d34e4e7e1.jpg") !important;
}

.no-webp #topp.hero-bg-variant-d,
.no-webp .hero-section.hero-bg-variant-d {
  background-image: url("../images/background/background6_br.272559d39379.jpg") !important;
}

.no-webp #topp.hero-bg-variant-e,
.no-webp .hero-section.hero-bg-variant-e {
  background-image: url("../images/background/background7_br.32c1c8a2bfc2.jpg") !important;
}

@media screen and (max-width: 767px) {
  #topp.webp,
  .banner3.webp {
    background-image: url("../images/background/backgroundmobile1XL.d93ef31b3c12.webp") !important;
  }
  #topp.nowebp,
  .banner3.no-webp {
    background-image: url("../images/background/backgroundmobile1XL.cf3bc8fe8662.jpg") !important;
  }
  .webp {
    background: url("../images/background/backgroundmobile1XL.d93ef31b3c12.webp") repeat center top;
    background-size: cover;
  }
  .no-webp {
    background: url("../images/background/backgroundmobile1XL.cf3bc8fe8662.jpg") repeat center top;
    background-size: cover;
  }
}
.text-center {
  text-align: center;
}

.text-start {
  text-align: left;
}

.text-end {
  text-align: right;
}

.color-white {
  color: #ffffff;
}

.color-primary {
  color: #0F75BD;
}

.color-secondary {
  color: #D91A72;
}

.py-5 {
  padding: 3rem 0;
}

.mt-4 {
  margin-top: 1.5rem;
}

.mt-5 {
  margin-top: 3rem;
}

.mb-4 {
  margin-bottom: 1.5rem;
}

.mb-5 {
  margin-bottom: 3rem;
}

.float-end {
  float: right;
}

.attention-grabber {
  position: relative;
  overflow: hidden;
}
.attention-grabber::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent, rgba(247, 44, 147, 0.1), transparent);
  animation: shimmer 3s infinite;
  z-index: 1;
}

@keyframes shimmer {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.glow-effect {
  box-shadow: 0 0 20px rgba(74, 144, 226, 0.3);
  transition: all 0.3s ease;
}
.glow-effect:hover {
  box-shadow: 0 0 30px rgba(74, 144, 226, 0.5);
}

.gradient-text {
  background: linear-gradient(135deg, #0F75BD, #D91A72);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

@media (max-width: 768px) {
  h1 {
    font-size: 2rem;
  }
  h2 {
    font-size: 1.5rem;
  }
  .btn {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
  }
  .btn-lg {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
  }
  .card {
    margin-bottom: 1rem;
  }
  .banner3 {
    padding: 3rem 0;
  }
  .banner3 h1 {
    font-size: 2rem;
  }
  .banner3 h2 {
    font-size: 1.25rem;
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
.animate-fade-in {
  animation: fadeInUp 0.6s ease-out;
}

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

.science-icon-container {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.science-icon {
  max-height: 120px;
  max-width: 120px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.science-text-content {
  min-height: 120px;
  display: flex;
  align-items: flex-start;
}
.science-text-content p {
  margin-bottom: 1.5rem;
}

.footer3 {
  background-color: #333333;
  color: #ffffff;
  padding: 3rem 0;
}
.footer3 .fot-social {
  margin-bottom: 2rem;
}
.footer3 .fot-social a {
  color: #ffffff;
  font-size: 1.5rem;
  margin: 0 1rem;
  transition: color 0.3s ease;
}
.footer3 .fot-social a:hover {
  color: #2D6FC7;
}
.footer3 a {
  color: #2D6FC7;
}
.footer3 a:hover {
  color: rgb(100.4487704918, 151.7069672131, 220.0512295082);
}
.footer3 p {
  color: #ffffff;
  margin-bottom: 0.5rem;
}
.footer3 .footer-copy {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 2rem;
  margin-top: 2rem;
}

/* Smart Watch & Apple Watch */
@media screen and (width: 320px) {
  .navbar5-logo, .address {
    width: 100% !important;
  }
  .banner3-content h1 {
    font-size: 36px;
    line-height: 29px;
  }
  .banner3-content h3 {
    font-size: 26px;
    line-height: 38px;
  }
}
/* Mobile */
@media screen and (min-width: 320px) and (max-width: 767px) {
  .banner3-content h1 {
    font-size: 32px;
    line-height: 36px;
  }
  .banner3-content h3 {
    font-size: 20px;
    line-height: 30px;
  }
  .banner4-content h1 {
    font-size: 45px;
  }
  .banner4-content .btnn {
    margin-bottom: 20px;
  }
  .banner3-content .btnn {
    margin-bottom: 20px;
  }
  .ban-text h1 {
    text-align: center;
  }
  .ban-btns .buy {
    margin-bottom: 10px;
  }
  .ban-btns {
    margin-bottom: 20px;
  }
  .container {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  .buy-now {
    padding: 0px;
    text-align: left;
    padding-bottom: 20px;
  }
  .buy-now .btnn {
    margin-top: 9px;
    padding: 5px 10px;
  }
  .service {
    margin-top: 45px;
  }
  .service2 {
    text-align: center;
  }
  .service2-content {
    margin-bottom: 20px;
    width: 100%;
  }
  .service-image {
    margin: 0 auto;
    width: 100%;
  }
  .service4, .tabber-info, .timeline .col-md-3 p, .fun-facts h5 {
    margin-bottom: 30px;
  }
  .service3-image img {
    width: auto;
  }
  .form form input {
    margin-bottom: 20px;
  }
  .form div {
    padding: 0px;
  }
  .form2 {
    position: relative;
  }
  .form3 {
    width: auto;
  }
  .sub-form .row, .footer .row {
    margin: 0px;
  }
  .sub-form2 .in-type {
    margin-bottom: 10px;
    margin-right: 22px;
    width: 100%;
  }
  .sub-form3 .in-type {
    margin-bottom: 10px;
    width: 100%;
  }
  .sub-form3 form .message3-btn .submit,
  .sub-form2 form .message3-btn .submit {
    width: 100%;
  }
  .top-form .formm {
    width: 100%;
  }
  .form-bottom-icon span {
    margin: 0px;
    font-size: 11px;
  }
  .form-bottom-icon ul li {
    display: inline-block;
  }
  .form-bottom-icon {
    text-align: left;
  }
  .navbar5-logo {
    padding-left: 0px;
    text-align: center;
  }
  .navbar5-logo img {
    width: 150px;
  }
  .nav-btnn {
    float: left;
    margin-bottom: 20px;
    display: none;
  }
  .cbp-spmenu-right {
    right: 0;
  }
  .comment-box {
    background: none;
    display: none;
  }
  .commenter-name {
    display: none;
  }
  .client-reviews2, .client-reviews3 {
    background-repeat: repeat;
  }
  #client-reviews2 {
    background-repeat: repeat;
  }
  .da-thumbs li a,
  .da-thumbs li a img,
  .team-image img {
    width: 100%;
  }
  .gallery-section .btnn {
    margin-bottom: 30px;
  }
  .text-with-btn3 .btn-image {
    bottom: 0px;
    margin: 40px 0;
  }
  .zoomer #mlens_wrapper_0 {
    width: 100%;
  }
  .contact-email, .contact-phone, .contact-add {
    text-align: left;
    margin-bottom: 20px;
  }
  .contact-email p:before, .contact-phone p:before {
    left: 0;
  }
  .contact-add {
    padding-left: 15px;
  }
  .contact-popup {
    width: auto;
  }
  .footer-copy {
    padding-left: 15px;
  }
  .footer-copy .fot-social {
    float: left;
    margin-top: 20px;
  }
  .fot-social {
    float: none;
    margin-top: 20px;
  }
  .copy {
    float: none;
  }
  .tab-inner-slider {
    width: 80%;
    padding-top: 0px;
  }
  .tab-slider {
    width: 80%;
    background-size: 100% 236px;
    height: 236px;
    padding-top: 14px;
  }
  .tab-inner-sliderr {
    padding: 11px 34px;
    width: auto;
    height: auto;
  }
  .tab-inner-sliderr .wistia_embed {
    display: inline-block;
    height: 200px !important;
    width: auto !important;
  }
  .tab-slider .owl-carousel .owl-item img {
    display: block;
    width: 100%;
    height: 208px;
  }
  #owl-testimonial-2 {
    padding-bottom: 0px;
  }
  #owl-testimonial-2 .col-md-4 {
    margin-bottom: 30px;
  }
  #orange .pin {
    left: 48%;
  }
  #green .pin {
    left: 48%;
  }
  #yello .pin {
    right: 52%;
  }
  .timeline-line {
    display: none;
  }
  .plane4-details .col-md-3 {
    margin-bottom: 150px !important;
  }
  .plane4-details .col-md-3:last-child {
    margin-bottom: 0px !important;
  }
  .subscribe3 h5 {
    font-size: 29px;
    line-height: 29px;
  }
  .skill .name {
    width: auto;
  }
  .other-content h1 {
    font-size: 40px;
    line-height: 69px;
  }
  .other-content h3 {
    font-size: 26px;
  }
  .clients-area {
    text-align: center;
  }
  .clients-area li {
    margin-bottom: 20px;
  }
  .our-brands h1 {
    font-size: 30px;
  }
  .slider {
    padding-bottom: 115px;
  }
  .slider .btnn {
    padding: 10px 22px;
  }
  .sorting-content {
    margin-bottom: 20px;
  }
  .choose-us .accordion-section-title {
    font-size: 13px;
  }
  .experience-version8 {
    background-repeat: repeat !important;
  }
  .open-com1, .open-com2, .com1, .com2, .com3 {
    display: none !important;
  }
  .ban-btns .buy, .banner-tab, .banner2 img {
    display: none;
  }
  .plan {
    margin-bottom: 20px;
  }
  .success-message a {
    padding: 10px;
  }
  .reviews4 {
    padding-top: 0px;
    padding-bottom: 30px;
  }
  .reviews4 .col-md-5 {
    display: none;
  }
  #version5 .buy-now a {
    margin-top: 8px;
    padding: 5px 10px;
  }
  .intro-copy {
    position: relative;
    top: 50%;
    transform: translateY(-50%) !important;
    z-index: 1;
  }
  .text-with-btn .btnn, .plan2 {
    margin-bottom: 20px;
  }
  .text-with-btn a {
    text-align: center;
  }
  .text-with-btn, .footer {
    text-align: center;
  }
  .video-version5 {
    padding-top: 0px !important;
  }
  #content-version7 {
    padding: 100px 0px;
  }
  #client-version7 .col-md-4 {
    display: none;
  }
  #client-version7 .client-reviews2 {
    padding-bottom: 20px;
    padding-top: 0;
  }
  #wistia_13.thumb_container {
    width: 100% !important;
  }
  .content-head h3 {
    font-size: 16px;
  }
  .review3 p, .client-info3 h5 {
    padding-left: 20px !important;
  }
  .clients-comments3 .clients-line {
    margin-left: 20px !important;
  }
  .clients-comments3 {
    padding-left: 0px;
  }
  #service4-wista-video .tab-inner-sliderr {
    display: none;
  }
  .dnaoption1 {
    grid-area: 1/1/2/2;
  }
  .dnaoption2 {
    grid-area: 2/1/3/2;
  }
  .top-social {
    padding-top: 10px;
  }
  .top-social .buy-now {
    position: absolute;
    right: 15px;
    z-index: 99999;
    width: 151px;
    margin-bottom: 0px;
    padding-bottom: 0px;
    text-align: right;
  }
  .top-social .navbar5-logo {
    display: none !important;
    text-align: left;
    float: left;
  }
  .top-social .navbar5-mlogo {
    display: block;
    left: 0;
    position: absolute;
    right: 0;
    text-align: center;
  }
  .top-social2, .top-social3, .top-social4 {
    padding-top: 12px;
  }
  .top-social2 .navbar5-logo,
  .top-social3 .navbar5-logo,
  .top-social4 .navbar5-logo {
    display: block;
    left: 0;
    position: absolute;
    right: 0;
    margin-top: 8px;
  }
  .top-social2 .navbar5-logo {
    text-align: right;
    float: left;
  }
  .top-social3 .navbar5-logo {
    text-align: left;
  }
  .top-social4 .navbar5-logo {
    text-align: right;
  }
  .top-social4 {
    background: #fff;
  }
  .top-social4 .header3 {
    margin-top: 0px !important;
    padding-top: 0px !important;
  }
  .header2, .header3, .header44 {
    margin-top: 0px;
  }
  .form-client .flip-counter.default .digit,
  .form-client .flip-counter.default .digit .line,
  .form-client .flip-counter.default .digit span,
  .form-client .flip-counter.default .digit .hinge {
    width: 42px !important;
  }
  .flip-counter.default .digit,
  .flip-counter.default .digit .line,
  .flip-counter.default .digit span,
  .flip-counter.default .digit .hinge {
    width: 26px !important;
  }
  .easyPieChart span {
    line-height: 143px !important;
  }
  #singh-uppp {
    display: none;
  }
  #topbar-version8 {
    background: none;
  }
}
/* Tablet / iPad */
@media screen and (min-width: 768px) and (max-width: 1199px) {
  .banner3-content h1 {
    font-size: 76px;
    line-height: 80px;
  }
  .banner3-content h3 {
    font-size: 26px;
    line-height: 38px;
  }
  .container {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  .buy-now {
    margin-bottom: 36px;
    text-align: left;
  }
  .ban-btns .buy {
    margin-bottom: 10px;
  }
  .header44 {
    width: 64%;
  }
  .form, .video-box-content2 {
    width: auto;
  }
  .form2 {
    position: relative;
  }
  .sub-form2 .in-type {
    margin-right: 22px;
    width: 195px;
  }
  .sub-form3 .in-type {
    width: 250px;
  }
  .top-form .formm {
    width: 100%;
  }
  .form-bottom-icon ul li {
    display: inline-block;
  }
  .form-bottom-icon {
    text-align: left;
  }
  .form-bottom-icon .big-span {
    display: inline-block !important;
  }
  .service-image {
    margin: 0 auto;
    float: none;
  }
  .service2-content {
    text-align: center;
    width: auto;
  }
  .service3-main, .text3-withbtn {
    width: 100%;
  }
  .service2-section .clients-area ul li {
    padding: 0 9px;
  }
  .comment-box {
    background-size: 100% 141px;
    height: 141px;
  }
  .comment-box p {
    color: #fff;
    font-size: 14px;
    line-height: 20px;
  }
  .commenter-name {
    padding-left: 50px;
  }
  .text-with-btn2 .com1, .com1,
  .text-with-btn2 .com2, .com2,
  .text-with-btn2 .com3, .com3 {
    display: none;
  }
  .other-content h1 {
    font-size: 45px;
    line-height: 50px;
  }
  .other-content h3 {
    font-size: 26px;
  }
  .content-head h3 {
    font-size: 16px;
  }
  .accordion-section-title {
    font-size: 16px;
  }
  .plan h3 {
    font-size: 18px;
  }
  .price span {
    font-size: 40px;
  }
  .header3, .review3, .form3 {
    width: 100%;
  }
  .gallery-section .btnn {
    margin-bottom: 30px;
  }
  .detail-con {
    padding: 0 20px;
  }
  .contact-email p:before {
    left: 12%;
  }
  .contact-phone p:before {
    left: 27%;
  }
  .our-brands .clients-area ul li {
    padding: 0 10px;
  }
  .clients-area ul li {
    display: inline-block;
    padding: 0px 6px;
  }
  .clients-area ul li:nth-child(6) {
    display: none;
  }
  .clients-reviews4 {
    padding-top: 0px !important;
  }
  .timeline-line {
    width: 536px;
  }
  .our-brands .col-md-8, .title4, .pricing-plane2 .col-md-8 {
    width: 100%;
  }
  .form-client .flip-counter.default .digit,
  .form-client .flip-counter.default .digit .line,
  .form-client .flip-counter.default .digit span,
  .form-client .flip-counter.default .digit .hinge {
    width: 43px !important;
  }
  .form-client {
    padding: 20px 25px 20px 14px;
  }
  .easyPieChart {
    height: 128px;
  }
  .easyPieChart span {
    line-height: 139px !important;
  }
  .chartt.dark {
    display: inline-block;
    float: left;
    width: 143px !important;
  }
  .chartss .col-md-2:nth-child(6) {
    display: none;
  }
  .gallery {
    width: 100%;
  }
  .top-social4 .header3 {
    width: auto;
  }
  .top-social .btnn {
    padding: 10px 22px;
  }
  .top-social .buy-now {
    padding-left: 0px;
    width: auto;
  }
  .top-social .header44 {
    width: 50%;
  }
  .top-social3 .navbar5-logo, .top-social3 .header3 {
    width: auto;
  }
  .slider .col-sm-6 {
    width: 100%;
  }
  .intro-copy {
    position: relative;
    top: 50%;
    transform: translateY(-50%) !important;
    z-index: 1;
  }
  .success {
    padding-bottom: 74px;
  }
  .zoomer {
    width: 100% !important;
    margin-bottom: 40px;
  }
  .banner-tab {
    display: none;
  }
  .slider {
    padding-bottom: 115px;
  }
  #singh-uppp {
    display: none;
  }
  #topbar-version8 {
    background: transparent;
  }
}
/* Desktop */
@media screen and (min-width: 1200px) and (max-width: 8024px) {
  .banner3-content h1 {
    font-size: 72px;
    line-height: 76px;
  }
  .banner3-content h3 {
    font-size: 26px;
    line-height: 26px;
  }
  .banner-tab {
    width: auto;
  }
  .form, .video-box-content2 {
    width: auto;
  }
  .form2 {
    position: relative;
  }
  .sub-form2 .in-type {
    margin-right: 22px;
    width: 299px;
  }
  .comment-box {
    background-size: 100%;
  }
  .service3-image h4 {
    font-size: 16px;
  }
  .service2-section .clients-area ul li {
    display: inline-block;
    padding: 0 14px;
  }
  .review3 {
    width: auto;
  }
  .contact-email p:before {
    left: 22%;
  }
  .contact-phone p:before {
    left: 46%;
  }
  .our-brands .col-md-8, .title4, .pricing-plane2 .col-md-8 {
    width: 100%;
  }
  .timeline-line {
    width: 730px;
  }
  .form-client .flip-counter.default .digit,
  .form-client .flip-counter.default .digit .line,
  .form-client .flip-counter.default .digit span,
  .form-client .flip-counter.default .digit .hinge {
    width: 34px !important;
  }
  .zoomer {
    width: 100% !important;
    margin-bottom: 40px;
  }
  #singh-uppp {
    display: none;
  }
}
body {
  background-color: #ecf0f5;
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: normal;
  color: #758697;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: 600;
  color: #16202b;
}

h1, .h1 {
  font-size: 34px;
}

h2, .h2 {
  font-size: 28px;
}

h3, .h3 {
  font-size: 22px;
}

h4, .h4 {
  font-size: 16px;
}

h5, .h5 {
  font-size: 12px;
}

h6, .h6 {
  font-size: 10px;
}

#content-container {
  position: relative;
  padding-bottom: 80px;
  background-color: #ecf0f5;
}

#page-content {
  padding: 15px 15px 0;
}

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

.feed-card {
  background: #fff;
  border-radius: 0.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 1.5rem;
  transition: box-shadow 0.2s ease-in-out, filter 0.2s ease-in-out;
}
.feed-card:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
  filter: brightness(1.01);
}
.feed-card .feed-card-header {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #e9ecef;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.feed-card .feed-card-header .feed-user-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.feed-card .feed-card-header .feed-user-info .feed-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #e9ecef;
}
.feed-card .feed-card-header .feed-user-info .feed-user-details .feed-username {
  font-weight: 600;
  color: #212529;
  margin-bottom: 0.25rem;
}
.feed-card .feed-card-header .feed-user-info .feed-user-details .feed-username:hover {
  color: #0F75BD;
  text-decoration: none;
}
.feed-card .feed-card-header .feed-user-info .feed-user-details .feed-timestamp {
  font-size: 0.875rem;
  color: #6c757d;
}
.feed-card .feed-card-header .feed-actions .btn-feed-action {
  background: none;
  border: none;
  color: #6c757d;
  padding: 0.5rem;
  cursor: pointer;
  transition: color 0.2s;
}
.feed-card .feed-card-header .feed-actions .btn-feed-action:hover {
  color: #0F75BD;
}
.feed-card .feed-card-body {
  padding: 1.5rem;
}
.feed-card .feed-card-body .feed-content {
  color: #343a40;
  line-height: 1.6;
  margin-bottom: 1rem;
}
.feed-card .feed-card-body .feed-media {
  margin: 1rem -1.5rem;
}
.feed-card .feed-card-body .feed-media img, .feed-card .feed-card-body .feed-media video {
  width: 100%;
  height: auto;
}
.feed-card .feed-card-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid #e9ecef;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.feed-card .feed-card-footer .feed-stats {
  display: flex;
  gap: 1.5rem;
}
.feed-card .feed-card-footer .feed-stats .feed-stat-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #6c757d;
  font-size: 0.875rem;
  cursor: pointer;
  transition: color 0.2s;
}
.feed-card .feed-card-footer .feed-stats .feed-stat-item:hover {
  color: #F72C93;
}
.feed-card .feed-card-footer .feed-stats .feed-stat-item.active {
  color: #F72C93;
  font-weight: 600;
}
.feed-card .feed-card-footer .feed-stats .feed-stat-item i {
  font-size: 1.125rem;
}

.feed-sidebar .sidebar-section {
  background: #fff;
  border-radius: 0.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.feed-sidebar .sidebar-section .sidebar-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #212529;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.feed-sidebar .sidebar-section .sidebar-title .title-icon {
  color: #0F75BD;
  margin-right: 0.5rem;
}
.feed-sidebar .sidebar-section .sidebar-content .sidebar-item {
  padding: 0.75rem 0;
  border-bottom: 1px solid #f8f9fa;
}
.feed-sidebar .sidebar-section .sidebar-content .sidebar-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.feed-sidebar .sidebar-section .sidebar-content .sidebar-item a {
  color: #495057;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  transition: color 0.2s;
}
.feed-sidebar .sidebar-section .sidebar-content .sidebar-item a:hover {
  color: #0F75BD;
}
.feed-sidebar .sidebar-section .sidebar-content .sidebar-item a .item-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}
.feed-sidebar .sidebar-section .sidebar-content .sidebar-item a .item-text {
  flex: 1;
}
.feed-sidebar .sidebar-section .sidebar-content .sidebar-item a .item-text .item-title {
  font-weight: 500;
  margin-bottom: 0.25rem;
}
.feed-sidebar .sidebar-section .sidebar-content .sidebar-item a .item-text .item-subtitle {
  font-size: 0.875rem;
  color: #6c757d;
}

.feed-compose {
  background: #fff;
  border-radius: 0.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  margin-bottom: 2rem;
}
.feed-compose .compose-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.feed-compose .compose-header .compose-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #e9ecef;
}
.feed-compose .compose-header .compose-input {
  flex: 1;
}
.feed-compose .compose-header .compose-input textarea {
  width: 100%;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  padding: 0.75rem;
  resize: vertical;
  min-height: 80px;
  transition: border-color 0.2s;
}
.feed-compose .compose-header .compose-input textarea:focus {
  outline: none;
  border-color: #0F75BD;
}
.feed-compose .compose-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.feed-compose .compose-footer .compose-actions {
  display: flex;
  gap: 1rem;
}
.feed-compose .compose-footer .compose-actions .compose-action {
  background: none;
  border: none;
  color: #6c757d;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  border-radius: 0.375rem;
  transition: all 0.2s;
}
.feed-compose .compose-footer .compose-actions .compose-action:hover {
  background: #f8f9fa;
  color: #0F75BD;
}
.feed-compose .compose-footer .compose-actions .compose-action i {
  margin-right: 0.5rem;
}
.feed-compose .compose-footer .compose-submit .btn-primary {
  background: linear-gradient(135deg, #0F75BD 0%, #F72C93 100%);
  border: none;
  padding: 0.5rem 1.5rem;
  font-weight: 500;
}
.feed-compose .compose-footer .compose-submit .btn-primary:hover {
  filter: brightness(1.1);
  box-shadow: 0 4px 12px rgba(15, 117, 189, 0.35);
}

@media (max-width: 991.98px) {
  .feed-sidebar {
    margin-top: 2rem;
  }
}
@media (max-width: 575.98px) {
  .feed-container {
    padding: 1rem 0.5rem;
  }
  .feed-card {
    border-radius: 0;
    margin-bottom: 1rem;
  }
  .feed-card .feed-card-header {
    padding: 1rem;
  }
  .feed-card .feed-card-body {
    padding: 1rem;
  }
  .feed-card .feed-card-body .feed-media {
    margin: 1rem -1rem;
  }
  .feed-card .feed-card-footer {
    padding: 0.75rem 1rem;
  }
  .feed-card .feed-card-footer .feed-stats {
    gap: 1rem;
  }
  .feed-card .feed-card-footer .feed-stats .feed-stat-item {
    font-size: 0.8125rem;
  }
  .feed-compose {
    padding: 1rem;
  }
  .feed-compose .compose-footer {
    flex-direction: column;
    gap: 1rem;
  }
  .feed-compose .compose-footer .compose-actions {
    width: 100%;
    justify-content: space-between;
  }
  .feed-compose .compose-footer .compose-submit {
    width: 100%;
  }
  .feed-compose .compose-footer .compose-submit .btn-primary {
    width: 100%;
  }
}
.form-control {
  border: 1px solid #e7ecf3;
  border-radius: 3px;
  padding: 7px 12px;
  font-size: 13px;
  color: #758697;
  background-color: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-control:focus {
  border-color: #42a5f5;
  box-shadow: 0 0 0 2px rgba(66, 165, 245, 0.2);
  outline: none;
}
.form-control::-webkit-input-placeholder {
  color: #adb5bd;
}
.form-control::-moz-placeholder {
  color: #adb5bd;
}
.form-control:-ms-input-placeholder {
  color: #adb5bd;
}
.form-control:-moz-placeholder {
  color: #adb5bd;
}

.mb-3 label {
  font-weight: 500;
  color: #495057;
  margin-bottom: 0.5rem;
}

.btn {
  font-size: 13px;
  font-weight: 600;
  padding: 6px 12px;
  transition: all 0.2s ease;
}
.btn.btn-primary {
  background-color: #42a5f5;
  border-color: #42a5f5;
}
.btn.btn-primary:hover {
  background-color: #2196f3;
  border-color: #2196f3;
}

.btn-rounded {
  border-radius: 50px;
}

.btn-lg {
  padding: 10px 20px;
  font-size: 15px;
}

.btn-sm {
  padding: 4px 10px;
  font-size: 11px;
}

.btn-labeled {
  position: relative;
  padding-left: 3rem;
}
.btn-labeled .btn-label {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2.5rem;
  background: rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem 0 0 0.375rem;
}

.widget-box {
  background: #fff;
  border-radius: 30px;
  border: 1px solid #e7ecf3;
  border-bottom: 1px solid rgba(0, 0, 0, 0.17);
  padding: 20px;
  margin-bottom: 15px;
  transition: box-shadow 0.2s, filter 0.2s;
}
.widget-box:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  filter: brightness(1.01);
}
.widget-box .widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.widget-box .widget-header .widget-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #212529;
  margin: 0;
}
.widget-box .widget-header .widget-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0F75BD 0%, #F72C93 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.5rem;
}
.widget-box .widget-body .widget-value {
  font-size: 2rem;
  font-weight: 700;
  color: #0F75BD;
  margin-bottom: 0.5rem;
}
.widget-box .widget-body .widget-desc {
  color: #6c757d;
  font-size: 0.875rem;
}

.list-group-item {
  border: none;
  border-bottom: 1px solid #e9ecef;
  padding: 1rem 1.25rem;
}
.list-group-item:last-child {
  border-bottom: none;
}
.list-group-item:hover {
  background: #f8f9fa;
}
.list-group-item.active {
  background: linear-gradient(135deg, #0F75BD 0%, #F72C93 100%);
  color: #fff;
  border-color: transparent;
}

.dashboard-media {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.dashboard-media .dashboard-media-icon {
  flex-shrink: 0;
}
.dashboard-media .dashboard-media-body {
  flex: 1;
}
.dashboard-media .dashboard-media-body .dashboard-media-heading {
  font-weight: 600;
  color: #212529;
  margin-bottom: 0.25rem;
}
.dashboard-media .dashboard-media-body .dashboard-media-text {
  color: #6c757d;
  font-size: 0.875rem;
}

.alert {
  border: none;
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.alert.alert-primary {
  background: rgba(15, 117, 189, 0.1);
  color: rgb(11.25, 87.75, 141.75);
}
.alert.alert-success {
  background: rgba(40, 167, 69, 0.1);
  color: rgb(30.1449275362, 125.8550724638, 52);
}
.alert.alert-warning {
  background: rgba(255, 193, 7, 0.1);
  color: rgb(211, 158.25, 0);
}
.alert.alert-danger {
  background: rgba(220, 53, 69, 0.1);
  color: rgb(189.2151898734, 32.7848101266, 47.7721518987);
}

.match-panel {
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  transition: box-shadow 0.3s ease, filter 0.3s ease;
}
.match-panel:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  filter: brightness(1.01);
}
.match-panel .match-panel-body {
  padding: 24px;
}
.match-panel .match-panel-container {
  display: flex;
  align-items: center;
  gap: 20px;
}
@media (max-width: 768px) {
  .match-panel .match-panel-container {
    flex-direction: column;
    text-align: center;
  }
}
.match-panel .match-panel-left {
  flex: 0 0 auto;
}
.match-panel .match-panel-right {
  flex: 1;
  text-align: left;
}
@media (max-width: 768px) {
  .match-panel .match-panel-right {
    text-align: center;
  }
}

.match-profile-image {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #0F75BD;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.match-profile-image:hover {
  border-color: #F72C93;
  box-shadow: 0 4px 16px rgba(247, 44, 147, 0.35);
}
@media (max-width: 768px) {
  .match-profile-image {
    width: 150px;
    height: 150px;
  }
}
@media (max-width: 480px) {
  .match-profile-image {
    width: 120px;
    height: 120px;
  }
}

.match-info {
  color: #212529;
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.match-location {
  color: #6c757d;
  font-size: 0.95rem;
  margin-bottom: 16px;
}

.match-data {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 16px 0;
}

.data-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 20px;
  padding: 8px 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease, filter 0.3s ease;
}
.data-pill:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  filter: brightness(1.02);
}
.data-pill img {
  width: 20px;
  height: 20px;
}
.data-pill .score {
  font-weight: 600;
  font-size: 0.9rem;
}
.data-pill .score.dna-score {
  color: #F72C93;
}
.data-pill .score.personality-score {
  color: #0F75BD;
}
.data-pill .score.personality-type {
  color: #A466ED;
  text-transform: uppercase;
}

.match-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 20px;
}
@media (max-width: 768px) {
  .match-actions {
    gap: 20px;
  }
}
@media (max-width: 480px) {
  .match-actions {
    gap: 12px;
  }
}

.match-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid #dee2e6;
  background: #fff;
  transition: box-shadow 0.3s ease, filter 0.3s ease, background 0.3s ease;
  cursor: pointer;
  position: relative;
}
.match-action a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
.match-action a i {
  pointer-events: none;
  font-size: 20px;
}
.match-action:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  filter: brightness(1.05);
}
.match-action.match-action-dislike a {
  color: #dc3545;
}
.match-action.match-action-dislike {
  border-color: #dc3545;
}
.match-action.match-action-dislike:hover {
  background: #dc3545;
  border-color: #dc3545;
}
.match-action.match-action-dislike:hover a {
  color: #fff;
}
.match-action.match-action-maybe a {
  color: #ffc107;
}
.match-action.match-action-maybe {
  border-color: #ffc107;
}
.match-action.match-action-maybe:hover {
  background: #ffc107;
  border-color: #ffc107;
}
.match-action.match-action-maybe:hover a {
  color: #fff;
}
.match-action.match-action-like a {
  color: #28a745;
}
.match-action.match-action-like {
  border-color: #28a745;
}
.match-action.match-action-like:hover {
  background: #28a745;
  border-color: #28a745;
}
.match-action.match-action-like:hover a {
  color: #fff;
}
.match-action.match-action-message a {
  color: #0F75BD;
}
.match-action.match-action-message {
  border-color: #0F75BD;
}
.match-action.match-action-message:hover {
  background: #0F75BD;
  border-color: #0F75BD;
}
.match-action.match-action-message:hover a {
  color: #fff;
}
.match-action img {
  width: 24px;
  height: 24px;
  transition: filter 0.3s ease;
}
.match-action:hover img {
  filter: brightness(0) invert(1);
}
@media (max-width: 768px) {
  .match-action {
    width: 52px;
    height: 52px;
  }
}
@media (max-width: 480px) {
  .match-action {
    width: 44px;
    height: 44px;
  }
  .match-action img {
    width: 20px;
    height: 20px;
  }
}

.match-action .tooltiptext {
  visibility: hidden;
  position: absolute;
  z-index: 1000;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  background: #212529;
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.8rem;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.match-action .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #212529;
}

.match-action:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

.show-more-matches {
  display: block;
  width: 100%;
  max-width: 300px;
  margin: 30px auto;
  padding: 12px 24px;
  background: linear-gradient(135deg, #0F75BD 0%, #F72C93 100%);
  color: #fff;
  border: none;
  border-radius: 25px;
  font-size: 1rem;
  font-weight: 600;
  transition: box-shadow 0.3s ease, filter 0.3s ease;
  cursor: pointer;
}
.show-more-matches:hover {
  filter: brightness(1.1);
  box-shadow: 0 6px 16px rgba(15, 117, 189, 0.35);
  color: #fff;
}

.safety-compliance-container {
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 12px;
  padding: 32px;
  margin: 20px 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.safety-compliance-container h2 {
  color: #212529;
  margin-bottom: 24px;
}
.safety-compliance-container p {
  color: #495057;
  line-height: 1.6;
  margin-bottom: 16px;
}
.safety-compliance-container .btn-primary {
  background: linear-gradient(135deg, #0F75BD 0%, #F72C93 100%);
  border: none;
  border-radius: 25px;
  padding: 12px 32px;
  font-weight: 600;
  transition: box-shadow 0.3s ease, filter 0.3s ease;
}
.safety-compliance-container .btn-primary:hover {
  filter: brightness(1.1);
  box-shadow: 0 6px 16px rgba(15, 117, 189, 0.35);
}

.scroll-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #0F75BD 0%, #F72C93 100%);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: box-shadow 0.3s ease, filter 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  z-index: 1000;
}
.scroll-top:hover {
  filter: brightness(1.1);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}
.scroll-top.show {
  opacity: 1;
  visibility: visible;
}

.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}
.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.mega-dropdown {
  position: relative;
}
.mega-dropdown .mega-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #e7ecf3;
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  padding: 20px;
  margin-top: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  z-index: 1000;
}
.mega-dropdown.open .mega-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.mega-dropdown.open .mega-dropdown-toggle {
  color: #0F75BD;
}

.toast {
  min-width: 300px;
}
.toast.bg-success {
  background: #28a745 !important;
}
.toast.bg-info {
  background: #17a2b8 !important;
}
.toast.bg-warning {
  background: #ffc107 !important;
  color: #212529 !important;
}
.toast.bg-warning .btn-close {
  filter: invert(1);
}
.toast.bg-danger {
  background: #dc3545 !important;
}

.loading {
  position: relative;
  pointer-events: none;
  opacity: 0.6;
}
.loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid #0F75BD;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-color-scheme: dark) {
  .feed-card,
  .feed-sidebar .sidebar-section,
  .feed-compose,
  .widget-box {
    background: #343a40;
    color: #f8f9fa;
  }
  .feed-card .feed-card-header,
  .feed-card .feed-card-footer,
  .feed-sidebar .sidebar-section .feed-card-header,
  .feed-sidebar .sidebar-section .feed-card-footer,
  .feed-compose .feed-card-header,
  .feed-compose .feed-card-footer,
  .widget-box .feed-card-header,
  .widget-box .feed-card-footer {
    border-color: #495057;
  }
  .feed-card .feed-user-details .feed-username,
  .feed-card .sidebar-title,
  .feed-sidebar .sidebar-section .feed-user-details .feed-username,
  .feed-sidebar .sidebar-section .sidebar-title,
  .feed-compose .feed-user-details .feed-username,
  .feed-compose .sidebar-title,
  .widget-box .feed-user-details .feed-username,
  .widget-box .sidebar-title {
    color: #f8f9fa;
  }
  .feed-card .feed-timestamp,
  .feed-card .feed-stat-item,
  .feed-card .sidebar-item a,
  .feed-sidebar .sidebar-section .feed-timestamp,
  .feed-sidebar .sidebar-section .feed-stat-item,
  .feed-sidebar .sidebar-section .sidebar-item a,
  .feed-compose .feed-timestamp,
  .feed-compose .feed-stat-item,
  .feed-compose .sidebar-item a,
  .widget-box .feed-timestamp,
  .widget-box .feed-stat-item,
  .widget-box .sidebar-item a {
    color: #ced4da;
  }
  .feed-card .compose-input textarea,
  .feed-sidebar .sidebar-section .compose-input textarea,
  .feed-compose .compose-input textarea,
  .widget-box .compose-input textarea {
    background: #495057;
    border-color: #6c757d;
    color: #f8f9fa;
  }
  .feed-card .compose-input textarea:focus,
  .feed-sidebar .sidebar-section .compose-input textarea:focus,
  .feed-compose .compose-input textarea:focus,
  .widget-box .compose-input textarea:focus {
    border-color: #0F75BD;
  }
}
[data-bs-theme=dark] .feed-card,
[data-bs-theme=dark] .feed-sidebar .sidebar-section,
[data-bs-theme=dark] .feed-compose,
[data-bs-theme=dark] .widget-box {
  background: #343a40;
  color: #f8f9fa;
}
[data-bs-theme=dark] .feed-card .feed-card-header,
[data-bs-theme=dark] .feed-card .feed-card-footer,
[data-bs-theme=dark] .feed-sidebar .sidebar-section .feed-card-header,
[data-bs-theme=dark] .feed-sidebar .sidebar-section .feed-card-footer,
[data-bs-theme=dark] .feed-compose .feed-card-header,
[data-bs-theme=dark] .feed-compose .feed-card-footer,
[data-bs-theme=dark] .widget-box .feed-card-header,
[data-bs-theme=dark] .widget-box .feed-card-footer {
  border-color: #495057;
}
[data-bs-theme=dark] .feed-card .feed-user-details .feed-username,
[data-bs-theme=dark] .feed-card .sidebar-title,
[data-bs-theme=dark] .feed-sidebar .sidebar-section .feed-user-details .feed-username,
[data-bs-theme=dark] .feed-sidebar .sidebar-section .sidebar-title,
[data-bs-theme=dark] .feed-compose .feed-user-details .feed-username,
[data-bs-theme=dark] .feed-compose .sidebar-title,
[data-bs-theme=dark] .widget-box .feed-user-details .feed-username,
[data-bs-theme=dark] .widget-box .sidebar-title {
  color: #f8f9fa;
}
[data-bs-theme=dark] .feed-card .feed-timestamp,
[data-bs-theme=dark] .feed-card .feed-stat-item,
[data-bs-theme=dark] .feed-card .sidebar-item a,
[data-bs-theme=dark] .feed-sidebar .sidebar-section .feed-timestamp,
[data-bs-theme=dark] .feed-sidebar .sidebar-section .feed-stat-item,
[data-bs-theme=dark] .feed-sidebar .sidebar-section .sidebar-item a,
[data-bs-theme=dark] .feed-compose .feed-timestamp,
[data-bs-theme=dark] .feed-compose .feed-stat-item,
[data-bs-theme=dark] .feed-compose .sidebar-item a,
[data-bs-theme=dark] .widget-box .feed-timestamp,
[data-bs-theme=dark] .widget-box .feed-stat-item,
[data-bs-theme=dark] .widget-box .sidebar-item a {
  color: #ced4da;
}
[data-bs-theme=dark] .feed-card .compose-input textarea,
[data-bs-theme=dark] .feed-sidebar .sidebar-section .compose-input textarea,
[data-bs-theme=dark] .feed-compose .compose-input textarea,
[data-bs-theme=dark] .widget-box .compose-input textarea {
  background: #495057;
  border-color: #6c757d;
  color: #f8f9fa;
}
[data-bs-theme=dark] .feed-card .compose-input textarea:focus,
[data-bs-theme=dark] .feed-sidebar .sidebar-section .compose-input textarea:focus,
[data-bs-theme=dark] .feed-compose .compose-input textarea:focus,
[data-bs-theme=dark] .widget-box .compose-input textarea:focus {
  border-color: #0F75BD;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.navbar {
  background: #ffffff;
  backdrop-filter: none;
  border: none;
  border-bottom: 1px solid #e9ecef;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.navbar .navbar-brand img {
  height: 45px;
  width: auto;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}
.navbar .navbar-nav > li > a {
  color: #495057 !important;
  font-weight: 500;
  transition: all 0.3s ease;
}
.navbar .navbar-nav > li > a:hover {
  background-color: transparent;
  color: var(--brand-primary, #007bff) !important;
  transform: none;
}

.hero-modern {
  position: relative;
  min-height: 600px;
  overflow: hidden;
}
.hero-modern::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
  z-index: 1;
}
.hero-modern .hero-modern__content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #fff;
}
.hero-modern .hero-modern__content h1 {
  font-size: 3.5rem;
  font-weight: 700;
  margin-bottom: 20px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
@media (max-width: 768px) {
  .hero-modern .hero-modern__content h1 {
    font-size: 2.5rem;
  }
}
.hero-modern .hero-modern__content p {
  font-size: 1.25rem;
  margin-bottom: 30px;
  opacity: 0.95;
}

.btn-primary {
  background: linear-gradient(135deg, #0f75bd 0%, #f72c93 100%);
  border: none;
  padding: 12px 30px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(247, 44, 147, 0.3);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(247, 44, 147, 0.4);
  background: linear-gradient(135deg, rgb(11.25, 87.75, 141.75) 0%, rgb(231.2328767123, 8.7671232877, 121.6438356164) 100%);
}
.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(247, 44, 147, 0.3);
}

.btn-secondary {
  background: transparent;
  border: 2px solid #fff;
  color: #fff;
  padding: 10px 28px;
  font-weight: 600;
  transition: all 0.3s ease;
}
.btn-secondary:hover {
  background: #fff;
  color: #f72c93;
  transform: translateY(-2px);
}

.card {
  border: none;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  overflow: hidden;
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
.card .card-header {
  background: linear-gradient(135deg, #0f75bd 0%, #f72c93 100%);
  color: #fff;
  border: none;
  padding: 20px;
  font-weight: 600;
}
.card .card-body {
  padding: 30px;
}

.form-control {
  border: 2px solid #e8e8e8;
  border-radius: 8px;
  padding: 12px 15px;
  transition: all 0.3s ease;
  font-size: 16px;
}
.form-control:focus {
  border-color: #f72c93;
  box-shadow: 0 0 0 0.2rem rgba(247, 44, 147, 0.1);
}

.form-label {
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

.match-panels {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08);
  margin-bottom: 20px;
  transition: all 0.3s ease;
}
.match-panels:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}
.match-panels .card-body {
  padding: 25px;
}

.profile-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}
.profile-card:hover {
  transform: scale(1.02);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
.profile-card:hover .profile-overlay {
  opacity: 1;
}
.profile-card .profile-image {
  width: 100%;
  height: 300px;
  object-fit: cover;
}
.profile-card .profile-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
  color: #fff;
  padding: 20px;
  opacity: 0.9;
  transition: opacity 0.3s ease;
}
.profile-card .profile-name {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 5px;
}
.profile-card .profile-age {
  font-size: 1.1rem;
  opacity: 0.9;
}

.heart-icon {
  color: #f72c93;
  transition: all 0.3s ease;
  cursor: pointer;
}
.heart-icon:hover {
  transform: scale(1.2);
  color: rgb(231.2328767123, 8.7671232877, 121.6438356164);
}
.heart-icon.animated {
  animation: heartbeat 0.8s ease-in-out;
}

@keyframes heartbeat {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }
}
.filters-popup {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  padding: 25px;
  position: absolute;
  top: 60px;
  right: 0;
  z-index: 1000;
  min-width: 300px;
}
.filters-popup::before {
  content: "";
  position: absolute;
  top: -8px;
  right: 20px;
  width: 16px;
  height: 16px;
  background: #fff;
  transform: rotate(45deg);
  box-shadow: -3px -3px 5px rgba(0, 0, 0, 0.05);
}

.loading-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@media (max-width: 768px) {
  .navbar-collapse {
    background: rgba(5, 5, 5, 0.95);
    backdrop-filter: blur(10px);
    padding: 20px;
    border-radius: 12px;
    margin-top: 10px;
  }
  .hero-modern h1 {
    font-size: 2rem;
  }
  .btn-primary {
    padding: 10px 20px;
    font-size: 14px;
  }
}
.gradient-text {
  background: linear-gradient(135deg, #0f75bd 0%, #f72c93 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

.shadow-soft {
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

.transition-all {
  transition: all 0.3s ease;
}

/* Fluid Typography System - Claude 3.5 Sonnet */
:root {
  /* Base font sizes using clamp() for fluid scaling */
  --font-size-xs: clamp(0.75rem, 0.5vw + 0.65rem, 0.875rem);
  --font-size-sm: clamp(0.875rem, 0.5vw + 0.775rem, 1rem);
  --font-size-base: clamp(1rem, 1vw + 0.75rem, 1.125rem);
  --font-size-lg: clamp(1.125rem, 1.5vw + 0.75rem, 1.375rem);
  --font-size-xl: clamp(1.25rem, 2vw + 0.75rem, 1.75rem);
  --font-size-2xl: clamp(1.5rem, 3vw + 0.75rem, 2.25rem);
  --font-size-3xl: clamp(1.875rem, 4vw + 0.75rem, 3rem);
  /* Consistent spacing scale */
  --spacing-xs: clamp(0.25rem, 0.5vw + 0.125rem, 0.5rem);
  --spacing-sm: clamp(0.5rem, 1vw + 0.25rem, 0.75rem);
  --spacing-md: clamp(0.75rem, 1.5vw + 0.375rem, 1.25rem);
  --spacing-lg: clamp(1rem, 2vw + 0.5rem, 1.75rem);
  --spacing-xl: clamp(1.5rem, 3vw + 0.75rem, 2.5rem);
  --spacing-2xl: clamp(2rem, 4vw + 1rem, 3.5rem);
}

/* Apply fluid typography to headings */
h1, .h1 {
  font-size: var(--font-size-3xl);
  line-height: 1.2;
  margin-bottom: var(--spacing-lg);
}

h2, .h2 {
  font-size: var(--font-size-2xl);
  line-height: 1.3;
  margin-bottom: var(--spacing-md);
}

h3, .h3 {
  font-size: var(--font-size-xl);
  line-height: 1.4;
  margin-bottom: var(--spacing-md);
}

/* Body text with improved readability */
body, .body-text {
  font-size: var(--font-size-base);
  line-height: 1.6;
}

/* Consistent button sizing */
.btn {
  font-size: var(--font-size-sm);
  padding: var(--spacing-sm) var(--spacing-md);
}

.btn-lg {
  font-size: var(--font-size-base);
  padding: var(--spacing-md) var(--spacing-lg);
}

/* Micro-interactions - Claude 3.5 Sonnet */
/* Enhanced button interactions */
.btn {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateY(0);
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn:active {
  transform: translateY(0);
  transition-duration: 0.1s;
}

/* Form field interactions */
.form-control, .form-select {
  transition: all 0.2s ease;
  border-width: 1px;
}

.form-control:focus, .form-select:focus {
  transform: scale(1.01);
  box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.1);
}

/* Card hover effects */
.card {
  transition: all 0.3s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* Loading state improvements */
@keyframes pulse-glow {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}
.loading-pulse {
  animation: pulse-glow 1.5s ease-in-out infinite;
}

/* Success state animations */
@keyframes success-bounce {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}
.success-bounce {
  animation: success-bounce 0.6s ease-in-out;
}

/* Enhanced Color Contrast - Claude 3.5 Sonnet AAA Compliance */
/* Secondary text improvements */
.text-muted, .form-text, .small {
  color: #495057 !important; /* Improved from typical #6c757d */
}

/* Placeholder text improvements */
.form-control::placeholder {
  color: #495057;
  opacity: 0.8;
}

/* Disabled state improvements */
.form-control:disabled,
.form-control[readonly] {
  background-color: #f8f9fa;
  border-color: #6c757d;
  color: #495057;
  opacity: 1;
}

/* Link contrast improvements */
.text-secondary {
  color: #374151 !important;
}

/* Button secondary state improvements */
.btn-outline-secondary {
  color: #495057;
  border-color: #495057;
}

.btn-outline-secondary:hover {
  color: #fff;
  background-color: #495057;
  border-color: #495057;
}

/* Enhanced form validation styles */
.positive-feedback {
  color: #198754;
  font-size: 0.875rem;
  margin-top: 0.25rem;
  display: flex;
  align-items: center;
}

.positive-feedback::before {
  content: "✓";
  margin-right: 0.25rem;
  font-weight: bold;
}

.enhanced-feedback {
  animation: fadeInUp 0.3s ease;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Password strength indicator styles */
.password-strength-container {
  margin-top: 0.5rem;
}

.password-strength-bar {
  height: 4px;
  background-color: #e9ecef;
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 0.25rem;
}

.password-strength-fill {
  height: 100%;
  transition: all 0.3s ease;
  border-radius: 2px;
}

.password-strength-fill.strength-0 {
  background-color: #dc3545;
  width: 25%;
}

.password-strength-fill.strength-1 {
  background-color: #fd7e14;
  width: 50%;
}

.password-strength-fill.strength-2 {
  background-color: #ffc107;
  width: 75%;
}

.password-strength-fill.strength-3 {
  background-color: #198754;
  width: 100%;
}

.password-strength-text {
  font-size: 0.75rem;
  color: #595959;
}

.dropdown-menu {
  position: absolute !important;
  top: 100% !important;
  left: 0;
  right: auto;
  margin-top: 0.125rem;
  z-index: 1050;
  transform: none !important;
  min-width: 10rem;
}
.dropdown-menu.show {
  display: block;
}

.navbar-nav .dropdown {
  position: relative;
}
.navbar-nav .dropdown .dropdown-toggle::after {
  vertical-align: middle;
  margin-left: 0.255em;
}
.navbar-nav .dropdown-menu {
  margin: 0;
  padding: 0.5rem 0;
}
.navbar-nav .dropdown-menu .dropdown-item {
  padding: 0.5rem 1.5rem;
  clear: both;
  font-weight: 400;
  text-align: inherit;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
}
.navbar-nav .dropdown-menu .dropdown-item:hover, .navbar-nav .dropdown-menu .dropdown-item:focus {
  background-color: #f8f9fa;
  text-decoration: none;
}

.nav-language-dropdown .dropdown-menu {
  min-width: 200px;
  max-height: 300px;
  overflow-y: auto;
}

section h1, section h2, section h3, section h4, section h5, section h6,
.section h1,
.section h2,
.section h3,
.section h4,
.section h5,
.section h6,
[class*=section-] h1,
[class*=section-] h2,
[class*=section-] h3,
[class*=section-] h4,
[class*=section-] h5,
[class*=section-] h6 {
  text-align: center;
  margin-bottom: 1.5rem;
}
section p,
.section p,
[class*=section-] p {
  text-align: left;
  line-height: 1.6;
  margin-bottom: 1rem;
}
section .text-center,
.section .text-center,
[class*=section-] .text-center {
  text-align: center !important;
}
section .text-center p,
.section .text-center p,
[class*=section-] .text-center p {
  text-align: center !important;
}
section.banner3 .banner3-content h1, section.banner3 .banner3-content h2, section.banner3 .banner3-content h3,
section.banner3 .hero-content h1,
section.banner3 .hero-content h2,
section.banner3 .hero-content h3, section.banner3-datemetrix .banner3-content h1, section.banner3-datemetrix .banner3-content h2, section.banner3-datemetrix .banner3-content h3,
section.banner3-datemetrix .hero-content h1,
section.banner3-datemetrix .hero-content h2,
section.banner3-datemetrix .hero-content h3, section.hero-section .banner3-content h1, section.hero-section .banner3-content h2, section.hero-section .banner3-content h3,
section.hero-section .hero-content h1,
section.hero-section .hero-content h2,
section.hero-section .hero-content h3,
.section.banner3 .banner3-content h1,
.section.banner3 .banner3-content h2,
.section.banner3 .banner3-content h3,
.section.banner3 .hero-content h1,
.section.banner3 .hero-content h2,
.section.banner3 .hero-content h3,
.section.banner3-datemetrix .banner3-content h1,
.section.banner3-datemetrix .banner3-content h2,
.section.banner3-datemetrix .banner3-content h3,
.section.banner3-datemetrix .hero-content h1,
.section.banner3-datemetrix .hero-content h2,
.section.banner3-datemetrix .hero-content h3,
.section.hero-section .banner3-content h1,
.section.hero-section .banner3-content h2,
.section.hero-section .banner3-content h3,
.section.hero-section .hero-content h1,
.section.hero-section .hero-content h2,
.section.hero-section .hero-content h3,
[class*=section-].banner3 .banner3-content h1,
[class*=section-].banner3 .banner3-content h2,
[class*=section-].banner3 .banner3-content h3,
[class*=section-].banner3 .hero-content h1,
[class*=section-].banner3 .hero-content h2,
[class*=section-].banner3 .hero-content h3,
[class*=section-].banner3-datemetrix .banner3-content h1,
[class*=section-].banner3-datemetrix .banner3-content h2,
[class*=section-].banner3-datemetrix .banner3-content h3,
[class*=section-].banner3-datemetrix .hero-content h1,
[class*=section-].banner3-datemetrix .hero-content h2,
[class*=section-].banner3-datemetrix .hero-content h3,
[class*=section-].hero-section .banner3-content h1,
[class*=section-].hero-section .banner3-content h2,
[class*=section-].hero-section .banner3-content h3,
[class*=section-].hero-section .hero-content h1,
[class*=section-].hero-section .hero-content h2,
[class*=section-].hero-section .hero-content h3 {
  text-align: center;
}
section.banner3 .banner3-content p.lead,
section.banner3 .banner3-content p.hero-text,
section.banner3 .hero-content p.lead,
section.banner3 .hero-content p.hero-text, section.banner3-datemetrix .banner3-content p.lead,
section.banner3-datemetrix .banner3-content p.hero-text,
section.banner3-datemetrix .hero-content p.lead,
section.banner3-datemetrix .hero-content p.hero-text, section.hero-section .banner3-content p.lead,
section.hero-section .banner3-content p.hero-text,
section.hero-section .hero-content p.lead,
section.hero-section .hero-content p.hero-text,
.section.banner3 .banner3-content p.lead,
.section.banner3 .banner3-content p.hero-text,
.section.banner3 .hero-content p.lead,
.section.banner3 .hero-content p.hero-text,
.section.banner3-datemetrix .banner3-content p.lead,
.section.banner3-datemetrix .banner3-content p.hero-text,
.section.banner3-datemetrix .hero-content p.lead,
.section.banner3-datemetrix .hero-content p.hero-text,
.section.hero-section .banner3-content p.lead,
.section.hero-section .banner3-content p.hero-text,
.section.hero-section .hero-content p.lead,
.section.hero-section .hero-content p.hero-text,
[class*=section-].banner3 .banner3-content p.lead,
[class*=section-].banner3 .banner3-content p.hero-text,
[class*=section-].banner3 .hero-content p.lead,
[class*=section-].banner3 .hero-content p.hero-text,
[class*=section-].banner3-datemetrix .banner3-content p.lead,
[class*=section-].banner3-datemetrix .banner3-content p.hero-text,
[class*=section-].banner3-datemetrix .hero-content p.lead,
[class*=section-].banner3-datemetrix .hero-content p.hero-text,
[class*=section-].hero-section .banner3-content p.lead,
[class*=section-].hero-section .banner3-content p.hero-text,
[class*=section-].hero-section .hero-content p.lead,
[class*=section-].hero-section .hero-content p.hero-text {
  text-align: center;
}

.content-section p,
.main-content p {
  text-align: left;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 991px) {
  .navbar-nav .dropdown-menu {
    position: static !important;
    float: none;
    width: 100%;
    margin-top: 0;
    background-color: transparent;
    border: 0;
    box-shadow: none;
  }
  .navbar-nav .dropdown-menu .dropdown-item {
    padding-left: 2rem;
  }
}
.datemetrix .personality-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}
.datemetrix .personality-grid .personality-card {
  text-align: center;
}
.datemetrix .personality-grid .personality-card p {
  text-align: center;
}
.datemetrix .questionnaire-section h2, .datemetrix .questionnaire-section h3 {
  text-align: center;
}
.datemetrix .questionnaire-section .question-text {
  text-align: left;
}
.datemetrix .questionnaire-section .answer-options {
  text-align: left;
}

/**
 * ENTERPRISE DESIGN SYSTEM - BILLION-USER SCALE
 * World-class UX/UI standards for multi-platform consistency
 * WCAG 2.1 AA compliant | Accessibility-first | Performance-optimized
 */
/* ==========================================================================
   DESIGN TOKENS - ENTERPRISE FOUNDATION
   ========================================================================== */
:root {
  /* Color System - WCAG 2.1 AA Compliant */
  --enterprise-white: #ffffff;
  --enterprise-black: #000000;
  --enterprise-gray-50: #f9fafb;
  --enterprise-gray-100: #f3f4f6;
  --enterprise-gray-200: #e5e7eb;
  --enterprise-gray-300: #d1d5db;
  --enterprise-gray-400: #9ca3af;
  --enterprise-gray-500: #6b7280;
  --enterprise-gray-600: #4b5563;
  --enterprise-gray-700: #374151;
  --enterprise-gray-800: #1f2937;
  --enterprise-gray-900: #111827;
  /* Brand Colors - High Contrast Variants */
  --dna-romance-primary: #000525;
  --dna-romance-primary-light: #1e293b;
  --dna-romance-accent: #3b82f6;
  --dna-romance-accent-light: #60a5fa;
  --datemetrix-primary: #4c1d95; /* Enhanced from #6a1b9a */
  --datemetrix-primary-light: #6d28d9;
  --datemetrix-accent: #f59e0b;
  --datemetrix-accent-light: #fbbf24;
  --genepool-primary: #1e40af; /* Enhanced from #2E86AB */
  --genepool-primary-light: #3b82f6;
  --genepool-accent: #10b981;
  --genepool-accent-light: #34d399;
  --wellmatched-primary: #059669; /* Enhanced from #27AE60 */
  --wellmatched-primary-light: #10b981;
  --wellmatched-accent: #dc2626;
  --wellmatched-accent-light: #ef4444;
  --generecovery-primary: #1d4ed8; /* Enhanced from #3498DB */
  --generecovery-primary-light: #3b82f6;
  --generecovery-accent: #7c3aed;
  --generecovery-accent-light: #8b5cf6;
  --heritablehealth-primary: #dc2626; /* Enhanced from #E74C3C */
  --heritablehealth-primary-light: #ef4444;
  --heritablehealth-accent: #059669;
  --heritablehealth-accent-light: #10b981;
  /* Semantic Colors - WCAG AA Compliant */
  --color-success: #059669;
  --color-warning: #d97706;
  --color-error: #dc2626;
  --color-info: #2563eb;
  --color-success-light: #dcfdf7;
  --color-warning-light: #fef3c7;
  --color-error-light: #fee2e2;
  --color-info-light: #dbeafe;
  /* Typography Scale */
  --font-size-xs: 0.75rem; /* 12px */
  --font-size-sm: 0.875rem; /* 14px */
  --font-size-base: 1rem; /* 16px - Minimum for accessibility */
  --font-size-lg: 1.125rem; /* 18px */
  --font-size-xl: 1.25rem; /* 20px */
  --font-size-2xl: 1.5rem; /* 24px */
  --font-size-3xl: 1.875rem; /* 30px */
  --font-size-4xl: 2.25rem; /* 36px */
  --font-size-5xl: 3rem; /* 48px */
  /* Line Heights - Optimized for readability */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose: 2;
  /* Font Weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  /* Spacing Scale - 8px base unit */
  --space-0: 0;
  --space-1: 0.25rem; /* 4px */
  --space-2: 0.5rem; /* 8px */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem; /* 16px */
  --space-5: 1.25rem; /* 20px */
  --space-6: 1.5rem; /* 24px */
  --space-8: 2rem; /* 32px */
  --space-10: 2.5rem; /* 40px */
  --space-12: 3rem; /* 48px */
  --space-16: 4rem; /* 64px */
  --space-20: 5rem; /* 80px */
  --space-24: 6rem; /* 96px */
  /* Border Radius */
  --radius-none: 0;
  --radius-sm: 0.125rem;
  --radius-base: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-full: 9999px;
  /* Shadows - Subtle and performance optimized */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  /* Z-Index Scale */
  --z-index-dropdown: 1000;
  --z-index-sticky: 1010;
  --z-index-fixed: 1020;
  --z-index-modal-backdrop: 1030;
  --z-index-modal: 1040;
  --z-index-popover: 1050;
  --z-index-tooltip: 1060;
  /* Transitions - Consistent timing */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;
  --transition-all: all var(--transition-base);
  /* Touch Targets - Mobile accessibility */
  --touch-target-min: 44px;
  --touch-target-comfortable: 48px;
}

/* ==========================================================================
   ACCESSIBILITY ENHANCEMENTS
   ========================================================================== */
/* Skip Navigation Link */
.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  z-index: var(--z-index-modal);
  padding: var(--space-2) var(--space-4);
  background-color: var(--enterprise-black);
  color: var(--enterprise-white);
  text-decoration: none;
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-semibold);
  transition: var(--transition-base);
}
.skip-link:focus {
  top: 6px;
  outline: 3px solid var(--color-info);
  outline-offset: 2px;
}

/* Focus Indicators - Visible and consistent */
*:focus-visible {
  outline: 2px solid var(--color-info);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Reduce Motion for Accessibility */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
/* ==========================================================================
   ENTERPRISE BUTTON SYSTEM
   ========================================================================== */
.btn {
  /* Base button styles */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  /* Sizing and spacing */
  min-height: var(--touch-target-min);
  padding: var(--space-3) var(--space-6);
  /* Typography */
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  /* Visual styling */
  border: 2px solid transparent;
  border-radius: var(--radius-lg);
  cursor: pointer;
  user-select: none;
  /* Transitions */
  transition: all var(--transition-base);
  transform-origin: center;
  /* States */
}
.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
}
.btn:not(:disabled):hover {
  filter: brightness(1.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.btn:not(:disabled):active {
  filter: brightness(0.95);
}
.btn {
  /* Loading state */
}
.btn.btn-loading {
  position: relative;
  color: transparent !important;
}
.btn.btn-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-radius: var(--radius-full);
  animation: spin 1s linear infinite;
}

/* Size Variations */
.btn-sm {
  min-height: 36px;
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-sm);
}

.btn-lg {
  min-height: var(--touch-target-comfortable);
  padding: var(--space-4) var(--space-8);
  font-size: var(--font-size-lg);
}

.btn-xl {
  min-height: 56px;
  padding: var(--space-5) var(--space-10);
  font-size: var(--font-size-xl);
}

/* Button Variants */
.btn-primary {
  background-color: var(--brand-primary);
  color: var(--enterprise-white);
  border-color: var(--brand-primary);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover:not(:disabled) {
  background-color: var(--brand-primary-light);
  border-color: var(--brand-primary-light);
  box-shadow: var(--shadow-md);
}
.btn-primary:focus-visible {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

.btn-secondary {
  background-color: var(--enterprise-white);
  color: var(--brand-primary);
  border-color: var(--brand-primary);
}
.btn-secondary:hover:not(:disabled) {
  background-color: var(--brand-primary);
  color: var(--enterprise-white);
}

.btn-accent {
  background-color: var(--color-accent);
  color: var(--enterprise-white);
  border-color: var(--color-accent);
  box-shadow: var(--shadow-sm);
}
.btn-accent:hover:not(:disabled) {
  background-color: var(--color-accent-light);
  border-color: var(--color-accent-light);
  box-shadow: var(--shadow-md);
}

.btn-outline {
  background-color: transparent;
  color: var(--brand-primary);
  border-color: var(--brand-primary);
}
.btn-outline:hover:not(:disabled) {
  background-color: var(--brand-primary);
  color: var(--enterprise-white);
}

.btn-ghost {
  background-color: transparent;
  color: var(--brand-primary);
  border-color: transparent;
}
.btn-ghost:hover:not(:disabled) {
  background-color: rgba(59, 130, 246, 0.1);
}

.btn-danger {
  background-color: var(--color-error);
  color: var(--enterprise-white);
  border-color: var(--color-error);
}
.btn-danger:hover:not(:disabled) {
  background-color: #b91c1c;
  border-color: #b91c1c;
}

/* Success and Warning variants */
.btn-success {
  background-color: var(--color-success);
  color: var(--enterprise-white);
  border-color: var(--color-success);
}
.btn-success:hover:not(:disabled) {
  background-color: #047857;
  border-color: #047857;
}

.btn-warning {
  background-color: var(--color-warning);
  color: var(--enterprise-white);
  border-color: var(--color-warning);
}
.btn-warning:hover:not(:disabled) {
  background-color: #b45309;
  border-color: #b45309;
}

/* Full width button */
.btn-block {
  width: 100%;
}

/* ==========================================================================
   ENHANCED FORM CONTROLS
   ========================================================================== */
.form-control {
  display: block;
  width: 100%;
  min-height: var(--touch-target-min);
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--enterprise-gray-900);
  background-color: var(--enterprise-white);
  border: 2px solid var(--enterprise-gray-300);
  border-radius: var(--radius-md);
  transition: var(--transition-all);
}
.form-control:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.form-control:invalid {
  border-color: var(--color-error);
}
.form-control:invalid:focus {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}
.form-control:disabled {
  background-color: var(--enterprise-gray-50);
  opacity: 0.6;
  cursor: not-allowed;
}
.form-control::placeholder {
  color: var(--enterprise-gray-500);
}

/* Form Labels */
.form-label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--enterprise-gray-700);
}
.form-label.required::after {
  content: " *";
  color: var(--color-error);
}

/* Form Help Text */
.form-text {
  margin-top: var(--space-1);
  font-size: var(--font-size-sm);
  color: var(--enterprise-gray-600);
}

/* Form Error Messages */
.form-error {
  margin-top: var(--space-1);
  font-size: var(--font-size-sm);
  color: var(--color-error);
  font-weight: var(--font-weight-medium);
}

/* ==========================================================================
   ENHANCED LINKS
   ========================================================================== */
.link {
  color: var(--brand-primary);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
  transition: var(--transition-all);
}
.link:hover {
  color: var(--brand-primary-light);
  text-decoration-thickness: 3px;
}
.link:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.link-muted {
  color: var(--enterprise-gray-600);
}
.link-muted:hover {
  color: var(--enterprise-gray-800);
}

.link-no-underline {
  text-decoration: none;
}
.link-no-underline:hover {
  text-decoration: underline;
}

/* ==========================================================================
   RESPONSIVE UTILITIES
   ========================================================================== */
/* Responsive breakpoints */
@media (max-width: 640px) {
  .btn {
    width: 100%;
    justify-content: center;
  }
  .btn-group .btn {
    width: auto;
  }
}
/* ==========================================================================
   ANIMATIONS
   ========================================================================== */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ==========================================================================
   PLATFORM-SPECIFIC OVERRIDES
   ========================================================================== */
/* DNA Romance Theme */
.theme-dnaromance {
  --brand-primary: var(--dna-romance-primary);
  --brand-primary-light: var(--dna-romance-primary-light);
  --color-accent: var(--dna-romance-accent);
  --color-accent-light: var(--dna-romance-accent-light);
}

/* DateMetriX Theme */
.theme-datemetrix {
  --brand-primary: var(--datemetrix-primary);
  --brand-primary-light: var(--datemetrix-primary-light);
  --color-accent: var(--datemetrix-accent);
  --color-accent-light: var(--datemetrix-accent-light);
}

/* GenePool Theme */
.theme-genepool {
  --brand-primary: var(--genepool-primary);
  --brand-primary-light: var(--genepool-primary-light);
  --color-accent: var(--genepool-accent);
  --color-accent-light: var(--genepool-accent-light);
}

/* WellMatched Theme */
.theme-wellmatched {
  --brand-primary: var(--wellmatched-primary);
  --brand-primary-light: var(--wellmatched-primary-light);
  --color-accent: var(--wellmatched-accent);
  --color-accent-light: var(--wellmatched-accent-light);
}

/* Gene Recovery Theme */
.theme-generecovery {
  --brand-primary: var(--generecovery-primary);
  --brand-primary-light: var(--generecovery-primary-light);
  --color-accent: var(--generecovery-accent);
  --color-accent-light: var(--generecovery-accent-light);
}

/* Heritable Health Theme */
.theme-heritablehealth {
  --brand-primary: var(--heritablehealth-primary);
  --brand-primary-light: var(--heritablehealth-primary-light);
  --color-accent: var(--heritablehealth-accent);
  --color-accent-light: var(--heritablehealth-accent-light);
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */
@media print {
  .btn {
    background: none !important;
    color: var(--enterprise-black) !important;
    border: 1px solid var(--enterprise-black) !important;
    box-shadow: none !important;
  }
  .skip-link,
  .navbar,
  .sidebar {
    display: none !important;
  }
}
/* ============================================================
 * 6. UX/UI CRITICAL FIXES
 * Overrides to fix design issues and ensure UX compliance
 * ============================================================ */
/* ============================================================
 * UX/UI CRITICAL FIXES
 * Created: November 9, 2025
 * Purpose: Fix critical design issues that violate UX principles
 * ============================================================ */
/* ============================================================
 * 0. PREVENT HORIZONTAL SCROLL
 * DateDropper and navbar items can extend past viewport
 * ============================================================ */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* ============================================================
 * 1. NAVBAR FIXES - CRITICAL
 * Remove gradient, use clean white/light grey background only
 * ============================================================ */
.navbar,
nav.navbar,
.navigation-bar,
header nav,
.navbar-expand-lg {
  background: #ffffff !important;
  background-image: none !important;
  background-color: #ffffff !important;
  border-bottom: 1px solid #e9ecef !important;
  border-top: none !important;
}
.navbar::before, .navbar::after,
nav.navbar::before,
nav.navbar::after,
.navigation-bar::before,
.navigation-bar::after,
header nav::before,
header nav::after,
.navbar-expand-lg::before,
.navbar-expand-lg::after {
  background: none !important;
  background-image: none !important;
  display: none !important;
}

.navbar-light-grey {
  background: #f8f9fa !important;
  background-image: none !important;
}

@media (prefers-color-scheme: dark) {
  .navbar {
    background: #1a1a1a !important;
    border-bottom: 1px solid #2d2d2d;
    background-image: none !important;
  }
}
[data-bs-theme=dark] .navbar {
  background: #1a1a1a !important;
  border-bottom: 1px solid #2d2d2d;
  background-image: none !important;
}

:root {
  --navbar-background: #ffffff !important;
  --nav-bg: #ffffff !important;
}

/* ============================================================
 * 2. FLAG SIZE FIXES
 * Restore proper flag sizes from DNAR baseline
 * ============================================================ */
.language-image {
  width: 30px !important;
  height: 30px !important;
  padding-right: 5px;
  object-fit: contain;
  vertical-align: middle;
}

.flag-image,
.dropdown-menu img[src*=flag],
.dropdown-menu img[alt*=flag],
.language-item img {
  width: 25px !important;
  height: 25px !important;
  padding-right: 5px;
  object-fit: contain;
  vertical-align: middle;
}

.language-selector img,
.lang-dropdown img,
.dropdown-menu .flag-icon,
.country-flag {
  max-width: 25px !important;
  max-height: 25px !important;
  width: 25px !important;
  height: 25px !important;
  object-fit: contain;
  margin-right: 8px;
  vertical-align: middle;
}

.dropdown-item img,
.language-item a {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

/* ============================================================
 * 3. GRADIENT OVERRIDES - REMOVED
 * Brand gradients are now controlled by _brand.scss
 * DO NOT add !important gradient overrides here
 * ============================================================ */
/* ============================================================
 * 4. BUTTON FIXES
 * Ensure buttons maintain proper styles
 * ============================================================ */
.btn,
.btnn {
  border: 1px solid currentColor;
  background-color: var(--brand-primary, #007bff);
  color: white;
}
.btn:hover,
.btnn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}
.btn.btn-primary,
.btnn.btn-primary {
  background-color: var(--brand-primary, #007bff) !important;
  border-color: var(--brand-primary, #007bff) !important;
  color: white !important;
}

/* ============================================================
 * 5. COLOR CONTRAST FIXES
 * Ensure proper contrast for accessibility
 * ============================================================ */
.text-muted {
  color: #595959 !important;
}

.navbar-nav .nav-link {
  color: #495057 !important;
}
.navbar-nav .nav-link:hover, .navbar-nav .nav-link:focus {
  color: #212529 !important;
}
.navbar-nav .nav-link.active {
  color: var(--brand-primary, #007bff) !important;
  font-weight: 600;
}

/* ============================================================
 * 6. FONT SIZE FIXES - WCAG COMPLIANCE
 * Ensure minimum 14px font size across all elements
 * ============================================================ */
h5, .h5 {
  font-size: 14px !important;
}

h6, .h6 {
  font-size: 14px !important;
}

.small,
small,
.text-small,
.font-small {
  font-size: 14px !important;
}

body {
  font-size: 16px !important;
}

p {
  font-size: 16px !important;
}

.form-label,
label {
  font-size: 14px !important;
}

.btn,
.button,
button {
  font-size: 14px !important;
}

/* ============================================================
 * 7. BORDER RADIUS STANDARDIZATION
 * Standardize to 2 values: 4px (small) and 8px (medium)
 * ============================================================ */
.btn,
.button,
button,
input[type=button],
input[type=submit] {
  border-radius: 4px !important;
}
.btn:focus, .btn:active,
.button:focus,
.button:active,
button:focus,
button:active,
input[type=button]:focus,
input[type=button]:active,
input[type=submit]:focus,
input[type=submit]:active {
  border-radius: 4px !important;
}

.card,
.dropdown-menu,
.modal-content,
.popover {
  border-radius: 8px !important;
  overflow: hidden;
}

.form-control,
.form-select,
input,
textarea,
select {
  border-radius: 4px !important;
}

.btn-pill {
  border-radius: 4px !important;
}

.rounded-5,
.rounded-4,
.rounded-3,
.rounded-2xl,
.rounded-xl {
  border-radius: 8px !important;
}

/* ============================================================
 * 8. Z-INDEX HIERARCHY FIXES
 * Standardize to scale: 1, 10, 100, 1000, 10000
 * ============================================================ */
.content,
.main {
  z-index: 1;
}

.tooltip,
.popover {
  z-index: 10 !important;
}

.sticky,
.fixed-bottom,
.fixed-top {
  z-index: 100 !important;
}

.navbar {
  z-index: 1000 !important;
}

.dropdown-menu {
  z-index: 1001 !important;
}

.modal {
  z-index: 10000 !important;
}

.modal-backdrop {
  z-index: 9999 !important;
}

.navbar {
  z-index: 1000 !important;
}

.fixed-top {
  z-index: 100 !important;
}

.sticky-top {
  z-index: 100 !important;
}

/* ============================================================
 * 9. COLOR CONTRAST FIXES - WCAG AA COMPLIANCE
 * Ensure proper contrast for all text elements
 * ============================================================ */
.text-light,
.light-text {
  color: #212529 !important;
}

.text-muted {
  color: #595959 !important;
}

.text-secondary {
  color: #595959 !important;
}

a,
.link {
  color: var(--brand-primary, #007bff) !important;
  text-decoration: underline;
}
a:hover,
.link:hover {
  color: var(--brand-primary-dark, #0056b3) !important;
}
a:visited,
.link:visited {
  color: #551a8b !important;
}

.btn {
  color: #ffffff !important;
}
.btn.btn-light {
  color: #212529 !important;
}
.btn.btn-secondary {
  color: #ffffff !important;
}

/* ============================================================
 * 10. HERO SECTION - REMOVED OVERRIDES
 * The hero section styles are now controlled by _brand.scss
 * Each site's theme controls its own hero background via CSS variables
 * DO NOT add !important overrides here - they break site-specific designs
 * ============================================================ */
.gradient-text,
.text-gradient {
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: unset !important;
  background-clip: unset !important;
  text-fill-color: unset !important;
  color: var(--brand-primary, #212529) !important;
}

/* ============================================================
 * 11. GENERIC BUTTON & COMPONENT GRADIENT FIXES
 * Ensure buttons and other components don't have clashing gradients
 * ============================================================ */
.btn-primary {
  background: var(--brand-primary, #007bff) !important;
  background-image: none !important;
  border-color: var(--brand-primary, #007bff) !important;
}
.btn-primary:hover {
  background: var(--brand-primary-dark, #0056b3) !important;
  background-image: none !important;
}

.btn-secondary {
  background: var(--brand-secondary, #6c757d) !important;
  background-image: none !important;
}
.btn-secondary:hover {
  background: #5a6268 !important;
  background-image: none !important;
}

.card-header {
  background: var(--brand-primary, #007bff) !important;
  background-image: none !important;
  color: white !important;
}

.alert {
  background-image: none !important;
}
.alert.alert-primary {
  background-color: #cfe2ff !important;
  border-color: #b6d4fe !important;
  color: #084298 !important;
}
.alert.alert-success {
  background-color: #d1e7dd !important;
  border-color: #badbcc !important;
  color: #0f5132 !important;
}
.alert.alert-warning {
  background-color: #fff3cd !important;
  border-color: #ffecb5 !important;
  color: #664d03 !important;
}
.alert.alert-danger {
  background-color: #f8d7da !important;
  border-color: #f5c2c7 !important;
  color: #842029 !important;
}

/* ============================================================
 * 12. RESPONSIVE FIXES
 * Mobile-specific adjustments
 * ============================================================ */
@media (max-width: 768px) {
  .language-image {
    width: 25px !important;
    height: 25px !important;
  }
  .flag-image,
  .language-selector img,
  .flag-icon,
  .dropdown-menu img[src*=flag] {
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
  }
  .navbar {
    padding: 0.5rem 1rem;
    background: #ffffff !important;
    background-image: none !important;
  }
  h5, .h5,
  h6, .h6,
  .small,
  small,
  .text-small {
    font-size: 14px !important;
  }
  .btn {
    min-height: 44px;
    padding: 10px 16px;
    font-size: 14px !important;
  }
  .form-control,
  .form-select,
  input {
    min-height: 44px;
    font-size: 16px !important;
  }
}
/* ============================================================
 * 13. SCREEN EDGE PADDING - 10% MINIMUM
 * Ensure content never touches screen edges
 * ============================================================ */
.container,
.container-fluid {
  padding-left: 10% !important;
  padding-right: 10% !important;
}
@media (max-width: 768px) {
  .container,
  .container-fluid {
    padding-left: 5% !important;
    padding-right: 5% !important;
  }
}

.row {
  margin-left: 0;
  margin-right: 0;
}

.hero-section,
.hero,
.banner,
.full-width-section {
  padding-left: 10% !important;
  padding-right: 10% !important;
}
@media (max-width: 768px) {
  .hero-section,
  .hero,
  .banner,
  .full-width-section {
    padding-left: 5% !important;
    padding-right: 5% !important;
  }
}

.navbar > .container,
.navbar > .container-fluid,
.navbar-nav {
  padding-left: 10% !important;
  padding-right: 10% !important;
}
@media (max-width: 768px) {
  .navbar > .container,
  .navbar > .container-fluid,
  .navbar-nav {
    padding-left: 5% !important;
    padding-right: 5% !important;
  }
}

body > .card,
body > .content-block,
body > .main-content,
body > main {
  margin-left: 10%;
  margin-right: 10%;
}
@media (max-width: 768px) {
  body > .card,
  body > .content-block,
  body > .main-content,
  body > main {
    margin-left: 5%;
    margin-right: 5%;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 80%;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .container {
    max-width: 80%;
  }
}
footer,
.footer {
  padding-left: 10% !important;
  padding-right: 10% !important;
}
@media (max-width: 768px) {
  footer,
  .footer {
    padding-left: 5% !important;
    padding-right: 5% !important;
  }
}

/* ============================================================
 * BADGE/PILL OVERFLOW FIX FOR LONG TRANSLATIONS
 * German, Finnish, etc. have very long compound words that
 * overflow rounded-pill badges on mobile viewports.
 * ============================================================ */
.dna-badge .badge,
.science-badges .badge {
  max-width: 100%;
  white-space: normal;
  word-break: break-word;
}

@media (max-width: 576px) {
  .dna-badge .badge,
  .science-badges .badge {
    font-size: 0.8rem !important;
    padding: 0.35rem 0.75rem !important;
  }
}
/* ============================================================
 * END OF UX FIXES
 * These overrides ensure compliance with UX/UI best practices
 * ============================================================ */
/*
 * WCAG 2.1 AA/AAA Compliance Fixes
 * =================================
 * Addresses 8,566 audit issues with targeted fixes
 *
 * Issue Categories:
 * - Contrast: 3,861 issues (39 unique color combos)
 * - Touch Targets: 3,707 issues (~50 patterns)
 * - Accessibility: 998 issues (alt text, headings, labels)
 */
/* =================================================================
   PHASE 1: CONTRAST FIXES
   Root cause: Text on transparent backgrounds
   Fix: Ensure all containers have explicit backgrounds
   ================================================================= */
/* Ensure body has explicit background for contrast calculations */
body {
  background-color: #ffffff;
  color: var(--color-text-primary, #212121);
}

/* Main content areas need explicit backgrounds */
main,
.main-content,
.content,
.container,
.container-fluid,
article,
section {
  background-color: inherit;
}

/* Cards and surfaces */
.card,
.card-body,
.modal-content,
.dropdown-menu,
.popover-body,
.toast-body,
.offcanvas-body {
  background-color: #ffffff;
}

/* =================================================================
   WCAG AA Compliant Text Colors
   Minimum 4.5:1 contrast on white (#ffffff)
   ================================================================= */
/* Primary text - Use darker shades */
.text-muted {
  color: #595959 !important; /* 7.0:1 contrast - AAA compliant */
}

.text-secondary {
  color: #595959 !important; /* 7.0:1 contrast - AAA compliant */
}

/* Gray text adjustments */
.text-gray,
.text-grey {
  color: #595959 !important; /* Was #888 (3.5:1), now 7.0:1 */
}

/* Bootstrap text-* overrides for AA compliance */
.text-body-secondary {
  color: #595959 !important; /* Override Bootstrap's #6c757d (4.6:1) to safer 7.0:1 */
}

/* Link colors - ensure 4.5:1 minimum */
a:not(.btn):not(.nav-link):not(.dropdown-item) {
  color: var(--brand-primary, #0056b3); /* 7.0:1 on white */
}

a:not(.btn):not(.nav-link):not(.dropdown-item):hover {
  color: var(--brand-primary-dark, #003d82); /* Even darker on hover */
}

/* =================================================================
   SKIP LINK FIX - Was 1.18:1, needs 4.5:1
   ================================================================= */
.skip-link,
a.skip-link,
[class*=skip-to-] {
  background-color: #000000 !important;
  color: #ffffff !important;
  /* Contrast: 21:1 - maximum possible */
}

.skip-link:focus,
a.skip-link:focus {
  background-color: var(--brand-primary, #0f75bd) !important;
  color: #ffffff !important;
  /* Contrast: 4.63:1 - AA compliant */
}

/* =================================================================
   NAVIGATION LINK FIXES
   Issue: Nav links had 2.57:1 contrast
   ================================================================= */
.navbar-nav .nav-link,
.navbar-light .navbar-nav .nav-link {
  color: #212121 !important; /* 16.1:1 contrast - AAA */
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
  color: var(--brand-primary, #0f75bd) !important; /* 4.63:1 - AA */
}

/* Dropdown links */
.dropdown-menu .dropdown-item {
  color: #212121 !important;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
  background-color: #f5f5f5;
  color: var(--brand-primary, #0f75bd) !important;
}

/* =================================================================
   FORM LABEL FIXES
   Issue: Labels had 1.66:1 contrast (rgb(51,51,51) on transparent)
   ================================================================= */
label,
.form-label,
.col-form-label {
  color: #212121 !important; /* 16.1:1 - AAA */
}

/* Form floating labels */
.form-floating > label {
  color: #595959 !important; /* 7.0:1 when floating */
}

/* Placeholder text - lower contrast acceptable per WCAG */
::placeholder {
  color: #757575 !important; /* 4.6:1 - AA */
  opacity: 1;
}

/* =================================================================
   BUTTON TEXT FIXES
   ================================================================= */
/* Ensure button text is readable */
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-warning,
.btn-outline-info {
  background-color: #ffffff;
}

/* Light button variants need dark text */
.btn-light,
.btn-outline-light {
  color: #212121 !important;
}

/* Button link touch targets - ensure proper sizing */
.btn-link,
.btn-link.btn-sm {
  min-height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 12px 12px !important;
}

/* =================================================================
   PHASE 2: TOUCH TARGET ENFORCEMENT
   Issue: 3,707 elements below 48x48dp minimum
   ================================================================= */
/* Universal minimum touch targets (WCAG 2.2 AAA: 48x48dp)
   Key insight: min-height doesn't work on inline elements
   Must use inline-block/inline-flex + padding
   !important needed to override Bootstrap/other frameworks */
a:not(.navbar-brand):not(.nav-link):not(.dropdown-item):not(.dropdown-toggle) {
  display: inline-block !important;
  min-height: 48px !important;
  line-height: 48px !important;
  vertical-align: middle !important;
}

button,
input[type=button],
input[type=submit],
input[type=reset],
select,
[role=button],
.btn {
  min-height: 48px;
}

/* Navigation links - guaranteed 48px touch */
.navbar-nav .nav-link {
  min-height: 48px !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Footer links */
footer a,
.footer a,
.site-footer a {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  padding: 10px 0;
}

/* Breadcrumb links */
.breadcrumb a,
.breadcrumb-item a {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  padding: 10px 4px;
}

/* Icon-only buttons MUST be 48x48 */
.btn-icon,
.icon-btn,
button:has(> i:only-child),
button:has(> svg:only-child),
a:has(> i:only-child),
a:has(> svg:only-child),
a:has(> span:only-child > i:only-child) {
  min-width: 48px !important;
  min-height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Social login buttons */
.btn-social,
.btn-apple,
.btn-google,
.btn-facebook,
.btn-twitter {
  min-height: 48px !important;
  padding: 12px 16px !important;
}

/* Checkbox/Radio touch areas */
.form-check {
  min-height: 48px !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

.form-check-input {
  width: 24px !important;
  height: 24px !important;
  margin-top: 0 !important;
  cursor: pointer;
}

/* Increase clickable area without visual change */
.form-check-label {
  padding: 12px 8px 12px 0;
  cursor: pointer;
}

/* =================================================================
   PHASE 3: ACCESSIBILITY ELEMENT FIXES
   ================================================================= */
/* Ensure all images have alt fallback styling */
img:not([alt]),
img[alt=""] {
  /* Visual indicator in dev - remove for production */
  /* outline: 3px dashed red; */
}

/* Button label requirement - aria-label for icon buttons */
button:not([aria-label]):has(> i:only-child),
button:not([aria-label]):has(> svg:only-child) {
  /* Force developers to add aria-label */
  /* outline: 3px dashed orange; */
}

/* =================================================================
   HEADING HIERARCHY FIXES
   Issue: 550 instances of skipped heading levels
   ================================================================= */
/* Visual styling should not depend on heading level */
/* Use utility classes instead of semantic headings for styling */
.heading-xl {
  font-size: 2.5rem;
  font-weight: 700;
}

.heading-lg {
  font-size: 2rem;
  font-weight: 700;
}

.heading-md {
  font-size: 1.5rem;
  font-weight: 600;
}

.heading-sm {
  font-size: 1.25rem;
  font-weight: 600;
}

.heading-xs {
  font-size: 1rem;
  font-weight: 600;
}

/* =================================================================
   MOBILE-SPECIFIC FIXES
   ================================================================= */
@media (max-width: 768px) {
  /* Larger touch targets on mobile */
  .nav-link,
  .dropdown-item,
  .list-group-item,
  .btn {
    min-height: 48px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
  /* Form controls */
  .form-control,
  .form-select,
  input,
  select,
  textarea {
    min-height: 48px !important;
    font-size: 16px !important; /* Prevent iOS zoom */
  }
  /* Increase spacing between touch targets */
  .btn + .btn,
  .nav-link + .nav-link {
    margin-left: 8px;
  }
}
/* =================================================================
   HIGH CONTRAST MODE SUPPORT
   ================================================================= */
@media (prefers-contrast: high) {
  body {
    background-color: #ffffff;
    color: #000000;
  }
  a {
    color: #0000cc;
    text-decoration: underline;
  }
  .btn {
    border-width: 2px !important;
  }
  :focus-visible {
    outline-width: 4px !important;
  }
}
/* =================================================================
   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;
  }
}
@media (min-width: 768px) {
  .mobile-only {
    display: none !important;
  }
}

@media (max-width: 575px) {
  .tablet-up {
    display: none !important;
  }
}

@media (max-width: 991px) {
  .desktop-up {
    display: none !important;
  }
}

.match-dashboard {
  padding: 0.5rem;
}
@media (min-width: 768px) {
  .match-dashboard {
    padding: 1rem;
  }
}
@media (min-width: 992px) {
  .match-dashboard {
    padding: 2rem;
  }
}
.match-dashboard .match-card {
  width: 100%;
  margin-bottom: 1rem;
}
@media (min-width: 768px) {
  .match-dashboard .match-card {
    width: calc(50% - 1rem);
    margin-right: 1rem;
  }
  .match-dashboard .match-card:nth-child(2n) {
    margin-right: 0;
  }
}
@media (min-width: 992px) {
  .match-dashboard .match-card {
    width: calc(33.333% - 1rem);
  }
  .match-dashboard .match-card:nth-child(2n) {
    margin-right: 1rem;
  }
  .match-dashboard .match-card:nth-child(3n) {
    margin-right: 0;
  }
}
.match-dashboard .match-card .match-image {
  height: 200px;
}
@media (min-width: 768px) {
  .match-dashboard .match-card .match-image {
    height: 250px;
  }
}
@media (min-width: 992px) {
  .match-dashboard .match-card .match-image {
    height: 300px;
  }
}
.match-dashboard .match-card .match-actions {
  flex-direction: column;
}
@media (min-width: 768px) {
  .match-dashboard .match-card .match-actions {
    flex-direction: row;
  }
}
.match-dashboard .match-card .match-actions button {
  width: 100%;
  margin-bottom: 0.5rem;
}
@media (min-width: 768px) {
  .match-dashboard .match-card .match-actions button {
    width: auto;
    margin-bottom: 0;
    margin-right: 0.5rem;
  }
  .match-dashboard .match-card .match-actions button:last-child {
    margin-right: 0;
  }
}

.navbar {
  padding: 0.5rem;
}
@media (min-width: 768px) {
  .navbar {
    padding: 1rem 2rem;
  }
}
.navbar .nav-menu {
  position: fixed;
  left: -100%;
  top: 70px;
  flex-direction: column;
  background-color: white;
  width: 100%;
  text-align: center;
  transition: 0.3s;
  box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
  z-index: 1000;
}
.navbar .nav-menu.active {
  left: 0;
}
@media (min-width: 768px) {
  .navbar .nav-menu {
    position: static;
    flex-direction: row;
    width: auto;
    box-shadow: none;
  }
}
.navbar .hamburger {
  display: block;
  cursor: pointer;
}
@media (min-width: 768px) {
  .navbar .hamburger {
    display: none;
  }
}
.navbar .hamburger.active .bar:nth-child(2) {
  opacity: 0;
}
.navbar .hamburger.active .bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.navbar .hamburger.active .bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

.form-container {
  padding: 1rem;
}
@media (min-width: 768px) {
  .form-container {
    padding: 2rem;
  }
}
@media (min-width: 992px) {
  .form-container {
    max-width: 600px;
    margin: 0 auto;
  }
}
.form-container .mb-3 label {
  font-size: 0.875rem;
}
@media (min-width: 768px) {
  .form-container .mb-3 label {
    font-size: 1rem;
  }
}
.form-container .mb-3 input,
.form-container .mb-3 select,
.form-container .mb-3 textarea {
  font-size: 16px;
  padding: 0.75rem;
}
@media (min-width: 768px) {
  .form-container .mb-3 input,
  .form-container .mb-3 select,
  .form-container .mb-3 textarea {
    padding: 1rem;
  }
}

.btn {
  min-height: 44px;
  min-width: 44px;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
}
@media (max-width: 575px) {
  .btn {
    width: 100%;
    margin-bottom: 0.5rem;
  }
}
.btn.btn-icon {
  padding: 0.75rem;
}
@media (min-width: 768px) {
  .btn.btn-icon {
    padding: 0.5rem;
  }
}

@media (max-width: 767px) {
  .navbar-nav .nav-link,
  .nav-item a,
  .dropdown-item {
    min-height: 44px;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    display: flex;
    align-items: center;
  }
  a[class*=icon],
  button[class*=icon],
  .icon-link,
  .social-icon,
  .action-icon {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  footer a,
  .footer-links a {
    min-height: 48px;
    padding: 0.625rem 0;
    display: inline-flex;
    align-items: center;
  }
  .language-selector a,
  .flag-link,
  [class*=flag] a {
    min-height: 48px;
    min-width: 48px;
    padding: 0.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .pagination a,
  .pagination .page-link {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .card-footer a,
  .card-footer button,
  .card-actions a,
  .card-actions button {
    min-height: 44px;
    padding: 0.5rem 1rem;
  }
  input[type=checkbox],
  input[type=radio] {
    min-height: 44px;
    min-width: 44px;
  }
  .btn-close,
  [aria-label=Close] {
    min-height: 44px;
    min-width: 44px;
    padding: 0.5rem;
  }
  .nav-tabs .nav-link,
  .nav-pills .nav-link {
    min-height: 44px;
    padding: 0.75rem 1rem;
  }
  .breadcrumb-item a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .alert .btn-close {
    min-height: 44px;
    min-width: 44px;
  }
  .carousel-control-prev,
  .carousel-control-next {
    min-width: 44px;
  }
  small a,
  .small a,
  .text-muted a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0;
  }
}
.modal .modal-dialog {
  margin: 0;
  height: 100%;
  max-width: 100%;
}
@media (min-width: 768px) {
  .modal .modal-dialog {
    margin: 1.75rem auto;
    height: auto;
    max-width: 500px;
  }
}
@media (min-width: 992px) {
  .modal .modal-dialog {
    max-width: 600px;
  }
}
.modal .modal-content {
  height: 100%;
  border-radius: 0;
}
@media (min-width: 768px) {
  .modal .modal-content {
    height: auto;
    border-radius: 0.5rem;
  }
}

.profile-image {
  width: 100px;
  height: 100px;
}
@media (min-width: 768px) {
  .profile-image {
    width: 150px;
    height: 150px;
  }
}
@media (min-width: 992px) {
  .profile-image {
    width: 200px;
    height: 200px;
  }
}

html {
  font-size: 14px;
}
@media (min-width: 768px) {
  html {
    font-size: 15px;
  }
}
@media (min-width: 992px) {
  html {
    font-size: 16px;
  }
}

h1 {
  font-size: 1.75rem;
}
@media (min-width: 768px) {
  h1 {
    font-size: 2.25rem;
  }
}
@media (min-width: 992px) {
  h1 {
    font-size: 2.5rem;
  }
}

h2 {
  font-size: 1.5rem;
}
@media (min-width: 768px) {
  h2 {
    font-size: 1.875rem;
  }
}
@media (min-width: 992px) {
  h2 {
    font-size: 2rem;
  }
}

.p-mobile-sm {
  padding: 0.5rem;
}
@media (min-width: 768px) {
  .p-mobile-sm {
    padding: 1rem;
  }
}
@media (min-width: 992px) {
  .p-mobile-sm {
    padding: 1.5rem;
  }
}

.m-mobile-sm {
  margin: 0.5rem;
}
@media (min-width: 768px) {
  .m-mobile-sm {
    margin: 1rem;
  }
}
@media (min-width: 992px) {
  .m-mobile-sm {
    margin: 1.5rem;
  }
}

@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;
  }
}
.scrollable {
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
}

body {
  overflow-x: hidden;
}

.wingman-chat {
  height: calc(100vh - 120px);
}
@media (min-width: 768px) {
  .wingman-chat {
    height: 600px;
  }
}
.wingman-chat .chat-messages {
  padding: 0.5rem;
}
@media (min-width: 768px) {
  .wingman-chat .chat-messages {
    padding: 1rem;
  }
}
.wingman-chat .chat-input {
  padding: 0.5rem;
}
@media (min-width: 768px) {
  .wingman-chat .chat-input {
    padding: 1rem;
  }
}
.wingman-chat .chat-input input {
  font-size: 16px;
}

/* ============================================================
 * 7. STANDALONE CSS CONSOLIDATION (Nov 27, 2025)
 * These were separate CSS files loaded in templates
 * Now compiled into app.min.css for single-file loading
 * ============================================================ */
/* ========================================
   NAVBAR BOOTSTRAP 5 FIX - BASED ON DNAR POLISHED STYLING
   ========================================

   FILE: _navbar-bootstrap5-fix.scss
   COMPILED INTO: apps/static/css/app.css + app.min.css (via main.scss)

   PURPOSE:
   - Fixes Bootstrap 5 navbar to look as polished as DNAR's Bootstrap 3
   - Handles hamburger menu styling (visible outline)
   - Controls mobile dropdown width (35vw = 30-40%, not full screen)
   - Makes nav titles larger and bolder (1.1rem desktop, 1.2rem mobile)
   - Adds backdrop for mobile menu (dims background)

   TO COMPILE (after editing):
   1. Run: sass apps/static/scss/main.scss apps/static/css/app.css
   2. Or use gulp: gulp scss (if configured)
   3. Minify: Use online tool or postcss to create app.min.css

   RELATED FILES:
   - apps/static/js/navbar-accessibility.js (close on outside click, haptic feedback)
   - apps/templates/includes/navbar.html (HTML structure)

   LAST UPDATED: December 2025
*/
/* =================================================================
   1. NAVBAR BASE STYLING - From DNAR
   ================================================================= */
.navbar {
  background-color: #ffffff !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  padding: 0.5rem 1rem !important;
  position: fixed !important;
  top: 0 !important;
  width: 100% !important;
  z-index: 1000 !important;
  min-height: 60px !important;
  transition: all 0.3s ease !important;
  border-bottom: 3px solid var(--md3-primary, #0F75BD) !important;
}

/* Ensure body has proper padding for fixed navbar */
/* Only apply when page has a fixed navbar - don't break pages without navbar */
body:has(.navbar.fixed-top),
body:has(.navbar[style*="position: fixed"]),
body.has-fixed-navbar {
  padding-top: 70px !important; /* Navbar height + buffer */
}

/* =================================================================
   2. NAVBAR BRAND/LOGO - From DNAR
   ================================================================= */
.navbar-brand {
  display: flex !important;
  align-items: center !important;
}

.navbar-brand img {
  height: 50px !important; /* DNAR uses 50px for logo */
  width: auto !important;
  max-width: 150px !important;
  vertical-align: middle !important;
}

/* =================================================================
   3. NAVBAR CONTAINER & FLEXBOX - Proper Bootstrap 5 alignment
   ================================================================= */
.navbar .container-fluid {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* =================================================================
   4. NAVBAR NAV ITEMS - From DNAR with BS5 adjustments
   ================================================================= */
.navbar-nav {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important; /* Space between items */
}

.navbar-nav .nav-item {
  margin: 0 0.5rem !important; /* Additional spacing */
}

.navbar-nav .nav-link {
  color: #1a1a1a !important; /* Darker for better contrast */
  font-size: 1.1rem !important; /* LARGER - more prominent */
  font-weight: 600 !important; /* BOLDER */
  padding: 0.75rem 1rem !important;
  transition: color 0.3s ease !important;
  white-space: nowrap !important;
}

.navbar-nav .nav-link:hover {
  color: var(--md3-primary, #4A90E2) !important;
}

/* =================================================================
   5. DROPDOWN STYLING - Bootstrap 5 specific
   ================================================================= */
/* Explore dropdown button - style like nav link */
.navbar .products-services-dropdown {
  background-color: transparent !important;
  border: none !important;
  color: #333333 !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  padding: 0.5rem 1rem !important;
  transition: color 0.3s ease !important;
  white-space: nowrap !important;
}

.navbar .products-services-dropdown:hover {
  color: var(--md3-primary, #4A90E2) !important;
}

/* Language dropdown button - with subtle border */
.navbar .nav-language-btn {
  /* Match nav-link styling for consistency */
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0.75rem 1rem !important;
  color: #1a1a1a !important;
  font-size: 1.1rem !important; /* Match nav-link */
  font-weight: 600 !important; /* Match nav-link */
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  transition: color 0.3s ease !important;
  white-space: nowrap !important;
}

.navbar .nav-language-btn:hover,
.navbar .nav-language-btn:focus {
  color: var(--md3-primary, #4A90E2) !important;
}

/* Keep dropdown arrows visible but subtle */
.navbar .dropdown-toggle::after {
  border-top: 0.3em solid !important;
  border-right: 0.3em solid transparent !important;
  border-bottom: 0 !important;
  border-left: 0.3em solid transparent !important;
  margin-left: 0.255em !important;
  vertical-align: 0.255em !important;
  opacity: 0.5 !important;
}

.navbar .dropdown-toggle:hover::after {
  opacity: 1 !important;
}

/* Dropdown menu styling */
.navbar .dropdown-menu {
  min-width: 250px !important; /* Better minimum for desktop */
  margin-top: 5px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  border-radius: 8px !important;
  background-color: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  z-index: 1060 !important; /* CRITICAL: Above navbar (1050) and all other content */
  position: absolute !important; /* Ensure proper positioning */
}

/* Language dropdown - NO HEIGHT CONSTRAINTS ON DESKTOP */
/* Constraints moved to mobile-only section below */
/* Explore dropdown - proper width and sections */
.navbar #exploreDropdownButton + .dropdown-menu {
  min-width: 300px !important; /* Wider for sections */
  width: auto !important;
  max-width: 400px !important; /* Reasonable max on desktop */
}

/* Dropdown headers styling - non-clickable section titles */
.navbar .dropdown-menu .dropdown-header {
  padding: 12px 16px !important; /* Increased for better spacing */
  color: #595959 !important; /* WCAG AA compliant (7:1 contrast) - was #999 (2.8:1) */
  font-size: 0.875rem !important; /* 14px - WCAG minimum (was 12px/0.75rem) */
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  background-color: transparent !important; /* No background */
  margin: 0 !important;
  cursor: default !important; /* Default cursor, not pointer */
  pointer-events: none !important; /* Cannot be clicked */
  min-height: 44px !important; /* WCAG touch target minimum (even though non-clickable, for spacing) */
  display: flex !important;
  align-items: center !important;
}

/* Dropdown dividers */
.navbar .dropdown-menu .dropdown-divider {
  margin: 0.5rem 0 !important;
  border-color: #e9ecef !important;
}

/* Only apply constraints on mobile */
@media (max-width: 991px) {
  /* Ensure absolute-positioned collapse anchors to navbar container */
  .navbar .container-fluid {
    position: relative !important;
  }
  .navbar .dropdown-menu {
    max-width: 90vw !important;
    min-width: 200px !important;
  }
  .navbar .language-menu {
    max-height: 70vh !important; /* Limit on mobile for usability */
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
}
.navbar .dropdown-item {
  display: flex !important;
  align-items: center !important;
  padding: 0.5rem 1rem !important;
  color: #767676 !important;
  transition: all 0.3s ease !important;
  white-space: nowrap !important; /* Prevent text wrapping on desktop */
}

.navbar .dropdown-item:hover {
  background-color: var(--md3-primary, #0d75bd) !important;
  color: var(--md3-on-primary, #ffffff) !important;
}

/* Language dropdown specific */
.language-item {
  border-bottom: 1px solid #767676 !important;
}

.language-item:last-child {
  border-bottom: none !important;
}

/* =================================================================
   6. FLAG IMAGE SIZING - EXACT DNAR SPECIFICATIONS
   ================================================================= */
/* Navbar language button flag */
.nav-language-btn .language-image {
  width: 30px !important;
  height: 30px !important;
  padding-right: 5px !important;
  object-fit: contain !important;
  vertical-align: middle !important;
}

/* Dropdown flag images */
.dropdown-item .flag-image {
  width: 25px !important;
  height: 25px !important;
  padding-right: 5px !important;
  object-fit: contain !important;
  vertical-align: middle !important;
}

/* =================================================================
   7. SOCIAL ICONS IN NAVBAR - From DNAR
   ================================================================= */
.navbar-social-container {
  display: flex !important;
  gap: 0.75rem !important;
  align-items: center !important;
  /* margin handled by Bootstrap utility classes: ms-auto me-3 */
}

.navbar-social-container a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important; /* WCAG 2.5.8 minimum touch target */
  height: 44px !important; /* WCAG 2.5.8 minimum touch target */
  text-decoration: none !important;
}

.navbar-social-container .social-icon {
  font-size: 1rem !important;
  color: #595959 !important;
  transition: color 0.3s ease !important;
}

.navbar-social-container .social-icon:hover {
  color: var(--md3-primary, #4A90E2) !important;
}

/* =================================================================
   8. MOBILE RESPONSIVENESS - Bootstrap 5 breakpoints
   ================================================================= */
/* Tablet (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
  .navbar {
    padding: 0.5rem 1rem !important;
  }
  .navbar-nav {
    gap: 0.5rem !important;
  }
  .navbar-nav .nav-item {
    margin: 0 0.25rem !important;
  }
  .navbar-nav .nav-link {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.9rem !important;
  }
}
/* Mobile (max-width: 991px) - Hamburger menu active */
@media (max-width: 991px) {
  /* Only apply padding when page has fixed navbar */
  body:has(.navbar.fixed-top),
  body:has(.navbar[style*="position: fixed"]),
  body.has-fixed-navbar {
    padding-top: 60px !important;
  }
  .navbar {
    padding: 0.5rem !important;
  }
  .navbar-brand img {
    height: 40px !important;
  }
  /* Mobile navbar collapse - dynamic width, right-aligned, NOT full screen */
  .navbar .navbar-collapse {
    position: fixed !important; /* Robust like DNAR reference */
    top: 60px !important; /* navbar height */
    right: 10px !important;
    left: auto !important;
    /* Dynamic width: grow to content, clamped within viewport */
    width: auto !important; /* fallback */
    width: fit-content !important; /* grow to content */
    min-width: 260px !important; /* baseline comfort */
    max-width: 90vw !important; /* keep within viewport */
    max-height: calc(100vh - 80px) !important; /* prevent overflow */
    overflow-y: auto !important;
    background-color: #ffffff !important;
    padding: 8px !important;
    margin-top: 0 !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25) !important;
    border-radius: 12px !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important; /* Subtle border */
    z-index: 1041 !important;
    /* Do not force display here; let .collapse manage visibility */
    flex-direction: column !important;
  }
  /* Only display flex when actually shown */
  .navbar .navbar-collapse.show {
    display: flex !important;
  }
  /* Fix dropdown styling on mobile */
  .navbar .dropdown-menu {
    position: static !important;
    float: none !important;
    width: 100% !important; /* fill collapse width */
    margin-top: 0 !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
  /* Allow long language names to wrap instead of cutting off */
  .navbar .dropdown-item {
    white-space: normal !important;
  }
  /* Dropdown headers - visible section titles */
  .navbar .dropdown-menu .dropdown-header {
    background-color: transparent !important;
    padding: 12px 16px 8px !important;
    margin-top: 8px !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    color: #444 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
  }
  .navbar-nav {
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
  }
  .navbar-nav .nav-item {
    width: 100% !important;
    margin: 0 !important;
  }
  /* Nav links - larger and bolder on mobile */
  .navbar-nav .nav-link {
    width: 100% !important;
    padding: 12px 16px !important;
    text-align: left !important;
    font-size: 1.2rem !important; /* Larger text */
    font-weight: 700 !important; /* Bolder */
    color: #1a1a1a !important;
    border-radius: 6px !important;
  }
  .navbar-nav .nav-link:hover,
  .navbar-nav .nav-link:active {
    background-color: #f0f4f8 !important;
  }
  /* Mobile dropdown buttons - match nav links */
  .nav-language-btn,
  .products-services-dropdown,
  .navbar .dropdown-toggle {
    width: 100% !important;
    justify-content: flex-start !important;
    margin-top: 0.25rem !important;
    text-align: left !important;
    padding: 12px 16px !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important; /* Bolder to match nav links */
    color: #1a1a1a !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
  }
  /* Language text visible on mobile */
  .nav-language-btn .language-text {
    display: inline-block !important;
    margin-left: 10px !important;
    font-weight: 700 !important;
  }
  .nav-language-btn .language-image {
    width: 24px !important;
    height: auto !important;
  }
  /* Dropdown items - larger and clearer */
  .navbar .dropdown-menu .dropdown-item {
    font-size: 1.05rem !important;
    font-weight: 500 !important;
    color: #333 !important;
    padding: 12px 16px !important;
    border-radius: 6px !important;
    margin: 2px 0 !important;
  }
  .navbar .dropdown-menu .dropdown-item:hover,
  .navbar .dropdown-menu .dropdown-item:active {
    background-color: var(--md3-primary, #0d75bd) !important;
    color: var(--md3-on-primary, #fff) !important;
  }
  /* Haptic-like tap feedback on touch devices */
  .navbar-nav .nav-link:active,
  .navbar .dropdown-item:active,
  .navbar .dropdown-toggle:active {
    transform: scale(0.98) !important;
    transition: transform 0.1s ease !important;
  }
}
/* Desktop (min-width: 992px) */
@media (min-width: 992px) {
  .navbar {
    padding: 0.75rem 2rem !important;
    overflow: visible !important; /* CRITICAL: Allow dropdowns to extend beyond navbar */
  }
  .navbar-collapse {
    overflow: visible !important; /* CRITICAL: Allow dropdowns to extend beyond navbar */
  }
  .navbar-nav {
    gap: 1.5rem !important;
    overflow: visible !important; /* CRITICAL: Allow dropdowns to extend beyond navbar */
  }
  .navbar-nav .nav-item {
    margin: 0 0.75rem !important;
  }
  /* CRITICAL: Hide hamburger menu on desktop - targets navbar-expand-lg (992px+) */
  .navbar.navbar-expand-lg .navbar-toggler,
  .navbar.navbar-expand-xl .navbar-toggler {
    display: none !important;
  }
}
/* Constrain desktop nav to avoid overflow on narrower desktops */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .navbar .container-fluid {
    flex-wrap: wrap !important;
  }
  .navbar-nav {
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
  }
  .navbar-nav .nav-link {
    padding: 0.5rem 0.75rem !important;
    font-size: 1rem !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    max-width: 100% !important;
  }
  .navbar .nav-language-btn {
    font-size: 1rem !important;
    padding: 0.5rem 0.75rem !important;
  }
}
/* =================================================================
   9. NAVBAR TOGGLER (HAMBURGER MENU) - Bootstrap 5
   ================================================================= */
.navbar-toggler {
  /* Softer outline color for better visual balance */
  border: 2px solid var(--navbar-toggler-border, #8a8a8a) !important;
  border-radius: 6px !important;
  background-color: rgba(255, 255, 255, 0.95) !important;
  padding: 8px 10px !important;
}

.navbar-toggler:focus {
  box-shadow: 0 0 0 3px var(--brand-primary-light, rgba(15, 117, 189, 0.4)) !important;
  outline: none !important;
}

.navbar-toggler-icon {
  width: 1.5em !important;
  height: 1.5em !important;
  /* Use a lighter stroke color for the hamburger lines */
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23888888' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}

/* =================================================================
   9B. NAVBAR BACKDROP - Dims background when mobile menu open
   ================================================================= */
.navbar-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999; /* Below navbar (1000) so toggler stays clickable */
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.navbar-backdrop.show {
  display: block;
  opacity: 1;
  pointer-events: auto;
}

/* =================================================================
   10. SCROLLED STATE - Like DNAR
   ================================================================= */
.navbar.scrolled {
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1) !important;
  background-color: rgba(255, 255, 255, 0.98) !important;
}

/* =================================================================
   11. ACCESSIBILITY - WCAG 2.2 AA Compliance
   ================================================================= */
/* Exclude .navbar-toggler - its display is controlled by Bootstrap responsive breakpoints */
.navbar button:not(.navbar-toggler),
.navbar a,
.navbar .nav-link,
.navbar .dropdown-item {
  min-height: 44px !important; /* Touch target size */
  display: flex !important;
  align-items: center !important;
}

/* Focus states */
.navbar-nav .nav-link:focus,
.navbar .dropdown-toggle:focus,
.navbar .dropdown-item:focus {
  outline: 2px solid var(--md3-primary, #4A90E2) !important;
  outline-offset: 2px !important;
}

/* =================================================================
   12. FIXES FOR BOOTSTRAP 5 CONFLICTS
   ================================================================= */
/* Remove Bootstrap 5's default transitions that conflict */
.navbar-collapse.collapsing {
  transition: height 0.35s ease !important;
}

/* Fix dropdown positioning */
.navbar .dropdown-menu[data-bs-popper] {
  margin-top: 0.5rem !important;
}

/* Desktop-specific dropdown improvements */
@media (min-width: 992px) {
  /* Ensure navbar doesn't cut off dropdowns */
  .navbar {
    overflow: visible !important;
  }
  .navbar .dropdown-menu {
    position: absolute !important;
    transform: none !important; /* Remove any transform */
    max-height: calc(100vh - 100px) !important; /* CRITICAL: Fit dropdowns in viewport with internal scrolling */
    overflow-y: auto !important; /* Internal scrolling when content exceeds viewport */
  }
  /* Language dropdown specific */
  .navbar .language-menu {
    max-height: calc(100vh - 100px) !important;
    overflow-y: auto !important;
  }
  /* Right-align language dropdown on desktop */
  .navbar .nav-language-btn + .dropdown-menu {
    right: 0 !important;
    left: auto !important;
  }
  /* Remove text wrapping constraint on desktop */
  .navbar .dropdown-item {
    white-space: normal !important; /* Allow wrapping for long items */
    min-width: 200px !important;
  }
  /* Make Explore dropdown wider for better readability */
  .navbar #exploreDropdownButton + .dropdown-menu {
    min-width: 350px !important;
  }
}
.navbar .dropdown-toggle.show {
  background-color: var(--md3-primary, #0a5b8a) !important;
  color: var(--md3-on-primary, #fff) !important;
  border-color: var(--md3-primary, #0a5b8a) !important;
}

/* STRONG ANTI-CLIPPING FIX FOR DROPDOWNS - Added 2025-11-06 by Claude Code */
.navbar, .navbar-collapse, .navbar-nav {
  overflow: visible !important;
}

/* Desktop dropdowns - no height constraints */
@media (min-width: 992px) {
  .dropdown-menu {
    position: absolute !important;
    overflow: visible !important;
    z-index: 1050 !important;
    max-height: none !important;
  }
}
/* Mobile dropdowns - constrained height with scroll */
@media (max-width: 991px) {
  .dropdown-menu {
    overflow-y: auto !important;
    max-height: 70vh !important;
  }
}
/* Ensure language text is visible on desktop too */
.nav-language-btn .language-text {
  display: inline !important;
}

/* Signup link color without inline styles */
.navbar-nav .nav-link.nav-link-signup {
  color: #e60000 !important;
}

.navbar-nav .nav-link.nav-link-signup:hover,
.navbar-nav .nav-link.nav-link-signup:focus {
  color: #cc0000 !important;
}

/* =================================================================
   13. DEFINITIVE HAMBURGER FIX - DESKTOP ONLY
   Added: Jan 11, 2026
   Problem: Multiple !important rules were overriding Bootstrap's
   responsive behavior, causing hamburger to show on desktop.
   Solution: Maximum specificity override at end of cascade.
   NOTE: Only display:none is needed - other properties are redundant.
   ================================================================= */
@media (min-width: 992px) {
  /* Hide ALL hamburger/toggle buttons on desktop (992px+) */
  .navbar .navbar-toggler,
  .navbar-expand-lg .navbar-toggler,
  .navbar-expand-xl .navbar-toggler,
  .nav-beautiful-toggle,
  button[aria-label="Toggle navigation"] {
    display: none !important;
  }
}
/* Targeting more specifically using the added class */
.services-li button {
  font-family: "Raleway", Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 350;
  color: #5c5d61;
  background-color: #f8f8f8;
  border-radius: 7px;
  border-color: #4b4949;
  border-style: solid;
  border-width: 1px;
  text-align: left;
}

.language-container {
  padding-left: 20px;
  padding-right: 20px;
}

.languages {
  z-index: 997;
  position: relative;
}

.language-button {
  color: #5c5d61;
  background-color: #f8f8f8;
  border-radius: 7px;
  border: 1px solid #4b4949;
  font-family: "Raleway", Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 350;
  text-align: left;
  padding: 5px 10px;
  transition: background-color 0.3s ease;
}

.language-button:hover, .language-button:focus {
  background-color: #0a5b8a;
  color: #fff;
}

.language-image {
  width: 30px;
  height: 30px;
  padding-right: 5px;
}

/* Desktop: No height constraints - let dropdowns be fully visible */
@media (min-width: 992px) {
  .dropdown-menu {
    min-width: 210px;
    max-width: 90vw;
    /* NO max-height on desktop - dropdowns should be fully visible */
    margin-top: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
  }
}
/* Mobile: Constrain height to prevent overflow */
@media (max-width: 991px) {
  .dropdown-menu {
    min-width: 210px;
    max-width: 90vw;
    max-height: 70vh;
    overflow-y: auto;
    margin-top: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
  }
}
.language-item a {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #767676;
  padding: 5px 10px;
}

.language-item {
  border-bottom: 1px solid #767676;
}

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

.language-item:hover {
  background-color: #0d75bd;
}

.flag-image {
  width: 25px;
  height: 25px;
  padding-right: 5px;
}

/* Additional responsive or universal styling can be added below */
.nav-item {
  margin: 0 10px;
}

.nav-link {
  padding: 10px 0;
}

.navbar-nav {
  align-items: center;
}

/* ========================================
   HOVER EFFECT OVERRIDES - V8.5
   Disable unwanted transform effects on specific sections
   ======================================== */
/* Disable hover transforms on DNA/Science section icons */
.dna-section img:hover,
.dna-icon:hover,
.science-icon:hover,
.science-icon-container img:hover,
.feature-icon:hover,
.iconss i:hover,
.service img:hover,
.service:hover img,
#why-dna img:hover,
#why-dna .icon:hover,
.why-section img:hover,
.feature img:hover,
.features-section img:hover {
  transform: none !important;
  transition: opacity 0.3s ease !important; /* Keep opacity transition only */
  -webkit-transform: none !important;
  -moz-transform: none !important;
  -o-transform: none !important;
}

/* Disable pivot/rotate effects */
.dna-section *:hover,
.science-section *:hover {
  transform: none !important;
  rotate: none !important;
}

/* Override any scale effects on DNA icons */
.hover-scale.dna-icon:hover,
.hover-lift.dna-icon:hover,
.hover-brightness.dna-icon:hover {
  transform: none !important;
  filter: none !important;
}

/* Keep button hover effects but remove from images */
.btn:hover,
.button:hover,
.cta-button:hover {
  /* Buttons can still have hover effects */
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Specifically target and disable the service icon transforms */
.iconss span:before,
.iconss span:after {
  transition: none !important;
}

.service:hover .iconss i {
  transform: none !important;
}

/* Disable card lift effects on DNA-related cards */
.dna-card:hover,
.science-card:hover,
.feature-card:hover {
  transform: none !important;
  box-shadow: var(--shadow-md) !important; /* Keep subtle shadow only */
}

/* Remove Bootstrap 5 dropdown carets from navbar */
.navbar-nav .dropdown-toggle::after {
  display: none !important;
}

/* ============================================================
 * 8. PLATFORM-SPECIFIC THEMING
 * Note: Themes are compiled separately per platform
 * Individual theme files in brand_identity/ directory
 * ============================================================ */
/* End of main.scss - Compiles to app.css + app.min.css */