/* ============================================================
   COMPONENT — Buttons
   Used in: header, hero, cta-banner, services, consult-form.
   Variants: primary (orange fill), ghost-dark / ghost-light
   (transparent, for use on dark or light backgrounds), and
   outline-orange (used on white service cards).
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 24px; border-radius:100px; font-weight:600; font-size:15px;
  border:1px solid transparent;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  white-space:nowrap;
}
.btn:focus-visible{outline:2px solid var(--orange-500); outline-offset:3px;}
.btn svg{width:18px; height:18px; flex:none;}

.btn-primary{
  background:var(--orange-600); color:var(--white);
  box-shadow:0 12px 28px -10px rgba(240,120,0,0.55);
}
.btn-primary:hover{background:var(--orange-500); transform:translateY(-2px);}

.btn-ghost-dark{background:transparent; color:var(--paper); border-color:var(--line-dark);}
.btn-ghost-dark:hover{background:rgba(247,245,241,0.08); border-color:rgba(247,245,241,0.3);}

.btn-ghost-light{background:transparent; color:var(--ink); border-color:var(--line-light);}
.btn-ghost-light:hover{background:rgba(8,21,39,0.05); border-color:rgba(8,21,39,0.25);}

.btn-outline-orange{background:transparent; color:var(--orange-600); border-color:rgba(240,120,0,0.4);}
.btn-outline-orange:hover{background:rgba(240,120,0,0.08); border-color:var(--orange-600);}

.btn-block{width:100%;}
.btn-sm{padding:10px 18px; font-size:13.5px;}