/* ===== HERO GRADIENT ANIMATION ===== */
    .hero {
      background: linear-gradient(-45deg, #1d4ed8, #4338ca, #2563eb, #4f46e5);
      background-size: 400% 400%;
      animation: gradientMove 10s ease infinite;
    }

    @keyframes gradientMove {
      0% { background-position: 0% }
      50% { background-position: 100% }
      100% { background-position: 0% }
    }

    /* ===== HERO TEXT ===== */
    .hero-text {
      opacity: 0;
      transform: translateY(40px);
      animation: fadeUp 1s ease forwards;
    }

    .hero-btn {
      opacity: 0;
      transform: translateY(20px) scale(0.95);
      animation: fadeBtn 0.8s ease forwards;
      animation-delay: 0.6s;
    }

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

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

    /* ===== CARD MODERN ===== */
    .card-modern {
      transition: all 0.35s ease;
      border-radius: 16px;
    }

    .card-modern:hover {
      transform: translateY(-10px) scale(1.02);
      box-shadow: 0 15px 35px rgba(0,0,0,0.12);
    }

    /* ===== BUTTON MODERN ===== */
    .btn-modern {
      transition: all 0.2s ease;
    }

    .btn-modern:hover {
      transform: translateY(-2px);
    }

    .btn-modern:active {
      transform: scale(0.95);
    }

    /* ===== LOGO GLOW ===== */
    .aurora-glow {
      border-radius: 24px;
      padding: 6px;
      background: #fff;
      box-shadow:
        0 0 12px rgba(0,255,200,0.4),
        0 0 25px rgba(0,120,255,0.3),
        0 0 40px rgba(180,80,255,0.2);
      transition: 0.4s;
    }

    .aurora-glow:hover {
      transform: scale(1.08);
      box-shadow:
        0 0 20px rgba(0,255,200,0.6),
        0 0 45px rgba(0,120,255,0.5),
        0 0 70px rgba(180,80,255,0.4);
    }