@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes bulletIn {
  from { opacity: 0; transform: translateX(-12px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes iconPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
@keyframes softPulse {
  0%, 100% { box-shadow: var(--shadow-lg), var(--glow-yellow); }
  50% { box-shadow: var(--shadow-lg), 0 0 36px rgba(245, 197, 66, 0.28); }
}

.hero--gradient {
  background: linear-gradient(135deg, var(--bg) 0%, rgba(102, 167, 232, 0.22) 45%, rgba(245, 197, 66, 0.12) 100%);
  background-size: 200% 200%;
  animation: gradientShift 18s ease infinite;
}

.animate { opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; }
.animate.visible { opacity: 1; transform: translateY(0); }
.animate-scale { opacity: 0; transform: scale(0.96); transition: opacity 0.45s ease, transform 0.45s ease; }
.animate-scale.visible { opacity: 1; transform: scale(1); }
.animate-delay-1 { transition-delay: 0.1s; }
.animate-delay-2 { transition-delay: 0.2s; }
.animate-delay-3 { transition-delay: 0.3s; }
.animate-delay-4 { transition-delay: 0.4s; }

.hero__bullets.visible li { animation: bulletIn 0.4s ease forwards; }
.hero__bullets.visible li:nth-child(1) { animation-delay: 0.05s; }
.hero__bullets.visible li:nth-child(2) { animation-delay: 0.15s; }
.hero__bullets.visible li:nth-child(3) { animation-delay: 0.25s; }
.hero__bullets.visible li:nth-child(4) { animation-delay: 0.35s; }
.hero__bullets.visible li { opacity: 0; }

.card .card__icon { transition: transform var(--transition), color var(--transition); }
.card:hover .card__icon { transform: scale(1.1); color: var(--yellow); }
.btn { transition: box-shadow var(--transition), transform var(--transition), opacity 0.2s; }
.btn:active { transform: translateY(0) scale(0.98); }
.hero__cta .btn--primary { animation: softPulse 2.5s ease-in-out infinite; }
.hero__cta .btn--primary:hover { animation: none; }

.header__nav a { position: relative; }
.header__nav a::after { content: ''; position: absolute; left: 0; bottom: -4px; width: 0; height: 2px; background: var(--yellow); transition: width 0.25s ease; }
.header__nav a:hover::after { width: 100%; }

.back-top { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 98; width: 3rem; height: 3rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--surface); color: var(--text); box-shadow: var(--shadow); opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s, transform 0.3s; }
.back-top.is-visible { opacity: 1; visibility: visible; }
.back-top:hover { transform: translateY(-4px); box-shadow: var(--glow-blue); color: var(--blue); }
.back-top:active { transform: translateY(-2px) scale(0.96); }