:root {
  --bg: #020812;
  --ink: #f7faff;
  --blue-top: #0d66e9;
  --blue-bottom: #064abf;
  --blue-hover-top: #1678ff;
  --blue-hover-bottom: #0756d1;
  --blue-active-top: #0756cb;
  --blue-active-bottom: #0447ad;
  --cyan: #48cdff;
  --mono: "SFMono-Regular", "SF Mono", "Cascadia Mono", "Roboto Mono", Consolas, "Liberation Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  background: var(--bg);
}

body {
  color: var(--ink);
  overflow: hidden;
  font-family: var(--mono);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: rgba(44, 169, 255, 0.3);
  color: #fff;
}

.splash {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  padding: max(24px, env(safe-area-inset-top)) max(30px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(30px, env(safe-area-inset-left));

  /* Background extracted from the approved composite. All visible source pixels outside the formerly baked foreground are preserved; only the occluded foreground regions were reconstructed. */
  background-image: url("assets/approved-background.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-color: var(--bg);
}

.hero {
  position: absolute;
  z-index: 2;
  top: 29.8%;
  left: 50%;
  width: min(calc(100% - 48px), 1260px);
  text-align: center;
  transform: translateX(-50%);
}

.hero h1 {
  margin: 0;
  font-family: var(--mono);
  font-size: clamp(72px, 7.55vw, 116px);
  line-height: 0.95;
  font-weight: 300;
  letter-spacing: 0.042em;
  white-space: nowrap;
  color: #f8fbff;
  text-shadow:
    0 0 2px rgba(255, 255, 255, 0.98),
    0 0 8px rgba(199, 224, 255, 0.45),
    0 0 22px rgba(117, 177, 237, 0.2);
}

.cursor {
  display: inline-block;
  color: #eef7ff;
  transform: translateX(0.02em);
  animation: cursor-pulse 2.4s ease-in-out infinite;
}

.explanation {
  max-width: 980px;
  margin: clamp(44px, 5.2vh, 58px) auto 0;
  font-family: var(--mono);
  font-size: clamp(15px, 1.28vw, 20px);
  line-height: 1.9;
  font-weight: 400;
  letter-spacing: 0.035em;
  color: rgba(244, 247, 251, 0.94);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.94);
}

.support-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(310px, 28.7vw, 440px);
  min-height: clamp(64px, 7.6vh, 80px);
  margin-top: clamp(78px, 8.8vh, 98px);
  padding: 0.9rem 1.8rem;
  border: 1px solid rgba(72, 205, 255, 0.98);
  border-radius: 6px;
  background: linear-gradient(180deg, var(--blue-top) 0%, #0757d6 52%, var(--blue-bottom) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.13),
    inset 0 -1px 0 rgba(0,0,0,0.18),
    0 0 4px rgba(68, 205, 255, 0.9),
    0 0 18px rgba(20, 123, 255, 0.52),
    0 0 42px rgba(4, 76, 187, 0.3),
    0 13px 34px rgba(0, 16, 55, 0.42);
  color: #f8fbff;
  font-family: var(--mono);
  font-size: clamp(16px, 1.45vw, 22px);
  font-weight: 400;
  letter-spacing: 0.035em;
  text-decoration: none;
  text-transform: none;
  text-shadow: 0 1px 7px rgba(0,0,0,0.35);
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.support-cta:focus-visible {
  outline: 2px solid #a9ddff;
  outline-offset: 5px;
}

.support-cta:active {
  background: linear-gradient(180deg, var(--blue-active-top) 0%, var(--blue-active-bottom) 100%);
  border-color: rgba(112, 218, 255, 1);
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,0.22),
    0 0 5px rgba(58, 194, 255, 0.68),
    0 0 16px rgba(19, 106, 232, 0.4),
    0 7px 20px rgba(0, 15, 48, 0.38);
  transform: translateY(2px);
}

@media (hover: hover) and (pointer: fine) {
  .support-cta:hover {
    background: linear-gradient(180deg, var(--blue-hover-top) 0%, #0c66ea 52%, var(--blue-hover-bottom) 100%);
    border-color: #72d7ff;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.16),
      0 0 5px rgba(93, 214, 255, 0.95),
      0 0 24px rgba(28, 137, 255, 0.6),
      0 0 52px rgba(8, 89, 218, 0.36),
      0 15px 36px rgba(0, 18, 57, 0.44);
    transform: translateY(-1px);
  }
}

.footer-mark {
  position: absolute;
  z-index: 2;
  right: max(34px, env(safe-area-inset-right));
  bottom: max(28px, env(safe-area-inset-bottom));
  font-family: var(--mono);
  font-size: clamp(10px, 0.9vw, 14px);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(241, 245, 250, 0.82);
  text-shadow: 0 2px 10px rgba(0,0,0,0.9);
}

@keyframes cursor-pulse {
  0%, 44%, 100% { opacity: 1; }
  52%, 78% { opacity: 0.3; }
}

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

@media (max-width: 900px) {
  .splash {
    background-position: 50% center;
  }


  .hero { top: 29%; }

  .hero h1 {
    font-size: clamp(58px, 10.3vw, 90px);
    letter-spacing: 0.02em;
  }

  .explanation {
    max-width: 82%;
    font-size: clamp(14px, 2.1vw, 18px);
    line-height: 1.75;
  }

  .support-cta {
    width: clamp(280px, 47vw, 410px);
    margin-top: clamp(64px, 7.5vh, 82px);
  }
}

@media (max-width: 620px) {
  .splash {
    padding: max(20px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
    /* Preserve the exact source image; only choose a crop that keeps the galaxy present. */
    background-position: 43% center;
  }


  .hero { top: 25.5%; }

  .hero h1 {
    font-size: clamp(41px, 12.2vw, 59px);
    letter-spacing: -0.012em;
  }

  .explanation {
    max-width: 94%;
    margin-top: 30px;
    font-size: clamp(12px, 3.45vw, 15px);
    line-height: 1.68;
    letter-spacing: 0.018em;
  }

  .support-cta {
    width: min(82vw, 360px);
    min-height: 58px;
    margin-top: 52px;
    font-size: clamp(14px, 4vw, 17px);
  }

  .footer-mark {
    right: 18px;
    bottom: max(18px, env(safe-area-inset-bottom));
    font-size: 8px;
    letter-spacing: 0.08em;
  }
}

@media (max-height: 620px) and (orientation: landscape) {
  .hero { top: 18%; }
  .hero h1 { font-size: clamp(54px, 8vw, 96px); }
  .explanation { margin-top: 22px; font-size: clamp(12px, 1.45vw, 17px); line-height: 1.5; }
  .support-cta { min-height: 52px; margin-top: 34px; }
}