#diensten .diensten-product-grid {
    gap: 1.4rem;
}

.tilt-card {
    min-height: 100%;
    display: block;
    padding: 2rem 1.9rem;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 18px 44px rgba(15, 17, 28, 0.14), inset 18px 0 34px rgba(9, 10, 18, 0.34), inset -18px 0 34px rgba(9, 10, 18, 0.42);
    clip-path: none;
    isolation: isolate;
    background-color: #0f1018;
    background-image: linear-gradient(180deg, rgba(9, 10, 18, 0.38) 0%, rgba(9, 10, 18, 0.5) 42%, rgba(8, 8, 14, 0.72) 100%), linear-gradient(145deg, rgba(var(--card-accent-rgb, 139, 34, 82), 0.24) 0%, rgba(255, 255, 255, 0) 58%);
    background-position: center, center;
    background-repeat: no-repeat;
    background-size: cover, cover;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

#diensten .diensten-product-grid .tilt-card:nth-child(1) { --service-card-photo: url('/assets/home-service-websites-ai.jpg?v=20260511b'); --service-card-position: 44% 46%; }
#diensten .diensten-product-grid .tilt-card:nth-child(2) { --service-card-photo: url('/assets/home-service-software-ai.jpg?v=20260511b'); --service-card-position: 46% 48%; }
#diensten .diensten-product-grid .tilt-card:nth-child(3) { --service-card-photo: url('/assets/home-service-voice-ai.jpg?v=20260511b'); --service-card-position: 48% 50%; }
#diensten .diensten-product-grid .tilt-card:nth-child(4) { --service-card-photo: url('/assets/home-service-chatbot-ai.jpg?v=20260511b'); --service-card-position: 58% 50%; }

.tilt-card::before {
    inset: -26px;
    background-image: linear-gradient(180deg, rgba(9, 10, 18, 0.36) 0%, rgba(9, 10, 18, 0.48) 42%, rgba(8, 8, 14, 0.7) 100%), linear-gradient(90deg, rgba(9, 10, 18, 0.5) 0%, rgba(9, 10, 18, 0.18) 18%, rgba(9, 10, 18, 0.18) 82%, rgba(9, 10, 18, 0.54) 100%), var(--service-card-photo);
    background-position: center, center, var(--service-card-position, center);
    background-repeat: no-repeat;
    background-size: cover, cover, cover;
    opacity: 1;
    z-index: 0;
    transform: scale(1.01);
    transition: transform 0.45s var(--ease-out-expo), filter 0.35s ease;
}

.tilt-card::after {
    content: '';
    position: absolute;
    left: 2rem;
    right: 2rem;
    bottom: 1.05rem;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(207, 79, 132, 0.42), rgba(255, 255, 255, 0));
    opacity: 0.55;
    z-index: 0;
}

.card-content {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    position: relative;
    z-index: 1;
}

.card-number { color: rgba(255, 255, 255, 0.18); }
.tilt-card:hover .card-number { color: rgba(255, 255, 255, 0.26); }
.tilt-card h3 { color: #fff; font-size: 1.7rem; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.34); }
.tilt-card p { margin-top: auto; padding-top: 1rem; color: rgba(255, 255, 255, 0.84); font-size: 0.98rem; line-height: 1.7; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.34); }

.service-card-link-icon {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 2;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    background: rgba(15, 16, 24, 0.42);
    color: rgba(255, 255, 255, 0.88);
    box-shadow: 0 8px 22px rgba(8, 9, 15, 0.18);
    backdrop-filter: blur(10px);
    transition: transform 0.3s var(--ease-out-expo), background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.service-card-link-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#diensten .diensten-product-grid .tilt-card:first-child .card-content::before {
    content: '↗';
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 2;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    background: rgba(15, 16, 24, 0.42);
    color: rgba(255, 255, 255, 0.88);
    font-size: 18px;
    line-height: 1;
    box-shadow: 0 8px 22px rgba(8, 9, 15, 0.18);
    backdrop-filter: blur(10px);
    transition: transform 0.3s var(--ease-out-expo), background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.tilt-card:hover::before,
.tilt-card:focus-visible::before {
    transform: scale(1.045);
    filter: saturate(1.04) brightness(1.04);
}

.tilt-card:hover .service-card-link-icon,
.tilt-card:focus-visible .service-card-link-icon {
    transform: translate(2px, -2px);
    border-color: rgba(207, 79, 132, 0.72);
    background: rgba(155, 35, 85, 0.94);
    color: #fff;
    box-shadow: 0 10px 26px rgba(139, 34, 82, 0.3);
}

#diensten .diensten-product-grid .tilt-card:first-child:hover .card-content::before,
#diensten .diensten-product-grid .tilt-card:first-child:focus-visible .card-content::before {
    transform: translate(2px, -2px);
    border-color: rgba(207, 79, 132, 0.72);
    background: rgba(155, 35, 85, 0.94);
    color: #fff;
    box-shadow: 0 10px 26px rgba(139, 34, 82, 0.3);
}

.tilt-card:focus-visible {
    outline: 3px solid rgba(207, 79, 132, 0.72);
    outline-offset: 4px;
}

@media (max-width: 768px) {
    .service-card-link-icon {
        top: 16px;
        right: 16px;
        width: 38px;
        height: 38px;
    }

    #diensten .diensten-product-grid .tilt-card:first-child .card-content::before {
        top: 16px;
        right: 16px;
        width: 38px;
        height: 38px;
    }

    .tilt-card:active {
        transform: scale(0.99) !important;
    }
}