.btn {
  font-family:var(--font-ui);
  font-weight:700;
  padding:11px 17px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  gap:9px;
  transition:transform .15s, box-shadow .15s, background .2s, color .2s;
  border:1.5px solid var(--ink);
  cursor:pointer;
  text-transform:uppercase;
  font-size:11.5px;
  letter-spacing:0.8px;
}
.btn-arrow {
  width:13px; height:13px;
  transition:transform .25s cubic-bezier(.4,0,.2,1);
}
.btn-dark {
  background:var(--ink);
  color:var(--white);
  box-shadow: 0 3px 0 var(--orange-d);
}
.btn-dark:hover {
  transform:translate(-1px,-1px);
  box-shadow: 0 4px 0 var(--orange-d);
}
.btn-dark:hover .btn-arrow { transform:translateX(3px) }
.btn-dark:active {
  transform:translate(0,2px);
  box-shadow: 0 1px 0 var(--orange-d);
}
.btn-ghost {
  background:var(--white);
  color:var(--ink);
  box-shadow: 0 3px 0 var(--ink);
}
.btn-ghost:hover {
  transform:translate(-1px,-1px);
  box-shadow: 0 4px 0 var(--ink);
  background:var(--yellow);
}
.btn-ghost:hover .btn-arrow { transform:translateX(3px) }
.btn-ghost:active {
  transform:translate(0,2px);
  box-shadow: 0 1px 0 var(--ink);
}

/* Orange button - hero CTA */
.btn-orange {
  background:var(--orange);
  color:var(--white);
  box-shadow: 0 4px 0 var(--orange-d);
  padding:14px 22px;
  font-size:13px;
  border:1.5px solid var(--orange-d);
}
.btn-orange:hover {
  transform:translate(-1px,-1px);
  box-shadow: 0 5px 0 var(--orange-d);
  background:var(--orange-l);
}
.btn-orange:hover .btn-arrow { transform:translateY(2px) }
.btn-orange:active {
  transform:translate(0,2px);
  box-shadow: 0 1px 0 var(--orange-d);
}