.grid-bg {
      background: #ffffff;
      position: relative;
      overflow: hidden;
      max-width: 100vw;
  }

  .grid-container {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0.3;
      overflow: hidden;
  }

  .grid-lines {
      position: absolute;
      width: 100%;
      height: 100%;
      background-image:
          linear-gradient(to right, rgba(200, 200, 200, 0.6) 1px, transparent 1px),
          linear-gradient(to bottom, rgba(200, 200, 200, 0.6) 1px, transparent 1px);
      background-size: 60px 60px;
      animation: slideGrid 20s linear infinite;
  }

  .grid-lines-secondary {
      position: absolute;
      width: 100%;
      height: 100%;
      background-image:
          linear-gradient(to right, rgba(220, 220, 220, 0.4) 1px, transparent 1px),
          linear-gradient(to bottom, rgba(220, 220, 220, 0.4) 1px, transparent 1px);
      background-size: 20px 20px;
      animation: slideGridReverse 15s linear infinite;
  }

  @keyframes slideGrid {
      0% {
          transform: translateX(-60px) translateY(-60px);
      }

      100% {
          transform: translateX(0px) translateY(0px);
      }
  }

  @keyframes slideGridReverse {
      0% {
          transform: translateX(0px) translateY(0px);
      }

      100% {
          transform: translateX(-20px) translateY(-20px);
      }
  }

  .floating-grid-dots {
      position: absolute;
      width: 4px;
      height: 4px;
      background: rgba(150, 150, 150, 0.6);
      border-radius: 50%;
      animation: floatDot 8s ease-in-out infinite;
  }

  @keyframes floatDot {

      0%,
      100% {
          transform: translateY(0px) scale(1);
          opacity: 0.8;
      }

      50% {
          transform: translateY(-30px) scale(1.2);
          opacity: 1;
      }
  }

  .mouse-grid-effect {
      position: absolute;
      pointer-events: none;
      background: rgba(100, 100, 100, 0.4);
      border-radius: 2px;
      animation: gridPulse 1s ease-out forwards;
  }

  @keyframes gridPulse {
      0% {
          opacity: 1;
          transform: scale(1);
          box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
      }

      100% {
          opacity: 0;
          transform: scale(1.5);
          box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
      }
  }

  .interactive-grid-line {
      position: absolute;
      background: linear-gradient(90deg, transparent, rgba(120, 120, 120, 0.7), transparent);
      pointer-events: none;
      animation: lineSlide 1.2s ease-out forwards;
  }

  @keyframes lineSlide {
      0% {
          opacity: 1;
          width: 0;
          height: 2px;
      }

      50% {
          opacity: 1;
          width: 150px;
          height: 2px;
      }

      100% {
          opacity: 0;
          width: 200px;
          height: 2px;
      }
  }

  .content-overlay {
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 20px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  }

  .nav-card {
      background: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.3);
      transition: all 0.3s ease;
  }

  .nav-card:hover {
      background: rgba(255, 255, 255, 1);
      transform: translateY(-5px) scale(1.05);
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
  }

  .title-glow {
      text-shadow: 0 0 30px rgba(56, 189, 248, 0.5);
  }

  @media (max-width: 768px) {
      .grid-lines {
          background-size: 40px 40px;
      }

      .grid-lines-secondary {
          background-size: 15px 15px;
      }

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

      .subtitle-responsive {
          font-size: 1.2rem !important;
      }
  }