:root {
  color-scheme: dark;
  --background: #080808;
  --text: #f5f5f5;
  --muted: #a4a4a4;
  --accent: #c8ff45;
  font-family: Arial, Helvetica, sans-serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--background); color: var(--text); }
body::before {
  content: '';
  display: block;
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 36%, #ffffff04, transparent 65%);
}
.landing {
  position: relative;
  width: min(100%, 52rem);
  min-height: 100svh;
  margin-inline: auto;
  padding: max(2.25rem, env(safe-area-inset-top)) max(1.25rem, env(safe-area-inset-right)) max(2.5rem, env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.brand { display: block; width: 9.5rem; height: auto; margin-bottom: 2.5rem; mix-blend-mode: screen; }
h1 { margin: 0; font-size: clamp(2.35rem, 8.6vw, 4.25rem); font-weight: 600; line-height: 1.09; letter-spacing: -.055em; }
h1 span { color: #fff; }
.description { max-width: 29rem; margin: 1.5rem auto 0; color: var(--muted); font-size: 1.0625rem; line-height: 1.65; text-wrap: pretty; }
.actions { width: 100%; max-width: 28rem; margin-top: 2.25rem; display: flex; flex-direction: column; gap: .875rem; }
.cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  min-height: 3.625rem;
  padding: 1.125rem .875rem;
  border: 1px solid transparent;
  border-radius: .625rem;
  font-size: .875rem;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: .015em;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.cta > span { min-width: 0; }
.cta-primary { background: var(--accent); color: #151a08; }
.cta-secondary { background: #111; border-color: #373737; color: #ebebeb; }
.cta-icon { flex: 0 0 1.25rem; width: 1.25rem; height: 1.25rem; }
.cta-arrow { display: none; flex: 0 0 1.125rem; width: 1.125rem; height: 1.125rem; }
.cta:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }
.cta:active { transform: translateY(1px); }
.availability { margin: .375rem 0 0; color: var(--muted); font-size: .8125rem; line-height: 1.5; }
.status-dot { display: inline-block; width: .3125rem; height: .3125rem; border-radius: 50%; margin-right: .45rem; vertical-align: .15em; background: var(--accent); }
.notice { margin: .125rem 0 0; padding: .875rem; border: 1px solid #303030; border-radius: .625rem; color: #d6d6d6; font-size: .875rem; line-height: 1.6; }
[hidden] { display: none !important; }
@media (hover: hover) {
  .cta-primary:hover { background: #d9ff80; }
  .cta-secondary:hover { background: #1c1c1c; border-color: #666; }
}
@media (min-width: 390px) { .cta-arrow { display: block; } }
@media (min-width: 640px) {
  .landing { padding-block: 3.5rem; }
  .brand { width: 10.75rem; margin-bottom: 2.75rem; }
  .description { font-size: 1.125rem; }
  .actions { margin-top: 2.5rem; }
  .cta { min-height: 4rem; letter-spacing: .025em; }
}
@media (prefers-reduced-motion: reduce) { .cta { transition: none; } }
@media (forced-colors: active) { .cta { border: 1px solid ButtonText; } .brand { mix-blend-mode: normal; } }