.service-card {
    position: relative;
    border-radius: 1.5rem;
    padding: 1rem;
    transition: transform 0.45s ease, box-shadow 0.45s ease, background-color 0.45s ease;
  }

  .service-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(120deg, rgba(212, 175, 55, 0.16), rgba(15, 23, 42, 0.04), rgba(212, 175, 55, 0.16));
    opacity: 0;
    transition: opacity 0.45s ease;
    pointer-events: none;
  }

  .service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 28px 55px -28px rgba(15, 23, 42, 0.55);
    background-color: rgba(248, 250, 252, 0.7);
  }

  .service-card:hover::before {
    opacity: 1;
  }

  .service-image-wrap {
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }

  .service-image-wrap::after {
    content: "";
    position: absolute;
    inset: -140% -45%;
    background: linear-gradient(125deg, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0.55) 48%, rgba(255, 255, 255, 0) 62%);
    transform: translateX(-36%);
    transition: transform 0.95s ease;
    pointer-events: none;
    z-index: 2;
  }

  .service-card:hover .service-image-wrap::after {
    transform: translateX(36%);
  }

  .service-image {
    transition: transform 0.8s cubic-bezier(.2, .65, .2, 1), filter 0.8s ease;
    will-change: transform;
  }

  .service-card:hover .service-image {
    transform: scale(1.1) rotate(0.75deg);
    filter: saturate(1.12);
  }

  @keyframes serviceFloatIn {
    from {
      opacity: 0;
      transform: translateY(46px) scale(0.97);
    }

    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  .service-card.is-visible {
    animation: serviceFloatIn 0.8s cubic-bezier(.2, .65, .2, 1) forwards;
  }
</style>