/* ==========================================================
   INDUSTRIES SECTION
========================================================== */

.hcg-industries-section {

    position: relative;
    overflow: hidden;

    padding: 90px 0;

    background-color: #f5f6f8;

    /* CLEAN COMPACT DOTS */

    background-image:

        radial-gradient(
            rgba(249,115,22,.12) 1.6px,
            transparent 1.6px
        ),

        radial-gradient(
            rgba(148,163,184,.08) 1.6px,
            transparent 1.6px
        );

    background-size:
        22px 22px,
        22px 22px;

    background-position:
        0 0,
        11px 11px;
}


/* ==========================================================
   CENTER FADE
========================================================== */

.hcg-industries-section::before {

    content: '';

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse at center,
            rgba(
                245,
                246,
                248,
                0
            ) 18%,

            rgba(
                245,
                246,
                248,
                .75
            ) 48%,

            rgba(
                245,
                246,
                248,
                .92
            ) 70%
        );
}


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

.hcg-industries-section
.hcg-container {

    width:
        min(
            1400px,
            92%
        );

    margin:
        0 auto;

    position:
        relative;

    z-index:
        2;
}


/* ==========================================================
   HEADER
========================================================== */

.hcg-industries-header {

    text-align:
        center;

    margin-bottom:
        48px;
}

.hcg-industries-header h2 {

    font-size:
        clamp(
            36px,
            4vw,
            58px
        );

    font-weight:
        800;

    line-height:
        1.12;

    color:
        #0f172a;

    margin:
        0 0 20px;
}

.hcg-industries-header p {

    font-size:
        18px;

    line-height:
        1.8;

    color:
        #64748b;

    max-width:
        850px;

    margin:
        0 auto;
}


/* ==========================================================
   GRID
========================================================== */

.hcg-industries-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            1fr
        );

    gap:
        20px;
}


/* ==========================================================
   CARD
========================================================== */

.hcg-industries-card {

    position:
        relative;

    background:
        #ffffff;

    border:
        1px solid #e5e7eb;

    border-radius:
        18px;

    min-height:
        92px;

    padding:
        18px 22px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

    text-decoration:
        none !important;

    overflow:
        hidden;

    transition:
        all .28s ease;

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


/* TOP ACCENT */

.hcg-industries-card::before {

    content:
        '';

    position:
        absolute;

    top:
        0;

    left:
        50%;

    transform:
        translateX(-50%);

    width:
        110px;

    height:
        4px;

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

    border-radius:
        0 0 20px 20px;
}


/* HOVER */

.hcg-industries-card:hover {

    transform:
        translateY(-5px);

    border-color:
        rgba(
            249,
            115,
            22,
            .20
        );

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

.hcg-industries-card:hover span {

    color:
        #f97316;
}


/* ==========================================================
   TITLE
========================================================== */

.hcg-industries-card span {

    font-size:
        18px;

    font-weight:
        600;

    line-height:
        1.45;

    color:
        #0f172a;

    transition:
        color .25s ease;
}


/* ==========================================================
   CTA BUTTON
========================================================== */

.hcg-industries-footer {

    margin-top:
        44px;

    text-align:
        center;
}

.hcg-industries-button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        280px;

    height:
        58px;

    padding:
        0 34px;

    border-radius:
        999px;

    text-decoration:
        none !important;

    font-size:
        16px;

    font-weight:
        700;

    color:
        #ffffff;

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

    box-shadow:
        0 12px 28px
        rgba(
            249,
            115,
            22,
            .20
        );

    transition:
        all .28s ease;
}

.hcg-industries-button:hover {

    transform:
        translateY(-3px);

    color:
        #ffffff;
}


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

@media (max-width:1100px) {

    .hcg-industries-grid {

        grid-template-columns:
            repeat(
                3,
                1fr
            );
    }
}

@media (max-width:768px) {

    .hcg-industries-grid {

        grid-template-columns:
            repeat(
                2,
                1fr
            );
    }
}

@media (max-width:540px) {

    .hcg-industries-grid {

        grid-template-columns:
            1fr;
    }

    .hcg-industries-section {

        padding:
            70px 0;
    }
}