:root {
  --green: #41ff80;
  --green-soft: rgba(65, 255, 128, .22);
  --black: #030603;
  --panel: rgba(4, 14, 7, .78);
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background: var(--black);
  color: #eaffef;
  overflow: hidden;
}

#matrix {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background: radial-gradient(circle at center, #08140b 0%, #020402 72%);
}

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

.card {
  width: min(920px, 94vw);
  padding: clamp(28px, 5vw, 56px);
  text-align: center;
  border: 1px solid rgba(65, 255, 128, .45);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(0, 0, 0, .70), var(--panel));
  box-shadow: 0 0 42px rgba(65, 255, 128, .22), inset 0 0 34px rgba(65, 255, 128, .07);
  backdrop-filter: blur(5px);
}

.eyebrow {
  margin: 0 0 10px;
  color: var(--green);
  font-size: clamp(14px, 2vw, 18px);
  letter-spacing: .35em;
  text-transform: uppercase;
  text-shadow: 0 0 12px var(--green-soft);
}

h1 {
  margin: 0 0 22px;
  font-size: clamp(42px, 9vw, 96px);
  line-height: .95;
  letter-spacing: -0.06em;
  color: #f4fff7;
  text-shadow: 0 0 12px rgba(65, 255, 128, .75), 0 0 34px rgba(65, 255, 128, .35);
}

.construction-graphic {
  width: min(620px, 92%);
  margin: 10px auto 22px;
}

.construction-graphic svg {
  width: 100%;
  height: auto;
  display: block;
}

.spark circle {
  animation: blink 1.4s infinite alternate;
}

.spark circle:nth-child(2) { animation-delay: .25s; }
.spark circle:nth-child(3) { animation-delay: .55s; }
.spark circle:nth-child(4) { animation-delay: .85s; }

.message {
  margin: 0;
  font-size: clamp(18px, 2.7vw, 28px);
  font-weight: 700;
}

.submessage {
  margin: 10px 0 0;
  color: rgba(234, 255, 239, .72);
  font-size: clamp(15px, 2vw, 20px);
}

@keyframes blink {
  from { opacity: .25; transform: scale(.7); }
  to { opacity: 1; transform: scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
  .spark circle { animation: none; }
}