/* Lurk's Dungeon — marketing site styles.
 * No framework. Mobile-first. ~80 lines of CSS that has to do everything.
 */

:root {
  --bg: #000208;
  --bg-panel: #060a14;
  --fg: #e6f0ee;
  --fg-muted: #95a3a4;
  --accent: #4be3b6;          /* portal-glow green from the logo */
  --accent-soft: #1f3a32;
  --pill-ok: #4be3b6;
  --pill-degraded: #f0b232;
  --pill-down: #d24a4a;
  --pill-unknown: #6b7a7c;
  --font-stack: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); font-family: var(--font-stack); line-height: 1.5; }

.hero {
  max-width: 1080px;
  margin: 0 auto;
  padding: 48px 24px 24px;
  text-align: center;
}

/* The hero banner IS the wordmark; the page no longer renders an H1 on
 * top of it (the sr-only H1 below keeps SEO + assistive tech happy). The
 * image's native 1.905:1 aspect renders edge-to-edge inside .hero's
 * max-width container without letterboxing. `width: 100%` + `height: auto`
 * preserves aspect; max-width caps the upscale on ultrawide displays so
 * the banner stays visually grounded next to the rest of the page. */
.hero__banner img {
  display: block;
  width: 100%;
  max-width: 1080px;
  height: auto;
  margin: 0 auto 16px;
}

/* Visually hidden but kept in the DOM for screen readers, SEO, and the
 * accessibility tree. Standard tailwind-style sr-only recipe. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hero__tagline { color: var(--fg-muted); margin: 0 auto 28px; max-width: 28em; }

.cta-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 18px; margin: 0 0 6px; }

.cta {
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; letter-spacing: 0.01em;
  padding: 14px 26px; border-radius: 10px;
  text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cta--primary {
  background: var(--accent); color: #04130d;
  box-shadow: 0 4px 24px rgba(75, 227, 182, 0.35);
  font-size: 1.05rem;
}
.cta--primary:hover { transform: translateY(-1px); box-shadow: 0 6px 28px rgba(75, 227, 182, 0.5); }
.cta--primary:active { transform: translateY(0); }

.cta__hint { color: var(--fg-muted); font-size: 0.9rem; margin: 6px 0 32px; }

.status-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  background: var(--bg-panel); border: 1px solid var(--accent-soft);
  font-size: 0.9rem; color: var(--fg-muted);
}
.status-pill__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pill-unknown); transition: background 0.2s ease; }
.status-pill[data-state="ok"]       .status-pill__dot { background: var(--pill-ok); box-shadow: 0 0 8px var(--pill-ok); }
.status-pill[data-state="degraded"] .status-pill__dot { background: var(--pill-degraded); }
.status-pill[data-state="down"]     .status-pill__dot { background: var(--pill-down); }
.status-pill[data-state="ok"]       .status-pill__label { color: var(--fg); }

.socials { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; margin: 0 0 36px; }
.social {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 6px;
  background: var(--bg-panel); border: 1px solid #0f1820;
  color: var(--fg); text-decoration: none;
  font-size: 0.85rem;
}
.social:hover { border-color: var(--accent); color: var(--accent); }
.social svg { width: 16px; height: 16px; fill: currentColor; }

.footer {
  max-width: 720px; margin: 0 auto;
  padding: 24px;
  text-align: center;
  color: var(--fg-muted);
  font-size: 0.85rem;
  border-top: 1px solid #0f1820;
}
.footer a { color: var(--accent); text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.footer__legal { margin: 8px 0 0; font-size: 0.8rem; color: var(--fg-muted); }
.footer__legal a { color: var(--fg-muted); }
.footer__legal a:hover { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .cta, .status-pill__dot { transition: none; }
}