/* ════════════════════════════════════════════════════════════════
   BUTTONS — primary / secondary / pill / ghost
   ────────────────────────────────────────────────────────────────
   TODO: port v111's dark-pill .btn-primary (Book a Demo) + the
   round-pill CTA variants from CTA sections.
   ════════════════════════════════════════════════════════════════ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-family: var(--font-ui);
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    border: none;
    border-radius: 999px;
    transition:
        background 0.25s var(--ease-smooth),
        color 0.25s var(--ease-smooth),
        opacity 0.25s var(--ease-smooth);
    text-decoration: none;
}

.btn-primary {
    padding: var(--space-3) var(--space-6);
    background: var(--text-primary);
    color: var(--bg-pure);
}

.btn-primary:hover {
    opacity: 0.88;
}

.btn-secondary {
    padding: var(--space-3) var(--space-6);
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-premium);
}

.btn-secondary:hover {
    background: var(--bg-monolith);
}