.fp26-steps-band { padding: 51px 0 !important; }
.fp26-steps-band::before { background: linear-gradient(180deg, #f3f4f8 0%, #e8ebf6 100%) !important; }
.fp26-steps-band .fp26-head--center { text-align: center; margin-bottom: 36px; }
.fp26-steps-band .fp26-head--center p { max-width: 520px; margin: 6px auto 0; }
.fp26-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin: 0; padding: 0; list-style: none; }
.fp26-steps li {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
margin: 0;
padding: 28px 26px 24px;
overflow: visible;
border: 0;
border-radius: 22px;
color: var(--h-text);
background: #fff !important;
box-shadow: 0 1px 2px rgba(27, 42, 107, .05), 0 18px 40px -24px rgba(27, 42, 107, .35);
transition: transform .25s, box-shadow .25s;
}
.fp26-steps li:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(27, 42, 107, .05), 0 24px 48px -24px rgba(27, 42, 107, .45); }
.fp26-steps li::after { display: none !important; }
.fp26-steps li:nth-child(1) { --step: #1b2a6b; --step-2: #3a4fa0; }
.fp26-steps li:nth-child(2) { --step: #2148b0; --step-2: #4a72d6; }
.fp26-steps li:nth-child(3) { --step: #2490c0; --step-2: #4fb3dc; } .fp26-steps__no {
position: absolute;
top: 14px;
right: 22px;
color: var(--step) !important;
font-size: 47.5px !important;
font-weight: 800 !important;
line-height: 1;
letter-spacing: -.02em !important;
opacity: .1;
}
.fp26-steps__text { display: flex; flex-direction: column; order: 2; width: 100%; }
.fp26-steps__icon {
display: grid;
place-items: center;
order: 1;
width: 60px;
height: 60px;
margin-bottom: 20px;
border-radius: 18px;
color: #fff !important;
background: linear-gradient(135deg, var(--step-2) 0%, var(--step) 100%);
box-shadow: 0 12px 22px -12px var(--step);
}
.fp26-steps__icon svg { width: 30px; height: 30px; }
.fp26-home .fp26-steps h3 { margin: 0 0 6px; color: #1b2a6b; font-size: 17.5px; font-weight: 700; }
.fp26-steps__desc { margin: 0 0 16px !important; color: var(--h-muted); font-size: 14px; line-height: 1.65; }
.fp26-steps a {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: auto;
padding-top: 14px;
width: 100%;
border-top: 1px dashed #dfe2ea;
color: var(--step) !important;
font-size: 14px;
font-weight: 600;
}
.fp26-steps a svg { transition: transform .2s; }
.fp26-steps li:hover a svg { transform: translateX(4px); } @media (min-width: 901px) {
.fp26-steps li:not(:last-child)::before {
content: "";
position: absolute;
top: 50%;
right: -22px;
z-index: 2;
width: 16px;
height: 16px;
border-top: 2.5px solid #c3c8d8;
border-right: 2.5px solid #c3c8d8;
transform: translateY(-50%) rotate(45deg);
}
.fp26-steps li:not(:last-child) .fp26-steps__text::after { display: none !important; }
}
@media (max-width: 900px) {
.fp26-steps { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 640px) {
.fp26-steps-band { padding: 35px 0 !important; }
.fp26-steps li { padding: 20px 18px 18px; }
.fp26-steps__icon { width: 50px; height: 50px; margin-bottom: 14px; border-radius: 15px; }
.fp26-steps__icon svg { width: 26px; height: 26px; }
.fp26-steps__no { font-size: 37.5px !important; }
}
@media (prefers-reduced-motion: reduce) { .fp26-steps li, .fp26-steps a svg { transition: none; } } .fp26-steps-band { padding: 35px 0 !important; }
.fp26-steps-band .fp26-head--center { margin-bottom: 24px; }
.fp26-steps { gap: 20px; max-width: 980px; margin: 0 auto; }
.fp26-steps li { padding: 18px 18px 16px; border-radius: 18px; }
.fp26-steps__no { top: 10px; right: 16px; font-size: 34px !important; }
.fp26-steps__icon { width: 44px; height: 44px; margin-bottom: 12px; border-radius: 13px; }
.fp26-steps__icon svg { width: 22px; height: 22px; }
.fp26-home .fp26-steps h3 { margin-bottom: 4px; font-size: 15px; }
.fp26-steps__desc { margin-bottom: 10px !important; font-size: 13.5px; line-height: 1.6; }
.fp26-steps a { padding-top: 10px; font-size: 14px; }
@media (min-width: 901px) { .fp26-steps li:not(:last-child)::before { right: -16px; width: 12px; height: 12px; } }
@media (max-width: 640px) {
.fp26-steps-band { padding: 32px 0 !important; }
.fp26-steps { gap: 10px; }
.fp26-steps li { padding: 14px 14px 12px; }
.fp26-steps__icon { width: 40px; height: 40px; margin-bottom: 10px; }
.fp26-steps__no { font-size: 29px !important; }
}