.error-stage{
  position:relative;
  overflow:hidden;
  min-height:calc(100vh - 72px);
  display:grid;
  place-items:center;
  padding:72px 24px 96px;
  background:
    radial-gradient(ellipse 65% 45% at 18% 0%,rgba(79,140,255,.16),transparent 55%),
    radial-gradient(ellipse 50% 40% at 92% 85%,rgba(94,224,160,.1),transparent 50%);
}
.error-glow{
  position:absolute;
  inset:18% 20% auto;
  height:280px;
  background:radial-gradient(circle,rgba(79,140,255,.12),transparent 70%);
  filter:blur(20px);
  pointer-events:none;
}
.error-copy{
  position:relative;
  z-index:1;
  width:min(680px,100%);
}
.error-code{
  margin:0;
  font:600 clamp(88px,18vw,148px)/.88 Inter,system-ui,sans-serif;
  letter-spacing:-.07em;
  background:linear-gradient(135deg,#8eb6ff 10%,#5ee0a0 90%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:error-rise .55s cubic-bezier(.2,.8,.2,1) both;
}
.error-copy>.eyebrow{
  display:inline-block;
  margin-top:8px;
  animation:error-rise .55s .06s cubic-bezier(.2,.8,.2,1) both;
}
.error-copy h1{
  margin:12px 0 14px;
  font-size:clamp(32px,5vw,48px);
  letter-spacing:-.045em;
  line-height:1.08;
  animation:error-rise .55s .1s cubic-bezier(.2,.8,.2,1) both;
}
.error-copy>p{
  margin:0;
  max-width:42ch;
  color:var(--muted);
  font-size:18px;
  animation:error-rise .55s .14s cubic-bezier(.2,.8,.2,1) both;
}
.error-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:28px;
  animation:error-rise .55s .2s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes error-rise{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){
  .error-code,.error-copy>.eyebrow,.error-copy h1,.error-copy>p,.error-actions{animation:none}
}
@media(max-width:700px){
  .error-stage{padding-top:48px;min-height:auto}
  .error-copy>p{font-size:16px}
}