:root {
  --accent: #6ee7ff;
  /* swap to taste: steel blue / neon mint */
  --bg: #0e0e0e;
  --fg: #ededed;
  --muted: #d7d7d7;
  --border: #2a2a2a;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #ffffff;
    --fg: #0f0f0f;
    --muted: #303030;
    --border: #e5e5e5;
  }
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  display: grid;
  place-items: start center;
  padding: 48px;
}

.card {
  width: 100%;
  max-width: 800px;
  padding: 56px;
  background: color-mix(in oklab, var(--bg) 92%, black 8%);
  /* subtle depth without shadows that look tacky on dark */
}

h1 {
  font-size: 96px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 24px 0;
  font-weight: 700;
  background: linear-gradient(90deg, #6ee7ff, #ff6ee7, #6ee7ff);
  background-size: 200%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: hueflow 6s linear infinite;
}

@keyframes hueflow {
  0% { background-position: 0% }
  100% { background-position: 200% }
}

@media (prefers-color-scheme: light) {
  h1 {
    background: linear-gradient(90deg, #0066cc, #cc0066, #0066cc);
    background-size: 200%;
    -webkit-background-clip: text;
    background-clip: text;
  }
}

.tagline {
  color: var(--muted);
  font-size: 48px;
  line-height: 1.4;
  margin: 0 0 48px 0;
  opacity: 0.9;
}

.links {
  display: flex;
  align-items: center;
  gap: 80px;
}

.links a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 64px;
  width: 64px;
}

.links img {
  height: 70px;
  filter: brightness(0) invert(1);
  opacity: 0.85;
  transition: opacity 120ms ease;
}

@media (prefers-color-scheme: light) {
  .links img {
    filter: brightness(0) invert(0);
  }
}

.links a:hover img {
  opacity: 1;
}

.wrap {
  display: grid;
  min-height: 100%;
  width: 100%;
  place-items: start center;
}

@media (max-width: 768px) {
  body {
    padding: 24px;
  }

  .card {
    padding: 32px;
  }
}