/* =====================================================
   SOLUTIONS INDEX PAGE
===================================================== */


.solutions-index-page{

--solution-blue:#4c78ff;
--solution-purple:#a700f5;

}



/* HERO */

.solutions-index-page .services-index-hero{


background:

radial-gradient(
circle at 80% 10%,
rgba(167,0,245,.18),
transparent 35%
),

linear-gradient(
120deg,
#03143d,
#101b63 60%,
#32106d
);


}



.solutions-index-page .services-index-title{

color:#fff;

}



.solutions-index-page .services-index-title span{

color:#4c78ff;

}




/* SOLUTION CARDS */


.solution-card{


height:100%;

padding:28px;

border-radius:18px;

background:#fff;

border:1px solid var(--jizai-line);

transition:.35s ease;


}



.solution-card:hover{


transform:translateY(-6px);

box-shadow:

0 20px 50px rgba(1,25,91,.12);


}



.solution-icon{


width:46px;

height:46px;

border-radius:14px;

display:grid;

place-items:center;

background:

linear-gradient(
135deg,
rgba(76,120,255,.12),
rgba(167,0,245,.12)
);


margin-bottom:22px;


}



.solution-icon svg{


width:23px;

height:23px;

fill:none;

stroke:#536fff;

stroke-width:1.8;

stroke-linecap:round;

stroke-linejoin:round;


}



.solution-card h3{


font-size:18px;

color:var(--jizai-navy);

margin-bottom:10px;


}



.solution-card p{


font-size:13px;

line-height:1.7;

color:var(--jizai-muted);


}



.solution-link{


display:inline-flex;

margin-top:15px;

font-size:13px;

font-weight:600;

color:#536fff;

text-decoration:none;


}





/* CHALLENGE */


.solution-challenge-box{


height:100%;

padding:30px;

border-radius:20px;

background:#fff;

border:1px solid var(--jizai-line);


}



.solution-challenge-box.dark{


background:

linear-gradient(
145deg,
#071b45,
#30106c
);

border:none;

color:#fff;


}



.solution-challenge-box h3{


font-size:22px;

margin-bottom:20px;

color:var(--jizai-navy);


}



.solution-challenge-box.dark h3{

color:#fff;

}



.solution-list{


display:grid;

gap:14px;


}



.solution-list-item{


display:flex;

align-items:center;

gap:12px;

font-size:13px;

padding-bottom:12px;

border-bottom:1px solid #edf1f5;


}



.solution-challenge-box.dark 
.solution-list-item{


border-color:rgba(255,255,255,.1);

color:#c3d1e7;


}



.solution-number{


width:26px;

height:26px;

border-radius:8px;

display:grid;

place-items:center;

font-size:11px;

font-weight:600;

background:#eef2ff;

color:#536fff;


}





/* HOW IT WORKS */


.solution-process{


padding:25px;

border-radius:18px;

background:#fff;

border:1px solid var(--jizai-line);


}



.solution-process strong{


font-size:12px;

color:#536fff;


}



.solution-process h3{


margin:12px 0;

font-size:18px;

color:var(--jizai-navy);


}



.solution-process p{


font-size:13px;

color:var(--jizai-muted);


}




/* ===== Solutions Enhancement Update ===== */

/* Solution cards 4 columns */
.service-directory-grid{
    display:grid !important;
    grid-template-columns:repeat(4,1fr) !important;
    gap:22px !important;
}

@media(max-width:1100px){
    .service-directory-grid{
        grid-template-columns:repeat(2,1fr) !important;
    }
}
@media(max-width:600px){
    .service-directory-grid{
        grid-template-columns:1fr !important;
    }
}

/* Add premium icons */
.solution-card .solution-icon{
    position:relative;
    color:#536fff;
}

/* Process cards icons */
.solution-process{
    position:relative;
    padding-top:32px;
}

.solution-process:before{
    content:"";
    position:absolute;
    top:22px;
    right:24px;
    width:38px;
    height:38px;
    border-radius:12px;
    background:linear-gradient(135deg,#eef2ff,#f4e9ff);
}

.solution-process:after{
    content:"↗";
    position:absolute;
    top:28px;
    right:36px;
    color:#536fff;
    font-size:18px;
    font-weight:700;
}

/* Replace numbers style with cross/check icons */
.solution-number{
    font-size:0 !important;
    width:30px !important;
    height:30px !important;
    position:relative;
}

.solution-number:before{
    content:"✓";
    font-size:15px;
    font-weight:700;
}

.solution-challenge-box:not(.dark) .solution-number:before{
    content:"×";
    color:#536fff;
}

.solution-challenge-box.dark .solution-number:before{
    content:"✓";
    color:#536fff;
}

/* Business function cards */
.service-card{
    position:relative;
}

.service-card:before{
    content:"";
    display:block;
    width:44px;
    height:44px;
    margin-bottom:18px;
    border-radius:14px;
    background:
    linear-gradient(135deg,rgba(76,120,255,.15),rgba(167,0,245,.12));
}


/* FINAL ICON ALIGNMENT FIX */

.solution-icon{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
}

.solution-icon::before{
    content:"✓";
    font-size:22px;
    font-weight:700;
    color:#536fff;
}

.solution-icon{
    font-size:0;
}

/* Process cards - replace arrow style with numbered icon circles */
.process-number{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:42px !important;
    height:42px !important;
    border-radius:50% !important;
    background:#eef2ff !important;
    color:#536fff !important;
    font-size:13px !important;
    font-weight:700;
}

.process-icon svg{
    display:none !important;
}

/* Before / After checklist alignment */

.challenge-item-icon{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
}

.challenge-item-icon svg{
    width:18px !important;
    height:18px !important;
}

.solution-challenge-card .challenge-item-icon{
    margin-top:2px;
}

/* 4 column function layout */

.solution-functions-grid{
    grid-template-columns:repeat(4,1fr) !important;
}

@media(max-width:1200px){
    .solution-functions-grid{
        grid-template-columns:repeat(2,1fr) !important;
    }
}

@media(max-width:600px){
    .solution-functions-grid{
        grid-template-columns:1fr !important;
    }
}


/* V4 FINAL DESIGN FIXES */

.solution-functions-grid{
    grid-template-columns:repeat(4,1fr)!important;
}

.solution-icon,
.function-icon,
.why-solution-icon,
.process-icon,
.challenge-item-icon{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
}

.solution-icon svg,
.function-icon svg,
.why-solution-icon svg,
.process-icon svg,
.challenge-item-icon svg{
    display:block!important;
    width:22px!important;
    height:22px!important;
    fill:none!important;
    stroke:#536fff!important;
    stroke-width:1.8!important;
}

.challenge-item-icon svg{
    stroke-width:2.2!important;
}

.solution-process-card .process-icon{
    background:linear-gradient(135deg,rgba(76,120,255,.12),rgba(167,0,245,.12));
}

.solution-challenge-card h3{
    white-space:normal!important;
}

.jizai-section{
    padding-top:100px;
    padding-bottom:100px;
}

.solution-card,
.solution-function-card,
.solution-process-card{
    min-height:220px;
}


/* V5 ICON SYSTEM FIX */

/* remove previous fake tick icons */
.solution-icon::before{
    content:none !important;
}

/* stable icon containers */
.solution-icon,
.function-icon,
.why-solution-icon,
.process-icon{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    font-size:0 !important;
}

/* use clean visual symbols instead of broken svg */
.solution-icon:after{
    font-size:20px;
    color:#536fff;
}

.solution-card:nth-child(1) .solution-icon:after{
    content:"▦";
}

.solution-card:nth-child(2) .solution-icon:after{
    content:"◔";
}

.solution-card:nth-child(3) .solution-icon:after{
    content:"⇄";
}

.solution-card:nth-child(4) .solution-icon:after{
    content:"◉";
}

/* Process icons */
.process-number{
    display:none !important;
}

.process-icon:after{
    font-size:22px;
    color:#536fff;
}

.solution-process-card:nth-child(1) .process-icon:after{
    content:"↔";
}

.solution-process-card:nth-child(2) .process-icon:after{
    content:"⚙";
}

.solution-process-card:nth-child(3) .process-icon:after{
    content:"▥";
}

.solution-process-card:nth-child(4) .process-icon:after{
    content:"↗";
}


/* Function icons */
.solution-function-card:nth-child(1) .function-icon:after{
    content:"$";
}

.solution-function-card:nth-child(2) .function-icon:after{
    content:"◯";
}

.solution-function-card:nth-child(3) .function-icon:after{
    content:"□";
}

.solution-function-card:nth-child(4) .function-icon:after{
    content:"◎";
}

.solution-function-card:nth-child(5) .function-icon:after{
    content:"⚙";
}

.solution-function-card:nth-child(6) .function-icon:after{
    content:"▥";
}

.function-icon:after{
    font-size:20px;
    font-weight:700;
    color:#536fff;
}

/* =====================================================
   ICON SYSTEM — FINAL CLEAN VERSION
   Uses inline SVG icons only. This replaces the earlier
   generated symbols and prevents empty purple icon boxes.
===================================================== */
.solution-icon::before,
.solution-icon::after,
.solution-process::before,
.solution-process::after,
.service-card::before{
    content:none !important;
}

.solution-icon,
.process-icon,
.function-card-icon,
.why-card-icon{
    width:46px;
    height:46px;
    flex:0 0 46px;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:14px;
    background:linear-gradient(135deg,rgba(76,120,255,.14),rgba(167,0,245,.14));
}

.solution-icon{ margin-bottom:22px; }
.process-icon{ margin:0 0 18px; }
.function-card-icon,
.why-card-icon{ margin:0 0 18px; }

.solution-icon svg,
.process-icon svg,
.function-card-icon svg,
.why-card-icon svg{
    display:block !important;
    width:23px !important;
    height:23px !important;
    fill:none !important;
    stroke:#536fff !important;
    stroke-width:1.9 !important;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.solution-process{ padding:28px; }
.solution-process strong{ display:block; margin-bottom:10px; }

/* =====================================================
   PRODUCT PAGE TYPOGRAPHY & SPACING ALIGNMENT
   Matches the approved Products page component scale.
===================================================== */
.solutions-index-page .jizai-section{
    padding:var(--jizai-section-space, 96px) 0;
}

.solutions-index-page .solution-card{
    padding:30px;
    border-radius:22px;
}

.solutions-index-page .solution-icon{
    width:54px;
    height:54px;
    flex-basis:54px;
    border-radius:15px;
    margin-bottom:26px;
}

.solutions-index-page .solution-card h3,
.solutions-index-page .solution-process h3{
    font-size:20px;
    line-height:1.25;
    font-weight:600;
    margin:0 0 12px;
}

.solutions-index-page .solution-card p,
.solutions-index-page .solution-process p{
    font-size:13.5px;
    line-height:1.72;
    margin:0 0 10px;
}

.solutions-index-page .solution-link{
    font-size:13px;
    line-height:1.5;
    font-weight:600;
}

.solutions-index-page .solution-challenge-box h3{
    font-size:20px;
    line-height:1.25;
    font-weight:600;
    margin:0 0 20px;
}

.solutions-index-page .solution-list-item{
    font-size:13.5px;
    line-height:1.72;
}

@media(max-width:991px){
    .solutions-index-page .jizai-section{
        padding:var(--jizai-section-space-tablet, 82px) 0;
    }
}

@media(max-width:700px){
    .solutions-index-page .jizai-section{
        padding:var(--jizai-section-space-mobile, 64px) 0;
    }
    .solutions-index-page .solution-card{ padding:24px; }
    .solutions-index-page .solution-card h3,
    .solutions-index-page .solution-process h3,
    .solutions-index-page .solution-challenge-box h3{ font-size:18px; }
    .solutions-index-page .solution-card p,
    .solutions-index-page .solution-process p,
    .solutions-index-page .solution-list-item{ font-size:13px; }
}