/* Cyberdefentra: utility-first, cd- prefixed */
:root {
  --cd-plum: #1A1520;
  --cd-panel: #241C2C;
  --cd-line: #3A2E44;
  --cd-gold: #D4A24C;
  --cd-gold-deep: #B8862F;
  --cd-rose: #C98B8B;
  --cd-ink: #EDE6DD;
  --cd-muted: #B3A9A0;
  --cd-head: "Space Grotesk", system-ui, sans-serif;
  --cd-body: "IBM Plex Serif", Georgia, serif;
  --cd-r: 14px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; font-family: var(--cd-body); font-size: 1.0625rem; line-height: 1.7; -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--cd-gold); text-underline-offset: 3px; }
a:hover { color: var(--cd-ink); }
h1, h2, h3 { font-family: var(--cd-head); line-height: 1.2; letter-spacing: -.01em; }
:focus-visible { outline: 2px solid var(--cd-gold); outline-offset: 3px; }

/* ---------- utilities: layout ---------- */
.cd-wrap { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: 16px; }
.cd-narrow { max-width: 760px; }
.cd-flex { display: flex; }
.cd-wrap-row { flex-wrap: wrap; }
.cd-items-center { align-items: center; }
.cd-justify-between { justify-content: space-between; }
.cd-stack { display: flex; flex-direction: column; gap: 18px; }
.cd-gap-2 { gap: .5rem; } .cd-gap-3 { gap: .75rem; } .cd-gap-4 { gap: 1.25rem; } .cd-gap-6 { gap: 2.5rem; }
.cd-w-full { width: 100%; }
.cd-maxw-sm { max-width: 420px; }
.cd-center { text-align: center; }

/* ---------- utilities: spacing ---------- */
.cd-m-0 { margin: 0; }
.cd-mb-1 { margin: 0 0 .35rem; } .cd-mb-2 { margin: 0 0 .75rem; } .cd-mb-3 { margin: 0 0 1.1rem; }
.cd-mt-2 { margin-top: .6rem; } .cd-mt-3 { margin-top: 1rem; } .cd-mt-4 { margin-top: 1.5rem; } .cd-mt-5 { margin-top: 2rem; } .cd-mt-6 { margin-top: 3rem; }
.cd-my-5 { margin-block: 2rem; }
.cd-p-4 { padding: 1.25rem; } .cd-p-5 { padding: 1.75rem; }
.cd-py-3 { padding-block: .8rem; } .cd-py-6 { padding-block: 3rem; } .cd-py-8 { padding-block: 5rem; }
.cd-pt-4 { padding-top: 1.5rem; } .cd-pb-6 { padding-bottom: 3rem; }

/* ---------- utilities: type & color ---------- */
.cd-bg-plum { background: var(--cd-plum); }
.cd-txt-ink { color: var(--cd-ink); }
.cd-txt-gold { color: var(--cd-gold); }
.cd-txt-rose { color: var(--cd-rose); }
.cd-txt-muted { color: var(--cd-muted); }
.cd-txt-xs { font-size: .8rem; } .cd-txt-sm { font-size: .92rem; } .cd-txt-lg { font-size: 1.25rem; line-height: 1.35; }
.cd-font-head { font-family: var(--cd-head); font-weight: 600; }
.cd-upper { text-transform: uppercase; letter-spacing: .12em; }

/* ---------- components ---------- */
.cd-skip { position: absolute; left: -999px; top: 8px; background: var(--cd-gold); color: var(--cd-plum); padding: 8px 14px; z-index: 50; }
.cd-skip:focus { left: 8px; }

.cd-topbar { position: sticky; top: 0; z-index: 20; background: rgba(26, 21, 32, .92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--cd-line); }
.cd-brand { font-family: var(--cd-head); font-weight: 700; font-size: 1.2rem; color: var(--cd-ink); text-decoration: none; }
.cd-nav a { font-family: var(--cd-head); font-size: .95rem; color: var(--cd-muted); text-decoration: none; }
.cd-nav a:hover, .cd-nav a[aria-current] { color: var(--cd-gold); }

.cd-label { display: inline-block; margin: 0; font-family: var(--cd-head); font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--cd-plum); background: var(--cd-rose); padding: 3px 10px; border-radius: 4px; }
.cd-kicker { margin: 0 0 .5rem; font-family: var(--cd-head); font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.cd-h1 { font-size: clamp(1.9rem, 4.6vw, 3.1rem); font-weight: 700; margin: 0; }
.cd-lead { font-size: 1.18rem; color: var(--cd-muted); margin-bottom: 0; }
.cd-byline { font-family: var(--cd-head); font-size: .85rem; color: var(--cd-muted); margin-bottom: 0; }

.cd-panel { background: var(--cd-panel); border: 1px solid var(--cd-line); border-radius: var(--cd-r); }
.cd-grid-hero { display: grid; align-items: center; }
.cd-diagram { margin: 0; }

.cd-btn { display: inline-block; font-family: var(--cd-head); font-weight: 600; font-size: 1rem; text-align: center; text-decoration: none; color: var(--cd-plum); background: var(--cd-gold); border: 0; border-radius: 999px; padding: .85rem 1.6rem; cursor: pointer; transition: background .15s, transform .15s; }
.cd-btn:hover { background: #E2B663; color: var(--cd-plum); transform: translateY(-1px); }
.cd-btn-sm { font-size: .9rem; padding: .6rem 1rem; }
.cd-btn-ghost { background: transparent; color: var(--cd-gold); box-shadow: inset 0 0 0 1.5px var(--cd-gold); }
.cd-btn-ghost:hover { background: var(--cd-gold); }

.cd-layout { display: grid; }
.cd-toc-list { margin: 0; padding-left: 1.2rem; font-family: var(--cd-head); font-size: .92rem; line-height: 1.5; }
.cd-toc-list li { margin-bottom: .45rem; }
.cd-toc-list li::marker { color: var(--cd-rose); }
.cd-toc-list a { color: var(--cd-ink); text-decoration: none; }
.cd-toc-list a:hover { color: var(--cd-gold); }

.cd-prose { min-width: 0; }
.cd-prose h2 { font-size: 1.55rem; margin: 2.4rem 0 .7rem; color: var(--cd-ink); }
.cd-prose h2::before { content: ""; display: block; width: 36px; height: 3px; background: var(--cd-gold); margin-bottom: .7rem; border-radius: 2px; }
.cd-prose p, .cd-prose li { color: #E3DBD1; }
.cd-prose ul, .cd-prose ol { padding-left: 1.3rem; }
.cd-prose li { margin-bottom: .5rem; }
.cd-prose li::marker { color: var(--cd-gold); }
.cd-prose strong { color: var(--cd-ink); }

.cd-callout { border-left: 3px solid var(--cd-rose); background: rgba(201, 139, 139, .08); padding: 1rem 1.25rem; border-radius: 0 var(--cd-r) var(--cd-r) 0; }
.cd-cta-card { background: linear-gradient(135deg, #2C2133 0%, #241C2C 60%, #2B2228 100%); border-color: rgba(212, 162, 76, .4); }
.cd-disclosure { border: 1px dashed var(--cd-line); border-radius: var(--cd-r); padding: 1.25rem; font-size: .95rem; }
.cd-disclosure p { color: var(--cd-muted); }

.cd-field { display: flex; flex-direction: column; gap: 6px; font-family: var(--cd-head); font-size: .92rem; }
.cd-field input, .cd-field textarea { font: inherit; font-family: var(--cd-body); font-size: 1rem; color: var(--cd-ink); background: var(--cd-plum); border: 1px solid var(--cd-line); border-radius: 10px; padding: .7rem .85rem; }
.cd-field input:focus, .cd-field textarea:focus { border-color: var(--cd-gold); outline: none; }
.cd-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cd-alert { border: 1px solid var(--cd-rose); background: rgba(201, 139, 139, .12); border-radius: var(--cd-r); padding: 1rem 1.25rem; }

.cd-footer { border-top: 1px solid var(--cd-line); background: #150F1A; }
.cd-footer nav a { color: var(--cd-ink); text-decoration: none; font-family: var(--cd-head); }
.cd-footer nav a:hover { color: var(--cd-gold); }

/* ---------- responsive ---------- */
@media (max-width: 559px) {
  .cd-nav { gap: .9rem; }
  .cd-nav a { font-size: .88rem; }
  .cd-brand span { font-size: 1.05rem; }
}
@media (min-width: 900px) {
  .cd-grid-hero { grid-template-columns: 1.15fr .85fr; }
  .cd-layout { grid-template-columns: 250px minmax(0, 720px); justify-content: center; }
  .cd-toc { position: sticky; top: 88px; align-self: start; }
}
@media (max-width: 899px) {
  .cd-toc .cd-btn { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cd-btn { transition: none; }
}