/* ─────────────────────────────────────────────────────────────
   BUTTONS — single source of truth for the site's action buttons.

   One "lit-up" look everywhere: a BRIGHT purple→teal gradient (brighter
   than the page gradient) with a thin light edge and a glossy top highlight.
   This keeps every primary button clearly discernible against the
   purple-teal page background without being harsh — visible, not jarring.

   Use `.btn-primary` on any new button. The legacy selectors below
   (.cta-button, .header-ask-btn, .input-wrap button) share the exact same
   skin so the whole site stays uniform; each keeps only its own sizing.
   ───────────────────────────────────────────────────────────── */

.btn-primary,
.cta-button,
.header-ask-btn,
.input-wrap button,
#contactSubmit {
    /* skin */
    color: #ffffff;
    font-family: inherit;
    letter-spacing: 0.01em;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    background: linear-gradient(135deg, #8b5cf6 0%, #14b8a6 100%);
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 14px;
    transition: filter 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.30),
        0 3px 14px rgba(124, 58, 237, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.btn-primary:hover,
.cta-button:hover,
.header-ask-btn:hover,
.input-wrap button:hover,
#contactSubmit:hover {
    filter: brightness(1.06);
    transform: translateY(-2px);
    box-shadow:
        0 16px 36px rgba(0, 0, 0, 0.34),
        0 4px 18px rgba(124, 58, 237, 0.50),
        inset 0 1px 0 rgba(255, 255, 255, 0.40);
}

.btn-primary:active,
.cta-button:active,
.header-ask-btn:active,
.input-wrap button:active,
#contactSubmit:active {
    transform: translateY(0);
    filter: brightness(0.98);
}

.btn-primary:disabled,
.header-ask-btn:disabled,
.input-wrap button:disabled,
#contactSubmit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    filter: none;
    box-shadow: none;
}

/* Default sizing for the canonical class (legacy selectors keep their own). */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 26px;
    font-size: 15px;
    font-weight: 700;
}

/* Round icon button (e.g. scroll-to-top) — same lit-up skin, circular.
   No `display` is set here so a toggled `.hidden` (display:none) still wins;
   the glyph is centered via text-align + line-height instead of flexbox. */
.btn-icon {
    width: 46px;
    height: 46px;
    padding: 0;
    font-size: 18px;
    line-height: 46px;
    text-align: center;
    color: #ffffff;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 999px;
    background: linear-gradient(135deg, #8b5cf6 0%, #14b8a6 100%);
    transition: filter 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.30),
        0 3px 14px rgba(124, 58, 237, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.btn-icon:hover {
    filter: brightness(1.06);
    transform: translateY(-2px);
    box-shadow:
        0 16px 36px rgba(0, 0, 0, 0.34),
        0 4px 18px rgba(124, 58, 237, 0.50),
        inset 0 1px 0 rgba(255, 255, 255, 0.40);
}