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

    html, body {
      height: 100%;
      overflow-x: hidden;
    }

    body {
      font-family: 'Inter', sans-serif;
      background: #0F1114;
      color: #F4F4F4;
    }

    h1, h2, h3, h4 {
      font-family: 'Space Grotesk', sans-serif;
    }

    .mono {
      font-family: 'JetBrains Mono', monospace;
    }

    /* Theme Variables */
    :root {
      --bg-primary: #0F1114;
      --bg-secondary: #1C1F23;
      --text-primary: #F4F4F4;
      --accent-blue: #3A9BDC;
      --accent-silver: #C0C0C0;
    }

    .dark-theme {
      --bg-primary: #0F1114;
      --bg-secondary: #1C1F23;
      --text-primary: #F4F4F4;
    }

    .light-theme {
      --bg-primary: #F8F9FA;
      --bg-secondary: #FFFFFF;
      --text-primary: #1A1A1A;
    }

    /* Animated gradient background */
    .gradient-bg {
      background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 50%, var(--bg-primary) 100%);
      background-size: 200% 200%;
      animation: gradientShift 15s ease infinite;
    }

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

    /* Page transitions */
    .page {
      display: none;
      opacity: 0;
      transform: translateY(20px);
      transition: all 0.5s ease;
    }

    .page.active {
      display: block;
      opacity: 1;
      transform: translateY(0);
    }

    /* Parallax effect */
    .parallax {
      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }

    /* Glow effect */
    .glow {
      box-shadow: 0 0 20px rgba(58, 155, 220, 0.3);
      transition: box-shadow 0.3s ease;
    }

    .glow:hover {
      box-shadow: 0 0 30px rgba(58, 155, 220, 0.6);
    }

    /* Card hover effect */
    .card-hover {
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .card-hover:hover {
      transform: translateY(-8px);
      box-shadow: 0 8px 30px rgba(58, 155, 220, 0.4);
    }

    /* Glassmorphism */
    .glass {
      background: rgba(28, 31, 35, 0.6);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(192, 192, 192, 0.1);
    }

    /* Progress bar */
    .progress-bar {
      position: fixed;
      top: 0;
      left: 0;
      height: 3px;
      background: linear-gradient(90deg, #3A9BDC, #C0C0C0);
      z-index: 9999;
      transition: width 0.1s ease;
    }

    /* Button ripple effect */
    .btn-ripple {
      position: relative;
      overflow: hidden;
    }

    .btn-ripple::after {
      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 0.6s, height 0.6s;
    }

    .btn-ripple:active::after {
      width: 300px;
      height: 300px;
    }

    /* Fade up animation */
    .fade-up {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.8s ease, transform 0.8s ease;
    }

    .fade-up.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* Color simulator */
    .color-simulator {
      position: relative;
      overflow: hidden;
    }

    .aircraft-preview {
      transition: filter 0.3s ease;
    }

   .glass {
  backdrop-filter: blur(12px) saturate(180%);
  background-color: rgba(16, 8, 8, 0.7);
  border-bottom: 1px solid rgba(198, 14, 14, 0.2);
}

/* Mobile Menu Animation */
.mobile-menu {
  transform: translateX(-100%);
  transition: transform 0.35s ease-in-out;
}
.mobile-menu.open {
  transform: translateX(0);
}

/* Overlay Fade Animation */
#overlay.show {
  display: block;
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}
#overlay.hidden {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}


    /* Loading spinner */
    .spinner {
      border: 2px solid rgba(58, 155, 220, 0.3);
      border-radius: 50%;
      border-top: 2px solid #3A9BDC;
      width: 20px;
      height: 20px;
      animation: spin 1s linear infinite;
    }

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

    /* Theme toggle */
    .theme-toggle {
      position: relative;
      width: 60px;
      height: 30px;
      background: #374151;
      border-radius: 15px;
      cursor: pointer;
      transition: background 0.3s ease;
    }

    .theme-toggle.light {
      background: #3A9BDC;
    }

    .theme-toggle::after {
      content: '';
      position: absolute;
      top: 3px;
      left: 3px;
      width: 24px;
      height: 24px;
      background: white;
      border-radius: 50%;
      transition: transform 0.3s ease;
    }

    .theme-toggle.light::after {
      transform: translateX(30px);
    }

    /* Real image overlays */
    .image-overlay {
      position: relative;
    }

    .image-overlay::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(135deg, rgba(15, 17, 20, 0.8), rgba(58, 155, 220, 0.2));
      z-index: 1;
    }

    .image-overlay > * {
      position: relative;
      z-index: 2;
    }