:root{
  --bg:#0d0b08;
  --bg-raised:#161310;
  --bg-card:#1c1814;
  --border:#332c22;
  --amber:#e0a72e;
  --amber-bright:#f5c451;
  --text:#ede6d8;
  --text-dim:#a89c87;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  line-height:1.6;
}
a{color:var(--amber-bright)}
a:hover{color:#fff}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}

nav{
  position:sticky;top:0;z-index:10;
  background:rgba(13,11,8,.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--border);
}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.02em;color:var(--text);text-decoration:none}
.brand .mark{color:var(--amber-bright);font-size:1.3em}
nav .links{display:flex;gap:24px;font-size:.92rem}
nav .links a{color:var(--text-dim);text-decoration:none}
nav .links a:hover{color:var(--amber-bright)}
.gh-cta{
  border:1px solid var(--amber);
  color:var(--amber-bright) !important;
  padding:6px 14px;
  border-radius:6px;
}

header.hero{
  padding:96px 0 72px;
  text-align:center;
  background:
    radial-gradient(ellipse 60% 50% at 50% -10%, rgba(224,167,46,.14), transparent 60%);
}
.eyebrow{
  display:inline-block;
  font-family:var(--mono);
  font-size:.78rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--amber);
  border:1px solid var(--border);
  background:var(--bg-raised);
  padding:5px 12px;
  border-radius:999px;
  margin-bottom:22px;
}
h1{
  font-size:clamp(2.2rem,5vw,3.4rem);
  margin:0 0 18px;
  letter-spacing:-.01em;
}
h1 .accent{color:var(--amber-bright)}
.tagline{
  max-width:640px;margin:0 auto 32px;
  font-size:1.15rem;color:var(--text-dim);
}
.hero-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:20px}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 22px;border-radius:8px;
  font-weight:600;font-size:.95rem;text-decoration:none;
  border:1px solid transparent;
}
.btn-primary{background:var(--amber);color:#1a1305}
.btn-primary:hover{background:var(--amber-bright);color:#1a1305}
.btn-ghost{border-color:var(--border);color:var(--text) !important}
.btn-ghost:hover{border-color:var(--amber)}
.hero-note{font-family:var(--mono);font-size:.82rem;color:var(--text-dim)}

section{padding:64px 0;border-top:1px solid var(--border)}
.kicker{
  font-family:var(--mono);color:var(--amber);
  font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px;
}
h2{font-size:1.9rem;margin:0 0 14px}
.lede{color:var(--text-dim);max-width:740px;margin-bottom:36px}

.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:760px){.grid3{grid-template-columns:1fr}.grid2{grid-template-columns:1fr}}

.card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:10px;
  padding:22px;
}
.card .num{font-family:var(--mono);color:var(--amber);font-size:.85rem;margin-bottom:10px}
.card h3{margin:0 0 8px;font-size:1.05rem}
.card p{margin:0;color:var(--text-dim);font-size:.94rem}

.layer-stack{
  font-family:var(--mono);
  background:var(--bg-raised);
  border:1px solid var(--border);
  border-radius:10px;
  padding:22px 26px;
  font-size:.92rem;
  color:var(--text-dim);
  white-space:pre;
  overflow-x:auto;
}
.layer-stack .step{color:var(--text)}
.layer-stack .step.meta{color:var(--amber-bright)}

.diagram{
  background:var(--bg-raised);
  border:1px solid var(--border);
  border-radius:10px;
  padding:24px;
  overflow-x:auto;
}
.diagram .mermaid{display:flex;justify-content:center}

pre{
  background:#0a0806;
  border:1px solid var(--border);
  border-radius:8px;
  padding:16px 18px;
  overflow-x:auto;
  font-family:var(--mono);
  font-size:.87rem;
  color:#e8dcc4;
}
code{font-family:var(--mono)}
:not(pre) > code{
  background:var(--bg-raised);
  border:1px solid var(--border);
  padding:1px 6px;border-radius:4px;font-size:.9em;
}

.role-list{list-style:none;margin:0;padding:0}
.role-list li{
  display:flex;gap:14px;padding:14px 0;
  border-bottom:1px solid var(--border);
}
.role-list li:last-child{border-bottom:none}
.role-list b{color:var(--amber-bright);min-width:140px;flex-shrink:0}
.role-list span{color:var(--text-dim)}

.support{
  text-align:center;
  background:radial-gradient(ellipse 70% 100% at 50% 100%, rgba(224,167,46,.12), transparent 70%);
}
.support .btn{margin:4px}

footer{
  border-top:1px solid var(--border);
  padding:36px 0;
  text-align:center;
  color:var(--text-dim);
  font-size:.86rem;
}
footer a{color:var(--text-dim)}
footer a:hover{color:var(--amber-bright)}

/* Doc page specific */
.doc-content{
  max-width:800px;
  margin:0 auto;
  padding:56px 24px 80px;
}
.doc-content h1{font-size:clamp(1.8rem,4vw,2.6rem);margin-bottom:8px}
.doc-content h2{font-size:1.45rem;margin-top:48px;margin-bottom:12px;color:var(--text);border-bottom:1px solid var(--border);padding-bottom:8px}
.doc-content h3{font-size:1.1rem;margin-top:28px;margin-bottom:8px;color:var(--amber-bright)}
.doc-content p{margin:0 0 18px;color:var(--text)}
.doc-content ul,.doc-content ol{padding-left:24px;margin:0 0 18px}
.doc-content li{margin-bottom:6px;color:var(--text)}
.doc-content blockquote{
  margin:20px 0;
  padding:14px 20px;
  border-left:3px solid var(--amber);
  background:var(--bg-raised);
  border-radius:0 6px 6px 0;
  color:var(--text-dim);
}
.doc-content table{width:100%;border-collapse:collapse;margin:20px 0;font-size:.92rem}
.doc-content th{background:var(--bg-card);color:var(--amber-bright);padding:10px 14px;text-align:left;border:1px solid var(--border)}
.doc-content td{padding:9px 14px;border:1px solid var(--border);color:var(--text-dim);vertical-align:top}
.doc-content tr:nth-child(even) td{background:rgba(28,24,20,.5)}
.page-header{
  border-bottom:1px solid var(--border);
  padding:40px 0 32px;
  margin-bottom:0;
}
.page-header .wrap{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:12px}
.page-header h1{font-size:clamp(1.6rem,3.5vw,2.2rem);margin:0}
.breadcrumb{font-family:var(--mono);font-size:.8rem;color:var(--text-dim);margin-bottom:8px}
.breadcrumb a{color:var(--amber)}