/* ============================================================
   Buttons — sweep hover ported from the Zerosix Agency build.
   Mechanic kept: a skewed slab parked off-edge that crosses the
   button on hover, plus an arrow nudge. Zerosix ran it at
   -45.58deg because that angle came out of the Zerosix logo mark.
   GlobalXGears has no diagonal in its identity, so the angle is a
   token here — set --gx-sweep-skew to 0deg for a straight wipe.
   ============================================================ */

:root {
  --gx-sweep-skew: -12deg;
  --gx-ease-out:   cubic-bezier(0.16, 1, 0.30, 1);
}

.gx-btn {
  --btn-fg:    var(--gx-bg-ink);
  --btn-bg:    var(--gx-lime);
  --btn-sweep: var(--gx-text);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gx-space-3);
  height: var(--gx-btn-h);
  padding-inline: var(--gx-space-6);
  overflow: hidden;
  isolation: isolate;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 0;
  border-radius: var(--gx-radius);
  font-family: var(--gx-font);
  font-size: var(--gx-fs-cta);          /* 14px — raised from Figma's 13px */
  font-weight: var(--gx-fw-bold);
  letter-spacing: var(--gx-ls-cta);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--gx-dur) var(--gx-ease-out);
}

/* The sweep. Skewed rather than rotated: a rotated box scales with the
   element's width and cannot be parked off-edge reliably. */
.gx-btn::before {
  content: "";
  position: absolute;
  inset: 0 -30%;
  z-index: -1;
  background: var(--btn-sweep);
  transform: translateX(-130%) skewX(var(--gx-sweep-skew));
  transition: transform var(--gx-dur) var(--gx-ease-out);
}

.gx-btn:hover::before,
.gx-btn:focus-visible::before {
  transform: translateX(0) skewX(var(--gx-sweep-skew));
}

.gx-btn:focus-visible {
  outline: 2px solid var(--gx-accent);
  outline-offset: 3px;
}

/* Secondary / outlined — Figma "Secondary CTA" */
.gx-btn--ghost {
  --btn-bg:    rgb(from var(--gx-bg-ink) r g b / 0.2);
  --btn-fg:    var(--gx-text);
  --btn-sweep: var(--gx-lime);
  border: 1px solid var(--gx-border);
  font-weight: var(--gx-fw-semibold);
  letter-spacing: var(--gx-ls-label);
}

.gx-btn--ghost:hover,
.gx-btn--ghost:focus-visible {
  --btn-fg: var(--gx-bg-ink);
}

/* Header quote button sits 8px shorter */
.gx-btn--sm { height: var(--gx-btn-h-sm); }

/* Arrow: real SVG icon, larger than the Figma glyph (note 2).
   Zerosix nudged diagonally; GXG arrows are horizontal. */
/* Inline SVG, stroked with currentColor, so on hover it darkens with the
   label instead of staying white over the lime sweep. */
.gx-btn__arrow {
  flex: none;
  width: 18px;
  height: 18px;
  color: currentColor;
  transition: transform var(--gx-dur) var(--gx-ease-out);
}

.gx-btn:hover .gx-btn__arrow,
.gx-btn:focus-visible .gx-btn__arrow {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .gx-btn::before { transition: none; }
  .gx-btn__arrow  { transition: none; }
  .gx-btn:hover .gx-btn__arrow { transform: none; }
}