.sol-grid{
display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
}
.sol-card{
display:flex;flex-direction:column;
background:#fff;border:1px solid var(--line);border-radius:var(--r);
padding:28px;transition:.22s;position:relative;overflow:hidden;
}
.sol-card::before{
content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
background:var(--grad);transform:scaleY(0);transform-origin:top;transition:transform .3s;
}
.sol-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:transparent;}
.sol-card:hover::before{transform:scaleY(1);} .sol-head{display:flex;align-items:center;gap:15px;margin-bottom:14px;}
.sol-ic{
display:flex;align-items:center;justify-content:center;
width:54px;height:54px;border-radius:14px;flex-shrink:0;
background:var(--tint);color:var(--blue);transition:.22s;
}
.sol-card:hover .sol-ic{background:var(--grad);color:#fff;}
.sol-ic svg{width:27px;height:27px;}
.sol-head h3{font-size:19px;color:var(--ink);line-height:1.2;margin:0;}
.sol-card > p{font-size:14.5px;color:var(--muted);line-height:1.65;margin:0 0 18px;flex:1;}
.sol-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;}
.sol-tag{
font-size:12.5px;font-weight:600;color:var(--blue-d);
background:var(--tint);padding:6px 12px;border-radius:20px;
}
.sol-link{
font-size:14.5px;font-weight:700;color:var(--blue);
display:inline-flex;align-items:center;gap:6px;margin-top:auto;
transition:.2s;
}
.sol-link:hover{gap:10px;color:var(--blue-d);} .sol-why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;}
.sol-why{
display:flex;gap:18px;align-items:flex-start;
background:#fff;border:1px solid var(--line);border-radius:var(--r);
padding:26px;transition:.22s;
}
.sol-why:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:transparent;}
.sol-why-ic{
display:flex;align-items:center;justify-content:center;
width:50px;height:50px;border-radius:13px;flex-shrink:0;
background:var(--tint);color:var(--blue);transition:.22s;
}
.sol-why:hover .sol-why-ic{background:var(--grad);color:#fff;}
.sol-why-ic svg{width:25px;height:25px;}
.sol-why-body{flex:1;min-width:0;}
.sol-why b{display:block;font-size:17px;color:var(--ink);margin-bottom:6px;}
.sol-why span{font-size:14.5px;color:var(--muted);line-height:1.65;} .sol-steps{
display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
}
.sol-step{
background:#fff;border:1px solid var(--line);border-radius:var(--r);
padding:26px 22px;transition:.22s;
}
.sol-step:hover{box-shadow:var(--shadow);transform:translateY(-3px);}
.sol-step-head{display:flex;align-items:center;gap:14px;margin-bottom:12px;}
.sol-step-no{
width:38px;height:38px;border-radius:50%;flex-shrink:0;
background:var(--grad);color:#fff;
display:flex;align-items:center;justify-content:center;
font-weight:800;font-size:15px;
}
.sol-step-head b{font-size:16.5px;color:var(--ink);line-height:1.2;}
.sol-step p{font-size:14px;color:var(--muted);line-height:1.6;} .sol-faq{display:flex;flex-direction:column;gap:12px;}
.sol-faq-item{
background:#fff;border:1px solid var(--line);border-radius:14px;
overflow:hidden;transition:.2s;
}
.sol-faq-item[open]{border-color:var(--blue);box-shadow:var(--shadow);}
.sol-faq-item summary{
list-style:none;cursor:pointer;
display:flex;align-items:center;justify-content:space-between;gap:16px;
padding:20px 22px;font-size:16px;font-weight:700;color:var(--ink);
transition:.2s;
}
.sol-faq-item summary::-webkit-details-marker{display:none;}
.sol-faq-item summary:hover{color:var(--blue);}
.sol-faq-ic{
flex-shrink:0;display:flex;align-items:center;justify-content:center;
width:32px;height:32px;border-radius:50%;background:var(--tint);color:var(--blue);
transition:transform .25s,background .2s,color .2s;
}
.sol-faq-ic svg{width:18px;height:18px;}
.sol-faq-item[open] .sol-faq-ic{transform:rotate(180deg);background:var(--grad);color:#fff;}
.sol-faq-body{padding:0 22px 22px;}
.sol-faq-body p{font-size:14.5px;color:var(--muted);line-height:1.7;margin:0;} @media(max-width:980px){
.sol-grid{grid-template-columns:1fr 1fr;}
.sol-why-grid{grid-template-columns:1fr;}
.sol-steps{grid-template-columns:1fr 1fr;}
}
@media(max-width:560px){
.sol-grid,.sol-steps{grid-template-columns:1fr;}
.sol-faq-item summary{font-size:15px;padding:18px;}
}