:root {
        --bh-primary: #0d6efd;    
        --bh-accent: #ff8a3d;       /* warm accent for subtle highlights */
        --bh-bg: #f7f9fc;           /* page background */
        --bh-surface: #ffffff;      /* section surface */
        --bh-border: #e6edf5;       /* light border */
        --bh-ink: #0f172a;          /* primary text */
        --bh-ink-muted: #475569;    /* secondary text */
        --bh-radius: 16px;
      }

      /* Page wrapper */
      .bh-page {
        background: var(--bh-bg);
        color: var(--bh-ink);
      }

      /* Hero */
      .bh-hero {
        position: relative;
        border-radius: calc(var(--bh-radius) + 8px);
        background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
        border: 1px solid var(--bh-border);
        overflow: hidden;
      }
      .bh-hero::after {
        /* Decorative soft stripe */
        content: "";
        position: absolute;
        inset: -20% -10% auto -10%;
        height: 240px;
        background: radial-gradient(1200px 160px at 20% 0%,
          rgba(13, 110, 253, 0.08),
          rgba(255, 138, 61, 0.05),
          transparent 60%);
        pointer-events: none;
      }
      .bh-hero-title {
        letter-spacing: -0.02em;
      }
      .bh-hero-sub {
        color: var(--bh-ink-muted);
      }
      .bh-hero-illustration {
        max-height: 260px;
        object-fit: cover;
        border: 1px solid var(--bh-border);
        border-radius: 12px;
        background: #fff;
      }

      /* Breadcrumb */
      .bh-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
        color: #94a3b8;
      }
      .bh-breadcrumb a {
        text-decoration: none;
      }

      /* Sticky subnav for anchors */
      .bh-subnav {
        position: sticky;
        top: 0;
        z-index: 5;
        background: rgba(255, 255, 255, 0.8);
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
        border: 1px solid var(--bh-border);
        border-radius: var(--bh-radius);
      }
      .bh-subnav .nav-link {
        color: var(--bh-ink-muted);
        border-radius: 999px;
        padding: 0.5rem 0.875rem;
      }
      .bh-subnav .nav-link.active,
      .bh-subnav .nav-link:hover {
        color: var(--bh-ink);
        background: linear-gradient(180deg, #fff, #f4f8ff);
        border: 1px solid var(--bh-border);
      }

      /* Section group */
      .bh-section {
        position: relative;
        border: 1px solid var(--bh-border);
        background: var(--bh-surface);
        border-radius: var(--bh-radius);
        padding: 1.25rem;
      }

      /* Feature “tiles” (not cards): accent left bar + media layout */
      .bh-tile {
        position: relative;
        border: 1px solid var(--bh-border);
        border-radius: 14px;
        background: linear-gradient(180deg, #ffffff, #fbfdff);
        padding: 1rem 1rem 1rem 1.25rem;
        transition: transform 250ms ease, border-color 250ms ease, box-shadow 250ms ease;
        overflow: hidden;
      }
      .bh-tile::before {
        content: "";
        position: absolute;
        left: 0;
        top: 8px;
        bottom: 8px;
        width: 4px;
        border-radius: 4px;
        background: linear-gradient(180deg, var(--bh-primary), #66a8ff);
        transform: scaleY(0.6);
        transform-origin: top;
        transition: transform 250ms ease;
      }
      .bh-tile:hover {
        transform: translateY(-2px);
        border-color: #d8e6fb;
        box-shadow: 0 6px 24px rgba(13, 110, 253, 0.08);
      }
      .bh-tile:hover::before {
        transform: scaleY(1);
      }

      .bh-media {
        display: grid;
        grid-template-columns: 88px 1fr;
        gap: 1rem;
        align-items: center;
      }
      .bh-thumb {
        width: 88px;
        height: 88px;
        border-radius: 12px;
        border: 1px solid var(--bh-border);
        object-fit: cover;
        background: #fff;
      }
      .bh-kicker {
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        font-size: 0.825rem;
        color: var(--bh-primary);
        font-weight: 600;
        letter-spacing: .02em;
      }
      .bh-icon {
        width: 22px;
        height: 22px;
        border-radius: 6px;
        display: grid;
        place-items: center;
        color: #fff;
        background: linear-gradient(180deg, var(--bh-primary), #3e86ff);
      }
      .bh-title {
        margin: 0.125rem 0 0.25rem;
        font-size: 1.125rem;
        font-weight: 700;
        letter-spacing: -0.01em;
      }
      .bh-desc {
        margin: 0;
        color: var(--bh-ink-muted);
      }

      /* Reveal on scroll */
      .bh-reveal {
        opacity: 0;
        transform: translateY(16px);
        transition: opacity 600ms ease, transform 600ms ease;
      }
      .bh-reveal.bh-in {
        opacity: 1;
        transform: none;
      }

      /* Anchor header offset */
      .bh-anchor {
        scroll-margin-top: 96px;
      }

      /* Simple divider */
      .bh-divider {
        height: 1px;
        background: var(--bh-border);
        margin: 0.75rem 0 1.25rem;
      }

      /* Responsive tweaks */
      @media (max-width: 767.98px) {
        .bh-media {
          grid-template-columns: 72px 1fr;
        }
        .bh-thumb { width: 72px; height: 72px; }
      }