/* ===== STEP CARDS - Exact match to mockup ===== */ .step-card { position: relative; border-radius: 37px; border: 2px solid #93FFDE; opacity: 0.8; background: linear-gradient(180deg, #1A1B1C 14.42%, #4A5053 100%); padding: 20px 20px 0px 20px; overflow: hidden; transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1); } .step-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(16, 255, 190, 0.4), transparent); } .step-card:hover { transform: translateY(-6px); border-color: rgba(16, 255, 190, 0.35); box-shadow: 0 0 60px rgba(16, 255, 190, 0.08), 0 20px 60px rgba(0, 0, 0, 0.4); } /* ===== STEP BADGE ===== */ .step-badge { display: flex; justify-content: center; align-items: center; align-items: center; gap: 8px; border-radius: 43px; background: #98EFD5; border: 1px solid rgba(16, 255, 190, 0.3); width: 125px; height: 45px; margin-bottom: 16px; color: #003324; text-align: center; font-family: Poppins; font-size: 16px; font-style: normal; font-weight: 500; line-height: normal; text-align: center; } .step-icon { width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; margin-right: 9px; } /* ===== ILLUSTRATION AREA ===== */ .illustration-area { margin-top: 24px; position: relative; min-height: 220px; display: flex; align-items: center; justify-content: center; } /* ===== ANIMATED GLOW CONTAINER ===== */ .glow-container { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 0; } /* ===== MAIN GLOW ORB ===== */ .glow-orb { position: absolute; width: 546px; height: 546px; border-radius: 50%; background: rgba(49, 223, 170, 0.41); filter: blur(87.5px); animation: pulse-glow 4s ease-in-out infinite; } /* ===== SECONDARY GLOW ORB ===== */ .glow-orb-secondary { position: absolute; width: 400px; height: 400px; border-radius: 50%; background: radial-gradient( circle at center, rgba(16, 255, 190, 0.3) 0%, rgba(16, 255, 190, 0.1) 30%, transparent 60% ); filter: blur(60px); animation: float-glow 6s ease-in-out infinite; } /* ===== TERTIARY GLOW ORB ===== */ .glow-orb-tertiary { position: absolute; width: 300px; height: 500px; border-radius: 50%; background: radial-gradient( ellipse at center, rgba(16, 255, 190, 0.2) 0%, rgba(16, 255, 190, 0.05) 40%, transparent 70% ); filter: blur(100px); animation: drift-glow 8s ease-in-out infinite; } .glow-mb1 { left: 0; } .glow-mb2 { display: none; } .glow-mb3 { display: none; } @media (max-width: 767px) { .glow-mb1 { left: 100%; } .glow-mb2 { display: block; top: 15%; left: -100%; } .glow-mb3 { display: block; top: 65%; left: -100%; } } /* ===== ANIMATIONS ===== */ @keyframes pulse-glow { 0%, 100% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.2); opacity: 1; } } @keyframes float-glow { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(30px, -30px) scale(1.1); } 66% { transform: translate(-20px, 20px) scale(0.9); } } @keyframes drift-glow { 0%, 100% { transform: translate(0, 0) rotate(0deg); opacity: 0.6; } 50% { transform: translate(-40px, 10px) rotate(5deg); opacity: 0.9; } }