:root {
    --primary: #4f46e5;
    --primary-dark: #4338ca;
    --secondary: #10b981;
    --accent: #f97316;
    --dark: #1e293b;
    --light: #f8fafc;
}
.bg-gradient-primary { background: linear-gradient(90deg, var(--primary), #818cf8); }
.btn-primary { background-color: var(--primary); color: white; transition: all 0.3s ease; padding: 0.75rem 2rem; border-radius: 0.5rem; font-weight: 600; display: inline-block; text-decoration: none; }
.btn-primary:hover { background-color: var(--primary-dark); transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); }
.btn-disabled { background-color: #9ca3af; cursor: not-allowed; }
.reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s ease; }
.reveal.active { opacity: 1; transform: translateY(0); }
.card-hover { transition: all 0.3s ease; }
.card-hover:hover { transform: translateY(-5px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); }
.step-item { position: relative; z-index: 1; }
.step-item.active .step-circle { background-color: var(--primary); border-color: var(--primary); color: white; }
.step-item.completed .step-circle { background-color: var(--secondary); border-color: var(--secondary); color: white; }
.step-circle { width: 36px; height: 36px; border-radius: 50%; background-color: white; border: 2px solid #e5e7eb; display: flex; align-items: center; justify-content: center; font-weight: bold; transition: all 0.3s ease; }
.ad-container { position: relative; overflow: hidden; border-radius: 0.5rem; transition: all 0.3s ease; }
.ad-container:hover { transform: scale(1.02); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); }
.pulse-animation { animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.4); } 70% { box-shadow: 0 0 0 15px rgba(79, 70, 229, 0); } 100% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0); } }
.bounce-in { animation: bounceIn 1s; }
@keyframes bounceIn { 0% { opacity: 0; transform: scale(0.3); } 50% { opacity: 1; transform: scale(1.05); } 70% { transform: scale(0.9); } 100% { transform: scale(1); } }
.timer-circle { position: relative; width: 80px; height: 80px; border-radius: 50%; background: white; margin: 0 auto; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: bold; color: var(--primary); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }
.timer-circle::before { content: ''; position: absolute; top: -3px; left: -3px; right: -3px; bottom: -3px; border-radius: 50%; background: linear-gradient(45deg, #4f46e5, #10b981, #4f46e5); animation: rotate 2s linear infinite; }
@keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }