.error-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 70vh;
  padding: var(--space-xl);
}

.error-code {
  font-size: 10rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: var(--space-lg);
  background: linear-gradient(to right, var(--gradient-1), var(--gradient-6));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: textGradient 5s linear infinite;
  background-size: 400% 400%;
}

@keyframes textGradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.error-title {
  font-size: var(--text-3xl);
  margin-bottom: var(--space-md);
}

.error-message {
  font-size: var(--text-lg);
  color: var(--dark-text-secondary);
  max-width: 600px;
  margin-bottom: var(--space-2xl);
}

.error-illustration {
  position: relative;
  width: 200px;
  height: 200px;
  margin-bottom: var(--space-sm);
}

.error-illustration i {
  font-size: 8rem;
  color: var(--accent-primary);
  animation: float 3s ease-in-out infinite;
}

.error-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-xl);
  background: linear-gradient(to right, var(--gradient-1), var(--gradient-3));
  color: white;
  border-radius: var(--radius-md);
  font-weight: 600;
  transition: all var(--transition-normal);
}

.error-btn:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  background: linear-gradient(to right, var(--gradient-3), var(--gradient-1));
}

.particles {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: -1;
}

.particle {
  position: absolute;
  border-radius: 50%;
  opacity: 0.6;
  animation-name: float, fadeIn;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}