.error404 {
  position: relative;
  min-height: calc(100vh - 120px);
  padding: 56px 24px 100px;
  overflow: hidden;
}

.error404-inner {
  position: relative;
  z-index: 2;
  max-width: 1180px;
  margin: 0 auto;
}

.error404-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  height: 46px;
  padding: 0 22px;
  margin-bottom: 28px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--bg);
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .08em;
}

.error404-title {
  max-width: 820px;
  font-family: 'Roboto', sans-serif;
  font-size: clamp(3.4rem, 8vw, 7rem);
  line-height: .88;
  letter-spacing: -.06em;
  margin-bottom: 24px;
}

.error404-title em {
  font-style: normal;
  color: var(--accent);
}

.error404-text {
  max-width: 700px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.8;
}

.error404-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

.error404-bunny-scene {
  position: relative;
  width: 220px;
  height: 154px;
  margin-top: 54px;
}

.error404-bunny {
  position: absolute;
  left: 22px;
  bottom: 12px;
  width: 156px;
  height: 156px;
  overflow: visible;
  animation: bunnyHop 3.2s steps(6, end) infinite;
}

.error404-bunny-pixel {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 8px;
  height: 8px;
  background: transparent;
  transform: scale(1);
  box-shadow:
    56px 0 #1a1720, 64px 0 #1a1720,
    48px 8px #1a1720, 56px 8px #b8742a, 64px 8px #b8742a, 72px 8px #1a1720, 80px 8px #1a1720,
    48px 16px #1a1720, 56px 16px #b8742a, 64px 16px #fff6eb, 72px 16px #fff6eb, 80px 16px #1a1720,
    40px 24px #1a1720, 48px 24px #b8742a, 56px 24px #fff6eb, 64px 24px #fff6eb, 72px 24px #b8742a, 80px 24px #1a1720,
    32px 32px #1a1720, 40px 32px #b8742a, 48px 32px #fff6eb, 56px 32px #fff6eb, 64px 32px #b8742a, 72px 32px #1a1720, 88px 32px #1a1720,
    32px 40px #1a1720, 40px 40px #b8742a, 48px 40px #b8742a, 56px 40px #fff6eb, 64px 40px #b8742a, 72px 40px #b8742a, 80px 40px #1a1720, 88px 40px #1a1720,
    24px 48px #1a1720, 32px 48px #b8742a, 40px 48px #b8742a, 48px 48px #b8742a, 56px 48px #b8742a, 64px 48px #b8742a, 72px 48px #fff6eb, 80px 48px #1a1720, 88px 48px #fff6eb, 96px 48px #1a1720,
    16px 56px #1a1720, 24px 56px #b8742a, 32px 56px #b8742a, 40px 56px #b8742a, 48px 56px #b8742a, 56px 56px #b8742a, 64px 56px #fff6eb, 72px 56px #fff6eb, 80px 56px #fff6eb, 88px 56px #ff83b3, 96px 56px #ff9540, 104px 56px #267a34,
    8px 64px #1a1720, 16px 64px #b8742a, 24px 64px #b8742a, 32px 64px #fff6eb, 40px 64px #fff6eb, 48px 64px #fff6eb, 56px 64px #fff6eb, 64px 64px #1a1720, 72px 64px #fff6eb, 80px 64px #fff6eb, 88px 64px #fff6eb, 96px 64px #ff9540, 104px 64px #267a34, 112px 64px #1f5d2a,
    8px 72px #1a1720, 16px 72px #b8742a, 24px 72px #b8742a, 32px 72px #fff6eb, 40px 72px #fff6eb, 48px 72px #fff6eb, 56px 72px #fff6eb, 64px 72px #fff6eb, 72px 72px #fff6eb, 80px 72px #fff6eb, 88px 72px #fff6eb, 96px 72px #1a1720,
    0 80px #1a1720, 8px 80px #b8742a, 16px 80px #b8742a, 24px 80px #b8742a, 32px 80px #fff6eb, 40px 80px #fff6eb, 48px 80px #fff6eb, 56px 80px #fff6eb, 64px 80px #fff6eb, 72px 80px #fff6eb, 80px 80px #fff6eb, 88px 80px #1a1720,
    0 88px #1a1720, 8px 88px #b8742a, 16px 88px #b8742a, 24px 88px #b8742a, 32px 88px #b8742a, 40px 88px #fff6eb, 48px 88px #fff6eb, 56px 88px #fff6eb, 64px 88px #fff6eb, 72px 88px #fff6eb, 80px 88px #1a1720,
    0 96px #1a1720, 8px 96px #b8742a, 16px 96px #b8742a, 24px 96px #b8742a, 32px 96px #b8742a, 40px 96px #fff6eb, 48px 96px #fff6eb, 56px 96px #fff6eb, 64px 96px #fff6eb, 72px 96px #1a1720,
    0 104px #1a1720, 8px 104px #b8742a, 16px 104px #b8742a, 24px 104px #b8742a, 32px 104px #b8742a, 40px 104px #fff6eb, 48px 104px #fff6eb, 56px 104px #fff6eb, 64px 104px #fff6eb, 72px 104px #1a1720,
    8px 112px #1a1720, 16px 112px #b8742a, 24px 112px #b8742a, 32px 112px #b8742a, 40px 112px #b8742a, 48px 112px #fff6eb, 56px 112px #fff6eb, 64px 112px #fff6eb, 72px 112px #1a1720,
    16px 120px #1a1720, 24px 120px #b8742a, 32px 120px #b8742a, 40px 120px #b8742a, 48px 120px #b8742a, 56px 120px #1a1720, 64px 120px #1a1720,
    24px 128px #1a1720, 32px 128px #1a1720, 40px 128px #1a1720, 48px 128px #1a1720;
}

.error404-bunny-hole {
  position: absolute;
  left: 32px;
  bottom: 0;
  width: 128px;
  height: 34px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.38);
  box-shadow: inset 0 6px 12px rgba(255, 255, 255, 0.02);
}

.error404-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 72px;
}

.error404-card {
  position: relative;
  padding: 28px 26px 30px;
  border: 0; box-shadow: var(--shadow-sm);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(8px);
}

.error404-card-kicker {
  margin-bottom: 14px;
  color: var(--accent);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.error404-card h2 {
  font-family: 'Roboto', sans-serif;
  font-size: 1.5rem;
  line-height: .98;
  letter-spacing: -.03em;
  margin-bottom: 12px;
}

.error404-card p {
  color: var(--muted);
  line-height: 1.75;
}

.error404-noise {
  position: absolute;
  border-radius: 999px;
  filter: blur(26px);
  opacity: .24;
  pointer-events: none;
  animation: error404Float 10s ease-in-out infinite;
}

.error404-noise-a {
  top: 120px;
  right: 8%;
  width: 220px;
  height: 220px;
  background: rgba(232, 255, 71, 0.18);
}

.error404-noise-b {
  left: 10%;
  bottom: 80px;
  width: 180px;
  height: 180px;
  background: rgba(255, 255, 255, 0.08);
  animation-delay: -3s;
}

@keyframes bunnyHop {
  0%, 100% {
    transform: translateY(0);
  }
  20% {
    transform: translateY(-8px);
  }
  40% {
    transform: translateY(0);
  }
  60% {
    transform: translateY(-18px);
  }
  80% {
    transform: translateY(0);
  }
}

@keyframes error404Float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -24px, 0); }
}

@media (max-width: 960px) {
  .error404-cards {
    grid-template-columns: 1fr;
  }

  .error404-bunny-scene {
    margin-top: 42px;
  }
}

@media (max-width: 720px) {
  .error404 {
    padding: 40px 24px 80px;
  }

  .error404-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .error404-actions .cta-btn,
  .error404-actions .about-btn {
    text-align: center;
  }
}