/* ==========================================================
   CTA SECTION
========================================================== */

.hcg-cta-section {

    position: relative;
    overflow: hidden;

    padding: 90px 0;

    background:
        linear-gradient(
            180deg,
            #f8f9fb 0%,
            #f4f6f8 100%
        );
}


/* ==========================================================
   VERTICAL ORANGE LINES
========================================================== */

.hcg-cta-section::before {

    content: '';

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:

        linear-gradient(
            to bottom,
            rgba(249,115,22,.85),
            rgba(249,115,22,.18)
        ),

        linear-gradient(
            to bottom,
            rgba(249,115,22,.35),
            rgba(249,115,22,.08)
        ),

        linear-gradient(
            to bottom,
            rgba(249,115,22,.85),
            rgba(249,115,22,.18)
        ),

        linear-gradient(
            to bottom,
            rgba(249,115,22,.35),
            rgba(249,115,22,.08)
        );

    background-repeat: no-repeat;

    background-size:
        2px 80%,
        1px 74%,
        2px 80%,
        1px 74%;

    background-position:
        38px center,
        54px center,
        calc(100% - 38px) center,
        calc(100% - 54px) center;
}


/* ==========================================================
   CONTAINER
========================================================== */

.hcg-cta-section
.hcg-container {

    width:
        min(
            1280px,
            92%
        );

    margin: 0 auto;

    position: relative;
    z-index: 2;
}


/* ==========================================================
   SINGLE PREMIUM CARD
========================================================== */

.hcg-cta-card {

    display: grid;

    grid-template-columns:
        75% 25%;

    gap: 40px;

    align-items: center;

    background: #ffffff;

    border:
        1px solid #e7eaee;

    border-radius: 32px;

    padding:
        55px 60px;

    box-shadow:
        0 14px 35px
        rgba(
            15,
            23,
            42,
            .05
        );
}


/* ==========================================================
   CONTENT
========================================================== */

.hcg-cta-content h2 {

    font-size:
        clamp(
            38px,
            4vw,
            64px
        );

    line-height: 1.1;

    font-weight: 800;

    color: #0f172a;

    margin:
        0 0 20px;
}

.hcg-cta-content p {

    font-size: 20px;

    line-height: 1.9;

    color: #64748b;

    margin: 0;
}


/* ==========================================================
   BUTTONS
========================================================== */

.hcg-cta-actions {

    display: flex;

    flex-direction: column;

    gap: 16px;
}


/* BUTTON BASE */

.hcg-cta-button {

    display: flex;

    align-items: center;
    justify-content: center;

    min-height: 62px;

    border-radius: 18px;

    text-decoration: none;

    font-size: 17px;
    font-weight: 700;

    transition:
        transform .25s ease;
}


/* PRIMARY */

.hcg-cta-button.primary {

    background:
        linear-gradient(
            135deg,
            #f97316,
            #fb923c
        );

    color: #ffffff;
}


/* SECONDARY */

.hcg-cta-button.secondary {

    background: #f4f6f8;

    border:
        1px solid #e2e8f0;

    color: #0f172a;
}


/* SIMPLE HOVER */

.hcg-cta-button:hover {

    transform:
        translateY(-2px);
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 900px) {

    .hcg-cta-card {

        grid-template-columns:
            1fr;

        padding: 40px;
    }

    .hcg-cta-actions {

        width: 100%;
    }
}