/* ==========================================================================
   NEURAL PARTNERS DESIGN SYSTEM
   Official brand implementation - 2025 Edition
   "Mindfully Modern. Quietly Disruptive."
   ========================================================================== */

/* ==========================================================================
   DESIGN TOKENS - OFFICIAL BRAND COLORS (DARK-FIRST THEME)
   ========================================================================== */


:root {
  /* PRIMARY COLORS - Ultra Dark Neural Partners Palette */
  --neural-black: #000000;          /* Pure black for primary background */
  --neural-deep-black: #030303;     /* Even deeper black for contrast */
  --neural-dark-grey: #929293;      /* Ultra dark grey for subtle variations */
  --neural-mid-grey: #121212;       /* Darker mid grey for elements */
  --neural-grey: #1a1a1a;           /* Dark grey for borders */
  --neural-light-grey: #9ca3af;     /* Light grey for text */
  --neural-white: #FFFFFF;
  --neural-soft-neutral: #080808;   /* Ultra subtle background variation */
  
  /* SECONDARY COLORS - Ultra Dark Neural Brand Palette */
  --neural-purple: #3c1361;         /* Even deeper purple for accents */
  --neural-dark-purple: #1e1b4b;    /* Ultra dark purple for backgrounds */
  --neural-soft-purple: #0f0d1b;    /* Nearly black purple for subtle effects */
  --neural-soft-blue: #74EEDD;      /* Ultra dark slate blue */
  --neural-orange: #d97706;         /* Deeper orange for highlights */
  
  /* RGB VALUES for transparency and overlays - Ultra dark scheme */
  --neural-black-rgb: 0, 0, 0;
  --neural-deep-black-rgb: 3, 3, 3;
  --neural-dark-grey-rgb: 10, 10, 10;
  --neural-mid-grey-rgb: 18, 18, 18;
  --neural-grey-rgb: 26, 26, 26;
  --neural-light-grey-rgb: 156, 163, 175;
  --neural-purple-rgb: 60, 19, 97;
  --neural-dark-purple-rgb: 30, 27, 75;
  --neural-soft-purple-rgb: 15, 13, 27;
  --neural-soft-blue-rgb: 15, 23, 42;
  --neural-orange-rgb: 217, 119, 6;
  --neural-white-rgb: 255, 255, 255;
  
  /* TYPOGRAPHY - Official Neural Partners Fonts */
  --font-primary: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
  --font-creative: 'Sora', system-ui, sans-serif;
  --font-branded: 'Adolphine', serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  --font-fallback: 'Arial Narrow', Arial, sans-serif;
  
  /* FONT WEIGHTS - Neural Brand Specification */
  --font-weight-extra-light: 200; /* Headings */
  --font-weight-light: 300;       /* Body */
  --font-weight-normal: 400;      /* Fallback */
  --font-weight-medium: 500;      /* Emphasis */
  --font-weight-semibold: 600;    /* Strong emphasis */
  --font-weight-bold: 700;
  
  /* SPACING SYSTEM - Modular scale for consistency */
  --space-xs: 0.25rem;    /* 4px */
  --space-sm: 0.5rem;     /* 8px */
  --space-md: 1rem;       /* 16px */
  --space-lg: 1.5rem;     /* 24px */
  --space-xl: 2rem;       /* 32px */
  --space-2xl: 3rem;      /* 48px */
  --space-3xl: 4rem;      /* 64px */
  --space-4xl: 6rem;      /* 96px */
  --space-5xl: 6rem;      /* 96px */
  
  /* BORDER RADIUS - Consistent curves */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
  
  /* SHADOWS - Subtle depth following brand minimalism */
  --shadow-sm: 0 1px 2px 0 rgba(var(--neural-black-rgb), 0.05);
  --shadow-md: 0 4px 6px -1px rgba(var(--neural-black-rgb), 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(var(--neural-black-rgb), 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(var(--neural-black-rgb), 0.1);
  
  /* GRADIENTS - Neural brand treatments */
  --gradient-neural: linear-gradient(135deg, var(--neural-purple) 0%, var(--neural-orange) 100%);
  --gradient-subtle: linear-gradient(135deg, var(--neural-soft-neutral) 0%, var(--neural-white) 100%);
  --gradient-energy: linear-gradient(135deg, var(--neural-orange) 0%, var(--neural-soft-blue) 100%);
  --gradient-glow: radial-gradient(circle at 50% 50%, rgba(var(--neural-purple-rgb), 0.1) 0%, transparent 70%);
  
  /* TRANSITIONS - Smooth, intentional motion */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
  
  /* Z-INDEX SCALE - Layering system */
  --z-dropdown: 1000;
  --z-sticky: 1010;
  --z-fixed: 1020;
  --z-modal-backdrop: 1030;
  --z-modal: 1040;
  --z-popover: 1050;
  --z-tooltip: 1100;

  /* Layout */
  --header-height: 90px;
  --container-max-width: 1600px;

  /* COLORS - Additional Neural Brand Colors */
  --neural-blue: #74EEDD;
  --neural-blue-rgb: 116, 238, 221;

  /* ANIMATIONS */
  --animation-fade: 0.5s ease;
  --animation-slide: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   TYPOGRAPHY SYSTEM - Neural Partners Official
   ========================================================================== */

/* Base typography following brand guidelines - Dark Theme */
.neural-text {
  font-family: var(--font-primary);
  color: var(--neural-white);
  line-height: 1.6;
}

/* Global dark theme - body defaults */
body {
  background: var(--neural-black);
  color: var(--neural-white);
  font-family: var(--font-primary);
  margin: 0;
  padding: 0;
}

/* Main content area - Global spacing */
main {
    min-height: 100vh;
}

/* Component Loading States */
[data-component] {
  opacity: 0;
  min-height: 0;
  transition: opacity 0.3s ease;
}

/* HEADINGS - Open Sans Extra Light (200) - Dark Theme */
.neural-h1,
.neural-heading-xl {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-extra-light);
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--neural-white);
  margin-bottom: var(--space-xl);
  

}

.neural-h2,
.neural-heading-lg {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-extra-light);
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--neural-white);
  margin-bottom: var(--space-lg);
}

.neural-h3,
.neural-heading-md {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-extra-light);
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.3;
  color: var(--neural-white);
  margin-bottom: var(--space-md);
}

.neural-h4,
.neural-heading-sm {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-light);
  font-size: 1.25rem;
  line-height: 1.4;
  color: var(--neural-white);
  margin-bottom: var(--space-md);
}

.neural-h4-orange {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-medium);
  font-size: 0.85rem;
  color: var(--neural-orange) !important;
  margin-bottom: var(--space-md);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* BODY TEXT - Open Sans Light (300) - Dark Theme */
.neural-body,
.neural-text-base {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-light);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--neural-light-grey);
  margin-bottom: var(--space-lg);
}

.neural-body-lg {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-light);
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--neural-light-grey);
}

.neural-body-sm {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-light);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--neural-grey);
}

/* NEURAL THOUGHTS - Special quote styling */
.neural-thought {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-extra-light);
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  line-height: 1.4;
  color: var(--neural-purple);
  font-style: italic;
  text-align: center;
  margin: var(--space-2xl) 0;
}

.neural-thought::before {
  content: '"';
  font-size: 1.5em;
  color: var(--neural-soft-blue);
  margin-right: var(--space-xs);
}

.neural-thought::after {
  content: '"';
  font-size: 1.5em;
  color: var(--neural-soft-blue);
  margin-left: var(--space-xs);
}

/* TAGLINES - Brand positioning statements */
.neural-tagline {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-light);
  font-size: 1.125rem;
  color: var(--neural-grey);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-md);
}

.neural-tagline--primary::after {
  content: "Mindfully Modern.";
}

/* Removed ::after content - text is now in HTML for better SEO and accessibility */

/* Neural Emphasis - Subtle highlighting for key terms */
.neural-emphasis {
  font-weight: var(--font-weight-medium);
  position: relative;
  transition: all var(--transition-normal);
}

.neural-emphasis:hover {
  transform: translateY(-1px);
  text-shadow: 0 2px 8px rgba(var(--neural-orange-rgb), 0.3);
}

/* ==========================================================================
   BUTTON SYSTEM - Neural Partners UI Components
   ========================================================================== */

.neural-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md) var(--space-xl);
  font-family: var(--font-primary);
  font-weight: var(--font-weight-light);
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
  min-height: 44px; /* Touch-friendly */
}

.neural-btn:focus {
  outline: 2px solid var(--neural-soft-blue);
  outline-offset: 2px;
}

/* PRIMARY BUTTON - Neural Purple */
.neural-btn--primary {
  background: var(--neural-purple);
  color: var(--neural-white);
  border-color: var(--neural-purple);
}

.neural-btn--primary:hover {
  background: rgba(var(--neural-purple-rgb), 0.9);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* SECONDARY BUTTON - Neural Orange */
.neural-btn--secondary {
  background: var(--neural-orange);
  color: var(--neural-white);
  border-color: var(--neural-orange);
}

.neural-btn--secondary:hover {
  background: rgba(var(--neural-orange-rgb), 0.9);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* OUTLINE BUTTON */
.neural-btn--outline {
  background: transparent;
  color: var(--neural-white);
  border-color: var(--neural-purple);
}

.neural-btn--outline:hover {
  background: var(--neural-purple);
  color: var(--neural-white);
}

/* GHOST BUTTON */
.neural-btn--ghost {
  background: transparent;
  color: var(--neural-black);
  border-color: transparent;
}

.neural-btn--ghost:hover {
  background: var(--neural-soft-neutral);
  color: var(--neural-purple);
}

/* BUTTON SIZES */
.neural-btn--sm {
  padding: var(--space-sm) var(--space-lg);
  font-size: 0.875rem;
  min-height: 36px;
}

.neural-btn--lg {
  padding: var(--space-lg) var(--space-2xl);
  font-size: 1.125rem;
  min-height: 52px;
}

.neural-btn--xl {
  padding: var(--space-xl) var(--space-3xl);
  font-size: 1.25rem;
  min-height: 60px;
}

/* ==========================================================================
   CARD SYSTEM - Content containers
   ========================================================================== */

.neural-card {
  background: rgba(0, 0, 0, 0.8);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: 0 8px 32px rgba(var(--neural-purple-rgb), 0.2);
  transition: all var(--transition-normal);
  border: 1px solid var(--neural-orange);
  position: relative;
  overflow: hidden;
}

.neural-card::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  background: linear-gradient(90deg, var(--neural-orange), var(--neural-purple));
  border-radius: var(--radius-lg);
  z-index: -1;
  opacity: 0.2;
}

.neural-card:hover {
  box-shadow: 0 12px 40px rgba(var(--neural-purple-rgb), 0.4);
  transform: translateY(-4px);
}

.neural-card:hover::before {
  opacity: 0.3;
  transition: opacity var(--transition-normal);
}

.neural-card--gradient {
  background: var(--gradient-neural);
  color: var(--neural-white);
}

/* Card Title Enhancement */
.neural-card .neural-h3 {
  color: var(--neural-white);
  margin-bottom: var(--space-md);
}

/* Card Icon Enhancement */
.neural-card [style*="width: 48px"] {
  position: relative;
  z-index: 1;
  transition: transform var(--transition-normal);
}

.neural-card:hover [style*="width: 48px"] {
  transform: scale(1.05);
}

/* Card content area */
.neural-card__content {
  padding: var(--space-xl);
  flex: 1;
}

/* ==========================================================================
   GRID SYSTEM - Layout components
   ========================================================================== */

.neural-grid {
  display: grid;
  gap: var(--space-xl);
}

.neural-grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.neural-grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.neural-grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

@media (min-width: 768px) {
  .neural-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .neural-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .neural-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ==========================================================================
   SECTIONS & CONTAINERS - Page layout
   ========================================================================== */

.neural-section {
  padding: var(--space-3xl) 0;
  position: relative;
}

.neural-section:first-child {
  padding-top: 0;
}

.neural-section--hero {
  min-height: calc(100vh - var(--header-height));
  display: flex;
  align-items: center;
  padding: var(--space-2xl) 0;
}

.neural-section--dark {
  background: var(--neural-black);
  color: var(--neural-white);
}

.neural-section--gradient {
  background: var(--gradient-neural);
  color: var(--neural-white);
}

.neural-section--neutral {
  background: var(--neural-soft-neutral);
}

.neural-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-xl);
}

.neural-container--narrow {
  max-width: 800px;
}

.neural-container--wide {
  max-width: 1400px;
}

.neural-container--chat {
  max-width: 1200px;
}

/* ==========================================================================
   BRAND ELEMENTS - Neural-specific components
   ========================================================================== */

/* Neural Engine™ Branding */
.neural-engine {
  position: relative;
  display: inline-block;
  background-color: var(--neural-black);
  color: var(--neural-white);
  overflow: hidden;
}

.neural-engine::after {
  content: "™";
  font-size: 0.7em;
  vertical-align: super;
  color: var(--neural-orange);
}

.neural-engine::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--gradient-glow);
  opacity: 0.5;
  pointer-events: none;
}

/* Neural Stack™ Branding */
.neural-stack {
  position: relative;
  display: inline-block;
}

.neural-stack::after {
  content: "STACK";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 8rem;
  font-weight: 700;
  color: rgba(var(--neural-white-rgb), 0.03);
  z-index: -1;
}

.neural-network-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, rgba(var(--neural-purple-rgb), 0.1) 0%, transparent 70%);
}

/* Grid texture backgrounds */
.neural-grid-texture {
  background-image: 
    linear-gradient(rgba(var(--neural-grey-rgb), 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--neural-grey-rgb), 0.05) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* ==========================================================================
   FOUNDER PERSONAS - Character styling
   ========================================================================== */

.neural-persona {
  padding: var(--space-xl);
  border-left: 4px solid var(--neural-orange);
  background: var(--neural-soft-neutral);
  margin: var(--space-xl) 0;
}

.neural-persona__name {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-light);
  color: var(--neural-purple);
  margin-bottom: var(--space-sm);
}

.neural-persona__title {
  font-size: 0.875rem;
  color: var(--neural-grey);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-md);
}

/* ==========================================================================
   SOCIAL & CONTENT ELEMENTS
   ========================================================================== */

.neural-quote-card {
  background: var(--gradient-neural);
  color: var(--neural-white);
  padding: var(--space-2xl);
  border-radius: var(--radius-lg);
  text-align: center;
  position: relative;
}

.neural-quote-card__quote {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-extra-light);
  font-size: 1.5rem;
  line-height: 1.4;
  margin-bottom: var(--space-lg);
}

.neural-quote-card__author {
  font-size: 0.875rem;
  opacity: 0.9;
}

/* Neural Thoughts hashtag styling */
.neural-hashtag {
  color: var(--neural-soft-blue);
  font-weight: var(--font-weight-normal);
  text-decoration: none;
}

.neural-hashtag:hover {
  color: var(--neural-orange);
}

/* ==========================================================================
   ANIMATIONS & INTERACTIONS - Mindfully modern motion
   ========================================================================== */

/* Subtle hover animations */
.neural-hover-lift {
  transition: transform var(--transition-normal);
}

.neural-hover-lift:hover {
  transform: translateY(-2px);
}

/* Fade in animation - Progressive enhancement approach */
.neural-fade-in {
  opacity: 1;
  transform: translateY(0);
  transition: all var(--transition-slow);
}

/* Only hide content when JavaScript explicitly manages animations */
.neural-fade-in.fade-managed {
  opacity: 0;
  transform: translateY(20px);
}

.neural-fade-in.is-visible,
.neural-fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Glow effect for emphasis */
.neural-glow {
  position: relative;
}

.neural-glow::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: inherit;
  border-radius: inherit;
  filter: blur(8px);
  opacity: 0.3;
  z-index: -1;
}

/* ==========================================================================
   RESPONSIVE DESIGN - Mobile-first approach
   ========================================================================== */

@media (max-width: 768px) {
  .neural-container {
    padding: 0 var(--space-lg);
  }
  
  .neural-section {
    padding: var(--space-3xl) 0;
  }
  
  .neural-card {
    padding: var(--space-lg);
  }
  
  .neural-btn--lg {
    padding: var(--space-md) var(--space-xl);
    font-size: 1rem;
  }

  :root {
    --header-height: 70px;
    --space-2xl: 2rem;
    --space-3xl: 3rem;
    --space-4xl: 4rem;
  }
}

/* ==========================================================================
   ACCESSIBILITY & PERFORMANCE
   ========================================================================== */

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .neural-fade-in,
  .neural-hover-lift,
  .neural-btn,
  .neural-card {
    transition: none;
    animation: none;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .neural-btn--outline {
    border-width: 3px;
  }
  
  .neural-card {
    border-width: 2px;
  }
}

/* Focus management for better accessibility */
.neural-focus-ring:focus-visible {
  outline: 2px solid var(--neural-soft-blue);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ==========================================================================
   UTILITY CLASSES - Quick styling helpers
   ========================================================================== */

/* Text colors */
.neural-text-black { color: var(--neural-black); }
.neural-text-grey { color: var(--neural-grey); }
.neural-text-light-grey { color: var(--neural-light-grey); }
.neural-text-purple { color: var(--neural-purple); }
.neural-text-blue { color: var(--neural-soft-blue); }
.neural-text-orange { color: var(--neural-orange); }
.neural-text-white { color: var(--neural-white); }

/* Background colors */
.neural-bg-black { background-color: var(--neural-black); }
.neural-bg-dark-grey { background-color: var(--neural-dark-grey); }
.neural-bg-grey { background-color: var(--neural-grey); }
.neural-bg-light-grey { background-color: var(--neural-light-grey); }
.neural-bg-purple { background-color: var(--neural-purple); }
.neural-bg-blue { background-color: var(--neural-soft-blue); }
.neural-bg-orange { background-color: var(--neural-orange); }
.neural-bg-white { background-color: var(--neural-white); }
.neural-bg-neutral { background-color: var(--neural-soft-neutral); }

/* Spacing utilities */
.neural-m-0 { margin: 0; }
.neural-mb-sm { margin-bottom: var(--space-sm); }
.neural-mb-md { margin-bottom: var(--space-md); }
.neural-mb-lg { margin-bottom: var(--space-lg); }
.neural-mb-xl { margin-bottom: var(--space-xl); }
.neural-mb-2xl { margin-bottom: var(--space-2xl); }

/* Text alignment */
.neural-text-center { text-align: center; }

/* Display utilities */
.neural-hidden { display: none; }
.neural-block { display: block; }
.neural-inline { display: inline; }
.neural-inline-block { display: inline-block; }
.neural-flex { display: flex; }

/* Flexbox utilities */
.neural-items-center { align-items: center; }
.neural-items-start { align-items: flex-start; }
.neural-items-end { align-items: flex-end; }
.neural-justify-center { justify-content: center; }
.neural-justify-between { justify-content: space-between; }
.neural-justify-around { justify-content: space-around; }
.neural-justify-evenly { justify-content: space-evenly; }
.neural-flex-col { flex-direction: column; }
.neural-flex-row { flex-direction: row; }
.neural-flex-wrap { flex-wrap: wrap; }
.neural-flex-nowrap { flex-wrap: nowrap; }

/* Gap utilities */
.neural-gap-xs { gap: var(--space-xs); }
.neural-gap-sm { gap: var(--space-sm); }
.neural-gap-md { gap: var(--space-md); }
.neural-gap-lg { gap: var(--space-lg); }
.neural-gap-xl { gap: var(--space-xl); }

/* Padding utilities */
.neural-p-xs { padding: var(--space-xs); }
.neural-p-sm { padding: var(--space-sm); }
.neural-p-md { padding: var(--space-md); }
.neural-p-lg { padding: var(--space-lg); }
.neural-p-xl { padding: var(--space-xl); }

.neural-pt-xs { padding-top: var(--space-xs); }
.neural-pt-sm { padding-top: var(--space-sm); }
.neural-pt-md { padding-top: var(--space-md); }
.neural-pt-lg { padding-top: var(--space-lg); }
.neural-pt-xl { padding-top: var(--space-xl); }

.neural-pb-xs { padding-bottom: var(--space-xs); }
.neural-pb-sm { padding-bottom: var(--space-sm); }
.neural-pb-md { padding-bottom: var(--space-md); }
.neural-pb-lg { padding-bottom: var(--space-lg); }
.neural-pb-xl { padding-bottom: var(--space-xl); }

.neural-pl-xs { padding-left: var(--space-xs); }
.neural-pl-sm { padding-left: var(--space-sm); }
.neural-pl-md { padding-left: var(--space-md); }
.neural-pl-lg { padding-left: var(--space-lg); }
.neural-pl-xl { padding-left: var(--space-xl); }

.neural-pr-xs { padding-right: var(--space-xs); }
.neural-pr-sm { padding-right: var(--space-sm); }
.neural-pr-md { padding-right: var(--space-md); }
.neural-pr-lg { padding-right: var(--space-lg); }
.neural-pr-xl { padding-right: var(--space-xl); }

/* ==========================================================================
   ANIMATIONS - Neural-specific keyframes
   ========================================================================== */

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

/* ==========================================================================
   PRINT STYLES - Brand consistency in print
   ========================================================================== */

@media print {
  .neural-section {
    page-break-inside: avoid;
  }
  
  .neural-card {
    box-shadow: none;
    border: 1px solid var(--neural-grey);
  }
  
  .neural-btn {
    border: 2px solid var(--neural-black);
    background: transparent !important;
    color: var(--neural-black) !important;
  }
}

/* Neural Engine Specific Styles */
.neural-engine {
  position: relative;
  background-color: var(--neural-black);
  color: var(--neural-white);
  overflow: hidden;
}

.neural-engine::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--gradient-glow);
  opacity: 0.5;
  pointer-events: none;
}

.neural-engine-grid {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    linear-gradient(to right, rgba(var(--neural-purple-rgb), 0.1) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(var(--neural-purple-rgb), 0.1) 1px, transparent 1px);
  background-size: 50px 50px;
  opacity: 0.15;
  pointer-events: none;
}

/* ===== NEURAL PERFORMANCE LANE SYSTEM ===== */
/* Fast lane optimizations for low-end devices and slow connections */
/* Conservative approach - only affects truly limited devices */

/* Fast Lane: Disable heavy animations and effects */
.neural-fast-lane {
  /* Reduce animation complexity */
  --animation-fade: 0.2s ease;
  --animation-slide: 0.1s ease;
}

.neural-fast-lane * {
  /* Disable complex transforms and animations */
  animation-duration: 0.1s !important;
  transition-duration: 0.1s !important;
}

/* Fast Lane: Lightweight neural background alternatives */
.neural-fast-lane .neural-canvas-container {
  /* Hide heavy 3D canvas */
  display: none !important;
}

.neural-fast-lane .neural-canvas {
  /* Hide 3D canvas elements */
  display: none !important;
}

/* Fast Lane: CSS-only neural network background */
.neural-fast-lane .neural-hero {
  position: relative;
  background: linear-gradient(135deg, var(--neural-purple) 0%, #1a0a1d 100%);
}

.neural-fast-lane .neural-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 30%, var(--neural-soft-blue) 0%, transparent 2px),
    radial-gradient(circle at 80% 70%, var(--neural-orange) 0%, transparent 2px),
    radial-gradient(circle at 40% 80%, var(--neural-soft-blue) 0%, transparent 2px),
    radial-gradient(circle at 90% 20%, var(--neural-purple) 0%, transparent 2px);
  opacity: 0.3;
  z-index: 1;
}

/* Fast Lane: Simplified particle effects */
.neural-fast-lane .neural-section {
  position: relative;
}

.neural-fast-lane .neural-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 10% 20%, var(--neural-soft-blue) 0%, transparent 1px),
    radial-gradient(circle at 80% 50%, var(--neural-orange) 0%, transparent 1px),
    radial-gradient(circle at 30% 80%, var(--neural-soft-blue) 0%, transparent 1px);
  opacity: 0.2;
  z-index: 0;
  pointer-events: none;
}

/* Fast Lane: Disable complex CSS effects */
.neural-fast-lane .neural-hover-lift {
  transform: none !important;
}

.neural-fast-lane .neural-hover-lift:hover {
  transform: none !important;
}

.neural-fast-lane .neural-fade-in {
  opacity: 1 !important;
  transform: none !important;
}

/* Fast Lane: Simplified neural engine section */
.neural-fast-lane #neural-engine {
  position: relative;
}

.neural-fast-lane #neural-engine::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  margin: -100px 0 0 -100px;
  border: 2px solid var(--neural-soft-blue);
  border-radius: 50%;
  opacity: 0.6;
  z-index: 1;
}

.neural-fast-lane #neural-engine::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border: 1px solid var(--neural-orange);
  border-radius: 50%;
  opacity: 0.4;
  z-index: 1;
}

/* Fast Lane: Hide loading states and complex elements */
.neural-fast-lane .loading-container,
.neural-fast-lane .loading-overlay,
.neural-fast-lane .neural-loader {
  display: none !important;
}

/* Fast Lane: Simplified typography effects */
.neural-fast-lane .neural-typewriter {
  /* No typewriter effect - show text immediately */
  animation: none !important;
}

.neural-fast-lane .neural-typewriter .char {
  opacity: 1 !important;
  animation: none !important;
}

/* Fast Lane: Reduce image loading strain */
.neural-fast-lane img[loading="lazy"] {
  loading: eager;
}

/* Fast Lane: Simplify complex layouts */
.neural-fast-lane .neural-grid {
  display: block !important;
}

.neural-fast-lane .neural-grid > * {
  margin-bottom: var(--space-lg);
}

/* Premium Lane: Enhanced effects (default behavior preserved) */
.neural-premium-lane {
  /* Premium lane maintains all existing functionality */
  /* This class exists for explicit targeting if needed */
}

/* Fast Lane: Media query overrides for safety */
@media (max-width: 768px) {
  /* On mobile, be extra conservative with fast lane */
  .neural-fast-lane .neural-section::before {
    display: none;
  }
  
  .neural-fast-lane .neural-hero::before {
    opacity: 0.1;
  }
}

/* Fast Lane: Reduced motion preferences override */
@media (prefers-reduced-motion: reduce) {
  .neural-fast-lane *,
  .neural-premium-lane * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===== PHASE 2: INTELLIGENT 3D LOADING ===== */
/* Progressive Enhancement: Render text first, load 3D after LCP */

/* Step 1: Hide 3D models initially to prevent render blocking */
.neural-engine-canvas,
.neural-brain-container,
.neural-3d-section canvas,
#neural-engine-canvas,
#brain-container {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

/* Step 2: Show 3D models only after LCP and user interaction */
.neural-3d-loaded .neural-engine-canvas,
.neural-3d-loaded .neural-brain-container,
.neural-3d-loaded .neural-3d-section canvas,
.neural-3d-loaded #neural-engine-canvas,
.neural-3d-loaded #brain-container {
    opacity: 1;
}

/* Step 3: Critical text rendering optimization */
.hero-title {
    /* Ensure text renders immediately without waiting for JS */
    font-display: swap;
    contain: layout;
    will-change: auto; /* Remove will-change to avoid GPU overhead */
}

.hero-highlight {
    /* Prevent layout shifts during 3D loading */
    contain: layout;
    display: inline-block;
    /* Remove transforms that might block rendering */
    transform: none !important;
}

/* Step 4: Fast Lane 3D Model Handling */
.neural-fast-lane .neural-engine-canvas,
.neural-fast-lane .neural-brain-container,
.neural-fast-lane .neural-3d-section canvas,
.neural-fast-lane #neural-engine-canvas,
.neural-fast-lane #brain-container {
    /* Fast lane: Never load 3D models */
    display: none !important;
}

/* Step 5: Intersection Observer Loading States */
.neural-3d-section {
    /* Initially show loading placeholder */
    position: relative;
}

.neural-3d-section::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border: 3px solid rgba(116, 238, 221, 0.3);
    border-top: 3px solid var(--neural-blue);
    border-radius: 50%;
    animation: neural-loading-spin 1s linear infinite;
    opacity: 1;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.neural-3d-loaded .neural-3d-section::before {
    opacity: 0;
    pointer-events: none;
}

@keyframes neural-loading-spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Step 6: Performance-First Loading Strategy */
.neural-performance-optimized {
    /* Ensure critical path is clear */
    contain: layout style;
}

.neural-performance-optimized .hero-section {
    /* Remove any blocking animations until after LCP */
    animation-delay: 0.1s;
}

/* Step 7: Advanced Fast Lane Features */
.neural-fast-lane .neural-particles,
.neural-fast-lane .neural-network-bg,
.neural-fast-lane .neural-complex-animations {
    display: none !important;
}

/* Fast lane CSS-only alternatives */
.neural-fast-lane .neural-bg-simple {
    background: linear-gradient(135deg, 
        rgba(51, 19, 59, 0.8) 0%,
        rgba(0, 0, 0, 0.9) 50%,
        rgba(51, 19, 59, 0.8) 100%);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}

/* ===== PHASE 2.1: HEADER LOGO LCP OPTIMIZATION ===== */
/* Fix: Header logo is now LCP element, need immediate rendering */

/* Step 1: Ensure header logo renders immediately */
.header ._logo_8p2po_43 img,
.header .logo img,
[class*="logo"] img {
    /* Prevent layout shifts during logo loading */
    width: 225px;
    height: auto;
    display: block;
    
    /* Ensure immediate rendering without waiting for React */
    font-display: swap;
    
    /* Remove any transforms that might delay rendering */
    transform: none !important;
    will-change: auto;
}

/* Step 2: Header optimization for immediate visibility */
.header,
[id*="header"],
[class*="header"] {
    /* Ensure header renders immediately without React delays */
    opacity: 1 !important;
    visibility: visible !important;
    
    /* Remove any animations that might delay initial render */
    animation: none !important;
    transition: none !important;
}

/* Step 3: Logo container optimization */
._logoContainer_8p2po_60,
[class*="logoContainer"] {
    /* Prevent container from causing layout delays */
    display: block;
    
    /* Ensure proper sizing immediately */
    width: 225px;
    height: auto;
}

/* Step 4: Picture element optimization for LCP */
.header picture,
._logo_8p2po_43 picture {
    /* Ensure picture element doesn't delay rendering */
    display: block;
    width: 225px;
    height: auto;
}

/* Step 5: React component loading optimization */
#header-root {
    /* Ensure React mount point doesn't delay rendering */
    min-height: 100px; /* Prevent layout shift */
    contain: layout;
}

/* Loading state for React header */
#header-root:empty::before {
    content: '';
    display: block;
    width: 225px;
    height: auto;
    margin: 20px 0;
    background: linear-gradient(135deg, 
        rgba(51, 19, 59, 0.1) 0%,
        rgba(116, 238, 221, 0.1) 100%);
    border-radius: 4px;
    animation: neural-header-loading 1.5s ease-in-out infinite alternate;
}

@keyframes neural-header-loading {
    0% { opacity: 0.3; }
    100% { opacity: 0.7; }
}

/* Step 6: Critical logo preloading styles */
@media (max-width: 640px) {
    .header ._logo_8p2po_43 img,
    .header .logo img {
        width: 140px;
        height: auto;
    }
    
    ._logoContainer_8p2po_60,
    [class*="logoContainer"] {
        width: 140px;
        height: auto;
    }
    
    .header picture,
    ._logo_8p2po_43 picture {
        width: 140px;
        height: auto;
    }
}

@media (max-width: 1024px) and (min-width: 641px) {
    .header ._logo_8p2po_43 img,
    .header .logo img {
        width: 180px;
        height: auto;
    }
    
    ._logoContainer_8p2po_60,
    [class*="logoContainer"] {
        width: 180px;
        height: auto;
    }
    
    .header picture,
    ._logo_8p2po_43 picture {
        width: 180px;
        height: auto;
    }
}