/* ==========================================================
   Lunar Logic v2.1
   Services Section
   ========================================================== */

/* ==========================================================
   Section
   ========================================================== */

.services {

    position: relative;

    overflow: hidden;

    background:
        radial-gradient(
            circle at top center,
            rgba(37,99,235,.06),
            transparent 55%
        );

}

/* ==========================================================
   Background Decoration
   ========================================================== */

.services::before {

    content: "";

    position: absolute;

    inset: 0;

    background-image:

        linear-gradient(
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.025) 1px,
            transparent 1px
        );

    background-size: 48px 48px;

    opacity: .20;

    pointer-events: none;

}

/* ==========================================================
   Intro
   ========================================================== */

.services__intro {

    max-width: 900px;

    margin-inline: auto;

    margin-bottom: clamp(3rem,5vw,5rem);

    text-align: center;

}

.services__intro p{

    color: var(--color-text-secondary);

    font-size: clamp(1.125rem,2vw,1.3rem);

    line-height: 1.9;

}

/* ==========================================================
   Services Grid
   ========================================================== */

.services__grid{

    margin-top: 2rem;

}

/* ==========================================================
   Service Card
   ========================================================== */

.service-card{

    position: relative;

}

.service-card .card{

    height:100%;

}

/* ==========================================================
   Outcomes
   ========================================================== */

.service-card__outcomes{

    margin-top:2rem;

    display:flex;

    flex-direction:column;

    gap:.9rem;

}

.service-card__outcome{

    display:flex;

    align-items:center;

    gap:.75rem;

    color:var(--color-text-secondary);

    font-size:.95rem;

}

.service-card__outcome svg{

    width:18px;
    height:18px;

    color:var(--color-brand-400);

    flex-shrink:0;

}

/* ==========================================================
   Learn More
   ========================================================== */

.service-card__footer{

    margin-top:2rem;

}

/* ==========================================================
   Outcomes Banner
   ========================================================== */

.services__benefits{

    margin-top:6rem;

    padding:2rem;

    border-radius:var(--radius-2xl);

    border:1px solid var(--color-border);

    background: var(--color-surface);

}

.services__benefits-title{

    margin:0 0 2rem;

    text-align:center;

    font-size:1.25rem;

    color:var(--color-text-primary);

}

.services__benefits-grid{

    display:grid;

    grid-template-columns:
        repeat(6,minmax(0,1fr));

    gap:1rem;

}

.services__benefit{

    display:flex;

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

    min-height:70px;

    border-radius:var(--radius-lg);

    border:1px solid var(--color-border);

    background: #ffffff;

    color:var(--color-text-primary);

    font-weight:600;

    transition:
        transform var(--transition-base),
        border-color var(--transition-base);

}

.services__benefit:hover{

    transform:translateY(-4px);

    border-color:rgba(37,99,235,.35);

}

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

.services__cta{

    margin-top:6rem;

    text-align:center;

}

.services__cta-title{

    margin-bottom:1rem;

    font-size:clamp(2rem,4vw,3rem);

}

.services__cta-text{

    max-width:760px;

    margin:0 auto 2rem;

    color:var(--color-text-secondary);

    line-height:1.9;

}

.services__cta-actions{

    display:flex;

    justify-content:center;

    gap:1rem;

    flex-wrap:wrap;

}

/* ==========================================================
   Responsive
   ========================================================== */

@media (max-width:1200px){

.services__benefits-grid{

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

}

}

@media (max-width:768px){

.services__benefits-grid{

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

}

.services__cta-actions{

flex-direction:column;

align-items:stretch;

max-width:360px;

margin-inline:auto;

}

}

@media (max-width:540px){

.services__benefits-grid{

grid-template-columns:1fr;

}

}