/* ==========================================================================
   BonicBD Site-Wide Neo-Brutalism Layer
   Loaded after every page's inline CSS so the whole /templates/site surface
   shares one hard, high-contrast brand system.
   ========================================================================== */

:root {
  --bbd-brutal-ink: #10101f;
  --bbd-brutal-ink-2: #23233a;
  --bbd-brutal-paper: #fffaf5;
  --bbd-brutal-paper-2: #fff1e6;
  --bbd-brutal-paper-3: #ffffff;
  --bbd-brutal-border: rgba(16, 16, 31, 0.92);
  --bbd-brutal-border-soft: rgba(16, 16, 31, 0.52);
  --bbd-brutal-orange-shadow: 10px 10px 0 rgba(255, 107, 53, 0.36);
  --bbd-brutal-ink-shadow: 9px 9px 0 rgba(16, 16, 31, 0.22);
  --bbd-brutal-mix-shadow: 8px 8px 0 rgba(255, 107, 53, 0.34), 14px 14px 0 rgba(16, 16, 31, 0.20);
  --bbd-brutal-grid-dark: rgba(16, 16, 31, 0.07);
  --bbd-brutal-grid-orange: rgba(255, 107, 53, 0.16);
  --bbd-brutal-radius: 0px;
}

html {
  scroll-padding-top: 96px;
}

body {
  color: var(--bbd-brutal-ink);
  background:
    linear-gradient(to right, var(--bbd-brutal-grid-dark) 1px, transparent 1px),
    linear-gradient(to bottom, var(--bbd-brutal-grid-dark) 1px, transparent 1px),
    radial-gradient(circle at 92% 4%, rgba(255, 107, 53, 0.18), transparent 25%),
    var(--bbd-brutal-paper) !important;
  background-size: 32px 32px, 32px 32px, auto, auto !important;
}

body h1,
body h2,
body h3,
body h4,
body .bbd-nav-brand,
body .bbd-footer-brand {
  color: var(--bbd-brutal-ink);
  letter-spacing: -0.06em;
}

body h1,
body .bbd-hero h1,
body .bbd-price-hero h1,
body .bbd-cmp-hero h1,
body .bbd-sol-hero h1,
body .bbd-about-hero h1,
body .bbd-feat-hero h1,
body .bbd-blog-hero h1,
body .bbd-legal-hero h1,
body .bbd-roi-hero h1,
body .bbd-sec-hero h1,
body .bbd-st-hero h1,
body .bbd-csd-hero h1,
body .bbd-docs-hero h1 {
  text-shadow: 4px 4px 0 rgba(255, 107, 53, 0.20);
}

body .bbd-lead,
body p,
body li {
  color: #39394f;
}

body a:not(.bbd-btn):not(.bbd-nav-brand):not(.bbd-footer-brand):not(.bbd-blog-card-link):not(.bbd-sol-related-card):not(.bbd-csd-back) {
  color: var(--bbd-orange-dark);
  font-weight: 800;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

body .bbd-section {
  position: relative;
}

body .bbd-section-tint {
  background:
    linear-gradient(to right, rgba(16, 16, 31, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(16, 16, 31, 0.045) 1px, transparent 1px),
    var(--bbd-brutal-paper-2) !important;
  background-size: 28px 28px !important;
  border-block: 3px solid var(--bbd-brutal-border);
}

body .bbd-section-dark,
body .bbd-footer {
  background:
    linear-gradient(to right, rgba(255, 107, 53, 0.12) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 107, 53, 0.08) 1px, transparent 1px),
    var(--bbd-brutal-ink) !important;
  background-size: 28px 28px !important;
  color: rgba(255, 255, 255, 0.86);
}

body .bbd-section-dark h1,
body .bbd-section-dark h2,
body .bbd-section-dark h3,
body .bbd-footer h4,
body .bbd-footer-brand {
  color: #fff !important;
}

/* Navigation and shell */
body .bbd-nav {
  background: rgba(255, 250, 245, 0.98) !important;
  border-bottom: 4px solid var(--bbd-brutal-border) !important;
  box-shadow: 0 8px 0 rgba(255, 107, 53, 0.26), 0 18px 34px rgba(16, 16, 31, 0.12) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body .bbd-brand-logo,
body .bbd-nav-logo,
body .bbd-brand-logo-footer {
  border: 3px solid var(--bbd-brutal-border) !important;
  border-radius: var(--bbd-brutal-radius) !important;
  box-shadow: 5px 5px 0 rgba(255, 107, 53, 0.34) !important;
}

body .bbd-nav-link,
body .bbd-drawer-link {
  color: var(--bbd-brutal-ink) !important;
  border: 2px solid transparent !important;
  border-radius: 7px !important;
  font-weight: 900 !important;
}

body .bbd-nav-link:hover,
body .bbd-nav-link.is-active,
body .bbd-drawer-link:hover {
  background: #fff !important;
  border-color: var(--bbd-brutal-border) !important;
  box-shadow: 4px 4px 0 rgba(255, 107, 53, 0.30) !important;
  transform: translate(-2px, -2px);
}

body .bbd-drawer-panel {
  background: var(--bbd-brutal-paper) !important;
  border-left: 4px solid var(--bbd-brutal-border) !important;
  box-shadow: -10px 0 0 rgba(255, 107, 53, 0.24), -24px 0 60px rgba(16, 16, 31, 0.22) !important;
}

/* Buttons */
body .bbd-btn {
  border: 3px solid var(--bbd-brutal-border) !important;
  border-radius: var(--bbd-brutal-radius) !important;
  font-weight: 950 !important;
  letter-spacing: -0.015em;
  box-shadow: 6px 6px 0 rgba(16, 16, 31, 0.24) !important;
}

body .bbd-btn-primary {
  background: var(--bbd-orange) !important;
  color: #fff !important;
  box-shadow: var(--bbd-brutal-orange-shadow) !important;
}

body .bbd-btn-outline,
body .bbd-btn-light,
body .bbd-btn-ghost {
  background: #fff !important;
  color: var(--bbd-brutal-ink) !important;
}

body .bbd-btn-whatsapp {
  background: #25d366 !important;
  color: #fff !important;
  box-shadow: 7px 7px 0 rgba(37, 211, 102, 0.28) !important;
}

body .bbd-btn:hover {
  transform: translate(-4px, -4px) !important;
  box-shadow: 11px 11px 0 rgba(16, 16, 31, 0.26) !important;
}

body .bbd-btn-primary:hover {
  background: var(--bbd-orange-dark) !important;
  box-shadow: var(--bbd-brutal-mix-shadow) !important;
}

/* Hero families across templates/site */
body :is(.bbd-hero, .bbd-price-hero, .bbd-cmp-hero, .bbd-about-hero, .bbd-aff-hero, .bbd-blog-hero, .bbd-sol-hero, .bbd-csd-hero, .bbd-docs-hero, .bbd-feat-hero, .bbd-legal-hero, .bbd-roi-hero, .bbd-sec-hero, .bbd-st-hero, .bbd-404, .bbd-502) {
  background:
    radial-gradient(circle at 88% 12%, rgba(255, 107, 53, 0.24), transparent 25%),
    linear-gradient(to right, var(--bbd-brutal-grid-orange) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(16, 16, 31, 0.08) 1px, transparent 1px),
    var(--bbd-brutal-paper) !important;
  background-size: auto, 30px 30px, 30px 30px, auto !important;
  border-bottom: 4px solid var(--bbd-brutal-border) !important;
}

body :is(.bbd-404, .bbd-502) {
  min-height: 72vh;
}

/* Cards, panels, surfaces */
body :is(
  .bbd-card, .bbd-card-flat, .bbd-hero-visual, .bbd-search-intent-summary,
  .bbd-guide-callout, .bbd-compare-mini, .bbd-cmp-table-wrap, .bbd-calc,
  .bbd-ai-fit-card, .bbd-search-cluster-card, .bbd-problem-card, .bbd-step,
  .bbd-mini-plan, .bbd-plan, .bbd-testimonial, .bbd-vs-card, .bbd-guide-card,
  .bbd-diff-side, .bbd-sec-card, .bbd-about-visual, .bbd-about-stat,
  .bbd-about-stat-item, .bbd-story, .bbd-value, .bbd-aff-stats,
  .bbd-aff-stat-item, .bbd-sol-card, .bbd-sol-panel, .bbd-sol-step,
  .bbd-sol-related-card, .bbd-blog-card, .bbd-blog-empty, .bbd-csd-method,
  .bbd-csd-timeline, .bbd-csd-results, .bbd-csd-result, .bbd-csd-dash,
  .bbd-csd-dash-card, .bbd-csd-quote, .bbd-form-card, .bbd-docs-callout,
  .bbd-docs-content, .bbd-docs-nav, .bbd-legal-content, .bbd-legal-summary,
  .bbd-legal-related, .bbd-refund-callout, .bbd-roi-calc, .bbd-roi-result,
  .bbd-roi-note, .bbd-st-card, .bbd-st-note, .bbd-st-inc, .bbd-404-shell,
  .bbd-404-card, .bbd-404-search, .bbd-502-shell, .bbd-502-card,
  .bbd-cookie-banner, .bbd-price-sticky, .bbd-toast
) {
  background: var(--bbd-brutal-paper-3) !important;
  border: 3px solid var(--bbd-brutal-border) !important;
  border-radius: var(--bbd-brutal-radius) !important;
  box-shadow: var(--bbd-brutal-ink-shadow) !important;
}

body :is(.bbd-hero-visual, .bbd-cmp-table-wrap, .bbd-compare-mini, .bbd-calc, .bbd-plan.is-popular, .bbd-mini-plan.is-popular, .bbd-vs-card.is-bbd, .bbd-diff-new, .bbd-cta-strip, .bbd-roi-result, .bbd-404-shell, .bbd-502-shell) {
  border-width: 4px !important;
  box-shadow: var(--bbd-brutal-mix-shadow) !important;
}

body :is(.bbd-card, .bbd-blog-card, .bbd-sol-related-card, .bbd-guide-card, .bbd-vs-card, .bbd-plan, .bbd-mini-plan, .bbd-testimonial, .bbd-sec-card, .bbd-value, .bbd-sol-card, .bbd-sol-panel, .bbd-sol-step, .bbd-st-card, .bbd-404-card, .bbd-502-card):hover {
  transform: translate(-5px, -5px) !important;
  border-color: var(--bbd-brutal-border) !important;
  box-shadow: 11px 11px 0 rgba(255, 107, 53, 0.32), 17px 17px 0 rgba(16, 16, 31, 0.18) !important;
}

body .bbd-card::before,
body .bbd-cta-strip::before {
  opacity: 0 !important;
}

/* Badges, chips, labels */
body :is(
  .bbd-eyebrow, .bbd-badge, .bbd-plan-badge, .bbd-live-status,
  .bbd-blog-cat, .bbd-blog-tag, .bbd-csd-tag, .bbd-csd-back,
  .bbd-csd-dash-badge, .bbd-404-chip, .bbd-st-status, .bbd-status-bar,
  .bbd-diff-plat-tag, .bbd-ai-chip, .bbd-search-summary-badge,
  .bbd-integ-pill, .bbd-testimonial-result, .bbd-price-note
) {
  background: #fff !important;
  color: var(--bbd-brutal-ink) !important;
  border: 2px solid var(--bbd-brutal-border) !important;
  border-radius: 7px !important;
  box-shadow: 4px 4px 0 rgba(255, 107, 53, 0.28) !important;
  font-weight: 900 !important;
}

body :is(.bbd-eyebrow)::before,
body :is(.bbd-live-dot, .bbd-integ-dot, .bbd-st-ok) {
  border: 2px solid var(--bbd-brutal-border) !important;
}

/* Icons and counters */
body :is(
  .bbd-card-icon, .bbd-problem-icon, .bbd-step-num, .bbd-sol-step-num,
  .bbd-sec-icon, .bbd-value-icon, .bbd-module-icon, .bbd-testimonial-avatar,
  .bbd-diff-icon-wrap, .bbd-status-num, .bbd-404-code, .bbd-502-code
) {
  background: var(--bbd-orange) !important;
  color: #fff !important;
  border: 3px solid var(--bbd-brutal-border) !important;
  border-radius: var(--bbd-brutal-radius) !important;
  box-shadow: 6px 6px 0 rgba(16, 16, 31, 0.22) !important;
}

body :is(.bbd-plan-price, .bbd-mini-price, .bbd-stat-value, .bbd-stats-bar-value, .bbd-st-metric, .bbd-status-num, .bbd-csd-dash-metric, .bbd-about-stat-item strong, .bbd-aff-stat-item strong, .bbd-roi-result strong, .bbd-404-code, .bbd-502-code) {
  color: var(--bbd-brutal-ink) !important;
  letter-spacing: -0.08em;
  text-shadow: 3px 3px 0 rgba(255, 107, 53, 0.20) !important;
}

body :is(.bbd-404-code, .bbd-502-code) {
  color: #fff !important;
  text-shadow: 4px 4px 0 rgba(16, 16, 31, 0.25) !important;
}

/* Lists, docs, legal, and content blocks */
body :is(.bbd-sol-checklist li, .bbd-diff-list li, .bbd-docs-content li, .bbd-legal-content li, .bbd-search-cluster-list a, .bbd-guide-link, .bbd-plan-resources, .bbd-faq-trigger) {
  border: 2px solid var(--bbd-brutal-border-soft) !important;
  border-radius: 7px !important;
  background: #fff !important;
}

body .bbd-docs-layout {
  align-items: start;
}

body .bbd-docs-nav {
  position: sticky;
  top: 104px;
}

body .bbd-docs-content :is(h2, h3) {
  border-bottom: 3px solid var(--bbd-brutal-border) !important;
  padding-bottom: 10px;
}

body .bbd-docs-content :is(pre, code),
body .bbd-legal-content :is(pre, code) {
  border: 2px solid var(--bbd-brutal-border) !important;
  border-radius: 7px !important;
  background: var(--bbd-brutal-paper-2) !important;
  color: var(--bbd-brutal-ink) !important;
}

/* Tables */
body :is(.bbd-cmp-table, .bbd-compare-mini table, .bbd-docs-content table, .bbd-legal-content table) {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 3px solid var(--bbd-brutal-border) !important;
  border-radius: var(--bbd-brutal-radius) !important;
  overflow: hidden;
}

body :is(.bbd-cmp-table th, .bbd-cmp-table td, .bbd-compare-mini th, .bbd-compare-mini td, .bbd-docs-content th, .bbd-docs-content td, .bbd-legal-content th, .bbd-legal-content td) {
  border-color: var(--bbd-brutal-border) !important;
  border-width: 0 2px 2px 0 !important;
}

body :is(.bbd-cmp-table thead th, .bbd-compare-mini thead th, .bbd-cmp-table .bbd-cat-row td, .bbd-docs-content th, .bbd-legal-content th) {
  background: var(--bbd-brutal-ink) !important;
  color: #fff !important;
  font-weight: 950 !important;
}

body :is(.bbd-cmp-table thead th.is-bbd, .bbd-compare-mini th.is-bbd) {
  background: var(--bbd-orange) !important;
  color: #fff !important;
  box-shadow: inset 0 -8px 0 rgba(16, 16, 31, 0.25) !important;
}

body :is(.bbd-cmp-table .bbd-bbd-col, .bbd-compare-mini td.is-bbd) {
  background: var(--bbd-brutal-paper-2) !important;
  color: var(--bbd-brutal-ink) !important;
  font-weight: 900 !important;
}

/* Forms and calculators */
body :is(.bbd-input, .bbd-textarea, .bbd-select, .bbd-form-field input, .bbd-form-field select, .bbd-form-field textarea, .bbd-roi-field input, .bbd-roi-field select, .bbd-404-search input) {
  background: #fff !important;
  color: var(--bbd-brutal-ink) !important;
  border: 3px solid var(--bbd-brutal-border) !important;
  border-radius: var(--bbd-brutal-radius) !important;
  box-shadow: 5px 5px 0 rgba(16, 16, 31, 0.16) !important;
}

body :is(.bbd-input, .bbd-textarea, .bbd-select, .bbd-form-field input, .bbd-form-field select, .bbd-form-field textarea, .bbd-roi-field input, .bbd-roi-field select, .bbd-404-search input):focus {
  outline: none !important;
  border-color: var(--bbd-orange) !important;
  box-shadow: 5px 5px 0 rgba(255, 107, 53, 0.36), 0 0 0 4px rgba(255, 107, 53, 0.16) !important;
}

body :is(.bbd-form-success, .bbd-form-error) {
  border: 3px solid var(--bbd-brutal-border) !important;
  border-radius: var(--bbd-brutal-radius) !important;
  box-shadow: 5px 5px 0 rgba(16, 16, 31, 0.16) !important;
  font-weight: 800 !important;
}

/* FAQ and CTA */
body .bbd-faq-item {
  background: #fff !important;
  border: 3px solid var(--bbd-brutal-border) !important;
  border-radius: var(--bbd-brutal-radius) !important;
  box-shadow: var(--bbd-brutal-ink-shadow) !important;
}

body .bbd-faq-item.is-open {
  background: var(--bbd-brutal-paper-2) !important;
  box-shadow: var(--bbd-brutal-mix-shadow) !important;
}

body .bbd-faq-trigger::after {
  background: var(--bbd-orange) !important;
  color: #fff !important;
  border: 2px solid var(--bbd-brutal-border) !important;
  border-radius: 6px !important;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body .bbd-cta-strip {
  background:
    linear-gradient(to right, rgba(16, 16, 31, 0.13) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(16, 16, 31, 0.13) 1px, transparent 1px),
    var(--bbd-orange) !important;
  background-size: 24px 24px, 24px 24px, auto !important;
  border: 4px solid var(--bbd-brutal-border) !important;
  border-radius: var(--bbd-brutal-radius) !important;
  box-shadow: var(--bbd-brutal-mix-shadow) !important;
}

body .bbd-cta-strip h2,
body .bbd-cta-strip p {
  color: #fff !important;
}

/* Footer and floating UI */
body .bbd-footer {
  border-top: 5px solid var(--bbd-orange) !important;
  box-shadow: inset 0 10px 0 rgba(255, 107, 53, 0.14) !important;
}

body :is(.bbd-footer-payment span, .bbd-footer-social a, .bbd-back-top, .bbd-whatsapp-float) {
  border: 3px solid var(--bbd-brutal-border) !important;
  border-radius: var(--bbd-brutal-radius) !important;
  box-shadow: 5px 5px 0 rgba(255, 107, 53, 0.28) !important;
}

body .bbd-footer-newsletter-form {
  gap: 12px;
}

body .bbd-footer-newsletter-form .bbd-input {
  background: #fff !important;
  color: var(--bbd-brutal-ink) !important;
}

/* Blog and case-study imagery */
body :is(.bbd-blog-card-image, .bbd-csd-dash-bar) {
  border: 3px solid var(--bbd-brutal-border) !important;
  border-radius: var(--bbd-brutal-radius) !important;
  overflow: hidden;
}

body .bbd-csd-dash-bar i,
body .bbd-roi-result em {
  background: var(--bbd-orange) !important;
}

/* Responsive guardrails */
@media (max-width: 760px) {
  body {
    background-size: 24px 24px, 24px 24px, auto, auto !important;
  }

  body :is(.bbd-hero, .bbd-price-hero, .bbd-cmp-hero, .bbd-about-hero, .bbd-aff-hero, .bbd-blog-hero, .bbd-sol-hero, .bbd-csd-hero, .bbd-docs-hero, .bbd-feat-hero, .bbd-legal-hero, .bbd-roi-hero, .bbd-sec-hero, .bbd-st-hero, .bbd-404, .bbd-502) {
    border-bottom-width: 3px !important;
  }

  body :is(.bbd-btn, .bbd-card, .bbd-card-flat, .bbd-plan, .bbd-mini-plan, .bbd-testimonial, .bbd-vs-card, .bbd-sol-card, .bbd-sol-panel, .bbd-sol-step, .bbd-blog-card, .bbd-sec-card, .bbd-value, .bbd-form-card, .bbd-docs-content, .bbd-docs-nav, .bbd-legal-content, .bbd-roi-calc, .bbd-roi-result, .bbd-st-card, .bbd-404-shell, .bbd-502-shell, .bbd-cta-strip) {
    border-width: 2px !important;
    box-shadow: 5px 5px 0 rgba(16, 16, 31, 0.16) !important;
  }

  body .bbd-btn:hover,
  body :is(.bbd-card, .bbd-blog-card, .bbd-sol-related-card, .bbd-guide-card, .bbd-vs-card, .bbd-plan, .bbd-mini-plan, .bbd-testimonial, .bbd-sec-card, .bbd-value, .bbd-sol-card, .bbd-sol-panel, .bbd-sol-step, .bbd-st-card, .bbd-404-card, .bbd-502-card):hover {
    transform: translateY(-1px) !important;
    box-shadow: 6px 6px 0 rgba(255, 107, 53, 0.24) !important;
  }

  body .bbd-docs-nav {
    position: relative;
    top: auto;
  }
}

/* ==========================================================================
   Homepage editorial annotation pass
   Stape-inspired in feel, but original to BonicBD and scoped to bonicbd.com.
   ========================================================================== */

body.bbd-homepage {
  --bbd-home-ink: #12162f;
  --bbd-home-ink-soft: #4f556f;
  --bbd-home-orange: #ff6b35;
  --bbd-home-orange-deep: #f05622;
  --bbd-home-orange-soft: #fff1e8;
  --bbd-home-orange-shadow: rgba(255, 107, 53, 0.18);
  --bbd-home-border: rgba(18, 22, 47, 0.18);
  background:
    linear-gradient(to right, rgba(255, 107, 53, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 107, 53, 0.06) 1px, transparent 1px),
    radial-gradient(circle at 92% 5%, rgba(255, 107, 53, 0.13), transparent 22%),
    #fffaf6 !important;
  background-size: 34px 34px, 34px 34px, auto, auto !important;
}

body.bbd-homepage .bbd-nav {
  background: rgba(255, 255, 255, 0.94) !important;
  border-bottom: 2px solid rgba(255, 107, 53, 0.26) !important;
  box-shadow: 0 10px 24px rgba(18, 22, 47, 0.06) !important;
}

body.bbd-homepage .bbd-brand-logo,
body.bbd-homepage .bbd-nav-logo,
body.bbd-homepage .bbd-brand-logo-footer {
  border-width: 2px !important;
  box-shadow: 3px 3px 0 rgba(255, 107, 53, 0.2) !important;
}

body.bbd-homepage .bbd-nav-link,
body.bbd-homepage .bbd-drawer-link {
  font-weight: 800 !important;
  color: var(--bbd-home-ink) !important;
}

body.bbd-homepage .bbd-nav-link:hover,
body.bbd-homepage .bbd-nav-link.is-active,
body.bbd-homepage .bbd-drawer-link:hover {
  background: rgba(255, 107, 53, 0.08) !important;
  color: var(--bbd-home-orange) !important;
  box-shadow: 3px 3px 0 rgba(255, 107, 53, 0.14) !important;
  transform: translate(-1px, -1px);
}

body.bbd-homepage .bbd-btn {
  border-width: 2px !important;
  border-radius: 10px !important;
  box-shadow: 4px 4px 0 rgba(18, 22, 47, 0.16) !important;
}

body.bbd-homepage .bbd-btn-primary {
  background: linear-gradient(135deg, var(--bbd-home-orange) 0%, #ff8a5c 100%) !important;
  border-color: rgba(18, 22, 47, 0.82) !important;
  color: #fff !important;
  box-shadow: 6px 6px 0 rgba(18, 22, 47, 0.14) !important;
}

body.bbd-homepage .bbd-btn-whatsapp {
  background: #fff !important;
  color: var(--bbd-home-ink) !important;
  border-color: rgba(255, 107, 53, 0.56) !important;
  box-shadow: 4px 4px 0 rgba(255, 107, 53, 0.14) !important;
}

body.bbd-homepage .bbd-btn:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 6px 6px 0 rgba(18, 22, 47, 0.16) !important;
}

body.bbd-homepage .bbd-btn-primary:hover {
  background: linear-gradient(135deg, var(--bbd-home-orange-deep) 0%, #ff7440 100%) !important;
  box-shadow: 7px 7px 0 rgba(18, 22, 47, 0.16) !important;
}

body.bbd-homepage .bbd-btn-whatsapp:hover {
  background: var(--bbd-home-orange-soft) !important;
  box-shadow: 6px 6px 0 rgba(255, 107, 53, 0.16) !important;
}

body.bbd-homepage .bbd-hero {
  background:
    radial-gradient(circle at 90% 12%, rgba(255, 107, 53, 0.15), transparent 24%),
    radial-gradient(circle at 0% 100%, rgba(255, 164, 127, 0.2), transparent 28%),
    linear-gradient(to right, rgba(255, 107, 53, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 107, 53, 0.05) 1px, transparent 1px),
    #fff8f4 !important;
  background-size: auto, 42px 42px, 42px 42px, auto !important;
  border-bottom: 2px solid rgba(255, 107, 53, 0.18) !important;
}

body.bbd-homepage .bbd-hero-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.88fr);
  gap: clamp(32px, 4vw, 72px);
  align-items: start;
}

body.bbd-homepage .bbd-home-hero-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.04em;
  width: 100%;
  max-width: 100%;
  margin: 0 0 16px;
  font-size: clamp(2rem, 3.8vw, 4.2rem);
  line-height: 1.03;
  letter-spacing: -0.052em;
  color: var(--bbd-home-ink);
  text-shadow: none !important;
  overflow: visible;
}

body.bbd-homepage .bbd-home-title-line {
  display: block;
  max-width: 100%;
}

body.bbd-homepage .bbd-hero-sub {
  max-width: 600px;
  font-size: clamp(1.04rem, 1.6vw, 1.18rem);
  color: var(--bbd-home-ink-soft);
}

body.bbd-homepage .bbd-eyebrow {
  background: #fff !important;
  color: var(--bbd-home-orange) !important;
  border: 2px solid rgba(255, 107, 53, 0.42) !important;
  box-shadow: 3px 3px 0 rgba(255, 107, 53, 0.12) !important;
}

body.bbd-homepage .bbd-hero-proof span,
body.bbd-homepage .bbd-hero-stats,
body.bbd-homepage .bbd-hero-stats .bbd-stat-label {
  color: var(--bbd-home-ink-soft);
}

body.bbd-homepage .bbd-hero-stats {
  border-top: 1px solid rgba(255, 107, 53, 0.16);
}

body.bbd-homepage .bbd-hero-visual,
body.bbd-homepage .bbd-card,
body.bbd-homepage .bbd-card-flat,
body.bbd-homepage .bbd-search-intent-summary,
body.bbd-homepage .bbd-guide-callout,
body.bbd-homepage .bbd-compare-mini,
body.bbd-homepage .bbd-ai-fit-card,
body.bbd-homepage .bbd-search-cluster-card,
body.bbd-homepage .bbd-problem-card,
body.bbd-homepage .bbd-step,
body.bbd-homepage .bbd-mini-plan,
body.bbd-homepage .bbd-testimonial,
body.bbd-homepage .bbd-diff-side,
body.bbd-homepage .bbd-security-grid .bbd-card,
body.bbd-homepage .bbd-cta-strip {
  border-width: 2px !important;
  border-color: rgba(255, 107, 53, 0.2) !important;
  border-radius: 12px !important;
  box-shadow: 0 20px 44px rgba(18, 22, 47, 0.06), 0 0 0 1px rgba(255, 107, 53, 0.03) !important;
}

body.bbd-homepage .bbd-hero-visual {
  box-shadow: 14px 14px 0 rgba(255, 107, 53, 0.1), 0 24px 56px rgba(18, 22, 47, 0.08) !important;
}

body.bbd-homepage .bbd-card:hover,
body.bbd-homepage .bbd-ai-fit-card:hover,
body.bbd-homepage .bbd-search-cluster-card:hover,
body.bbd-homepage .bbd-problem-card:hover,
body.bbd-homepage .bbd-step:hover,
body.bbd-homepage .bbd-mini-plan:hover,
body.bbd-homepage .bbd-testimonial:hover,
body.bbd-homepage .bbd-vs-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 24px 52px rgba(18, 22, 47, 0.08), 0 0 0 1px rgba(255, 107, 53, 0.06) !important;
}

body.bbd-homepage .bbd-home-cta-aside,
body.bbd-homepage .bbd-home-visual-note {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--bbd-home-orange);
  font-size: 0.92rem;
  line-height: 1.35;
  font-weight: 700;
  font-style: italic;
}

body.bbd-homepage .bbd-home-cta-aside {
  margin-top: 8px;
  margin-bottom: 18px;
  transform: rotate(-2deg);
}

body.bbd-homepage .bbd-home-visual-note {
  margin: 10px 16px 16px auto;
  justify-content: flex-end;
  max-width: 280px;
  transform: rotate(2deg);
}

body.bbd-homepage .bbd-home-cta-arrow,
body.bbd-homepage .bbd-home-visual-arrow {
  width: 86px;
  height: auto;
  flex-shrink: 0;
  color: var(--bbd-home-orange);
}

body.bbd-homepage .bbd-home-cta-note,
body.bbd-homepage .bbd-home-visual-note span {
  color: var(--bbd-home-orange);
}

body.bbd-homepage .bbd-stats-bar {
  background: linear-gradient(135deg, var(--bbd-home-orange) 0%, #ff8a5c 100%) !important;
  border-block: 2px solid rgba(18, 22, 47, 0.14);
}

body.bbd-homepage .bbd-section-head h2,
body.bbd-homepage .bbd-cta-strip h2 {
  letter-spacing: -0.065em;
  color: var(--bbd-home-ink);
}

body.bbd-homepage .bbd-anno-circle,
body.bbd-homepage .bbd-anno-pill {
  position: relative;
  display: inline-block;
  z-index: 1;
}

body.bbd-homepage .bbd-anno-circle {
  padding: 0.02em 0.2em 0.08em;
  color: var(--bbd-home-ink);
}

body.bbd-homepage .bbd-anno-circle::before {
  content: '';
  position: absolute;
  inset: -0.14em -0.26em -0.1em;
  border: 3px solid rgba(255, 107, 53, 0.9);
  border-radius: 999px;
  transform: rotate(-3deg);
  z-index: -1;
}

body.bbd-homepage .bbd-anno-underline {
  position: relative;
  display: inline-block;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  background-image:
    linear-gradient(180deg, transparent 63%, rgba(255, 107, 53, 0.18) 63%, rgba(255, 107, 53, 0.18) 100%),
    linear-gradient(180deg, transparent 76%, rgba(255, 107, 53, 1) 76%, rgba(255, 107, 53, 1) 91%, transparent 91%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding-inline: 0.06em;
  color: var(--bbd-home-ink);
}

body.bbd-homepage .bbd-anno-pill {
  padding: 0.02em 0.42em 0.1em;
  border: 2px solid rgba(255, 107, 53, 0.7);
  border-radius: 999px;
  background: #fffdfb;
  box-shadow: 4px 4px 0 rgba(255, 107, 53, 0.14);
  color: var(--bbd-home-ink);
  transform: rotate(-1.5deg);
}

body.bbd-homepage .bbd-compare-mini table,
body.bbd-homepage .bbd-cmp-table {
  border-radius: 12px !important;
  overflow: hidden;
}

body.bbd-homepage .bbd-compare-mini thead th,
body.bbd-homepage .bbd-cmp-table thead th,
body.bbd-homepage .bbd-cmp-table .bbd-cat-row td {
  background: var(--bbd-home-ink) !important;
}

body.bbd-homepage .bbd-compare-mini th.is-bbd,
body.bbd-homepage .bbd-cmp-table thead th.is-bbd {
  background: var(--bbd-home-orange) !important;
  box-shadow: inset 0 -5px 0 rgba(18, 22, 47, 0.14) !important;
}

body.bbd-homepage .bbd-cta-strip {
  background:
    radial-gradient(circle at 88% 22%, rgba(255, 255, 255, 0.5), transparent 24%),
    linear-gradient(to right, rgba(255, 107, 53, 0.12) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 107, 53, 0.12) 1px, transparent 1px),
    #fff6f0 !important;
  background-size: auto, 24px 24px, 24px 24px, auto !important;
  color: var(--bbd-home-ink) !important;
}

body.bbd-homepage .bbd-cta-strip h2,
body.bbd-homepage .bbd-cta-strip p {
  color: var(--bbd-home-ink) !important;
}

body.bbd-homepage .bbd-testimonials-section {
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 107, 53, 0.12), transparent 24%),
    radial-gradient(circle at 88% 100%, rgba(255, 170, 140, 0.15), transparent 26%),
    #fffaf7 !important;
  border-top: 2px solid rgba(255, 107, 53, 0.14);
}

body.bbd-homepage .bbd-trust-badge {
  background: #fff !important;
  color: var(--bbd-home-ink-soft) !important;
  border: 2px solid rgba(255, 107, 53, 0.18) !important;
  box-shadow: 2px 2px 0 rgba(255, 107, 53, 0.1) !important;
}

body.bbd-homepage .bbd-visual-tag,
body.bbd-homepage .bbd-hero-visual-head span:last-child,
body.bbd-homepage .bbd-visual-foot,
body.bbd-homepage .bbd-section-head p,
body.bbd-homepage .bbd-lead {
  color: var(--bbd-home-ink-soft) !important;
}

body.bbd-homepage .bbd-hero-sub a,
body.bbd-homepage .bbd-visual-foot strong {
  color: var(--bbd-home-orange) !important;
}

/* .bbd-accent on orange stats bar must stay white — only apply orange outside it */
body.bbd-homepage .bbd-accent {
  color: var(--bbd-home-orange) !important;
}

body.bbd-homepage .bbd-stats-bar .bbd-accent,
body.bbd-homepage .bbd-stats-bar .bbd-stats-bar-value,
body.bbd-homepage .bbd-stats-bar .bbd-stats-bar-label {
  color: #fff !important;
}

/* Hero title lines can wrap on any screen — let the column width decide */
body.bbd-homepage .bbd-home-hero-title {
  overflow-wrap: break-word;
  word-break: break-word;
}

@media (max-width: 860px) {
  body.bbd-homepage .bbd-hero-grid {
    grid-template-columns: 1fr;
  }

  body.bbd-homepage .bbd-home-hero-title {
    width: 100%;
  }

  body.bbd-homepage .bbd-home-cta-aside,
  body.bbd-homepage .bbd-home-visual-note {
    transform: none;
  }

  body.bbd-homepage .bbd-home-visual-note {
    margin-left: 16px;
    margin-right: 16px;
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  body.bbd-homepage {
    background-size: 24px 24px, 24px 24px, auto, auto !important;
  }

  body.bbd-homepage .bbd-home-hero-title {
    font-size: clamp(1.8rem, 8.4vw, 2.65rem);
    line-height: 1.06;
    letter-spacing: -0.04em;
  }

  body.bbd-homepage .bbd-anno-pill {
    padding: 0.02em 0.32em 0.08em;
  }

  body.bbd-homepage .bbd-home-cta-aside,
  body.bbd-homepage .bbd-home-visual-note {
    flex-direction: column;
    gap: 6px;
    font-size: 0.84rem;
  }

  body.bbd-homepage .bbd-home-cta-arrow,
  body.bbd-homepage .bbd-home-visual-arrow {
    width: 64px;
  }

  body.bbd-homepage .bbd-anno-circle::before {
    border-width: 2px;
  }
}

/* ==========================================================================
   Hero v2 refinement — calmer headline, refined eyebrow, monitor chrome
   ========================================================================== */

body.bbd-homepage .bbd-eyebrow.bbd-hero-eyebrow-anim {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 10px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid rgba(255, 107, 53, 0.32) !important;
  box-shadow: 0 6px 16px rgba(255, 107, 53, 0.10) !important;
  font-weight: 700 !important;
  letter-spacing: -0.005em;
  text-transform: none;
}

body.bbd-homepage .bbd-eyebrow-dot {
  position: relative;
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--bbd-home-orange);
  box-shadow: 0 0 0 0 rgba(255, 107, 53, 0.55);
  animation: bbd-eyebrow-pulse 1.8s ease-out infinite;
}

@keyframes bbd-eyebrow-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 107, 53, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(255, 107, 53, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 107, 53, 0); }
}

body.bbd-homepage .bbd-home-hero-title {
  font-weight: 800;
  font-size: clamp(2.1rem, 4vw, 4.4rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.055em !important;
  gap: 0.06em;
}

body.bbd-homepage .bbd-anno-underline {
  background-image:
    linear-gradient(180deg, transparent 60%, rgba(255, 107, 53, 0.22) 60%, rgba(255, 107, 53, 0.22) 100%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding-inline: 0.08em;
  border-radius: 4px;
  color: var(--bbd-home-ink);
  font-weight: 800;
}

body.bbd-homepage .bbd-anno-pill {
  display: inline-block;
  padding: 0.04em 0.42em 0.1em;
  border: 2px solid var(--bbd-home-orange);
  border-radius: 999px;
  background: #fff;
  color: var(--bbd-home-orange);
  box-shadow: 0 6px 14px rgba(255, 107, 53, 0.14);
  transform: none;
  font-weight: 800;
}

body.bbd-homepage .bbd-hero-sub {
  font-size: clamp(1rem, 1.3vw, 1.12rem) !important;
  line-height: 1.65 !important;
  color: var(--bbd-home-ink-soft) !important;
  max-width: 560px;
  margin-bottom: 22px;
}

body.bbd-homepage .bbd-home-cta-aside {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 22px;
  padding: 0;
  transform: none;
  font-style: normal;
  font-weight: 600;
  color: var(--bbd-home-ink-soft);
  font-size: 0.88rem;
}

body.bbd-homepage .bbd-home-cta-aside .bbd-home-cta-note {
  color: var(--bbd-home-ink-soft);
}

body.bbd-homepage .bbd-hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 4px 0 22px;
}

body.bbd-homepage .bbd-hero-proof span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 107, 53, 0.22);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--bbd-home-ink) !important;
}

body.bbd-homepage .bbd-hero-proof span svg {
  width: 13px;
  height: 13px;
  color: var(--bbd-home-orange);
}

/* ===== Infrastructure Monitor — browser-like chrome frame ===== */

body.bbd-homepage .bbd-hero-visual {
  background: #ffffff !important;
  border: 1px solid rgba(18, 22, 47, 0.08) !important;
  border-radius: 16px !important;
  padding: 0 !important;
  overflow: hidden;
  box-shadow:
    0 28px 60px -20px rgba(18, 22, 47, 0.22),
    0 0 0 1px rgba(255, 107, 53, 0.06),
    14px 14px 0 -6px rgba(255, 107, 53, 0.10) !important;
}

body.bbd-homepage .bbd-hero-visual-chrome {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: linear-gradient(180deg, #12162f 0%, #1a1f3d 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

body.bbd-homepage .bbd-chrome-dot {
  width: 11px;
  height: 11px;
  border-radius: 999px;
  flex-shrink: 0;
}

body.bbd-homepage .bbd-chrome-dot--red    { background: #ff5f57; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18); }
body.bbd-homepage .bbd-chrome-dot--amber  { background: #febc2e; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18); }
body.bbd-homepage .bbd-chrome-dot--green  { background: #28c840; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18); }

body.bbd-homepage .bbd-chrome-url {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 8px;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.78);
  font-family: 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

body.bbd-homepage .bbd-chrome-url svg {
  width: 12px;
  height: 12px;
  color: #28c840;
  flex-shrink: 0;
}

body.bbd-homepage .bbd-chrome-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(40, 200, 64, 0.14);
  border: 1px solid rgba(40, 200, 64, 0.32);
  color: #4ade80;
  font-family: 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

body.bbd-homepage .bbd-chrome-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #28c840;
  box-shadow: 0 0 0 0 rgba(40, 200, 64, 0.7);
  animation: bbd-eyebrow-pulse 1.6s ease-out infinite;
}

body.bbd-homepage .bbd-hero-visual-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px 10px;
  border-bottom: 1px dashed rgba(18, 22, 47, 0.08);
  background: #fffaf6;
}

body.bbd-homepage .bbd-visual-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(255, 107, 53, 0.1);
  color: var(--bbd-home-orange) !important;
  border: 1px solid rgba(255, 107, 53, 0.28);
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body.bbd-homepage .bbd-visual-meta {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-family: 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.7rem;
  color: var(--bbd-home-ink-soft);
  letter-spacing: 0.02em;
}

body.bbd-homepage .bbd-visual-meta .bbd-visual-metric strong {
  color: var(--bbd-home-ink);
  font-weight: 700;
}

body.bbd-homepage .bbd-hero-visual > svg {
  display: block;
  width: 100%;
  padding: 14px 16px 6px;
  background: #fffaf6;
}

body.bbd-homepage .bbd-visual-foot {
  padding: 10px 18px 14px;
  background: #fffaf6;
  border-top: 1px dashed rgba(18, 22, 47, 0.08);
}

body.bbd-homepage .bbd-home-visual-note {
  margin: 14px 18px 16px;
  padding: 10px 14px;
  background: rgba(255, 107, 53, 0.06);
  border: 1px dashed rgba(255, 107, 53, 0.3);
  border-radius: 10px;
  color: var(--bbd-home-ink-soft);
  font-size: 0.82rem;
  font-style: normal;
  font-weight: 600;
  transform: none;
  max-width: none;
  justify-content: flex-start;
}

body.bbd-homepage .bbd-home-visual-arrow {
  display: none;
}

body.bbd-homepage .bbd-home-visual-note span {
  color: var(--bbd-home-ink-soft);
}

@media (max-width: 640px) {
  body.bbd-homepage .bbd-hero-visual-chrome {
    padding: 10px 12px;
  }

  body.bbd-homepage .bbd-chrome-url {
    font-size: 0.7rem;
    padding: 5px 10px;
    margin: 0 4px;
  }

  body.bbd-homepage .bbd-chrome-live {
    display: none;
  }

  body.bbd-homepage .bbd-hero-visual-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  body.bbd-homepage .bbd-visual-meta {
    gap: 10px;
    font-size: 0.66rem;
  }

  body.bbd-homepage .bbd-hero-proof span {
    font-size: 0.78rem;
    padding: 5px 10px;
  }
}

/* ==========================================================================
   Hard-square mode — remove all rounded corners across the /site surface
   ========================================================================== */

body,
body *,
body *::before,
body *::after {
  border-radius: 0 !important;
}

/* Buttons need a higher-specificity square override because homepage rules
   set rounded corners with !important on .bbd-btn variants. */
body .bbd-btn,
body .bbd-btn-primary,
body .bbd-btn-outline,
body .bbd-btn-light,
body .bbd-btn-ghost,
body .bbd-btn-whatsapp,
body button,
body input[type='button'],
body input[type='submit'],
body input[type='reset'],
body .bbd-nav-toggle,
body .bbd-back-top,
body .bbd-whatsapp-float,
body.bbd-homepage .bbd-btn,
body.bbd-homepage .bbd-btn-primary,
body.bbd-homepage .bbd-btn-outline,
body.bbd-homepage .bbd-btn-light,
body.bbd-homepage .bbd-btn-ghost,
body.bbd-homepage .bbd-btn-whatsapp,
body.bbd-homepage .bbd-nav-toggle,
body.bbd-homepage .bbd-back-top,
body.bbd-homepage .bbd-whatsapp-float,
body .bbd-btn::before,
body .bbd-btn::after,
body.bbd-homepage .bbd-btn::before,
body.bbd-homepage .bbd-btn::after {
  border-radius: 0 !important;
}