/* ===== COLOR SYSTEM ===== */
:root {
  /* Base colors */
  --primary: #1A365D;
  --primary-dark: #142A4C;
  --primary-light: #2C4A7C;
  --secondary: #D4AF37;
  --secondary-dark: #BF9B29;
  --secondary-light: #E5C860;
  --accent: #4A6FA5;
  --accent-dark: #395885;
  --accent-light: #6A8ABD;
  
  /* Text colors */
  --text: #333333;
  --text-light: #666666;
  --text-dark: #222222;
  
  /* UI Colors */
  --light-gray: #f5f7fa;
  --white: #FFFFFF;
  --black: #000000;
  --success: #2ecc71;
  --warning: #f39c12;
  --danger: #FF3B30;
  
  /* Text colors */
  --text-on-dark: #FFFFFF;    /* White text for dark backgrounds */
  --text-on-light: #222222;   /* Dark text for light backgrounds */
  
  /* UI Colors */
  --success: #2ecc71;
  --warning: #f39c12;
  --danger: #FF3B30;
  
  /* Dark mode colors - To be used with @media (prefers-color-scheme: dark) */
  --dark-bg-primary: #121822;      /* Dark blue-gray background */
  --dark-bg-secondary: #1E2734;    /* Slightly lighter blue-gray */
  --dark-bg-tertiary: #2A3548;     /* Accent background color */
  --dark-text-primary: #EAEEF3;    /* Off-white for main text */
  --dark-text-secondary: #B0B8C4;  /* Light gray for secondary text */
  --dark-border: #3A4659;          /* Border color */
  --dark-gold: #F0CF65;            /* Brighter gold for dark backgrounds */
  --dark-gold-muted: #A38F3B;      /* Muted gold for secondary elements */
  --dark-card-bg: #1A202C;         /* Card background */
  --dark-input-bg: #2D3748;        /* Form input background */
}
  
  /* ===== TEXT CONTRAST IMPROVEMENTS ===== */
  /* Base text styling */
  body {
    color: var(--text-on-light);
    min-height: 100vh;
  }
  
  /* Text on dark sections */
  .hero, .differentiation, .cta, footer, .mobile-nav {
    color: var(--text-on-dark);
  }
  
  /* Paragraph text on dark backgrounds */
  .hero p, .differentiation p, .cta p {
    color: rgba(255, 255, 255, 0.9);
  }
  
  /* Mobile nav improvements */
  .mobile-nav-links a {
    color: white;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  }
  
  /* ===== FORM FIELD IMPROVEMENTS ===== */
  /* Base form control styling */
  .form-control {
    background-color: var(--white);
    color: var(--text-on-light);
    border: 1px solid #CCCCCC;
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  
  .form-control:focus {
    border-color: var(--secondary);
    box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.25);
  }
  
  /* Order form styling (dark background) */
  .order-form .form-control {
    background-color: rgba(255, 255, 255, 0.2);
    color: var(--text-on-dark);
    border: 1px solid rgba(255, 255, 255, 0.3);
  }
  
  /* Form validation styling */
  .form-control.error {
    border-color: var(--danger);
    border-width: 2px;
  }
  
  .form-error-message {
    color: var(--danger);
    font-weight: 600;
    padding: 8px 0;
    font-size: 14px;
    display: block;
  }
  
  .order-form .form-error-message {
    color: #FFB6B3;
    background-color: rgba(0, 0, 0, 0.2);
    padding: 8px;
    border-radius: 4px;
    margin-top: 4px;
  }
  
  /* ===== BUTTON IMPROVEMENTS ===== */
  /* Primary button - gold with dark text */
  .btn-primary {
    background: var(--secondary);
    color: var(--primary-dark);
    font-weight: 600;
    transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s;
  }
  
  .btn-primary:hover, .btn-primary:focus {
    background: var(--secondary-light);
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
    transform: translateY(-2px);
  }
  
  /* Secondary button - transparent with white border */
  .btn-secondary {
    background-color: transparent;
    color: var(--text-on-dark);
    border: 2px solid var(--text-on-dark);
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
  }
  
  .btn-secondary:hover, .btn-secondary:focus {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: var(--secondary);
    color: var(--secondary);
  }
  
  /* ===== EMAIL EXAMPLE FIXES ===== */
  .email-body {
    background-color: #F8F8F8;
    color: #222222;
    border: 1px solid #E5E5E5;
    word-break: break-word;
    overflow-wrap: break-word;
  }
  
  /* Fix highlighted text in emails */
  .highlight, 
  .email-body span[style*="background-color: rgba(212, 175, 55, 0.2)"] {
    background-color: rgba(212, 175, 55, 0.4) !important;
    color: #000000 !important;
    padding: 2px 4px;
    border-radius: 2px;
  }
  
  /* Fix tables in email examples */
  .email-body table {
    display: block;
    width: 100%;
    overflow-x: auto;
  }
  
  /* ===== ACCESSIBILITY IMPROVEMENTS ===== */
  a:focus, button:focus, input:focus, select:focus, textarea:focus {
    outline: 3px solid var(--secondary);
    outline-offset: 2px;
  }
  
  /* Dark mode styles are consolidated in the comprehensive dark mode section below */
  
  /* ===== MOBILE IMPROVEMENTS ===== */
  @media (max-width: 768px) {
    /* Slightly increase base font size */
    body {
      font-size: 18px;
      letter-spacing: 0.01em;
    }
    
    /* Improve text readability */
    p, li, .email-body {
      line-height: 1.6;
      margin-bottom: 16px;
    }
    
    /* More distinct headings */
    h1, h2, h3 {
      line-height: 1.3;
    }
    
    /* Fix hamburger menu */
    .hamburger-line {
      background-color: var(--primary);
      height: 3px;
    }
    
    /* Ensure calculator text is visible */
    .result-item {
      color: var(--text-on-light);
    }
    
    /* Make FAQ more readable */
    .faq-question {
      color: var(--primary-dark);
      font-weight: 700;
    }
    
    /* Increase touch target sizes */
    .nav-links a, .mobile-nav-links a, .example-tab, 
    .faq-question, .back-to-top {
      min-height: 44px;
      min-width: 44px;
      display: flex;
      align-items: center;
    }
    
    /* Form element improvements */
    select.form-control option {
      padding: 12px;
    }
    
    .btn {
      padding: 16px 32px;
    }
    
    /* Fix ROI calculator overflow */
    #roi-visualization svg {
      max-width: 100%;
      height: auto;
      filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.1));
    }
    
    /* Fix example tabs for touch */
    .example-tab {
      padding: 12px 16px;
      margin: 4px;
    }
    
    /* Tooltip styling */
    #svg-tooltip {
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
      pointer-events: none;
    }
    
    /* Enhance ROI visualization appearance */
    #roi-visualization text {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    }
    
    /* Improve bar chart appearance */
    #generic-rate-bar, #introperso-rate-bar {
      transition: width 0.5s ease-in-out;
    }
    
    #introperso-rate-bar {
      filter: drop-shadow(0 1px 2px rgba(212, 175, 55, 0.3));
    }
    
    /* Responsive adjustments for small screens */
    .roi-visual-container {
      height: 450px !important; /* Taller for mobile to fit content */
      overflow-x: auto;
      overflow-y: hidden;
    }
    
    #roi-visualization svg {
      min-width: 700px; /* Ensure minimum width for readability */
    }
  }

/* ===== COMPREHENSIVE DARK MODE ===== */
@media (prefers-color-scheme: dark) {
  /* Using dark mode variables defined in the root element */
  
  /* Global dark mode styles */
  body {
    background-color: var(--dark-bg-primary);
    color: var(--dark-text-primary);
  }
  
  /* Email components in dark mode */
  .email-body {
    background-color: var(--dark-bg-secondary);
    color: var(--dark-text-primary);
    border-color: var(--dark-border);
  }
  
  .highlight, 
  .email-body span[style*="background-color: rgba(212, 175, 55, 0.2)"] {
    background-color: rgba(240, 207, 101, 0.3) !important;
    color: var(--dark-text-primary) !important;
  }
  
  /* Form controls in dark mode */
  .form-control {
    background-color: var(--dark-input-bg);
    color: var(--dark-text-primary);
    border-color: var(--dark-border);
  }
  
  /* Header styling */
  header {
    background-color: rgba(18, 24, 34, 0.95);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.15);
  }
  
  header.scrolled {
    background-color: rgba(18, 24, 34, 0.98);
  }
  
  .logo-text-primary {
    fill: var(--dark-text-primary);
  }
  
  .nav-logo-svg {
    filter: brightness(0) invert(1);
  }
  
  .nav-links a {
    color: var(--dark-text-primary);
  }
  
  .nav-links a:hover {
    color: var(--dark-gold);
  }
  
  .nav-links a::after {
    background-color: var(--dark-gold);
  }
  
  .hamburger-line {
    background-color: var(--dark-text-primary);
  }
  
  /* Section backgrounds */
  .hero, .differentiation, .cta {
    background: linear-gradient(135deg, #0B1018, #1A2436);
  }
  
  section.problem-solution, 
  section.examples, 
  section.pricing, 
  section.privacy-policy, 
  section.terms-of-service {
    background-color: var(--dark-bg-primary);
  }
  
  section.how-it-works, 
  section.roi-calculator,
  section.faq,
  section.service-clarification {
    background-color: var(--dark-bg-secondary);
  }
  
  /* Cards and containers */
  .step-card, 
  .diff-card, 
  .example-content,
  .calculator-container,
  .results-container,
  .price-card {
    background-color: var(--dark-card-bg);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    border: 1px solid var(--dark-border);
  }
  
  /* Step indicators */
  .step-indicator-line {
    background: linear-gradient(90deg, var(--dark-gold-muted), var(--dark-gold));
  }
  
  .step-indicator-node span {
    background: var(--dark-bg-tertiary);
    color: var(--dark-text-primary);
    border-color: var(--dark-gold-muted);
  }
  
  .step-indicator-node.active span {
    background: var(--dark-gold);
    color: var(--dark-bg-primary);
  }
  
  .node-label {
    color: var(--dark-text-primary);
  }
  
  .step-indicator-node.active .node-label {
    color: var(--dark-gold);
  }
  
  /* Text and headings */
  h1, h2, h3, h4, h5, h6 {
    color: var(--dark-text-primary);
  }
  
  p, li {
    color: var(--dark-text-secondary);
  }
  
  .text-accent {
    color: var(--dark-gold);
  }
  
  /* Forms and inputs */
  /* Form control base styling already defined earlier */
  
  .form-control:focus {
    border-color: var(--dark-gold);
    box-shadow: 0 0 0 2px rgba(240, 207, 101, 0.25);
  }
  
  .form-control::placeholder {
    color: var(--dark-text-secondary);
    opacity: 0.7;
  }
  
  .order-form .form-control {
    background-color: rgba(45, 55, 72, 0.8);
    border-color: rgba(58, 70, 89, 0.8);
  }
  
  /* Form feedback */
  .form-error-message {
    color: #FF6B6B;
  }
  
  .form-control.error {
    border-color: #FF6B6B;
  }
  
  /* Buttons */
  .btn-primary {
    background: var(--dark-gold);
    color: var(--dark-bg-primary);
  }
  
  .btn-primary:hover {
    background: #F7DB7F;
    box-shadow: 0 7px 20px rgba(0, 0, 0, 0.25);
  }
  
  .btn-secondary {
    background-color: transparent;
    color: var(--dark-text-primary);
    border: 2px solid var(--dark-text-primary);
  }
  
  .btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: var(--dark-gold);
    color: var(--dark-gold);
  }
  
  .btn-tertiary {
    background-color: var(--dark-bg-tertiary);
    color: var(--dark-text-primary);
    border: 2px solid var(--dark-border);
  }
  
  /* Tabs */
  .example-tab {
    color: var(--dark-text-secondary);
  }
  
  .example-tab.active {
    color: var(--dark-gold);
  }
  
  .example-tab::after {
    background-color: var(--dark-gold);
  }
  
  /* Email examples */
  /* Email body styling already defined earlier */
  
  /* Use consistent highlight styling */
  .highlight, 
  .email-body span[style*="background-color: rgba(212, 175, 55, 0.2)"] {
    background-color: rgba(240, 207, 101, 0.3) !important;
    color: var(--dark-text-primary) !important;
    padding: 2px 4px;
    border-radius: 2px;
    font-weight: 600;
  }
  
  .email-content-label {
    color: var(--dark-gold);
  }
  
  /* FAQ */
  .faq-question {
    color: var(--dark-gold);
  }
  
  .faq-question::after {
    color: var(--dark-gold);
  }
  
  /* Calculator */
  .calculator-form label {
    color: var(--dark-text-primary);
  }
  
  .result-label {
    color: var(--dark-text-secondary);
  }
  
  .result-value {
    color: var(--dark-text-primary);
  }
  
  .result-highlight {
    color: var(--dark-gold);
  }
  
  /* Callouts and cards */
  .callout {
    background-color: rgba(240, 207, 101, 0.1);
    border-left: 3px solid var(--dark-gold);
  }
  
  .callout-title {
    color: var(--dark-gold);
  }
  
  /* Footer */
  footer {
    background-color: #0B1018;
  }
  
  .footer-about p,
  .contact-item {
    color: var(--dark-text-secondary);
  }
  
  .legal-links a {
    color: var(--dark-gold);
  }
  
  .copyright {
    color: var(--dark-text-secondary);
  }
  
  /* SVG elements for charts and diagrams */
  #roi-visualization {
    filter: none; /* Remove the invert filter which was causing issues */
    transition: all 0.3s ease;
  }
  
  /* Replace with a truly unique and creative visualization on ultra-wide screens */
  @media (min-width: 1921px) {
    /* Hide the original wave */
    .hero-wave {
      display: none;
    }
    
    /* Ensure hero maintains its original height */
    .hero {
      position: relative;
      overflow: hidden;
      /* Set explicit max-height to prevent stretching */
      max-height: 100vh;
      /* Force the hero to maintain proper proportions */
      height: auto !important;
      min-height: 500px !important; 
      max-height: 700px !important;
    }
    
    /* Create a smooth gradient transition to content section */
    .hero::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100px;
      background: linear-gradient(to bottom, rgba(26, 54, 93, 0) 0%, var(--white) 100%);
      z-index: 10;
      pointer-events: none;
    }
    
    /* Creative "Financial Data Flow" visualization container */
    .network-visualization {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      overflow: hidden;
    }
    
    /* Unique financial data flow elements */
    .data-stream {
      position: absolute;
      background: linear-gradient(to right, 
        rgba(74, 111, 165, 0.01), 
        rgba(74, 111, 165, 0.3) 20%,
        rgba(212, 175, 55, 0.2) 50%,
        rgba(74, 111, 165, 0.3) 80%, 
        rgba(74, 111, 165, 0.01) 100%);
      height: 1px;
      width: 100%;
      transform-origin: left center;
      animation: streamFlow 8s infinite linear;
      opacity: 0;
    }
    
    /* Data nodes that appear along streams */
    .data-node {
      position: absolute;
      width: 3px;
      height: 3px;
      background-color: var(--secondary);
      border-radius: 50%;
      filter: blur(1px);
      box-shadow: 0 0 8px var(--secondary);
      z-index: 2;
      opacity: 0;
      transform: scale(0);
      animation: nodeAppear 5s infinite ease-out;
    }
    
    /* Connection lines between nodes */
    .connection-line {
      position: absolute;
      height: 1px;
      transform-origin: left center;
      background: linear-gradient(to right, transparent, rgba(212, 175, 55, 0.5), transparent);
      opacity: 0;
      z-index: 1;
      animation: lineAppear 7s infinite;
    }
    
    /* Circular pulse elements */
    .data-pulse {
      position: absolute;
      border: 1px solid rgba(212, 175, 55, 0.3);
      border-radius: 50%;
      transform: scale(0);
      opacity: 0;
      animation: pulseExpand 8s infinite ease-out;
    }
    
    /* Abstract financial symbols */
    .finance-symbol {
      position: absolute;
      color: rgba(255, 255, 255, 0.2);
      font-size: 12px;
      font-family: monospace;
      transform: scale(0);
      opacity: 0;
      animation: symbolAppear 10s infinite;
    }
    
    /* Dynamic background effect */
    .data-landscape {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 40%;
      background: 
        linear-gradient(180deg, 
          rgba(26, 54, 93, 0) 0%,
          rgba(26, 54, 93, 0.1) 40%,
          rgba(26, 54, 93, 0.2) 70%,
          rgba(26, 54, 93, 0) 100%),
        repeating-linear-gradient(0deg, 
          transparent, 
          transparent 5px, 
          rgba(74, 111, 165, 0.03) 5px, 
          rgba(74, 111, 165, 0.03) 6px);
      perspective: 500px;
      transform-origin: bottom center;
      transform: rotateX(70deg) translateZ(-100px);
      z-index: 0;
      animation: landscapeMove 30s infinite linear;
    }
    
    /* 3D grid points in the landscape */
    .grid-point {
      position: absolute;
      width: 2px;
      height: 2px;
      background-color: rgba(212, 175, 55, 0.3);
      border-radius: 50%;
      transform: translateZ(0);
      filter: blur(1px);
      animation: gridPointPulse 5s infinite;
    }
    
    /* Market data ticker tape effect */
    .data-ticker {
      position: absolute;
      width: 200%;
      height: 20px;
      bottom: 100px;
      left: 0;
      font-family: monospace;
      font-size: 12px;
      white-space: nowrap;
      color: rgba(255, 255, 255, 0.2);
      overflow: hidden;
      z-index: 1;
      transform: translateX(0);
      animation: tickerMove 60s infinite linear;
    }
    
    /* Hero content positioning adjustment */
    .hero-content {
      position: relative;
      z-index: 5;
    }
    
    /* Dynamic glow effect near cursor */
    .cursor-glow {
      position: absolute;
      width: 300px;
      height: 300px;
      border-radius: 50%;
      background: radial-gradient(
        circle,
        rgba(212, 175, 55, 0.1) 0%,
        rgba(212, 175, 55, 0.05) 30%,
        transparent 70%
      );
      transform: translate(-50%, -50%);
      z-index: 3;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    
    /* Animation for data streams */
    @keyframes streamFlow {
      0% {
        transform: scaleX(0) translateY(0);
        opacity: 0;
      }
      5% {
        opacity: 1;
      }
      100% {
        transform: scaleX(1) translateY(var(--flow-y, 0px));
        opacity: 0;
      }
    }
    
    /* Animation for data nodes */
    @keyframes nodeAppear {
      0%, 100% {
        transform: scale(0);
        opacity: 0;
      }
      10%, 90% {
        transform: scale(1);
        opacity: 1;
      }
    }
    
    /* Animation for connection lines */
    @keyframes lineAppear {
      0%, 100% {
        transform: scaleX(0);
        opacity: 0;
      }
      20%, 80% {
        transform: scaleX(1);
        opacity: 1;
      }
    }
    
    /* Animation for pulse circles */
    @keyframes pulseExpand {
      0% {
        transform: scale(0);
        opacity: 0.8;
      }
      100% {
        transform: scale(5);
        opacity: 0;
      }
    }
    
    /* Animation for financial symbols */
    @keyframes symbolAppear {
      0%, 100% {
        transform: scale(0) rotate(0deg);
        opacity: 0;
      }
      10% {
        transform: scale(1) rotate(10deg);
        opacity: 0.7;
      }
      90% {
        transform: scale(1) rotate(-10deg);
        opacity: 0.7;
      }
    }
    
    /* Animation for the landscape movement */
    @keyframes landscapeMove {
      0% {
        background-position: 0 0;
      }
      100% {
        background-position: 1000px 0;
      }
    }
    
    /* Animation for grid points */
    @keyframes gridPointPulse {
      0%, 100% {
        opacity: 0.3;
        transform: scale(1);
      }
      50% {
        opacity: 0.8;
        transform: scale(1.5);
      }
    }
    
    /* Animation for the data ticker */
    @keyframes tickerMove {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(-50%);
      }
    }

    /* Boids flocking animation styles */
    .boids-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        z-index: 1;
        pointer-events: none;
    }

    .boid {
        position: absolute;
        width: 10px;
        height: 10px;
        background: transparent;
        transform-origin: center;
        z-index: 3;
        will-change: transform, left, top;
    }

    .boid-trail {
        position: absolute;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.5);
        transform-origin: center;
        z-index: 2;
        will-change: transform, left, top;
        opacity: 0.7;
    }

    /* Boid shape variations */
    .boid-diamond {
        background: transparent;
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 10px solid rgba(255, 255, 255, 0.9);
    }

    .boid-triangle {
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 10px solid rgba(255, 255, 255, 0.9);
    }

    .boid-circle {
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.9);
    }

    .boid-arrow {
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 12px solid rgba(255, 255, 255, 0.9);
        border-radius: 1px;
    }

    /* Colors for boids */
    .blue {
        border-bottom-color: rgba(65, 105, 225, 0.9);
        background-color: rgba(65, 105, 225, 0.9);
    }

    .gold {
        border-bottom-color: rgba(212, 175, 55, 0.9);
        background-color: rgba(212, 175, 55, 0.9);
    }

    .teal {
        border-bottom-color: rgba(0, 128, 128, 0.9);
        background-color: rgba(0, 128, 128, 0.9);
    }

    /* Trail colors */
    .boid-trail.blue {
        background-color: rgba(65, 105, 225, 0.6);
    }

    .boid-trail.gold {
        background-color: rgba(212, 175, 55, 0.6);
    }

    .boid-trail.teal {
        background-color: rgba(0, 128, 128, 0.6);
    }

    /* Cursor glow effect */
    .cursor-glow-boids {
        position: absolute;
        width: 150px;
        height: 150px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 70%);
        transform: translate(-50%, -50%);
        pointer-events: none;
        z-index: 4;
        will-change: left, top;
    }
  }
  
  /* Mobile Nav */
  .mobile-nav {
    background: linear-gradient(135deg, #121822, #1E2734);
  }
  
  /* Back to top button */
  .back-to-top {
    background-color: var(--dark-gold);
    color: var(--dark-bg-primary);
  }
  
  .back-to-top:hover {
    background-color: #F7DB7F;
  }
  
  /* Cookie notice */
  .cookie-notice {
    background: rgba(26, 32, 44, 0.95);
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.25);
  }
  
  /* Preloader */
  .preloader {
    background-color: var(--dark-bg-primary);
  }
}

/* Search for and remove any duplicate definitions of hero-wave */
/* Our final hero-wave fix should replace all other attempts */

/* General Fixes */

/* Hero section max height adjustment */
.hero {
    min-height: 500px;
    max-height: 700px;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    background-color: #0a1020;
}

/* Hide original wave background */
.hero-wave {
    display: none;
}

/* Tech Grid Overlay */
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: linear-gradient(rgba(10, 16, 32, 0) 95%, rgba(65, 105, 225, 0.1) 100%), 
                      linear-gradient(90deg, rgba(10, 16, 32, 0) 95%, rgba(65, 105, 225, 0.1) 100%);
    background-size: 40px 40px;
    z-index: 2;
    pointer-events: none;
}

/* Tech nodes glow effect */
@keyframes techGlow {
    0% { filter: drop-shadow(0 0 3px rgba(65, 105, 225, 0.3)); }
    50% { filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.5)); }
    100% { filter: drop-shadow(0 0 3px rgba(65, 105, 225, 0.3)); }
}

/* Enhance hero content for better readability over visualization */
.hero-content {
    position: relative;
    z-index: 10;
    background-color: rgba(10, 16, 32, 0.3);
    padding: 30px;
    backdrop-filter: blur(5px);
    border-radius: 8px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(65, 105, 225, 0.1);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .hero {
        min-height: 500px;
        max-height: 700px;
    }
    
    .hero::before {
        background-size: 20px 20px;
    }
}

/* Add additional styles below */