/* =========================================================
   Gizmoo Core
   CTA Section
   ========================================================= */

.gizmoo-cta {
    padding: 40px 0 110px;

    background: var(--gizmoo-bg);
}


/* =========================================================
   CTA Container
   ========================================================= */

.gizmoo-cta-inner {
    position: relative;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 50px;

    padding: 60px 64px;

    overflow: hidden;

    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            #0f172a 0%,
            #132b29 55%,
            #0f3d34 100%
        );

    box-shadow:
        0 24px 60px
        rgba(15, 23, 42, 0.12);
}


/* =========================================================
   Decorative Glow
   ========================================================= */

.gizmoo-cta-inner::before {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    top: -150px;
    right: 15%;

    border-radius: 50%;

    background:
        rgba(16, 185, 129, 0.13);

    filter: blur(30px);

    pointer-events: none;
}


.gizmoo-cta-inner::after {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    right: -70px;
    bottom: -90px;

    border-radius: 50%;

    border:
        1px solid
        rgba(255, 255, 255, 0.08);

    pointer-events: none;
}


/* =========================================================
   Content
   ========================================================= */

.gizmoo-cta-content {
    position: relative;
    z-index: 2;

    max-width: 620px;
}


.gizmoo-cta-content
.gizmoo-section-eyebrow {
    margin-bottom: 14px;

    color:
        #6ee7b7;
}


.gizmoo-cta-content h2 {
    margin: 0 0 16px;

    color: #ffffff;

    font-size:
        clamp(32px, 4vw, 46px);

    font-weight: 700;

    line-height: 1.15;

    letter-spacing: -0.035em;
}


.gizmoo-cta-content p {
    max-width: 520px;

    margin: 0;

    color:
        rgba(255, 255, 255, 0.68);

    font-size: 15px;

    line-height: 1.9;
}


/* =========================================================
   Actions
   ========================================================= */

.gizmoo-cta-actions {
    position: relative;
    z-index: 2;

    display: flex;

    flex-direction: column;

    align-items: stretch;

    gap: 10px;

    min-width: 175px;
}


/* Primary */

.gizmoo-cta-primary {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    min-height: 48px;

    padding: 0 22px;

    box-sizing: border-box;

    border-radius: 9px;

    color:
        #0f172a;

    background:
        #ffffff;

    font-size: 13px;

    font-weight: 700;

    text-decoration: none;

    transition:
        transform 0.2s ease,
        background-color 0.2s ease;
}


.gizmoo-cta-primary:hover {
    transform: translateY(-2px);

    background:
        #ecfdf5;
}


.gizmoo-cta-primary span {
    color:
        var(--gizmoo-primary);

    font-size: 16px;
}


/* Secondary */

.gizmoo-cta-secondary {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 44px;

    padding: 0 20px;

    box-sizing: border-box;

    border:
        1px solid
        rgba(255, 255, 255, 0.15);

    border-radius: 9px;

    color:
        rgba(255, 255, 255, 0.78);

    background:
        rgba(255, 255, 255, 0.04);

    font-size: 13px;

    font-weight: 600;

    text-decoration: none;

    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        color 0.2s ease;
}


.gizmoo-cta-secondary:hover {
    color: #ffffff;

    border-color:
        rgba(255, 255, 255, 0.28);

    background:
        rgba(255, 255, 255, 0.08);
}


/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 800px) {

    .gizmoo-cta {
        padding: 30px 0 85px;
    }


    .gizmoo-cta-inner {
        padding: 48px;

        flex-direction: column;

        align-items: flex-start;
    }


    .gizmoo-cta-actions {
        flex-direction: row;

        width: 100%;

        max-width: 420px;
    }


    .gizmoo-cta-primary,
    .gizmoo-cta-secondary {
        flex: 1;
    }

}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 600px) {

    .gizmoo-cta {
        padding: 20px 0 70px;
    }


    .gizmoo-cta-inner {
        padding: 36px 26px;

        border-radius: 16px;

        gap: 30px;
    }


    .gizmoo-cta-content h2 {
        font-size: 30px;
    }


    .gizmoo-cta-content p {
        font-size: 14px;
    }


    .gizmoo-cta-actions {
        flex-direction: column;

        width: 100%;

        max-width: none;
    }

}