/* ==========================================================================
   UI atoms — buttons, arrow links
   ========================================================================== */

/* ---- Buttons (ported from HARDWARIO Academy) ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  /* Fixed height per tier so icon vs. no-icon (and <a> vs <button>) can never
     change a button's height — only horizontal padding varies. box-sizing:
     border-box (global) keeps outline and solid buttons the exact same height. */
  min-height: 44px;
  padding: 0 32px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 600;
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  text-transform: uppercase;
  transition: filter .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.btn__icon { display: inline-flex; align-items: center; justify-content: center; flex: none; }
.btn__icon svg { width: 18px; height: 18px; display: block; }

/* Animated CTA arrow (ported from HARDWARIO Academy) — sized so it doesn't inflate the button */
.cta-arrow { width: 16px; height: 16px; animation: cta-arrow-nudge 2.5s ease-in-out infinite; }
@keyframes cta-arrow-nudge {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .cta-arrow { animation: none; }
}

.btn--sm { padding: 0 24px; }
.btn--lg { padding: 0 40px; font-size: 14px; }
.btn--block { width: 100%; }

.btn--primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn--primary:hover { background: var(--primary-btn-hover); border-color: var(--primary-btn-hover); }


.btn--outline { background: transparent; border-color: var(--text); color: var(--text); }
.btn--outline:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn--outline-light { background: transparent; border-color: #fff; color: #fff; }
.btn--outline-light:hover { background: #fff; border-color: #fff; color: var(--dark-1a); }

/* Translucent ghost — used over the hero video / dark imagery */
.btn--ghost {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .3);
  color: #fff;
  backdrop-filter: blur(10px);
}
.btn--ghost:hover { background: rgba(255, 255, 255, .22); color: #fff; }

/* ---- Arrow link ---- */
.link-arrow {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--red); font-weight: 600; font-size: 16px;
  letter-spacing: -.01em;
  transition: gap .15s ease;
}
.link-arrow .arrow { width: 7px; height: 12px; transition: transform .15s ease; }
.link-arrow:hover { gap: 10px; }

/* ---- Secondary-page helpers (thank-you / case study / privacy) ---- */
.page-narrow { max-width: 760px; margin-inline: auto; }
.page-center { max-width: 640px; margin-inline: auto; text-align: center; }
.page-center .kicker { margin-bottom: 8px; }
.page-center .btn { margin-top: 8px; }
.page-center .btn + .btn { margin-left: 10px; }
.page-prose { margin: 20px 0 32px; color: var(--text-mute); line-height: 1.7; }
.page-prose :is(h2, h3) { color: var(--heading); margin: 28px 0 12px; }
.page-prose p { margin-bottom: 14px; }
.page-prose a { color: var(--red); font-weight: 600; }
.page-prose ul { list-style: disc; padding-left: 22px; margin-bottom: 14px; }
.page-prose li { margin-bottom: 6px; }