:root { color-scheme: dark;
  --bg: #0d1117; --panel: #161b22; --border: #2d333b;
  --text: #e6edf3; --muted: #8b949e; --accent: #4d9fff; --amber: #d29922; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
/* The background is the viewport's, not the page's: the gradients, the drifting graph and the
   vignette stay fixed behind the words however long the page scrolls, so a long page does not
   stretch them over its whole height. */
.page { position: relative; isolation: isolate; overflow: hidden; min-height: 100vh;
  display: flex; flex-direction: column; }
.page::before { content: ""; position: fixed; inset: 0; z-index: -3; pointer-events: none;
  background:
    radial-gradient(circle at 18% 24%, rgba(77, 159, 255, 0.11), transparent 34%),
    radial-gradient(circle at 82% 78%, rgba(43, 211, 184, 0.07), transparent 30%),
    var(--bg); }
.page::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(circle at center, transparent 15%, rgba(13, 17, 23, 0.58) 100%); }
.graph { position: fixed; inset: 0; z-index: -2; width: 100%; height: 100%; pointer-events: none; }
.preview-bar { background: rgba(210, 153, 34, 0.12); border-bottom: 1px solid rgba(210, 153, 34, 0.35);
  color: var(--amber); font-size: 13px; text-align: center; padding: 6px 16px; }
header, main, footer { width: min(1040px, 100%); margin: 0 auto; padding: 0 16px; }
header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 20px; }
header nav { display: flex; gap: 18px; flex-wrap: wrap; font-size: 14px; }
header nav a { color: var(--muted); }
header nav a[aria-current="page"], header nav a:hover { color: var(--text); text-decoration: none; }
main { flex: 1; padding-top: 72px; padding-bottom: 64px; }
.hero { max-width: 720px; }
.hero h1 { font-size: clamp(32px, 6vw, 52px); line-height: 1.1; margin: 0 0 16px; letter-spacing: -0.02em; }
.hero p { font-size: 18px; color: var(--muted); margin: 0 0 28px; }
.eyebrow { color: var(--accent); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; margin: 0 0 12px; }
.button { display: inline-block; background: var(--accent); color: #0d1117; font-weight: 600;
  padding: 10px 18px; border-radius: 6px; }
.button:hover { text-decoration: none; filter: brightness(1.08); }
.badge { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--amber); border: 1px solid rgba(210, 153, 34, 0.5); border-radius: 999px; padding: 1px 8px; vertical-align: middle; }
.steps { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 32px; counter-reset: step; }
.steps li { counter-increment: step; background: rgba(22, 27, 34, 0.85); border: 1px solid var(--border);
  border-radius: 999px; padding: 4px 14px 4px 6px; font-size: 14px; }
.steps li::before { content: counter(step); display: inline-grid; place-items: center; width: 20px; height: 20px;
  margin-right: 8px; border-radius: 50%; background: var(--border); font-size: 12px; }
h2 { font-size: 22px; margin: 64px 0 20px; }
.doors, .points { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
.door, .point { background: rgba(22, 27, 34, 0.9); border: 1px solid var(--border); border-radius: 8px; padding: 20px;
  backdrop-filter: blur(10px); }
.door { display: flex; flex-direction: column; gap: 8px; color: var(--text); }
.door:hover { border-color: var(--accent); text-decoration: none; }
.door .audience { color: var(--muted); font-size: 13px; }
.door .name { font-size: 18px; font-weight: 600; }
.door .sentence { color: var(--muted); }
.door .go { color: var(--accent); font-size: 14px; margin-top: auto; }
.point h3 { margin: 0 0 6px; font-size: 16px; }
.point p { margin: 0; color: var(--muted); font-size: 15px; }
.point .more { display: inline-block; margin-top: 10px; font-size: 14px; }
.sections { display: grid; gap: 48px; margin-top: 8px; }
.section { max-width: 760px; }
.section h2 { margin: 0 0 8px; }
.section p { margin: 0; color: var(--muted); }
.section p + p { margin-top: 12px; }
.section figure { margin: 20px 0 0; max-width: 1008px; }
.section img { display: block; width: 100%; height: auto; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); }
.section figcaption { color: var(--muted); font-size: 13px; margin-top: 8px; }
.sections .section:has(figure) { max-width: none; }
.sections .section:has(figure) p { max-width: 760px; }
.stage-bar { background: rgba(77, 159, 255, 0.12); border-bottom: 1px solid rgba(77, 159, 255, 0.35);
  font-size: 14px; text-align: center; padding: 8px 16px; }
.stage-bar strong { color: var(--accent); }
header nav a.nav-cta { color: var(--accent); border: 1px solid rgba(77, 159, 255, 0.5); border-radius: 6px; padding: 0 10px; }
header nav a.nav-cta:hover { border-color: var(--accent); }
.request { max-width: 640px; display: grid; gap: 22px; margin-top: 8px; }
.request .field { display: grid; gap: 6px; font-weight: 600; font-size: 15px; }
.request .field small { color: var(--muted); font-weight: 400; }
.request input[type="email"], .request textarea { width: 100%; font: inherit; font-weight: 400; color: var(--text);
  background: rgba(22, 27, 34, 0.9); border: 1px solid var(--border); border-radius: 6px; padding: 9px 12px; }
.request input[type="email"]:focus, .request textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.request textarea { resize: vertical; min-height: 96px; }
.request fieldset { border: 1px solid var(--border); border-radius: 8px; margin: 0; padding: 14px 18px 18px;
  background: rgba(22, 27, 34, 0.9); display: grid; gap: 8px; }
.request legend { font-weight: 600; font-size: 15px; padding: 0 6px; }
.request legend small { color: var(--muted); font-weight: 400; }
.request .group { color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; margin: 8px 0 0; }
.request .check { display: flex; gap: 10px; align-items: baseline; font-size: 15px; cursor: pointer; }
.request .check input { accent-color: var(--accent); width: 16px; height: 16px; flex: none; transform: translateY(2px); }
.request button { border: 0; font: inherit; font-weight: 600; cursor: pointer; justify-self: start; }
.request .error { margin: 0; color: #ff7b72; background: rgba(248, 81, 73, 0.1); border: 1px solid rgba(248, 81, 73, 0.4); border-radius: 6px; padding: 8px 12px; }
.request .fine { margin: 0; color: var(--muted); font-size: 13px; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
footer { color: var(--muted); font-size: 12px; padding-top: 24px; padding-bottom: 24px; border-top: 1px solid var(--border); }
footer a { color: var(--muted); margin-right: 16px; }
@media (max-width: 600px) { main { padding-top: 40px; } header nav { gap: 6px 14px; width: 100%; } }