.stage {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--space-2);
  box-shadow: 0 20px 40px -20px color-mix(in oklch, var(--fg), transparent 90%);
  overflow: hidden;
}

.stage-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  background: var(--fg);
  color: var(--bg);
  border: 1px solid var(--fg);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;

  &:hover,
  &:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px color-mix(in oklch, var(--fg), transparent 78%);
    outline: none;
  }

  &:active { transform: none; }
  &:disabled { opacity: 0.5; cursor: default; transform: none; box-shadow: none; }
}

.stage-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;

  &:hover,
  &:focus-visible {
    border-color: var(--fg);
    background: var(--fg-wash);
    outline: none;
  }
}