/* ============================================================
   BuilderNow - Main Stylesheet
   ------------------------------------------------------------
   Depends on: /css/tokens.css (loaded FIRST in the HTML)
   All colors/sizes pull from CSS custom properties defined
   in tokens.css. Never hard-code values here.
   ============================================================ */

/* ===========================================================
   RESET & BASE
   =========================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    font-family: var(--bn-font-sans);
    font-size: var(--bn-text-base);
    line-height: var(--bn-leading-normal);
    color: var(--bn-gray-800);
    background: #ffffff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a {
    color: var(--bn-primary);
    text-decoration: none;
    transition: color var(--bn-duration-fast) var(--bn-ease);
}
a:hover { color: var(--bn-primary-hover); }

em { font-style: italic; }

/* ===========================================================
   TYPOGRAPHY
   =========================================================== */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--bn-font-sans);
    font-weight: var(--bn-weight-bold);
    color: var(--bn-charcoal);
    line-height: var(--bn-leading-tight);
    letter-spacing: var(--bn-tracking-tight);
    margin: 0 0 var(--bn-space-4);
}

h1 {
    font-size: clamp(var(--bn-text-4xl), 5vw, var(--bn-text-6xl));
    font-weight: var(--bn-weight-extrabold);
    letter-spacing: var(--bn-tracking-tighter);
}

/* Strong inside headings - browsers default to `bolder` which falls back
   oddly when parent is already 800. Force extrabold + accent color for
   visual emphasis that reads as "even bolder" within bold headings. */
h1 strong, h2 strong, h3 strong {
    font-weight: var(--bn-weight-extrabold);
    color: var(--bn-primary);
}
h2 { font-size: clamp(var(--bn-text-3xl), 4vw, var(--bn-text-5xl)); font-weight: var(--bn-weight-extrabold); }
h3 { font-size: var(--bn-text-2xl); }
h4 { font-size: var(--bn-text-xl); }
h5 { font-size: var(--bn-text-lg); }
h6 { font-size: var(--bn-text-base); text-transform: uppercase; letter-spacing: var(--bn-tracking-wide); }

p { margin: 0 0 var(--bn-space-4); }

.lead {
    font-size: var(--bn-text-lg);
    line-height: var(--bn-leading-relaxed);
    color: var(--bn-gray-600);
}

.eyebrow {
    display: inline-block;
    font-size: var(--bn-text-xs);
    font-weight: var(--bn-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--bn-tracking-wider);
    color: var(--bn-primary);
    margin-bottom: var(--bn-space-3);
}

.muted { color: var(--bn-gray-500); }

/* ===========================================================
   LAYOUT
   =========================================================== */

.bn-container {
    width: 100%;
    max-width: var(--bn-container-max);
    margin: 0 auto;
    padding: 0 var(--bn-space-5);
}

.bn-section {
    padding: clamp(var(--bn-space-16), 10vw, var(--bn-space-24)) 0;
}

.bn-section-tight { padding: var(--bn-space-12) 0; }

.bn-section-dark {
    background:
        radial-gradient(1000px 500px at 80% 0%, rgba(37, 99, 235, 0.22), transparent 60%),
        radial-gradient(800px 400px at 10% 100%, rgba(247, 183, 30, 0.10), transparent 60%),
        var(--bn-charcoal);
    color: var(--bn-gray-300);
}
.bn-section-dark h1, .bn-section-dark h2, .bn-section-dark h3,
.bn-section-dark h4, .bn-section-dark h5, .bn-section-dark h6 { color: #ffffff; }
.bn-section-dark .lead { color: rgba(255, 255, 255, 0.7); }
.bn-section-dark .muted { color: var(--bn-gray-400); }

.bn-section-tinted { background: var(--bn-gray-50); }

.section-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto var(--bn-space-12);
}

/* ===========================================================
   NAVBAR  (dark, to showcase the white logo)
   =========================================================== */

.bn-navbar {
    position: sticky;
    top: 0;
    z-index: var(--bn-z-sticky);
    background: rgba(31, 41, 55, 0.92);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid transparent;
    transition: background var(--bn-duration) var(--bn-ease),
                border-color var(--bn-duration) var(--bn-ease),
                box-shadow var(--bn-duration) var(--bn-ease);
}
.bn-navbar.is-scrolled {
    background: rgba(17, 24, 39, 0.96);
    border-bottom-color: rgba(255, 255, 255, 0.05);
    box-shadow: var(--bn-shadow-lg);
}

.bn-navbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--bn-navbar-height);
    gap: var(--bn-space-6);
}

.bn-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    line-height: 0;
}
.bn-logo img {
    height: 70px;
    width: auto;
    display: block;
    transition: opacity var(--bn-duration) var(--bn-ease);
}
.bn-logo:hover img { opacity: 0.85; }

.bn-nav {
    display: flex;
    align-items: center;
    gap: var(--bn-space-6);
    list-style: none;
    margin: 0;
    padding: 0;
}
.bn-nav a {
    color: rgba(255, 255, 255, 0.75);
    font-size: var(--bn-text-sm);
    font-weight: var(--bn-weight-medium);
    padding: 8px 4px;
    position: relative;
}
.bn-nav a:hover,
.bn-nav a.is-active { color: #ffffff; }
.bn-nav a.is-active::after {
    content: "";
    position: absolute;
    left: 4px; right: 4px;
    bottom: 0;
    height: 2px;
    background: var(--bn-accent);
    border-radius: 2px;
}

.bn-nav-actions {
    display: flex;
    align-items: center;
    gap: var(--bn-space-3);
}
.bn-nav-actions .login-link {
    font-size: var(--bn-text-sm);
    font-weight: var(--bn-weight-medium);
    color: rgba(255, 255, 255, 0.75);
}
.bn-nav-actions .login-link:hover { color: #ffffff; }

.bn-nav-toggle {
    display: none;
    background: transparent;
    border: 0;
    padding: 8px;
    cursor: pointer;
    color: #ffffff;
}

@media (max-width: 960px) {
    /* Keep the mobile navbar compact - override the desktop token */
    .bn-navbar-inner {
        height: 72px;
        /* Tighter gap (12px instead of 24px) so logo + Get started
           + hamburger all fit a phone viewport without the logo
           img getting compressed by flex-shrink. */
        gap: var(--bn-space-3);
    }
    /* Never let the logo img squish horizontally. Without this
       the global img max-width:100% combined with default
       flex-shrink:1 lets the image distort when the row overflows
       — which is exactly what was happening on iPhone SE (375px),
       where logo + "Get started" button + hamburger were all
       fighting for ~335px of usable width. */
    .bn-logo { flex-shrink: 0; }
    .bn-logo img { height: 48px; }
    .bn-nav, .bn-nav-actions .login-link { display: none; }
    .bn-nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
    .bn-navbar.is-open .bn-nav {
        display: flex;
        position: absolute;
        top: 100%;
        left: 0; right: 0;
        flex-direction: column;
        align-items: stretch;
        background: var(--bn-charcoal);
        padding: var(--bn-space-3) var(--bn-space-5) var(--bn-space-5);
        gap: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        box-shadow: var(--bn-shadow-lg);
    }
    .bn-navbar.is-open .bn-nav a {
        padding: 14px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        color: rgba(255, 255, 255, 0.85);
    }
    .bn-navbar.is-open .bn-nav a:last-child { border-bottom: 0; }
}

@media (max-width: 480px) {
    /* iPhone SE territory (375px) and other narrow phones. Every
       pixel counts when logo + primary CTA + hamburger have to
       coexist in the topbar. Logo shrinks to 40px tall (≈155px
       wide instead of 186px), "Get started" button compacts (no
       arrow, smaller padding/font), hamburger button tightens.
       Net width budget at 375px viewport (335px usable):
         logo 155 + 12 gap + button ≈99 + 6 + hamburger ≈36 = ≈308px
       — fits with ~27px to spare, no overflow, hamburger visible. */
    .bn-logo img { height: 40px; }
    .bn-nav-actions { gap: 6px; }
    .bn-nav-actions .btn-sm {
        padding: 8px 12px;
        font-size: 12px;
    }
    /* Drop the arrow icon from the CTA at this size — saves ~14px
       of width without losing the call-to-action message itself. */
    .bn-nav-actions .btn-sm .btn-arrow { display: none; }
    .bn-nav-toggle { padding: 6px; }
}

/* ===========================================================
   BUTTONS
   =========================================================== */

.btn {
    --btn-bg: var(--bn-primary);
    --btn-fg: #ffffff;
    --btn-bg-hover: var(--bn-primary-hover);
    --btn-border: transparent;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--bn-font-sans);
    font-weight: var(--bn-weight-semibold);
    font-size: var(--bn-text-base);
    line-height: 1;
    padding: 14px 24px;
    border-radius: var(--bn-radius-md);
    border: 1px solid var(--btn-border);
    background: var(--btn-bg);
    color: var(--btn-fg);
    text-decoration: none;
    cursor: pointer;
    transition: var(--bn-transition);
    white-space: nowrap;
}
.btn:hover {
    background: var(--btn-bg-hover);
    color: var(--btn-fg);
    transform: translateY(-1px);
}
.btn:active { transform: translateY(0); }
.btn:focus-visible {
    outline: 3px solid var(--bn-primary-light);
    outline-offset: 2px;
}

.btn-primary { --btn-bg: var(--bn-primary); --btn-bg-hover: var(--bn-primary-hover); }
.btn-primary:hover { box-shadow: var(--bn-shadow-primary); }

.btn-accent {
    --btn-bg: var(--bn-accent);
    --btn-fg: var(--bn-charcoal);
    --btn-bg-hover: var(--bn-accent-hover);
}
.btn-accent:hover { box-shadow: var(--bn-shadow-accent); color: var(--bn-charcoal); }

.btn-charcoal { --btn-bg: var(--bn-charcoal); --btn-bg-hover: var(--bn-gray-900); }

.btn-ghost {
    --btn-bg: transparent;
    --btn-fg: var(--bn-primary);
    --btn-bg-hover: var(--bn-primary-lighter);
    --btn-border: var(--bn-gray-200);
}
.btn-ghost:hover { color: var(--bn-primary-hover); border-color: var(--bn-primary-light); }

.btn-sm { padding: 10px 16px; font-size: var(--bn-text-sm); }
.btn-lg { padding: 18px 32px; font-size: var(--bn-text-lg); }
.btn-block { display: flex; width: 100%; }

.btn .btn-arrow { transition: transform var(--bn-duration) var(--bn-ease); }
.btn:hover .btn-arrow { transform: translateX(3px); }

/* ===========================================================
   BADGES
   =========================================================== */

.bn-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: var(--bn-radius-full);
    font-size: var(--bn-text-xs);
    font-weight: var(--bn-weight-semibold);
    letter-spacing: var(--bn-tracking-wide);
    background: var(--bn-gray-100);
    color: var(--bn-gray-700);
}
.bn-badge-primary { background: var(--bn-primary-light); color: var(--bn-primary-active); }
.bn-badge-accent  { background: var(--bn-accent-light);  color: #856404; }
.bn-badge-success { background: var(--bn-success-light); color: #065f46; }
.bn-badge-danger  { background: var(--bn-danger-light);  color: #991b1b; }
.bn-badge-dot::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* ===========================================================
   ICONS
   =========================================================== */

.bn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--bn-radius-lg);
    background: var(--bn-primary-light);
    color: var(--bn-primary);
    font-size: var(--bn-text-xl);
}
.bn-icon-lg { width: 64px; height: 64px; font-size: var(--bn-text-2xl); border-radius: var(--bn-radius-xl); }
.bn-icon-accent { background: var(--bn-accent-light); color: #856404; }
.bn-icon-charcoal { background: var(--bn-charcoal); color: #fff; }

/* ===========================================================
   FORM ELEMENTS
   =========================================================== */

.bn-form-control {
    width: 100%;
    padding: 12px 16px;
    font-family: var(--bn-font-sans);
    font-size: var(--bn-text-base);
    color: var(--bn-gray-900);
    background: #ffffff;
    border: 1px solid var(--bn-gray-300);
    border-radius: var(--bn-radius-md);
    transition: var(--bn-transition-fast);
}
.bn-form-control::placeholder { color: var(--bn-gray-400); }
.bn-form-control:focus {
    outline: 0;
    border-color: var(--bn-primary);
    box-shadow: 0 0 0 3px var(--bn-primary-light);
}

.bn-label {
    display: block;
    font-size: var(--bn-text-sm);
    font-weight: var(--bn-weight-semibold);
    color: var(--bn-gray-700);
    margin-bottom: 6px;
}

/* ===========================================================
   HERO
   =========================================================== */

.bn-hero {
    padding: clamp(var(--bn-space-12), 8vw, var(--bn-space-20)) 0;
    background:
        radial-gradient(1200px 600px at 85% -10%, rgba(247, 183, 30, 0.12), transparent 60%),
        radial-gradient(1000px 500px at -10% 110%, rgba(37, 99, 235, 0.08), transparent 60%),
        #ffffff;
    overflow: hidden;
}

.bn-hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--bn-space-10);
    align-items: center;
}
@media (min-width: 960px) {
    .bn-hero-grid { grid-template-columns: 1.05fr 1fr; gap: var(--bn-space-12); }
}

.bn-hero-copy h1 {
    font-size: clamp(var(--bn-text-4xl), 5.5vw, 72px);
    letter-spacing: -0.03em;
    line-height: 1.05;
    margin-bottom: var(--bn-space-5);
}
.bn-hero-copy h1 .accent-underline {
    background-image: linear-gradient(transparent 70%, var(--bn-accent-light) 70%);
    padding: 0 4px;
}

.bn-hero-copy .lead {
    font-size: clamp(var(--bn-text-lg), 2vw, var(--bn-text-xl));
    max-width: 560px;
    margin-bottom: var(--bn-space-6);
}

.bn-hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bn-space-3);
    margin-bottom: var(--bn-space-6);
}

.bn-hero-micro {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bn-space-4);
    font-size: var(--bn-text-sm);
    color: var(--bn-gray-600);
}
.bn-hero-micro span { display: inline-flex; align-items: center; gap: 6px; }
.bn-hero-micro .check {
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--bn-success);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}

/* ===========================================================
   BROWSER MOCKUP  (product preview)
   =========================================================== */

.bn-mockup {
    position: relative;
    background: #ffffff;
    border: 1px solid var(--bn-gray-200);
    border-radius: var(--bn-radius-xl);
    box-shadow: var(--bn-shadow-2xl);
    overflow: hidden;
    transform: perspective(1200px) rotateY(-4deg) rotateX(2deg);
    transition: transform var(--bn-duration-slow) var(--bn-ease);
}
.bn-mockup:hover { transform: perspective(1200px) rotateY(-2deg) rotateX(1deg); }

.bn-mockup-chrome {
    display: flex;
    align-items: center;
    gap: var(--bn-space-3);
    padding: 10px 14px;
    background: var(--bn-gray-100);
    border-bottom: 1px solid var(--bn-gray-200);
}
.bn-mockup-dots { display: flex; gap: 6px; }
.bn-mockup-dots span {
    width: 11px; height: 11px;
    border-radius: 50%;
    background: var(--bn-gray-300);
}
.bn-mockup-dots span:nth-child(1) { background: #ff5f57; }
.bn-mockup-dots span:nth-child(2) { background: #ffbd2e; }
.bn-mockup-dots span:nth-child(3) { background: #28c840; }
.bn-mockup-url {
    flex: 1;
    font-family: var(--bn-font-mono);
    font-size: 12px;
    color: var(--bn-gray-600);
    background: #ffffff;
    border-radius: var(--bn-radius);
    padding: 5px 10px;
    text-align: center;
}

.bn-mockup-body {
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: 420px;
}
.bn-mockup-sidebar {
    background: var(--bn-gray-50);
    border-right: 1px solid var(--bn-gray-200);
    padding: var(--bn-space-4);
    font-size: var(--bn-text-xs);
}
.bn-mockup-sidebar .sb-label {
    color: var(--bn-gray-500);
    font-weight: var(--bn-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--bn-tracking-wider);
    font-size: 10px;
    margin: var(--bn-space-4) 0 var(--bn-space-2);
}
.bn-mockup-sidebar .sb-label:first-child { margin-top: 0; }
.bn-mockup-sidebar .sb-item {
    padding: 6px 8px;
    border-radius: 6px;
    color: var(--bn-gray-700);
    font-weight: var(--bn-weight-medium);
    margin-bottom: 2px;
}
.bn-mockup-sidebar .sb-item.is-active {
    background: var(--bn-primary);
    color: white;
}
.bn-mockup-sidebar .sb-item.is-filled { color: var(--bn-charcoal); }
.bn-mockup-sidebar .sb-item.is-filled::after {
    content: "✓";
    float: right;
    color: var(--bn-success);
    font-weight: var(--bn-weight-bold);
}

.bn-mockup-preview {
    background: linear-gradient(180deg, #ffffff 0%, var(--bn-gray-50) 100%);
    padding: var(--bn-space-5);
}
.bn-mockup-preview-label {
    font-size: 10px;
    font-weight: var(--bn-weight-semibold);
    color: var(--bn-gray-500);
    text-transform: uppercase;
    letter-spacing: var(--bn-tracking-wider);
    margin-bottom: var(--bn-space-3);
}

/* Wireframe template tiles in the mockup */
.bn-mockup-preview-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--bn-space-2);
}
.wireframe {
    aspect-ratio: 4 / 3;
    background: #ffffff;
    border: 1px solid var(--bn-gray-200);
    border-radius: var(--bn-radius);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow: hidden;
    transition: var(--bn-transition-fast);
    cursor: pointer;
}
.wireframe:hover {
    border-color: var(--bn-primary-light);
    transform: translateY(-1px);
    box-shadow: var(--bn-shadow-sm);
}
.wireframe.is-selected {
    border-color: var(--bn-primary);
    box-shadow: 0 0 0 2px var(--bn-primary-light);
}

/* Wireframe building blocks - tiny visual hints of structure */
.wireframe .wf-nav {
    height: 4px;
    background: var(--bn-gray-300);
    border-radius: 2px;
    margin-bottom: 2px;
}
.wireframe .wf-hero {
    background: linear-gradient(135deg, var(--bn-primary-lighter), var(--bn-gray-100));
    border-radius: 2px;
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    justify-content: center;
}
.wireframe .wf-hero-line {
    background: var(--bn-gray-400);
    border-radius: 1px;
    height: 3px;
}
.wireframe .wf-hero-line--lg { width: 80%; background: var(--bn-charcoal); }
.wireframe .wf-hero-line--sm { width: 60%; height: 2px; }
.wireframe .wf-hero-line--xs { width: 40%; height: 2px; }
.wireframe .wf-btn {
    width: 32%;
    height: 5px;
    background: var(--bn-primary);
    border-radius: 1.5px;
    margin-top: 2px;
}
.wireframe .wf-row {
    display: grid;
    gap: 2px;
}
.wireframe--classic .wf-row,
.wireframe--banner .wf-row { grid-template-columns: repeat(3, 1fr); height: 16px; }
.wireframe--minimal .wf-row { grid-template-columns: repeat(2, 1fr); flex: 1; }
.wireframe .wf-block {
    background: var(--bn-gray-200);
    border-radius: 1px;
}
.wireframe .wf-block--tall { min-height: 18px; }
.wireframe .wf-block--full { width: 100%; height: 16px; margin-top: 2px; }

/* Split template */
.wireframe--split .wf-split {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px;
}
.wireframe--split .wf-split-left {
    padding: 3px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    justify-content: center;
}
.wireframe--split .wf-split-right {
    background: linear-gradient(135deg, var(--bn-accent-lighter), var(--bn-gray-200));
    border-radius: 2px;
}
.wireframe--split .wf-footer {
    height: 6px;
    background: var(--bn-gray-200);
    border-radius: 1px;
}

/* Gallery template */
.wireframe--gallery .wf-banner {
    height: 14px;
    background: linear-gradient(135deg, var(--bn-charcoal), var(--bn-gray-700));
    border-radius: 2px;
    margin-bottom: 2px;
}
.wireframe--gallery .wf-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
    flex: 1;
}
.wireframe--gallery .wf-tile {
    background: var(--bn-gray-200);
    border-radius: 1px;
}
.wireframe--gallery .wf-tile:nth-child(1) { background: linear-gradient(135deg, var(--bn-primary-light), var(--bn-gray-200)); }
.wireframe--gallery .wf-tile:nth-child(4) { background: linear-gradient(135deg, var(--bn-accent-light), var(--bn-gray-200)); }

/* Minimal template */
.wireframe--minimal .wf-minimal-hero {
    padding: 6px 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
}
.wireframe--minimal .wf-hero-line { background: var(--bn-charcoal); }

/* Banner template */
.wireframe--banner .wf-banner--tall {
    flex: 1;
    min-height: 22px;
    background: linear-gradient(135deg, var(--bn-primary), var(--bn-primary-active));
    border-radius: 2px;
    margin-bottom: 2px;
}

/* Sidebar template */
.wireframe--sidebar .wf-sidebar-row {
    flex: 1;
    display: grid;
    grid-template-columns: 30% 1fr;
    gap: 3px;
}
.wireframe--sidebar .wf-sidebar-nav {
    background: var(--bn-gray-100);
    padding: 3px;
    border-radius: 2px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.wireframe--sidebar .wf-nav-item {
    height: 3px;
    background: var(--bn-gray-300);
    border-radius: 1px;
}
.wireframe--sidebar .wf-nav-item:first-child { background: var(--bn-primary); width: 90%; }
.wireframe--sidebar .wf-sidebar-main {
    padding: 3px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* ===========================================================
   TRUSTED-BY STRIP
   =========================================================== */

.bn-trusted {
    border-top: 1px solid var(--bn-gray-200);
    border-bottom: 1px solid var(--bn-gray-200);
    background: var(--bn-gray-50);
    padding: var(--bn-space-8) 0;
}
.bn-trusted-header {
    text-align: center;
    margin-bottom: var(--bn-space-6);
}
.bn-trusted-header .count {
    font-size: clamp(var(--bn-text-3xl), 3vw, var(--bn-text-4xl));
    font-weight: var(--bn-weight-extrabold);
    color: var(--bn-charcoal);
    letter-spacing: var(--bn-tracking-tight);
    margin-bottom: 4px;
}
.bn-trusted-header .sub {
    color: var(--bn-gray-600);
    font-size: var(--bn-text-sm);
}

.bn-trusted-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--bn-space-3);
}
@media (min-width: 640px) { .bn-trusted-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) { .bn-trusted-grid { grid-template-columns: repeat(6, 1fr); } }

.bn-trusted-tile {
    display: block;
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--bn-gray-200);
    border: 1px solid var(--bn-gray-200);
    border-radius: var(--bn-radius-md);
    overflow: hidden;
    transition: var(--bn-transition);
    text-decoration: none;
}
.bn-trusted-tile-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform var(--bn-duration-slow) var(--bn-ease);
    display: block;
}
.bn-trusted-tile:hover {
    border-color: var(--bn-primary-light);
    box-shadow: var(--bn-shadow-md);
    transform: translateY(-2px);
}
.bn-trusted-tile:hover .bn-trusted-tile-img { transform: scale(1.05); }
.bn-trusted-tile .meta {
    position: absolute;
    inset: auto 0 0 0;
    padding: 8px 10px;
    background: linear-gradient(transparent, rgba(0,0,0,0.85));
    color: white;
    font-size: var(--bn-text-xs);
    font-weight: var(--bn-weight-semibold);
    display: flex;
    justify-content: space-between;
    align-items: end;
    z-index: 1;
}
.bn-trusted-tile .meta small {
    opacity: 0.85;
    font-weight: var(--bn-weight-normal);
    text-transform: capitalize;
}

/* ===========================================================
   STEPS
   =========================================================== */

.bn-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--bn-space-6);
    counter-reset: bn-step;
    padding-top: var(--bn-space-4); /* room for the floating number badge */
}
@media (min-width: 768px) { .bn-steps { grid-template-columns: repeat(3, 1fr); } }

.bn-step {
    background: #ffffff;
    border: 1px solid var(--bn-gray-200);
    border-radius: var(--bn-radius-xl);
    padding: var(--bn-space-6);
    position: relative;
    counter-increment: bn-step;
}
.bn-step::before {
    content: counter(bn-step);
    position: absolute;
    top: -16px;
    left: var(--bn-space-6);
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--bn-charcoal);
    color: var(--bn-accent);
    font-weight: var(--bn-weight-extrabold);
    display: flex;
    align-items: center;
    justify-content: center;
}
.bn-step h3 { margin-top: var(--bn-space-4); margin-bottom: var(--bn-space-2); font-size: var(--bn-text-xl); }
.bn-step p { color: var(--bn-gray-600); margin-bottom: 0; }

/* ===========================================================
   VERTICAL CARDS (industries)
   =========================================================== */

.bn-vertical-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--bn-space-5);
}
@media (min-width: 768px) { .bn-vertical-grid { grid-template-columns: repeat(3, 1fr); } }

.bn-vertical {
    padding: var(--bn-space-6);
    border: 1px solid var(--bn-gray-200);
    border-radius: var(--bn-radius-xl);
    background: #ffffff;
    transition: var(--bn-transition);
}
.bn-vertical:hover {
    border-color: var(--bn-primary-light);
    transform: translateY(-3px);
    box-shadow: var(--bn-shadow-lg);
}
.bn-vertical h3 { margin: var(--bn-space-3) 0 var(--bn-space-2); font-size: var(--bn-text-xl); }
.bn-vertical p { color: var(--bn-gray-600); margin-bottom: var(--bn-space-4); }
.bn-vertical .examples {
    font-size: var(--bn-text-xs);
    color: var(--bn-gray-500);
    font-weight: var(--bn-weight-medium);
    text-transform: uppercase;
    letter-spacing: var(--bn-tracking-wider);
}
.bn-vertical .examples strong {
    color: var(--bn-gray-700);
    font-weight: var(--bn-weight-semibold);
    text-transform: none;
    letter-spacing: 0;
    display: block;
    margin-top: 4px;
    font-size: var(--bn-text-sm);
}

/* Dark-section variant (used inside .bn-section-dark) */
.bn-vertical-dark {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(4px);
}
.bn-vertical-dark:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(247, 183, 30, 0.35);
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.6);
}
.bn-vertical-dark p { color: rgba(255, 255, 255, 0.7); }
.bn-vertical-dark .examples { color: rgba(255, 255, 255, 0.45); }
.bn-vertical-dark .examples strong { color: rgba(255, 255, 255, 0.85); }

/* ===========================================================
   FEATURE GRID
   =========================================================== */

.bn-features {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--bn-space-5);
}
@media (min-width: 640px) { .bn-features { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .bn-features { grid-template-columns: repeat(3, 1fr); } }

.bn-feature {
    padding: var(--bn-space-5);
    border-radius: var(--bn-radius-lg);
    background: #ffffff;
    border: 1px solid var(--bn-gray-200);
}
.bn-feature h4 {
    margin: var(--bn-space-4) 0 var(--bn-space-1);
    font-size: var(--bn-text-lg);
    color: var(--bn-charcoal);
}
.bn-feature p { color: var(--bn-gray-600); margin: 0; font-size: var(--bn-text-sm); }

/* ===========================================================
   PRICING TEASER
   =========================================================== */

.bn-pricing {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--bn-space-5);
    padding-top: var(--bn-space-3); /* room for "Most popular" badge */
}
@media (min-width: 768px) { .bn-pricing { grid-template-columns: repeat(3, 1fr); } }

.bn-tier {
    padding: var(--bn-space-6);
    background: #ffffff;
    border: 1px solid var(--bn-gray-200);
    border-radius: var(--bn-radius-xl);
    position: relative;
    display: flex;
    flex-direction: column;
}
.bn-tier-featured {
    border-color: var(--bn-primary);
    box-shadow: var(--bn-shadow-lg);
    transform: scale(1.02);
}
.bn-tier-featured::before {
    content: "Most popular";
    position: absolute;
    top: -12px;
    right: var(--bn-space-5);
    padding: 4px 12px;
    background: var(--bn-accent);
    color: var(--bn-charcoal);
    font-size: var(--bn-text-xs);
    font-weight: var(--bn-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--bn-tracking-wide);
    border-radius: var(--bn-radius-full);
}
.bn-tier h3 { font-size: var(--bn-text-lg); }
.bn-tier .price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: var(--bn-space-3) 0 var(--bn-space-2);
}
.bn-tier .price strong {
    font-size: var(--bn-text-4xl);
    font-weight: var(--bn-weight-extrabold);
    color: var(--bn-charcoal);
    line-height: 1;
}
.bn-tier .price span { color: var(--bn-gray-500); font-size: var(--bn-text-sm); }
.bn-tier ul {
    list-style: none;
    margin: var(--bn-space-4) 0;
    padding: 0;
    font-size: var(--bn-text-sm);
    color: var(--bn-gray-700);
    flex: 1;
}
.bn-tier ul li {
    padding: 6px 0 6px 24px;
    position: relative;
}
.bn-tier ul li::before {
    content: "";
    position: absolute;
    left: 0; top: 12px;
    width: 14px; height: 14px;
    background: var(--bn-primary-light);
    border-radius: 50%;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path fill='%232563eb' d='M10.28 3.22a.75.75 0 0 1 0 1.06l-4.5 4.5a.75.75 0 0 1-1.06 0l-2-2a.75.75 0 1 1 1.06-1.06l1.47 1.47 3.97-3.97a.75.75 0 0 1 1.06 0Z'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
}

/* ===========================================================
   FINAL CTA
   =========================================================== */

.bn-finalcta {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(800px 400px at 80% 0%, rgba(247, 183, 30, 0.22), transparent 60%),
        linear-gradient(135deg, var(--bn-primary) 0%, var(--bn-primary-active) 100%);
    color: white;
    border-radius: var(--bn-radius-2xl);
    padding: clamp(var(--bn-space-10), 6vw, var(--bn-space-16));
    text-align: center;
}
.bn-finalcta h2 {
    color: white;
    font-size: clamp(var(--bn-text-3xl), 4.5vw, var(--bn-text-5xl));
    margin-bottom: var(--bn-space-4);
}
.bn-finalcta p {
    color: rgba(255,255,255,0.85);
    font-size: var(--bn-text-lg);
    max-width: 560px;
    margin: 0 auto var(--bn-space-6);
}

/* ===========================================================
   FOOTER
   =========================================================== */

.bn-footer {
    background: var(--bn-charcoal);
    color: var(--bn-gray-400);
    padding: var(--bn-space-16) 0 var(--bn-space-8);
}
.bn-footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--bn-space-8);
    margin-bottom: var(--bn-space-10);
}
@media (min-width: 768px) { .bn-footer-grid { grid-template-columns: 2fr repeat(3, 1fr); } }

.bn-footer h4 {
    color: white;
    font-size: var(--bn-text-sm);
    text-transform: uppercase;
    letter-spacing: var(--bn-tracking-wider);
    margin-bottom: var(--bn-space-4);
}
.bn-footer ul { list-style: none; padding: 0; margin: 0; }
.bn-footer ul li { margin-bottom: var(--bn-space-2); }
.bn-footer ul a { color: var(--bn-gray-400); font-size: var(--bn-text-sm); }
.bn-footer ul a:hover { color: white; }

.bn-footer-brand .bn-logo img { height: 56px; width: auto; }
.bn-footer-brand p { color: var(--bn-gray-400); margin-top: var(--bn-space-3); max-width: 280px; font-size: var(--bn-text-sm); }

.bn-footer-social { display: flex; gap: var(--bn-space-2); margin-top: var(--bn-space-4); }
.bn-footer-social a {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--bn-gray-400);
    transition: var(--bn-transition);
}
.bn-footer-social a:hover { background: var(--bn-primary); color: white; transform: translateY(-2px); }

.bn-footer-bottom {
    padding-top: var(--bn-space-6);
    border-top: 1px solid rgba(255,255,255,0.06);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--bn-space-3);
    font-size: var(--bn-text-sm);
    color: var(--bn-gray-500);
}
.bn-footer-bottom a { color: var(--bn-gray-400); }
.bn-footer-bottom a:hover { color: white; }

/* ===========================================================
   PAGE HERO  (sub page banner)
   -----------------------------------------------------------
   Default: rich gradient mesh + grid pattern + animated
   blurred orbs baked into the section via pseudo-elements.
   No markup changes required per page.

   Optional: add class "bn-page-hero--image" and include
   <div class="bn-page-hero-bg" style="background-image:url(...)"></div>
   inside the section for a photo-backed dark variant.
   =========================================================== */

.bn-page-hero {
    position: relative;
    padding: clamp(var(--bn-space-16), 12vw, var(--bn-space-24)) 0 clamp(var(--bn-space-12), 8vw, var(--bn-space-20));
    background:
        /* Subtle grid lines (40px cells) for structural texture */
        linear-gradient(rgba(37, 99, 235, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37, 99, 235, 0.045) 1px, transparent 1px),
        /* Rich multi-stop gradient mesh */
        radial-gradient(900px 600px at 8% -10%, rgba(37, 99, 235, 0.18), transparent 50%),
        radial-gradient(700px 500px at 92% 5%, rgba(247, 183, 30, 0.22), transparent 55%),
        radial-gradient(800px 600px at 50% 120%, rgba(37, 99, 235, 0.10), transparent 50%),
        /* Base */
        linear-gradient(180deg, #ffffff 0%, var(--bn-gray-50) 100%);
    background-size: 40px 40px, 40px 40px, auto, auto, auto, auto;
    border-bottom: 1px solid var(--bn-gray-200);
    text-align: center;
    overflow: hidden;
}

/* Built-in animated orb - accent yellow, top right */
.bn-page-hero::before {
    content: "";
    position: absolute;
    top: -140px;
    right: -100px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(247, 183, 30, 0.32), transparent 70%);
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
    filter: blur(40px);
    will-change: transform;
    animation: bn-hero-orb-a 28s var(--bn-ease) infinite;
}

/* Built-in animated orb - primary blue, bottom left */
.bn-page-hero::after {
    content: "";
    position: absolute;
    bottom: -150px;
    left: -80px;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.28), transparent 70%);
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
    filter: blur(40px);
    will-change: transform;
    animation: bn-hero-orb-b 34s var(--bn-ease) infinite;
}

@keyframes bn-hero-orb-a {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-40px, 30px) scale(1.1); }
}
@keyframes bn-hero-orb-b {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(40px, -30px) scale(0.9); }
}
@media (prefers-reduced-motion: reduce) {
    .bn-page-hero::before,
    .bn-page-hero::after { animation: none; }
}

.bn-page-hero .eyebrow { margin-bottom: var(--bn-space-2); }
.bn-page-hero h1 {
    font-size: clamp(var(--bn-text-4xl), 4.5vw, var(--bn-text-6xl));
    letter-spacing: -0.025em;
    margin-bottom: var(--bn-space-4);
}
.bn-page-hero p {
    font-size: clamp(var(--bn-text-lg), 2vw, var(--bn-text-xl));
    color: var(--bn-gray-600);
    max-width: 640px;
    margin: 0 auto;
    line-height: var(--bn-leading-relaxed);
}

/* -----------------------------------------------------------
   IMAGE VARIANT - dark, photo-backed
   ----------------------------------------------------------- */

.bn-page-hero--image {
    background: var(--bn-charcoal);
    border-bottom: none;
    color: rgba(255, 255, 255, 0.88);
}
/* Suppress the light-variant orbs - photo provides visual interest */
.bn-page-hero--image::before,
.bn-page-hero--image::after { display: none; }

.bn-page-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
    /* Animated very-slow ken-burns style pan-zoom for subtle motion */
    animation: bn-hero-bg-pan 24s ease-in-out infinite alternate;
    will-change: transform;
}
@keyframes bn-hero-bg-pan {
    from { transform: scale(1) translate(0, 0); }
    to   { transform: scale(1.08) translate(-1.5%, 1%); }
}
@media (prefers-reduced-motion: reduce) {
    .bn-page-hero-bg { animation: none; }
}
.bn-page-hero-bg::after {
    /* Heavy readability overlay + on-brand color wash */
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(17, 24, 39, 0.70) 0%, rgba(31, 41, 55, 0.90) 100%),
        linear-gradient(135deg, rgba(37, 99, 235, 0.28) 0%, transparent 50%, rgba(247, 183, 30, 0.16) 100%);
}

.bn-page-hero--image h1 { color: #ffffff; }
.bn-page-hero--image p  { color: rgba(255, 255, 255, 0.85); }
.bn-page-hero--image .eyebrow { color: var(--bn-accent); }
.bn-page-hero--image .bn-breadcrumb           { color: rgba(255, 255, 255, 0.55); }
.bn-page-hero--image .bn-breadcrumb a         { color: rgba(255, 255, 255, 0.72); }
.bn-page-hero--image .bn-breadcrumb a:hover   { color: #ffffff; }
.bn-page-hero--image .bn-breadcrumb .is-current { color: #ffffff; }
.bn-page-hero--image .bn-breadcrumb li + li::before { color: rgba(255, 255, 255, 0.35); }

.bn-breadcrumb {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--bn-space-5);
    display: flex;
    justify-content: center;
    gap: var(--bn-space-2);
    font-size: var(--bn-text-sm);
    color: var(--bn-gray-500);
}
.bn-breadcrumb li + li::before { content: "/"; margin-right: var(--bn-space-2); color: var(--bn-gray-300); }
.bn-breadcrumb a { color: var(--bn-gray-500); }
.bn-breadcrumb a:hover { color: var(--bn-primary); }
.bn-breadcrumb .is-current { color: var(--bn-charcoal); font-weight: var(--bn-weight-medium); }

/* ===========================================================
   TWO-COLUMN CONTENT  (for about/contact/help prose layouts)
   =========================================================== */

.bn-two-col {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--bn-space-10);
    align-items: start;
}
@media (min-width: 900px) {
    .bn-two-col { grid-template-columns: 2fr 1fr; gap: var(--bn-space-12); }
}
.bn-prose {
    font-size: var(--bn-text-lg);
    line-height: var(--bn-leading-relaxed);
    color: var(--bn-gray-700);
}
.bn-prose h2 {
    font-size: var(--bn-text-3xl);
    margin-top: var(--bn-space-8);
    margin-bottom: var(--bn-space-4);
}
.bn-prose h2:first-child { margin-top: 0; }
.bn-prose h3 {
    font-size: var(--bn-text-xl);
    margin-top: var(--bn-space-6);
    margin-bottom: var(--bn-space-3);
}
.bn-prose p { margin-bottom: var(--bn-space-4); }
.bn-prose ul, .bn-prose ol {
    padding-left: var(--bn-space-6);
    margin-bottom: var(--bn-space-5);
}
.bn-prose li { margin-bottom: var(--bn-space-2); }
.bn-prose a { color: var(--bn-primary); text-decoration: underline; text-decoration-color: var(--bn-primary-light); text-underline-offset: 3px; }
.bn-prose a:hover { color: var(--bn-primary-hover); text-decoration-color: var(--bn-primary); }

.bn-sidebar-card {
    background: var(--bn-gray-50);
    border: 1px solid var(--bn-gray-200);
    border-radius: var(--bn-radius-xl);
    padding: var(--bn-space-6);
    position: sticky;
    top: calc(var(--bn-navbar-height) + var(--bn-space-5));
}
.bn-sidebar-card h4 {
    font-size: var(--bn-text-base);
    margin-bottom: var(--bn-space-3);
    color: var(--bn-charcoal);
}
.bn-sidebar-card ul {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--bn-space-4);
    font-size: var(--bn-text-sm);
}
.bn-sidebar-card ul li {
    padding: 6px 0;
    color: var(--bn-gray-700);
    display: flex;
    align-items: center;
    gap: 10px;
}
.bn-sidebar-card ul li svg { color: var(--bn-primary); flex-shrink: 0; }
.bn-sidebar-card a { color: var(--bn-gray-700); }
.bn-sidebar-card a:hover { color: var(--bn-primary); }

/* ===========================================================
   ACCORDION  (FAQ / help)
   =========================================================== */

.bn-accordion { display: flex; flex-direction: column; gap: var(--bn-space-3); }
.bn-accordion-item {
    background: #ffffff;
    border: 1px solid var(--bn-gray-200);
    border-radius: var(--bn-radius-lg);
    overflow: hidden;
    transition: var(--bn-transition-fast);
}
.bn-accordion-item[open] {
    border-color: var(--bn-primary-light);
    box-shadow: var(--bn-shadow-sm);
}
.bn-accordion-item summary {
    list-style: none;
    cursor: pointer;
    padding: var(--bn-space-4) var(--bn-space-5);
    font-weight: var(--bn-weight-semibold);
    font-size: var(--bn-text-lg);
    color: var(--bn-charcoal);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--bn-space-4);
}
.bn-accordion-item summary::-webkit-details-marker { display: none; }
.bn-accordion-item summary::after {
    content: "";
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2.5' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    transition: transform var(--bn-duration) var(--bn-ease);
}
.bn-accordion-item[open] summary::after { transform: rotate(180deg); }
.bn-accordion-item summary:hover { background: var(--bn-gray-50); }
.bn-accordion-item .bn-accordion-body {
    padding: 0 var(--bn-space-5) var(--bn-space-5);
    color: var(--bn-gray-700);
    line-height: var(--bn-leading-relaxed);
}
.bn-accordion-item .bn-accordion-body p:last-child { margin-bottom: 0; }

/* ===========================================================
   FORM BLOCKS  (for contact, help, support)
   =========================================================== */

.bn-form { display: flex; flex-direction: column; gap: var(--bn-space-4); }
.bn-form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--bn-space-4);
}
@media (min-width: 640px) {
    .bn-form-row-2 { grid-template-columns: 1fr 1fr; }
}
.bn-form-group { display: flex; flex-direction: column; gap: 6px; }
.bn-form-group textarea.bn-form-control { min-height: 140px; resize: vertical; }
.bn-form-help {
    font-size: var(--bn-text-xs);
    color: var(--bn-gray-500);
}

/* Honeypot - visually hidden but not display:none (bots skip display:none) */
.bn-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    tab-index: -1;
}

.bn-alert {
    padding: var(--bn-space-4) var(--bn-space-5);
    border-radius: var(--bn-radius-md);
    font-size: var(--bn-text-sm);
    border: 1px solid transparent;
    display: flex;
    align-items: flex-start;
    gap: var(--bn-space-3);
}
.bn-alert-success { background: var(--bn-success-light); color: #065f46; border-color: #6ee7b7; }
.bn-alert-danger  { background: var(--bn-danger-light);  color: #991b1b; border-color: #fca5a5; }
.bn-alert-info    { background: var(--bn-info-light);    color: #1e40af; border-color: #93c5fd; }

/* ===========================================================
   LARGE CALLOUT  (features page, used for "deep dive" rows)
   =========================================================== */

.bn-callout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--bn-space-8);
    align-items: center;
    padding: var(--bn-space-10) 0;
    border-bottom: 1px solid var(--bn-gray-200);
}
.bn-callout:last-child { border-bottom: 0; }
@media (min-width: 900px) {
    .bn-callout { grid-template-columns: 1fr 1fr; gap: var(--bn-space-12); }
    .bn-callout.is-reversed .bn-callout-visual { order: 2; }
}
.bn-callout h3 {
    font-size: var(--bn-text-3xl);
    margin-bottom: var(--bn-space-4);
}
.bn-callout p {
    font-size: var(--bn-text-lg);
    color: var(--bn-gray-600);
    line-height: var(--bn-leading-relaxed);
}
.bn-callout-visual {
    aspect-ratio: 4 / 3;
    border-radius: var(--bn-radius-xl);
    background: linear-gradient(135deg, var(--bn-primary-lighter), var(--bn-gray-100));
    border: 1px solid var(--bn-gray-200);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bn-primary);
}
.bn-callout-visual svg { width: 40%; height: auto; opacity: 0.5; }
.bn-callout-visual.is-accent {
    background: linear-gradient(135deg, var(--bn-accent-lighter), var(--bn-accent-light));
    color: #856404;
}
.bn-callout-visual.is-charcoal {
    background: linear-gradient(135deg, var(--bn-charcoal), var(--bn-gray-700));
    color: var(--bn-accent);
}

/* ===========================================================
   CONTACT INFO BLOCK
   =========================================================== */

.bn-contact-info {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--bn-space-4);
}
@media (min-width: 640px) {
    .bn-contact-info { grid-template-columns: repeat(3, 1fr); }
}
.bn-contact-info-item {
    padding: var(--bn-space-5);
    background: #ffffff;
    border: 1px solid var(--bn-gray-200);
    border-radius: var(--bn-radius-lg);
    display: flex;
    flex-direction: column;
    gap: var(--bn-space-2);
}
.bn-contact-info-item .bn-icon { margin-bottom: var(--bn-space-2); }
.bn-contact-info-item h4 {
    font-size: var(--bn-text-base);
    margin-bottom: 0;
    color: var(--bn-charcoal);
}
.bn-contact-info-item a, .bn-contact-info-item p {
    font-size: var(--bn-text-base);
    color: var(--bn-gray-600);
    margin: 0;
}
.bn-contact-info-item a:hover { color: var(--bn-primary); }

/* ===========================================================
   PAGE-LOAD FADE-IN (whole body softly appears)
   =========================================================== */

body {
    animation: bn-body-fade-in 500ms var(--bn-ease-out) 50ms both;
}
@keyframes bn-body-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    body { animation: none; }
}

/* ===========================================================
   FLOATING ORBS  (ambient background decoration)
   -----------------------------------------------------------
   Drop <div class="bn-orbs"><div class="bn-orb bn-orb--1"></div>...</div>
   into any section that has position:relative.
   =========================================================== */

.bn-orbs {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}
.bn-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.35;
    will-change: transform;
    animation: bn-orb-drift 24s var(--bn-ease) infinite;
}
.bn-orb--primary { background: radial-gradient(circle, var(--bn-primary) 0%, transparent 70%); }
.bn-orb--accent  { background: radial-gradient(circle, var(--bn-accent)  0%, transparent 70%); }
.bn-orb--1 { width: 360px; height: 360px; top: -120px; right: -60px;  animation-duration: 26s; }
.bn-orb--2 { width: 440px; height: 440px; bottom: -160px; left: -100px; animation-duration: 34s; animation-direction: reverse; }
.bn-orb--3 { width: 280px; height: 280px; top: 38%; left: 42%; animation-duration: 40s; animation-delay: -12s; opacity: 0.22; }

@keyframes bn-orb-drift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(50px, -40px) scale(1.12); }
    66%      { transform: translate(-40px, 50px) scale(0.92); }
}
@media (prefers-reduced-motion: reduce) {
    .bn-orb { animation: none; }
}

/* Make sure real content stacks above orbs */
.bn-hero > .bn-container,
.bn-section > .bn-container,
.bn-page-hero > .bn-container { position: relative; z-index: 1; }

/* Ensure sections can host positioned orbs */
.bn-hero, .bn-section, .bn-page-hero { position: relative; }

/* ===========================================================
   STAGGERED REVEAL DELAYS
   -----------------------------------------------------------
   Add data-bn-reveal-delay="N" (1-6) to stagger a group.
   Each step = 90ms.
   =========================================================== */

[data-bn-reveal-delay="1"] { transition-delay:  90ms; }
[data-bn-reveal-delay="2"] { transition-delay: 180ms; }
[data-bn-reveal-delay="3"] { transition-delay: 270ms; }
[data-bn-reveal-delay="4"] { transition-delay: 360ms; }
[data-bn-reveal-delay="5"] { transition-delay: 450ms; }
[data-bn-reveal-delay="6"] { transition-delay: 540ms; }

/* ===========================================================
   ICON HOVER ANIMATIONS (feature / vertical cards)
   =========================================================== */

.bn-feature .bn-icon,
.bn-vertical .bn-icon {
    transition: transform var(--bn-duration-slow) var(--bn-ease-bounce),
                box-shadow var(--bn-duration-slow) var(--bn-ease);
}
.bn-feature:hover .bn-icon,
.bn-vertical:hover .bn-icon {
    transform: scale(1.1) rotate(-6deg);
}
.bn-feature:hover .bn-icon-accent,
.bn-vertical:hover .bn-icon-accent {
    box-shadow: 0 8px 20px -4px rgba(247, 183, 30, 0.45);
}
.bn-feature:hover .bn-icon:not(.bn-icon-accent):not(.bn-icon-charcoal),
.bn-vertical:hover .bn-icon:not(.bn-icon-accent):not(.bn-icon-charcoal) {
    box-shadow: 0 8px 20px -4px rgba(37, 99, 235, 0.35);
}

/* ===========================================================
   FEATURED PRICING TIER - ambient glow pulse
   =========================================================== */

.bn-tier-featured {
    animation: bn-tier-pulse 4.5s ease-in-out infinite;
}
@keyframes bn-tier-pulse {
    0%, 100% { box-shadow: var(--bn-shadow-lg), 0 0 0 0 rgba(37, 99, 235, 0); }
    50%      { box-shadow: var(--bn-shadow-xl), 0 0 0 4px rgba(37, 99, 235, 0.12); }
}
@media (prefers-reduced-motion: reduce) {
    .bn-tier-featured { animation: none; }
}

/* ===========================================================
   SECTION WAVE DIVIDERS
   -----------------------------------------------------------
   Soft organic transitions between color blocks.
   =========================================================== */

.bn-wave-bottom { position: relative; }
.bn-wave-bottom::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 60px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: 2;
    pointer-events: none;
}
.bn-wave-bottom.is-to-tinted::after {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'><path d='M0,20 C300,60 900,0 1200,30 L1200,60 L0,60 Z' fill='%23f9fafb'/></svg>");
}
.bn-wave-bottom.is-to-white::after {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'><path d='M0,20 C300,60 900,0 1200,30 L1200,60 L0,60 Z' fill='%23ffffff'/></svg>");
}

/* ===========================================================
   INDUSTRY CARD - PHOTO VARIANT
   =========================================================== */

.bn-vertical-photo {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.bn-vertical-photo-img-wrap {
    aspect-ratio: 16 / 10;
    position: relative;
    overflow: hidden;
    background-color: var(--bn-charcoal);
}
.bn-vertical-photo-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform var(--bn-duration-slower) var(--bn-ease);
}
.bn-vertical-photo:hover .bn-vertical-photo-img {
    transform: scale(1.05);
}
.bn-vertical-photo-img-wrap::after {
    /* Branded tint + readability gradient over the photo */
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, transparent 35%, rgba(17, 24, 39, 0.65) 100%),
        linear-gradient(135deg, rgba(37, 99, 235, 0.20), rgba(247, 183, 30, 0.12));
    z-index: 1;
    pointer-events: none;
}
.bn-vertical-photo-img-wrap .bn-icon {
    position: absolute;
    bottom: var(--bn-space-4);
    left: var(--bn-space-4);
    z-index: 2;
    margin: 0;
}
.bn-vertical-photo-body {
    padding: var(--bn-space-6);
    flex: 1;
    display: flex;
    flex-direction: column;
}
.bn-vertical-photo-body h3 { margin-top: 0; }

/* Photo card inside dark section */
.bn-vertical-dark.bn-vertical-photo {
    border-color: rgba(255, 255, 255, 0.10);
}

/* ===========================================================
   TESTIMONIALS
   =========================================================== */

.bn-testimonials-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--bn-space-5);
    max-width: 1080px;
    margin: 0 auto;
}
@media (min-width: 900px) {
    .bn-testimonials-grid { grid-template-columns: repeat(2, 1fr); gap: var(--bn-space-6); }
}

.bn-testimonial {
    padding: var(--bn-space-8);
    background: #ffffff;
    border: 1px solid var(--bn-gray-200);
    border-radius: var(--bn-radius-xl);
    position: relative;
    transition: var(--bn-transition);
    display: flex;
    flex-direction: column;
}
.bn-testimonial:hover {
    border-color: var(--bn-primary-light);
    box-shadow: var(--bn-shadow-lg);
    transform: translateY(-3px);
}
.bn-testimonial::before {
    /* Big decorative opening quote mark */
    content: "\201C";
    position: absolute;
    top: 14px;
    left: 22px;
    font-family: Georgia, serif;
    font-size: 110px;
    font-weight: var(--bn-weight-bold);
    color: var(--bn-primary-light);
    line-height: 0.9;
    z-index: 0;
    pointer-events: none;
}
.bn-testimonial-stars {
    display: flex;
    gap: 2px;
    color: var(--bn-accent);
    margin-bottom: var(--bn-space-3);
    position: relative;
    z-index: 1;
}
.bn-testimonial-body {
    position: relative;
    z-index: 1;
    font-size: var(--bn-text-lg);
    line-height: var(--bn-leading-relaxed);
    color: var(--bn-gray-700);
    margin: 0 0 var(--bn-space-6);
    flex: 1;
    font-style: italic;
}
.bn-testimonial-author {
    display: flex;
    align-items: center;
    gap: var(--bn-space-3);
    padding-top: var(--bn-space-5);
    border-top: 1px solid var(--bn-gray-200);
    position: relative;
    z-index: 1;
}
.bn-testimonial-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--bn-weight-bold);
    font-size: var(--bn-text-lg);
    flex-shrink: 0;
    letter-spacing: -0.02em;
    color: #ffffff;
    background: linear-gradient(135deg, var(--bn-primary), var(--bn-primary-active));
    box-shadow: var(--bn-shadow-md);
}
.bn-testimonial-avatar--accent {
    background: linear-gradient(135deg, var(--bn-accent), var(--bn-accent-hover));
    color: var(--bn-charcoal);
}
.bn-testimonial-meta { display: flex; flex-direction: column; line-height: var(--bn-leading-snug); }
.bn-testimonial-meta .name { font-weight: var(--bn-weight-semibold); color: var(--bn-charcoal); font-size: var(--bn-text-base); }
.bn-testimonial-meta .company { font-size: var(--bn-text-sm); color: var(--bn-gray-500); }

/* ===========================================================
   ANIMATED COUNTER
   =========================================================== */

.bn-counter {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* ===========================================================
   REVEAL-ON-SCROLL
   =========================================================== */

[data-bn-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 600ms var(--bn-ease-out), transform 600ms var(--bn-ease-out);
}
[data-bn-reveal].bn-revealed {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    [data-bn-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ===========================================================
   UTILITY
   =========================================================== */

.text-center { text-align: center; }
.mb-0 { margin-bottom: 0 !important; }
.mt-auto { margin-top: auto; }

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}