.btn-primary,
.btn-ghost {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 34px;
    border-radius: 999px;
    border: 1px solid #212529;
    background: #212529;
    color: var(--text);
    font-size: 17px;
    font-weight: 500;
    cursor: pointer;
    box-shadow: var(--shadow-soft);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    z-index: 0;
}

    .btn-primary::before,
    .btn-ghost::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.08));
        opacity: 0;
        transform: scaleX(0);
        transform-origin: center;
        transition: transform 0.25s ease-out, opacity 0.25s ease-out;
        z-index: -1;
    }

    .btn-primary:hover,
    .btn-ghost:hover {
        transform: translateY(-2px);
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
        background: rgba(255, 255, 255, 0.2);
        color: var(--text);
    }

        .btn-primary:hover::before,
        .btn-ghost:hover::before {
            opacity: 1;
            transform: scaleX(1);
        }