/* Opsetu WhatsApp — Bootstrap 5.3 theme layer.
   Verified against the real compiled bootstrap.css (not assumed): 5.3's
   "CSS variables first" redesign covers utilities like .text-bg-primary
   (they reference var(--bs-primary-rgb) directly), but components like
   .btn-primary and the accordion's active state use their OWN pre-baked
   component-scoped variables (--bs-btn-bg, --bs-accordion-active-bg, etc.)
   set to fixed hex at build time — overriding --bs-primary alone does NOT
   recolor those. Both layers are overridden below. */
:root{
  --bs-primary: #059669;
  --bs-primary-rgb: 5, 150, 105;
  --bs-primary-text-emphasis: #065f46;
  --bs-primary-bg-subtle: #d1fae5;
  --bs-primary-border-subtle: #6ee7b7;
  --bs-link-color: #059669;
  --bs-link-color-rgb: 5, 150, 105;
  --bs-link-hover-color: #065f46;
  --bs-link-hover-color-rgb: 6, 95, 70;

  --bs-body-bg: #f3f6f9;
  --bs-body-color: #16233a;
  --bs-secondary-color: #54627a;
  --bs-tertiary-color: #8592a8;
  --bs-border-color: #d8e0e8;

  --bs-font-sans-serif: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);

  --bs-border-radius: .75rem;
  --bs-border-radius-lg: 1rem;
  --bs-border-radius-sm: .5rem;
  --bs-border-radius-xl: 1.25rem;
  --bs-border-radius-pill: 999px;
}

body{ -webkit-font-smoothing:antialiased }
h1,h2,h3,h4{ font-weight:800; letter-spacing:-.015em }

.btn{ font-weight:600; border-radius:var(--bs-border-radius) }
.btn-lg{ padding:.85rem 1.75rem }
.btn-primary{
  --bs-btn-color:#fff; --bs-btn-bg:#059669; --bs-btn-border-color:#059669;
  --bs-btn-hover-color:#fff; --bs-btn-hover-bg:#065f46; --bs-btn-hover-border-color:#065f46;
  --bs-btn-active-color:#fff; --bs-btn-active-bg:#065f46; --bs-btn-active-border-color:#065f46;
  --bs-btn-disabled-bg:#059669; --bs-btn-disabled-border-color:#059669;
  --bs-btn-focus-shadow-rgb: 5,150,105;
  box-shadow:0 6px 18px rgba(5,150,105,.28);
}
.btn-outline-primary{
  --bs-btn-color:#059669; --bs-btn-border-color:#059669;
  --bs-btn-hover-bg:#059669; --bs-btn-hover-border-color:#059669;
  --bs-btn-active-bg:#065f46; --bs-btn-active-border-color:#065f46;
}
.btn-dark{ --bs-btn-bg:#16233a; --bs-btn-border-color:#16233a; --bs-btn-hover-bg:#223252; --bs-btn-hover-border-color:#223252 }

.card{ box-shadow:0 1px 3px rgba(22,35,58,.08), 0 1px 2px rgba(22,35,58,.05); border-color:var(--bs-border-color) }
.card.shadow-hover{ transition:transform .15s cubic-bezier(.2,.7,.3,1), box-shadow .15s cubic-bezier(.2,.7,.3,1) }
.card.shadow-hover:hover{ transform:translateY(-3px); box-shadow:0 12px 28px rgba(22,35,58,.12) }

.navbar{ box-shadow:0 1px 0 var(--bs-border-color) }
.navbar-brand img{ height:30px }

.accordion-button:not(.collapsed){ box-shadow:none }
.accordion-item{ border-color:var(--bs-border-color) }

.icon-tile{ width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:var(--bs-primary-bg-subtle); color:var(--bs-primary-text-emphasis); font-size:1.25rem; flex:none }
.icon-tile.lg{ width:64px; height:64px; border-radius:16px; font-size:1.75rem }

.eyebrow{ font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--bs-primary-text-emphasis) }

/* Illustrative product mockup — no direct Bootstrap equivalent, kept minimal */
.chat-mock{ background:#e9e2d8; border-radius:1.25rem; padding:1.1rem; box-shadow:0 16px 40px rgba(22,35,58,.14) }
.chat-mock .bubble{ border-radius:.9rem; padding:.6rem .85rem; font-size:.86rem; line-height:1.4; max-width:85%; margin-bottom:.5rem; box-shadow:0 1px 2px rgba(0,0,0,.06); background:#fff; border-bottom-left-radius:4px }
.chat-mock .bubble.out{ background:#d9fdd3; margin-left:auto; border-bottom-left-radius:.9rem; border-bottom-right-radius:4px }
.chat-mock .bubble .btn-row{ margin:.5rem -0.85rem -0.6rem; border-top:1px solid #e2e6e8; padding:.5rem 0; text-align:center; color:#00a5f4; font-size:.8rem }
.chat-mock .tag{ font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; color:#8592a8; text-align:center; margin-top:.5rem }

.cta-band{ background:#16233a; border-radius:1.5rem; color:#fff; padding:3.5rem 2.5rem }
.cta-band .btn-light:hover{ background:var(--bs-primary-bg-subtle) }

.table-compare{ --bs-table-bg:transparent }
.table-compare th, .table-compare td{ vertical-align:middle }
.table-compare .col-us{ color:var(--bs-primary-text-emphasis); font-weight:700 }

/* Phones: the widest row gutter is wider than the container padding and made pages scroll sideways */
@media (max-width:575.98px){ .row.g-5{ --bs-gutter-x:1.5rem } }