/* 404 SECTION */
.error-section { max-width: 700px; margin: 3rem auto; padding: 0 1.5rem; }

.error-card { background: hsl(40, 15%, 93%); border-radius: calc(var(--radius) + 4px); padding: 2rem; }

.error-inner { background: hsl(42, 15%, 97%); border-radius: var(--radius); padding: 3rem; box-shadow: 0 1px 3px hsla(30, 15%, 15%, 0.04); text-align: center; }

.error-dino { font-size: 6rem; line-height: 1; margin-bottom: 1rem; animation: dinoWalk 2s ease-in-out infinite; display: inline-block; }

@keyframes dinoWalk {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-8px) rotate(-3deg); }
    75% { transform: translateY(-4px) rotate(3deg); }
}

.error-code { font-size: 8rem; font-weight: 900; line-height: 1; background: linear-gradient(135deg, var(--primary), var(--primary-glow), var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 0.5rem; letter-spacing: -0.04em; }

.error-inner h2 { font-size: 1.75rem; font-weight: 700; color: var(--foreground); margin-bottom: 0.75rem; }

.error-inner p { font-size: 0.9375rem; color: var(--muted-foreground); line-height: 1.7; margin-bottom: 0.75rem; }

.error-divider { width: 80px; height: 4px; background: linear-gradient(90deg, var(--primary), var(--accent)); border-radius: 2px; margin: 1.5rem auto; }

.error-footprints { display: flex; justify-content: center; gap: 1.25rem; margin: 1.5rem 0; font-size: 1.5rem; opacity: 0.4; }
.error-footprints span { animation: fadeStep 2s ease-in-out infinite; }
.error-footprints span:nth-child(2) { animation-delay: 0.3s; }
.error-footprints span:nth-child(3) { animation-delay: 0.6s; }
.error-footprints span:nth-child(4) { animation-delay: 0.9s; }
.error-footprints span:nth-child(5) { animation-delay: 1.2s; }

@keyframes fadeStep {
    0%, 100% { opacity: 0.2; transform: scale(0.9); }
    50% { opacity: 0.7; transform: scale(1.1); }
}

.error-actions { display: flex; gap: 1rem; justify-content: center; margin-top: 2rem; flex-wrap: wrap; }

.btn-primary { display: inline-flex; align-items: center; gap: 0.5rem; height: 44px; padding: 0 1.5rem; font-size: 0.9375rem; font-weight: 600; border-radius: 999px; border: none; cursor: pointer; background: var(--primary); color: var(--primary-foreground); transition: opacity 0.2s; text-decoration: none; }
.btn-primary:hover { opacity: 0.9; }
.btn-primary svg { width: 16px; height: 16px; }

.btn-outline { display: inline-flex; align-items: center; gap: 0.5rem; height: 44px; padding: 0 1.5rem; font-size: 0.9375rem; font-weight: 600; border-radius: 999px; border: 1px solid var(--border); cursor: pointer; background: transparent; color: var(--foreground); transition: all 0.2s; text-decoration: none; }
.btn-outline:hover { border-color: var(--primary); color: var(--primary); }
.btn-outline svg { width: 16px; height: 16px; }

.error-links { display: flex; gap: 1rem; justify-content: center; margin-top: 1.25rem; flex-wrap: wrap; }
.error-links a { font-size: 0.875rem; color: var(--muted-foreground); text-decoration: none; padding: 0.5rem 1rem; border-radius: 999px; transition: all 0.2s; border: 1px solid transparent; }
.error-links a:hover { color: var(--primary); border-color: var(--border); background: var(--card); }

.error-tip { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; margin-top: 2rem; text-align: left; }
.error-tip strong { color: var(--foreground); font-size: 0.875rem; }
.error-tip p { font-size: 0.8125rem; color: var(--muted-foreground); margin-top: 0.35rem; line-height: 1.6; }

@media (max-width: 768px) {
    .error-inner { padding: 2rem 1.5rem; }
    .error-code { font-size: 5rem; }
    .error-actions { flex-direction: column; align-items: center; }
}