/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at https://mozilla.org/MPL/2.0/. */

:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #090b0f;
  color: #f4f6f8;
  --mint: #64efc2;
  --muted: #a4a9b3;
  --panel: #12161c;
  --border: #29303a;
}

* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(circle at 85% 0, rgba(100, 239, 194, .12), transparent 34%), #090b0f; }
a { color: var(--mint); }
.wrap { margin: 0 auto; max-width: 980px; padding: 0 24px; }
header { border-bottom: 1px solid var(--border); }
nav { align-items: center; display: flex; gap: 22px; min-height: 72px; }
nav .brand { align-items: center; color: #fff; display: flex; font-weight: 800; gap: 10px; margin-right: auto; text-decoration: none; }
nav img { height: 34px; width: 34px; }
nav a:not(.brand) { color: var(--muted); font-size: 14px; text-decoration: none; }
nav a:hover { color: #fff; }
main { min-height: calc(100vh - 150px); }
.hero { padding: 96px 0 72px; }
.eyebrow { color: var(--mint); font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
h1 { font-size: clamp(42px, 8vw, 76px); letter-spacing: -.055em; line-height: .98; margin: 14px 0 22px; max-width: 850px; }
h2 { font-size: 27px; letter-spacing: -.03em; margin: 0 0 14px; }
h3 { font-size: 18px; margin-top: 28px; }
p, li { color: var(--muted); line-height: 1.65; }
.lead { font-size: 20px; max-width: 720px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.button { background: var(--mint); border-radius: 10px; color: #07100d; display: inline-block; font-weight: 800; padding: 13px 18px; text-decoration: none; }
.button.secondary { background: transparent; border: 1px solid var(--border); color: #fff; }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); padding-bottom: 80px; }
.card { background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 24px; }
.card p { margin-bottom: 0; }
.document { max-width: 780px; padding: 64px 0 90px; }
.document h1 { font-size: 46px; }
.document section { border-top: 1px solid var(--border); margin-top: 34px; padding-top: 30px; }
code { background: #171c23; border-radius: 5px; color: #d8dce2; padding: 2px 6px; }
.notice { border-left: 3px solid var(--mint); margin: 24px 0; padding: 2px 0 2px 18px; }
footer { border-top: 1px solid var(--border); color: #777e89; font-size: 13px; padding: 28px 0; }
@media (max-width: 720px) { .grid { grid-template-columns: 1fr; } nav { flex-wrap: wrap; gap: 14px; padding: 16px 0; } .hero { padding-top: 64px; } }