:where([class^="ri-"])::before {
        content: "\f3c2";
      }
      body {
        background: linear-gradient(
          135deg,
          #0a0a1f 0%,
          #1a1a2e 25%,
          #16213e 50%,
          #1e293b 75%,
          #0f172a 100%
        );
        background-attachment: fixed;
        overflow-x: hidden;
      }
      .glass-effect {
        background: rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.1);
      }
      .glow-effect {
        box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
      }
      .hero-glow {
        background: radial-gradient(
          circle at center,
          rgba(59, 130, 246, 0.1) 0%,
          transparent 70%
        );
      }
      .floating-animation {
        animation: float 6s ease-in-out infinite;
      }
      @keyframes float {
        0%,
        100% {
          transform: translateY(0px) rotate(0deg);
        }
        50% {
          transform: translateY(-20px) rotate(2deg);
        }
      }
      .pulse-glow {
        animation: pulse-glow 2s ease-in-out infinite alternate;
      }
      @keyframes pulse-glow {
        from {
          box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
        }
        to {
          box-shadow: 0 0 40px rgba(139, 92, 246, 0.5);
        }
      }
      .gradient-text {
        background: linear-gradient(135deg, #3b82f6, #8b5cf6, #06b6d4);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }
      .logo-3d-enhanced {
        filter: drop-shadow(0 8px 16px rgba(59, 130, 246, 0.6))
          drop-shadow(0 0 30px rgba(139, 92, 246, 0.5))
          drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4)) brightness(1.1)
          contrast(1.1);
        transform: perspective(1500px) rotateX(10deg) translateZ(25px);
        transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
        image-rendering: crisp-edges;
      }
      .logo-3d-enhanced:hover {
        transform: perspective(1500px) rotateX(0deg) rotateY(12deg) scale(1.2)
          translateZ(50px);
        filter: drop-shadow(0 16px 32px rgba(59, 130, 246, 0.8))
          drop-shadow(0 0 50px rgba(139, 92, 246, 0.7))
          drop-shadow(0 8px 16px rgba(0, 0, 0, 0.5)) brightness(1.3)
          saturate(1.2) hue-rotate(5deg);
      }
      .card-3d {
        transform: perspective(1000px) rotateX(5deg);
        transition: all 0.3s ease;
      }
      .card-3d:hover {
        transform: perspective(1000px) rotateX(0deg) translateY(-10px);
      }
      .particles {
        position: absolute;
        width: 100%;
        height: 100%;
        overflow: hidden;
        pointer-events: none;
      }
      .particle {
        position: absolute;
        width: 2px;
        height: 2px;
        background: rgba(59, 130, 246, 0.6);
        border-radius: 50%;
        animation: particle-float 8s linear infinite;
      }
      @keyframes particle-float {
        0% {
          transform: translateY(100vh) translateX(0);
          opacity: 0;
        }
        10% {
          opacity: 1;
        }
        90% {
          opacity: 1;
        }
        100% {
          transform: translateY(-100px) translateX(100px);
          opacity: 0;
        }
      }
      .scroll-fade {
        opacity: 0;
        transform: translateY(50px);
        transition: all 0.8s ease;
      }
      .scroll-fade.visible {
        opacity: 1;
        transform: translateY(0);
      }