html,
  body {
      transition: background-color 0.4s ease, color 0.4s ease;
      margin: 0;
      padding: 0;
  }

  .dark body {
      background-color: #050505;
      color: #f5f3ff;
  }

  body {
      background-color: #f8fafc;
      color: #1e1b4b;
  }

  .nav-glass {
      @apply sticky top-0 z-50 w-full backdrop-blur-lg border-b;
      background: rgba(255, 255, 255, 0.6);
      border-color: rgba(139, 92, 246, 0.1);
  }

  .dark .nav-glass {
      background: rgba(5, 5, 5, 0.8);
      border-color: rgba(139, 92, 246, 0.1);
  }

  .purple-card {
      @apply rounded-[2.5rem] p-8 md: p-14 border transition-all duration-500;
      background: white;
      border-color: rgba(139, 92, 246, 0.1);
      box-shadow: 0 20px 40px rgba(139, 92, 246, 0.05);
  }

  .dark .purple-card {
      background: rgba(255, 255, 255, 0.02);
      border-color: rgba(139, 92, 246, 0.15);
      box-shadow: 0 0 40px rgba(0, 0, 0, 0.4);
  }

  .purple-glow:hover {
      box-shadow: 0 0 25px rgba(139, 92, 246, 0.4);
  }