body {
      font-family: 'Inter', sans-serif;
      background: linear-gradient(120deg, #3B82F6, #6D28D9);
      background-size: 200% 200%;
      animation: bgShift 10s ease-in-out infinite;
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow-x: hidden;
    }

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

    /* 🔹 Fade Section */
    .fade-section {
      opacity: 0;
      filter: blur(20px);
      transform: translateY(20px);
      transition: all .7s ease-out;
    }
    .fade-section.show {
      opacity: 1;
      filter: blur(0);
      transform: translateY(0);
    }

    /* 🔹 Card Wrapper */
    .card-wrapper {
      width: 100%;
      max-width: 420px;
      background: rgba(255,255,255,0.9);
      border: 1px solid rgba(255,255,255,0.3);
      border-radius: 20px;
      box-shadow: 0 6px 24px rgba(0,0,0,0.1);
      backdrop-filter: blur(14px);
      padding: 2rem;
      animation: popIn 1s ease forwards;
    }

    @keyframes popIn {
      from { opacity: 0; transform: translateY(30px) scale(0.98); filter: blur(10px); }
      to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
    }

    @media (max-width: 640px) {
      body { padding: 1.5rem; }
      .card-wrapper { padding: 1.5rem; border-radius: 16px; }
    }