/* ==========================================================================
   04. BUTTONS & INLINE LINKS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9375rem;
  padding: 14px 28px;
  border-radius: var(--radius-full);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
  white-space: nowrap;
  min-height: 48px;
}

.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--navy-900);
  color: var(--white);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover {
  background: var(--blue-600);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.btn-accent {
  background: linear-gradient(135deg, var(--accent-500), var(--accent-600));
  color: var(--navy-900);
  box-shadow: 0 10px 24px rgba(217, 130, 15, 0.28);
}
.btn-accent:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(217, 130, 15, 0.36);
}

.btn-outline {
  background: transparent;
  color: var(--navy-900);
  border: 1.5px solid var(--border-strong);
}
.btn-outline:hover {
  border-color: var(--navy-900);
  background: var(--bg-soft);
}

.btn-outline-light {
  background: transparent;
  color: var(--white);
  border: 1.5px solid rgba(255, 255, 255, 0.4);
}
.btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--white);
}

.btn-block { width: 100%; }

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

/* Row of buttons, used by the hero and repeated in several CTA panels */
.btn-row {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-bottom: var(--sp-5);
}
.btn-row-center {
  justify-content: center;
  margin-top: var(--sp-3);
}

/* "Learn More" style link at the foot of a card */
.card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--sp-3);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--blue-600);
}
.card-link svg { transition: transform var(--dur-fast) var(--ease); }
.card-link:hover { color: var(--navy-900); }
.card-link:hover svg { transform: translateX(3px); }