/* ============================
         CSS CUSTOM PROPERTIES
         - Grid configuration variables
         - Color theme variables
         ============================ */
      :root {
        --grid-cols: 64;
        --grid-bg-color: rgba(16, 23, 39, 0.4);
        --grid-border-color: rgba(29, 36, 52, 0.8);
        --grid-border-width: 1px;
      }
      
      /* ============================
         GLOBAL HTML/BODY STYLES
         - Smooth scrolling behavior
         - Overflow prevention
         ============================ */
      html {
        scroll-behavior: smooth;
        scroll-padding-top: 100px; /* Adjusted for fixed header height + padding */
      }
      
      body {
        max-width: 100vw;
        position: relative;
      }
      
      /* ============================
         OVERFLOW PREVENTION
         - Prevent horizontal scrolling
         - Box-sizing for all elements
         ============================ */
      /* Prevent any element from causing horizontal overflow */
      * {
        box-sizing: border-box;
        max-width: 100%;
      }
      
      .container {
        max-width: 100%;
        /* Allow vertical overflow for glow effects */
        overflow: visible;
        /* Add padding to prevent glow clipping */
        padding-top: 20px;
        padding-bottom: 20px;
      }

      /* ============================
         SECTION LAYOUT STYLES
         - Ensure sections don't clip hover effects
         - Prevent overflow during animations
         ============================ */
      /* Ensure sections don't clip hover effects */
      section {
        overflow: visible !important;
        padding-top: 2rem;
        padding-bottom: 2rem;
      }
      
      /* Completely disable horizontal scrolling during animations */
      html.aos-init {
      }
      
      body.aos-init {
      }
      
      /* ============================
         AOS ANIMATION OVERFLOW FIXES
         - Prevent horizontal scrolling during animations
         - Fix width issues for animated elements
         ============================ */
      /* Fix AOS animation overflow issues */
      [data-aos] {
        max-width: 100% !important;
      }
      
      /* Ensure sections don't cause horizontal overflow during animations */
      section {
        overflow: visible !important;
        max-width: 100vw !important;
        padding: 1rem;
      }
      
      /* Fix for AOS fade animations */
      [data-aos="fade-up"],
      [data-aos="fade-down"],
      [data-aos="fade-left"],
      [data-aos="fade-right"] {
        max-width: 100% !important;
      }
      
      /* Additional AOS overflow prevention */
      .aos-animate {
        max-width: 100% !important;
      }
      
      /* Ensure card containers don't overflow during animations */
      [data-aos] .bg-gray-800,
      [data-aos] .border-gray-700 {
        overflow: visible !important;
        max-width: 100% !important;
      }
      
      /* Force all animated elements to stay within viewport */
      [data-aos]:not(.aos-animate) {
        transform: none !important;
      }
      
      /* ============================
         GRID BACKGROUND SYSTEM
         - Fixed positioned grid overlay
         - Responsive grid sizing
         - Interactive grid squares
         ============================ */
      .grid-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vw;
        min-height: 100vh;
        display: grid;
        grid-template-columns: repeat(var(--grid-cols), 1fr);
        grid-template-rows: repeat(var(--grid-cols), 1fr);
        z-index: 5;
        border-top: var(--grid-border-width) solid var(--grid-border-color);
        border-left: var(--grid-border-width) solid var(--grid-border-color);
        box-sizing: border-box;
        pointer-events: none;
      }
      
      /* ============================
         MOBILE RESPONSIVE GRID
         - Smaller grid on mobile devices
         - Grid aspect ratio adjustments
         ============================ */
      /* Mobile-specific grid adjustments */
      @media (max-width: 768px) {
        .grid-container {
          width: 100vw;
          height: calc(100vw);
          min-height: 100vh;
        }
        
        .grid-square {
          aspect-ratio: 1;
        }
      }
      
      .grid-square {
        background-color: var(--grid-bg-color);
        border-right: var(--grid-border-width) solid var(--grid-border-color);
        border-bottom: var(--grid-border-width) solid var(--grid-border-color);
        box-sizing: border-box;
         border-radius: 4px;
        pointer-events: auto;
         outline: none;
      }
      
      /* ============================
         Z-INDEX LAYERING SYSTEM
         - Grid background (z-5)
         - Content sections (z-10)
         - Footer (z-20)
         - Back to top button (z-50)
         ============================ */
      /* Ensure content stays above grid but allows grid interaction in empty areas */
      header, section {
        position: relative;
        z-index: 10;
        pointer-events: none;
      }
      
      /* Re-enable pointer events for interactive content */
      header *, section * {
        pointer-events: auto;
      }
      
      /* ============================
         CARD STYLING SYSTEM
         - Background cards (.bg-gray-800)
         - Border cards (.border-gray-700)
         - Hover effects and animations
         ============================ */
      /* Special handling for card containers to allow grid hover around them */
      .bg-gray-800, .border-gray-700, .border-gray-800 {
        pointer-events: none;
      }
      
      /* Ensure card containers have proper spacing for hover effects */
      .bg-gray-800 {
        margin: 8px !important;
      }
      
      /* Override margin for specific elements that shouldn't have the extra margin */
      .nav-button.bg-gray-800,
      footer .bg-gray-800,
      header .bg-gray-800 {
        margin: 0 !important;
      }
      
      /* Re-enable pointer events for content inside cards */
      .bg-gray-800 *, .border-gray-700 *, .border-gray-800 * {
        pointer-events: auto;
      }
      
      /* Ensure text and interactive elements work */
      h1, h2, h3, p, button, a, input, textarea, svg, img, iframe {
        pointer-events: auto !important;
      }
      
      /* ============================
         CARD HOVER EFFECTS
         - Enhanced glow effects
         - Transform animations
         - Purple accent colors
         ============================ */
      /* Enhanced hover animation for cards */
      .bg-gray-800 {
        background-color: rgb(25, 34, 49) !important;
        box-shadow: 0 0 20px rgba(139, 92, 246, 0.1), 0 0 40px rgba(139, 92, 246, 0.05);
        transition: all 0.3s ease;
        transform: translateY(0);
        margin: 8px;
        position: relative;
        z-index: 1;
      }

      /* ============================
         MOBILE OPTIMIZATION
         - Reduced margins and padding
         - Button alignment fixes
         - Space optimization
         ============================ */
      /* Minimize card margins on mobile */
      @media (max-width: 640px) {
        .bg-gray-800 {
          margin: 1px !important;
        }
        
        /* Minimize container padding on mobile */
        .container.px-5,
        .px-5 {
          padding-left: 0.25rem !important;
          padding-right: 0.25rem !important;
        }
        
        /* Remove button left margin on mobile for proper alignment */
        button.ml-4 {
          margin-left: 0 !important;
        }
        
        /* Center button text on mobile */
        button.inline-flex {
          justify-content: center !important;
          text-align: center !important;
        }
      
      }

      .bg-gray-800:hover {
        box-shadow: 
          0 0 40px rgba(139, 92, 246, 0.3), 
          0 0 80px rgba(139, 92, 246, 0.2), 
          0 0 120px rgba(139, 92, 246, 0.1),
          0 0 160px rgba(139, 92, 246, 0.05);
        transform: translateY(-4px);
        z-index: 10;
      }

      .nav-button {
        box-shadow: none;
        margin: 0;
      }

      /* Fix button height issues */
      button.inline-flex {
        line-height: 1 !important;
        align-items: center !important;
      }

      /* Enhanced hover effects for inner cards */
      .bg-gray-700 {
        transition: all 0.3s ease;
        box-shadow: 0 0 10px rgba(139, 92, 246, 0.05);
        position: relative;
        z-index: 1;
      }

      .bg-gray-700:hover {
        box-shadow: 
          0 0 20px rgba(139, 92, 246, 0.15), 
          0 0 40px rgba(139, 92, 246, 0.08);
        transform: translateY(-2px);
        z-index: 5;
      }

      /* Hover effects for border cards (stats, feature cards) */
      .border-2.border-gray-800:hover,
      .border-2.border-gray-700:hover {
        box-shadow: 
          0 0 15px rgba(139, 92, 246, 0.2), 
          0 0 30px rgba(139, 92, 246, 0.1);
        transform: translateY(-2px);
        border-color: rgba(139, 92, 246, 0.3) !important;
        z-index: 5;
      }

      .border-2.border-gray-800,
      .border-2.border-gray-700 {
        transition: all 0.3s ease;
        position: relative;
        z-index: 1;
      }
      
      /* Footer specific styling to ensure visibility */
      footer {
        background-color: rgba(17, 24, 39, 0.95) !important;
        border-top: 1px solid rgba(75, 85, 99, 0.3);
        position: relative;
        z-index: 20;
      }
      
      footer * {
        opacity: 1 !important;
        pointer-events: auto !important;
      }
      
      .grid-background {
        background-color: transparent;
      }

      /* Fading border effect for cards */
      .fade-border {
        border: none;
        position: relative;
        background: linear-gradient(145deg, rgba(31, 41, 55, 0.95), rgba(55, 65, 81, 0.95));
      }
      
      .fade-border::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: inherit;
        padding: 1px;
        background: linear-gradient(
          145deg,
          rgba(156, 163, 175, 0.8) 0%,
          rgba(156, 163, 175, 0.4) 25%,
          rgba(156, 163, 175, 0.1) 50%,
          rgba(156, 163, 175, 0.4) 75%,
          rgba(156, 163, 175, 0.8) 100%
        );
        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        mask-composite: xor;
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        pointer-events: none;
      }
      
      .fade-border-soft {
        border: none;
        position: relative;
        background: linear-gradient(145deg, rgba(31, 41, 55, 0.95), rgba(55, 65, 81, 0.95));
      }
      
      .fade-border-soft::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: inherit;
        padding: 1px;
        background: linear-gradient(
          135deg,
          rgba(156, 163, 175, 0.6) 0%,
          rgba(156, 163, 175, 0.2) 30%,
          rgba(156, 163, 175, 0.05) 50%,
          rgba(156, 163, 175, 0.2) 70%,
          rgba(156, 163, 175, 0.6) 100%
        );
        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        mask-composite: xor;
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        pointer-events: none;
      }

      .stats {
        border-top: 1px solid rgba(196, 196, 196, 0.158);
        
      }
      
      /* Add top padding to nested cards on mobile */
      @media (max-width: 768px) {
        /* Testimonials inner cards */
        .bg-gray-800 .bg-gray-700:not(button) {
          padding-top: 2rem !important;
        }
        
        /* Stats inner cards */
        .bg-gray-800 .border-gray-800,
        .bg-gray-800 .border-2.border-gray-800 {
          padding-top: 1.5rem !important;
        }
        
        /* Pricing inner cards */
        .bg-gray-800 .border-gray-600,
        .bg-gray-800 .border-2.border-gray-600,
        .bg-gray-800 .border-purple-500,
        .bg-gray-800 .border-2.border-purple-500 {
          padding-top: 2rem !important;
        }
        
        /* Side-by-side cards inner cards */
        .bg-gray-800 .border-gray-700,
        .bg-gray-800 .border-2.border-gray-700 {
          padding-top: 2rem !important;
        }
        
        /* Download buttons consistent sizing on mobile */
        .bg-gray-700.w-full {
          min-height: 64px !important;
          height: 64px !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
        }
        
        .bg-gray-700.w-full span {
          white-space: nowrap !important;
          overflow: hidden !important;
          text-overflow: ellipsis !important;
        }
        
        .bg-gray-700.w-full span.ml-4 {
          flex-shrink: 0 !important;
          max-width: calc(100% - 40px) !important;
        }
      }