:root {
  --page-bg: #02040a;
  --panel-bg: rgba(4, 8, 16, 0.88);
  --blue: #005bff;
  --blue-bright: #00a3ff;
  --text: #f5f7fb;
  --muted: #aeb7c8;
  --metal: linear-gradient(180deg, #ffffff 0%, #cbd0d8 38%, #797f88 55%, #f6f7f9 100%);
}

body {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 10%, rgba(0, 89, 255, 0.28), transparent 34%),
    radial-gradient(circle at 50% 72%, rgba(0, 123, 255, 0.12), transparent 34%),
    linear-gradient(180deg, #02040a 0%, #000 100%) !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  opacity: 0.42;
  background:
    linear-gradient(30deg, rgba(0, 115, 255, 0.22) 12%, transparent 12.5%, transparent 87%, rgba(0, 115, 255, 0.22) 87.5%, rgba(0, 115, 255, 0.22)),
    linear-gradient(150deg, rgba(0, 115, 255, 0.22) 12%, transparent 12.5%, transparent 87%, rgba(0, 115, 255, 0.22) 87.5%, rgba(0, 115, 255, 0.22)),
    linear-gradient(30deg, rgba(0, 115, 255, 0.22) 12%, transparent 12.5%, transparent 87%, rgba(0, 115, 255, 0.22) 87.5%, rgba(0, 115, 255, 0.22)),
    linear-gradient(150deg, rgba(0, 115, 255, 0.22) 12%, transparent 12.5%, transparent 87%, rgba(0, 115, 255, 0.22) 87.5%, rgba(0, 115, 255, 0.22)),
    linear-gradient(60deg, rgba(0, 115, 255, 0.12) 25%, transparent 25.5%, transparent 75%, rgba(0, 115, 255, 0.12) 75%, rgba(0, 115, 255, 0.12));
  background-color: #02040a;
  background-position: 0 0, 0 0, 22px 38px, 22px 38px, 0 0;
  background-size: 44px 76px;
}

body::after {
  content: "";
  position: fixed;
  inset: 18px;
  z-index: -1;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 18px;
  box-shadow:
    inset 0 0 34px rgba(255, 255, 255, 0.08),
    0 0 28px rgba(0, 76, 255, 0.18);
  pointer-events: none;
}

header {
  min-height: 78px;
  display: grid;
  align-items: center;
}

.brand {
  color: var(--blue-bright) !important;
  text-shadow: 0 0 14px rgba(0, 102, 255, 0.75);
}

nav a {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
  font-size: 12px;
  text-shadow: 0 0 12px rgba(0, 102, 255, 0.55);
}

main {
  padding-top: 44px !important;
}

.panel {
  position: relative;
  overflow: hidden;
  border-color: rgba(0, 132, 255, 0.58) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(0, 89, 255, 0.18), transparent 38%),
    rgba(4, 8, 16, 0.9) !important;
  box-shadow:
    0 0 42px rgba(0, 89, 255, 0.24),
    inset 0 0 26px rgba(0, 89, 255, 0.1) !important;
}

.panel::before {
  content: "";
  position: absolute;
  inset: 14px 18px auto;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--blue), transparent);
  box-shadow: 0 0 16px rgba(0, 102, 255, 0.9);
}

h1 {
  color: transparent;
  background: var(--metal);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 0 8px 22px rgba(0, 0, 0, 0.85);
}

h2 {
  color: #f6f8ff;
  text-shadow: 0 0 12px rgba(0, 102, 255, 0.45);
}

input,
textarea {
  box-shadow: inset 0 0 16px rgba(0, 89, 255, 0.1);
}

.checks {
  border-color: rgba(0, 132, 255, 0.48) !important;
  box-shadow: inset 0 0 20px rgba(0, 89, 255, 0.08);
}

button {
  border-radius: 0;
}

footer {
  background: rgba(0, 0, 0, 0.74);
}

@media (max-width: 640px) {
  body::after {
    inset: 10px;
    border-radius: 14px;
  }

  nav a {
    font-size: 11px;
  }
}