body {
      font-family: 'Inter', sans-serif;
    }

    .gradient-bg {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    .hero-gradient {
      background: linear-gradient(135deg, #0f0c29 0%, #302b63 35%, #24243e 100%);
      position: relative;
    }

    .hero-gradient::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: radial-gradient(circle at 20% 50%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
                  radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
                  radial-gradient(circle at 40% 80%, rgba(120, 200, 255, 0.3) 0%, transparent 50%);
      pointer-events: none;
    }

    .glass-effect {
      backdrop-filter: blur(16px);
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .floating {
      animation: floating 6s ease-in-out infinite;
    }

    @keyframes floating {
      0%, 100% { transform: translateY(0px) rotate(0deg); }
      33% { transform: translateY(-20px) rotate(1deg); }
      66% { transform: translateY(-10px) rotate(-1deg); }
    }

    .slide-in {
      animation: slideIn 0.8s ease-out forwards;
      opacity: 0;
      transform: translateY(30px);
    }

    .slide-in-left {
      animation: slideInLeft 1s ease-out forwards;
      opacity: 0;
      transform: translateX(-50px);
    }

    .slide-in-right {
      animation: slideInRight 1s ease-out forwards;
      opacity: 0;
      transform: translateX(50px);
    }

    @keyframes slideIn {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes slideInLeft {
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    @keyframes slideInRight {
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    .feature-card:hover {
      transform: translateY(-8px) scale(1.02);
      transition: all 0.4s ease;
    }

    .glow-button {
      box-shadow: 0 0 30px rgba(59, 130, 246, 0.4);
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
    }

    .glow-button::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
      transition: left 0.6s;
    }

    .glow-button:hover::before {
      left: 100%;
    }

    .glow-button:hover {
      box-shadow: 0 0 40px rgba(59, 130, 246, 0.8);
      transform: translateY(-3px);
    }

    .hero-animation {
      animation: heroFloat 8s ease-in-out infinite;
    }

    @keyframes heroFloat {
      0%, 100% { transform: translateY(0px) scale(1); }
      50% { transform: translateY(-30px) scale(1.05); }
    }

    .particle {
      position: absolute;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 50%;
      pointer-events: none;
      animation: particleFloat 10s infinite linear;
    }

    @keyframes particleFloat {
      from {
        transform: translateY(100vh) rotate(0deg);
        opacity: 0;
      }
      10% {
        opacity: 1;
      }
      90% {
        opacity: 1;
      }
      to {
        transform: translateY(-100px) rotate(360deg);
        opacity: 0;
      }
    }

    .text-glow {
      text-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
    }

    .pulse-ring {
      animation: pulse-ring 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
    }

    @keyframes pulse-ring {
      0% {
        transform: scale(0.8);
        opacity: 1;
      }
      100% {
        transform: scale(2.5);
        opacity: 0;
      }
    }