/* ============================================================
   ALIFY — buttons.css · shared button system (all pages)
   ============================================================ */

.btn {
  --btn-bg: var(--green);
  --btn-fg: var(--ink);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  gap: .7rem;
  font-family: var(--ff-mono);
  font-size: .8rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none;
  padding: 1.15em 2em;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bg);
  border-radius: var(--r);
  overflow: hidden;
  transition: transform .35s cubic-bezier(.34, 1.4, .5, 1), box-shadow .35s, background .3s, color .3s, border-color .3s;
  will-change: transform;
}
/* sheen sweep on hover */
.btn::after {
  content: "";
  position: absolute;
  top: 0; left: -90%;
  width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .24), transparent);
  transform: skewX(-18deg);
  transition: left .65s cubic-bezier(.22, .61, .36, 1);
  pointer-events: none;
}
.btn:hover::after { left: 145%; }

.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px -12px rgba(12, 220, 42, .45); }
.btn:active { transform: translateY(0); box-shadow: none; }

.btn .ph { font-size: 1.05em; transition: transform .35s; }
.btn:hover .ph-arrow-right, .btn:hover .ph-arrow-up-right { transform: translateX(4px); }

/* variants */
.btn--primary { --btn-bg: var(--green); --btn-fg: var(--ink); }
.btn--primary:hover { background: #2BEA45; border-color: #2BEA45; }

.btn--navy { --btn-bg: var(--navy); --btn-fg: var(--off); box-shadow: none; }
.btn--navy:hover { background: #43507D; border-color: #43507D; box-shadow: 0 10px 30px -12px rgba(56, 65, 102, .8); }

.btn--sand { --btn-bg: var(--sand); --btn-fg: #15150B; }
.btn--sand:hover { background: #EFE8C4; border-color: #EFE8C4; box-shadow: 0 10px 30px -12px rgba(227, 219, 169, .4); }

.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--off);
  border-color: var(--line-2);
}
.btn--ghost:hover { border-color: var(--green); color: var(--green); box-shadow: none; }

.btn--ghost-ink { --btn-bg: transparent; --btn-fg: #17170E; border-color: rgba(23, 23, 14, .4); }
.btn--ghost-ink:hover { border-color: #17170E; color: #17170E; box-shadow: none; }

.btn--teal { --btn-bg: var(--teal); --btn-fg: var(--off); }
.btn--teal:hover { background: #0E8870; border-color: #0E8870; box-shadow: 0 10px 30px -12px rgba(11, 115, 95, .7); }

/* sizes */
.btn--sm { padding: .85em 1.4em; font-size: .72rem; }
.btn--lg { padding: 1.3em 2.4em; font-size: .85rem; }
.btn--block { width: 100%; }

.btn[disabled], .btn.is-loading { opacity: .65; pointer-events: none; }

/* plain text arrow link */
.link-arrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--ff-mono); font-size: .8rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--off); text-decoration: none;
  padding-bottom: .35em;
  border-bottom: 1px solid var(--line-2);
  transition: color .3s, border-color .3s;
}
.link-arrow .ph { color: var(--green); transition: transform .35s; }
.link-arrow:hover { color: var(--green); border-color: var(--green); }
.link-arrow:hover .ph { transform: translateX(5px); }

/* button rows */
.btn-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }

/* circular icon button (menu close, sliders, back-to-top) */
.icon-btn {
  width: 48px; height: 48px; flex: none;
  display: inline-grid; place-items: center;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  color: var(--off);
  font-size: 1.1rem;
  transition: border-color .3s, color .3s, background .3s, transform .3s;
}
.icon-btn:hover { border-color: var(--green); color: var(--green); transform: translateY(-2px); }
.icon-btn[disabled] { opacity: .35; pointer-events: none; }