/* Shared components: buttons, eyebrow, section shell */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 0 17px; border: 1px solid transparent; border-radius: var(--r-control); font-size: 13px; font-weight: 680; white-space: nowrap; transition: transform .16s ease, background .16s ease, box-shadow .16s ease; }
.button:hover { transform: translateY(-1px); }
.button-primary { color: #fff; background: var(--blue-600); box-shadow: 0 2px 5px rgb(37 99 235 / 18%); }
.button-primary:hover { background: var(--blue-700); box-shadow: 0 5px 14px rgb(37 99 235 / 22%); }
.button-secondary { color: var(--ink-2); background: #fff; border-color: #d0d5dd; }
.button-secondary:hover { border-color: #98a2b3; background: #fbfcfe; }
.button svg { width: 16px; height: 16px; }

.eyebrow { display: inline-flex; align-items: center; gap: 9px; color: var(--blue-700); font-size: 11px; font-weight: 760; letter-spacing: .12em; text-transform: uppercase; }
.eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue-500); box-shadow: 0 0 0 4px #dbeafe; }

.section { padding: 104px 0; }
.section-heading { max-width: 670px; margin: 0 auto 43px; text-align: center; }
.section-heading .eyebrow { justify-content: center; }
.section-heading h2 { margin: 14px 0 12px; color: #111b2e; font-size: clamp(31px,4vw,44px); line-height: 1.12; letter-spacing: -.055em; }
.section-heading p { margin: 0 auto; max-width: 570px; color: var(--muted); font-size: 15px; line-height: 1.75; }

@media (max-width: 820px) {
  .section { padding: 78px 0; }
}
@media (max-width: 620px) {
  .section { padding: 66px 0; }
  .section-heading { margin-bottom: 28px; }
  .section-heading h2 { font-size: 32px; }
  .section-heading p { font-size: 14px; }
}