/* ==============================================
   TISA BUSINESS — UNIFIED CTA BUTTON SYSTEM
   4 groups: explore, pricing, start, contact
   ============================================== */

/* Base */
.biz-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 15px;
    font-weight: 600;
    border-radius: 100px;
    border: none;
    cursor: pointer;
    text-decoration: none !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
    letter-spacing: -0.01em;
    white-space: nowrap;
    -webkit-font-smoothing: antialiased;
}

.biz-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
    transition: left 0.5s ease;
}

.biz-btn:hover::before { left: 100%; }
.biz-btn:hover { transform: translateY(-2px); }

/* Small variant */
.biz-btn-sm {
    padding: 10px 22px;
    font-size: 13px;
}

/* Large variant */
.biz-btn-lg {
    padding: 18px 44px;
    font-size: 16px;
}

/* ==============================================
   GROUP 1: EXPLORE / NAVIGATE
   Ghost outline — transparent, purple border
   On dark bg: use .biz-btn-explore-dark
   ============================================== */
.biz-btn-explore {
    background: transparent !important;
    color: #6b1f7b !important;
    -webkit-text-fill-color: #6b1f7b !important;
    border: 1.5px solid rgba(107, 31, 123, 0.45) !important;
}

.biz-btn-explore:hover {
    background: rgba(107, 31, 123, 0.07) !important;
    border-color: rgba(107, 31, 123, 0.7) !important;
    color: #6b1f7b !important;
    -webkit-text-fill-color: #6b1f7b !important;
    box-shadow: 0 8px 28px rgba(107, 31, 123, 0.12);
}

/* On dark hero / dark section backgrounds */
.biz-btn-explore-dark {
    background: transparent !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1.5px solid rgba(255, 255, 255, 0.45) !important;
}

.biz-btn-explore-dark:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.75) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2);
}

/* ==============================================
   GROUP 2: PRICING & PLANS
   Purple gradient, white text
   ============================================== */
.biz-btn-pricing {
    background: linear-gradient(135deg, #6b1f7b 0%, #9c27b0 100%);
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff;
    border: none;
    box-shadow: 0 6px 24px rgba(107, 31, 123, 0.35);
}

.biz-btn-pricing:hover {
    background: linear-gradient(135deg, #7d2491 0%, #ab47bc 100%);
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff;
    box-shadow: 0 12px 36px rgba(107, 31, 123, 0.45);
}

/* ==============================================
   GROUP 3: GET STARTED / PORTAL / BUY
   Gold gradient, black text
   ============================================== */
.biz-btn-start {
    background: linear-gradient(135deg, #c9a84c 0%, #ffd700 60%, #e6b830 100%);
    color: #1a1a2e !important;
    -webkit-text-fill-color: #1a1a2e;
    border: none;
    font-weight: 700;
    box-shadow: 0 6px 24px rgba(201, 168, 76, 0.4);
}

.biz-btn-start:hover {
    background: linear-gradient(135deg, #d4b355 0%, #ffe433 60%, #f0c73a 100%);
    color: #1a1a2e !important;
    -webkit-text-fill-color: #1a1a2e;
    box-shadow: 0 12px 36px rgba(201, 168, 76, 0.55);
}

/* ==============================================
   GROUP 4: SALES / CONTACT
   Very dark deep purple, white text
   ============================================== */
.biz-btn-contact {
    background: #2d1845;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.biz-btn-contact:hover {
    background: #3d2258;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff;
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* Gold CTA override — black text on gold background must stay black */
.bz-contact-cta.biz-btn-contact,
.bz-pbx-cta.biz-btn-contact,
.bz-why-cta.biz-btn-contact {
    color: #000 !important;
    -webkit-text-fill-color: #000;
}

.bz-contact-cta.biz-btn-contact:hover,
.bz-pbx-cta.biz-btn-contact:hover,
.bz-why-cta.biz-btn-contact:hover {
    color: #000 !important;
    -webkit-text-fill-color: #000;
}

/* ==============================================
   RESPONSIVE
   ============================================== */
@media (max-width: 768px) {
    .biz-btn { padding: 12px 26px; font-size: 14px; }
    .biz-btn-sm { padding: 9px 18px; font-size: 12px; }
    .biz-btn-lg { padding: 15px 36px; font-size: 15px; }
}

@media (max-width: 480px) {
    .biz-btn { padding: 12px 22px; font-size: 14px; min-height: 44px; }
    .bz-cta-wrap-dual .biz-btn { width: 100%; justify-content: center; text-align: center; }
}