.services-page [data-service-catalog] {padding: 76px 0 84px;}
.services-page [data-service-catalog] > .container-fluid {max-width: 1440px; padding-left: 40px; padding-right: 40px;}
.services-page [data-service-catalog] .services-intro {margin-bottom: 32px;}
.services-catalog-grid {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px;}
.catalog-cell {min-width: 0; display: flex;}
.services-page [data-service-catalog] .catalog-card {
    display: block;
    flex: 1;
    width: 100%;
    max-width: none;
    min-height: 304px;
    margin: 0;
    padding: 26px 24px;
    border: 1px solid #282f38;
    border-radius: 8px;
    background: rgba(9, 13, 18, .94);
    color: #d3d8e0;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(120, 199, 255, .16);
}
.services-page [data-service-catalog] .catalog-card::before {background: linear-gradient(135deg, rgba(255,255,255,.055), transparent 50%);}
.services-page [data-service-catalog] .catalog-card .service-icon {margin-bottom: 24px;}
.services-page [data-service-catalog] .catalog-card .service-heading {min-height: 50px; margin: 0 0 12px; font-size: 21px; line-height: 1.2; letter-spacing: 0; text-wrap: balance;}
.services-page [data-service-catalog] .catalog-card p {font-size: 15px; line-height: 1.55; font-weight: 400; color: #b9c1ce; margin: 0;}
.services-page [data-service-catalog] .catalog-card .service-description {margin-top: 12px;}
.catalog-arrow {position: absolute; top: 24px; right: 22px; display: grid; place-items: center; width: 28px; height: 28px; font-size: 20px; color: #8e9aaa; transition: color .2s ease, transform .25s ease;}
.services-page [data-service-catalog] .catalog-card:is(.is-service-hovered, .is-service-tapped, :focus-visible, :active) {
    background: #10161e;
    border-color: var(--catalog-accent);
    box-shadow: 0 14px 28px rgba(0,0,0,.24);
}
.services-page [data-service-catalog] .catalog-card:is(.is-service-hovered, .is-service-tapped, :focus-visible, :active) .catalog-arrow {color: var(--catalog-accent);}
.services-page [data-service-catalog] .catalog-card:focus-visible {outline: 2px solid var(--catalog-accent); outline-offset: 4px;}
.services-page [data-service-catalog] .catalog-card:focus-within .service-icon div {filter: invert(44%) sepia(98%) saturate(1500%) hue-rotate(196deg) brightness(103%) contrast(101%);}
.catalog-contact {align-items: center; justify-content: center; padding: 24px;}
.catalog-contact .conversion-btn {width: 100%; margin: 0; border-radius: 8px; padding: 16px 20px; font-size: 16px; line-height: 1.5; white-space: normal;}
.catalog-contact i {margin-left: 6px;}
@media (prefers-reduced-motion: no-preference) {
    .services-page [data-service-catalog] .catalog-card:is(.is-service-hovered, :focus-visible) .service-icon div {animation: catalog-icon-enter .48s ease both;}
    .services-page [data-service-catalog] .catalog-card.is-service-hovered .catalog-arrow {transform: translate(2px, -2px);}
}
@keyframes catalog-icon-enter {0% {transform: translateY(0) rotate(0);} 48% {transform: translateY(-5px) rotate(-5deg);} 100% {transform: translateY(-3px) rotate(0) scale(1.04);}}
@media (max-width: 1199px) {
    .services-catalog-grid {grid-template-columns: repeat(2, minmax(0, 1fr));}
}
@media (max-width: 767px) {
    .services-page [data-service-catalog] {padding: 44px 0 52px;}
    .services-page [data-service-catalog] > .container-fluid {padding-left: 20px; padding-right: 20px;}
    .services-catalog-grid {grid-template-columns: minmax(0, 1fr); gap: 16px;}
    .services-page [data-service-catalog] .catalog-card {min-height: 0; padding: 24px;}
    .services-page [data-service-catalog] .catalog-card .service-heading {min-height: 0; font-size: 21px;}
    .services-page [data-service-catalog] .catalog-card .service-icon {margin-bottom: 18px;}
    .catalog-contact {padding: 12px 0 0;}
}
@media (prefers-reduced-motion: reduce) {
    .services-page [data-service-catalog] .catalog-card,
    .services-page [data-service-catalog] .catalog-card::before,
    .services-page [data-service-catalog] .catalog-card .service-icon div,
    .services-page [data-service-catalog] .catalog-arrow {transition: none; animation: none; transform: none;}
}