/* Cyberm8 shared blog post stylesheet. Extracted from the English blog templates and normalized to the main site identity. */

/* ===== Extracted from 01-ot-zone-blueprint.html ===== */
:root {
  --bg-primary: #0B0F13;
  --bg-secondary: #101820;
  --bg-card: #1F2937;
  --bg-card-hover: #273445;
  --bg-code: #081119;
  --accent: #00F0FF;
  --accent-dim: rgba(0,240,255,0.14);
  --accent-glow: rgba(0,240,255,0.28);
  --text-primary: #EEF7FB;
  --text-secondary: #B8C8D3;
  --text-muted: #7E919D;
  --border: #263443;
  --border-accent: rgba(0,240,255,0.28);
  --danger: #FF6B5F;
  --warning: #FFB800;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-body);
  line-height: 1.7;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

/* ── Top Nav ── */
.topnav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(6,9,15,0.92);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  padding: 0 40px;
  height: 64px;
  display: flex; align-items: center; justify-content: space-between;
}
.topnav-logo {
  font-size: 20px; font-weight: 800; letter-spacing: 0;
  color: var(--text-primary); text-decoration: none; font-family: var(--font-mono);
}
.topnav-logo span { color: var(--accent); }
.topnav-meta {
  display: flex; align-items: center; gap: 24px;
  font-size: 13px; color: var(--text-muted);
}
.topnav-link { color: var(--text-secondary); text-decoration: none; font-weight: 600; }
.topnav-link:hover { color: var(--accent); }
.topnav-badge {
  background: var(--accent-dim);
  color: var(--accent);
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px; font-family: var(--font-mono);
}

/* ── Hero ── */
.hero {
  margin-top: 64px;
  padding: 100px 40px 80px;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(0,240,255,0.06) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(0,255,102,0.04) 0%, transparent 50%),
    var(--bg-primary);
  border-bottom: 1px solid var(--border);
}
.hero-inner {
  max-width: 900px; margin: 0 auto;
}
.hero-classification {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 2px; color: var(--accent);
  margin-bottom: 28px; font-family: var(--font-mono);
}
.hero-classification::before {
  content: '';
  width: 32px; height: 2px;
  background: var(--accent);
}
.hero h1 {
  font-size: 40px; font-weight: 800; line-height: 1.15;
  letter-spacing: 0;
  color: var(--text-primary);
  margin-bottom: 24px;
  font-family: var(--font-mono);
}
.hero h1 em {
  font-style: normal;
  color: var(--accent);
}
.hero-subtitle {
  font-size: 18px; line-height: 1.7;
  color: var(--text-secondary);
  max-width: 720px;
  margin-bottom: 36px;
}
.hero-meta-row {
  display: flex; gap: 32px; flex-wrap: wrap;
  font-size: 13px; color: var(--text-muted);
}
.hero-meta-row span { display: flex; align-items: center; gap: 6px; }
.hero-meta-row .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* ── Content ── */
.content-wrap {
  max-width: 820px;
  margin: 0 auto;
  padding: 60px 40px 100px;
}

.section-label {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 2.5px; color: var(--accent);
  margin-bottom: 16px; font-family: var(--font-mono);
}
.section-label::before {
  content: ''; width: 20px; height: 2px; background: var(--accent);
}

h2 {
  font-size: 28px; font-weight: 700; letter-spacing: 0;
  color: var(--text-primary);
  margin-bottom: 20px;
  line-height: 1.25;
  font-family: var(--font-mono);
}
h3 {
  font-size: 20px; font-weight: 600; color: var(--text-primary);
  margin: 36px 0 14px;
  letter-spacing: 0;
  font-family: var(--font-mono);
}
p {
  color: var(--text-secondary);
  margin-bottom: 18px;
}
p strong { color: var(--text-primary); font-weight: 600; }

.section-block {
  margin-bottom: 64px;
  padding-top: 48px;
  border-top: 1px solid var(--border);
}
.section-block:first-child { border-top: none; padding-top: 0; }

/* ── Callout Boxes ── */
.callout {
  background: linear-gradient(145deg, rgba(0,240,255,0.06), transparent 54%), var(--bg-card);
  border: 1px solid var(--border-accent);
  border-radius: 8px;
  padding: 24px 28px;
  margin: 28px 0;
}
.callout.danger { border-color: rgba(255,107,95,0.48); background: linear-gradient(145deg, rgba(255,107,95,0.08), transparent 54%), var(--bg-card); }
.callout.warning { border-color: rgba(255,184,0,0.48); background: linear-gradient(145deg, rgba(255,184,0,0.08), transparent 54%), var(--bg-card); }
.callout-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.5px; color: var(--accent);
  margin-bottom: 10px;
}
.callout.danger .callout-label { color: var(--danger); }
.callout.warning .callout-label { color: var(--warning); }
.callout p { margin-bottom: 0; font-size: 15px; }

/* ── Diagram ── */
.diagram-container {
  background: var(--bg-code);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 40px 28px;
  margin: 36px 0;
  overflow-x: auto;
}
.diagram-container svg {
  display: block; margin: 0 auto;
}
.diagram-caption {
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 16px;
  font-family: var(--font-mono);
  letter-spacing: 0.5px;
}

/* ── Code Blocks ── */
.code-block {
  background: var(--bg-code);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px 24px;
  margin: 24px 0;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.8;
  color: var(--text-secondary);
  overflow-x: auto;
}
.code-block .kw { color: var(--accent); }
.code-block .str { color: #FFB800; }
.code-block .cmt { color: var(--text-muted); font-style: italic; }

/* ── Compliance Table ── */
.compliance-table {
  width: 100%;
  border-collapse: collapse;
  margin: 28px 0;
  font-size: 14px;
}
.compliance-table th {
  text-align: left;
  padding: 12px 16px;
  background: var(--bg-card);
  color: var(--accent);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 700;
  border-bottom: 2px solid var(--border);
}
.compliance-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
}
.compliance-table tr:hover td { background: var(--bg-card); }
.status-pass { color: var(--accent); font-weight: 600; }
.status-fail { color: var(--danger); font-weight: 600; }

/* ── Numbered List ── */
.numbered-list {
  list-style: none; counter-reset: steps;
  margin: 24px 0;
}
.numbered-list li {
  counter-increment: steps;
  padding: 14px 0 14px 52px;
  position: relative;
  color: var(--text-secondary);
  border-bottom: 1px solid rgba(38,52,67,0.55);
}
.numbered-list li::before {
  content: counter(steps, decimal-leading-zero);
  position: absolute; left: 0; top: 14px;
  font-family: var(--font-mono);
  font-size: 14px; font-weight: 600;
  color: var(--accent);
}

/* ── CTA Block ── */
.cta-block {
  background: linear-gradient(135deg, rgba(0,240,255,0.08), rgba(0,255,102,0.06));
  border: 1px solid var(--border-accent);
  border-radius: 12px;
  padding: 48px 40px;
  text-align: center;
  margin: 64px 0 0;
}
.cta-block h2 { font-size: 26px; margin-bottom: 14px; }
.cta-block p { max-width: 560px; margin: 0 auto 28px; }
.cta-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent);
  color: var(--bg-primary);
  font-weight: 700; font-size: 14px;
  padding: 14px 32px;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.2s;
}
.cta-btn:hover {
  box-shadow: 0 0 24px var(--accent-glow);
  transform: translateY(-1px);
}
.cta-secondary {
  display: block;
  margin-top: 14px;
  font-size: 13px;
  color: var(--text-muted);
}

/* ── Footer ── */
footer {
  border-top: 1px solid var(--border);
  padding: 40px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
}
footer a { color: var(--accent); text-decoration: none; }

/* ── Responsive ── */
@media (max-width: 768px) {
  .hero { padding: 80px 24px 60px; }
  .hero h1 { font-size: 28px; }
  .content-wrap { padding: 40px 24px 80px; }
  .cta-block { padding: 36px 24px; }
  .hero-meta-row { flex-direction: column; gap: 12px; }
}

/* Cyberm8 site alignment overrides */
html, body { max-width: 100%; overflow-x: hidden; }
.compare-table, .compliance-table { display: block; max-width: 100%; overflow-x: auto; white-space: nowrap; }
.diagram-container svg { max-width: 100%; height: auto; }
@media (max-width: 768px) {
  .topnav { padding: 0 20px; }
  .topnav-meta { gap: 12px; min-width: 0; overflow: hidden; }
  .topnav-meta > span:not(.topnav-badge) { display: none; }
  .topnav-badge { max-width: 132px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Final site-wide article polish */
.blog-post-page .hero-inner {
  max-width: min(980px, 100%);
}

.blog-post-page {
  font-family: var(--font-body);
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  text-rendering: optimizeLegibility;
}

.blog-post-page .hero h1,
.blog-post-page h2,
.blog-post-page h3,
.blog-post-page .cta-block h2 {
  font-family: var(--font-display);
  letter-spacing: 0;
}

.blog-post-page .hero h1 {
  max-width: 900px;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.08;
}

.blog-post-page h2 {
  font-size: clamp(25px, 2.6vw, 34px);
  line-height: 1.16;
}

.blog-post-page p,
.blog-post-page li {
  line-height: 1.76;
}

.blog-post-page .hero-classification,
.blog-post-page .section-label,
.blog-post-page .topnav-badge,
.blog-post-page .callout-label,
.blog-post-page .diagram-caption,
.blog-post-page .code-block,
.blog-post-page .code-header {
  font-family: var(--font-title);
}

.blog-post-page .section-block {
  margin-bottom: clamp(62px, 8vw, 96px);
  padding-top: clamp(42px, 6vw, 72px);
}

.blog-post-page .callout,
.blog-post-page .diagram-container,
.blog-post-page .code-block,
.blog-post-page .cta-block {
  box-shadow: 0 22px 68px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(238, 247, 251, 0.04);
}

.blog-post-page .cta-block {
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 18% 20%, rgba(57, 216, 242, 0.18), transparent 28%),
    linear-gradient(135deg, rgba(57, 216, 242, 0.12), transparent),
    var(--panel);
}

/* B+C article skin: light reading surface with contained dark technical proof. */
body.blog-post-page.bc-page {
  --article-bg: oklch(0.945 0.012 225);
  --article-surface: oklch(0.985 0.004 230);
  --article-line: oklch(0.84 0.018 230);
  --article-text: oklch(0.15 0.02 235);
  --article-muted: oklch(0.43 0.03 235);
  --article-soft: oklch(0.56 0.025 235);
  --article-accent: oklch(0.62 0.16 185);
  background:
    radial-gradient(circle at 18% 0%, oklch(0.82 0.08 190 / 0.34), transparent 32rem),
    linear-gradient(180deg, oklch(0.985 0.004 230) 0%, var(--article-bg) 34%, oklch(0.965 0.008 225) 100%) !important;
  color: var(--article-text) !important;
  color-scheme: light;
}

.blog-post-page.bc-page .topnav {
  background: oklch(0.99 0.003 230 / 0.88) !important;
  border-bottom-color: var(--article-line) !important;
  box-shadow: 0 18px 60px oklch(0.18 0.025 235 / 0.08);
}

.blog-post-page.bc-page .topnav-logo,
.blog-post-page.bc-page .topnav-link,
.blog-post-page.bc-page h1,
.blog-post-page.bc-page h2,
.blog-post-page.bc-page h3,
.blog-post-page.bc-page h4,
.blog-post-page.bc-page p strong {
  color: var(--article-text) !important;
}

.blog-post-page.bc-page .topnav-logo span,
.blog-post-page.bc-page .hero-classification,
.blog-post-page.bc-page .section-label,
.blog-post-page.bc-page .callout-label,
.blog-post-page.bc-page footer a {
  color: var(--article-accent) !important;
}

.blog-post-page.bc-page .topnav-meta,
.blog-post-page.bc-page .hero-subtitle,
.blog-post-page.bc-page .hero-meta-row,
.blog-post-page.bc-page p,
.blog-post-page.bc-page li,
.blog-post-page.bc-page td,
.blog-post-page.bc-page footer,
.blog-post-page.bc-page .cta-secondary {
  color: var(--article-muted) !important;
}

.blog-post-page.bc-page .hero {
  background:
    radial-gradient(circle at 24% 22%, oklch(0.75 0.12 185 / 0.18), transparent 28rem),
    linear-gradient(180deg, oklch(0.99 0.003 230), oklch(0.955 0.012 225)) !important;
  border-bottom: 1px solid var(--article-line) !important;
}

.blog-post-page.bc-page .hero h1 {
  color: var(--article-text) !important;
  text-wrap: balance;
}

.blog-post-page.bc-page .hero h1 em,
.blog-post-page.bc-page .hero h1 .g,
.blog-post-page.bc-page .hero h1 .highlight {
  color: var(--article-accent) !important;
}

.blog-post-page.bc-page .section-block {
  border-top-color: var(--article-line) !important;
}

.blog-post-page.bc-page .callout,
.blog-post-page.bc-page .pullquote,
.blog-post-page.bc-page .step-card,
.blog-post-page.bc-page .objection,
.blog-post-page.bc-page .cost-card,
.blog-post-page.bc-page .time-block,
.blog-post-page.bc-page .ba-mini,
.blog-post-page.bc-page .do-dont,
.blog-post-page.bc-page .email-block,
.blog-post-page.bc-page .spreadsheet,
.blog-post-page.bc-page .notification,
.blog-post-page.bc-page .roi-card,
.blog-post-page.bc-page .proof-card {
  background:
    linear-gradient(145deg, oklch(0.75 0.12 185 / 0.08), transparent 58%),
    var(--article-surface) !important;
  border-color: var(--article-line) !important;
  box-shadow: 0 22px 64px oklch(0.18 0.025 235 / 0.1) !important;
}

.blog-post-page.bc-page .cta-block {
  background:
    linear-gradient(135deg, oklch(0.76 0.11 185 / 0.13), transparent),
    var(--article-surface) !important;
  border: 1px solid oklch(0.72 0.1 185 / 0.34) !important;
  box-shadow: 0 26px 72px oklch(0.18 0.025 235 / 0.12) !important;
}

.blog-post-page.bc-page .diagram-container,
.blog-post-page.bc-page .code-block,
.blog-post-page.bc-page .cyberm8-code,
.blog-post-page.bc-page .code-col-body,
.blog-post-page.bc-page .script-block,
.blog-post-page.bc-page .terminal-body {
  background: oklch(0.09 0.014 245) !important;
  border-color: oklch(0.29 0.04 232) !important;
  color: oklch(0.9 0.016 218) !important;
  box-shadow: 0 28px 80px oklch(0.12 0.02 240 / 0.24), inset 0 1px 0 oklch(1 0 0 / 0.06) !important;
}

.blog-post-page.bc-page .diagram-caption,
.blog-post-page.bc-page .code-header,
.blog-post-page.bc-page .script-header,
.blog-post-page.bc-page .email-header,
.blog-post-page.bc-page th,
.blog-post-page.bc-page .ss-table th {
  background: oklch(0.94 0.01 225) !important;
  color: var(--article-soft) !important;
  border-color: var(--article-line) !important;
}

.blog-post-page.bc-page .cta-btn,
.blog-post-page.bc-page .btn-primary {
  background: var(--article-text) !important;
  color: oklch(0.985 0.004 230) !important;
  box-shadow: 0 14px 32px oklch(0.18 0.025 235 / 0.18) !important;
}

.blog-post-page.bc-page .cta-btn:hover,
.blog-post-page.bc-page .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 42px oklch(0.18 0.025 235 / 0.24) !important;
}

.blog-post-page.bc-page footer {
  border-top-color: var(--article-line) !important;
}

/* Accessibility guardrails: keep extracted article styles above WCAG AA contrast. */
.blog-post-page th,
.blog-post-page .compare-table th,
.blog-post-page .compliance-table th,
.blog-post-page .cost-table th,
.blog-post-page .fin-table th,
.blog-post-page .decision-table th,
.blog-post-page .data-flow-table th,
.blog-post-page .ss-table th,
.blog-post-page .vendor-type,
.blog-post-page .metric-label,
.blog-post-page .event-time,
.blog-post-page .event-desc.boring,
.blog-post-page .event-tag.ack,
.blog-post-page .terminal-body .dim,
.blog-post-page .code-block .cmt,
.blog-post-page .cyberm8-code .c,
.blog-post-page .script-header .label,
.blog-post-page .script-header .hint,
.blog-post-page .script-body .blank,
.blog-post-page .email-field .label,
.blog-post-page .blank,
.blog-post-page td[colspan] {
  color: #d7e8ef !important;
}

.blog-post-page .terminal-body,
.blog-post-page .code-block,
.blog-post-page .cyberm8-code {
  color: #d7e8ef !important;
}

.blog-post-page .code-block:focus-visible,
.blog-post-page .terminal-body:focus-visible,
.blog-post-page .cyberm8-code:focus-visible,
.blog-post-page table:focus-visible {
  outline: 3px solid var(--accent, #39d8f2);
  outline-offset: 4px;
}

.blog-post-page .label,
.blog-post-page .unit,
.blog-post-page .time,
.blog-post-page .quote-attr,
.blog-post-page .code-header span,
.blog-post-page .code-col-body .c,
.blog-post-page .notification .time,
.blog-post-page .counter-item .label,
.blog-post-page .roi-card .label,
.blog-post-page .proof-card .label,
.blog-post-page .counter-caption,
.blog-post-page .same-thing .concept,
.blog-post-page .event-row > span {
  color: #d7e8ef !important;
}

.blog-post-page .code-col-body {
  color: #d7e8ef !important;
  overflow-x: auto;
}

.blog-post-page .code-col-body:focus-visible {
  outline: 3px solid var(--accent, #39d8f2);
  outline-offset: 4px;
}

/* True final type scale override. This file contains repeated extracted blocks, so keep this last. */
.blog-post-page .hero-inner {
  max-width: min(980px, 100%);
}

.blog-post-page .hero h1 {
  max-width: 900px;
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.08;
  letter-spacing: 0;
}

.blog-post-page h2 {
  font-family: var(--font-display);
  font-size: clamp(25px, 2.6vw, 34px);
  line-height: 1.16;
}

.blog-post-page h3 {
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 24px);
}

@media (max-width: 768px) {
  .blog-post-page .hero-inner {
    max-width: calc(100% - 48px);
  }

  .blog-post-page .hero h1 {
    max-width: 100%;
    font-size: clamp(27px, 7.4vw, 32px);
    line-height: 1.12;
  }
}

/* Corrective final type scale: keep long article titles premium, not oversized. */
.blog-post-page .hero-inner {
  max-width: min(980px, 100%);
}

.blog-post-page .hero h1 {
  max-width: 900px;
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.08;
  letter-spacing: 0;
}

.blog-post-page h2 {
  font-family: var(--font-display);
  font-size: clamp(25px, 2.6vw, 34px);
  line-height: 1.16;
}

.blog-post-page h3 {
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 24px);
}

@media (max-width: 768px) {
  .blog-post-page .hero-inner {
    max-width: calc(100% - 48px);
  }

  .blog-post-page .hero h1 {
    font-size: clamp(28px, 8vw, 34px);
    line-height: 1.1;
  }
}
.topnav-logo { color: var(--text-primary); text-decoration: none; font-family: var(--font-mono); font-weight: 800; letter-spacing: 0; }
.topnav-link { color: var(--text-secondary); text-decoration: none; font-weight: 600; }
.topnav-link:hover { color: var(--accent); }
.hero h1, h2, h3, .hero-classification, .section-label, .topnav-badge, .callout-label, .compare-table th, .compliance-table th { font-family: var(--font-mono); }
.hero h1, h2, h3 { letter-spacing: 0; }
.hero h1 em, .hero h1 .g { background: none !important; -webkit-background-clip: initial !important; -webkit-text-fill-color: currentColor !important; color: var(--accent) !important; }
.callout { background: linear-gradient(145deg, rgba(0,240,255,0.06), transparent 54%), var(--bg-card) !important; border: 1px solid var(--border-accent) !important; border-radius: 8px; }
.callout.danger { border-color: rgba(255,107,95,0.48) !important; background: linear-gradient(145deg, rgba(255,107,95,0.08), transparent 54%), var(--bg-card) !important; }
.callout.warning { border-color: rgba(255,184,0,0.48) !important; background: linear-gradient(145deg, rgba(255,184,0,0.08), transparent 54%), var(--bg-card) !important; }


/* ===== Extracted from 02-python-tax-guide.html ===== */
:root {
  --bg-primary: #0B0F13;
  --bg-secondary: #101820;
  --bg-card: #1F2937;
  --bg-card-hover: #273445;
  --bg-code: #081119;
  --accent: #00F0FF;
  --accent-dim: rgba(0,240,255,0.14);
  --accent-glow: rgba(0,240,255,0.28);
  --accent-blue: #00FF66;
  --text-primary: #EEF7FB;
  --text-secondary: #B8C8D3;
  --text-muted: #7E919D;
  --border: #263443;
  --border-accent: rgba(0,240,255,0.28);
  --danger: #FF6B5F;
  --warning: #FFB800;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-body);
  line-height: 1.7;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

.topnav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(6,9,15,0.92);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  padding: 0 40px;
  height: 64px;
  display: flex; align-items: center; justify-content: space-between;
}
.topnav-logo {
  font-size: 20px; font-weight: 800; letter-spacing: 0;
  color: var(--text-primary); text-decoration: none; font-family: var(--font-mono);
}
.topnav-logo span { color: var(--accent); }
.topnav-meta {
  display: flex; align-items: center; gap: 24px;
  font-size: 13px; color: var(--text-muted);
}
.topnav-link { color: var(--text-secondary); text-decoration: none; font-weight: 600; }
.topnav-link:hover { color: var(--accent); }
.topnav-badge {
  background: rgba(0,255,102,0.15);
  color: var(--accent-blue);
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px; font-family: var(--font-mono);
}

/* ── Hero ── */
.hero {
  margin-top: 64px;
  padding: 100px 40px 80px;
  background:
    radial-gradient(ellipse at 70% 40%, rgba(0,255,102,0.07) 0%, transparent 60%),
    radial-gradient(ellipse at 20% 80%, rgba(0,240,255,0.05) 0%, transparent 50%),
    var(--bg-primary);
  border-bottom: 1px solid var(--border);
}
.hero-inner { max-width: 900px; margin: 0 auto; }
.hero-classification {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 2px; color: var(--accent-blue);
  margin-bottom: 28px; font-family: var(--font-mono);
}
.hero-classification::before {
  content: ''; width: 32px; height: 2px; background: var(--accent-blue);
}
.hero h1 {
  font-size: 38px; font-weight: 800; line-height: 1.15;
  letter-spacing: -1.5px;
  color: var(--text-primary);
  margin-bottom: 24px;
}
.hero h1 em {
  font-style: normal;
  background: linear-gradient(135deg, var(--danger), var(--warning));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero h1 .highlight {
  background: linear-gradient(135deg, var(--accent), var(--accent-blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-subtitle {
  font-size: 18px; line-height: 1.7;
  color: var(--text-secondary);
  max-width: 720px;
  margin-bottom: 36px;
}
.hero-meta-row {
  display: flex; gap: 32px; flex-wrap: wrap;
  font-size: 13px; color: var(--text-muted);
}
.hero-meta-row span { display: flex; align-items: center; gap: 6px; }
.hero-meta-row .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-blue); }

/* ── Content ── */
.content-wrap {
  max-width: 820px;
  margin: 0 auto;
  padding: 60px 40px 100px;
}
.section-label {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 2.5px; color: var(--accent);
  margin-bottom: 16px; font-family: var(--font-mono);
}
.section-label::before {
  content: ''; width: 20px; height: 2px; background: var(--accent);
}

h2 {
  font-size: 28px; font-weight: 700; letter-spacing: 0;
  color: var(--text-primary);
  margin-bottom: 20px;
  line-height: 1.25;
  font-family: var(--font-mono);
}
h3 {
  font-size: 20px; font-weight: 600; color: var(--text-primary);
  margin: 36px 0 14px;
  letter-spacing: 0;
  font-family: var(--font-mono);
}
p {
  color: var(--text-secondary);
  margin-bottom: 18px;
}
p strong { color: var(--text-primary); font-weight: 600; }

.section-block {
  margin-bottom: 64px;
  padding-top: 48px;
  border-top: 1px solid var(--border);
}
.section-block:first-child { border-top: none; padding-top: 0; }

/* ── Callout ── */
.callout {
  background: linear-gradient(145deg, rgba(0,240,255,0.06), transparent 54%), var(--bg-card);
  border: 1px solid var(--border-accent);
  border-radius: 8px;
  padding: 24px 28px;
  margin: 28px 0;
}
.callout.danger { border-color: rgba(255,107,95,0.48); background: linear-gradient(145deg, rgba(255,107,95,0.08), transparent 54%), var(--bg-card); }
.callout.warning { border-color: rgba(255,184,0,0.48); background: linear-gradient(145deg, rgba(255,184,0,0.08), transparent 54%), var(--bg-card); }
.callout.blue { border-left-color: var(--accent-blue); }
.callout-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.5px; color: var(--accent); margin-bottom: 10px;
}
.callout.danger .callout-label { color: var(--danger); }
.callout.warning .callout-label { color: var(--warning); }
.callout.blue .callout-label { color: var(--accent-blue); }
.callout p { margin-bottom: 0; font-size: 15px; }

/* ── Code Blocks ── */
.code-block {
  background: var(--bg-code);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px 24px;
  margin: 24px 0;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.8;
  color: var(--text-secondary);
  overflow-x: auto;
  white-space: pre;
}
.code-block .kw { color: var(--accent); }
.code-block .str { color: #FFB800; }
.code-block .cmt { color: var(--text-muted); font-style: italic; }
.code-block .err { color: var(--danger); }
.code-block .fn { color: var(--accent-blue); }

.code-header {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  padding: 10px 20px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
}
.code-header + .code-block {
  border-radius: 0 0 8px 8px;
  margin-top: 0;
}
.code-lang {
  background: rgba(0,255,102,0.15);
  color: var(--accent-blue);
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}

/* ── Cost Calculator ── */
.cost-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 28px 0;
}
.cost-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px;
}
.cost-card.bad { border-color: rgba(239,68,68,0.3); }
.cost-card.good { border-color: rgba(0,240,255,0.3); }
.cost-card-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.5px; margin-bottom: 12px;
}
.cost-card.bad .cost-card-label { color: var(--danger); }
.cost-card.good .cost-card-label { color: var(--accent); }
.cost-card .big-number {
  font-size: 36px; font-weight: 800; letter-spacing: -1px;
  margin-bottom: 8px;
}
.cost-card.bad .big-number { color: var(--danger); }
.cost-card.good .big-number { color: var(--accent); }
.cost-card p { font-size: 14px; margin-bottom: 0; }

/* ── Split Brain Diagram ── */
.diagram-container {
  background: var(--bg-code);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 40px 28px;
  margin: 36px 0;
  overflow-x: auto;
}
.diagram-caption {
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 16px;
  font-family: var(--font-mono);
  letter-spacing: 0.5px;
}

/* ── Comparison Table ── */
.compare-table {
  width: 100%;
  border-collapse: collapse;
  margin: 28px 0;
  font-size: 14px;
}
.compare-table th {
  text-align: left;
  padding: 14px 16px;
  background: var(--bg-card);
  color: var(--text-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 700;
  border-bottom: 2px solid var(--border);
}
.compare-table th:nth-child(2) { color: var(--danger); }
.compare-table th:nth-child(3) { color: var(--accent); }
.compare-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
}
.compare-table tr:hover td { background: var(--bg-card); }

/* ── Numbered List ── */
.numbered-list {
  list-style: none; counter-reset: steps;
  margin: 24px 0;
}
.numbered-list li {
  counter-increment: steps;
  padding: 14px 0 14px 52px;
  position: relative;
  color: var(--text-secondary);
  border-bottom: 1px solid rgba(38,52,67,0.55);
}
.numbered-list li::before {
  content: counter(steps, decimal-leading-zero);
  position: absolute; left: 0; top: 14px;
  font-family: var(--font-mono);
  font-size: 14px; font-weight: 600;
  color: var(--accent);
}

/* ── Bullet List ── */
.bullet-list {
  list-style: none;
  margin: 20px 0;
}
.bullet-list li {
  padding: 8px 0 8px 24px;
  position: relative;
  color: var(--text-secondary);
}
.bullet-list li::before {
  content: '→';
  position: absolute; left: 0;
  color: var(--accent);
  font-weight: 600;
}

/* ── CTA ── */
.cta-block {
  background: linear-gradient(135deg, rgba(0,255,102,0.08), rgba(0,240,255,0.06));
  border: 1px solid var(--border-accent);
  border-radius: 12px;
  padding: 48px 40px;
  text-align: center;
  margin: 64px 0 0;
}
.cta-block h2 { font-size: 26px; margin-bottom: 14px; }
.cta-block p { max-width: 560px; margin: 0 auto 28px; }
.cta-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent);
  color: var(--bg-primary);
  font-weight: 700; font-size: 14px;
  padding: 14px 32px;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.2s;
}
.cta-btn:hover {
  box-shadow: 0 0 24px var(--accent-glow);
  transform: translateY(-1px);
}
.cta-secondary {
  display: block;
  margin-top: 14px;
  font-size: 13px;
  color: var(--text-muted);
}

footer {
  border-top: 1px solid var(--border);
  padding: 40px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
}
footer a { color: var(--accent); text-decoration: none; }

@media (max-width: 768px) {
  .hero { padding: 80px 24px 60px; }
  .hero h1 { font-size: 28px; }
  .content-wrap { padding: 40px 24px 80px; }
  .cost-grid { grid-template-columns: 1fr; }
  .cta-block { padding: 36px 24px; }
  .hero-meta-row { flex-direction: column; gap: 12px; }
}

/* Cyberm8 site alignment overrides */
html, body { max-width: 100%; overflow-x: hidden; }
.compare-table, .compliance-table { display: block; max-width: 100%; overflow-x: auto; white-space: nowrap; }
.diagram-container svg { max-width: 100%; height: auto; }
@media (max-width: 768px) {
  .topnav { padding: 0 20px; }
  .topnav-meta { gap: 12px; min-width: 0; overflow: hidden; }
  .topnav-meta > span:not(.topnav-badge) { display: none; }
  .topnav-badge { max-width: 132px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
.topnav-logo { color: var(--text-primary); text-decoration: none; font-family: var(--font-mono); font-weight: 800; letter-spacing: 0; }
.topnav-link { color: var(--text-secondary); text-decoration: none; font-weight: 600; }
.topnav-link:hover { color: var(--accent); }
.hero h1, h2, h3, .hero-classification, .section-label, .topnav-badge, .callout-label, .compare-table th, .compliance-table th { font-family: var(--font-mono); }
.hero h1, h2, h3 { letter-spacing: 0; }
.hero h1 em, .hero h1 .g { background: none !important; -webkit-background-clip: initial !important; -webkit-text-fill-color: currentColor !important; color: var(--accent) !important; }
.callout { background: linear-gradient(145deg, rgba(0,240,255,0.06), transparent 54%), var(--bg-card) !important; border: 1px solid var(--border-accent) !important; border-radius: 8px; }
.callout.danger { border-color: rgba(255,107,95,0.48) !important; background: linear-gradient(145deg, rgba(255,107,95,0.08), transparent 54%), var(--bg-card) !important; }
.callout.warning { border-color: rgba(255,184,0,0.48) !important; background: linear-gradient(145deg, rgba(255,184,0,0.08), transparent 54%), var(--bg-card) !important; }


/* ===== Extracted from 03-splunk-roi-blueprint.html ===== */
:root {
  --bg-primary: #0B0F13;
  --bg-secondary: #101820;
  --bg-card: #1F2937;
  --bg-card-hover: #273445;
  --bg-code: #081119;
  --accent: #00F0FF;
  --accent-dim: rgba(0,240,255,0.14);
  --accent-glow: rgba(0,240,255,0.28);
  --accent-blue: #00FF66;
  --accent-purple: #00FF66;
  --text-primary: #EEF7FB;
  --text-secondary: #B8C8D3;
  --text-muted: #7E919D;
  --border: #263443;
  --border-accent: rgba(0,240,255,0.28);
  --danger: #FF6B5F;
  --warning: #FFB800;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-body);
  line-height: 1.7;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

.topnav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(6,9,15,0.92);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  padding: 0 40px;
  height: 64px;
  display: flex; align-items: center; justify-content: space-between;
}
.topnav-logo {
  font-size: 20px; font-weight: 800; letter-spacing: 0;
  color: var(--text-primary); text-decoration: none; font-family: var(--font-mono);
}
.topnav-logo span { color: var(--accent); }
.topnav-meta {
  display: flex; align-items: center; gap: 24px;
  font-size: 13px; color: var(--text-muted);
}
.topnav-link { color: var(--text-secondary); text-decoration: none; font-weight: 600; }
.topnav-link:hover { color: var(--accent); }
.topnav-badge {
  background: rgba(0,255,102,0.15);
  color: var(--accent-purple);
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px; font-family: var(--font-mono);
}

/* ── Hero ── */
.hero {
  margin-top: 64px;
  padding: 100px 40px 80px;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(0,255,102,0.07) 0%, transparent 60%),
    radial-gradient(ellipse at 20% 80%, rgba(0,240,255,0.04) 0%, transparent 50%),
    var(--bg-primary);
  border-bottom: 1px solid var(--border);
}
.hero-inner { max-width: 900px; margin: 0 auto; }
.hero-classification {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 2px; color: var(--accent-purple);
  margin-bottom: 28px; font-family: var(--font-mono);
}
.hero-classification::before {
  content: ''; width: 32px; height: 2px; background: var(--accent-purple);
}
.hero h1 {
  font-size: 38px; font-weight: 800; line-height: 1.15;
  letter-spacing: -1.5px;
  color: var(--text-primary);
  margin-bottom: 24px;
}
.hero h1 em {
  font-style: normal;
  background: linear-gradient(135deg, var(--accent-purple), var(--accent-blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero h1 .highlight {
  background: linear-gradient(135deg, var(--accent), #00F0FF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-subtitle {
  font-size: 18px; line-height: 1.7;
  color: var(--text-secondary);
  max-width: 720px;
  margin-bottom: 36px;
}
.hero-meta-row {
  display: flex; gap: 32px; flex-wrap: wrap;
  font-size: 13px; color: var(--text-muted);
}
.hero-meta-row span { display: flex; align-items: center; gap: 6px; }
.hero-meta-row .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-purple); }

/* ── Content ── */
.content-wrap {
  max-width: 820px;
  margin: 0 auto;
  padding: 60px 40px 100px;
}
.section-label {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 2.5px; color: var(--accent);
  margin-bottom: 16px; font-family: var(--font-mono);
}
.section-label::before {
  content: ''; width: 20px; height: 2px; background: var(--accent);
}
h2 {
  font-size: 28px; font-weight: 700; letter-spacing: 0;
  color: var(--text-primary);
  margin-bottom: 20px;
  line-height: 1.25;
  font-family: var(--font-mono);
}
h3 {
  font-size: 20px; font-weight: 600; color: var(--text-primary);
  margin: 36px 0 14px;
  letter-spacing: 0;
  font-family: var(--font-mono);
}
p {
  color: var(--text-secondary);
  margin-bottom: 18px;
}
p strong { color: var(--text-primary); font-weight: 600; }
.section-block {
  margin-bottom: 64px;
  padding-top: 48px;
  border-top: 1px solid var(--border);
}
.section-block:first-child { border-top: none; padding-top: 0; }

/* ── Callout ── */
.callout {
  background: linear-gradient(145deg, rgba(0,240,255,0.06), transparent 54%), var(--bg-card);
  border: 1px solid var(--border-accent);
  border-radius: 8px;
  padding: 24px 28px;
  margin: 28px 0;
}
.callout.danger { border-color: rgba(255,107,95,0.48); background: linear-gradient(145deg, rgba(255,107,95,0.08), transparent 54%), var(--bg-card); }
.callout.warning { border-color: rgba(255,184,0,0.48); background: linear-gradient(145deg, rgba(255,184,0,0.08), transparent 54%), var(--bg-card); }
.callout.purple { border-left-color: var(--accent-purple); }
.callout-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.5px; color: var(--accent); margin-bottom: 10px;
}
.callout.danger .callout-label { color: var(--danger); }
.callout.warning .callout-label { color: var(--warning); }
.callout.purple .callout-label { color: var(--accent-purple); }
.callout p { margin-bottom: 0; font-size: 15px; }

/* ── Diagram ── */
.diagram-container {
  background: var(--bg-code);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 40px 28px;
  margin: 36px 0;
  overflow-x: auto;
}
.diagram-caption {
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 16px;
  font-family: var(--font-mono);
  letter-spacing: 0.5px;
}

/* ── Code Block ── */
.code-block {
  background: var(--bg-code);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px 24px;
  margin: 24px 0;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.8;
  color: var(--text-secondary);
  overflow-x: auto;
  white-space: pre;
}
.code-block .kw { color: var(--accent); }
.code-block .str { color: #FFB800; }
.code-block .cmt { color: var(--text-muted); font-style: italic; }
.code-block .err { color: var(--danger); }
.code-block .fn { color: var(--accent-blue); }
.code-block .num { color: var(--accent-purple); }

/* ── ROI Cards ── */
.roi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  margin: 36px 0;
}
.roi-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 28px 24px;
  text-align: center;
  transition: border-color 0.2s;
}
.roi-card:hover { border-color: var(--accent); }
.roi-card-icon {
  font-size: 28px;
  margin-bottom: 14px;
  display: block;
}
.roi-card .big-number {
  font-size: 32px; font-weight: 800; letter-spacing: -1px;
  color: var(--accent);
  margin-bottom: 8px;
}
.roi-card .label {
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 1.5px; color: var(--text-muted);
  margin-bottom: 12px;
}
.roi-card p { font-size: 13px; margin-bottom: 0; color: var(--text-secondary); }

/* ── Cost Breakdown Table ── */
.cost-table {
  width: 100%;
  border-collapse: collapse;
  margin: 28px 0;
  font-size: 14px;
}
.cost-table th {
  text-align: left;
  padding: 14px 16px;
  background: var(--bg-card);
  color: var(--text-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 700;
  border-bottom: 2px solid var(--border);
}
.cost-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
}
.cost-table tr:hover td { background: var(--bg-card); }
.cost-table .total td {
  font-weight: 700;
  color: var(--text-primary);
  border-top: 2px solid var(--border);
  font-size: 15px;
}
.cost-table .saved { color: var(--accent); font-weight: 600; }
.cost-table .cost { color: var(--danger); font-weight: 600; }

/* ── Numbered List ── */
.numbered-list {
  list-style: none; counter-reset: steps;
  margin: 24px 0;
}
.numbered-list li {
  counter-increment: steps;
  padding: 14px 0 14px 52px;
  position: relative;
  color: var(--text-secondary);
  border-bottom: 1px solid rgba(38,52,67,0.55);
}
.numbered-list li::before {
  content: counter(steps, decimal-leading-zero);
  position: absolute; left: 0; top: 14px;
  font-family: var(--font-mono);
  font-size: 14px; font-weight: 600;
  color: var(--accent);
}

/* ── Bullet List ── */
.bullet-list {
  list-style: none;
  margin: 20px 0;
}
.bullet-list li {
  padding: 8px 0 8px 24px;
  position: relative;
  color: var(--text-secondary);
}
.bullet-list li::before {
  content: '→';
  position: absolute; left: 0;
  color: var(--accent);
  font-weight: 600;
}

/* ── Highlight Band ── */
.highlight-band {
  background: linear-gradient(135deg, rgba(0,255,102,0.08), rgba(0,240,255,0.06));
  border: 1px solid rgba(0,255,102,0.2);
  border-radius: 10px;
  padding: 32px 28px;
  margin: 36px 0;
}
.highlight-band h3 { margin-top: 0; color: var(--accent-purple); }

/* ── CTA ── */
.cta-block {
  background: linear-gradient(135deg, rgba(0,255,102,0.08), rgba(0,240,255,0.06));
  border: 1px solid var(--border-accent);
  border-radius: 12px;
  padding: 48px 40px;
  text-align: center;
  margin: 64px 0 0;
}
.cta-block h2 { font-size: 26px; margin-bottom: 14px; }
.cta-block p { max-width: 600px; margin: 0 auto 28px; }
.cta-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent);
  color: var(--bg-primary);
  font-weight: 700; font-size: 14px;
  padding: 14px 32px;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.2s;
}
.cta-btn:hover {
  box-shadow: 0 0 24px var(--accent-glow);
  transform: translateY(-1px);
}
.cta-btn-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-weight: 600; font-size: 14px;
  padding: 14px 28px;
  border-radius: 6px;
  text-decoration: none;
  margin-left: 12px;
  transition: all 0.2s;
}
.cta-btn-secondary:hover { border-color: var(--accent); }
.cta-secondary {
  display: block;
  margin-top: 18px;
  font-size: 13px;
  color: var(--text-muted);
}
.cta-note {
  display: block;
  margin-top: 24px;
  font-size: 12px;
  color: var(--text-muted);
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
  border-top: 1px solid var(--border);
  padding-top: 18px;
}

footer {
  border-top: 1px solid var(--border);
  padding: 40px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
}
footer a { color: var(--accent); text-decoration: none; }

@media (max-width: 768px) {
  .hero { padding: 80px 24px 60px; }
  .hero h1 { font-size: 28px; }
  .content-wrap { padding: 40px 24px 80px; }
  .roi-grid { grid-template-columns: 1fr; }
  .cta-block { padding: 36px 24px; }
  .cta-btn-secondary { margin-left: 0; margin-top: 12px; }
  .hero-meta-row { flex-direction: column; gap: 12px; }
}

/* Cyberm8 site alignment overrides */
html, body { max-width: 100%; overflow-x: hidden; }
.compare-table, .compliance-table { display: block; max-width: 100%; overflow-x: auto; white-space: nowrap; }
.diagram-container svg { max-width: 100%; height: auto; }
@media (max-width: 768px) {
  .topnav { padding: 0 20px; }
  .topnav-meta { gap: 12px; min-width: 0; overflow: hidden; }
  .topnav-meta > span:not(.topnav-badge) { display: none; }
  .topnav-badge { max-width: 132px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
.topnav-logo { color: var(--text-primary); text-decoration: none; font-family: var(--font-mono); font-weight: 800; letter-spacing: 0; }
.topnav-link { color: var(--text-secondary); text-decoration: none; font-weight: 600; }
.topnav-link:hover { color: var(--accent); }
.hero h1, h2, h3, .hero-classification, .section-label, .topnav-badge, .callout-label, .compare-table th, .compliance-table th { font-family: var(--font-mono); }
.hero h1, h2, h3 { letter-spacing: 0; }
.hero h1 em, .hero h1 .g { background: none !important; -webkit-background-clip: initial !important; -webkit-text-fill-color: currentColor !important; color: var(--accent) !important; }
.callout { background: linear-gradient(145deg, rgba(0,240,255,0.06), transparent 54%), var(--bg-card) !important; border: 1px solid var(--border-accent) !important; border-radius: 8px; }
.callout.danger { border-color: rgba(255,107,95,0.48) !important; background: linear-gradient(145deg, rgba(255,107,95,0.08), transparent 54%), var(--bg-card) !important; }
.callout.warning { border-color: rgba(255,184,0,0.48) !important; background: linear-gradient(145deg, rgba(255,184,0,0.08), transparent 54%), var(--bg-card) !important; }


/* ===== Extracted from 04-competitive-teardown.html ===== */
:root{--bg-primary: #0B0F13;--bg-secondary: #101820;--bg-card: #1F2937;--bg-code: #081119;--accent: #00F0FF;--accent-dim: rgba(0,240,255,0.14);--accent-glow: rgba(0,240,255,0.28);--accent-blue:#00FF66;--accent-purple:#00FF66;--text-primary: #EEF7FB;--text-secondary: #B8C8D3;--text-muted: #7E919D;--border: #263443;--border-accent: rgba(0,240,255,0.28);--danger: #FF6B5F;--warning: #FFB800;--font-body:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;--font-mono:'JetBrains Mono','Fira Code',monospace}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg-primary);color:var(--text-primary);font-family:var(--font-body);line-height:1.7;font-size:16px;-webkit-font-smoothing:antialiased}
.topnav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(6,9,15,0.92);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);padding:0 40px;height:64px;display:flex;align-items:center;justify-content:space-between}
.topnav-logo{font-size:20px;font-weight:700;letter-spacing:-0.5px;color:var(--text-primary)}.topnav-logo span{color:var(--accent)}
.topnav-meta{display:flex;align-items:center;gap:24px;font-size:13px;color:var(--text-muted)}
.topnav-badge{background:rgba(239,68,68,0.15);color:var(--danger);padding:4px 12px;border-radius:4px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1px}
.hero{margin-top:64px;padding:100px 40px 80px;background:radial-gradient(ellipse at 30% 40%,rgba(239,68,68,0.06) 0%,transparent 60%),radial-gradient(ellipse at 70% 70%,rgba(0,240,255,0.05) 0%,transparent 50%),var(--bg-primary);border-bottom:1px solid var(--border)}
.hero-inner{max-width:900px;margin:0 auto}
.hero-classification{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:2px;color:var(--danger);margin-bottom:28px}.hero-classification::before{content:'';width:32px;height:2px;background:var(--danger)}
.hero h1{font-size:38px;font-weight:800;line-height:1.15;letter-spacing:-1.5px;color:var(--text-primary);margin-bottom:24px}
.hero h1 em{font-style:normal;background:linear-gradient(135deg,var(--danger),var(--warning));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero h1 .g{background:linear-gradient(135deg,var(--accent),var(--accent-blue));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero-subtitle{font-size:18px;line-height:1.7;color:var(--text-secondary);max-width:720px;margin-bottom:36px}
.hero-meta-row{display:flex;gap:32px;flex-wrap:wrap;font-size:13px;color:var(--text-muted)}.hero-meta-row span{display:flex;align-items:center;gap:6px}.hero-meta-row .dot{width:6px;height:6px;border-radius:50%;background:var(--danger)}
.content-wrap{max-width:820px;margin:0 auto;padding:60px 40px 100px}
.section-label{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:2.5px;color:var(--accent);margin-bottom:16px}.section-label::before{content:'';width:20px;height:2px;background:var(--accent)}
h2{font-size:28px;font-weight:700;letter-spacing:-0.8px;color:var(--text-primary);margin-bottom:20px;line-height:1.25}
h3{font-size:20px;font-weight:600;color:var(--text-primary);margin:36px 0 14px;letter-spacing:-0.3px}
p{color:var(--text-secondary);margin-bottom:18px}p strong{color:var(--text-primary);font-weight:600}
.section-block{margin-bottom:64px;padding-top:48px;border-top:1px solid var(--border)}.section-block:first-child{border-top:none;padding-top:0}
.callout{background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:24px 28px;margin:28px 0}.callout.danger{border-color:rgba(255,107,95,0.48);}.callout.warning{border-color:rgba(255,184,0,0.48);}
.callout-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--accent);margin-bottom:10px}.callout.danger .callout-label{color:var(--danger)}.callout.warning .callout-label{color:var(--warning)}
.callout p{margin-bottom:0;font-size:15px}
.bullet-list{list-style:none;margin:20px 0}.bullet-list li{padding:8px 0 8px 24px;position:relative;color:var(--text-secondary)}.bullet-list li::before{content:'→';position:absolute;left:0;color:var(--accent);font-weight:600}
.compare-table{width:100%;border-collapse:collapse;margin:28px 0;font-size:14px}
.compare-table th{text-align:left;padding:14px 16px;background:var(--bg-card);color:var(--text-muted);font-size:11px;text-transform:uppercase;letter-spacing:1.5px;font-weight:700;border-bottom:2px solid var(--border)}
.compare-table td{padding:14px 16px;border-bottom:1px solid var(--border);color:var(--text-secondary)}.compare-table tr:hover td{background:var(--bg-card)}
.status-pass{color:var(--accent);font-weight:600}.status-fail{color:var(--danger);font-weight:600}.status-partial{color:var(--warning);font-weight:600}
.vendor-card-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:28px 0}
.vendor-card{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:28px 24px}
.vendor-card h4{font-size:16px;font-weight:700;margin-bottom:6px;color:var(--text-primary)}
.vendor-card .vendor-type{font-size:11px;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-muted);font-weight:600;margin-bottom:14px}
.vendor-card .verdict{font-size:13px;font-weight:700;padding:6px 12px;border-radius:4px;display:inline-block;margin-top:14px}
.verdict-fail{background:rgba(239,68,68,0.12);color:var(--danger)}
.verdict-partial{background:rgba(245,158,11,0.12);color:var(--warning)}
.code-block{background:var(--bg-code);border:1px solid var(--border);border-radius:8px;padding:20px 24px;margin:24px 0;font-family:var(--font-mono);font-size:13px;line-height:1.8;color:var(--text-secondary);overflow-x:auto;white-space:pre}.code-block .kw{color:var(--accent)}.code-block .str{color:#FFB800}.code-block .cmt{color:var(--text-muted);font-style:italic}.code-block .err{color:var(--danger)}
.cta-block{background:linear-gradient(135deg,rgba(0,240,255,0.08),rgba(0,255,102,0.06));border:1px solid var(--border-accent);border-radius:12px;padding:48px 40px;text-align:center;margin:64px 0 0}
.cta-block h2{font-size:26px;margin-bottom:14px}.cta-block p{max-width:560px;margin:0 auto 28px}
.cta-btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:var(--bg-primary);font-weight:700;font-size:14px;padding:14px 32px;border-radius:6px;text-decoration:none;transition:all 0.2s}.cta-btn:hover{box-shadow:0 0 24px var(--accent-glow);transform:translateY(-1px)}
.cta-secondary{display:block;margin-top:14px;font-size:13px;color:var(--text-muted)}
footer{border-top:1px solid var(--border);padding:40px;text-align:center;font-size:13px;color:var(--text-muted)}footer a{color:var(--accent);text-decoration:none}
@media(max-width:768px){.hero{padding:80px 24px 60px}.hero h1{font-size:28px}.content-wrap{padding:40px 24px 80px}.vendor-card-grid{grid-template-columns:1fr}.cta-block{padding:36px 24px}.hero-meta-row{flex-direction:column;gap:12px}}

/* Cyberm8 site alignment overrides */
html, body { max-width: 100%; overflow-x: hidden; }
.compare-table, .compliance-table { display: block; max-width: 100%; overflow-x: auto; white-space: nowrap; }
.diagram-container svg { max-width: 100%; height: auto; }
@media (max-width: 768px) {
  .topnav { padding: 0 20px; }
  .topnav-meta { gap: 12px; min-width: 0; overflow: hidden; }
  .topnav-meta > span:not(.topnav-badge) { display: none; }
  .topnav-badge { max-width: 132px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
.topnav-logo { color: var(--text-primary); text-decoration: none; font-family: var(--font-mono); font-weight: 800; letter-spacing: 0; }
.topnav-link { color: var(--text-secondary); text-decoration: none; font-weight: 600; }
.topnav-link:hover { color: var(--accent); }
.hero h1, h2, h3, .hero-classification, .section-label, .topnav-badge, .callout-label, .compare-table th, .compliance-table th { font-family: var(--font-mono); }
.hero h1, h2, h3 { letter-spacing: 0; }
.hero h1 em, .hero h1 .g { background: none !important; -webkit-background-clip: initial !important; -webkit-text-fill-color: currentColor !important; color: var(--accent) !important; }
.callout { background: linear-gradient(145deg, rgba(0,240,255,0.06), transparent 54%), var(--bg-card) !important; border: 1px solid var(--border-accent) !important; border-radius: 8px; }
.callout.danger { border-color: rgba(255,107,95,0.48) !important; background: linear-gradient(145deg, rgba(255,107,95,0.08), transparent 54%), var(--bg-card) !important; }
.callout.warning { border-color: rgba(255,184,0,0.48) !important; background: linear-gradient(145deg, rgba(255,184,0,0.08), transparent 54%), var(--bg-card) !important; }


/* ===== Extracted from 05-build-vs-buy.html ===== */
:root{--bg-primary: #0B0F13;--bg-secondary: #101820;--bg-card: #1F2937;--bg-code: #081119;--accent: #00F0FF;--accent-dim: rgba(0,240,255,0.14);--accent-glow: rgba(0,240,255,0.28);--accent-blue:#00FF66;--accent-purple:#00FF66;--text-primary: #EEF7FB;--text-secondary: #B8C8D3;--text-muted: #7E919D;--border: #263443;--border-accent: rgba(0,240,255,0.28);--danger: #FF6B5F;--warning: #FFB800;--font-body:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;--font-mono:'JetBrains Mono','Fira Code',monospace}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg-primary);color:var(--text-primary);font-family:var(--font-body);line-height:1.7;font-size:16px;-webkit-font-smoothing:antialiased}
.topnav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(6,9,15,0.92);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);padding:0 40px;height:64px;display:flex;align-items:center;justify-content:space-between}
.topnav-logo{font-size:20px;font-weight:700;letter-spacing:-0.5px;color:var(--text-primary)}.topnav-logo span{color:var(--accent)}
.topnav-meta{display:flex;align-items:center;gap:24px;font-size:13px;color:var(--text-muted)}
.topnav-badge{background:rgba(245,158,11,0.15);color:var(--warning);padding:4px 12px;border-radius:4px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1px}
.hero{margin-top:64px;padding:100px 40px 80px;background:radial-gradient(ellipse at 60% 30%,rgba(245,158,11,0.06) 0%,transparent 60%),radial-gradient(ellipse at 20% 80%,rgba(0,240,255,0.04) 0%,transparent 50%),var(--bg-primary);border-bottom:1px solid var(--border)}
.hero-inner{max-width:900px;margin:0 auto}
.hero-classification{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:2px;color:var(--warning);margin-bottom:28px}.hero-classification::before{content:'';width:32px;height:2px;background:var(--warning)}
.hero h1{font-size:38px;font-weight:800;line-height:1.15;letter-spacing:-1.5px;color:var(--text-primary);margin-bottom:24px}
.hero h1 em{font-style:normal;background:linear-gradient(135deg,var(--warning),var(--danger));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero h1 .g{background:linear-gradient(135deg,var(--accent),var(--accent-blue));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero-subtitle{font-size:18px;line-height:1.7;color:var(--text-secondary);max-width:720px;margin-bottom:36px}
.hero-meta-row{display:flex;gap:32px;flex-wrap:wrap;font-size:13px;color:var(--text-muted)}.hero-meta-row span{display:flex;align-items:center;gap:6px}.hero-meta-row .dot{width:6px;height:6px;border-radius:50%;background:var(--warning)}
.content-wrap{max-width:820px;margin:0 auto;padding:60px 40px 100px}
.section-label{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:2.5px;color:var(--accent);margin-bottom:16px}.section-label::before{content:'';width:20px;height:2px;background:var(--accent)}
h2{font-size:28px;font-weight:700;letter-spacing:-0.8px;color:var(--text-primary);margin-bottom:20px;line-height:1.25}
h3{font-size:20px;font-weight:600;color:var(--text-primary);margin:36px 0 14px;letter-spacing:-0.3px}
p{color:var(--text-secondary);margin-bottom:18px}p strong{color:var(--text-primary);font-weight:600}
.section-block{margin-bottom:64px;padding-top:48px;border-top:1px solid var(--border)}.section-block:first-child{border-top:none;padding-top:0}
.callout{background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:24px 28px;margin:28px 0}.callout.danger{border-color:rgba(255,107,95,0.48);}.callout.warning{border-color:rgba(255,184,0,0.48);}
.callout-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--accent);margin-bottom:10px}.callout.danger .callout-label{color:var(--danger)}.callout.warning .callout-label{color:var(--warning)}
.callout p{margin-bottom:0;font-size:15px}
.bullet-list{list-style:none;margin:20px 0}.bullet-list li{padding:8px 0 8px 24px;position:relative;color:var(--text-secondary)}.bullet-list li::before{content:'→';position:absolute;left:0;color:var(--accent);font-weight:600}
.timeline{margin:36px 0;position:relative;padding-left:40px}
.timeline::before{content:'';position:absolute;left:14px;top:0;bottom:0;width:2px;background:var(--border)}
.timeline-item{position:relative;padding-bottom:36px}
.timeline-item:last-child{padding-bottom:0}
.timeline-dot{position:absolute;left:-33px;top:4px;width:12px;height:12px;border-radius:50%;border:2px solid var(--accent);background:var(--bg-primary)}
.timeline-item.bad .timeline-dot{border-color:var(--danger)}
.timeline-month{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--accent);margin-bottom:6px}
.timeline-item.bad .timeline-month{color:var(--danger)}
.timeline-content{color:var(--text-secondary);font-size:15px}
.cost-table{width:100%;border-collapse:collapse;margin:28px 0;font-size:14px}
.cost-table th{text-align:left;padding:14px 16px;background:var(--bg-card);color:var(--text-muted);font-size:11px;text-transform:uppercase;letter-spacing:1.5px;font-weight:700;border-bottom:2px solid var(--border)}
.cost-table td{padding:14px 16px;border-bottom:1px solid var(--border);color:var(--text-secondary)}.cost-table tr:hover td{background:var(--bg-card)}
.cost-table .total td{font-weight:700;color:var(--text-primary);border-top:2px solid var(--border);font-size:15px}
.cost{color:var(--danger);font-weight:600}.saved{color:var(--accent);font-weight:600}
.versus-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:0;margin:36px 0;align-items:stretch}
.versus-card{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:28px 24px}
.versus-card.bad{border-color:rgba(239,68,68,0.25)}
.versus-card.good{border-color:rgba(0,240,255,0.25)}
.versus-divider{display:flex;align-items:center;justify-content:center;padding:0 16px;font-size:20px;font-weight:800;color:var(--text-muted)}
.versus-card h4{font-size:14px;font-weight:700;margin-bottom:16px;text-transform:uppercase;letter-spacing:1px}
.versus-card.bad h4{color:var(--danger)}
.versus-card.good h4{color:var(--accent)}
.versus-card .metric{margin-bottom:14px}
.versus-card .metric-label{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:2px}
.versus-card .metric-value{font-size:18px;font-weight:700}
.versus-card.bad .metric-value{color:var(--danger)}
.versus-card.good .metric-value{color:var(--accent)}
.cta-block{background:linear-gradient(135deg,rgba(0,240,255,0.08),rgba(0,255,102,0.06));border:1px solid var(--border-accent);border-radius:12px;padding:48px 40px;text-align:center;margin:64px 0 0}
.cta-block h2{font-size:26px;margin-bottom:14px}.cta-block p{max-width:560px;margin:0 auto 28px}
.cta-btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:var(--bg-primary);font-weight:700;font-size:14px;padding:14px 32px;border-radius:6px;text-decoration:none;transition:all 0.2s}.cta-btn:hover{box-shadow:0 0 24px var(--accent-glow);transform:translateY(-1px)}
.cta-secondary{display:block;margin-top:14px;font-size:13px;color:var(--text-muted)}
footer{border-top:1px solid var(--border);padding:40px;text-align:center;font-size:13px;color:var(--text-muted)}footer a{color:var(--accent);text-decoration:none}
@media(max-width:768px){.hero{padding:80px 24px 60px}.hero h1{font-size:28px}.content-wrap{padding:40px 24px 80px}.versus-grid{grid-template-columns:1fr;gap:16px}.versus-divider{padding:8px 0}.cta-block{padding:36px 24px}.hero-meta-row{flex-direction:column;gap:12px}}

/* Cyberm8 site alignment overrides */
html, body { max-width: 100%; overflow-x: hidden; }
.compare-table, .compliance-table { display: block; max-width: 100%; overflow-x: auto; white-space: nowrap; }
.diagram-container svg { max-width: 100%; height: auto; }
@media (max-width: 768px) {
  .topnav { padding: 0 20px; }
  .topnav-meta { gap: 12px; min-width: 0; overflow: hidden; }
  .topnav-meta > span:not(.topnav-badge) { display: none; }
  .topnav-badge { max-width: 132px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
.topnav-logo { color: var(--text-primary); text-decoration: none; font-family: var(--font-mono); font-weight: 800; letter-spacing: 0; }
.topnav-link { color: var(--text-secondary); text-decoration: none; font-weight: 600; }
.topnav-link:hover { color: var(--accent); }
.hero h1, h2, h3, .hero-classification, .section-label, .topnav-badge, .callout-label, .compare-table th, .compliance-table th { font-family: var(--font-mono); }
.hero h1, h2, h3 { letter-spacing: 0; }
.hero h1 em, .hero h1 .g { background: none !important; -webkit-background-clip: initial !important; -webkit-text-fill-color: currentColor !important; color: var(--accent) !important; }
.callout { background: linear-gradient(145deg, rgba(0,240,255,0.06), transparent 54%), var(--bg-card) !important; border: 1px solid var(--border-accent) !important; border-radius: 8px; }
.callout.danger { border-color: rgba(255,107,95,0.48) !important; background: linear-gradient(145deg, rgba(255,107,95,0.08), transparent 54%), var(--bg-card) !important; }
.callout.warning { border-color: rgba(255,184,0,0.48) !important; background: linear-gradient(145deg, rgba(255,184,0,0.08), transparent 54%), var(--bg-card) !important; }


/* ===== Extracted from 06-compliance-automation.html ===== */
:root{--bg-primary: #0B0F13;--bg-secondary: #101820;--bg-card: #1F2937;--bg-code: #081119;--accent: #00F0FF;--accent-dim: rgba(0,240,255,0.14);--accent-glow: rgba(0,240,255,0.28);--accent-blue:#00FF66;--accent-purple:#00FF66;--text-primary: #EEF7FB;--text-secondary: #B8C8D3;--text-muted: #7E919D;--border: #263443;--border-accent: rgba(0,240,255,0.28);--danger: #FF6B5F;--warning: #FFB800;--font-body:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;--font-mono:'JetBrains Mono','Fira Code',monospace}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg-primary);color:var(--text-primary);font-family:var(--font-body);line-height:1.7;font-size:16px;-webkit-font-smoothing:antialiased}
.topnav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(6,9,15,0.92);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);padding:0 40px;height:64px;display:flex;align-items:center;justify-content:space-between}
.topnav-logo{font-size:20px;font-weight:700;letter-spacing:-0.5px;color:var(--text-primary)}.topnav-logo span{color:var(--accent)}
.topnav-meta{display:flex;align-items:center;gap:24px;font-size:13px;color:var(--text-muted)}
.topnav-badge{background:var(--accent-dim);color:var(--accent);padding:4px 12px;border-radius:4px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1px}
.hero{margin-top:64px;padding:100px 40px 80px;background:radial-gradient(ellipse at 40% 30%,rgba(0,240,255,0.06) 0%,transparent 60%),radial-gradient(ellipse at 80% 70%,rgba(0,255,102,0.04) 0%,transparent 50%),var(--bg-primary);border-bottom:1px solid var(--border)}
.hero-inner{max-width:900px;margin:0 auto}
.hero-classification{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:2px;color:var(--accent);margin-bottom:28px}.hero-classification::before{content:'';width:32px;height:2px;background:var(--accent)}
.hero h1{font-size:38px;font-weight:800;line-height:1.15;letter-spacing:-1.5px;color:var(--text-primary);margin-bottom:24px}
.hero h1 em{font-style:normal;background:linear-gradient(135deg,var(--accent),#00F0FF);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero-subtitle{font-size:18px;line-height:1.7;color:var(--text-secondary);max-width:720px;margin-bottom:36px}
.hero-meta-row{display:flex;gap:32px;flex-wrap:wrap;font-size:13px;color:var(--text-muted)}.hero-meta-row span{display:flex;align-items:center;gap:6px}.hero-meta-row .dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.content-wrap{max-width:820px;margin:0 auto;padding:60px 40px 100px}
.section-label{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:2.5px;color:var(--accent);margin-bottom:16px}.section-label::before{content:'';width:20px;height:2px;background:var(--accent)}
h2{font-size:28px;font-weight:700;letter-spacing:-0.8px;color:var(--text-primary);margin-bottom:20px;line-height:1.25}
h3{font-size:20px;font-weight:600;color:var(--text-primary);margin:36px 0 14px;letter-spacing:-0.3px}
p{color:var(--text-secondary);margin-bottom:18px}p strong{color:var(--text-primary);font-weight:600}
.section-block{margin-bottom:64px;padding-top:48px;border-top:1px solid var(--border)}.section-block:first-child{border-top:none;padding-top:0}
.callout{background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:24px 28px;margin:28px 0}.callout.danger{border-color:rgba(255,107,95,0.48);}.callout.warning{border-color:rgba(255,184,0,0.48);}
.callout-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--accent);margin-bottom:10px}.callout.danger .callout-label{color:var(--danger)}.callout.warning .callout-label{color:var(--warning)}
.callout p{margin-bottom:0;font-size:15px}
.bullet-list{list-style:none;margin:20px 0}.bullet-list li{padding:8px 0 8px 24px;position:relative;color:var(--text-secondary)}.bullet-list li::before{content:'→';position:absolute;left:0;color:var(--accent);font-weight:600}
.framework-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:28px 0}
.framework-card{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:24px;transition:border-color 0.2s}
.framework-card:hover{border-color:var(--accent)}
.framework-card h4{font-size:15px;font-weight:700;color:var(--text-primary);margin-bottom:4px}
.framework-card .fw-tag{font-size:11px;text-transform:uppercase;letter-spacing:1.5px;color:var(--accent);font-weight:600;margin-bottom:12px}
.framework-card p{font-size:13px;margin-bottom:0}
.audit-table{width:100%;border-collapse:collapse;margin:28px 0;font-size:14px}
.audit-table th{text-align:left;padding:14px 16px;background:var(--bg-card);color:var(--text-muted);font-size:11px;text-transform:uppercase;letter-spacing:1.5px;font-weight:700;border-bottom:2px solid var(--border)}
.audit-table td{padding:14px 16px;border-bottom:1px solid var(--border);color:var(--text-secondary)}.audit-table tr:hover td{background:var(--bg-card)}
.status-pass{color:var(--accent);font-weight:600}.status-fail{color:var(--danger);font-weight:600}
.code-block{background:var(--bg-code);border:1px solid var(--border);border-radius:8px;padding:20px 24px;margin:24px 0;font-family:var(--font-mono);font-size:13px;line-height:1.8;color:var(--text-secondary);overflow-x:auto;white-space:pre}.code-block .kw{color:var(--accent)}.code-block .str{color:#FFB800}.code-block .cmt{color:var(--text-muted);font-style:italic}
.proof-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;margin:36px 0}
.proof-card{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:24px;text-align:center}
.proof-card .big-number{font-size:32px;font-weight:800;color:var(--accent);margin-bottom:8px;letter-spacing:-1px}
.proof-card .label{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-muted);margin-bottom:10px}
.proof-card p{font-size:13px;margin-bottom:0}
.numbered-list{list-style:none;counter-reset:steps;margin:24px 0}
.numbered-list li{counter-increment:steps;padding:14px 0 14px 52px;position:relative;color:var(--text-secondary);border-bottom:1px solid rgba(38,52,67,0.55)}
.numbered-list li::before{content:counter(steps, decimal-leading-zero);position:absolute;left:0;top:14px;font-family:var(--font-mono);font-size:14px;font-weight:600;color:var(--accent)}
.cta-block{background:linear-gradient(135deg,rgba(0,240,255,0.08),rgba(0,255,102,0.06));border:1px solid var(--border-accent);border-radius:12px;padding:48px 40px;text-align:center;margin:64px 0 0}
.cta-block h2{font-size:26px;margin-bottom:14px}.cta-block p{max-width:560px;margin:0 auto 28px}
.cta-btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:var(--bg-primary);font-weight:700;font-size:14px;padding:14px 32px;border-radius:6px;text-decoration:none;transition:all 0.2s}.cta-btn:hover{box-shadow:0 0 24px var(--accent-glow);transform:translateY(-1px)}
.cta-secondary{display:block;margin-top:14px;font-size:13px;color:var(--text-muted)}
footer{border-top:1px solid var(--border);padding:40px;text-align:center;font-size:13px;color:var(--text-muted)}footer a{color:var(--accent);text-decoration:none}
@media(max-width:768px){.hero{padding:80px 24px 60px}.hero h1{font-size:28px}.content-wrap{padding:40px 24px 80px}.framework-grid,.proof-grid{grid-template-columns:1fr}.cta-block{padding:36px 24px}.hero-meta-row{flex-direction:column;gap:12px}}

/* Cyberm8 site alignment overrides */
html, body { max-width: 100%; overflow-x: hidden; }
.compare-table, .compliance-table { display: block; max-width: 100%; overflow-x: auto; white-space: nowrap; }
.diagram-container svg { max-width: 100%; height: auto; }
@media (max-width: 768px) {
  .topnav { padding: 0 20px; }
  .topnav-meta { gap: 12px; min-width: 0; overflow: hidden; }
  .topnav-meta > span:not(.topnav-badge) { display: none; }
  .topnav-badge { max-width: 132px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
.topnav-logo { color: var(--text-primary); text-decoration: none; font-family: var(--font-mono); font-weight: 800; letter-spacing: 0; }
.topnav-link { color: var(--text-secondary); text-decoration: none; font-weight: 600; }
.topnav-link:hover { color: var(--accent); }
.hero h1, h2, h3, .hero-classification, .section-label, .topnav-badge, .callout-label, .compare-table th, .compliance-table th { font-family: var(--font-mono); }
.hero h1, h2, h3 { letter-spacing: 0; }
.hero h1 em, .hero h1 .g { background: none !important; -webkit-background-clip: initial !important; -webkit-text-fill-color: currentColor !important; color: var(--accent) !important; }
.callout { background: linear-gradient(145deg, rgba(0,240,255,0.06), transparent 54%), var(--bg-card) !important; border: 1px solid var(--border-accent) !important; border-radius: 8px; }
.callout.danger { border-color: rgba(255,107,95,0.48) !important; background: linear-gradient(145deg, rgba(255,107,95,0.08), transparent 54%), var(--bg-card) !important; }
.callout.warning { border-color: rgba(255,184,0,0.48) !important; background: linear-gradient(145deg, rgba(255,184,0,0.08), transparent 54%), var(--bg-card) !important; }


/* ===== Extracted from 07-data-sovereignty.html ===== */
:root{--bg-primary: #0B0F13;--bg-secondary: #101820;--bg-card: #1F2937;--bg-code: #081119;--accent: #00F0FF;--accent-dim: rgba(0,240,255,0.14);--accent-glow: rgba(0,240,255,0.28);--accent-blue:#00FF66;--accent-purple:#00FF66;--text-primary: #EEF7FB;--text-secondary: #B8C8D3;--text-muted: #7E919D;--border: #263443;--border-accent: rgba(0,240,255,0.28);--danger: #FF6B5F;--warning: #FFB800;--font-body:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;--font-mono:'JetBrains Mono','Fira Code',monospace}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg-primary);color:var(--text-primary);font-family:var(--font-body);line-height:1.7;font-size:16px;-webkit-font-smoothing:antialiased}
.topnav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(6,9,15,0.92);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);padding:0 40px;height:64px;display:flex;align-items:center;justify-content:space-between}
.topnav-logo{font-size:20px;font-weight:700;letter-spacing:-0.5px;color:var(--text-primary)}.topnav-logo span{color:var(--accent)}
.topnav-meta{display:flex;align-items:center;gap:24px;font-size:13px;color:var(--text-muted)}
.topnav-badge{background:rgba(0,255,102,0.15);color:var(--accent-blue);padding:4px 12px;border-radius:4px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1px}
.hero{margin-top:64px;padding:100px 40px 80px;background:radial-gradient(ellipse at 25% 30%,rgba(0,255,102,0.07) 0%,transparent 60%),radial-gradient(ellipse at 75% 70%,rgba(0,240,255,0.04) 0%,transparent 50%),var(--bg-primary);border-bottom:1px solid var(--border)}
.hero-inner{max-width:900px;margin:0 auto}
.hero-classification{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:2px;color:var(--accent-blue);margin-bottom:28px}.hero-classification::before{content:'';width:32px;height:2px;background:var(--accent-blue)}
.hero h1{font-size:38px;font-weight:800;line-height:1.15;letter-spacing:-1.5px;color:var(--text-primary);margin-bottom:24px}
.hero h1 em{font-style:normal;background:linear-gradient(135deg,var(--accent-blue),var(--accent-purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero h1 .g{background:linear-gradient(135deg,var(--accent),#00F0FF);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero-subtitle{font-size:18px;line-height:1.7;color:var(--text-secondary);max-width:720px;margin-bottom:36px}
.hero-meta-row{display:flex;gap:32px;flex-wrap:wrap;font-size:13px;color:var(--text-muted)}.hero-meta-row span{display:flex;align-items:center;gap:6px}.hero-meta-row .dot{width:6px;height:6px;border-radius:50%;background:var(--accent-blue)}
.content-wrap{max-width:820px;margin:0 auto;padding:60px 40px 100px}
.section-label{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:2.5px;color:var(--accent);margin-bottom:16px}.section-label::before{content:'';width:20px;height:2px;background:var(--accent)}
h2{font-size:28px;font-weight:700;letter-spacing:-0.8px;color:var(--text-primary);margin-bottom:20px;line-height:1.25}
h3{font-size:20px;font-weight:600;color:var(--text-primary);margin:36px 0 14px;letter-spacing:-0.3px}
p{color:var(--text-secondary);margin-bottom:18px}p strong{color:var(--text-primary);font-weight:600}
.section-block{margin-bottom:64px;padding-top:48px;border-top:1px solid var(--border)}.section-block:first-child{border-top:none;padding-top:0}
.callout{background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:24px 28px;margin:28px 0}.callout.danger{border-color:rgba(255,107,95,0.48);}.callout.warning{border-color:rgba(255,184,0,0.48);}.callout.blue{border-left-color:var(--accent-blue)}
.callout-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--accent);margin-bottom:10px}.callout.danger .callout-label{color:var(--danger)}.callout.warning .callout-label{color:var(--warning)}.callout.blue .callout-label{color:var(--accent-blue)}
.callout p{margin-bottom:0;font-size:15px}
.bullet-list{list-style:none;margin:20px 0}.bullet-list li{padding:8px 0 8px 24px;position:relative;color:var(--text-secondary)}.bullet-list li::before{content:'→';position:absolute;left:0;color:var(--accent);font-weight:600}
.data-flow-table{width:100%;border-collapse:collapse;margin:28px 0;font-size:14px}
.data-flow-table th{text-align:left;padding:14px 16px;background:var(--bg-card);color:var(--text-muted);font-size:11px;text-transform:uppercase;letter-spacing:1.5px;font-weight:700;border-bottom:2px solid var(--border)}
.data-flow-table td{padding:14px 16px;border-bottom:1px solid var(--border);color:var(--text-secondary)}.data-flow-table tr:hover td{background:var(--bg-card)}
.status-pass{color:var(--accent);font-weight:600}.status-fail{color:var(--danger);font-weight:600}.status-partial{color:var(--warning);font-weight:600}
.risk-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:36px 0}
.risk-card{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:28px 24px}
.risk-card h4{font-size:16px;font-weight:700;margin-bottom:12px;color:var(--text-primary)}
.risk-card p{font-size:14px;margin-bottom:0}
.risk-card.critical{border:1px solid rgba(255,107,95,0.48);}
.risk-card.critical h4{color:var(--danger)}
.diagram-container{background:var(--bg-code);border:1px solid var(--border);border-radius:10px;padding:40px 28px;margin:36px 0;overflow-x:auto}
.diagram-caption{text-align:center;font-size:12px;color:var(--text-muted);margin-top:16px;font-family:var(--font-mono);letter-spacing:0.5px}
.numbered-list{list-style:none;counter-reset:steps;margin:24px 0}
.numbered-list li{counter-increment:steps;padding:14px 0 14px 52px;position:relative;color:var(--text-secondary);border-bottom:1px solid rgba(38,52,67,0.55)}
.numbered-list li::before{content:counter(steps, decimal-leading-zero);position:absolute;left:0;top:14px;font-family:var(--font-mono);font-size:14px;font-weight:600;color:var(--accent)}
.cta-block{background:linear-gradient(135deg,rgba(0,255,102,0.08),rgba(0,240,255,0.06));border:1px solid var(--border-accent);border-radius:12px;padding:48px 40px;text-align:center;margin:64px 0 0}
.cta-block h2{font-size:26px;margin-bottom:14px}.cta-block p{max-width:560px;margin:0 auto 28px}
.cta-btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:var(--bg-primary);font-weight:700;font-size:14px;padding:14px 32px;border-radius:6px;text-decoration:none;transition:all 0.2s}.cta-btn:hover{box-shadow:0 0 24px var(--accent-glow);transform:translateY(-1px)}
.cta-secondary{display:block;margin-top:14px;font-size:13px;color:var(--text-muted)}
footer{border-top:1px solid var(--border);padding:40px;text-align:center;font-size:13px;color:var(--text-muted)}footer a{color:var(--accent);text-decoration:none}
@media(max-width:768px){.hero{padding:80px 24px 60px}.hero h1{font-size:28px}.content-wrap{padding:40px 24px 80px}.risk-grid{grid-template-columns:1fr}.cta-block{padding:36px 24px}.hero-meta-row{flex-direction:column;gap:12px}}

/* Cyberm8 site alignment overrides */
html, body { max-width: 100%; overflow-x: hidden; }
.compare-table, .compliance-table { display: block; max-width: 100%; overflow-x: auto; white-space: nowrap; }
.diagram-container svg { max-width: 100%; height: auto; }
@media (max-width: 768px) {
  .topnav { padding: 0 20px; }
  .topnav-meta { gap: 12px; min-width: 0; overflow: hidden; }
  .topnav-meta > span:not(.topnav-badge) { display: none; }
  .topnav-badge { max-width: 132px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
.topnav-logo { color: var(--text-primary); text-decoration: none; font-family: var(--font-mono); font-weight: 800; letter-spacing: 0; }
.topnav-link { color: var(--text-secondary); text-decoration: none; font-weight: 600; }
.topnav-link:hover { color: var(--accent); }
.hero h1, h2, h3, .hero-classification, .section-label, .topnav-badge, .callout-label, .compare-table th, .compliance-table th { font-family: var(--font-mono); }
.hero h1, h2, h3 { letter-spacing: 0; }
.hero h1 em, .hero h1 .g { background: none !important; -webkit-background-clip: initial !important; -webkit-text-fill-color: currentColor !important; color: var(--accent) !important; }
.callout { background: linear-gradient(145deg, rgba(0,240,255,0.06), transparent 54%), var(--bg-card) !important; border: 1px solid var(--border-accent) !important; border-radius: 8px; }
.callout.danger { border-color: rgba(255,107,95,0.48) !important; background: linear-gradient(145deg, rgba(255,107,95,0.08), transparent 54%), var(--bg-card) !important; }
.callout.warning { border-color: rgba(255,184,0,0.48) !important; background: linear-gradient(145deg, rgba(255,184,0,0.08), transparent 54%), var(--bg-card) !important; }


/* ===== Extracted from 08-soc-analyst-first-30-days.html ===== */
:root{--bg-primary: #0B0F13;--bg-secondary: #101820;--bg-card: #1F2937;--bg-code: #081119;--accent: #00F0FF;--accent-dim: rgba(0,240,255,0.14);--accent-glow: rgba(0,240,255,0.28);--accent-blue:#00FF66;--accent-purple:#00FF66;--text-primary: #EEF7FB;--text-secondary: #B8C8D3;--text-muted: #7E919D;--border: #263443;--border-accent: rgba(0,240,255,0.28);--danger: #FF6B5F;--warning: #FFB800;--font-body:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;--font-mono:'JetBrains Mono','Fira Code',monospace}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg-primary);color:var(--text-primary);font-family:var(--font-body);line-height:1.7;font-size:16px;-webkit-font-smoothing:antialiased}
.topnav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(6,9,15,0.92);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);padding:0 40px;height:64px;display:flex;align-items:center;justify-content:space-between}
.topnav-logo{font-size:20px;font-weight:700;letter-spacing:-0.5px;color:var(--text-primary)}.topnav-logo span{color:var(--accent)}
.topnav-meta{display:flex;align-items:center;gap:24px;font-size:13px;color:var(--text-muted)}
.topnav-badge{background:rgba(0,240,255,0.15);color:var(--accent);padding:4px 12px;border-radius:4px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1px}
.hero{margin-top:64px;padding:100px 40px 80px;background:radial-gradient(ellipse at 50% 50%,rgba(0,240,255,0.06) 0%,transparent 60%),var(--bg-primary);border-bottom:1px solid var(--border)}
.hero-inner{max-width:900px;margin:0 auto}
.hero-classification{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:2px;color:var(--accent);margin-bottom:28px}.hero-classification::before{content:'';width:32px;height:2px;background:var(--accent)}
.hero h1{font-size:38px;font-weight:800;line-height:1.15;letter-spacing:-1.5px;color:var(--text-primary);margin-bottom:24px}
.hero h1 em{font-style:normal;background:linear-gradient(135deg,var(--accent),#00F0FF);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero-subtitle{font-size:18px;line-height:1.7;color:var(--text-secondary);max-width:720px;margin-bottom:36px}
.hero-meta-row{display:flex;gap:32px;flex-wrap:wrap;font-size:13px;color:var(--text-muted)}.hero-meta-row span{display:flex;align-items:center;gap:6px}.hero-meta-row .dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.content-wrap{max-width:820px;margin:0 auto;padding:60px 40px 100px}
.section-label{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:2.5px;color:var(--accent);margin-bottom:16px}.section-label::before{content:'';width:20px;height:2px;background:var(--accent)}
h2{font-size:28px;font-weight:700;letter-spacing:-0.8px;color:var(--text-primary);margin-bottom:20px;line-height:1.25}
h3{font-size:20px;font-weight:600;color:var(--text-primary);margin:36px 0 14px;letter-spacing:-0.3px}
p{color:var(--text-secondary);margin-bottom:18px}p strong{color:var(--text-primary);font-weight:600}
.section-block{margin-bottom:64px;padding-top:48px;border-top:1px solid var(--border)}.section-block:first-child{border-top:none;padding-top:0}
.callout{background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:24px 28px;margin:28px 0}.callout.danger{border-color:rgba(255,107,95,0.48);}.callout.warning{border-color:rgba(255,184,0,0.48);}
.callout-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--accent);margin-bottom:10px}.callout.danger .callout-label{color:var(--danger)}.callout.warning .callout-label{color:var(--warning)}
.callout p{margin-bottom:0;font-size:15px}
.bullet-list{list-style:none;margin:20px 0}.bullet-list li{padding:8px 0 8px 24px;position:relative;color:var(--text-secondary)}.bullet-list li::before{content:'→';position:absolute;left:0;color:var(--accent);font-weight:600}

/* ── Day Timeline ── */
.day-block{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:32px 28px;margin:32px 0;position:relative}
.day-block::before{content:'';position:absolute;left:28px;top:72px;bottom:-32px;width:2px;background:var(--border)}
.day-block:last-of-type::before{display:none}
.day-tag{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:2px;padding:4px 12px;border-radius:4px;margin-bottom:16px}
.day-tag.setup{background:rgba(0,255,102,0.15);color:var(--accent-blue)}
.day-tag.week1{background:rgba(0,240,255,0.15);color:var(--accent)}
.day-tag.week2{background:rgba(0,255,102,0.15);color:var(--accent-purple)}
.day-tag.week3{background:rgba(245,158,11,0.15);color:var(--warning)}
.day-tag.month{background:rgba(0,240,255,0.15);color:var(--accent)}
.day-block h3{margin-top:0}
.day-block p{font-size:15px}

/* ── Before/After Grid ── */
.ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:36px 0;border:1px solid var(--border);border-radius:10px;overflow:hidden}
.ba-col{padding:28px 24px}
.ba-col.before{background:rgba(239,68,68,0.03);border-right:1px solid var(--border)}
.ba-col.after{background:rgba(0,240,255,0.03)}
.ba-col h4{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:2px;margin-bottom:20px}
.ba-col.before h4{color:var(--danger)}
.ba-col.after h4{color:var(--accent)}
.ba-item{margin-bottom:18px;font-size:14px;color:var(--text-secondary)}
.ba-item:last-child{margin-bottom:0}
.ba-item strong{display:block;color:var(--text-primary);margin-bottom:2px;font-size:13px}

/* ── Metrics Row ── */
.metrics-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:36px 0}
.metric-card{background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:20px;text-align:center}
.metric-card .number{font-size:28px;font-weight:800;color:var(--accent);letter-spacing:-1px;margin-bottom:4px}
.metric-card .unit{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-muted)}

/* ── Quote Block ── */
.quote-block{background:var(--bg-card);border:1px solid var(--border);border:1px solid rgba(0,255,102,0.38);border-radius:8px;padding:28px;margin:28px 0;font-size:16px;font-style:italic;color:var(--text-secondary);line-height:1.8}
.quote-attr{display:block;margin-top:12px;font-size:13px;font-style:normal;color:var(--text-muted);font-weight:600}

.cta-block{background:linear-gradient(135deg,rgba(0,240,255,0.08),rgba(0,255,102,0.06));border:1px solid var(--border-accent);border-radius:12px;padding:48px 40px;text-align:center;margin:64px 0 0}
.cta-block h2{font-size:26px;margin-bottom:14px}.cta-block p{max-width:560px;margin:0 auto 28px}
.cta-btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:var(--bg-primary);font-weight:700;font-size:14px;padding:14px 32px;border-radius:6px;text-decoration:none;transition:all 0.2s}.cta-btn:hover{box-shadow:0 0 24px var(--accent-glow);transform:translateY(-1px)}
.cta-secondary{display:block;margin-top:14px;font-size:13px;color:var(--text-muted)}
footer{border-top:1px solid var(--border);padding:40px;text-align:center;font-size:13px;color:var(--text-muted)}footer a{color:var(--accent);text-decoration:none}
@media(max-width:768px){.hero{padding:80px 24px 60px}.hero h1{font-size:28px}.content-wrap{padding:40px 24px 80px}.ba-grid{grid-template-columns:1fr}.ba-col.before{border-right:none;border-bottom:1px solid var(--border)}.metrics-row{grid-template-columns:1fr 1fr}.cta-block{padding:36px 24px}.hero-meta-row{flex-direction:column;gap:12px}}

/* Cyberm8 site alignment overrides */
html, body { max-width: 100%; overflow-x: hidden; }
.compare-table, .compliance-table { display: block; max-width: 100%; overflow-x: auto; white-space: nowrap; }
.diagram-container svg { max-width: 100%; height: auto; }
@media (max-width: 768px) {
  .topnav { padding: 0 20px; }
  .topnav-meta { gap: 12px; min-width: 0; overflow: hidden; }
  .topnav-meta > span:not(.topnav-badge) { display: none; }
  .topnav-badge { max-width: 132px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
.topnav-logo { color: var(--text-primary); text-decoration: none; font-family: var(--font-mono); font-weight: 800; letter-spacing: 0; }
.topnav-link { color: var(--text-secondary); text-decoration: none; font-weight: 600; }
.topnav-link:hover { color: var(--accent); }
.hero h1, h2, h3, .hero-classification, .section-label, .topnav-badge, .callout-label, .compare-table th, .compliance-table th { font-family: var(--font-mono); }
.hero h1, h2, h3 { letter-spacing: 0; }
.hero h1 em, .hero h1 .g { background: none !important; -webkit-background-clip: initial !important; -webkit-text-fill-color: currentColor !important; color: var(--accent) !important; }
.callout { background: linear-gradient(145deg, rgba(0,240,255,0.06), transparent 54%), var(--bg-card) !important; border: 1px solid var(--border-accent) !important; border-radius: 8px; }
.callout.danger { border-color: rgba(255,107,95,0.48) !important; background: linear-gradient(145deg, rgba(255,107,95,0.08), transparent 54%), var(--bg-card) !important; }
.callout.warning { border-color: rgba(255,184,0,0.48) !important; background: linear-gradient(145deg, rgba(255,184,0,0.08), transparent 54%), var(--bg-card) !important; }


/* ===== Extracted from 09-cto-executive-decision-brief.html ===== */
:root{--bg-primary: #0B0F13;--bg-secondary: #101820;--bg-card: #1F2937;--bg-code: #081119;--accent: #00F0FF;--accent-dim: rgba(0,240,255,0.14);--accent-glow: rgba(0,240,255,0.28);--accent-blue:#00FF66;--accent-purple:#00FF66;--text-primary: #EEF7FB;--text-secondary: #B8C8D3;--text-muted: #7E919D;--border: #263443;--border-accent: rgba(0,240,255,0.28);--danger: #FF6B5F;--warning: #FFB800;--font-body:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;--font-mono:'JetBrains Mono','Fira Code',monospace}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg-primary);color:var(--text-primary);font-family:var(--font-body);line-height:1.7;font-size:16px;-webkit-font-smoothing:antialiased}
.topnav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(6,9,15,0.92);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);padding:0 40px;height:64px;display:flex;align-items:center;justify-content:space-between}
.topnav-logo{font-size:20px;font-weight:700;letter-spacing:-0.5px;color:var(--text-primary)}.topnav-logo span{color:var(--accent)}
.topnav-meta{display:flex;align-items:center;gap:24px;font-size:13px;color:var(--text-muted)}
.topnav-badge{background:rgba(0,255,102,0.15);color:var(--accent-purple);padding:4px 12px;border-radius:4px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1px}
.hero{margin-top:64px;padding:100px 40px 80px;background:radial-gradient(ellipse at 30% 40%,rgba(0,255,102,0.06) 0%,transparent 50%),radial-gradient(ellipse at 70% 70%,rgba(0,240,255,0.04) 0%,transparent 50%),var(--bg-primary);border-bottom:1px solid var(--border)}
.hero-inner{max-width:900px;margin:0 auto}
.hero-classification{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:2px;color:var(--accent-purple);margin-bottom:28px}.hero-classification::before{content:'';width:32px;height:2px;background:var(--accent-purple)}
.hero h1{font-size:38px;font-weight:800;line-height:1.15;letter-spacing:-1.5px;color:var(--text-primary);margin-bottom:24px}
.hero h1 em{font-style:normal;background:linear-gradient(135deg,var(--accent-purple),var(--accent-blue));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero h1 .g{background:linear-gradient(135deg,var(--accent),#00F0FF);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero-subtitle{font-size:18px;line-height:1.7;color:var(--text-secondary);max-width:720px;margin-bottom:36px}
.hero-meta-row{display:flex;gap:32px;flex-wrap:wrap;font-size:13px;color:var(--text-muted)}.hero-meta-row span{display:flex;align-items:center;gap:6px}.hero-meta-row .dot{width:6px;height:6px;border-radius:50%;background:var(--accent-purple)}
.content-wrap{max-width:820px;margin:0 auto;padding:60px 40px 100px}
.section-label{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:2.5px;color:var(--accent);margin-bottom:16px}.section-label::before{content:'';width:20px;height:2px;background:var(--accent)}
h2{font-size:28px;font-weight:700;letter-spacing:-0.8px;color:var(--text-primary);margin-bottom:20px;line-height:1.25}
h3{font-size:20px;font-weight:600;color:var(--text-primary);margin:36px 0 14px;letter-spacing:-0.3px}
p{color:var(--text-secondary);margin-bottom:18px}p strong{color:var(--text-primary);font-weight:600}
.section-block{margin-bottom:64px;padding-top:48px;border-top:1px solid var(--border)}.section-block:first-child{border-top:none;padding-top:0}
.callout{background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:24px 28px;margin:28px 0}.callout.danger{border-color:rgba(255,107,95,0.48);}.callout.warning{border-color:rgba(255,184,0,0.48);}.callout.purple{border-left-color:var(--accent-purple)}
.callout-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--accent);margin-bottom:10px}.callout.danger .callout-label{color:var(--danger)}.callout.warning .callout-label{color:var(--warning)}.callout.purple .callout-label{color:var(--accent-purple)}
.callout p{margin-bottom:0;font-size:15px}
.bullet-list{list-style:none;margin:20px 0}.bullet-list li{padding:8px 0 8px 24px;position:relative;color:var(--text-secondary)}.bullet-list li::before{content:'→';position:absolute;left:0;color:var(--accent);font-weight:600}

/* ── Executive Summary Box ── */
.exec-summary{background:linear-gradient(135deg,rgba(0,255,102,0.06),rgba(0,240,255,0.04));border:1px solid rgba(0,255,102,0.2);border-radius:12px;padding:36px 32px;margin:0 0 48px}
.exec-summary h3{margin-top:0;color:var(--accent-purple);font-size:16px;text-transform:uppercase;letter-spacing:1.5px}
.exec-summary .summary-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px;margin-top:20px}
.exec-summary .sg-item{text-align:center}
.exec-summary .sg-item .number{font-size:32px;font-weight:800;color:var(--accent);letter-spacing:-1px}
.exec-summary .sg-item .label{font-size:12px;color:var(--text-muted);margin-top:4px;text-transform:uppercase;letter-spacing:1px;font-weight:600}

/* ── Financial Table ── */
.fin-table{width:100%;border-collapse:collapse;margin:28px 0;font-size:14px}
.fin-table th{text-align:left;padding:14px 16px;background:var(--bg-card);color:var(--text-muted);font-size:11px;text-transform:uppercase;letter-spacing:1.5px;font-weight:700;border-bottom:2px solid var(--border)}
.fin-table td{padding:14px 16px;border-bottom:1px solid var(--border);color:var(--text-secondary)}.fin-table tr:hover td{background:var(--bg-card)}
.fin-table .total td{font-weight:700;color:var(--text-primary);border-top:2px solid var(--border);font-size:15px}
.fin-table .subtotal td{font-weight:600;color:var(--text-primary);background:rgba(17,24,39,0.5)}
.cost{color:var(--danger);font-weight:600}.saved{color:var(--accent);font-weight:600}

/* ── Risk Cards ── */
.risk-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:28px 0}
.risk-card{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:24px}
.risk-card h4{font-size:14px;font-weight:700;margin-bottom:8px}
.risk-card.high{border:1px solid rgba(255,107,95,0.48);}.risk-card.high h4{color:var(--danger)}
.risk-card.med{border:1px solid rgba(255,184,0,0.48);}.risk-card.med h4{color:var(--warning)}
.risk-card.low{}.risk-card.low h4{color:var(--accent)}
.risk-card p{font-size:13px;margin-bottom:0}

/* ── Board Slide ── */
.board-slide{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:40px 36px;margin:36px 0}
.board-slide h3{margin-top:0;text-align:center;font-size:22px;margin-bottom:28px}
.board-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.board-quadrant{padding:20px;border:1px solid var(--border);border-radius:8px}
.board-quadrant h4{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:12px}
.board-quadrant.q1 h4{color:var(--danger)}
.board-quadrant.q2 h4{color:var(--warning)}
.board-quadrant.q3 h4{color:var(--accent-blue)}
.board-quadrant.q4 h4{color:var(--accent)}
.board-quadrant p{font-size:13px;margin-bottom:6px}
.board-quadrant p:last-child{margin-bottom:0}

/* ── Numbered List ── */
.numbered-list{list-style:none;counter-reset:steps;margin:24px 0}
.numbered-list li{counter-increment:steps;padding:14px 0 14px 52px;position:relative;color:var(--text-secondary);border-bottom:1px solid rgba(38,52,67,0.55)}
.numbered-list li::before{content:counter(steps, decimal-leading-zero);position:absolute;left:0;top:14px;font-family:var(--font-mono);font-size:14px;font-weight:600;color:var(--accent)}

/* ── Decision Matrix ── */
.decision-table{width:100%;border-collapse:collapse;margin:28px 0;font-size:14px}
.decision-table th{text-align:left;padding:14px 16px;background:var(--bg-card);color:var(--text-muted);font-size:11px;text-transform:uppercase;letter-spacing:1.5px;font-weight:700;border-bottom:2px solid var(--border)}
.decision-table td{padding:14px 16px;border-bottom:1px solid var(--border);color:var(--text-secondary)}.decision-table tr:hover td{background:var(--bg-card)}

.cta-block{background:linear-gradient(135deg,rgba(0,255,102,0.08),rgba(0,240,255,0.06));border:1px solid var(--border-accent);border-radius:12px;padding:48px 40px;text-align:center;margin:64px 0 0}
.cta-block h2{font-size:26px;margin-bottom:14px}.cta-block p{max-width:600px;margin:0 auto 28px}
.cta-btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:var(--bg-primary);font-weight:700;font-size:14px;padding:14px 32px;border-radius:6px;text-decoration:none;transition:all 0.2s}.cta-btn:hover{box-shadow:0 0 24px var(--accent-glow);transform:translateY(-1px)}
.cta-btn-secondary{display:inline-flex;align-items:center;gap:8px;background:transparent;border:1px solid var(--border);color:var(--text-primary);font-weight:600;font-size:14px;padding:14px 28px;border-radius:6px;text-decoration:none;margin-left:12px;transition:all 0.2s}.cta-btn-secondary:hover{border-color:var(--accent)}
.cta-secondary{display:block;margin-top:14px;font-size:13px;color:var(--text-muted)}
footer{border-top:1px solid var(--border);padding:40px;text-align:center;font-size:13px;color:var(--text-muted)}footer a{color:var(--accent);text-decoration:none}
@media(max-width:768px){.hero{padding:80px 24px 60px}.hero h1{font-size:28px}.content-wrap{padding:40px 24px 80px}.exec-summary .summary-grid{grid-template-columns:1fr}.risk-row,.board-grid{grid-template-columns:1fr}.cta-block{padding:36px 24px}.cta-btn-secondary{margin-left:0;margin-top:12px}.hero-meta-row{flex-direction:column;gap:12px}}

/* Cyberm8 site alignment overrides */
html, body { max-width: 100%; overflow-x: hidden; }
.compare-table, .compliance-table { display: block; max-width: 100%; overflow-x: auto; white-space: nowrap; }
.diagram-container svg { max-width: 100%; height: auto; }
@media (max-width: 768px) {
  .topnav { padding: 0 20px; }
  .topnav-meta { gap: 12px; min-width: 0; overflow: hidden; }
  .topnav-meta > span:not(.topnav-badge) { display: none; }
  .topnav-badge { max-width: 132px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
.topnav-logo { color: var(--text-primary); text-decoration: none; font-family: var(--font-mono); font-weight: 800; letter-spacing: 0; }
.topnav-link { color: var(--text-secondary); text-decoration: none; font-weight: 600; }
.topnav-link:hover { color: var(--accent); }
.hero h1, h2, h3, .hero-classification, .section-label, .topnav-badge, .callout-label, .compare-table th, .compliance-table th { font-family: var(--font-mono); }
.hero h1, h2, h3 { letter-spacing: 0; }
.hero h1 em, .hero h1 .g { background: none !important; -webkit-background-clip: initial !important; -webkit-text-fill-color: currentColor !important; color: var(--accent) !important; }
.callout { background: linear-gradient(145deg, rgba(0,240,255,0.06), transparent 54%), var(--bg-card) !important; border: 1px solid var(--border-accent) !important; border-radius: 8px; }
.callout.danger { border-color: rgba(255,107,95,0.48) !important; background: linear-gradient(145deg, rgba(255,107,95,0.08), transparent 54%), var(--bg-card) !important; }
.callout.warning { border-color: rgba(255,184,0,0.48) !important; background: linear-gradient(145deg, rgba(255,184,0,0.08), transparent 54%), var(--bg-card) !important; }


/* ===== Extracted from 10-2am-sync-script-failed.html ===== */
:root{--bg-primary: #0B0F13;--bg-secondary: #101820;--bg-card: #1F2937;--bg-code: #081119;--accent: #00F0FF;--accent-dim: rgba(0,240,255,0.14);--accent-glow: rgba(0,240,255,0.28);--accent-blue:#00FF66;--accent-purple:#00FF66;--text-primary: #EEF7FB;--text-secondary: #B8C8D3;--text-muted: #7E919D;--border: #263443;--border-accent: rgba(0,240,255,0.28);--danger: #FF6B5F;--warning: #FFB800;--orange:#f97316;--font-body:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;--font-mono:'JetBrains Mono','Fira Code',monospace}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg-primary);color:var(--text-primary);font-family:var(--font-body);line-height:1.8;font-size:17px;-webkit-font-smoothing:antialiased}
.topnav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(6,9,15,0.92);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);padding:0 40px;height:64px;display:flex;align-items:center;justify-content:space-between}
.topnav-logo{font-size:20px;font-weight:700;letter-spacing:-0.5px;color:var(--text-primary)}.topnav-logo span{color:var(--accent)}
.topnav-meta{display:flex;align-items:center;gap:24px;font-size:13px;color:var(--text-muted)}
.topnav-badge{background:rgba(249,115,22,0.15);color:var(--orange);padding:4px 12px;border-radius:4px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1px}

.hero{margin-top:64px;padding:100px 40px 70px;background:radial-gradient(ellipse at 50% 60%,rgba(249,115,22,0.07) 0%,transparent 60%),var(--bg-primary);border-bottom:1px solid var(--border)}
.hero-inner{max-width:760px;margin:0 auto}
.hero-tag{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--orange);margin-bottom:24px;padding:4px 14px;border:1px solid rgba(249,115,22,0.3);border-radius:20px}
.hero h1{font-size:42px;font-weight:800;line-height:1.1;letter-spacing:-2px;color:var(--text-primary);margin-bottom:24px}
.hero h1 em{font-style:normal;color:var(--orange)}
.hero-subtitle{font-size:19px;line-height:1.8;color:var(--text-secondary);margin-bottom:28px}
.hero-who{font-size:13px;color:var(--text-muted);display:flex;gap:20px;flex-wrap:wrap}
.hero-who span{display:flex;align-items:center;gap:6px}.hero-who .dot{width:5px;height:5px;border-radius:50%;background:var(--orange)}

.content-wrap{max-width:680px;margin:0 auto;padding:56px 40px 100px}
h2{font-size:26px;font-weight:700;letter-spacing:-0.8px;color:var(--text-primary);margin:52px 0 18px;line-height:1.25}
h3{font-size:20px;font-weight:600;color:var(--text-primary);margin:36px 0 12px}
p{color:var(--text-secondary);margin-bottom:18px}
p strong{color:var(--text-primary);font-weight:600}
p em{color:var(--text-muted);font-style:italic}

/* Chat-style notification blocks */
.notification{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:20px 24px;margin:28px 0;display:flex;gap:16px;align-items:flex-start}
.notification .icon{font-size:24px;flex-shrink:0;margin-top:2px}
.notification .body{flex:1}
.notification .time{font-size:11px;color:var(--text-muted);font-family:var(--font-mono);margin-bottom:6px}
.notification .msg{font-size:15px;color:var(--text-secondary)}
.notification .msg strong{color:var(--text-primary)}
.notification.alert{border:1px solid rgba(255,107,95,0.48);}
.notification.calm{}

/* Terminal block */
.terminal{background:#0a0e14;border:1px solid #1a1f2e;border-radius:10px;overflow:hidden;margin:28px 0}
.terminal-bar{background:#111620;padding:8px 16px;display:flex;align-items:center;gap:8px;border-bottom:1px solid #1a1f2e}
.terminal-dot{width:10px;height:10px;border-radius:50%}.terminal-dot.r{background:#ff5f57}.terminal-dot.y{background:#febc2e}.terminal-dot.g{background:#28c840}
.terminal-title{font-size:11px;color:var(--text-muted);font-family:var(--font-mono);margin-left:8px}
.terminal-body{padding:20px;font-family:var(--font-mono);font-size:13px;line-height:1.9;color:#7a8ba5;overflow-x:auto;white-space:pre}
.terminal-body .prompt{color:var(--accent)}
.terminal-body .err{color:var(--danger)}
.terminal-body .warn{color:var(--warning)}
.terminal-body .ok{color:var(--accent)}
.terminal-body .dim{color:#3d4b5e}

/* Pullquote */
.pullquote{border:1px solid var(--border-accent);border-radius:8px;padding:20px 24px;margin:32px 0;font-size:20px;font-weight:600;line-height:1.5;color:var(--text-primary)}

/* Checklist */
.checklist{list-style:none;margin:24px 0}
.checklist li{padding:10px 0 10px 36px;position:relative;color:var(--text-secondary);font-size:16px}
.checklist li::before{content:'✓';position:absolute;left:0;color:var(--accent);font-weight:700;font-size:18px}

/* Callout */
.callout{background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:24px 28px;margin:28px 0}
.callout-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--accent);margin-bottom:10px}
.callout p{margin-bottom:0;font-size:15px}

.divider{border:none;border-top:1px solid var(--border);margin:48px 0}

/* CTA */
.cta-block{background:linear-gradient(135deg,rgba(249,115,22,0.06),rgba(0,240,255,0.06));border:1px solid rgba(249,115,22,0.2);border-radius:12px;padding:44px 36px;text-align:center;margin:56px 0 0}
.cta-block h2{font-size:24px;margin:0 0 12px}
.cta-block p{max-width:500px;margin:0 auto 24px;font-size:16px}
.cta-btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:var(--bg-primary);font-weight:700;font-size:14px;padding:14px 32px;border-radius:6px;text-decoration:none;transition:all 0.2s}.cta-btn:hover{box-shadow:0 0 24px var(--accent-glow);transform:translateY(-1px)}
.cta-secondary{display:block;margin-top:14px;font-size:13px;color:var(--text-muted)}

footer{border-top:1px solid var(--border);padding:40px;text-align:center;font-size:13px;color:var(--text-muted)}footer a{color:var(--accent);text-decoration:none}
@media(max-width:768px){.hero{padding:80px 24px 60px}.hero h1{font-size:30px}.content-wrap{padding:40px 24px 80px}.cta-block{padding:32px 20px}.hero-who{flex-direction:column;gap:8px}}

/* Cyberm8 site alignment overrides */
html, body { max-width: 100%; overflow-x: hidden; }
.compare-table, .compliance-table { display: block; max-width: 100%; overflow-x: auto; white-space: nowrap; }
.diagram-container svg { max-width: 100%; height: auto; }
@media (max-width: 768px) {
  .topnav { padding: 0 20px; }
  .topnav-meta { gap: 12px; min-width: 0; overflow: hidden; }
  .topnav-meta > span:not(.topnav-badge) { display: none; }
  .topnav-badge { max-width: 132px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
.topnav-logo { color: var(--text-primary); text-decoration: none; font-family: var(--font-mono); font-weight: 800; letter-spacing: 0; }
.topnav-link { color: var(--text-secondary); text-decoration: none; font-weight: 600; }
.topnav-link:hover { color: var(--accent); }
.hero h1, h2, h3, .hero-classification, .section-label, .topnav-badge, .callout-label, .compare-table th, .compliance-table th { font-family: var(--font-mono); }
.hero h1, h2, h3 { letter-spacing: 0; }
.hero h1 em, .hero h1 .g { background: none !important; -webkit-background-clip: initial !important; -webkit-text-fill-color: currentColor !important; color: var(--accent) !important; }
.callout { background: linear-gradient(145deg, rgba(0,240,255,0.06), transparent 54%), var(--bg-card) !important; border: 1px solid var(--border-accent) !important; border-radius: 8px; }
.callout.danger { border-color: rgba(255,107,95,0.48) !important; background: linear-gradient(145deg, rgba(255,107,95,0.08), transparent 54%), var(--bg-card) !important; }
.callout.warning { border-color: rgba(255,184,0,0.48) !important; background: linear-gradient(145deg, rgba(255,184,0,0.08), transparent 54%), var(--bg-card) !important; }


/* ===== Extracted from 11-youre-not-a-soc-analyst.html ===== */
:root{--bg-primary: #0B0F13;--bg-secondary: #101820;--bg-card: #1F2937;--bg-code: #081119;--accent: #00F0FF;--accent-dim: rgba(0,240,255,0.14);--accent-glow: rgba(0,240,255,0.28);--accent-blue:#00FF66;--accent-purple:#00FF66;--text-primary: #EEF7FB;--text-secondary: #B8C8D3;--text-muted: #7E919D;--border: #263443;--border-accent: rgba(0,240,255,0.28);--danger: #FF6B5F;--warning: #FFB800;--orange:#f97316;--pink:#ec4899;--font-body:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;--font-mono:'JetBrains Mono','Fira Code',monospace}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg-primary);color:var(--text-primary);font-family:var(--font-body);line-height:1.8;font-size:17px;-webkit-font-smoothing:antialiased}
.topnav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(6,9,15,0.92);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);padding:0 40px;height:64px;display:flex;align-items:center;justify-content:space-between}
.topnav-logo{font-size:20px;font-weight:700;letter-spacing:-0.5px;color:var(--text-primary)}.topnav-logo span{color:var(--accent)}
.topnav-meta{display:flex;align-items:center;gap:24px;font-size:13px;color:var(--text-muted)}
.topnav-badge{background:rgba(236,72,153,0.15);color:var(--pink);padding:4px 12px;border-radius:4px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1px}

.hero{margin-top:64px;padding:100px 40px 70px;background:radial-gradient(ellipse at 40% 50%,rgba(236,72,153,0.06) 0%,transparent 55%),var(--bg-primary);border-bottom:1px solid var(--border)}
.hero-inner{max-width:760px;margin:0 auto}
.hero-tag{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--pink);margin-bottom:24px;padding:4px 14px;border:1px solid rgba(236,72,153,0.3);border-radius:20px}
.hero h1{font-size:40px;font-weight:800;line-height:1.1;letter-spacing:-2px;color:var(--text-primary);margin-bottom:24px}
.hero h1 em{font-style:normal;color:var(--pink)}
.hero-subtitle{font-size:19px;line-height:1.8;color:var(--text-secondary);margin-bottom:28px}
.hero-who{font-size:13px;color:var(--text-muted);display:flex;gap:20px;flex-wrap:wrap}
.hero-who span{display:flex;align-items:center;gap:6px}.hero-who .dot{width:5px;height:5px;border-radius:50%;background:var(--pink)}

.content-wrap{max-width:680px;margin:0 auto;padding:56px 40px 100px}
h2{font-size:26px;font-weight:700;letter-spacing:-0.8px;color:var(--text-primary);margin:52px 0 18px;line-height:1.25}
h3{font-size:20px;font-weight:600;color:var(--text-primary);margin:36px 0 12px}
p{color:var(--text-secondary);margin-bottom:18px}
p strong{color:var(--text-primary);font-weight:600}

/* Dashboard mockup */
.dashboard-mock{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;overflow:hidden;margin:32px 0}
.dashboard-bar{background:#0f1525;padding:10px 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}
.dashboard-bar .title{font-size:12px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px}
.dashboard-bar .count{font-size:12px;font-family:var(--font-mono);color:var(--danger);font-weight:600}
.dashboard-body{padding:0}
.event-row{display:flex;align-items:center;gap:14px;padding:12px 20px;border-bottom:1px solid rgba(30,41,59,0.4);font-size:14px;transition:background 0.15s}
.event-row:hover{background:rgba(30,41,59,0.3)}
.event-row:last-child{border-bottom:none}
.event-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.event-dot.infra{background:var(--text-muted)}
.event-dot.threat{background:var(--danger)}
.event-time{font-family:var(--font-mono);font-size:11px;color:var(--text-muted);flex-shrink:0;width:52px}
.event-desc{flex:1;color:var(--text-secondary)}
.event-desc.boring{color:var(--text-muted)}
.event-desc.real{color:var(--text-primary);font-weight:500}
.event-tag{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:1px;padding:3px 8px;border-radius:3px;flex-shrink:0}
.event-tag.ack{background:rgba(100,116,139,0.15);color:var(--text-muted)}
.event-tag.investigate{background:rgba(239,68,68,0.15);color:var(--danger)}

.pullquote{border:1px solid var(--border-accent);border-radius:8px;padding:20px 24px;margin:36px 0;font-size:20px;font-weight:600;line-height:1.5;color:var(--text-primary)}

/* Counter animation */
.counter-block{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:32px;margin:32px 0;text-align:center}
.counter-row{display:flex;justify-content:center;gap:48px;flex-wrap:wrap;margin-bottom:20px}
.counter-item .number{font-size:48px;font-weight:800;letter-spacing:-2px;font-family:var(--font-mono)}
.counter-item .number.bad{color:var(--danger)}
.counter-item .number.good{color:var(--accent)}
.counter-item .label{font-size:12px;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-muted);font-weight:600;margin-top:4px}
.counter-caption{font-size:14px;color:var(--text-muted);font-style:italic}

.divider{border:none;border-top:1px solid var(--border);margin:48px 0}

.callout{background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:24px 28px;margin:28px 0}
.callout-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--accent);margin-bottom:10px}
.callout p{margin-bottom:0;font-size:15px}

.checklist{list-style:none;margin:24px 0}
.checklist li{padding:10px 0 10px 36px;position:relative;color:var(--text-secondary);font-size:16px}
.checklist li::before{content:'✓';position:absolute;left:0;color:var(--accent);font-weight:700;font-size:18px}

.cta-block{background:linear-gradient(135deg,rgba(236,72,153,0.06),rgba(0,240,255,0.06));border:1px solid rgba(236,72,153,0.2);border-radius:12px;padding:44px 36px;text-align:center;margin:56px 0 0}
.cta-block h2{font-size:24px;margin:0 0 12px}
.cta-block p{max-width:500px;margin:0 auto 24px;font-size:16px}
.cta-btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:var(--bg-primary);font-weight:700;font-size:14px;padding:14px 32px;border-radius:6px;text-decoration:none;transition:all 0.2s}.cta-btn:hover{box-shadow:0 0 24px var(--accent-glow);transform:translateY(-1px)}
.cta-secondary{display:block;margin-top:14px;font-size:13px;color:var(--text-muted)}

footer{border-top:1px solid var(--border);padding:40px;text-align:center;font-size:13px;color:var(--text-muted)}footer a{color:var(--accent);text-decoration:none}
@media(max-width:768px){.hero{padding:80px 24px 60px}.hero h1{font-size:30px}.content-wrap{padding:40px 24px 80px}.counter-row{gap:24px}.cta-block{padding:32px 20px}.hero-who{flex-direction:column;gap:8px}}

/* Cyberm8 site alignment overrides */
html, body { max-width: 100%; overflow-x: hidden; }
.compare-table, .compliance-table { display: block; max-width: 100%; overflow-x: auto; white-space: nowrap; }
.diagram-container svg { max-width: 100%; height: auto; }
@media (max-width: 768px) {
  .topnav { padding: 0 20px; }
  .topnav-meta { gap: 12px; min-width: 0; overflow: hidden; }
  .topnav-meta > span:not(.topnav-badge) { display: none; }
  .topnav-badge { max-width: 132px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
.topnav-logo { color: var(--text-primary); text-decoration: none; font-family: var(--font-mono); font-weight: 800; letter-spacing: 0; }
.topnav-link { color: var(--text-secondary); text-decoration: none; font-weight: 600; }
.topnav-link:hover { color: var(--accent); }
.hero h1, h2, h3, .hero-classification, .section-label, .topnav-badge, .callout-label, .compare-table th, .compliance-table th { font-family: var(--font-mono); }
.hero h1, h2, h3 { letter-spacing: 0; }
.hero h1 em, .hero h1 .g { background: none !important; -webkit-background-clip: initial !important; -webkit-text-fill-color: currentColor !important; color: var(--accent) !important; }
.callout { background: linear-gradient(145deg, rgba(0,240,255,0.06), transparent 54%), var(--bg-card) !important; border: 1px solid var(--border-accent) !important; border-radius: 8px; }
.callout.danger { border-color: rgba(255,107,95,0.48) !important; background: linear-gradient(145deg, rgba(255,107,95,0.08), transparent 54%), var(--bg-card) !important; }
.callout.warning { border-color: rgba(255,184,0,0.48) !important; background: linear-gradient(145deg, rgba(255,184,0,0.08), transparent 54%), var(--bg-card) !important; }


/* ===== Extracted from 12-dear-checkpoint-dear-fortinet.html ===== */
:root{--bg-primary: #0B0F13;--bg-secondary: #101820;--bg-card: #1F2937;--bg-code: #081119;--accent: #00F0FF;--accent-dim: rgba(0,240,255,0.14);--accent-glow: rgba(0,240,255,0.28);--accent-blue:#00FF66;--accent-purple:#00FF66;--text-primary: #EEF7FB;--text-secondary: #B8C8D3;--text-muted: #7E919D;--border: #263443;--border-accent: rgba(0,240,255,0.28);--danger: #FF6B5F;--warning: #FFB800;--orange:#f97316;--yellow:#eab308;--font-body:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;--font-mono:'JetBrains Mono','Fira Code',monospace}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg-primary);color:var(--text-primary);font-family:var(--font-body);line-height:1.8;font-size:17px;-webkit-font-smoothing:antialiased}
.topnav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(6,9,15,0.92);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);padding:0 40px;height:64px;display:flex;align-items:center;justify-content:space-between}
.topnav-logo{font-size:20px;font-weight:700;letter-spacing:-0.5px;color:var(--text-primary)}.topnav-logo span{color:var(--accent)}
.topnav-meta{display:flex;align-items:center;gap:24px;font-size:13px;color:var(--text-muted)}
.topnav-badge{background:rgba(234,179,8,0.15);color:var(--yellow);padding:4px 12px;border-radius:4px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1px}

.hero{margin-top:64px;padding:100px 40px 70px;background:radial-gradient(ellipse at 60% 40%,rgba(234,179,8,0.06) 0%,transparent 55%),var(--bg-primary);border-bottom:1px solid var(--border)}
.hero-inner{max-width:760px;margin:0 auto}
.hero-tag{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--yellow);margin-bottom:24px;padding:4px 14px;border:1px solid rgba(234,179,8,0.3);border-radius:20px}
.hero h1{font-size:38px;font-weight:800;line-height:1.1;letter-spacing:-2px;color:var(--text-primary);margin-bottom:24px}
.hero h1 em{font-style:normal;color:var(--yellow)}
.hero-subtitle{font-size:19px;line-height:1.8;color:var(--text-secondary);margin-bottom:28px}
.hero-who{font-size:13px;color:var(--text-muted);display:flex;gap:20px;flex-wrap:wrap}
.hero-who span{display:flex;align-items:center;gap:6px}.hero-who .dot{width:5px;height:5px;border-radius:50%;background:var(--yellow)}

.content-wrap{max-width:680px;margin:0 auto;padding:56px 40px 100px}
h2{font-size:26px;font-weight:700;letter-spacing:-0.8px;color:var(--text-primary);margin:52px 0 18px;line-height:1.25}
h3{font-size:20px;font-weight:600;color:var(--text-primary);margin:36px 0 12px}
p{color:var(--text-secondary);margin-bottom:18px}
p strong{color:var(--text-primary);font-weight:600}

.divider{border:none;border-top:1px solid var(--border);margin:48px 0}
.pullquote{border:1px solid var(--border-accent);border-radius:8px;padding:20px 24px;margin:36px 0;font-size:20px;font-weight:600;line-height:1.5;color:var(--text-primary)}

/* Code comparison blocks */
.code-compare{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:28px 0;border:1px solid var(--border);border-radius:10px;overflow:hidden}
.code-compare.triple{grid-template-columns:1fr 1fr 1fr}
.code-col{padding:0;overflow:hidden}
.code-col-header{padding:10px 16px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;border-bottom:1px solid var(--border)}
.code-col:not(:last-child){border-right:1px solid var(--border)}
.code-col:nth-child(1) .code-col-header{color:var(--danger);background:rgba(239,68,68,0.06)}
.code-col:nth-child(2) .code-col-header{color:var(--warning);background:rgba(245,158,11,0.06)}
.code-col:nth-child(3) .code-col-header{color:var(--accent-blue);background:rgba(0,255,102,0.06)}
.code-col-body{padding:14px 16px;font-family:var(--font-mono);font-size:11px;line-height:1.7;color:var(--text-muted);background:var(--bg-code);min-height:200px;white-space:pre;overflow-x:auto}
.code-col-body .k{color:var(--accent)}.code-col-body .s{color:var(--warning)}.code-col-body .c{color:#3d4b5e;font-style:italic}.code-col-body .e{color:var(--danger)}

/* Frustration counter */
.frustration-list{list-style:none;margin:28px 0;counter-reset:rage}
.frustration-list li{counter-increment:rage;padding:14px 0 14px 56px;position:relative;color:var(--text-secondary);border-bottom:1px solid rgba(30,41,59,0.4);font-size:16px}
.frustration-list li::before{content:'#' counter(rage);position:absolute;left:0;top:14px;font-family:var(--font-mono);font-size:14px;font-weight:700;color:var(--yellow)}

/* The "same thing" block */
.same-thing{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:28px;margin:32px 0;text-align:center}
.same-thing .concept{font-size:14px;color:var(--text-muted);text-transform:uppercase;letter-spacing:2px;font-weight:700;margin-bottom:16px}
.same-thing .translations{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.same-thing .trans-item{background:var(--bg-code);border:1px solid var(--border);border-radius:6px;padding:12px;font-family:var(--font-mono);font-size:12px}
.same-thing .trans-item .vendor{font-size:10px;text-transform:uppercase;letter-spacing:1px;font-weight:600;margin-bottom:6px;font-family:var(--font-body)}
.same-thing .trans-item:nth-child(1) .vendor{color:var(--danger)}
.same-thing .trans-item:nth-child(2) .vendor{color:var(--warning)}
.same-thing .trans-item:nth-child(3) .vendor{color:var(--accent-blue)}
.same-thing .trans-item .val{color:var(--text-secondary);word-break:break-all}

.callout{background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:24px 28px;margin:28px 0}
.callout-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--accent);margin-bottom:10px}
.callout p{margin-bottom:0;font-size:15px}

/* The Cyberm8 way */
.cyberm8-way{background:rgba(0,240,255,0.04);border:1px solid rgba(0,240,255,0.2);border-radius:12px;padding:28px;margin:32px 0}
.cyberm8-way h3{margin-top:0;color:var(--accent)}
.cyberm8-code{background:var(--bg-code);border:1px solid var(--border);border-radius:8px;padding:18px 20px;margin:16px 0;font-family:var(--font-mono);font-size:13px;line-height:1.8;color:var(--text-secondary);white-space:pre;overflow-x:auto}
.cyberm8-code .k{color:var(--accent)}.cyberm8-code .s{color:var(--warning)}.cyberm8-code .c{color:var(--text-muted);font-style:italic}

.cta-block{background:linear-gradient(135deg,rgba(234,179,8,0.06),rgba(0,240,255,0.06));border:1px solid rgba(234,179,8,0.2);border-radius:12px;padding:44px 36px;text-align:center;margin:56px 0 0}
.cta-block h2{font-size:24px;margin:0 0 12px}
.cta-block p{max-width:520px;margin:0 auto 24px;font-size:16px}
.cta-btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:var(--bg-primary);font-weight:700;font-size:14px;padding:14px 32px;border-radius:6px;text-decoration:none;transition:all 0.2s}.cta-btn:hover{box-shadow:0 0 24px var(--accent-glow);transform:translateY(-1px)}
.cta-secondary{display:block;margin-top:14px;font-size:13px;color:var(--text-muted)}

footer{border-top:1px solid var(--border);padding:40px;text-align:center;font-size:13px;color:var(--text-muted)}footer a{color:var(--accent);text-decoration:none}
@media(max-width:768px){.hero{padding:80px 24px 60px}.hero h1{font-size:28px}.content-wrap{padding:40px 24px 80px}.code-compare,.code-compare.triple{grid-template-columns:1fr}.code-col:not(:last-child){border-right:none;border-bottom:1px solid var(--border)}.same-thing .translations{grid-template-columns:1fr}.cta-block{padding:32px 20px}.hero-who{flex-direction:column;gap:8px}}

/* Cyberm8 site alignment overrides */
html, body { max-width: 100%; overflow-x: hidden; }
.compare-table, .compliance-table { display: block; max-width: 100%; overflow-x: auto; white-space: nowrap; }
.diagram-container svg { max-width: 100%; height: auto; }
@media (max-width: 768px) {
  .topnav { padding: 0 20px; }
  .topnav-meta { gap: 12px; min-width: 0; overflow: hidden; }
  .topnav-meta > span:not(.topnav-badge) { display: none; }
  .topnav-badge { max-width: 132px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
.topnav-logo { color: var(--text-primary); text-decoration: none; font-family: var(--font-mono); font-weight: 800; letter-spacing: 0; }
.topnav-link { color: var(--text-secondary); text-decoration: none; font-weight: 600; }
.topnav-link:hover { color: var(--accent); }
.hero h1, h2, h3, .hero-classification, .section-label, .topnav-badge, .callout-label, .compare-table th, .compliance-table th { font-family: var(--font-mono); }
.hero h1, h2, h3 { letter-spacing: 0; }
.hero h1 em, .hero h1 .g { background: none !important; -webkit-background-clip: initial !important; -webkit-text-fill-color: currentColor !important; color: var(--accent) !important; }
.callout { background: linear-gradient(145deg, rgba(0,240,255,0.06), transparent 54%), var(--bg-card) !important; border: 1px solid var(--border-accent) !important; border-radius: 8px; }
.callout.danger { border-color: rgba(255,107,95,0.48) !important; background: linear-gradient(145deg, rgba(255,107,95,0.08), transparent 54%), var(--bg-card) !important; }
.callout.warning { border-color: rgba(255,184,0,0.48) !important; background: linear-gradient(145deg, rgba(255,184,0,0.08), transparent 54%), var(--bg-card) !important; }


/* ===== Extracted from 13-the-spreadsheet-you-hate.html ===== */
:root{--bg-primary: #0B0F13;--bg-secondary: #101820;--bg-card: #1F2937;--bg-code: #081119;--accent: #00F0FF;--accent-dim: rgba(0,240,255,0.14);--accent-glow: rgba(0,240,255,0.28);--accent-blue:#00FF66;--accent-purple:#00FF66;--text-primary: #EEF7FB;--text-secondary: #B8C8D3;--text-muted: #7E919D;--border: #263443;--border-accent: rgba(0,240,255,0.28);--danger: #FF6B5F;--warning: #FFB800;--teal:#14b8a6;--font-body:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;--font-mono:'JetBrains Mono','Fira Code',monospace}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg-primary);color:var(--text-primary);font-family:var(--font-body);line-height:1.8;font-size:17px;-webkit-font-smoothing:antialiased}
.topnav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(6,9,15,0.92);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);padding:0 40px;height:64px;display:flex;align-items:center;justify-content:space-between}
.topnav-logo{font-size:20px;font-weight:700;letter-spacing:-0.5px;color:var(--text-primary)}.topnav-logo span{color:var(--accent)}
.topnav-meta{display:flex;align-items:center;gap:24px;font-size:13px;color:var(--text-muted)}
.topnav-badge{background:rgba(20,184,166,0.15);color:var(--teal);padding:4px 12px;border-radius:4px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1px}

.hero{margin-top:64px;padding:100px 40px 70px;background:radial-gradient(ellipse at 50% 50%,rgba(20,184,166,0.06) 0%,transparent 55%),var(--bg-primary);border-bottom:1px solid var(--border)}
.hero-inner{max-width:760px;margin:0 auto}
.hero-tag{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--teal);margin-bottom:24px;padding:4px 14px;border:1px solid rgba(20,184,166,0.3);border-radius:20px}
.hero h1{font-size:38px;font-weight:800;line-height:1.1;letter-spacing:-2px;color:var(--text-primary);margin-bottom:24px}
.hero h1 em{font-style:normal;color:var(--teal)}
.hero-subtitle{font-size:19px;line-height:1.8;color:var(--text-secondary);margin-bottom:28px}
.hero-who{font-size:13px;color:var(--text-muted);display:flex;gap:20px;flex-wrap:wrap}
.hero-who span{display:flex;align-items:center;gap:6px}.hero-who .dot{width:5px;height:5px;border-radius:50%;background:var(--teal)}

.content-wrap{max-width:680px;margin:0 auto;padding:56px 40px 100px}
h2{font-size:26px;font-weight:700;letter-spacing:-0.8px;color:var(--text-primary);margin:52px 0 18px;line-height:1.25}
h3{font-size:20px;font-weight:600;color:var(--text-primary);margin:36px 0 12px}
p{color:var(--text-secondary);margin-bottom:18px}
p strong{color:var(--text-primary);font-weight:600}
.divider{border:none;border-top:1px solid var(--border);margin:48px 0}
.pullquote{border:1px solid var(--border-accent);padding:16px 0 16px 24px;margin:36px 0;font-size:20px;font-weight:600;line-height:1.5;color:var(--text-primary)}

/* Spreadsheet mockup */
.spreadsheet{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;overflow:hidden;margin:32px 0}
.spreadsheet-bar{background:#0f1525;padding:10px 20px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--border)}
.spreadsheet-bar .file-icon{width:16px;height:16px;background:rgba(20,184,166,0.2);border-radius:2px;display:flex;align-items:center;justify-content:center;font-size:8px;color:var(--teal);font-weight:700}
.spreadsheet-bar .file-name{font-size:12px;color:var(--text-muted);font-family:var(--font-mono)}
.spreadsheet-bar .file-shame{font-size:10px;color:var(--text-muted);font-style:italic;margin-left:auto}
.ss-table{width:100%;border-collapse:collapse;font-size:13px}
.ss-table th{text-align:left;padding:8px 14px;background:#081119;color:var(--text-muted);font-size:10px;text-transform:uppercase;letter-spacing:1.5px;font-weight:700;border-bottom:1px solid var(--border);font-family:var(--font-mono)}
.ss-table th:first-child{width:32px;text-align:center}
.ss-table td{padding:8px 14px;border-bottom:1px solid rgba(30,41,59,0.3);color:var(--text-secondary);font-size:12px}
.ss-table td:first-child{text-align:center;color:var(--text-muted);font-family:var(--font-mono);font-size:10px;font-weight:600}
.ss-table tr:hover td{background:rgba(30,41,59,0.2)}
.ss-ok{color:var(--accent)}
.ss-warn{color:var(--warning)}
.ss-fail{color:var(--danger)}
.ss-unknown{color:var(--text-muted);font-style:italic}

/* Time tracker */
.time-block{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:28px;margin:32px 0}
.time-block h3{margin-top:0;font-size:16px;text-transform:uppercase;letter-spacing:1px;color:var(--teal);margin-bottom:20px}
.time-bar{margin-bottom:16px}
.time-bar-label{display:flex;justify-content:space-between;font-size:13px;margin-bottom:6px}
.time-bar-label .task{color:var(--text-secondary)}
.time-bar-label .hours{color:var(--text-primary);font-weight:600;font-family:var(--font-mono)}
.time-bar-track{height:8px;background:rgba(38,52,67,0.55);border-radius:4px;overflow:hidden}
.time-bar-fill{height:100%;border-radius:4px}
.time-bar-fill.waste{background:var(--danger)}
.time-bar-fill.ok{background:var(--accent)}
.time-bar-fill.meh{background:var(--warning)}
.time-total{display:flex;justify-content:space-between;padding-top:16px;border-top:1px solid var(--border);font-size:14px;font-weight:700}
.time-total .waste{color:var(--danger)}

.callout{background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:24px 28px;margin:28px 0}
.callout.teal{border-left-color:var(--teal)}
.callout-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--accent);margin-bottom:10px}
.callout.teal .callout-label{color:var(--teal)}
.callout p{margin-bottom:0;font-size:15px}

.checklist{list-style:none;margin:24px 0}
.checklist li{padding:10px 0 10px 36px;position:relative;color:var(--text-secondary);font-size:16px}
.checklist li::before{content:'✓';position:absolute;left:0;color:var(--accent);font-weight:700;font-size:18px}

/* Before/After mini */
.ba-mini{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:32px 0;border:1px solid var(--border);border-radius:10px;overflow:hidden}
.ba-side{padding:24px}
.ba-side.before{background:rgba(239,68,68,0.03);border-right:1px solid var(--border)}
.ba-side.after{background:rgba(0,240,255,0.03)}
.ba-side h4{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:8px}
.ba-side.before h4{color:var(--danger)}
.ba-side.after h4{color:var(--accent)}
.ba-side .big{font-size:36px;font-weight:800;margin-bottom:4px;letter-spacing:-1px}
.ba-side.before .big{color:var(--danger)}
.ba-side.after .big{color:var(--accent)}
.ba-side p{font-size:13px;margin:0}

.cta-block{background:linear-gradient(135deg,rgba(20,184,166,0.06),rgba(0,240,255,0.06));border:1px solid rgba(20,184,166,0.2);border-radius:12px;padding:44px 36px;text-align:center;margin:56px 0 0}
.cta-block h2{font-size:24px;margin:0 0 12px}
.cta-block p{max-width:520px;margin:0 auto 24px;font-size:16px}
.cta-btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:var(--bg-primary);font-weight:700;font-size:14px;padding:14px 32px;border-radius:6px;text-decoration:none;transition:all 0.2s}.cta-btn:hover{box-shadow:0 0 24px var(--accent-glow);transform:translateY(-1px)}
.cta-secondary{display:block;margin-top:14px;font-size:13px;color:var(--text-muted)}

footer{border-top:1px solid var(--border);padding:40px;text-align:center;font-size:13px;color:var(--text-muted)}footer a{color:var(--accent);text-decoration:none}
@media(max-width:768px){.hero{padding:80px 24px 60px}.hero h1{font-size:28px}.content-wrap{padding:40px 24px 80px}.ba-mini{grid-template-columns:1fr}.ba-side.before{border-right:none;border-bottom:1px solid var(--border)}.cta-block{padding:32px 20px}.hero-who{flex-direction:column;gap:8px}}

/* Cyberm8 site alignment overrides */
html, body { max-width: 100%; overflow-x: hidden; }
.compare-table, .compliance-table { display: block; max-width: 100%; overflow-x: auto; white-space: nowrap; }
.diagram-container svg { max-width: 100%; height: auto; }
@media (max-width: 768px) {
  .topnav { padding: 0 20px; }
  .topnav-meta { gap: 12px; min-width: 0; overflow: hidden; }
  .topnav-meta > span:not(.topnav-badge) { display: none; }
  .topnav-badge { max-width: 132px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
.topnav-logo { color: var(--text-primary); text-decoration: none; font-family: var(--font-mono); font-weight: 800; letter-spacing: 0; }
.topnav-link { color: var(--text-secondary); text-decoration: none; font-weight: 600; }
.topnav-link:hover { color: var(--accent); }
.hero h1, h2, h3, .hero-classification, .section-label, .topnav-badge, .callout-label, .compare-table th, .compliance-table th { font-family: var(--font-mono); }
.hero h1, h2, h3 { letter-spacing: 0; }
.hero h1 em, .hero h1 .g { background: none !important; -webkit-background-clip: initial !important; -webkit-text-fill-color: currentColor !important; color: var(--accent) !important; }
.callout { background: linear-gradient(145deg, rgba(0,240,255,0.06), transparent 54%), var(--bg-card) !important; border: 1px solid var(--border-accent) !important; border-radius: 8px; }
.callout.danger { border-color: rgba(255,107,95,0.48) !important; background: linear-gradient(145deg, rgba(255,107,95,0.08), transparent 54%), var(--bg-card) !important; }
.callout.warning { border-color: rgba(255,184,0,0.48) !important; background: linear-gradient(145deg, rgba(255,184,0,0.08), transparent 54%), var(--bg-card) !important; }


/* ===== Extracted from 14-how-to-pitch-your-boss.html ===== */
:root{--bg-primary: #0B0F13;--bg-secondary: #101820;--bg-card: #1F2937;--bg-code: #081119;--accent: #00F0FF;--accent-dim: rgba(0,240,255,0.14);--accent-glow: rgba(0,240,255,0.28);--accent-blue:#00FF66;--accent-purple:#00FF66;--text-primary: #EEF7FB;--text-secondary: #B8C8D3;--text-muted: #7E919D;--border: #263443;--border-accent: rgba(0,240,255,0.28);--danger: #FF6B5F;--warning: #FFB800;--violet:#7c3aed;--font-body:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;--font-mono:'JetBrains Mono','Fira Code',monospace}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg-primary);color:var(--text-primary);font-family:var(--font-body);line-height:1.8;font-size:17px;-webkit-font-smoothing:antialiased}
.topnav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(6,9,15,0.92);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);padding:0 40px;height:64px;display:flex;align-items:center;justify-content:space-between}
.topnav-logo{font-size:20px;font-weight:700;letter-spacing:-0.5px;color:var(--text-primary)}.topnav-logo span{color:var(--accent)}
.topnav-meta{display:flex;align-items:center;gap:24px;font-size:13px;color:var(--text-muted)}
.topnav-badge{background:rgba(124,58,237,0.15);color:var(--violet);padding:4px 12px;border-radius:4px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1px}

.hero{margin-top:64px;padding:100px 40px 70px;background:radial-gradient(ellipse at 40% 45%,rgba(124,58,237,0.07) 0%,transparent 55%),var(--bg-primary);border-bottom:1px solid var(--border)}
.hero-inner{max-width:760px;margin:0 auto}
.hero-tag{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--violet);margin-bottom:24px;padding:4px 14px;border:1px solid rgba(124,58,237,0.3);border-radius:20px}
.hero h1{font-size:36px;font-weight:800;line-height:1.1;letter-spacing:-2px;color:var(--text-primary);margin-bottom:24px}
.hero h1 em{font-style:normal;color:var(--violet)}
.hero h1 .g{color:var(--accent)}
.hero-subtitle{font-size:19px;line-height:1.8;color:var(--text-secondary);margin-bottom:28px}
.hero-who{font-size:13px;color:var(--text-muted);display:flex;gap:20px;flex-wrap:wrap}
.hero-who span{display:flex;align-items:center;gap:6px}.hero-who .dot{width:5px;height:5px;border-radius:50%;background:var(--violet)}

.content-wrap{max-width:680px;margin:0 auto;padding:56px 40px 100px}
h2{font-size:26px;font-weight:700;letter-spacing:-0.8px;color:var(--text-primary);margin:52px 0 18px;line-height:1.25}
h3{font-size:20px;font-weight:600;color:var(--text-primary);margin:36px 0 12px}
p{color:var(--text-secondary);margin-bottom:18px}
p strong{color:var(--text-primary);font-weight:600}
.divider{border:none;border-top:1px solid var(--border);margin:48px 0}
.pullquote{border:1px solid rgba(0,255,102,0.38);padding:16px 0 16px 24px;margin:36px 0;font-size:20px;font-weight:600;line-height:1.5;color:var(--text-primary)}

/* Step cards */
.step-card{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:28px;margin:28px 0;position:relative}
.step-card::before{content:attr(data-step);position:absolute;top:-14px;left:24px;background:var(--violet);color:white;font-size:11px;font-weight:700;padding:4px 14px;border-radius:20px;letter-spacing:1px;text-transform:uppercase}
.step-card h3{margin-top:8px;color:var(--text-primary)}
.step-card p{font-size:15px}

/* Script template */
.script-block{background:var(--bg-code);border:1px solid var(--border);border-radius:10px;overflow:hidden;margin:28px 0}
.script-header{background:#111620;padding:10px 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}
.script-header .label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--violet)}
.script-header .hint{font-size:11px;color:var(--text-muted);font-style:italic}
.script-body{padding:24px;font-size:15px;line-height:2;color:var(--text-secondary)}
.script-body .blank{background:rgba(124,58,237,0.15);color:var(--violet);padding:2px 8px;border-radius:4px;font-family:var(--font-mono);font-size:13px;font-weight:600}
.script-body .emphasis{color:var(--text-primary);font-weight:600}

/* Do / Don't grid */
.do-dont{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:28px 0;border:1px solid var(--border);border-radius:10px;overflow:hidden}
.do-side,.dont-side{padding:24px}
.dont-side{background:rgba(239,68,68,0.03);border-right:1px solid var(--border)}
.do-side{background:rgba(0,240,255,0.03)}
.do-side h4,.dont-side h4{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:16px}
.dont-side h4{color:var(--danger)}
.do-side h4{color:var(--accent)}
.do-item,.dont-item{padding:8px 0 8px 24px;position:relative;font-size:14px;color:var(--text-secondary);margin-bottom:6px}
.dont-item::before{content:'✕';position:absolute;left:0;color:var(--danger);font-weight:700}
.do-item::before{content:'✓';position:absolute;left:0;color:var(--accent);font-weight:700}

/* Objection handler */
.objection{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;margin:24px 0;overflow:hidden}
.objection-q{padding:16px 24px;border-bottom:1px solid var(--border);display:flex;align-items:flex-start;gap:12px}
.objection-q .icon{color:var(--danger);font-size:16px;font-weight:700;flex-shrink:0;margin-top:2px}
.objection-q .text{font-size:15px;font-weight:600;color:var(--text-primary);font-style:italic}
.objection-a{padding:16px 24px;display:flex;align-items:flex-start;gap:12px}
.objection-a .icon{color:var(--accent);font-size:16px;font-weight:700;flex-shrink:0;margin-top:2px}
.objection-a .text{font-size:15px;color:var(--text-secondary)}

.callout{background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:24px 28px;margin:28px 0}
.callout.violet{border-left-color:var(--violet)}
.callout-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--accent);margin-bottom:10px}
.callout.violet .callout-label{color:var(--violet)}
.callout p{margin-bottom:0;font-size:15px}

.checklist{list-style:none;margin:24px 0}
.checklist li{padding:10px 0 10px 36px;position:relative;color:var(--text-secondary);font-size:16px}
.checklist li::before{content:'✓';position:absolute;left:0;color:var(--accent);font-weight:700;font-size:18px}

/* Email template */
.email-block{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;overflow:hidden;margin:28px 0}
.email-header{background:#0f1525;padding:12px 20px;border-bottom:1px solid var(--border)}
.email-field{display:flex;gap:8px;font-size:12px;margin-bottom:4px}
.email-field:last-child{margin-bottom:0}
.email-field .label{color:var(--text-muted);font-weight:600;width:50px}
.email-field .value{color:var(--text-secondary)}
.email-body{padding:24px;font-size:15px;line-height:1.9;color:var(--text-secondary)}
.email-body p{margin-bottom:14px}
.email-body p:last-child{margin-bottom:0}

.cta-block{background:linear-gradient(135deg,rgba(124,58,237,0.06),rgba(0,240,255,0.06));border:1px solid rgba(124,58,237,0.2);border-radius:12px;padding:44px 36px;text-align:center;margin:56px 0 0}
.cta-block h2{font-size:24px;margin:0 0 12px}
.cta-block p{max-width:520px;margin:0 auto 24px;font-size:16px}
.cta-btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:var(--bg-primary);font-weight:700;font-size:14px;padding:14px 32px;border-radius:6px;text-decoration:none;transition:all 0.2s}.cta-btn:hover{box-shadow:0 0 24px var(--accent-glow);transform:translateY(-1px)}
.cta-secondary{display:block;margin-top:14px;font-size:13px;color:var(--text-muted)}

footer{border-top:1px solid var(--border);padding:40px;text-align:center;font-size:13px;color:var(--text-muted)}footer a{color:var(--accent);text-decoration:none}
@media(max-width:768px){.hero{padding:80px 24px 60px}.hero h1{font-size:28px}.content-wrap{padding:40px 24px 80px}.do-dont{grid-template-columns:1fr}.dont-side{border-right:none;border-bottom:1px solid var(--border)}.cta-block{padding:32px 20px}.hero-who{flex-direction:column;gap:8px}}

/* Cyberm8 site alignment overrides */
html, body { max-width: 100%; overflow-x: hidden; }
.compare-table, .compliance-table { display: block; max-width: 100%; overflow-x: auto; white-space: nowrap; }
.diagram-container svg { max-width: 100%; height: auto; }
@media (max-width: 768px) {
  .topnav { padding: 0 20px; }
  .topnav-meta { gap: 12px; min-width: 0; overflow: hidden; }
  .topnav-meta > span:not(.topnav-badge) { display: none; }
  .topnav-badge { max-width: 132px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
.topnav-logo { color: var(--text-primary); text-decoration: none; font-family: var(--font-mono); font-weight: 800; letter-spacing: 0; }
.topnav-link { color: var(--text-secondary); text-decoration: none; font-weight: 600; }
.topnav-link:hover { color: var(--accent); }
.hero h1, h2, h3, .hero-classification, .section-label, .topnav-badge, .callout-label, .compare-table th, .compliance-table th { font-family: var(--font-mono); }
.hero h1, h2, h3 { letter-spacing: 0; }
.hero h1 em, .hero h1 .g { background: none !important; -webkit-background-clip: initial !important; -webkit-text-fill-color: currentColor !important; color: var(--accent) !important; }
.callout { background: linear-gradient(145deg, rgba(0,240,255,0.06), transparent 54%), var(--bg-card) !important; border: 1px solid var(--border-accent) !important; border-radius: 8px; }
.callout.danger { border-color: rgba(255,107,95,0.48) !important; background: linear-gradient(145deg, rgba(255,107,95,0.08), transparent 54%), var(--bg-card) !important; }
.callout.warning { border-color: rgba(255,184,0,0.48) !important; background: linear-gradient(145deg, rgba(255,184,0,0.08), transparent 54%), var(--bg-card) !important; }

/* ===== Extracted from 01-ot-zone-blueprint-he.html ===== */
:root {
  --bg-primary: #0B0F13;
  --bg-secondary: #101820;
  --bg-card: #1F2937;
  --bg-card-hover: #162032;
  --bg-code: #081119;
  --accent: #00F0FF;
  --accent-dim: rgba(0,240,255,0.15);
  --accent-glow: rgba(0,240,255,0.3);
  --text-primary: #EEF7FB;
  --text-secondary: #B8C8D3;
  --text-muted: #7E919D;
  --border: #263443;
  --border-accent: rgba(0,240,255,0.25);
  --danger: #FF6B5F;
  --warning: #FFB800;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-body);
  line-height: 1.7;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

/* ── Top Nav ── */
.topnav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(6,9,15,0.92);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  padding: 0 40px;
  height: 64px;
  display: flex; align-items: center; justify-content: space-between;
}
.topnav-logo {
  font-size: 20px; font-weight: 700; letter-spacing: -0.5px;
  color: var(--text-primary);
}
.topnav-logo span { color: var(--accent); }
.topnav-meta {
  display: flex; align-items: center; gap: 24px;
  font-size: 13px; color: var(--text-muted);
}
.topnav-badge {
  background: var(--accent-dim);
  color: var(--accent);
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ── Hero ── */
.hero {
  margin-top: 64px;
  padding: 100px 40px 80px;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(0,240,255,0.06) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(0,255,102,0.04) 0%, transparent 50%),
    var(--bg-primary);
  border-bottom: 1px solid var(--border);
}
.hero-inner {
  max-width: 900px; margin: 0 auto;
}
.hero-classification {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 2px; color: var(--accent);
  margin-bottom: 28px;
}
.hero-classification::before {
  content: '';
  width: 32px; height: 2px;
  background: var(--accent);
}
.hero h1 {
  font-size: 40px; font-weight: 800; line-height: 1.15;
  letter-spacing: -1.5px;
  color: var(--text-primary);
  margin-bottom: 24px;
}
.hero h1 em {
  font-style: normal;
  background: linear-gradient(135deg, var(--accent), #00FF66);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-subtitle {
  font-size: 18px; line-height: 1.7;
  color: var(--text-secondary);
  max-width: 720px;
  margin-bottom: 36px;
}
.hero-meta-row {
  display: flex; gap: 32px; flex-wrap: wrap;
  font-size: 13px; color: var(--text-muted);
}
.hero-meta-row span { display: flex; align-items: center; gap: 6px; }
.hero-meta-row .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* ── Content ── */
.content-wrap {
  max-width: 820px;
  margin: 0 auto;
  padding: 60px 40px 100px;
}

.section-label {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 2.5px; color: var(--accent);
  margin-bottom: 16px;
}
.section-label::before {
  content: ''; width: 20px; height: 2px; background: var(--accent);
}

h2 {
  font-size: 28px; font-weight: 700; letter-spacing: -0.8px;
  color: var(--text-primary);
  margin-bottom: 20px;
  line-height: 1.25;
}
h3 {
  font-size: 20px; font-weight: 600; color: var(--text-primary);
  margin: 36px 0 14px;
  letter-spacing: -0.3px;
}
p {
  color: var(--text-secondary);
  margin-bottom: 18px;
}
p strong { color: var(--text-primary); font-weight: 600; }

.section-block {
  margin-bottom: 64px;
  padding-top: 48px;
  border-top: 1px solid var(--border);
}
.section-block:first-child { border-top: none; padding-top: 0; }

/* ── Callout Boxes ── */
.callout {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border:1px solid var(--border-accent);
  border-radius: 8px;
  padding: 24px 28px;
  margin: 28px 0;
}
.callout.danger {
  border-left-color: var(--danger);
}
.callout.warning {
  border-left-color: var(--warning);
}
.callout-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.5px; color: var(--accent);
  margin-bottom: 10px;
}
.callout.danger .callout-label { color: var(--danger); }
.callout.warning .callout-label { color: var(--warning); }
.callout p { margin-bottom: 0; font-size: 15px; }

/* ── Diagram ── */
.diagram-container {
  background: var(--bg-code);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 40px 28px;
  margin: 36px 0;
  overflow-x: auto;
}
.diagram-container svg {
  display: block; margin: 0 auto;
}
.diagram-caption {
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 16px;
  font-family: var(--font-mono);
  letter-spacing: 0.5px;
}

/* ── Code Blocks ── */
.code-block {
  background: var(--bg-code);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px 24px;
  margin: 24px 0;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.8;
  color: var(--text-secondary);
  overflow-x: auto;
}
.code-block .kw { color: var(--accent); }
.code-block .str { color: #FFB800; }
.code-block .cmt { color: var(--text-muted); font-style: italic; }

/* ── Compliance Table ── */
.compliance-table {
  width: 100%;
  border-collapse: collapse;
  margin: 28px 0;
  font-size: 14px;
}
.compliance-table th {
  text-align: right;
  padding: 12px 16px;
  background: var(--bg-card);
  color: var(--accent);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 700;
  border-bottom: 2px solid var(--border);
}
.compliance-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
}
.compliance-table tr:hover td { background: var(--bg-card); }
.status-pass { color: var(--accent); font-weight: 600; }
.status-fail { color: var(--danger); font-weight: 600; }

/* ── Numbered List ── */
.numbered-list {
  list-style: none; counter-reset: steps;
  margin: 24px 0;
}
.numbered-list li {
  counter-increment: steps;
  padding: 14px 0 14px 52px;
  position: relative;
  color: var(--text-secondary);
  border-bottom: 1px solid rgba(30,41,59,0.5);
}
.numbered-list li::before {
  content: counter(steps, decimal-leading-zero);
  position: absolute; left: 0; top: 14px;
  font-family: var(--font-mono);
  font-size: 14px; font-weight: 600;
  color: var(--accent);
}

/* ── CTA Block ── */
.cta-block {
  background: linear-gradient(135deg, rgba(0,240,255,0.08), rgba(0,255,102,0.06));
  border: 1px solid var(--border-accent);
  border-radius: 12px;
  padding: 48px 40px;
  text-align: center;
  margin: 64px 0 0;
}
.cta-block h2 { font-size: 26px; margin-bottom: 14px; }
.cta-block p { max-width: 560px; margin: 0 auto 28px; }
.cta-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent);
  color: var(--bg-primary);
  font-weight: 700; font-size: 14px;
  padding: 14px 32px;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.2s;
}
.cta-btn:hover {
  box-shadow: 0 0 24px var(--accent-glow);
  transform: translateY(-1px);
}
.cta-secondary {
  display: block;
  margin-top: 14px;
  font-size: 13px;
  color: var(--text-muted);
}

/* ── Footer ── */
footer {
  border-top: 1px solid var(--border);
  padding: 40px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
}
footer a { color: var(--accent); text-decoration: none; }

/* ── Responsive ── */
@media (max-width: 768px) {
  .hero { padding: 80px 24px 60px; }
  .hero h1 { font-size: 28px; }
  .content-wrap { padding: 40px 24px 80px; }
  .cta-block { padding: 36px 24px; }
  .hero-meta-row { flex-direction: column; gap: 12px; }
}

/* ── RTL Support ── */
[dir="rtl"] { direction: rtl; text-align: right; }
[dir="rtl"] .topnav { flex-direction: row-reverse; }
[dir="rtl"] .hero-classification::before { margin-left: 8px; margin-right: 0; }
[dir="rtl"] .section-label::before { margin-left: 10px; margin-right: 0; }
[dir="rtl"] .hero-meta-row { flex-direction: row-reverse; }
[dir="rtl"] .callout { border-left: 1px solid var(--border); border:1px solid var(--border-accent); }
[dir="rtl"] .callout.danger { border-right-color: var(--danger); border-left-color: var(--border); }
[dir="rtl"] .callout.warning { border-right-color: var(--warning); border-left-color: var(--border); }
[dir="rtl"] .numbered-list li { padding: 14px 52px 14px 0; }
[dir="rtl"] .numbered-list li::before { left: auto; right: 0; }
[dir="rtl"] .code-block { direction: ltr; text-align: left; }
[dir="rtl"] .diagram-container svg text { direction: ltr; }


/* ===== Extracted from 02-python-tax-guide-he.html ===== */
:root {
  --bg-primary: #0B0F13;
  --bg-secondary: #101820;
  --bg-card: #1F2937;
  --bg-card-hover: #162032;
  --bg-code: #081119;
  --accent: #00F0FF;
  --accent-dim: rgba(0,240,255,0.15);
  --accent-glow: rgba(0,240,255,0.3);
  --accent-blue: #00FF66;
  --text-primary: #EEF7FB;
  --text-secondary: #B8C8D3;
  --text-muted: #7E919D;
  --border: #263443;
  --border-accent: rgba(0,240,255,0.25);
  --danger: #FF6B5F;
  --warning: #FFB800;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-body);
  line-height: 1.7;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

.topnav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(6,9,15,0.92);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  padding: 0 40px;
  height: 64px;
  display: flex; align-items: center; justify-content: space-between;
}
.topnav-logo {
  font-size: 20px; font-weight: 700; letter-spacing: -0.5px;
  color: var(--text-primary);
}
.topnav-logo span { color: var(--accent); }
.topnav-meta {
  display: flex; align-items: center; gap: 24px;
  font-size: 13px; color: var(--text-muted);
}
.topnav-badge {
  background: rgba(0,255,102,0.15);
  color: var(--accent-blue);
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ── Hero ── */
.hero {
  margin-top: 64px;
  padding: 100px 40px 80px;
  background:
    radial-gradient(ellipse at 70% 40%, rgba(0,255,102,0.07) 0%, transparent 60%),
    radial-gradient(ellipse at 20% 80%, rgba(0,240,255,0.05) 0%, transparent 50%),
    var(--bg-primary);
  border-bottom: 1px solid var(--border);
}
.hero-inner { max-width: 900px; margin: 0 auto; }
.hero-classification {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 2px; color: var(--accent-blue);
  margin-bottom: 28px;
}
.hero-classification::before {
  content: ''; width: 32px; height: 2px; background: var(--accent-blue);
}
.hero h1 {
  font-size: 38px; font-weight: 800; line-height: 1.15;
  letter-spacing: -1.5px;
  color: var(--text-primary);
  margin-bottom: 24px;
}
.hero h1 em {
  font-style: normal;
  background: linear-gradient(135deg, var(--danger), var(--warning));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero h1 .highlight {
  background: linear-gradient(135deg, var(--accent), var(--accent-blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-subtitle {
  font-size: 18px; line-height: 1.7;
  color: var(--text-secondary);
  max-width: 720px;
  margin-bottom: 36px;
}
.hero-meta-row {
  display: flex; gap: 32px; flex-wrap: wrap;
  font-size: 13px; color: var(--text-muted);
}
.hero-meta-row span { display: flex; align-items: center; gap: 6px; }
.hero-meta-row .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-blue); }

/* ── Content ── */
.content-wrap {
  max-width: 820px;
  margin: 0 auto;
  padding: 60px 40px 100px;
}
.section-label {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 2.5px; color: var(--accent);
  margin-bottom: 16px;
}
.section-label::before {
  content: ''; width: 20px; height: 2px; background: var(--accent);
}

h2 {
  font-size: 28px; font-weight: 700; letter-spacing: -0.8px;
  color: var(--text-primary);
  margin-bottom: 20px; line-height: 1.25;
}
h3 {
  font-size: 20px; font-weight: 600; color: var(--text-primary);
  margin: 36px 0 14px; letter-spacing: -0.3px;
}
p {
  color: var(--text-secondary);
  margin-bottom: 18px;
}
p strong { color: var(--text-primary); font-weight: 600; }

.section-block {
  margin-bottom: 64px;
  padding-top: 48px;
  border-top: 1px solid var(--border);
}
.section-block:first-child { border-top: none; padding-top: 0; }

/* ── Callout ── */
.callout {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border:1px solid var(--border-accent);
  border-radius: 8px;
  padding: 24px 28px;
  margin: 28px 0;
}
.callout.danger { border-left-color: var(--danger); }
.callout.warning { border-left-color: var(--warning); }
.callout.blue { border-left-color: var(--accent-blue); }
.callout-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.5px; color: var(--accent); margin-bottom: 10px;
}
.callout.danger .callout-label { color: var(--danger); }
.callout.warning .callout-label { color: var(--warning); }
.callout.blue .callout-label { color: var(--accent-blue); }
.callout p { margin-bottom: 0; font-size: 15px; }

/* ── Code Blocks ── */
.code-block {
  background: var(--bg-code);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px 24px;
  margin: 24px 0;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.8;
  color: var(--text-secondary);
  overflow-x: auto;
  white-space: pre;
}
.code-block .kw { color: var(--accent); }
.code-block .str { color: #FFB800; }
.code-block .cmt { color: var(--text-muted); font-style: italic; }
.code-block .err { color: var(--danger); }
.code-block .fn { color: var(--accent-blue); }

.code-header {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  padding: 10px 20px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
}
.code-header + .code-block {
  border-radius: 0 0 8px 8px;
  margin-top: 0;
}
.code-lang {
  background: rgba(0,255,102,0.15);
  color: var(--accent-blue);
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}

/* ── Cost Calculator ── */
.cost-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 28px 0;
}
.cost-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px;
}
.cost-card.bad { border-color: rgba(239,68,68,0.3); }
.cost-card.good { border-color: rgba(0,240,255,0.3); }
.cost-card-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.5px; margin-bottom: 12px;
}
.cost-card.bad .cost-card-label { color: var(--danger); }
.cost-card.good .cost-card-label { color: var(--accent); }
.cost-card .big-number {
  font-size: 36px; font-weight: 800; letter-spacing: -1px;
  margin-bottom: 8px;
}
.cost-card.bad .big-number { color: var(--danger); }
.cost-card.good .big-number { color: var(--accent); }
.cost-card p { font-size: 14px; margin-bottom: 0; }

/* ── Split Brain Diagram ── */
.diagram-container {
  background: var(--bg-code);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 40px 28px;
  margin: 36px 0;
  overflow-x: auto;
}
.diagram-caption {
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 16px;
  font-family: var(--font-mono);
  letter-spacing: 0.5px;
}

/* ── Comparison Table ── */
.compare-table {
  width: 100%;
  border-collapse: collapse;
  margin: 28px 0;
  font-size: 14px;
}
.compare-table th {
  text-align: right;
  padding: 14px 16px;
  background: var(--bg-card);
  color: var(--text-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 700;
  border-bottom: 2px solid var(--border);
}
.compare-table th:nth-child(2) { color: var(--danger); }
.compare-table th:nth-child(3) { color: var(--accent); }
.compare-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
}
.compare-table tr:hover td { background: var(--bg-card); }

/* ── Numbered List ── */
.numbered-list {
  list-style: none; counter-reset: steps;
  margin: 24px 0;
}
.numbered-list li {
  counter-increment: steps;
  padding: 14px 0 14px 52px;
  position: relative;
  color: var(--text-secondary);
  border-bottom: 1px solid rgba(30,41,59,0.5);
}
.numbered-list li::before {
  content: counter(steps, decimal-leading-zero);
  position: absolute; left: 0; top: 14px;
  font-family: var(--font-mono);
  font-size: 14px; font-weight: 600;
  color: var(--accent);
}

/* ── Bullet List ── */
.bullet-list {
  list-style: none;
  margin: 20px 0;
}
.bullet-list li {
  padding: 8px 0 8px 24px;
  position: relative;
  color: var(--text-secondary);
}
.bullet-list li::before {
  content: '\2190';
  position: absolute; left: 0;
  color: var(--accent);
  font-weight: 600;
}

/* ── CTA ── */
.cta-block {
  background: linear-gradient(135deg, rgba(0,255,102,0.08), rgba(0,240,255,0.06));
  border: 1px solid var(--border-accent);
  border-radius: 12px;
  padding: 48px 40px;
  text-align: center;
  margin: 64px 0 0;
}
.cta-block h2 { font-size: 26px; margin-bottom: 14px; }
.cta-block p { max-width: 560px; margin: 0 auto 28px; }
.cta-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent);
  color: var(--bg-primary);
  font-weight: 700; font-size: 14px;
  padding: 14px 32px;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.2s;
}
.cta-btn:hover {
  box-shadow: 0 0 24px var(--accent-glow);
  transform: translateY(-1px);
}
.cta-secondary {
  display: block;
  margin-top: 14px;
  font-size: 13px;
  color: var(--text-muted);
}

footer {
  border-top: 1px solid var(--border);
  padding: 40px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
}
footer a { color: var(--accent); text-decoration: none; }

@media (max-width: 768px) {
  .hero { padding: 80px 24px 60px; }
  .hero h1 { font-size: 28px; }
  .content-wrap { padding: 40px 24px 80px; }
  .cost-grid { grid-template-columns: 1fr; }
  .cta-block { padding: 36px 24px; }
  .hero-meta-row { flex-direction: column; gap: 12px; }
}

/* ── RTL Support ── */
[dir="rtl"] { direction: rtl; text-align: right; }
[dir="rtl"] .topnav { flex-direction: row-reverse; }
[dir="rtl"] .hero-classification::before { margin-left: 8px; margin-right: 0; }
[dir="rtl"] .section-label::before { margin-left: 10px; margin-right: 0; }
[dir="rtl"] .hero-meta-row { flex-direction: row-reverse; }
[dir="rtl"] .callout { border-left: 1px solid var(--border); border:1px solid var(--border-accent); }
[dir="rtl"] .callout.danger { border-right-color: var(--danger); border-left-color: var(--border); }
[dir="rtl"] .callout.warning { border-right-color: var(--warning); border-left-color: var(--border); }
[dir="rtl"] .numbered-list li { padding: 14px 52px 14px 0; }
[dir="rtl"] .numbered-list li::before { left: auto; right: 0; }
[dir="rtl"] .code-block { direction: ltr; text-align: left; }
[dir="rtl"] .diagram-container svg text { direction: ltr; }


/* ===== Extracted from 03-splunk-roi-blueprint-he.html ===== */
:root {
  --bg-primary: #0B0F13;
  --bg-secondary: #101820;
  --bg-card: #1F2937;
  --bg-card-hover: #162032;
  --bg-code: #081119;
  --accent: #00F0FF;
  --accent-dim: rgba(0,240,255,0.15);
  --accent-glow: rgba(0,240,255,0.3);
  --accent-blue: #00FF66;
  --accent-purple: #00FF66;
  --text-primary: #EEF7FB;
  --text-secondary: #B8C8D3;
  --text-muted: #7E919D;
  --border: #263443;
  --border-accent: rgba(0,240,255,0.25);
  --danger: #FF6B5F;
  --warning: #FFB800;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-body);
  line-height: 1.7;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

.topnav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(6,9,15,0.92);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  padding: 0 40px;
  height: 64px;
  display: flex; align-items: center; justify-content: space-between;
}
.topnav-logo {
  font-size: 20px; font-weight: 700; letter-spacing: -0.5px;
  color: var(--text-primary);
}
.topnav-logo span { color: var(--accent); }
.topnav-meta {
  display: flex; align-items: center; gap: 24px;
  font-size: 13px; color: var(--text-muted);
}
.topnav-badge {
  background: rgba(0,255,102,0.15);
  color: var(--accent-purple);
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ── Hero ── */
.hero {
  margin-top: 64px;
  padding: 100px 40px 80px;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(0,255,102,0.07) 0%, transparent 60%),
    radial-gradient(ellipse at 20% 80%, rgba(0,240,255,0.04) 0%, transparent 50%),
    var(--bg-primary);
  border-bottom: 1px solid var(--border);
}
.hero-inner { max-width: 900px; margin: 0 auto; }
.hero-classification {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 2px; color: var(--accent-purple);
  margin-bottom: 28px;
}
.hero-classification::before {
  content: ''; width: 32px; height: 2px; background: var(--accent-purple);
}
.hero h1 {
  font-size: 38px; font-weight: 800; line-height: 1.15;
  letter-spacing: -1.5px;
  color: var(--text-primary);
  margin-bottom: 24px;
}
.hero h1 em {
  font-style: normal;
  background: linear-gradient(135deg, var(--accent-purple), var(--accent-blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero h1 .highlight {
  background: linear-gradient(135deg, var(--accent), #00F0FF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-subtitle {
  font-size: 18px; line-height: 1.7;
  color: var(--text-secondary);
  max-width: 720px;
  margin-bottom: 36px;
}
.hero-meta-row {
  display: flex; gap: 32px; flex-wrap: wrap;
  font-size: 13px; color: var(--text-muted);
}
.hero-meta-row span { display: flex; align-items: center; gap: 6px; }
.hero-meta-row .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-purple); }

/* ── Content ── */
.content-wrap {
  max-width: 820px;
  margin: 0 auto;
  padding: 60px 40px 100px;
}
.section-label {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 2.5px; color: var(--accent);
  margin-bottom: 16px;
}
.section-label::before {
  content: ''; width: 20px; height: 2px; background: var(--accent);
}
h2 {
  font-size: 28px; font-weight: 700; letter-spacing: -0.8px;
  color: var(--text-primary);
  margin-bottom: 20px; line-height: 1.25;
}
h3 {
  font-size: 20px; font-weight: 600; color: var(--text-primary);
  margin: 36px 0 14px; letter-spacing: -0.3px;
}
p {
  color: var(--text-secondary);
  margin-bottom: 18px;
}
p strong { color: var(--text-primary); font-weight: 600; }
.section-block {
  margin-bottom: 64px;
  padding-top: 48px;
  border-top: 1px solid var(--border);
}
.section-block:first-child { border-top: none; padding-top: 0; }

/* ── Callout ── */
.callout {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border:1px solid var(--border-accent);
  border-radius: 8px;
  padding: 24px 28px;
  margin: 28px 0;
}
.callout.danger { border-left-color: var(--danger); }
.callout.warning { border-left-color: var(--warning); }
.callout.purple { border-left-color: var(--accent-purple); }
.callout-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.5px; color: var(--accent); margin-bottom: 10px;
}
.callout.danger .callout-label { color: var(--danger); }
.callout.warning .callout-label { color: var(--warning); }
.callout.purple .callout-label { color: var(--accent-purple); }
.callout p { margin-bottom: 0; font-size: 15px; }

/* ── Diagram ── */
.diagram-container {
  background: var(--bg-code);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 40px 28px;
  margin: 36px 0;
  overflow-x: auto;
}
.diagram-caption {
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 16px;
  font-family: var(--font-mono);
  letter-spacing: 0.5px;
}

/* ── Code Block ── */
.code-block {
  background: var(--bg-code);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px 24px;
  margin: 24px 0;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.8;
  color: var(--text-secondary);
  overflow-x: auto;
  white-space: pre;
}
.code-block .kw { color: var(--accent); }
.code-block .str { color: #FFB800; }
.code-block .cmt { color: var(--text-muted); font-style: italic; }
.code-block .err { color: var(--danger); }
.code-block .fn { color: var(--accent-blue); }
.code-block .num { color: var(--accent-purple); }

/* ── ROI Cards ── */
.roi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  margin: 36px 0;
}
.roi-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 28px 24px;
  text-align: center;
  transition: border-color 0.2s;
}
.roi-card:hover { border-color: var(--accent); }
.roi-card-icon {
  font-size: 28px;
  margin-bottom: 14px;
  display: block;
}
.roi-card .big-number {
  font-size: 32px; font-weight: 800; letter-spacing: -1px;
  color: var(--accent);
  margin-bottom: 8px;
}
.roi-card .label {
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 1.5px; color: var(--text-muted);
  margin-bottom: 12px;
}
.roi-card p { font-size: 13px; margin-bottom: 0; color: var(--text-secondary); }

/* ── Cost Breakdown Table ── */
.cost-table {
  width: 100%;
  border-collapse: collapse;
  margin: 28px 0;
  font-size: 14px;
}
.cost-table th {
  text-align: right;
  padding: 14px 16px;
  background: var(--bg-card);
  color: var(--text-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 700;
  border-bottom: 2px solid var(--border);
}
.cost-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
}
.cost-table tr:hover td { background: var(--bg-card); }
.cost-table .total td {
  font-weight: 700;
  color: var(--text-primary);
  border-top: 2px solid var(--border);
  font-size: 15px;
}
.cost-table .saved { color: var(--accent); font-weight: 600; }
.cost-table .cost { color: var(--danger); font-weight: 600; }

/* ── Numbered List ── */
.numbered-list {
  list-style: none; counter-reset: steps;
  margin: 24px 0;
}
.numbered-list li {
  counter-increment: steps;
  padding: 14px 0 14px 52px;
  position: relative;
  color: var(--text-secondary);
  border-bottom: 1px solid rgba(30,41,59,0.5);
}
.numbered-list li::before {
  content: counter(steps, decimal-leading-zero);
  position: absolute; left: 0; top: 14px;
  font-family: var(--font-mono);
  font-size: 14px; font-weight: 600;
  color: var(--accent);
}

/* ── Bullet List ── */
.bullet-list {
  list-style: none;
  margin: 20px 0;
}
.bullet-list li {
  padding: 8px 0 8px 24px;
  position: relative;
  color: var(--text-secondary);
}
.bullet-list li::before {
  content: '\2190';
  position: absolute; left: 0;
  color: var(--accent);
  font-weight: 600;
}

/* ── Highlight Band ── */
.highlight-band {
  background: linear-gradient(135deg, rgba(0,255,102,0.08), rgba(0,240,255,0.06));
  border: 1px solid rgba(0,255,102,0.2);
  border-radius: 10px;
  padding: 32px 28px;
  margin: 36px 0;
}
.highlight-band h3 { margin-top: 0; color: var(--accent-purple); }

/* ── CTA ── */
.cta-block {
  background: linear-gradient(135deg, rgba(0,255,102,0.08), rgba(0,240,255,0.06));
  border: 1px solid var(--border-accent);
  border-radius: 12px;
  padding: 48px 40px;
  text-align: center;
  margin: 64px 0 0;
}
.cta-block h2 { font-size: 26px; margin-bottom: 14px; }
.cta-block p { max-width: 600px; margin: 0 auto 28px; }
.cta-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent);
  color: var(--bg-primary);
  font-weight: 700; font-size: 14px;
  padding: 14px 32px;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.2s;
}
.cta-btn:hover {
  box-shadow: 0 0 24px var(--accent-glow);
  transform: translateY(-1px);
}
.cta-btn-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-weight: 600; font-size: 14px;
  padding: 14px 28px;
  border-radius: 6px;
  text-decoration: none;
  margin-right: 12px;
  transition: all 0.2s;
}
.cta-btn-secondary:hover { border-color: var(--accent); }
.cta-secondary {
  display: block;
  margin-top: 18px;
  font-size: 13px;
  color: var(--text-muted);
}
.cta-note {
  display: block;
  margin-top: 24px;
  font-size: 12px;
  color: var(--text-muted);
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
  border-top: 1px solid var(--border);
  padding-top: 18px;
}

footer {
  border-top: 1px solid var(--border);
  padding: 40px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
}
footer a { color: var(--accent); text-decoration: none; }

@media (max-width: 768px) {
  .hero { padding: 80px 24px 60px; }
  .hero h1 { font-size: 28px; }
  .content-wrap { padding: 40px 24px 80px; }
  .roi-grid { grid-template-columns: 1fr; }
  .cta-block { padding: 36px 24px; }
  .cta-btn-secondary { margin-right: 0; margin-top: 12px; }
  .hero-meta-row { flex-direction: column; gap: 12px; }
}

/* ── RTL Support ── */
[dir="rtl"] { direction: rtl; text-align: right; }
[dir="rtl"] .topnav { flex-direction: row-reverse; }
[dir="rtl"] .hero-classification::before { margin-left: 8px; margin-right: 0; }
[dir="rtl"] .section-label::before { margin-left: 10px; margin-right: 0; }
[dir="rtl"] .hero-meta-row { flex-direction: row-reverse; }
[dir="rtl"] .callout { border-left: 1px solid var(--border); border:1px solid var(--border-accent); }
[dir="rtl"] .callout.danger { border-right-color: var(--danger); border-left-color: var(--border); }
[dir="rtl"] .callout.warning { border-right-color: var(--warning); border-left-color: var(--border); }
[dir="rtl"] .numbered-list li { padding: 14px 52px 14px 0; }
[dir="rtl"] .numbered-list li::before { left: auto; right: 0; }
[dir="rtl"] .code-block { direction: ltr; text-align: left; }
[dir="rtl"] .diagram-container svg text { direction: ltr; }


/* ===== Extracted from 04-competitive-teardown-he.html ===== */
:root{--bg-primary:#0B0F13;--bg-secondary:#101820;--bg-card:#1F2937;--bg-code:#081119;--accent:#00F0FF;--accent-dim:rgba(0,240,255,0.15);--accent-glow:rgba(0,240,255,0.3);--accent-blue:#00FF66;--accent-purple:#00FF66;--text-primary:#EEF7FB;--text-secondary:#B8C8D3;--text-muted:#7E919D;--border:#263443;--border-accent:rgba(0,240,255,0.25);--danger:#FF6B5F;--warning:#FFB800;--font-body:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;--font-mono:'JetBrains Mono','Fira Code',monospace}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg-primary);color:var(--text-primary);font-family:var(--font-body);line-height:1.7;font-size:16px;-webkit-font-smoothing:antialiased}
.topnav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(6,9,15,0.92);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);padding:0 40px;height:64px;display:flex;align-items:center;justify-content:space-between}
.topnav-logo{font-size:20px;font-weight:700;letter-spacing:-0.5px;color:var(--text-primary)}.topnav-logo span{color:var(--accent)}
.topnav-meta{display:flex;align-items:center;gap:24px;font-size:13px;color:var(--text-muted)}
.topnav-badge{background:rgba(239,68,68,0.15);color:var(--danger);padding:4px 12px;border-radius:4px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1px}
.hero{margin-top:64px;padding:100px 40px 80px;background:radial-gradient(ellipse at 30% 40%,rgba(239,68,68,0.06) 0%,transparent 60%),radial-gradient(ellipse at 70% 70%,rgba(0,240,255,0.05) 0%,transparent 50%),var(--bg-primary);border-bottom:1px solid var(--border)}
.hero-inner{max-width:900px;margin:0 auto}
.hero-classification{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:2px;color:var(--danger);margin-bottom:28px}.hero-classification::before{content:'';width:32px;height:2px;background:var(--danger)}
.hero h1{font-size:38px;font-weight:800;line-height:1.15;letter-spacing:-1.5px;color:var(--text-primary);margin-bottom:24px}
.hero h1 em{font-style:normal;background:linear-gradient(135deg,var(--danger),var(--warning));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero h1 .g{background:linear-gradient(135deg,var(--accent),var(--accent-blue));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero-subtitle{font-size:18px;line-height:1.7;color:var(--text-secondary);max-width:720px;margin-bottom:36px}
.hero-meta-row{display:flex;gap:32px;flex-wrap:wrap;font-size:13px;color:var(--text-muted)}.hero-meta-row span{display:flex;align-items:center;gap:6px}.hero-meta-row .dot{width:6px;height:6px;border-radius:50%;background:var(--danger)}
.content-wrap{max-width:820px;margin:0 auto;padding:60px 40px 100px}
.section-label{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:2.5px;color:var(--accent);margin-bottom:16px}.section-label::before{content:'';width:20px;height:2px;background:var(--accent)}
h2{font-size:28px;font-weight:700;letter-spacing:-0.8px;color:var(--text-primary);margin-bottom:20px;line-height:1.25}
h3{font-size:20px;font-weight:600;color:var(--text-primary);margin:36px 0 14px;letter-spacing:-0.3px}
p{color:var(--text-secondary);margin-bottom:18px}p strong{color:var(--text-primary);font-weight:600}
.section-block{margin-bottom:64px;padding-top:48px;border-top:1px solid var(--border)}.section-block:first-child{border-top:none;padding-top:0}
.callout{background:var(--bg-card);border:1px solid var(--border);border:1px solid var(--border-accent);border-radius:8px;padding:24px 28px;margin:28px 0}.callout.danger{border-left-color:var(--danger)}.callout.warning{border-left-color:var(--warning)}
.callout-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--accent);margin-bottom:10px}.callout.danger .callout-label{color:var(--danger)}.callout.warning .callout-label{color:var(--warning)}
.callout p{margin-bottom:0;font-size:15px}
.bullet-list{list-style:none;margin:20px 0}.bullet-list li{padding:8px 0 8px 24px;position:relative;color:var(--text-secondary)}.bullet-list li::before{content:'\2190';position:absolute;left:0;color:var(--accent);font-weight:600}
.compare-table{width:100%;border-collapse:collapse;margin:28px 0;font-size:14px}
.compare-table th{text-align:right;padding:14px 16px;background:var(--bg-card);color:var(--text-muted);font-size:11px;text-transform:uppercase;letter-spacing:1.5px;font-weight:700;border-bottom:2px solid var(--border)}
.compare-table td{padding:14px 16px;border-bottom:1px solid var(--border);color:var(--text-secondary)}.compare-table tr:hover td{background:var(--bg-card)}
.status-pass{color:var(--accent);font-weight:600}.status-fail{color:var(--danger);font-weight:600}.status-partial{color:var(--warning);font-weight:600}
.vendor-card-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:28px 0}
.vendor-card{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:28px 24px}
.vendor-card h4{font-size:16px;font-weight:700;margin-bottom:6px;color:var(--text-primary)}
.vendor-card .vendor-type{font-size:11px;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-muted);font-weight:600;margin-bottom:14px}
.vendor-card .verdict{font-size:13px;font-weight:700;padding:6px 12px;border-radius:4px;display:inline-block;margin-top:14px}
.verdict-fail{background:rgba(239,68,68,0.12);color:var(--danger)}
.verdict-partial{background:rgba(245,158,11,0.12);color:var(--warning)}
.code-block{background:var(--bg-code);border:1px solid var(--border);border-radius:8px;padding:20px 24px;margin:24px 0;font-family:var(--font-mono);font-size:13px;line-height:1.8;color:var(--text-secondary);overflow-x:auto;white-space:pre}.code-block .kw{color:var(--accent)}.code-block .str{color:#FFB800}.code-block .cmt{color:var(--text-muted);font-style:italic}.code-block .err{color:var(--danger)}
.cta-block{background:linear-gradient(135deg,rgba(0,240,255,0.08),rgba(0,255,102,0.06));border:1px solid var(--border-accent);border-radius:12px;padding:48px 40px;text-align:center;margin:64px 0 0}
.cta-block h2{font-size:26px;margin-bottom:14px}.cta-block p{max-width:560px;margin:0 auto 28px}
.cta-btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:var(--bg-primary);font-weight:700;font-size:14px;padding:14px 32px;border-radius:6px;text-decoration:none;transition:all 0.2s}.cta-btn:hover{box-shadow:0 0 24px var(--accent-glow);transform:translateY(-1px)}
.cta-secondary{display:block;margin-top:14px;font-size:13px;color:var(--text-muted)}
footer{border-top:1px solid var(--border);padding:40px;text-align:center;font-size:13px;color:var(--text-muted)}footer a{color:var(--accent);text-decoration:none}
@media(max-width:768px){.hero{padding:80px 24px 60px}.hero h1{font-size:28px}.content-wrap{padding:40px 24px 80px}.vendor-card-grid{grid-template-columns:1fr}.cta-block{padding:36px 24px}.hero-meta-row{flex-direction:column;gap:12px}}

/* ── RTL Support ── */
[dir="rtl"] { direction: rtl; text-align: right; }
[dir="rtl"] .topnav { flex-direction: row-reverse; }
[dir="rtl"] .hero-classification::before { margin-left: 8px; margin-right: 0; }
[dir="rtl"] .section-label::before { margin-left: 10px; margin-right: 0; }
[dir="rtl"] .hero-meta-row { flex-direction: row-reverse; }
[dir="rtl"] .callout { border-left: 1px solid var(--border); border:1px solid var(--border-accent); }
[dir="rtl"] .callout.danger { border-right-color: var(--danger); border-left-color: var(--border); }
[dir="rtl"] .callout.warning { border-right-color: var(--warning); border-left-color: var(--border); }
[dir="rtl"] .numbered-list li { padding: 14px 52px 14px 0; }
[dir="rtl"] .numbered-list li::before { left: auto; right: 0; }
[dir="rtl"] .code-block { direction: ltr; text-align: left; }
[dir="rtl"] .diagram-container svg text { direction: ltr; }


/* ===== Extracted from 05-build-vs-buy-he.html ===== */
:root{--bg-primary:#0B0F13;--bg-secondary:#101820;--bg-card:#1F2937;--bg-code:#081119;--accent:#00F0FF;--accent-dim:rgba(0,240,255,0.15);--accent-glow:rgba(0,240,255,0.3);--accent-blue:#00FF66;--accent-purple:#00FF66;--text-primary:#EEF7FB;--text-secondary:#B8C8D3;--text-muted:#7E919D;--border:#263443;--border-accent:rgba(0,240,255,0.25);--danger:#FF6B5F;--warning:#FFB800;--font-body:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;--font-mono:'JetBrains Mono','Fira Code',monospace}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg-primary);color:var(--text-primary);font-family:var(--font-body);line-height:1.7;font-size:16px;-webkit-font-smoothing:antialiased}
.topnav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(6,9,15,0.92);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);padding:0 40px;height:64px;display:flex;align-items:center;justify-content:space-between}
.topnav-logo{font-size:20px;font-weight:700;letter-spacing:-0.5px;color:var(--text-primary)}.topnav-logo span{color:var(--accent)}
.topnav-meta{display:flex;align-items:center;gap:24px;font-size:13px;color:var(--text-muted)}
.topnav-badge{background:rgba(245,158,11,0.15);color:var(--warning);padding:4px 12px;border-radius:4px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1px}
.hero{margin-top:64px;padding:100px 40px 80px;background:radial-gradient(ellipse at 60% 30%,rgba(245,158,11,0.06) 0%,transparent 60%),radial-gradient(ellipse at 20% 80%,rgba(0,240,255,0.04) 0%,transparent 50%),var(--bg-primary);border-bottom:1px solid var(--border)}
.hero-inner{max-width:900px;margin:0 auto}
.hero-classification{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:2px;color:var(--warning);margin-bottom:28px}.hero-classification::before{content:'';width:32px;height:2px;background:var(--warning)}
.hero h1{font-size:38px;font-weight:800;line-height:1.15;letter-spacing:-1.5px;color:var(--text-primary);margin-bottom:24px}
.hero h1 em{font-style:normal;background:linear-gradient(135deg,var(--warning),var(--danger));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero h1 .g{background:linear-gradient(135deg,var(--accent),var(--accent-blue));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero-subtitle{font-size:18px;line-height:1.7;color:var(--text-secondary);max-width:720px;margin-bottom:36px}
.hero-meta-row{display:flex;gap:32px;flex-wrap:wrap;font-size:13px;color:var(--text-muted)}.hero-meta-row span{display:flex;align-items:center;gap:6px}.hero-meta-row .dot{width:6px;height:6px;border-radius:50%;background:var(--warning)}
.content-wrap{max-width:820px;margin:0 auto;padding:60px 40px 100px}
.section-label{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:2.5px;color:var(--accent);margin-bottom:16px}.section-label::before{content:'';width:20px;height:2px;background:var(--accent)}
h2{font-size:28px;font-weight:700;letter-spacing:-0.8px;color:var(--text-primary);margin-bottom:20px;line-height:1.25}
h3{font-size:20px;font-weight:600;color:var(--text-primary);margin:36px 0 14px;letter-spacing:-0.3px}
p{color:var(--text-secondary);margin-bottom:18px}p strong{color:var(--text-primary);font-weight:600}
.section-block{margin-bottom:64px;padding-top:48px;border-top:1px solid var(--border)}.section-block:first-child{border-top:none;padding-top:0}
.callout{background:var(--bg-card);border:1px solid var(--border);border:1px solid var(--border-accent);border-radius:8px;padding:24px 28px;margin:28px 0}.callout.danger{border-left-color:var(--danger)}.callout.warning{border-left-color:var(--warning)}
.callout-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--accent);margin-bottom:10px}.callout.danger .callout-label{color:var(--danger)}.callout.warning .callout-label{color:var(--warning)}
.callout p{margin-bottom:0;font-size:15px}
.bullet-list{list-style:none;margin:20px 0}.bullet-list li{padding:8px 0 8px 24px;position:relative;color:var(--text-secondary)}.bullet-list li::before{content:'\2190';position:absolute;left:0;color:var(--accent);font-weight:600}
.timeline{margin:36px 0;position:relative;padding-right:40px}
.timeline::before{content:'';position:absolute;right:14px;top:0;bottom:0;width:2px;background:var(--border)}
.timeline-item{position:relative;padding-bottom:36px}
.timeline-item:last-child{padding-bottom:0}
.timeline-dot{position:absolute;right:-33px;top:4px;width:12px;height:12px;border-radius:50%;border:2px solid var(--accent);background:var(--bg-primary)}
.timeline-item.bad .timeline-dot{border-color:var(--danger)}
.timeline-month{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--accent);margin-bottom:6px}
.timeline-item.bad .timeline-month{color:var(--danger)}
.timeline-content{color:var(--text-secondary);font-size:15px}
.cost-table{width:100%;border-collapse:collapse;margin:28px 0;font-size:14px}
.cost-table th{text-align:right;padding:14px 16px;background:var(--bg-card);color:var(--text-muted);font-size:11px;text-transform:uppercase;letter-spacing:1.5px;font-weight:700;border-bottom:2px solid var(--border)}
.cost-table td{padding:14px 16px;border-bottom:1px solid var(--border);color:var(--text-secondary)}.cost-table tr:hover td{background:var(--bg-card)}
.cost-table .total td{font-weight:700;color:var(--text-primary);border-top:2px solid var(--border);font-size:15px}
.cost{color:var(--danger);font-weight:600}.saved{color:var(--accent);font-weight:600}
.versus-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:0;margin:36px 0;align-items:stretch}
.versus-card{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:28px 24px}
.versus-card.bad{border-color:rgba(239,68,68,0.25)}
.versus-card.good{border-color:rgba(0,240,255,0.25)}
.versus-divider{display:flex;align-items:center;justify-content:center;padding:0 16px;font-size:20px;font-weight:800;color:var(--text-muted)}
.versus-card h4{font-size:14px;font-weight:700;margin-bottom:16px;text-transform:uppercase;letter-spacing:1px}
.versus-card.bad h4{color:var(--danger)}
.versus-card.good h4{color:var(--accent)}
.versus-card .metric{margin-bottom:14px}
.versus-card .metric-label{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:2px}
.versus-card .metric-value{font-size:18px;font-weight:700}
.versus-card.bad .metric-value{color:var(--danger)}
.versus-card.good .metric-value{color:var(--accent)}
.cta-block{background:linear-gradient(135deg,rgba(0,240,255,0.08),rgba(0,255,102,0.06));border:1px solid var(--border-accent);border-radius:12px;padding:48px 40px;text-align:center;margin:64px 0 0}
.cta-block h2{font-size:26px;margin-bottom:14px}.cta-block p{max-width:560px;margin:0 auto 28px}
.cta-btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:var(--bg-primary);font-weight:700;font-size:14px;padding:14px 32px;border-radius:6px;text-decoration:none;transition:all 0.2s}.cta-btn:hover{box-shadow:0 0 24px var(--accent-glow);transform:translateY(-1px)}
.cta-secondary{display:block;margin-top:14px;font-size:13px;color:var(--text-muted)}
footer{border-top:1px solid var(--border);padding:40px;text-align:center;font-size:13px;color:var(--text-muted)}footer a{color:var(--accent);text-decoration:none}
@media(max-width:768px){.hero{padding:80px 24px 60px}.hero h1{font-size:28px}.content-wrap{padding:40px 24px 80px}.versus-grid{grid-template-columns:1fr;gap:16px}.versus-divider{padding:8px 0}.cta-block{padding:36px 24px}.hero-meta-row{flex-direction:column;gap:12px}}

/* ── RTL Support ── */
[dir="rtl"] { direction: rtl; text-align: right; }
[dir="rtl"] .topnav { flex-direction: row-reverse; }
[dir="rtl"] .hero-classification::before { margin-left: 8px; margin-right: 0; }
[dir="rtl"] .section-label::before { margin-left: 10px; margin-right: 0; }
[dir="rtl"] .hero-meta-row { flex-direction: row-reverse; }
[dir="rtl"] .callout { border-left: 1px solid var(--border); border:1px solid var(--border-accent); }
[dir="rtl"] .callout.danger { border-right-color: var(--danger); border-left-color: var(--border); }
[dir="rtl"] .callout.warning { border-right-color: var(--warning); border-left-color: var(--border); }
[dir="rtl"] .numbered-list li { padding: 14px 52px 14px 0; }
[dir="rtl"] .numbered-list li::before { left: auto; right: 0; }
[dir="rtl"] .code-block { direction: ltr; text-align: left; }
[dir="rtl"] .diagram-container svg text { direction: ltr; }


/* ===== Extracted from 06-compliance-automation-he.html ===== */
:root{--bg-primary:#0B0F13;--bg-secondary:#101820;--bg-card:#1F2937;--bg-code:#081119;--accent:#00F0FF;--accent-dim:rgba(0,240,255,0.15);--accent-glow:rgba(0,240,255,0.3);--accent-blue:#00FF66;--accent-purple:#00FF66;--text-primary:#EEF7FB;--text-secondary:#B8C8D3;--text-muted:#7E919D;--border:#263443;--border-accent:rgba(0,240,255,0.25);--danger:#FF6B5F;--warning:#FFB800;--font-body:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;--font-mono:'JetBrains Mono','Fira Code',monospace}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg-primary);color:var(--text-primary);font-family:var(--font-body);line-height:1.7;font-size:16px;-webkit-font-smoothing:antialiased}
.topnav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(6,9,15,0.92);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);padding:0 40px;height:64px;display:flex;align-items:center;justify-content:space-between}
.topnav-logo{font-size:20px;font-weight:700;letter-spacing:-0.5px;color:var(--text-primary)}.topnav-logo span{color:var(--accent)}
.topnav-meta{display:flex;align-items:center;gap:24px;font-size:13px;color:var(--text-muted)}
.topnav-badge{background:var(--accent-dim);color:var(--accent);padding:4px 12px;border-radius:4px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1px}
.hero{margin-top:64px;padding:100px 40px 80px;background:radial-gradient(ellipse at 40% 30%,rgba(0,240,255,0.06) 0%,transparent 60%),radial-gradient(ellipse at 80% 70%,rgba(0,255,102,0.04) 0%,transparent 50%),var(--bg-primary);border-bottom:1px solid var(--border)}
.hero-inner{max-width:900px;margin:0 auto}
.hero-classification{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:2px;color:var(--accent);margin-bottom:28px}.hero-classification::before{content:'';width:32px;height:2px;background:var(--accent)}
.hero h1{font-size:38px;font-weight:800;line-height:1.15;letter-spacing:-1.5px;color:var(--text-primary);margin-bottom:24px}
.hero h1 em{font-style:normal;background:linear-gradient(135deg,var(--accent),#00F0FF);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero-subtitle{font-size:18px;line-height:1.7;color:var(--text-secondary);max-width:720px;margin-bottom:36px}
.hero-meta-row{display:flex;gap:32px;flex-wrap:wrap;font-size:13px;color:var(--text-muted)}.hero-meta-row span{display:flex;align-items:center;gap:6px}.hero-meta-row .dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.content-wrap{max-width:820px;margin:0 auto;padding:60px 40px 100px}
.section-label{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:2.5px;color:var(--accent);margin-bottom:16px}.section-label::before{content:'';width:20px;height:2px;background:var(--accent)}
h2{font-size:28px;font-weight:700;letter-spacing:-0.8px;color:var(--text-primary);margin-bottom:20px;line-height:1.25}
h3{font-size:20px;font-weight:600;color:var(--text-primary);margin:36px 0 14px;letter-spacing:-0.3px}
p{color:var(--text-secondary);margin-bottom:18px}p strong{color:var(--text-primary);font-weight:600}
.section-block{margin-bottom:64px;padding-top:48px;border-top:1px solid var(--border)}.section-block:first-child{border-top:none;padding-top:0}
.callout{background:var(--bg-card);border:1px solid var(--border);border:1px solid var(--border-accent);border-radius:8px;padding:24px 28px;margin:28px 0}.callout.danger{border-left-color:var(--danger)}.callout.warning{border-left-color:var(--warning)}
.callout-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--accent);margin-bottom:10px}.callout.danger .callout-label{color:var(--danger)}.callout.warning .callout-label{color:var(--warning)}
.callout p{margin-bottom:0;font-size:15px}
.bullet-list{list-style:none;margin:20px 0}.bullet-list li{padding:8px 0 8px 24px;position:relative;color:var(--text-secondary)}.bullet-list li::before{content:'\2190';position:absolute;left:0;color:var(--accent);font-weight:600}
.framework-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:28px 0}
.framework-card{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:24px;transition:border-color 0.2s}
.framework-card:hover{border-color:var(--accent)}
.framework-card h4{font-size:15px;font-weight:700;color:var(--text-primary);margin-bottom:4px}
.framework-card .fw-tag{font-size:11px;text-transform:uppercase;letter-spacing:1.5px;color:var(--accent);font-weight:600;margin-bottom:12px}
.framework-card p{font-size:13px;margin-bottom:0}
.audit-table{width:100%;border-collapse:collapse;margin:28px 0;font-size:14px}
.audit-table th{text-align:right;padding:14px 16px;background:var(--bg-card);color:var(--text-muted);font-size:11px;text-transform:uppercase;letter-spacing:1.5px;font-weight:700;border-bottom:2px solid var(--border)}
.audit-table td{padding:14px 16px;border-bottom:1px solid var(--border);color:var(--text-secondary)}.audit-table tr:hover td{background:var(--bg-card)}
.status-pass{color:var(--accent);font-weight:600}.status-fail{color:var(--danger);font-weight:600}
.code-block{background:var(--bg-code);border:1px solid var(--border);border-radius:8px;padding:20px 24px;margin:24px 0;font-family:var(--font-mono);font-size:13px;line-height:1.8;color:var(--text-secondary);overflow-x:auto;white-space:pre;direction:ltr;text-align:left}.code-block .kw{color:var(--accent)}.code-block .str{color:#FFB800}.code-block .cmt{color:var(--text-muted);font-style:italic}
.proof-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;margin:36px 0}
.proof-card{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:24px;text-align:center}
.proof-card .big-number{font-size:32px;font-weight:800;color:var(--accent);margin-bottom:8px;letter-spacing:-1px}
.proof-card .label{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-muted);margin-bottom:10px}
.proof-card p{font-size:13px;margin-bottom:0}
.numbered-list{list-style:none;counter-reset:steps;margin:24px 0}
.numbered-list li{counter-increment:steps;padding:14px 52px 14px 0;position:relative;color:var(--text-secondary);border-bottom:1px solid rgba(30,41,59,0.5)}
.numbered-list li::before{content:counter(steps, decimal-leading-zero);position:absolute;right:0;top:14px;font-family:var(--font-mono);font-size:14px;font-weight:600;color:var(--accent)}
.cta-block{background:linear-gradient(135deg,rgba(0,240,255,0.08),rgba(0,255,102,0.06));border:1px solid var(--border-accent);border-radius:12px;padding:48px 40px;text-align:center;margin:64px 0 0}
.cta-block h2{font-size:26px;margin-bottom:14px}.cta-block p{max-width:560px;margin:0 auto 28px}
.cta-btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:var(--bg-primary);font-weight:700;font-size:14px;padding:14px 32px;border-radius:6px;text-decoration:none;transition:all 0.2s}.cta-btn:hover{box-shadow:0 0 24px var(--accent-glow);transform:translateY(-1px)}
.cta-secondary{display:block;margin-top:14px;font-size:13px;color:var(--text-muted)}
footer{border-top:1px solid var(--border);padding:40px;text-align:center;font-size:13px;color:var(--text-muted)}footer a{color:var(--accent);text-decoration:none}
@media(max-width:768px){.hero{padding:80px 24px 60px}.hero h1{font-size:28px}.content-wrap{padding:40px 24px 80px}.framework-grid,.proof-grid{grid-template-columns:1fr}.cta-block{padding:36px 24px}.hero-meta-row{flex-direction:column;gap:12px}}

/* ── RTL Support ── */
[dir="rtl"] { direction: rtl; text-align: right; }
[dir="rtl"] .topnav { flex-direction: row-reverse; }
[dir="rtl"] .hero-classification::before { margin-left: 8px; margin-right: 0; }
[dir="rtl"] .section-label::before { margin-left: 10px; margin-right: 0; }
[dir="rtl"] .hero-meta-row { flex-direction: row-reverse; }
[dir="rtl"] .callout { border-left: 1px solid var(--border); border:1px solid var(--border-accent); }
[dir="rtl"] .callout.danger { border-right-color: var(--danger); border-left-color: var(--border); }
[dir="rtl"] .callout.warning { border-right-color: var(--warning); border-left-color: var(--border); }
[dir="rtl"] .numbered-list li { padding: 14px 52px 14px 0; }
[dir="rtl"] .numbered-list li::before { left: auto; right: 0; }
[dir="rtl"] .code-block { direction: ltr; text-align: left; }
[dir="rtl"] .diagram-container svg text { direction: ltr; }


/* ===== Extracted from 07-data-sovereignty-he.html ===== */
:root{--bg-primary:#0B0F13;--bg-secondary:#101820;--bg-card:#1F2937;--bg-code:#081119;--accent:#00F0FF;--accent-dim:rgba(0,240,255,0.15);--accent-glow:rgba(0,240,255,0.3);--accent-blue:#00FF66;--accent-purple:#00FF66;--text-primary:#EEF7FB;--text-secondary:#B8C8D3;--text-muted:#7E919D;--border:#263443;--border-accent:rgba(0,240,255,0.25);--danger:#FF6B5F;--warning:#FFB800;--font-body:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;--font-mono:'JetBrains Mono','Fira Code',monospace}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg-primary);color:var(--text-primary);font-family:var(--font-body);line-height:1.7;font-size:16px;-webkit-font-smoothing:antialiased}
.topnav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(6,9,15,0.92);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);padding:0 40px;height:64px;display:flex;align-items:center;justify-content:space-between}
.topnav-logo{font-size:20px;font-weight:700;letter-spacing:-0.5px;color:var(--text-primary)}.topnav-logo span{color:var(--accent)}
.topnav-meta{display:flex;align-items:center;gap:24px;font-size:13px;color:var(--text-muted)}
.topnav-badge{background:rgba(0,255,102,0.15);color:var(--accent-blue);padding:4px 12px;border-radius:4px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1px}
.hero{margin-top:64px;padding:100px 40px 80px;background:radial-gradient(ellipse at 25% 30%,rgba(0,255,102,0.07) 0%,transparent 60%),radial-gradient(ellipse at 75% 70%,rgba(0,240,255,0.04) 0%,transparent 50%),var(--bg-primary);border-bottom:1px solid var(--border)}
.hero-inner{max-width:900px;margin:0 auto}
.hero-classification{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:2px;color:var(--accent-blue);margin-bottom:28px}.hero-classification::before{content:'';width:32px;height:2px;background:var(--accent-blue)}
.hero h1{font-size:38px;font-weight:800;line-height:1.15;letter-spacing:-1.5px;color:var(--text-primary);margin-bottom:24px}
.hero h1 em{font-style:normal;background:linear-gradient(135deg,var(--accent-blue),var(--accent-purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero h1 .g{background:linear-gradient(135deg,var(--accent),#00F0FF);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero-subtitle{font-size:18px;line-height:1.7;color:var(--text-secondary);max-width:720px;margin-bottom:36px}
.hero-meta-row{display:flex;gap:32px;flex-wrap:wrap;font-size:13px;color:var(--text-muted)}.hero-meta-row span{display:flex;align-items:center;gap:6px}.hero-meta-row .dot{width:6px;height:6px;border-radius:50%;background:var(--accent-blue)}
.content-wrap{max-width:820px;margin:0 auto;padding:60px 40px 100px}
.section-label{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:2.5px;color:var(--accent);margin-bottom:16px}.section-label::before{content:'';width:20px;height:2px;background:var(--accent)}
h2{font-size:28px;font-weight:700;letter-spacing:-0.8px;color:var(--text-primary);margin-bottom:20px;line-height:1.25}
h3{font-size:20px;font-weight:600;color:var(--text-primary);margin:36px 0 14px;letter-spacing:-0.3px}
p{color:var(--text-secondary);margin-bottom:18px}p strong{color:var(--text-primary);font-weight:600}
.section-block{margin-bottom:64px;padding-top:48px;border-top:1px solid var(--border)}.section-block:first-child{border-top:none;padding-top:0}
.callout{background:var(--bg-card);border:1px solid var(--border);border:1px solid var(--border-accent);border-radius:8px;padding:24px 28px;margin:28px 0}.callout.danger{border-left-color:var(--danger)}.callout.warning{border-left-color:var(--warning)}.callout.blue{border-left-color:var(--accent-blue)}
.callout-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--accent);margin-bottom:10px}.callout.danger .callout-label{color:var(--danger)}.callout.warning .callout-label{color:var(--warning)}.callout.blue .callout-label{color:var(--accent-blue)}
.callout p{margin-bottom:0;font-size:15px}
.bullet-list{list-style:none;margin:20px 0}.bullet-list li{padding:8px 0 8px 24px;position:relative;color:var(--text-secondary)}.bullet-list li::before{content:'\2190';position:absolute;left:0;color:var(--accent);font-weight:600}
.data-flow-table{width:100%;border-collapse:collapse;margin:28px 0;font-size:14px}
.data-flow-table th{text-align:right;padding:14px 16px;background:var(--bg-card);color:var(--text-muted);font-size:11px;text-transform:uppercase;letter-spacing:1.5px;font-weight:700;border-bottom:2px solid var(--border)}
.data-flow-table td{padding:14px 16px;border-bottom:1px solid var(--border);color:var(--text-secondary)}.data-flow-table tr:hover td{background:var(--bg-card)}
.status-pass{color:var(--accent);font-weight:600}.status-fail{color:var(--danger);font-weight:600}.status-partial{color:var(--warning);font-weight:600}
.risk-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:36px 0}
.risk-card{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:28px 24px}
.risk-card h4{font-size:16px;font-weight:700;margin-bottom:12px;color:var(--text-primary)}
.risk-card p{font-size:14px;margin-bottom:0}
.risk-card.critical{border:1px solid rgba(255,107,95,0.48);}
.risk-card.critical h4{color:var(--danger)}
.diagram-container{background:var(--bg-code);border:1px solid var(--border);border-radius:10px;padding:40px 28px;margin:36px 0;overflow-x:auto}
.diagram-caption{text-align:center;font-size:12px;color:var(--text-muted);margin-top:16px;font-family:var(--font-mono);letter-spacing:0.5px}
.numbered-list{list-style:none;counter-reset:steps;margin:24px 0}
.numbered-list li{counter-increment:steps;padding:14px 52px 14px 0;position:relative;color:var(--text-secondary);border-bottom:1px solid rgba(30,41,59,0.5)}
.numbered-list li::before{content:counter(steps, decimal-leading-zero);position:absolute;right:0;top:14px;font-family:var(--font-mono);font-size:14px;font-weight:600;color:var(--accent)}
.cta-block{background:linear-gradient(135deg,rgba(0,255,102,0.08),rgba(0,240,255,0.06));border:1px solid var(--border-accent);border-radius:12px;padding:48px 40px;text-align:center;margin:64px 0 0}
.cta-block h2{font-size:26px;margin-bottom:14px}.cta-block p{max-width:560px;margin:0 auto 28px}
.cta-btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:var(--bg-primary);font-weight:700;font-size:14px;padding:14px 32px;border-radius:6px;text-decoration:none;transition:all 0.2s}.cta-btn:hover{box-shadow:0 0 24px var(--accent-glow);transform:translateY(-1px)}
.cta-secondary{display:block;margin-top:14px;font-size:13px;color:var(--text-muted)}
footer{border-top:1px solid var(--border);padding:40px;text-align:center;font-size:13px;color:var(--text-muted)}footer a{color:var(--accent);text-decoration:none}
@media(max-width:768px){.hero{padding:80px 24px 60px}.hero h1{font-size:28px}.content-wrap{padding:40px 24px 80px}.risk-grid{grid-template-columns:1fr}.cta-block{padding:36px 24px}.hero-meta-row{flex-direction:column;gap:12px}}

/* ── RTL Support ── */
[dir="rtl"] { direction: rtl; text-align: right; }
[dir="rtl"] .topnav { flex-direction: row-reverse; }
[dir="rtl"] .hero-classification::before { margin-left: 8px; margin-right: 0; }
[dir="rtl"] .section-label::before { margin-left: 10px; margin-right: 0; }
[dir="rtl"] .hero-meta-row { flex-direction: row-reverse; }
[dir="rtl"] .callout { border-left: 1px solid var(--border); border:1px solid var(--border-accent); }
[dir="rtl"] .callout.danger { border-right-color: var(--danger); border-left-color: var(--border); }
[dir="rtl"] .callout.warning { border-right-color: var(--warning); border-left-color: var(--border); }
[dir="rtl"] .callout.blue { border-right-color: var(--accent-blue); border-left-color: var(--border); }
[dir="rtl"] .numbered-list li { padding: 14px 52px 14px 0; }
[dir="rtl"] .numbered-list li::before { left: auto; right: 0; }
[dir="rtl"] .code-block { direction: ltr; text-align: left; }
[dir="rtl"] .diagram-container svg text { direction: ltr; }


/* ===== Extracted from 08-soc-analyst-first-30-days-he.html ===== */
:root{--bg-primary:#0B0F13;--bg-secondary:#101820;--bg-card:#1F2937;--bg-code:#081119;--accent:#00F0FF;--accent-dim:rgba(0,240,255,0.15);--accent-glow:rgba(0,240,255,0.3);--accent-blue:#00FF66;--accent-purple:#00FF66;--text-primary:#EEF7FB;--text-secondary:#B8C8D3;--text-muted:#7E919D;--border:#263443;--border-accent:rgba(0,240,255,0.25);--danger:#FF6B5F;--warning:#FFB800;--font-body:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;--font-mono:'JetBrains Mono','Fira Code',monospace}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg-primary);color:var(--text-primary);font-family:var(--font-body);line-height:1.7;font-size:16px;-webkit-font-smoothing:antialiased}
.topnav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(6,9,15,0.92);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);padding:0 40px;height:64px;display:flex;align-items:center;justify-content:space-between}
.topnav-logo{font-size:20px;font-weight:700;letter-spacing:-0.5px;color:var(--text-primary)}.topnav-logo span{color:var(--accent)}
.topnav-meta{display:flex;align-items:center;gap:24px;font-size:13px;color:var(--text-muted)}
.topnav-badge{background:rgba(0,240,255,0.15);color:var(--accent);padding:4px 12px;border-radius:4px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1px}
.hero{margin-top:64px;padding:100px 40px 80px;background:radial-gradient(ellipse at 50% 50%,rgba(0,240,255,0.06) 0%,transparent 60%),var(--bg-primary);border-bottom:1px solid var(--border)}
.hero-inner{max-width:900px;margin:0 auto}
.hero-classification{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:2px;color:var(--accent);margin-bottom:28px}.hero-classification::before{content:'';width:32px;height:2px;background:var(--accent)}
.hero h1{font-size:38px;font-weight:800;line-height:1.15;letter-spacing:-1.5px;color:var(--text-primary);margin-bottom:24px}
.hero h1 em{font-style:normal;background:linear-gradient(135deg,var(--accent),#00F0FF);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero-subtitle{font-size:18px;line-height:1.7;color:var(--text-secondary);max-width:720px;margin-bottom:36px}
.hero-meta-row{display:flex;gap:32px;flex-wrap:wrap;font-size:13px;color:var(--text-muted)}.hero-meta-row span{display:flex;align-items:center;gap:6px}.hero-meta-row .dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.content-wrap{max-width:820px;margin:0 auto;padding:60px 40px 100px}
.section-label{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:2.5px;color:var(--accent);margin-bottom:16px}.section-label::before{content:'';width:20px;height:2px;background:var(--accent)}
h2{font-size:28px;font-weight:700;letter-spacing:-0.8px;color:var(--text-primary);margin-bottom:20px;line-height:1.25}
h3{font-size:20px;font-weight:600;color:var(--text-primary);margin:36px 0 14px;letter-spacing:-0.3px}
p{color:var(--text-secondary);margin-bottom:18px}p strong{color:var(--text-primary);font-weight:600}
.section-block{margin-bottom:64px;padding-top:48px;border-top:1px solid var(--border)}.section-block:first-child{border-top:none;padding-top:0}
.callout{background:var(--bg-card);border:1px solid var(--border);border:1px solid var(--border-accent);border-radius:8px;padding:24px 28px;margin:28px 0}.callout.danger{border-left-color:var(--danger)}.callout.warning{border-left-color:var(--warning)}
.callout-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--accent);margin-bottom:10px}.callout.danger .callout-label{color:var(--danger)}.callout.warning .callout-label{color:var(--warning)}
.callout p{margin-bottom:0;font-size:15px}
.bullet-list{list-style:none;margin:20px 0}.bullet-list li{padding:8px 0 8px 24px;position:relative;color:var(--text-secondary)}.bullet-list li::before{content:'\2190';position:absolute;left:0;color:var(--accent);font-weight:600}

/* ── Day Timeline ── */
.day-block{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:32px 28px;margin:32px 0;position:relative}
.day-block::before{content:'';position:absolute;right:28px;top:72px;bottom:-32px;width:2px;background:var(--border)}
.day-block:last-of-type::before{display:none}
.day-tag{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:2px;padding:4px 12px;border-radius:4px;margin-bottom:16px}
.day-tag.setup{background:rgba(0,255,102,0.15);color:var(--accent-blue)}
.day-tag.week1{background:rgba(0,240,255,0.15);color:var(--accent)}
.day-tag.week2{background:rgba(0,255,102,0.15);color:var(--accent-purple)}
.day-tag.week3{background:rgba(245,158,11,0.15);color:var(--warning)}
.day-tag.month{background:rgba(0,240,255,0.15);color:var(--accent)}
.day-block h3{margin-top:0}
.day-block p{font-size:15px}

/* ── Before/After Grid ── */
.ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:36px 0;border:1px solid var(--border);border-radius:10px;overflow:hidden}
.ba-col{padding:28px 24px}
.ba-col.before{background:rgba(239,68,68,0.03);border-left:1px solid var(--border)}
.ba-col.after{background:rgba(0,240,255,0.03)}
.ba-col h4{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:2px;margin-bottom:20px}
.ba-col.before h4{color:var(--danger)}
.ba-col.after h4{color:var(--accent)}
.ba-item{margin-bottom:18px;font-size:14px;color:var(--text-secondary)}
.ba-item:last-child{margin-bottom:0}
.ba-item strong{display:block;color:var(--text-primary);margin-bottom:2px;font-size:13px}

/* ── Metrics Row ── */
.metrics-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:36px 0}
.metric-card{background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:20px;text-align:center}
.metric-card .number{font-size:28px;font-weight:800;color:var(--accent);letter-spacing:-1px;margin-bottom:4px}
.metric-card .unit{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-muted)}

/* ── Quote Block ── */
.quote-block{background:var(--bg-card);border:1px solid var(--border);border-right:3px solid var(--accent-purple);border-radius:8px;padding:28px;margin:28px 0;font-size:16px;font-style:italic;color:var(--text-secondary);line-height:1.8}
.quote-attr{display:block;margin-top:12px;font-size:13px;font-style:normal;color:var(--text-muted);font-weight:600}

.cta-block{background:linear-gradient(135deg,rgba(0,240,255,0.08),rgba(0,255,102,0.06));border:1px solid var(--border-accent);border-radius:12px;padding:48px 40px;text-align:center;margin:64px 0 0}
.cta-block h2{font-size:26px;margin-bottom:14px}.cta-block p{max-width:560px;margin:0 auto 28px}
.cta-btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:var(--bg-primary);font-weight:700;font-size:14px;padding:14px 32px;border-radius:6px;text-decoration:none;transition:all 0.2s}.cta-btn:hover{box-shadow:0 0 24px var(--accent-glow);transform:translateY(-1px)}
.cta-secondary{display:block;margin-top:14px;font-size:13px;color:var(--text-muted)}
footer{border-top:1px solid var(--border);padding:40px;text-align:center;font-size:13px;color:var(--text-muted)}footer a{color:var(--accent);text-decoration:none}
@media(max-width:768px){.hero{padding:80px 24px 60px}.hero h1{font-size:28px}.content-wrap{padding:40px 24px 80px}.ba-grid{grid-template-columns:1fr}.ba-col.before{border-left:none;border-bottom:1px solid var(--border)}.metrics-row{grid-template-columns:1fr 1fr}.cta-block{padding:36px 24px}.hero-meta-row{flex-direction:column;gap:12px}}

/* ── RTL Support ── */
[dir="rtl"] { direction: rtl; text-align: right; }
[dir="rtl"] .topnav { flex-direction: row-reverse; }
[dir="rtl"] .hero-classification::before { margin-left: 8px; margin-right: 0; }
[dir="rtl"] .section-label::before { margin-left: 10px; margin-right: 0; }
[dir="rtl"] .hero-meta-row { flex-direction: row-reverse; }
[dir="rtl"] .callout { border-left: 1px solid var(--border); border:1px solid var(--border-accent); }
[dir="rtl"] .callout.danger { border-right-color: var(--danger); border-left-color: var(--border); }
[dir="rtl"] .callout.warning { border-right-color: var(--warning); border-left-color: var(--border); }
[dir="rtl"] .numbered-list li { padding: 14px 52px 14px 0; }
[dir="rtl"] .numbered-list li::before { left: auto; right: 0; }
[dir="rtl"] .code-block { direction: ltr; text-align: left; }
[dir="rtl"] .diagram-container svg text { direction: ltr; }


/* ===== Extracted from 09-cto-executive-decision-brief-he.html ===== */
:root{--bg-primary:#0B0F13;--bg-secondary:#101820;--bg-card:#1F2937;--bg-code:#081119;--accent:#00F0FF;--accent-dim:rgba(0,240,255,0.15);--accent-glow:rgba(0,240,255,0.3);--accent-blue:#00FF66;--accent-purple:#00FF66;--text-primary:#EEF7FB;--text-secondary:#B8C8D3;--text-muted:#7E919D;--border:#263443;--border-accent:rgba(0,240,255,0.25);--danger:#FF6B5F;--warning:#FFB800;--font-body:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;--font-mono:'JetBrains Mono','Fira Code',monospace}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg-primary);color:var(--text-primary);font-family:var(--font-body);line-height:1.7;font-size:16px;-webkit-font-smoothing:antialiased}
.topnav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(6,9,15,0.92);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);padding:0 40px;height:64px;display:flex;align-items:center;justify-content:space-between}
.topnav-logo{font-size:20px;font-weight:700;letter-spacing:-0.5px;color:var(--text-primary)}.topnav-logo span{color:var(--accent)}
.topnav-meta{display:flex;align-items:center;gap:24px;font-size:13px;color:var(--text-muted)}
.topnav-badge{background:rgba(0,255,102,0.15);color:var(--accent-purple);padding:4px 12px;border-radius:4px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1px}
.hero{margin-top:64px;padding:100px 40px 80px;background:radial-gradient(ellipse at 30% 40%,rgba(0,255,102,0.06) 0%,transparent 50%),radial-gradient(ellipse at 70% 70%,rgba(0,240,255,0.04) 0%,transparent 50%),var(--bg-primary);border-bottom:1px solid var(--border)}
.hero-inner{max-width:900px;margin:0 auto}
.hero-classification{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:2px;color:var(--accent-purple);margin-bottom:28px}.hero-classification::before{content:'';width:32px;height:2px;background:var(--accent-purple)}
.hero h1{font-size:38px;font-weight:800;line-height:1.15;letter-spacing:-1.5px;color:var(--text-primary);margin-bottom:24px}
.hero h1 em{font-style:normal;background:linear-gradient(135deg,var(--accent-purple),var(--accent-blue));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero h1 .g{background:linear-gradient(135deg,var(--accent),#00F0FF);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero-subtitle{font-size:18px;line-height:1.7;color:var(--text-secondary);max-width:720px;margin-bottom:36px}
.hero-meta-row{display:flex;gap:32px;flex-wrap:wrap;font-size:13px;color:var(--text-muted)}.hero-meta-row span{display:flex;align-items:center;gap:6px}.hero-meta-row .dot{width:6px;height:6px;border-radius:50%;background:var(--accent-purple)}
.content-wrap{max-width:820px;margin:0 auto;padding:60px 40px 100px}
.section-label{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:2.5px;color:var(--accent);margin-bottom:16px}.section-label::before{content:'';width:20px;height:2px;background:var(--accent)}
h2{font-size:28px;font-weight:700;letter-spacing:-0.8px;color:var(--text-primary);margin-bottom:20px;line-height:1.25}
h3{font-size:20px;font-weight:600;color:var(--text-primary);margin:36px 0 14px;letter-spacing:-0.3px}
p{color:var(--text-secondary);margin-bottom:18px}p strong{color:var(--text-primary);font-weight:600}
.section-block{margin-bottom:64px;padding-top:48px;border-top:1px solid var(--border)}.section-block:first-child{border-top:none;padding-top:0}
.callout{background:var(--bg-card);border:1px solid var(--border);border:1px solid var(--border-accent);border-radius:8px;padding:24px 28px;margin:28px 0}.callout.danger{border-left-color:var(--danger)}.callout.warning{border-left-color:var(--warning)}.callout.purple{border-left-color:var(--accent-purple)}
.callout-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--accent);margin-bottom:10px}.callout.danger .callout-label{color:var(--danger)}.callout.warning .callout-label{color:var(--warning)}.callout.purple .callout-label{color:var(--accent-purple)}
.callout p{margin-bottom:0;font-size:15px}
.bullet-list{list-style:none;margin:20px 0}.bullet-list li{padding:8px 0 8px 24px;position:relative;color:var(--text-secondary)}.bullet-list li::before{content:'\2190';position:absolute;left:0;color:var(--accent);font-weight:600}

/* ── Executive Summary Box ── */
.exec-summary{background:linear-gradient(135deg,rgba(0,255,102,0.06),rgba(0,240,255,0.04));border:1px solid rgba(0,255,102,0.2);border-radius:12px;padding:36px 32px;margin:0 0 48px}
.exec-summary h3{margin-top:0;color:var(--accent-purple);font-size:16px;text-transform:uppercase;letter-spacing:1.5px}
.exec-summary .summary-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px;margin-top:20px}
.exec-summary .sg-item{text-align:center}
.exec-summary .sg-item .number{font-size:32px;font-weight:800;color:var(--accent);letter-spacing:-1px}
.exec-summary .sg-item .label{font-size:12px;color:var(--text-muted);margin-top:4px;text-transform:uppercase;letter-spacing:1px;font-weight:600}

/* ── Financial Table ── */
.fin-table{width:100%;border-collapse:collapse;margin:28px 0;font-size:14px}
.fin-table th{text-align:right;padding:14px 16px;background:var(--bg-card);color:var(--text-muted);font-size:11px;text-transform:uppercase;letter-spacing:1.5px;font-weight:700;border-bottom:2px solid var(--border)}
.fin-table td{padding:14px 16px;border-bottom:1px solid var(--border);color:var(--text-secondary)}.fin-table tr:hover td{background:var(--bg-card)}
.fin-table .total td{font-weight:700;color:var(--text-primary);border-top:2px solid var(--border);font-size:15px}
.fin-table .subtotal td{font-weight:600;color:var(--text-primary);background:rgba(17,24,39,0.5)}
.cost{color:var(--danger);font-weight:600}.saved{color:var(--accent);font-weight:600}

/* ── Risk Cards ── */
.risk-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:28px 0}
.risk-card{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:24px}
.risk-card h4{font-size:14px;font-weight:700;margin-bottom:8px}
.risk-card.high{border:1px solid rgba(255,107,95,0.48);}.risk-card.high h4{color:var(--danger)}
.risk-card.med{border:1px solid rgba(255,184,0,0.48);}.risk-card.med h4{color:var(--warning)}
.risk-card.low{border:1px solid var(--border-accent);}.risk-card.low h4{color:var(--accent)}
.risk-card p{font-size:13px;margin-bottom:0}

/* ── Board Slide ── */
.board-slide{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:40px 36px;margin:36px 0}
.board-slide h3{margin-top:0;text-align:center;font-size:22px;margin-bottom:28px}
.board-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.board-quadrant{padding:20px;border:1px solid var(--border);border-radius:8px}
.board-quadrant h4{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:12px}
.board-quadrant.q1 h4{color:var(--danger)}
.board-quadrant.q2 h4{color:var(--warning)}
.board-quadrant.q3 h4{color:var(--accent-blue)}
.board-quadrant.q4 h4{color:var(--accent)}
.board-quadrant p{font-size:13px;margin-bottom:6px}
.board-quadrant p:last-child{margin-bottom:0}

/* ── Numbered List ── */
.numbered-list{list-style:none;counter-reset:steps;margin:24px 0}
.numbered-list li{counter-increment:steps;padding:14px 0 14px 52px;position:relative;color:var(--text-secondary);border-bottom:1px solid rgba(30,41,59,0.5)}
.numbered-list li::before{content:counter(steps, decimal-leading-zero);position:absolute;left:0;top:14px;font-family:var(--font-mono);font-size:14px;font-weight:600;color:var(--accent)}

/* ── Decision Matrix ── */
.decision-table{width:100%;border-collapse:collapse;margin:28px 0;font-size:14px}
.decision-table th{text-align:right;padding:14px 16px;background:var(--bg-card);color:var(--text-muted);font-size:11px;text-transform:uppercase;letter-spacing:1.5px;font-weight:700;border-bottom:2px solid var(--border)}
.decision-table td{padding:14px 16px;border-bottom:1px solid var(--border);color:var(--text-secondary)}.decision-table tr:hover td{background:var(--bg-card)}

.cta-block{background:linear-gradient(135deg,rgba(0,255,102,0.08),rgba(0,240,255,0.06));border:1px solid var(--border-accent);border-radius:12px;padding:48px 40px;text-align:center;margin:64px 0 0}
.cta-block h2{font-size:26px;margin-bottom:14px}.cta-block p{max-width:600px;margin:0 auto 28px}
.cta-btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:var(--bg-primary);font-weight:700;font-size:14px;padding:14px 32px;border-radius:6px;text-decoration:none;transition:all 0.2s}.cta-btn:hover{box-shadow:0 0 24px var(--accent-glow);transform:translateY(-1px)}
.cta-btn-secondary{display:inline-flex;align-items:center;gap:8px;background:transparent;border:1px solid var(--border);color:var(--text-primary);font-weight:600;font-size:14px;padding:14px 28px;border-radius:6px;text-decoration:none;margin-right:12px;transition:all 0.2s}.cta-btn-secondary:hover{border-color:var(--accent)}
.cta-secondary{display:block;margin-top:14px;font-size:13px;color:var(--text-muted)}
footer{border-top:1px solid var(--border);padding:40px;text-align:center;font-size:13px;color:var(--text-muted)}footer a{color:var(--accent);text-decoration:none}
@media(max-width:768px){.hero{padding:80px 24px 60px}.hero h1{font-size:28px}.content-wrap{padding:40px 24px 80px}.exec-summary .summary-grid{grid-template-columns:1fr}.risk-row,.board-grid{grid-template-columns:1fr}.cta-block{padding:36px 24px}.cta-btn-secondary{margin-right:0;margin-top:12px}.hero-meta-row{flex-direction:column;gap:12px}}

/* ── RTL Support ── */
[dir="rtl"] { direction: rtl; text-align: right; }
[dir="rtl"] .topnav { flex-direction: row-reverse; }
[dir="rtl"] .hero-classification::before { margin-left: 8px; margin-right: 0; }
[dir="rtl"] .section-label::before { margin-left: 10px; margin-right: 0; }
[dir="rtl"] .hero-meta-row { flex-direction: row-reverse; }
[dir="rtl"] .callout { border-left: 1px solid var(--border); border:1px solid var(--border-accent); }
[dir="rtl"] .callout.danger { border-right-color: var(--danger); border-left-color: var(--border); }
[dir="rtl"] .callout.warning { border-right-color: var(--warning); border-left-color: var(--border); }
[dir="rtl"] .callout.purple { border-right-color: var(--accent-purple); border-left-color: var(--border); }
[dir="rtl"] .numbered-list li { padding: 14px 52px 14px 0; }
[dir="rtl"] .numbered-list li::before { left: auto; right: 0; }
[dir="rtl"] .code-block { direction: ltr; text-align: left; }
[dir="rtl"] .diagram-container svg text { direction: ltr; }
[dir="rtl"] .risk-card.high { border-left: none; border:1px solid rgba(255,107,95,0.48); }
[dir="rtl"] .risk-card.med { border-left: none; border:1px solid rgba(255,184,0,0.48); }
[dir="rtl"] .risk-card.low { border-left: none; border:1px solid var(--border-accent); }
[dir="rtl"] .bullet-list li { padding: 8px 24px 8px 0; }
[dir="rtl"] .bullet-list li::before { left: auto; right: 0; }


/* ===== Extracted from 10-2am-sync-script-failed-he.html ===== */
:root{--bg-primary:#0B0F13;--bg-secondary:#101820;--bg-card:#1F2937;--bg-code:#081119;--accent:#00F0FF;--accent-dim:rgba(0,240,255,0.15);--accent-glow:rgba(0,240,255,0.3);--accent-blue:#00FF66;--accent-purple:#00FF66;--text-primary:#EEF7FB;--text-secondary:#B8C8D3;--text-muted:#7E919D;--border:#263443;--border-accent:rgba(0,240,255,0.25);--danger:#FF6B5F;--warning:#FFB800;--orange:#f97316;--font-body:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;--font-mono:'JetBrains Mono','Fira Code',monospace}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg-primary);color:var(--text-primary);font-family:var(--font-body);line-height:1.8;font-size:17px;-webkit-font-smoothing:antialiased}
.topnav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(6,9,15,0.92);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);padding:0 40px;height:64px;display:flex;align-items:center;justify-content:space-between}
.topnav-logo{font-size:20px;font-weight:700;letter-spacing:-0.5px;color:var(--text-primary)}.topnav-logo span{color:var(--accent)}
.topnav-meta{display:flex;align-items:center;gap:24px;font-size:13px;color:var(--text-muted)}
.topnav-badge{background:rgba(249,115,22,0.15);color:var(--orange);padding:4px 12px;border-radius:4px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1px}

.hero{margin-top:64px;padding:100px 40px 70px;background:radial-gradient(ellipse at 50% 60%,rgba(249,115,22,0.07) 0%,transparent 60%),var(--bg-primary);border-bottom:1px solid var(--border)}
.hero-inner{max-width:760px;margin:0 auto}
.hero-tag{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--orange);margin-bottom:24px;padding:4px 14px;border:1px solid rgba(249,115,22,0.3);border-radius:20px}
.hero h1{font-size:42px;font-weight:800;line-height:1.1;letter-spacing:-2px;color:var(--text-primary);margin-bottom:24px}
.hero h1 em{font-style:normal;color:var(--orange)}
.hero-subtitle{font-size:19px;line-height:1.8;color:var(--text-secondary);margin-bottom:28px}
.hero-who{font-size:13px;color:var(--text-muted);display:flex;gap:20px;flex-wrap:wrap}
.hero-who span{display:flex;align-items:center;gap:6px}.hero-who .dot{width:5px;height:5px;border-radius:50%;background:var(--orange)}

.content-wrap{max-width:680px;margin:0 auto;padding:56px 40px 100px}
h2{font-size:26px;font-weight:700;letter-spacing:-0.8px;color:var(--text-primary);margin:52px 0 18px;line-height:1.25}
h3{font-size:20px;font-weight:600;color:var(--text-primary);margin:36px 0 12px}
p{color:var(--text-secondary);margin-bottom:18px}
p strong{color:var(--text-primary);font-weight:600}
p em{color:var(--text-muted);font-style:italic}

/* Chat-style notification blocks */
.notification{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:20px 24px;margin:28px 0;display:flex;gap:16px;align-items:flex-start}
.notification .icon{font-size:24px;flex-shrink:0;margin-top:2px}
.notification .body{flex:1}
.notification .time{font-size:11px;color:var(--text-muted);font-family:var(--font-mono);margin-bottom:6px}
.notification .msg{font-size:15px;color:var(--text-secondary)}
.notification .msg strong{color:var(--text-primary)}
.notification.alert{border:1px solid rgba(255,107,95,0.48);}
.notification.calm{border:1px solid var(--border-accent);}

/* Terminal block */
.terminal{background:#0a0e14;border:1px solid #1a1f2e;border-radius:10px;overflow:hidden;margin:28px 0}
.terminal-bar{background:#111620;padding:8px 16px;display:flex;align-items:center;gap:8px;border-bottom:1px solid #1a1f2e}
.terminal-dot{width:10px;height:10px;border-radius:50%}.terminal-dot.r{background:#ff5f57}.terminal-dot.y{background:#febc2e}.terminal-dot.g{background:#28c840}
.terminal-title{font-size:11px;color:var(--text-muted);font-family:var(--font-mono);margin-left:8px}
.terminal-body{padding:20px;font-family:var(--font-mono);font-size:13px;line-height:1.9;color:#7a8ba5;overflow-x:auto;white-space:pre;direction:ltr;text-align:left}
.terminal-body .prompt{color:var(--accent)}
.terminal-body .err{color:var(--danger)}
.terminal-body .warn{color:var(--warning)}
.terminal-body .ok{color:var(--accent)}
.terminal-body .dim{color:#3d4b5e}

/* Pullquote */
.pullquote{border-right:3px solid var(--orange);padding:16px 24px 16px 0;margin:32px 0;font-size:20px;font-weight:600;line-height:1.5;color:var(--text-primary)}

/* Checklist */
.checklist{list-style:none;margin:24px 0}
.checklist li{padding:10px 36px 10px 0;position:relative;color:var(--text-secondary);font-size:16px}
.checklist li::before{content:'\2713';position:absolute;right:0;color:var(--accent);font-weight:700;font-size:18px}

/* Callout */
.callout{background:var(--bg-card);border:1px solid var(--border);border:1px solid var(--border-accent);border-radius:8px;padding:24px 28px;margin:28px 0}
.callout-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--accent);margin-bottom:10px}
.callout p{margin-bottom:0;font-size:15px}

.divider{border:none;border-top:1px solid var(--border);margin:48px 0}

/* CTA */
.cta-block{background:linear-gradient(135deg,rgba(249,115,22,0.06),rgba(0,240,255,0.06));border:1px solid rgba(249,115,22,0.2);border-radius:12px;padding:44px 36px;text-align:center;margin:56px 0 0}
.cta-block h2{font-size:24px;margin:0 0 12px}
.cta-block p{max-width:500px;margin:0 auto 24px;font-size:16px}
.cta-btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:var(--bg-primary);font-weight:700;font-size:14px;padding:14px 32px;border-radius:6px;text-decoration:none;transition:all 0.2s}.cta-btn:hover{box-shadow:0 0 24px var(--accent-glow);transform:translateY(-1px)}
.cta-secondary{display:block;margin-top:14px;font-size:13px;color:var(--text-muted)}

footer{border-top:1px solid var(--border);padding:40px;text-align:center;font-size:13px;color:var(--text-muted)}footer a{color:var(--accent);text-decoration:none}
@media(max-width:768px){.hero{padding:80px 24px 60px}.hero h1{font-size:30px}.content-wrap{padding:40px 24px 80px}.cta-block{padding:32px 20px}.hero-who{flex-direction:column;gap:8px}}

/* ── RTL Support ── */
[dir="rtl"] { direction: rtl; text-align: right; }
[dir="rtl"] .topnav { flex-direction: row-reverse; }
[dir="rtl"] .hero-classification::before { margin-left: 8px; margin-right: 0; }
[dir="rtl"] .section-label::before { margin-left: 10px; margin-right: 0; }
[dir="rtl"] .hero-meta-row { flex-direction: row-reverse; }
[dir="rtl"] .callout { border-left: 1px solid var(--border); border:1px solid var(--border-accent); }
[dir="rtl"] .callout.danger { border-right-color: var(--danger); border-left-color: var(--border); }
[dir="rtl"] .callout.warning { border-right-color: var(--warning); border-left-color: var(--border); }
[dir="rtl"] .numbered-list li { padding: 14px 52px 14px 0; }
[dir="rtl"] .numbered-list li::before { left: auto; right: 0; }
[dir="rtl"] .code-block { direction: ltr; text-align: left; }
[dir="rtl"] .diagram-container svg text { direction: ltr; }
[dir="rtl"] .notification.alert { border-left: none; border:1px solid rgba(255,107,95,0.48); }
[dir="rtl"] .notification.calm { border-left: none; border:1px solid var(--border-accent); }
[dir="rtl"] .notification { flex-direction: row-reverse; }


/* ===== Extracted from 11-youre-not-a-soc-analyst-he.html ===== */
:root{--bg-primary:#0B0F13;--bg-secondary:#101820;--bg-card:#1F2937;--bg-code:#081119;--accent:#00F0FF;--accent-dim:rgba(0,240,255,0.15);--accent-glow:rgba(0,240,255,0.3);--accent-blue:#00FF66;--accent-purple:#00FF66;--text-primary:#EEF7FB;--text-secondary:#B8C8D3;--text-muted:#7E919D;--border:#263443;--border-accent:rgba(0,240,255,0.25);--danger:#FF6B5F;--warning:#FFB800;--orange:#f97316;--pink:#ec4899;--font-body:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;--font-mono:'JetBrains Mono','Fira Code',monospace}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg-primary);color:var(--text-primary);font-family:var(--font-body);line-height:1.8;font-size:17px;-webkit-font-smoothing:antialiased}
.topnav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(6,9,15,0.92);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);padding:0 40px;height:64px;display:flex;align-items:center;justify-content:space-between}
.topnav-logo{font-size:20px;font-weight:700;letter-spacing:-0.5px;color:var(--text-primary)}.topnav-logo span{color:var(--accent)}
.topnav-meta{display:flex;align-items:center;gap:24px;font-size:13px;color:var(--text-muted)}
.topnav-badge{background:rgba(236,72,153,0.15);color:var(--pink);padding:4px 12px;border-radius:4px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1px}

.hero{margin-top:64px;padding:100px 40px 70px;background:radial-gradient(ellipse at 40% 50%,rgba(236,72,153,0.06) 0%,transparent 55%),var(--bg-primary);border-bottom:1px solid var(--border)}
.hero-inner{max-width:760px;margin:0 auto}
.hero-tag{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--pink);margin-bottom:24px;padding:4px 14px;border:1px solid rgba(236,72,153,0.3);border-radius:20px}
.hero h1{font-size:40px;font-weight:800;line-height:1.1;letter-spacing:-2px;color:var(--text-primary);margin-bottom:24px}
.hero h1 em{font-style:normal;color:var(--pink)}
.hero-subtitle{font-size:19px;line-height:1.8;color:var(--text-secondary);margin-bottom:28px}
.hero-who{font-size:13px;color:var(--text-muted);display:flex;gap:20px;flex-wrap:wrap}
.hero-who span{display:flex;align-items:center;gap:6px}.hero-who .dot{width:5px;height:5px;border-radius:50%;background:var(--pink)}

.content-wrap{max-width:680px;margin:0 auto;padding:56px 40px 100px}
h2{font-size:26px;font-weight:700;letter-spacing:-0.8px;color:var(--text-primary);margin:52px 0 18px;line-height:1.25}
h3{font-size:20px;font-weight:600;color:var(--text-primary);margin:36px 0 12px}
p{color:var(--text-secondary);margin-bottom:18px}
p strong{color:var(--text-primary);font-weight:600}

/* Dashboard mockup */
.dashboard-mock{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;overflow:hidden;margin:32px 0}
.dashboard-bar{background:#0f1525;padding:10px 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}
.dashboard-bar .title{font-size:12px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px}
.dashboard-bar .count{font-size:12px;font-family:var(--font-mono);color:var(--danger);font-weight:600}
.dashboard-body{padding:0}
.event-row{display:flex;align-items:center;gap:14px;padding:12px 20px;border-bottom:1px solid rgba(30,41,59,0.4);font-size:14px;transition:background 0.15s}
.event-row:hover{background:rgba(30,41,59,0.3)}
.event-row:last-child{border-bottom:none}
.event-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.event-dot.infra{background:var(--text-muted)}
.event-dot.threat{background:var(--danger)}
.event-time{font-family:var(--font-mono);font-size:11px;color:var(--text-muted);flex-shrink:0;width:52px;direction:ltr;text-align:left}
.event-desc{flex:1;color:var(--text-secondary)}
.event-desc.boring{color:var(--text-muted)}
.event-desc.real{color:var(--text-primary);font-weight:500}
.event-tag{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:1px;padding:3px 8px;border-radius:3px;flex-shrink:0}
.event-tag.ack{background:rgba(100,116,139,0.15);color:var(--text-muted)}
.event-tag.investigate{background:rgba(239,68,68,0.15);color:var(--danger)}

.pullquote{border-right:3px solid var(--pink);padding:16px 24px 16px 0;margin:36px 0;font-size:20px;font-weight:600;line-height:1.5;color:var(--text-primary)}

/* Counter animation */
.counter-block{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:32px;margin:32px 0;text-align:center}
.counter-row{display:flex;justify-content:center;gap:48px;flex-wrap:wrap;margin-bottom:20px}
.counter-item .number{font-size:48px;font-weight:800;letter-spacing:-2px;font-family:var(--font-mono)}
.counter-item .number.bad{color:var(--danger)}
.counter-item .number.good{color:var(--accent)}
.counter-item .label{font-size:12px;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-muted);font-weight:600;margin-top:4px}
.counter-caption{font-size:14px;color:var(--text-muted);font-style:italic}

.divider{border:none;border-top:1px solid var(--border);margin:48px 0}

.callout{background:var(--bg-card);border:1px solid var(--border);border:1px solid var(--border-accent);border-radius:8px;padding:24px 28px;margin:28px 0}
.callout-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--accent);margin-bottom:10px}
.callout p{margin-bottom:0;font-size:15px}

.checklist{list-style:none;margin:24px 0}
.checklist li{padding:10px 36px 10px 0;position:relative;color:var(--text-secondary);font-size:16px}
.checklist li::before{content:'\2713';position:absolute;right:0;color:var(--accent);font-weight:700;font-size:18px}

.cta-block{background:linear-gradient(135deg,rgba(236,72,153,0.06),rgba(0,240,255,0.06));border:1px solid rgba(236,72,153,0.2);border-radius:12px;padding:44px 36px;text-align:center;margin:56px 0 0}
.cta-block h2{font-size:24px;margin:0 0 12px}
.cta-block p{max-width:500px;margin:0 auto 24px;font-size:16px}
.cta-btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:var(--bg-primary);font-weight:700;font-size:14px;padding:14px 32px;border-radius:6px;text-decoration:none;transition:all 0.2s}.cta-btn:hover{box-shadow:0 0 24px var(--accent-glow);transform:translateY(-1px)}
.cta-secondary{display:block;margin-top:14px;font-size:13px;color:var(--text-muted)}

footer{border-top:1px solid var(--border);padding:40px;text-align:center;font-size:13px;color:var(--text-muted)}footer a{color:var(--accent);text-decoration:none}
@media(max-width:768px){.hero{padding:80px 24px 60px}.hero h1{font-size:30px}.content-wrap{padding:40px 24px 80px}.counter-row{gap:24px}.cta-block{padding:32px 20px}.hero-who{flex-direction:column;gap:8px}}

/* ── RTL Support ── */
[dir="rtl"] { direction: rtl; text-align: right; }
[dir="rtl"] .topnav { flex-direction: row-reverse; }
[dir="rtl"] .hero-classification::before { margin-left: 8px; margin-right: 0; }
[dir="rtl"] .section-label::before { margin-left: 10px; margin-right: 0; }
[dir="rtl"] .hero-meta-row { flex-direction: row-reverse; }
[dir="rtl"] .callout { border-left: 1px solid var(--border); border:1px solid var(--border-accent); }
[dir="rtl"] .callout.danger { border-right-color: var(--danger); border-left-color: var(--border); }
[dir="rtl"] .callout.warning { border-right-color: var(--warning); border-left-color: var(--border); }
[dir="rtl"] .numbered-list li { padding: 14px 52px 14px 0; }
[dir="rtl"] .numbered-list li::before { left: auto; right: 0; }
[dir="rtl"] .code-block { direction: ltr; text-align: left; }
[dir="rtl"] .diagram-container svg text { direction: ltr; }
[dir="rtl"] .event-row { flex-direction: row-reverse; }


/* ===== Extracted from 12-dear-checkpoint-dear-fortinet-he.html ===== */
:root{--bg-primary:#0B0F13;--bg-secondary:#101820;--bg-card:#1F2937;--bg-code:#081119;--accent:#00F0FF;--accent-dim:rgba(0,240,255,0.15);--accent-glow:rgba(0,240,255,0.3);--accent-blue:#00FF66;--accent-purple:#00FF66;--text-primary:#EEF7FB;--text-secondary:#B8C8D3;--text-muted:#7E919D;--border:#263443;--border-accent:rgba(0,240,255,0.25);--danger:#FF6B5F;--warning:#FFB800;--orange:#f97316;--yellow:#eab308;--font-body:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;--font-mono:'JetBrains Mono','Fira Code',monospace}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg-primary);color:var(--text-primary);font-family:var(--font-body);line-height:1.8;font-size:17px;-webkit-font-smoothing:antialiased}
.topnav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(6,9,15,0.92);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);padding:0 40px;height:64px;display:flex;align-items:center;justify-content:space-between}
.topnav-logo{font-size:20px;font-weight:700;letter-spacing:-0.5px;color:var(--text-primary)}.topnav-logo span{color:var(--accent)}
.topnav-meta{display:flex;align-items:center;gap:24px;font-size:13px;color:var(--text-muted)}
.topnav-badge{background:rgba(234,179,8,0.15);color:var(--yellow);padding:4px 12px;border-radius:4px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1px}

.hero{margin-top:64px;padding:100px 40px 70px;background:radial-gradient(ellipse at 60% 40%,rgba(234,179,8,0.06) 0%,transparent 55%),var(--bg-primary);border-bottom:1px solid var(--border)}
.hero-inner{max-width:760px;margin:0 auto}
.hero-tag{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--yellow);margin-bottom:24px;padding:4px 14px;border:1px solid rgba(234,179,8,0.3);border-radius:20px}
.hero h1{font-size:38px;font-weight:800;line-height:1.1;letter-spacing:-2px;color:var(--text-primary);margin-bottom:24px}
.hero h1 em{font-style:normal;color:var(--yellow)}
.hero-subtitle{font-size:19px;line-height:1.8;color:var(--text-secondary);margin-bottom:28px}
.hero-who{font-size:13px;color:var(--text-muted);display:flex;gap:20px;flex-wrap:wrap}
.hero-who span{display:flex;align-items:center;gap:6px}.hero-who .dot{width:5px;height:5px;border-radius:50%;background:var(--yellow)}

.content-wrap{max-width:680px;margin:0 auto;padding:56px 40px 100px}
h2{font-size:26px;font-weight:700;letter-spacing:-0.8px;color:var(--text-primary);margin:52px 0 18px;line-height:1.25}
h3{font-size:20px;font-weight:600;color:var(--text-primary);margin:36px 0 12px}
p{color:var(--text-secondary);margin-bottom:18px}
p strong{color:var(--text-primary);font-weight:600}

.divider{border:none;border-top:1px solid var(--border);margin:48px 0}
.pullquote{border-left:3px solid var(--yellow);padding:16px 0 16px 24px;margin:36px 0;font-size:20px;font-weight:600;line-height:1.5;color:var(--text-primary)}

/* Code comparison blocks */
.code-compare{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:28px 0;border:1px solid var(--border);border-radius:10px;overflow:hidden}
.code-compare.triple{grid-template-columns:1fr 1fr 1fr}
.code-col{padding:0;overflow:hidden}
.code-col-header{padding:10px 16px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;border-bottom:1px solid var(--border)}
.code-col:not(:last-child){border-right:1px solid var(--border)}
.code-col:nth-child(1) .code-col-header{color:var(--danger);background:rgba(239,68,68,0.06)}
.code-col:nth-child(2) .code-col-header{color:var(--warning);background:rgba(245,158,11,0.06)}
.code-col:nth-child(3) .code-col-header{color:var(--accent-blue);background:rgba(0,255,102,0.06)}
.code-col-body{padding:14px 16px;font-family:var(--font-mono);font-size:11px;line-height:1.7;color:var(--text-muted);background:var(--bg-code);min-height:200px;white-space:pre;overflow-x:auto}
.code-col-body .k{color:var(--accent)}.code-col-body .s{color:var(--warning)}.code-col-body .c{color:#3d4b5e;font-style:italic}.code-col-body .e{color:var(--danger)}

/* Frustration counter */
.frustration-list{list-style:none;margin:28px 0;counter-reset:rage}
.frustration-list li{counter-increment:rage;padding:14px 0 14px 56px;position:relative;color:var(--text-secondary);border-bottom:1px solid rgba(30,41,59,0.4);font-size:16px}
.frustration-list li::before{content:'#' counter(rage);position:absolute;left:0;top:14px;font-family:var(--font-mono);font-size:14px;font-weight:700;color:var(--yellow)}

/* The "same thing" block */
.same-thing{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:28px;margin:32px 0;text-align:center}
.same-thing .concept{font-size:14px;color:var(--text-muted);text-transform:uppercase;letter-spacing:2px;font-weight:700;margin-bottom:16px}
.same-thing .translations{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.same-thing .trans-item{background:var(--bg-code);border:1px solid var(--border);border-radius:6px;padding:12px;font-family:var(--font-mono);font-size:12px}
.same-thing .trans-item .vendor{font-size:10px;text-transform:uppercase;letter-spacing:1px;font-weight:600;margin-bottom:6px;font-family:var(--font-body)}
.same-thing .trans-item:nth-child(1) .vendor{color:var(--danger)}
.same-thing .trans-item:nth-child(2) .vendor{color:var(--warning)}
.same-thing .trans-item:nth-child(3) .vendor{color:var(--accent-blue)}
.same-thing .trans-item .val{color:var(--text-secondary);word-break:break-all}

.callout{background:var(--bg-card);border:1px solid var(--border);border:1px solid var(--border-accent);border-radius:8px;padding:24px 28px;margin:28px 0}
.callout-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--accent);margin-bottom:10px}
.callout p{margin-bottom:0;font-size:15px}

/* The Cyberm8 way */
.cyberm8-way{background:rgba(0,240,255,0.04);border:1px solid rgba(0,240,255,0.2);border-radius:12px;padding:28px;margin:32px 0}
.cyberm8-way h3{margin-top:0;color:var(--accent)}
.cyberm8-code{background:var(--bg-code);border:1px solid var(--border);border-radius:8px;padding:18px 20px;margin:16px 0;font-family:var(--font-mono);font-size:13px;line-height:1.8;color:var(--text-secondary);white-space:pre;overflow-x:auto}
.cyberm8-code .k{color:var(--accent)}.cyberm8-code .s{color:var(--warning)}.cyberm8-code .c{color:var(--text-muted);font-style:italic}

.cta-block{background:linear-gradient(135deg,rgba(234,179,8,0.06),rgba(0,240,255,0.06));border:1px solid rgba(234,179,8,0.2);border-radius:12px;padding:44px 36px;text-align:center;margin:56px 0 0}
.cta-block h2{font-size:24px;margin:0 0 12px}
.cta-block p{max-width:520px;margin:0 auto 24px;font-size:16px}
.cta-btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:var(--bg-primary);font-weight:700;font-size:14px;padding:14px 32px;border-radius:6px;text-decoration:none;transition:all 0.2s}.cta-btn:hover{box-shadow:0 0 24px var(--accent-glow);transform:translateY(-1px)}
.cta-secondary{display:block;margin-top:14px;font-size:13px;color:var(--text-muted)}

footer{border-top:1px solid var(--border);padding:40px;text-align:center;font-size:13px;color:var(--text-muted)}footer a{color:var(--accent);text-decoration:none}
@media(max-width:768px){.hero{padding:80px 24px 60px}.hero h1{font-size:28px}.content-wrap{padding:40px 24px 80px}.code-compare,.code-compare.triple{grid-template-columns:1fr}.code-col:not(:last-child){border-right:none;border-bottom:1px solid var(--border)}.same-thing .translations{grid-template-columns:1fr}.cta-block{padding:32px 20px}.hero-who{flex-direction:column;gap:8px}}

/* ── RTL Support ── */
[dir="rtl"] { direction: rtl; text-align: right; }
[dir="rtl"] .topnav { flex-direction: row-reverse; }
[dir="rtl"] .hero-classification::before { margin-left: 8px; margin-right: 0; }
[dir="rtl"] .section-label::before { margin-left: 10px; margin-right: 0; }
[dir="rtl"] .hero-meta-row { flex-direction: row-reverse; }
[dir="rtl"] .callout { border-left: 1px solid var(--border); border:1px solid var(--border-accent); }
[dir="rtl"] .callout.danger { border-right-color: var(--danger); border-left-color: var(--border); }
[dir="rtl"] .callout.warning { border-right-color: var(--warning); border-left-color: var(--border); }
[dir="rtl"] .numbered-list li { padding: 14px 52px 14px 0; }
[dir="rtl"] .numbered-list li::before { left: auto; right: 0; }
[dir="rtl"] .code-block { direction: ltr; text-align: left; }
[dir="rtl"] .diagram-container svg text { direction: ltr; }
[dir="rtl"] .pullquote { border-left: none; border:1px solid rgba(255,184,0,0.48); padding: 16px 24px 16px 0; }
[dir="rtl"] .frustration-list li { padding: 14px 56px 14px 0; padding-left: 0; }
[dir="rtl"] .frustration-list li::before { left: auto; right: 0; }
[dir="rtl"] .code-col-body { direction: ltr; text-align: left; }
[dir="rtl"] .cyberm8-code { direction: ltr; text-align: left; }
[dir="rtl"] .hero-who { flex-direction: row-reverse; }


/* ===== Extracted from 13-the-spreadsheet-you-hate-he.html ===== */
:root{--bg-primary:#0B0F13;--bg-secondary:#101820;--bg-card:#1F2937;--bg-code:#081119;--accent:#00F0FF;--accent-dim:rgba(0,240,255,0.15);--accent-glow:rgba(0,240,255,0.3);--accent-blue:#00FF66;--accent-purple:#00FF66;--text-primary:#EEF7FB;--text-secondary:#B8C8D3;--text-muted:#7E919D;--border:#263443;--border-accent:rgba(0,240,255,0.25);--danger:#FF6B5F;--warning:#FFB800;--teal:#14b8a6;--font-body:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;--font-mono:'JetBrains Mono','Fira Code',monospace}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg-primary);color:var(--text-primary);font-family:var(--font-body);line-height:1.8;font-size:17px;-webkit-font-smoothing:antialiased}
.topnav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(6,9,15,0.92);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);padding:0 40px;height:64px;display:flex;align-items:center;justify-content:space-between}
.topnav-logo{font-size:20px;font-weight:700;letter-spacing:-0.5px;color:var(--text-primary)}.topnav-logo span{color:var(--accent)}
.topnav-meta{display:flex;align-items:center;gap:24px;font-size:13px;color:var(--text-muted)}
.topnav-badge{background:rgba(20,184,166,0.15);color:var(--teal);padding:4px 12px;border-radius:4px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1px}

.hero{margin-top:64px;padding:100px 40px 70px;background:radial-gradient(ellipse at 50% 50%,rgba(20,184,166,0.06) 0%,transparent 55%),var(--bg-primary);border-bottom:1px solid var(--border)}
.hero-inner{max-width:760px;margin:0 auto}
.hero-tag{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--teal);margin-bottom:24px;padding:4px 14px;border:1px solid rgba(20,184,166,0.3);border-radius:20px}
.hero h1{font-size:38px;font-weight:800;line-height:1.1;letter-spacing:-2px;color:var(--text-primary);margin-bottom:24px}
.hero h1 em{font-style:normal;color:var(--teal)}
.hero-subtitle{font-size:19px;line-height:1.8;color:var(--text-secondary);margin-bottom:28px}
.hero-who{font-size:13px;color:var(--text-muted);display:flex;gap:20px;flex-wrap:wrap}
.hero-who span{display:flex;align-items:center;gap:6px}.hero-who .dot{width:5px;height:5px;border-radius:50%;background:var(--teal)}

.content-wrap{max-width:680px;margin:0 auto;padding:56px 40px 100px}
h2{font-size:26px;font-weight:700;letter-spacing:-0.8px;color:var(--text-primary);margin:52px 0 18px;line-height:1.25}
h3{font-size:20px;font-weight:600;color:var(--text-primary);margin:36px 0 12px}
p{color:var(--text-secondary);margin-bottom:18px}
p strong{color:var(--text-primary);font-weight:600}
.divider{border:none;border-top:1px solid var(--border);margin:48px 0}
.pullquote{border-left:3px solid var(--teal);padding:16px 0 16px 24px;margin:36px 0;font-size:20px;font-weight:600;line-height:1.5;color:var(--text-primary)}

/* Spreadsheet mockup */
.spreadsheet{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;overflow:hidden;margin:32px 0}
.spreadsheet-bar{background:#0f1525;padding:10px 20px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--border)}
.spreadsheet-bar .file-icon{width:16px;height:16px;background:rgba(20,184,166,0.2);border-radius:2px;display:flex;align-items:center;justify-content:center;font-size:8px;color:var(--teal);font-weight:700}
.spreadsheet-bar .file-name{font-size:12px;color:var(--text-muted);font-family:var(--font-mono)}
.spreadsheet-bar .file-shame{font-size:10px;color:var(--text-muted);font-style:italic;margin-left:auto}
.ss-table{width:100%;border-collapse:collapse;font-size:13px}
.ss-table th{text-align:left;padding:8px 14px;background:#081119;color:var(--text-muted);font-size:10px;text-transform:uppercase;letter-spacing:1.5px;font-weight:700;border-bottom:1px solid var(--border);font-family:var(--font-mono)}
.ss-table th:first-child{width:32px;text-align:center}
.ss-table td{padding:8px 14px;border-bottom:1px solid rgba(30,41,59,0.3);color:var(--text-secondary);font-size:12px}
.ss-table td:first-child{text-align:center;color:var(--text-muted);font-family:var(--font-mono);font-size:10px;font-weight:600}
.ss-table tr:hover td{background:rgba(30,41,59,0.2)}
.ss-ok{color:var(--accent)}
.ss-warn{color:var(--warning)}
.ss-fail{color:var(--danger)}
.ss-unknown{color:var(--text-muted);font-style:italic}

/* Time tracker */
.time-block{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:28px;margin:32px 0}
.time-block h3{margin-top:0;font-size:16px;text-transform:uppercase;letter-spacing:1px;color:var(--teal);margin-bottom:20px}
.time-bar{margin-bottom:16px}
.time-bar-label{display:flex;justify-content:space-between;font-size:13px;margin-bottom:6px}
.time-bar-label .task{color:var(--text-secondary)}
.time-bar-label .hours{color:var(--text-primary);font-weight:600;font-family:var(--font-mono)}
.time-bar-track{height:8px;background:rgba(30,41,59,0.5);border-radius:4px;overflow:hidden}
.time-bar-fill{height:100%;border-radius:4px}
.time-bar-fill.waste{background:var(--danger)}
.time-bar-fill.ok{background:var(--accent)}
.time-bar-fill.meh{background:var(--warning)}
.time-total{display:flex;justify-content:space-between;padding-top:16px;border-top:1px solid var(--border);font-size:14px;font-weight:700}
.time-total .waste{color:var(--danger)}

.callout{background:var(--bg-card);border:1px solid var(--border);border:1px solid var(--border-accent);border-radius:8px;padding:24px 28px;margin:28px 0}
.callout.teal{border-left-color:var(--teal)}
.callout-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--accent);margin-bottom:10px}
.callout.teal .callout-label{color:var(--teal)}
.callout p{margin-bottom:0;font-size:15px}

.checklist{list-style:none;margin:24px 0}
.checklist li{padding:10px 0 10px 36px;position:relative;color:var(--text-secondary);font-size:16px}
.checklist li::before{content:'✓';position:absolute;left:0;color:var(--accent);font-weight:700;font-size:18px}

/* Before/After mini */
.ba-mini{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:32px 0;border:1px solid var(--border);border-radius:10px;overflow:hidden}
.ba-side{padding:24px}
.ba-side.before{background:rgba(239,68,68,0.03);border-right:1px solid var(--border)}
.ba-side.after{background:rgba(0,240,255,0.03)}
.ba-side h4{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:8px}
.ba-side.before h4{color:var(--danger)}
.ba-side.after h4{color:var(--accent)}
.ba-side .big{font-size:36px;font-weight:800;margin-bottom:4px;letter-spacing:-1px}
.ba-side.before .big{color:var(--danger)}
.ba-side.after .big{color:var(--accent)}
.ba-side p{font-size:13px;margin:0}

.cta-block{background:linear-gradient(135deg,rgba(20,184,166,0.06),rgba(0,240,255,0.06));border:1px solid rgba(20,184,166,0.2);border-radius:12px;padding:44px 36px;text-align:center;margin:56px 0 0}
.cta-block h2{font-size:24px;margin:0 0 12px}
.cta-block p{max-width:520px;margin:0 auto 24px;font-size:16px}
.cta-btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:var(--bg-primary);font-weight:700;font-size:14px;padding:14px 32px;border-radius:6px;text-decoration:none;transition:all 0.2s}.cta-btn:hover{box-shadow:0 0 24px var(--accent-glow);transform:translateY(-1px)}
.cta-secondary{display:block;margin-top:14px;font-size:13px;color:var(--text-muted)}

footer{border-top:1px solid var(--border);padding:40px;text-align:center;font-size:13px;color:var(--text-muted)}footer a{color:var(--accent);text-decoration:none}
@media(max-width:768px){.hero{padding:80px 24px 60px}.hero h1{font-size:28px}.content-wrap{padding:40px 24px 80px}.ba-mini{grid-template-columns:1fr}.ba-side.before{border-right:none;border-bottom:1px solid var(--border)}.cta-block{padding:32px 20px}.hero-who{flex-direction:column;gap:8px}}

/* ── RTL Support ── */
[dir="rtl"] { direction: rtl; text-align: right; }
[dir="rtl"] .topnav { flex-direction: row-reverse; }
[dir="rtl"] .hero-classification::before { margin-left: 8px; margin-right: 0; }
[dir="rtl"] .section-label::before { margin-left: 10px; margin-right: 0; }
[dir="rtl"] .hero-meta-row { flex-direction: row-reverse; }
[dir="rtl"] .callout { border-left: 1px solid var(--border); border:1px solid var(--border-accent); }
[dir="rtl"] .callout.teal { border-right-color: var(--teal); border-left-color: var(--border); }
[dir="rtl"] .callout.danger { border-right-color: var(--danger); border-left-color: var(--border); }
[dir="rtl"] .callout.warning { border-right-color: var(--warning); border-left-color: var(--border); }
[dir="rtl"] .numbered-list li { padding: 14px 52px 14px 0; }
[dir="rtl"] .numbered-list li::before { left: auto; right: 0; }
[dir="rtl"] .code-block { direction: ltr; text-align: left; }
[dir="rtl"] .diagram-container svg text { direction: ltr; }
[dir="rtl"] .pullquote { border-left: none; border:1px solid var(--border-accent); padding: 16px 24px 16px 0; }
[dir="rtl"] .checklist li { padding: 10px 36px 10px 0; padding-left: 0; }
[dir="rtl"] .checklist li::before { left: auto; right: 0; }
[dir="rtl"] .hero-who { flex-direction: row-reverse; }
[dir="rtl"] .ss-table th { text-align: right; }
[dir="rtl"] .spreadsheet-bar .file-shame { margin-left: 0; margin-right: auto; }
[dir="rtl"] .ba-side.before { border-right: none; border-left: 1px solid var(--border); }


/* ===== Extracted from 14-how-to-pitch-your-boss-he.html ===== */
:root{--bg-primary:#0B0F13;--bg-secondary:#101820;--bg-card:#1F2937;--bg-code:#081119;--accent:#00F0FF;--accent-dim:rgba(0,240,255,0.15);--accent-glow:rgba(0,240,255,0.3);--accent-blue:#00FF66;--accent-purple:#00FF66;--text-primary:#EEF7FB;--text-secondary:#B8C8D3;--text-muted:#7E919D;--border:#263443;--border-accent:rgba(0,240,255,0.25);--danger:#FF6B5F;--warning:#FFB800;--violet:#7c3aed;--font-body:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;--font-mono:'JetBrains Mono','Fira Code',monospace}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg-primary);color:var(--text-primary);font-family:var(--font-body);line-height:1.8;font-size:17px;-webkit-font-smoothing:antialiased}
.topnav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(6,9,15,0.92);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);padding:0 40px;height:64px;display:flex;align-items:center;justify-content:space-between}
.topnav-logo{font-size:20px;font-weight:700;letter-spacing:-0.5px;color:var(--text-primary)}.topnav-logo span{color:var(--accent)}
.topnav-meta{display:flex;align-items:center;gap:24px;font-size:13px;color:var(--text-muted)}
.topnav-badge{background:rgba(124,58,237,0.15);color:var(--violet);padding:4px 12px;border-radius:4px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1px}

.hero{margin-top:64px;padding:100px 40px 70px;background:radial-gradient(ellipse at 40% 45%,rgba(124,58,237,0.07) 0%,transparent 55%),var(--bg-primary);border-bottom:1px solid var(--border)}
.hero-inner{max-width:760px;margin:0 auto}
.hero-tag{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--violet);margin-bottom:24px;padding:4px 14px;border:1px solid rgba(124,58,237,0.3);border-radius:20px}
.hero h1{font-size:36px;font-weight:800;line-height:1.1;letter-spacing:-2px;color:var(--text-primary);margin-bottom:24px}
.hero h1 em{font-style:normal;color:var(--violet)}
.hero h1 .g{color:var(--accent)}
.hero-subtitle{font-size:19px;line-height:1.8;color:var(--text-secondary);margin-bottom:28px}
.hero-who{font-size:13px;color:var(--text-muted);display:flex;gap:20px;flex-wrap:wrap}
.hero-who span{display:flex;align-items:center;gap:6px}.hero-who .dot{width:5px;height:5px;border-radius:50%;background:var(--violet)}

.content-wrap{max-width:680px;margin:0 auto;padding:56px 40px 100px}
h2{font-size:26px;font-weight:700;letter-spacing:-0.8px;color:var(--text-primary);margin:52px 0 18px;line-height:1.25}
h3{font-size:20px;font-weight:600;color:var(--text-primary);margin:36px 0 12px}
p{color:var(--text-secondary);margin-bottom:18px}
p strong{color:var(--text-primary);font-weight:600}
.divider{border:none;border-top:1px solid var(--border);margin:48px 0}
.pullquote{border-left:3px solid var(--violet);padding:16px 0 16px 24px;margin:36px 0;font-size:20px;font-weight:600;line-height:1.5;color:var(--text-primary)}

/* Step cards */
.step-card{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:28px;margin:28px 0;position:relative}
.step-card::before{content:attr(data-step);position:absolute;top:-14px;left:24px;background:var(--violet);color:white;font-size:11px;font-weight:700;padding:4px 14px;border-radius:20px;letter-spacing:1px;text-transform:uppercase}
.step-card h3{margin-top:8px;color:var(--text-primary)}
.step-card p{font-size:15px}

/* Script template */
.script-block{background:var(--bg-code);border:1px solid var(--border);border-radius:10px;overflow:hidden;margin:28px 0}
.script-header{background:#111620;padding:10px 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}
.script-header .label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--violet)}
.script-header .hint{font-size:11px;color:var(--text-muted);font-style:italic}
.script-body{padding:24px;font-size:15px;line-height:2;color:var(--text-secondary)}
.script-body .blank{background:rgba(124,58,237,0.15);color:var(--violet);padding:2px 8px;border-radius:4px;font-family:var(--font-mono);font-size:13px;font-weight:600}
.script-body .emphasis{color:var(--text-primary);font-weight:600}

/* Do / Don't grid */
.do-dont{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:28px 0;border:1px solid var(--border);border-radius:10px;overflow:hidden}
.do-side,.dont-side{padding:24px}
.dont-side{background:rgba(239,68,68,0.03);border-right:1px solid var(--border)}
.do-side{background:rgba(0,240,255,0.03)}
.do-side h4,.dont-side h4{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:16px}
.dont-side h4{color:var(--danger)}
.do-side h4{color:var(--accent)}
.do-item,.dont-item{padding:8px 0 8px 24px;position:relative;font-size:14px;color:var(--text-secondary);margin-bottom:6px}
.dont-item::before{content:'✕';position:absolute;left:0;color:var(--danger);font-weight:700}
.do-item::before{content:'✓';position:absolute;left:0;color:var(--accent);font-weight:700}

/* Objection handler */
.objection{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;margin:24px 0;overflow:hidden}
.objection-q{padding:16px 24px;border-bottom:1px solid var(--border);display:flex;align-items:flex-start;gap:12px}
.objection-q .icon{color:var(--danger);font-size:16px;font-weight:700;flex-shrink:0;margin-top:2px}
.objection-q .text{font-size:15px;font-weight:600;color:var(--text-primary);font-style:italic}
.objection-a{padding:16px 24px;display:flex;align-items:flex-start;gap:12px}
.objection-a .icon{color:var(--accent);font-size:16px;font-weight:700;flex-shrink:0;margin-top:2px}
.objection-a .text{font-size:15px;color:var(--text-secondary)}

.callout{background:var(--bg-card);border:1px solid var(--border);border:1px solid var(--border-accent);border-radius:8px;padding:24px 28px;margin:28px 0}
.callout.violet{border-left-color:var(--violet)}
.callout-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--accent);margin-bottom:10px}
.callout.violet .callout-label{color:var(--violet)}
.callout p{margin-bottom:0;font-size:15px}

.checklist{list-style:none;margin:24px 0}
.checklist li{padding:10px 0 10px 36px;position:relative;color:var(--text-secondary);font-size:16px}
.checklist li::before{content:'✓';position:absolute;left:0;color:var(--accent);font-weight:700;font-size:18px}

/* Email template */
.email-block{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;overflow:hidden;margin:28px 0}
.email-header{background:#0f1525;padding:12px 20px;border-bottom:1px solid var(--border)}
.email-field{display:flex;gap:8px;font-size:12px;margin-bottom:4px}
.email-field:last-child{margin-bottom:0}
.email-field .label{color:var(--text-muted);font-weight:600;width:50px}
.email-field .value{color:var(--text-secondary)}
.email-body{padding:24px;font-size:15px;line-height:1.9;color:var(--text-secondary)}
.email-body p{margin-bottom:14px}
.email-body p:last-child{margin-bottom:0}

.cta-block{background:linear-gradient(135deg,rgba(124,58,237,0.06),rgba(0,240,255,0.06));border:1px solid rgba(124,58,237,0.2);border-radius:12px;padding:44px 36px;text-align:center;margin:56px 0 0}
.cta-block h2{font-size:24px;margin:0 0 12px}
.cta-block p{max-width:520px;margin:0 auto 24px;font-size:16px}
.cta-btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:var(--bg-primary);font-weight:700;font-size:14px;padding:14px 32px;border-radius:6px;text-decoration:none;transition:all 0.2s}.cta-btn:hover{box-shadow:0 0 24px var(--accent-glow);transform:translateY(-1px)}
.cta-secondary{display:block;margin-top:14px;font-size:13px;color:var(--text-muted)}

footer{border-top:1px solid var(--border);padding:40px;text-align:center;font-size:13px;color:var(--text-muted)}footer a{color:var(--accent);text-decoration:none}
@media(max-width:768px){.hero{padding:80px 24px 60px}.hero h1{font-size:28px}.content-wrap{padding:40px 24px 80px}.do-dont{grid-template-columns:1fr}.dont-side{border-right:none;border-bottom:1px solid var(--border)}.cta-block{padding:32px 20px}.hero-who{flex-direction:column;gap:8px}}

/* ── RTL Support ── */
[dir="rtl"] { direction: rtl; text-align: right; }
[dir="rtl"] .topnav { flex-direction: row-reverse; }
[dir="rtl"] .hero-classification::before { margin-left: 8px; margin-right: 0; }
[dir="rtl"] .section-label::before { margin-left: 10px; margin-right: 0; }
[dir="rtl"] .hero-meta-row { flex-direction: row-reverse; }
[dir="rtl"] .callout { border-left: 1px solid var(--border); border:1px solid var(--border-accent); }
[dir="rtl"] .callout.violet { border-right-color: var(--violet); border-left-color: var(--border); }
[dir="rtl"] .callout.danger { border-right-color: var(--danger); border-left-color: var(--border); }
[dir="rtl"] .callout.warning { border-right-color: var(--warning); border-left-color: var(--border); }
[dir="rtl"] .numbered-list li { padding: 14px 52px 14px 0; }
[dir="rtl"] .numbered-list li::before { left: auto; right: 0; }
[dir="rtl"] .code-block { direction: ltr; text-align: left; }
[dir="rtl"] .diagram-container svg text { direction: ltr; }
[dir="rtl"] .pullquote { border-left: none; border:1px solid rgba(0,255,102,0.38); padding: 16px 24px 16px 0; }
[dir="rtl"] .checklist li { padding: 10px 36px 10px 0; padding-left: 0; }
[dir="rtl"] .checklist li::before { left: auto; right: 0; }
[dir="rtl"] .hero-who { flex-direction: row-reverse; }
[dir="rtl"] .step-card::before { left: auto; right: 24px; }
[dir="rtl"] .do-item, [dir="rtl"] .dont-item { padding: 8px 24px 8px 0; padding-left: 0; }
[dir="rtl"] .do-item::before, [dir="rtl"] .dont-item::before { left: auto; right: 0; }
[dir="rtl"] .dont-side { border-right: none; border-left: 1px solid var(--border); }
[dir="rtl"] .objection-q, [dir="rtl"] .objection-a { flex-direction: row-reverse; }
[dir="rtl"] .script-header { flex-direction: row-reverse; }
[dir="rtl"] .email-field { flex-direction: row-reverse; }
[dir="rtl"] .email-field .label { text-align: right; }

/* ===== Cyberm8 shared article normalization ===== */
:root {
  --bg-primary: #0B0F13;
  --bg-secondary: #101820;
  --bg-card: #1F2937;
  --bg-card-hover: #273445;
  --bg-code: #081119;
  --accent: #00F0FF;
  --accent-dim: rgba(0,240,255,0.14);
  --accent-glow: rgba(0,240,255,0.28);
  --accent-blue: #00FF66;
  --accent-purple: #00FF66;
  --text-primary: #EEF7FB;
  --text-secondary: #B8C8D3;
  --text-muted: #7E919D;
  --border: #263443;
  --border-accent: rgba(0,240,255,0.28);
  --danger: #FF6B5F;
  --warning: #FFB800;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

body.blog-post-page {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-body);
}

.blog-post-page .hero {
  margin-top: 0;
}

.blog-post-page .hero h1,
.blog-post-page h2,
.blog-post-page h3,
.blog-post-page .hero-classification,
.blog-post-page .section-label,
.blog-post-page .callout-label,
.blog-post-page .compare-table th,
.blog-post-page .compliance-table th {
  font-family: var(--font-mono);
}

.blog-post-page .hero h1,
.blog-post-page h2,
.blog-post-page h3 {
  letter-spacing: 0;
}

.blog-post-page .hero h1 em,
.blog-post-page .hero h1 .g,
.blog-post-page .hero h1 .highlight {
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--accent) !important;
}

.blog-post-page .callout,
.blog-post-page .pullquote {
  background: linear-gradient(145deg, rgba(0,240,255,0.06), transparent 54%), var(--bg-card) !important;
  border: 1px solid var(--border-accent) !important;
  border-radius: 8px;
}

.blog-post-page .callout.danger,
.blog-post-page .notification.alert {
  border-color: rgba(255,107,95,0.48) !important;
  background: linear-gradient(145deg, rgba(255,107,95,0.08), transparent 54%), var(--bg-card) !important;
}

.blog-post-page .callout.warning {
  border-color: rgba(255,184,0,0.48) !important;
  background: linear-gradient(145deg, rgba(255,184,0,0.08), transparent 54%), var(--bg-card) !important;
}

.blog-post-page .cta-btn,
.blog-post-page .btn-primary {
  background: var(--accent) !important;
  color: var(--bg-primary) !important;
}

.blog-post-page .cta-btn.secondary,
.blog-post-page .btn-secondary {
  background: rgba(255,255,255,0.03) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-accent) !important;
}

.blog-post-page .compare-table,
.blog-post-page .compliance-table,
.blog-post-page table,
.blog-post-page .code-block,
.blog-post-page .cyberm8-code,
.blog-post-page .code-col-body {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

.blog-post-page .compare-table,
.blog-post-page .compliance-table,
.blog-post-page table {
  white-space: nowrap;
}

.blog-post-page .diagram-container svg,
.blog-post-page svg {
  max-width: 100%;
  height: auto;
}

@media (max-width: 768px) {
  .blog-post-page .hero {
    padding-top: 64px;
  }
}

/* Final site-wide article polish */
.blog-post-page .hero-inner {
  max-width: min(980px, 100%);
}

.blog-post-page {
  font-family: var(--font-body);
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  text-rendering: optimizeLegibility;
}

.blog-post-page .hero h1,
.blog-post-page h2,
.blog-post-page h3,
.blog-post-page .cta-block h2 {
  font-family: var(--font-display);
  letter-spacing: 0;
}

.blog-post-page .hero h1 {
  max-width: 900px;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.08;
}

.blog-post-page h2 {
  font-size: clamp(25px, 2.6vw, 34px);
  line-height: 1.16;
}

.blog-post-page p,
.blog-post-page li {
  line-height: 1.76;
}

.blog-post-page .hero-classification,
.blog-post-page .section-label,
.blog-post-page .topnav-badge,
.blog-post-page .callout-label,
.blog-post-page .diagram-caption,
.blog-post-page .code-block,
.blog-post-page .code-header {
  font-family: var(--font-title);
}

.blog-post-page .section-block {
  margin-bottom: clamp(62px, 8vw, 96px);
  padding-top: clamp(42px, 6vw, 72px);
}

.blog-post-page .callout,
.blog-post-page .diagram-container,
.blog-post-page .code-block,
.blog-post-page .cta-block {
  box-shadow: 0 22px 68px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(238, 247, 251, 0.04);
}

.blog-post-page .cta-block {
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 18% 20%, rgba(57, 216, 242, 0.18), transparent 28%),
    linear-gradient(135deg, rgba(57, 216, 242, 0.12), transparent),
    var(--panel);
}