/* =========================================================
   FOOTER
   ========================================================= */
.footer {
    background: var(--surface);
    color: var(--text-soft);
    text-align: center;
    padding: 18px;
    margin-top: auto;
    font-size: .88rem;
    border-top: 1px solid var(--border);
}
.footer strong { color: var(--yellow-dark); font-weight: 600; }

/* =========================================================
   ANIMATIONS
   ========================================================= */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideIn {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes popIn {
    0%   { opacity: 0; transform: scale(.92); }
    70%  { transform: scale(1.02); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes pulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.04); }
    100% { transform: scale(1); }
}
@keyframes pulseRing {
    0%   { box-shadow: 0 0 0 0   var(--yellow-soft), 0 0 0 1px var(--yellow); }
    70%  { box-shadow: 0 0 0 12px transparent,        0 0 0 1px var(--yellow); }
    100% { box-shadow: 0 0 0 0   transparent,         0 0 0 1px var(--yellow); }
}

.fade-in  { animation: fadeIn  .45s ease both; }
.slide-up { animation: slideUp .5s ease both; }
.pop-in   { animation: popIn   .5s ease both; }

@media (max-width: 768px) {
    .navbar { padding: 12px 16px; flex-wrap: wrap; gap: 10px; }
    .nav-links { gap: 10px; font-size: .88rem; flex-wrap: wrap; justify-content: flex-end; }
    .icon-btn, .lang-btn { width: 32px; height: 32px; font-size: .9rem; }
    .lang-btn { width: auto; padding: 0 10px; }
    .hero-title { font-size: 1.9rem; }
    .timeline { flex-direction: column; gap: 14px; }
    .timeline .bar { width: 4px; height: 24px; margin: 0; flex: 0 0 24px; }
    .step { width: 100%; }
    .stat-card { flex-direction: row; }
    .main-content { padding: 24px 16px; }
}