:root {
  color-scheme: dark;
  --ink: #f7f3e8;
  --muted: #b9c4c0;
  --panel: rgba(11, 22, 23, 0.92);
  --line: rgba(255, 255, 255, 0.14);
  --accent: #f47a24;
  --teal: #28c4c7;
}

* { box-sizing: border-box; }

html { background: #0b1718; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
  line-height: 1.75;
  background:
    radial-gradient(circle at 15% 0%, rgba(40, 196, 199, 0.22), transparent 34rem),
    radial-gradient(circle at 90% 12%, rgba(244, 122, 36, 0.18), transparent 28rem),
    linear-gradient(150deg, #102728 0%, #091314 68%);
}

a { color: #6fe3e5; }

.site-header, main, .site-footer {
  width: min(920px, calc(100% - 40px));
  margin-inline: auto;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 0 18px;
  border-bottom: 1px solid var(--line);
}

.brand { color: var(--ink); font-weight: 800; text-decoration: none; letter-spacing: .04em; }
nav { display: flex; gap: 18px; }
nav a { color: var(--muted); text-decoration: none; }
nav a:hover { color: var(--ink); }

main { padding: 56px 0 72px; }
.hero { padding: 18px 0 34px; }
.eyebrow { color: var(--teal); font-weight: 800; letter-spacing: .14em; font-size: .8rem; }
h1 { margin: 8px 0 14px; font-size: clamp(2.1rem, 7vw, 4rem); line-height: 1.14; }
h2 { margin-top: 2.2em; line-height: 1.35; }
p, li { color: #dce3df; }
.lead { max-width: 700px; color: var(--muted); font-size: 1.08rem; }

.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; }
.card, .document {
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel);
  box-shadow: 0 20px 60px rgba(0,0,0,.24);
}
.card h2 { margin-top: 0; }
.button {
  display: inline-block;
  margin-top: 8px;
  padding: 11px 18px;
  color: #111;
  font-weight: 800;
  text-decoration: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffad42, var(--accent));
}
.note { padding: 14px 18px; border-left: 4px solid var(--teal); background: rgba(40,196,199,.08); }
.site-footer { padding: 24px 0 38px; color: var(--muted); border-top: 1px solid var(--line); font-size: .9rem; }
code { color: #ffd09a; }

@media (max-width: 600px) {
  .site-header { align-items: flex-start; flex-direction: column; }
  main { padding-top: 34px; }
  .document { padding: 20px; }
}