.services__head {
align-items: flex-end;
}
.services__head .section-title {
max-width: 580px;
} .services__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
border-top: 1px solid var(--blk-border, var(--c-border));
} .services__grid--cols-2 {
grid-template-columns: repeat(2, 1fr);
}
.services__grid--cols-2 .service-card:nth-child(2n+1):not(:first-child) {
border-left: none;
border-top: 1px solid var(--c-dark-border);
}
.services__grid--cols-3 {
grid-template-columns: repeat(3, 1fr);
}
.services__grid--cols-3 .service-card:nth-child(3n+1):not(:first-child) {
border-left: none;
border-top: 1px solid var(--c-dark-border);
} .service-card {
display: flex;
flex-direction: column;
gap: 1.5rem;
padding: 2.5rem 2.25rem;
position: relative;
transition: transform var(--t);
} .service-card + .service-card {
border-left: 1px solid var(--c-dark-border);
} .service-card--dark  { background-color: var(--c-dark); }
.service-card--light { background-color: var(--c-white); border-left-color: var(--c-border) !important; }
.service-card--gray  { background-color: var(--c-gray);  border-left-color: var(--c-border) !important; } .service-card__top {
display: flex;
align-items: flex-start;
justify-content: space-between;
width: 100%;
}
.service-card__icon {
display: block;
color: var(--dark-accent, #2EA3F1);
flex-shrink: 0;
width: 28px;
height: 28px;
}
.service-card__icon svg {
width: 28px;
height: 28px;
}
.service-card__num {
font-family: var(--f-ui);
font-size: 0.875rem;
font-weight: 700;
letter-spacing: 0.06em;
color: var(--c-white);
}
.service-card__num--dark { color: var(--c-dark); } .service-card__title {
font-family: var(--f-heading);
font-size: var(--text-3xl);
line-height: 1.15;
color: var(--c-white);
flex: 0 0 auto;
}
.service-card__title--dark { color: var(--c-dark); } .service-card__desc {
font-family: var(--f-body);
font-size: var(--text-base);
line-height: 1.65;
color: #94A3B8;
flex: 1;
}
.service-card__desc--dark { color: var(--c-dark); } .service-card__cta {
display: flex;
align-items: center;
gap: 0.375rem;
font-family: var(--f-ui);
font-size: var(--text-base);
font-weight: 600;
color: var(--c-white);
text-decoration: none;
margin-top: auto;
transition: gap var(--t), opacity var(--t);
}
.service-card__cta:hover { gap: 0.625rem; }
.service-card__cta--dark {
color: var(--c-dark);
} @media (max-width: 1200px) {
.services__grid {
grid-template-columns: repeat(2, 1fr);
}
.service-card + .service-card:nth-child(odd) {
border-left: none;
border-top: 1px solid var(--c-dark-border);
}
.service-card--light,
.service-card--gray {
border-left-color: var(--c-border) !important;
}
.service-card:nth-child(3) {
border-top: 1px solid var(--c-border) !important;
} .services__grid--cols-3 .service-card:nth-child(3n+1):not(:first-child) {
border-left: 1px solid var(--c-dark-border);
border-top: none;
}
.services__grid--cols-3 .service-card--light:nth-child(3n+1):not(:first-child),
.services__grid--cols-3 .service-card--gray:nth-child(3n+1):not(:first-child) {
border-left-color: var(--c-border);
}
}
@media (max-width: 768px) {
.services__head {
align-items: flex-start;
}
}
@media (max-width: 640px) {
.services__grid {
grid-template-columns: 1fr;
}
.service-card + .service-card {
border-left: none;
border-top: 1px solid var(--c-border);
}
.service-card--dark + .service-card--dark {
border-top-color: var(--c-dark-border);
}
.service-card {
padding: 2rem 1.5rem;
}
}