.hero-bg {
background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(255, 255, 255, 0.9) 100%),
url(https://images.unsplash.com/photo-1490645935967-10de6ba17061?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80);
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.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), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.fade-in {
opacity: 0;
transform: translateY(20px);
animation: fadeInUp 0.6s ease forwards;
}
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
.price-highlight {
background: linear-gradient(45deg, #ef4444, #dc2626);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.promotion-badge {
background: linear-gradient(45deg, #ef4444, #f97316);
}
.quiz-container {
background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
}
.progress-bar {
transition: width 0.3s ease;
}