.bzh-ambient {
        position: absolute;
        top: 0;
        left: 50%;
        width: 100vw;
        margin-left: -50vw;
        height: 110vh;
        z-index: 0;
        pointer-events: none;
        overflow: hidden;
        -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 20%, #000 0%, transparent 78%);
                mask-image: radial-gradient(ellipse 70% 70% at 50% 20%, #000 0%, transparent 78%);
    }
    .bzh-ambient-blob {
        position: absolute;
        border-radius: 50%;
        pointer-events: none;
        will-change: transform;
        transform: translateZ(0);
        background: radial-gradient(circle, var(--glow-color) 0%, transparent 68%);
    }
    .bzh-ambient-a { width: 640px; height: 640px; top: -6%; left: 8%; opacity: 0.9; animation: uchFloat1 22s cubic-bezier(0.37, 0, 0.63, 1) infinite; }
    .bzh-ambient-b { width: 760px; height: 760px; top: 18%; right: -6%; opacity: 0.75; animation: uchFloat2 28s cubic-bezier(0.37, 0, 0.63, 1) infinite; }
    .bzh-ambient-c { width: 520px; height: 520px; top: 42%; left: -4%; opacity: 0.7; animation: uchFloat3 34s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
    @keyframes uchFloat1 { 0%{transform:translate(0,0) scale(1);} 22%{transform:translate(130px,70px) scale(1.14);} 48%{transform:translate(-70px,150px) scale(0.9);} 74%{transform:translate(-140px,55px) scale(1.08);} 100%{transform:translate(0,0) scale(1);} }
    @keyframes uchFloat2 { 0%{transform:translate(0,0) scale(1);} 26%{transform:translate(-160px,-95px) scale(1.15);} 54%{transform:translate(110px,-130px) scale(0.88);} 80%{transform:translate(80px,75px) scale(1.06);} 100%{transform:translate(0,0) scale(1);} }
    @keyframes uchFloat3 { 0%{transform:translate(0,0) scale(1);} 33%{transform:translate(105px,-80px) scale(1.2);} 66%{transform:translate(-95px,70px) scale(0.85);} 100%{transform:translate(0,0) scale(1);} }
    @media (prefers-reduced-motion: reduce) { .bzh-ambient-blob { animation: none !important; } }

    /* Hero */
    .bzh-hero {
        position: relative;
        text-align: center;
        max-width: 1200px;
        margin: 0 auto 3rem auto;
        padding: 3rem 1.5rem 2.5rem;
    }
    .bzh-hero > *:not(.bzh-ambient) { position: relative; z-index: 2; }
    .bzh-hero-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        padding: 0.3rem 0.9rem;
        border-radius: 999px;
        background: var(--bg-secondary);
        border: 1px solid var(--border);
        font-family: var(--font-mono);
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--primary);
        margin-bottom: 1.5rem;
    }
    .bzh-hero-eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }
    .bzh-hero-title {
        font-family: 'Space Grotesk', var(--font-heading);
        font-size: clamp(2.5rem, 6vw, 4.25rem);
        font-weight: 700;
        color: var(--text-primary);
        line-height: 1.06;
        margin-bottom: 1.5rem;
        letter-spacing: -0.03em;
    }
    .bzh-hero-title-line1 { display: block; color: var(--text-primary); }
    .bzh-hero-title-line2 { display: block; color: var(--primary); }
    .bzh-hero-desc {
        font-size: clamp(1.05rem, 2vw, 1.3rem);
        font-weight: 500;
        color: var(--text-secondary);
        max-width: 760px;
        margin: 0 auto 2rem auto;
        line-height: 1.55;
    }
    .bzh-hero-actions {
        display: flex;
        justify-content: center;
        gap: 1rem;
        flex-wrap: wrap;
        margin-bottom: 2.5rem;
    }
    .bzh-hero-actions .btn {
        padding: 0.7rem 1.5rem;
        border-radius: 10px;
        font-weight: 600;
        font-size: 0.9rem;
        cursor: pointer;
        transition: transform 0.15s ease, box-shadow 0.15s ease;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
    }
    .bzh-hero-actions .btn-primary {
        background: var(--primary);
        color: var(--white);
        border: none;
        box-shadow: 0 4px 14px var(--glow-color);
    }
    [data-theme="dark"] .bzh-hero-actions .btn-primary { color: #1a1a1a; }
    .bzh-hero-actions .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 16px var(--glow-color); }
    .bzh-hero-actions .btn-secondary { background: var(--bg-primary); border: 1px solid var(--border); color: var(--text-primary); }
    .bzh-hero-actions .btn-secondary:hover { transform: translateY(-2px); border-color: var(--primary); color: var(--primary); }

    .bzh-hero-stats {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
    }
    .bzh-hero-stat {
        flex: 1 1 180px;
        min-width: 160px;
        max-width: 220px;
        padding: 1.1rem 1.2rem;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: var(--bg-secondary);
    }
    .bzh-hero-stat .number { font-family: var(--font-heading); font-weight: 800; font-size: 1.6rem; color: var(--primary); line-height: 1.1; margin-bottom: 0.3rem; }
    .bzh-hero-stat .label { font-size: 0.78rem; color: var(--text-secondary); }

    /* Compact mid-page CTA + trust-stats strip -- replaces the old full-size hero
       that duplicated the mini-header's title/description word-for-word. */
    .bzh-midcta {
        max-width: 1200px;
        margin: 0 auto 5rem auto;
        padding: 2rem 1.75rem;
        border: 1px solid var(--border);
        border-radius: 18px;
        background: var(--bg-secondary);
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 1.5rem;
    }
    .bzh-midcta .bzh-hero-stats { justify-content: flex-start; gap: 0.85rem; }
    .bzh-midcta .bzh-hero-actions { margin-bottom: 0; }

    /* Compact top-of-page header (H1 + short description) shown above the pillar sections.
       Overrides base.html's global `header { position: sticky; top: 0; z-index: 100 }` rule
       (meant for the site navbar) -- this is a plain <header> element for markup semantics,
       not the page's sticky nav, so it must not inherit that positioning. */
    .bzh-mini-header {
        position: static;
        max-width: 1200px;
        margin: 0 auto;
        padding: 2.25rem 1.5rem 1.25rem;
        text-align: left;
    }
    .bzh-mini-header .bzh-hero-title {
        font-size: clamp(1.9rem, 4vw, 2.75rem);
        margin-bottom: 0.75rem;
    }
    .bzh-mini-header-desc {
        font-size: 1.02rem;
        color: var(--text-secondary);
        max-width: 640px;
        line-height: 1.55;
        margin: 0;
    }

    /* Tight top padding variant for the layout-container that follows the mini-header directly,
       so the page gets to the pillar cards without a large marketing-hero-sized gap. */
    .bzh-layout-container-tight { padding-top: 1.5rem; }

    /* Section rhythm */
    .bzh-layout-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 4rem 1.5rem 0 1.5rem;
        box-sizing: border-box;
    }
    .bzh-section { margin-bottom: 5rem; width: 100%; box-sizing: border-box; }
    .bzh-section-title {
        font-family: var(--font-heading);
        font-size: 2.1rem;
        font-weight: 800;
        color: var(--text-primary);
        margin-bottom: 0.5rem;
    }
    .bzh-section-subtitle {
        font-size: 1.02rem;
        color: var(--text-secondary);
        margin-bottom: 2.25rem;
        max-width: 700px;
        line-height: 1.6;
    }
    .bzh-section-center .bzh-section-title,
    .bzh-section-center .bzh-section-subtitle {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    /* Why mobile proxies grid */
    .bzh-why-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 1.1rem;
    }
    .bzh-why-card {
        padding: 1.6rem 1.4rem;
        border: 1px solid var(--border);
        border-radius: 14px;
        background: var(--bg-secondary);
    }
    .bzh-why-num {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        background: var(--bg-tertiary);
        border: 1px solid var(--border);
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--font-mono);
        font-weight: 700;
        font-size: 0.9rem;
        color: var(--primary);
        margin-bottom: 1.1rem;
    }
    .bzh-why-card h3 { margin: 0 0 0.5rem; font-family: var(--font-heading); font-size: 1.05rem; color: var(--text-primary); }
    .bzh-why-card p { margin: 0; font-size: 0.88rem; line-height: 1.55; color: var(--text-secondary); }

    /* Pillars */
    .bzh-pillar-head {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 1.5rem;
        flex-wrap: wrap;
        margin-bottom: 2rem;
        padding-bottom: 1.5rem;
        border-bottom: 1px solid var(--border);
    }
    .bzh-pillar-head-left { max-width: 640px; }
    .bzh-pillar-eyebrow {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        margin-bottom: 0.85rem;
    }
    .bzh-pillar-numeral { font-family: var(--font-heading); font-weight: 700; font-size: 2rem; color: var(--primary); opacity: 0.45; }
    .bzh-pillar-rule { height: 1px; width: 40px; background: var(--primary); opacity: 0.5; }
    .bzh-pillar-kicker { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary); }
    .bzh-pillar-head h2 { margin: 0 0 0.6rem; font-family: var(--font-heading); font-size: clamp(1.5rem, 3.5vw, 1.9rem); color: var(--text-primary); }
    .bzh-pillar-head p { margin: 0; font-size: 0.98rem; color: var(--text-secondary); line-height: 1.55; }
    .bzh-pillar-explore {
        white-space: nowrap;
        font-weight: 600;
        font-size: 0.85rem;
        color: var(--primary);
        text-decoration: none;
        padding: 0.55rem 1rem;
        border: 1px solid var(--primary);
        border-radius: 9px;
    }
    .bzh-pillar-explore:hover { background: var(--bg-secondary); }

    .bzh-card {
        display: flex;
        flex-direction: column;
        padding: 1.4rem;
        border: 1px solid var(--border);
        border-radius: 14px;
        background: var(--bg-secondary);
        text-decoration: none;
        color: inherit;
        transition: transform 0.18s ease, border-color 0.18s ease;
    }
    .bzh-card:hover { transform: translateY(-3px); border-color: var(--primary); }
    .bzh-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.8rem; }
    .bzh-card-top h3 { margin: 0; font-family: var(--font-heading); font-size: 1.08rem; color: var(--text-primary); }
    .bzh-card p { margin: 0 0 1rem; font-size: 0.88rem; line-height: 1.55; color: var(--text-secondary); flex: 1; }
    .bzh-card-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 1rem;
    }
    .bzh-card-arrow { font-weight: 700; font-size: 1.1rem; color: var(--primary); flex-shrink: 0; }
    .bzh-card-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.9rem; }
    .bzh-card-tag { font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-secondary); padding: 0.25rem 0.55rem; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-tertiary); }
    .bzh-card-stat { display: flex; align-items: baseline; gap: 0.5rem; padding-top: 0.85rem; border-top: 1px solid var(--border); margin-top: auto; }
    .bzh-card-stat .value { font-family: var(--font-heading); font-weight: 700; font-size: 1.15rem; color: var(--primary); }
    .bzh-card-stat .label { font-size: 0.72rem; color: var(--gray); }
    @media (max-width: 720px) {
        .bzh-pillar-head { flex-direction: column; align-items: flex-start; }
    }
    /* Section groups: the four hub sections, each holding its own card grid.
       The web-scraping hub renders one flat grid; this cluster has enough
       children that they need grouping by intent. */
    .bzh-group {
        margin-bottom: 4rem;
    }
    .bzh-group-head {
        display: flex;
        align-items: baseline;
        gap: 0.85rem;
        margin-bottom: 0.5rem;
    }
    .bzh-group-num {
        font-family: var(--font-mono);
        font-size: 0.85rem;
        letter-spacing: 0.12em;
        color: var(--primary);
        opacity: 0.8;
    }
    .bzh-group-name {
        font-family: var(--font-heading);
        font-size: 1.5rem;
        margin: 0;
        color: var(--text-primary);
    }
    .bzh-group-tagline {
        color: var(--text-secondary);
        margin: 0 0 1.5rem;
        max-width: 62ch;
    }
    .bzh-group-soon {
        display: inline-block;
        font-size: 0.8rem;
        font-family: var(--font-mono);
        color: var(--text-secondary);
        border: 1px dashed var(--border);
        border-radius: 6px;
        padding: 0.55rem 0.85rem;
    }