/* ===== CTA CARD ===== */ .cta-card { position: relative; padding: 80px 40px; display: flex; justify-content: center; align-items: center; height: 570px; text-align: center; overflow: hidden; border-radius: 20px; opacity: 0.8 !important; background: #000; border: 1px solid; border-color: rgba(16, 255, 190, 0.2); transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1); } /* Gradient glow orbs */ .cta-card::before { content: ''; position: absolute; top: -100px; right: -100px; width: 400px; height: 400px; border-radius: 571.594px; background: rgba(0, 255, 177, 0.41); filter: blur(87.5px); pointer-events: none; transition: all 0.6s ease; } .cta-card::after { content: ''; position: absolute; bottom: -100px; left: -100px; width: 400px; height: 400px; border-radius: 571.594px; background: rgba(0, 255, 177, 0.41); filter: blur(87.5px); pointer-events: none; transition: all 0.6s ease; } /* ===== HOVER SHADOW ANIMATION ===== */ @media (min-width: 1024px) { .cta-card:hover { border-color: rgba(16, 255, 190, 0.2); box-shadow: 0 0 60px rgba(16, 255, 190, 0.1), 0 0 120px rgba(16, 255, 190, 0.05), inset 0 1px 0 rgba(16, 255, 190, 0.1); transform: translateY(-2px); } .cta-card:hover::before { top: -80px; right: -80px; width: 450px; height: 450px; border-radius: 571.594px; background: rgba(0, 255, 177, 0.41); filter: blur(87.5px); } .cta-card:hover::after { bottom: -80px; left: -80px; width: 450px; height: 450px; border-radius: 571.594px; background: rgba(0, 255, 177, 0.41); filter: blur(87.5px); } } /* ===== CTA BUTTON ===== */ .cta-button { display: inline-flex; align-items: center; gap: 10px; background: #ffffff; color: #050505; font-size: 13px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; padding: 14px 24px; border-radius: 999px; border: none; cursor: pointer; position: relative; overflow: hidden; transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); } .cta-button:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 8px 30px rgba(16, 255, 190, 0.25), 0 4px 20px rgba(0, 0, 0, 0.3); } .cta-button:active { transform: translateY(0) scale(0.98); } /* Button arrow icon */ .cta-button .arrow-icon { width: 24px; height: 24px; border-radius: 50%; background: #050505; display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease; } .cta-button:hover .arrow-icon { transform: translateX(2px); } .cta-button .arrow-icon svg { width: 12px; height: 12px; } /* ===== ANIMATIONS ===== */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .animate-in { animation: fadeInUp 0.8s ease forwards; opacity: 0; } /* ===== RESPONSIVE ===== */ @media (max-width: 768px) { .cta-card  { height: auto; } } @media (max-width: 640px) { .cta-card  { height: auto; min-height: 447px; overflow: hidden; } .cta-card::before { width: 300px; height: 300px; } .cta-card::after { width: 300px; height: 300px; } .cta-card { padding: 60px 24px; border-radius: 18px; } .cta-button { font-size: 12px; padding: 12px 20px; } }