/* One stylesheet, no framework, no build step.
   A marketing page's whole job is to load instantly and say one thing clearly; a toolchain buys
   neither and rots. System fonts for the same reason — no third-party request, nothing to consent
   to, and no layout shift while a webfont arrives. */

:root {
  --bg: #0a0b0f;
  --bg-raised: #12141b;
  --line: rgba(255, 255, 255, 0.09);
  --ink: #f4f2ee;
  --ink-soft: #b9b6ae;
  --ink-mute: #86837c;
  /* One accent. Gold rather than the usual crypto violet: it reads as "renaissance", it is
     legible on near-black at every weight, and it is not the Cosmos brand's colour to borrow. */
  --accent: #e8b44a;
  --accent-ink: #16130a;
  --radius: 12px;
  --max: 1080px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 10px 16px;
  border-radius: 0 0 8px 0;
  z-index: 10;
}
.skip:focus { left: 0; }

a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* A single soft light at the top of the page. Static, so it costs nothing and cannot jank.
   It belongs to the page, not to the hero. Anchored to the hero it began ~37px down, and since a
   radial gradient is brightest at its own centre — which sat exactly on that box's top edge — the
   effect was a hard horizontal seam under the header rather than a glow. Starting it above y=0
   puts the bright part off-screen, so what you see is already mid-fade and has no edge.

   Sides are flush at 0 too. The old -20% insets made the document 116px wider than the viewport,
   which is a horizontal scrollbar on a desktop and a page that slides sideways under a thumb. */
body::before {
  content: "";
  position: absolute;
  top: -180px;
  left: 0;
  right: 0;
  height: 760px;
  background: radial-gradient(46% 100% at 28% 0%, rgba(232, 180, 74, 0.2), transparent 70%);
  pointer-events: none;
  z-index: -1;
}

/* ── header ─────────────────────────────────────────────────────────────────────────── */
.top {
  display: flex;
  align-items: center;
  gap: 24px;
  max-width: var(--max);
  margin: 0 auto;
  padding: 22px 24px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 650;
  letter-spacing: -0.01em;
  text-decoration: none;
}
/* The validator's own logo, already cropped to a circle with transparency in logo.png — the source
   artwork is a round emblem on a square dark field, and that field read as a black box sitting on
   the page background. No border-radius here on purpose: the file is the right shape. */
.mark { width: 44px; height: 44px; display: block; }
.top nav { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.top nav a { color: var(--ink-soft); text-decoration: none; font-size: 15px; }
.top nav a:hover { color: var(--ink); }
.top nav a.cta {
  color: var(--accent);
  border: 1px solid rgba(232, 180, 74, 0.35);
  padding: 7px 14px;
  border-radius: 8px;
}
.top nav a.cta:hover { background: rgba(232, 180, 74, 0.1); color: var(--accent); }

/* ── hero ───────────────────────────────────────────────────────────────────────────── */
.hero {
  max-width: var(--max);
  margin: 0 auto;
  padding: 84px 24px 76px;
}
h1 {
  font-size: clamp(2.6rem, 6.2vw, 4.2rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: 680;
  margin: 0 0 22px;
  max-width: 16ch;
}
.lede {
  font-size: clamp(1.05rem, 2vw, 1.28rem);
  color: var(--ink-soft);
  max-width: 62ch;
  margin: 0 0 34px;
}

.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  font-weight: 550;
  text-decoration: none;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}
.button:hover { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.18); }
.button:active { transform: translateY(1px); }
.button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 650; }
.button.primary:hover { background: #f0c164; border-color: #f0c164; }

/* ── sections ───────────────────────────────────────────────────────────────────────── */
.band {
  max-width: var(--max);
  margin: 0 auto;
  padding: 64px 24px;
  border-top: 1px solid var(--line);
}
h2 {
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 28px;
}
h3 { font-size: 1.16rem; line-height: 1.3; margin: 0 0 10px; letter-spacing: -0.01em; }
p { margin: 0 0 14px; }
.section-lede { color: var(--ink-soft); max-width: 62ch; margin-bottom: 30px; }

.grid { display: grid; gap: 22px; }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid article p { color: var(--ink-soft); margin: 0; }

/* Column layout so the closing line sits on the bottom edge of both cards regardless of how much
   copy is above it. Two cards of different heights with their last lines at different offsets
   reads as an unfinished layout rather than as two different products. */
.card {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 26px 22px;
  display: flex;
  flex-direction: column;
}
.card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.card-head h3 { margin: 0; font-size: 1.32rem; }
.card p { color: var(--ink-soft); }
.pill {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--ink-mute);
  white-space: nowrap;
}
.pill.testnet { color: var(--accent); border-color: rgba(232, 180, 74, 0.35); }

.facts { list-style: none; padding: 0; margin: 16px 0 0; }
.facts li {
  color: var(--ink-soft);
  font-size: 15px;
  padding: 7px 0 7px 24px;
  border-top: 1px solid var(--line);
  position: relative;
}
.facts li::before { content: "→"; position: absolute; left: 0; color: var(--accent); }
.card-foot {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--ink-mute);
  margin-top: auto;
}
/* The companion to the one shipped product. Quieter than a real card on purpose — a dashed edge
   reads as "space reserved" rather than as a second thing you could go and use today, and
   `align-self: start` lets it hug its copy — stretched to match the product card beside it, it is
   a large empty rectangle, and empty space inside a border reads as something failing to load. */
.card.next { background: transparent; border-style: dashed; align-self: start; }
.card.next h3 { color: var(--ink-soft); }
.link { color: var(--accent); text-decoration: none; font-weight: 550; }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── validator ──────────────────────────────────────────────────────────────────────── */
.split { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: start; }
.split p { color: var(--ink-soft); max-width: 56ch; }
.specs { margin: 0; display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.specs > div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.specs > div:last-child { border-bottom: none; }
.specs dt { color: var(--ink-mute); font-size: 14px; }
.specs dd { margin: 0; font-weight: 550; text-align: right; }

/* ── delegate ───────────────────────────────────────────────────────────────────────── */
.fineprint { margin-top: 30px; color: var(--ink-mute); font-size: 14px; max-width: 68ch; }

/* ── footer ─────────────────────────────────────────────────────────────────────────── */
footer {
  max-width: var(--max);
  margin: 0 auto;
  padding: 48px 24px 64px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: start;
}
footer p { color: var(--ink-mute); margin: 4px 0 0; font-size: 15px; }
footer nav { display: flex; gap: 20px; font-size: 15px; }
footer nav a { color: var(--ink-soft); text-decoration: none; }
footer nav a:hover { color: var(--ink); }
.copyright { grid-column: 1 / -1; color: var(--ink-mute); font-size: 13px; margin-top: 20px; }

@media (max-width: 720px) {
  .split { grid-template-columns: 1fr; gap: 26px; }
  .top nav a:not(.cta) { display: none; }
  .band { padding: 48px 24px; }
  .hero { padding: 56px 24px 52px; }
}