/* LAB874 landing, in the Console style world.lab874.com and
   polymarket.lab874.com share: near-black glass over a faint grid, hairline
   rules, panels framed only at their four corners, headings in spaced
   capitals with an amber mark, pale cyan for what can be followed. The hero
   image carries the wordmark and fades into the page. Text is at AA contrast
   or better against the panels. */
:root {
  --page: #030608;
  --paper: rgb(10 18 24 / 0.72);
  --ink: #f4f8fa;
  --text: #e1e8ec;
  --muted: #aab6bf;
  --faint: #8b98a2;
  --rule: rgb(200 228 240 / 0.11);
  --rule-strong: rgb(200 228 240 / 0.26);
  --corner: rgb(214 240 250 / 0.7);
  --link: #9ed8ec;
  --accent: #e9a23b;
}
* { box-sizing: border-box; }
html { background: var(--page); color-scheme: dark; scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0;
  color: var(--text);
  font: 400 16px/1.6 "Helvetica Neue", Helvetica, Inter, -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(ellipse 90% 60% at 50% 40%, rgb(40 90 110 / 0.22), transparent 70%),
    linear-gradient(rgb(200 228 240 / 0.035) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgb(200 228 240 / 0.035) 1px, transparent 1px) 0 0 / 48px 48px,
    var(--page);
  background-attachment: fixed;
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* As tall as the screen allows without cropping the wordmark: the image is
   16:9 and the logo spans its middle 40%, so on a narrow screen the whole
   image is shown at full width rather than filled and cut. Its lower edge
   fades into the page. */
.hero {
  position: relative;
  height: min(100svh, 56.25vw);
  min-height: 220px;
  overflow: hidden;
  background: var(--page);
}
.hero img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 45%;
  display: block;
}
.hero::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 34%;
  background: linear-gradient(to bottom, rgb(3 6 8 / 0), rgb(3 6 8 / 0.55) 55%, var(--page));
  pointer-events: none;
}
.cue {
  position: absolute; left: 50%; bottom: 3.5%; transform: translateX(-50%); z-index: 1;
  display: inline-flex; flex-direction: column; align-items: center; gap: 4px;
  color: var(--link); text-decoration: none;
  font-size: 13.2px; letter-spacing: 0.32em; text-transform: uppercase;
  text-shadow: 0 0 8px rgb(158 216 236 / 0.45);
  opacity: 0.9;
}
.cue:hover, .cue:focus-visible { opacity: 1; }
.cue:focus-visible { outline: 1px solid var(--link); outline-offset: 6px; }
.cue svg { animation: drift 2.4s ease-in-out infinite; filter: drop-shadow(0 0 3px rgb(158 216 236 / 0.5)); }
@keyframes drift { 50% { transform: translateY(4px); } }
@media (max-width: 640px) { .cue { display: none; } }

main { max-width: 1080px; margin: 0 auto; padding: 48px 24px 72px; }

/* A lit hairline with an amber index mark at its centre. */
.rule { display: flex; justify-content: center; align-items: center; gap: 12px; margin-bottom: 26px; }
.rule::before, .rule::after { content: ""; width: 56px; height: 1px; background: var(--rule-strong); }
.rule span { width: 6px; height: 6px; background: var(--accent); box-shadow: 0 0 6px var(--accent); }

.kicker {
  text-align: center; margin: 0 0 30px;
  font-size: 15.4px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink);
}
.intro {
  max-width: 64ch; margin: 0 auto 44px; text-align: center;
  font-size: 19.8px; font-weight: 400; line-height: 1.65; color: var(--text);
}

/* The panel: glass framed only at its four corners, outlined by a hairline. */
.card, .box {
  display: flex; flex-direction: column; gap: 10px;
  outline: 1px solid var(--rule); outline-offset: -1px;
  background:
    linear-gradient(var(--corner), var(--corner)) top left / 12px 1px no-repeat,
    linear-gradient(var(--corner), var(--corner)) top left / 1px 12px no-repeat,
    linear-gradient(var(--corner), var(--corner)) top right / 12px 1px no-repeat,
    linear-gradient(var(--corner), var(--corner)) top right / 1px 12px no-repeat,
    linear-gradient(var(--corner), var(--corner)) bottom left / 12px 1px no-repeat,
    linear-gradient(var(--corner), var(--corner)) bottom left / 1px 12px no-repeat,
    linear-gradient(var(--corner), var(--corner)) bottom right / 12px 1px no-repeat,
    linear-gradient(var(--corner), var(--corner)) bottom right / 1px 12px no-repeat,
    var(--paper);
  backdrop-filter: blur(4px);
}
.cards { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 760px) { .cards { grid-template-columns: repeat(2, 1fr); } }
.card {
  padding: 28px 28px 24px;
  color: inherit; text-decoration: none;
  transition: outline-color 0.2s, box-shadow 0.2s;
}
.card:hover, .card:focus-visible {
  outline-color: rgb(158 216 236 / 0.4);
  box-shadow: 0 0 24px -8px rgb(158 216 236 / 0.35), inset 0 1px 0 rgb(158 216 236 / 0.35);
}
.card:focus-visible { outline: 1px solid var(--link); }

/* Labels in spaced capitals behind an amber mark. */
.label {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13.8px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.label::before { content: ""; flex: none; width: 6px; height: 6px; background: var(--accent); box-shadow: 0 0 6px var(--accent); }
.card h2 { margin: 4px 0 0; font-size: 24.2px; line-height: 1.3; font-weight: 500; letter-spacing: 0.01em; color: var(--ink); }
.card p { margin: 0; font-size: 17.6px; color: var(--text); }
.go {
  margin-top: auto; padding-top: 12px;
  font-size: 15.4px; letter-spacing: 0.08em; color: var(--link);
  text-shadow: 0 0 8px rgb(158 216 236 / 0.35);
}
.go span { display: inline-block; transition: transform 0.2s; }
.card:hover .go span, .card:focus-visible .go span { transform: translateX(4px); }
.note { text-align: center; margin: 30px 0 0; font-size: 16.5px; color: var(--muted); }

/* What we do: four panels in the cards' style, not links. */
.what { margin-top: 80px; }
.boxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 20px; }
.box { padding: 24px 24px 22px; }
.box h3 { margin: 4px 0 0; font-size: 20.9px; line-height: 1.3; font-weight: 500; letter-spacing: 0.01em; color: var(--ink); }
.box p { margin: 0; font-size: 17.1px; color: var(--text); }

footer {
  border-top: 1px solid var(--rule-strong);
  max-width: 1080px; margin: 0 auto; padding: 22px 24px 32px;
  display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between;
  font-size: 13.2px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink);
}
.dim { color: var(--muted); }

@media (max-width: 640px) {
  main { padding: 36px 16px 56px; }
  footer { padding: 20px 16px 28px; }
  .intro { font-size: 18.7px; text-align: left; }
  .card { padding: 24px 20px 20px; }
  .box { padding: 22px 20px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cue svg { animation: none; }
  .card, .go span { transition: none; }
  .card:hover .go span, .card:focus-visible .go span { transform: none; }
}