/* ==========================================================================
   Bobex Landing Pages — base.css
   Global design tokens, layout utilities and shared button styles.
   Always loaded; per-block CSS lives in each block's own style.css.
   ========================================================================== */

:root {
  --bbx-primary:      #002664;
  --bbx-primary-dark: #001F4E;
  --bbx-accent-blue:  #26477B;
  --bbx-cyan:         #43BAFF;
  --bbx-orange:       #FF511C;
  --bbx-dark-navy:    #000D17;
  --bbx-bg-light:     #EEF4FF;
  --bbx-bg-gray:      #F4F6FB;
  --bbx-white:        #FFFFFF;
  --bbx-text-dark:    #000000;
  --bbx-text-muted:   #6A6A6A;
  --bbx-text-light:   rgba(255,255,255,.75);
  --bbx-border:       #DEDEDE;
  --bbx-border-dark:  #BFBFBF;
  --bbx-fira:         'Fira Sans Condensed', sans-serif;
  --bbx-fira-body:    'Fira Sans', sans-serif;
  --bbx-radius:       12px;
  --bbx-radius-pill:  999px;
  --bbx-pad-x:        140px;
  --bbx-pad-y:        80px;
}

/* ── Container ──────────────────────────────────────────────────────────── */
.bbx-container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--bbx-pad-x);
}
@media (max-width: 768px) {
  :root { --bbx-pad-x: 16px; --bbx-pad-y: 48px; }
  .bbx-container { max-width: 100%; }
}

/* ── Section base ────────────────────────────────────────────────────────── */
.bbx-section { padding: var(--bbx-pad-y) 0; }

/* ── Typography helpers ──────────────────────────────────────────────────── */
.bbx-section-title {
  font-family: var(--bbx-fira);
  font-size: 40px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--bbx-text-dark);
  margin-bottom: 12px;
  text-align: center;
}
.bbx-section-subtitle {
  font-family: var(--bbx-fira-body);
  font-size: 20px;
  line-height: 1.4;
  color: var(--bbx-text-muted);
  text-align: center;
}
@media (max-width: 768px) {
  .bbx-section-title    { font-size: 28px; }
  .bbx-section-subtitle { font-size: 16px; }
}

/* ── Shared CTA button ───────────────────────────────────────────────────── */
.bbx-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 36px;
  background: var(--bbx-orange);
  color: #fff;
  font-family: var(--bbx-fira);
  font-size: 22px;
  font-weight: 600;
  border-radius: var(--bbx-radius-pill);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .2s ease, box-shadow .2s ease;
}
.bbx-cta-btn:hover,
.bbx-cta-btn:focus {
  background: #e8461a;
  box-shadow: 0 6px 20px rgba(255, 81, 28, 0.4);
  color: #fff;
  text-decoration: none;
}
.bbx-cta-btn:active { box-shadow: 0 2px 8px rgba(255, 81, 28, 0.25); }
.bbx-cta-btn--full  { width: 100%; justify-content: center; }
@media (max-width: 768px) {
  .bbx-cta-btn { font-size: 18px; padding: 14px 24px; }
}