.hero {
  background: radial-gradient(circle at 20% 30%, rgba(99,102,241,0.2), transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(14,165,233,0.15), transparent 50%),
        linear-gradient(135deg, #0b1120 0%, #111827 100%);
  border-radius: 1rem;
}
    .hero h1, .hero p { color: #ffffff; }
    .hero p { opacity: 0.84; }
    .hero-card {
      background: #ffffff;
      border: 1px solid #e9ecef;
      border-radius: 14px;
      padding: 1.25rem;
      height: 100%;
    }

    .architecture {
      border: 1px solid #e9ecef;
      border-radius: 14px;
      padding: 1.25rem;
      background: #ffffff;
    }
    .arch-box {
      border: 1px solid #e9ecef;
      border-radius: 14px;
      padding: 1rem;
      background: #fbfcfe;
      height: 100%;
    }
    .arch-title { font-weight: 700; }
    .arch-desc { color: #6c757d; font-size: 0.95rem; }
    .divider { height: 1px; background: #e9ecef; margin: 3rem 0; }

    .callout {
      border: 1px solid #e9ecef;
      border-left: 5px solid #0d6efd;
      background: #f8f9fa;
      padding: 1rem 1.15rem;
    }
    .warning {
      border: 1px solid #f5c2c7;
      border-left: 5px solid #dc3545;
      background: #fff8f8;
      padding: 1rem 1.15rem;
    }

    .code-header {
      background: #e9ecef;
      padding: 7px 15px;
      font-size: 0.85rem;
      font-weight: 700;
      border-radius: 8px 8px 0 0;
      border: 1px solid #dee2e6;
      border-bottom: none;
    }
    pre {
      margin-top: 0;
      background: #f8f9fa;
      padding: 15px;
      border-radius: 0 0 8px 8px;
      overflow-x: auto;
      font-size: 0.875rem;
      border: 1px solid #dee2e6;
    }

    .section-kicker {
      letter-spacing: 0.06em;
      text-transform: uppercase;
      font-size: 0.82rem;
      color: #6c757d;
      font-weight: 700;
      margin-bottom: 0.35rem;
    }

    .toc a { text-decoration: none; }
    .toc a:hover { text-decoration: underline; }