.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 12rem;
    text-align: center;
    padding: var(--space-xs) var(--space-md);
    border-radius: 999px;
    background: transparent;
    color: var(--color-text);
    font-family: var(--font-heading);
    white-space: nowrap;
    border: 2px solid var(--color-text);
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: transform 0.2s ease, opacity 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
    .button:hover {
        border-color: var(--theme-color-orange);
        background: var(--theme-color-white);
        transform: translateY(-2px);
        opacity: 0.9;
    }
}