/* =====================================================
   CTA Banner — Capital Flex
   All values use CSS custom properties only.
   ===================================================== */

.cta-banner {
    position: relative;
    padding-top: var(--space-24);
    padding-bottom: var(--space-24);
    overflow: hidden;
}

/* ---- Decorative radial blobs ---- */

.cta-banner__blob {
    position: absolute;
    border-radius: var(--radius-full);
    pointer-events: none;
}

.cta-banner__blob--tl {
    width: 480px;
    height: 480px;
    top: -180px;
    left: -120px;
    background: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.08) 0%,
        transparent 70%
    );
}

.cta-banner__blob--br {
    width: 560px;
    height: 560px;
    bottom: -200px;
    right: -140px;
    background: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.06) 0%,
        transparent 70%
    );
}

/* ---- Dot pattern overlay ---- */

.cta-banner__dots {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.12) 1px,
        transparent 1px
    );
    background-size: 28px 28px;
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(0,0,0,0.4) 30%,
        rgba(0,0,0,0.4) 70%,
        transparent 100%
    );
}

/* ---- Inner content ---- */

.cta-banner__inner {
    position: relative;
    z-index: var(--z-raised);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-6);
}

/* ---- Eyebrow label ---- */

.cta-banner__label {
    color: rgba(255, 255, 255, 0.8);
    justify-content: center;
    margin-bottom: 0;
}

.cta-banner__label::before {
    background-color: rgba(255, 255, 255, 0.6);
}

/* ---- Heading ---- */

.cta-banner__heading {
    font-family: var(--font-heading);
    font-weight: var(--fw-extrabold);
    font-size: var(--text-h1);
    line-height: var(--leading-heading);
    color: var(--color-white);
    letter-spacing: -0.02em;
    max-width: 16ch;
}

/* ---- Sub text ---- */

.cta-banner__sub {
    font-family: var(--font-body);
    font-size: var(--text-body-lg);
    line-height: var(--leading-body);
    color: rgba(255, 255, 255, 0.75);
    max-width: 52ch;
}

/* ---- Actions row ---- */

.cta-banner__actions {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    flex-wrap: wrap;
    justify-content: center;
    margin-top: var(--space-2);
}

/* ---- Phone link ---- */

.cta-banner__phone {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-body);
    font-weight: var(--fw-semibold);
    font-size: var(--text-body);
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: color var(--ease-base);
}

.cta-banner__phone:hover {
    color: var(--color-white);
}

.cta-banner__phone svg {
    flex-shrink: 0;
}

/* =====================================================
   Responsive — Tablet ≤ 768px
   ===================================================== */

@media ( max-width: 768px ) {
    .cta-banner {
        padding-top: var(--space-20);
        padding-bottom: var(--space-20);
    }

    .cta-banner__heading {
        font-size: var(--text-h2);
        max-width: 20ch;
    }

    .cta-banner__blob--tl {
        width: 320px;
        height: 320px;
        top: -120px;
        left: -80px;
    }

    .cta-banner__blob--br {
        width: 360px;
        height: 360px;
        bottom: -140px;
        right: -80px;
    }
}

/* =====================================================
   Responsive — Small mobile ≤ 640px
   ===================================================== */

@media ( max-width: 640px ) {
    .cta-banner {
        padding-top: var(--space-16);
        padding-bottom: var(--space-16);
    }

    .cta-banner__actions {
        flex-direction: column;
        gap: var(--space-4);
        width: 100%;
    }

    .cta-banner__actions .btn {
        width: 100%;
        justify-content: center;
    }

    .cta-banner__heading {
        max-width: 100%;
    }
}