:root {
  --ink: #eaf8ff;
  --muted: #a9d8ec;
  --ice: #dff8ff;
  --frost: #7dd3fc;
  --cyan: #22d3ee;
  --blue: #2563eb;
  --deep: #031525;
  --midnight: #061d35;
  --aurora: #8bffdb;
  --danger: #ff5f9e;
  --glass: rgba(255, 255, 255, 0.105);
  --glass-border: rgba(207, 244, 255, 0.32);
  --shadow: 0 28px 85px rgba(0, 8, 28, 0.55);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
}

body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 18%, rgba(34, 211, 238, 0.34), transparent 28%),
    radial-gradient(circle at 80% 10%, rgba(139, 255, 219, 0.25), transparent 27%),
    radial-gradient(circle at 52% 86%, rgba(37, 99, 235, 0.35), transparent 34%),
    linear-gradient(135deg, #020817 0%, #061d35 44%, #0b3958 100%);
  overflow-x: hidden;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

body::before {
  opacity: 0.58;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.66) 1px, transparent 1.9px),
    radial-gradient(circle, rgba(125,211,252,0.48) 1px, transparent 1.8px),
    radial-gradient(circle, rgba(139,255,219,0.34) 1px, transparent 1.9px);
  background-size: 92px 92px, 137px 137px, 188px 188px;
  background-position: 0 -120px, 37px -80px, 84px -160px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 76%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 76%, transparent 100%);
  animation: winter-dot-drift 24s linear infinite;
  will-change: background-position;
}

body::after {
  background:
    linear-gradient(120deg, transparent 15%, rgba(125,211,252,0.18) 41%, transparent 68%),
    linear-gradient(300deg, transparent 18%, rgba(139,255,219,0.12) 43%, transparent 70%);
  mix-blend-mode: screen;
}

.page {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 34px;
}

.shell {
  width: min(1040px, 100%);
  min-height: min(620px, calc(100vh - 68px));
  display: grid;
  align-items: center;
  border: 1px solid var(--glass-border);
  border-radius: 34px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.16), rgba(255,255,255,0.055)),
    radial-gradient(circle at 20% 20%, rgba(34,211,238,0.18), transparent 34%),
    radial-gradient(circle at 78% 66%, rgba(139,255,219,0.12), transparent 28%);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
  overflow: hidden;
}

.shell::before {
  content: "";
  position: absolute;
  width: 430px;
  height: 430px;
  right: -120px;
  top: -140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34,211,238,0.36), transparent 68%);
}

.shell::after {
  content: "";
  position: absolute;
  left: -95px;
  bottom: -110px;
  width: 310px;
  height: 310px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139,255,219,0.26), transparent 70%);
}

.hero,
.error-card {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  text-align: center;
  padding: clamp(34px, 6vw, 76px);
}

.logo-wrap {
  width: min(650px, 92%);
  margin-bottom: 34px;
  padding: 18px 22px;
  border-radius: 26px;
  background: rgba(1, 12, 27, 0.44);
  border: 1px solid rgba(223, 248, 255, 0.24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 18px 40px rgba(0,0,0,0.22);
}

.logo-wrap img {
  display: block;
  width: 100%;
  height: auto;
}

.kicker {
  margin: 0 0 14px;
  color: var(--aurora);
  font-size: clamp(13px, 1.6vw, 16px);
  font-weight: 800;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  max-width: 880px;
  font-size: clamp(42px, 8vw, 96px);
  line-height: 0.92;
  letter-spacing: -0.06em;
  text-transform: uppercase;
  text-shadow: 0 0 34px rgba(34, 211, 238, 0.28);
}

.home-title {
  font-size: clamp(38px, 6.7vw, 78px);
}

.divider {
  width: min(410px, 74%);
  height: 3px;
  margin: 32px 0 0;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--cyan), var(--aurora), transparent);
  box-shadow: 0 0 26px rgba(34, 211, 238, 0.7);
}

.department {
  margin: 22px 0 0;
  color: var(--ice);
  font-size: clamp(18px, 2.7vw, 28px);
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.status {
  margin-top: 32px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid rgba(223, 248, 255, 0.32);
  background: rgba(5, 25, 45, 0.48);
  color: var(--muted);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.status::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--aurora);
  box-shadow: 0 0 15px var(--aurora);
}

.error-code {
  display: inline-block;
  margin: 0 0 24px;
  font-size: clamp(92px, 19vw, 210px);
  line-height: 0.78;
  font-weight: 950;
  letter-spacing: -0.1em;
  color: transparent;
  -webkit-text-stroke: 2px rgba(223, 248, 255, 0.82);
  text-shadow: 0 0 42px rgba(34,211,238,0.5);
}

.error-card h1 {
  font-size: clamp(34px, 6vw, 72px);
}

.actions {
  margin-top: 34px;
  display: flex;
  justify-content: center;
}

.button {
  appearance: none;
  text-decoration: none;
  color: #031525;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 15px 24px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--ice), var(--cyan) 52%, var(--aurora));
  box-shadow: 0 14px 34px rgba(34, 211, 238, 0.28), inset 0 1px 0 rgba(255,255,255,0.72);
}

.button:focus-visible {
  outline: 3px solid var(--aurora);
  outline-offset: 5px;
}

.corner-mark {
  position: absolute;
  right: 26px;
  bottom: 22px;
  z-index: 1;
  color: rgba(223, 248, 255, 0.38);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

@keyframes winter-dot-drift {
  0% {
    background-position: 0 -160px, 37px -120px, 84px -220px;
  }

  100% {
    background-position: 220px 720px, -120px 940px, 310px 860px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body::before {
    animation: none;
  }
}

@media (max-width: 680px) {
  .page {
    padding: 18px;
  }

  .shell {
    border-radius: 24px;
    min-height: calc(100vh - 36px);
  }

  .logo-wrap {
    padding: 12px 14px;
    margin-bottom: 26px;
  }

  .status {
    font-size: 12px;
  }

  .corner-mark {
    right: 18px;
    bottom: 16px;
  }
}