/* White service launcher with premium reference-blue icons */
#layanan.services-modern{
  --svc-blue-hi:#6288ef;
  --svc-blue-mid:#597cdc;
  --svc-blue-deep:#30498d;
  --svc-blue-link:#4568c8;
  --svc-blue-soft:rgba(98,136,239,.10);
  --svc-text:#171925;
  --svc-muted:#707b91;
  --svc-line:#e5e9f2;
}

/* Keep the launcher itself white. */
#layanan.services-modern .services-grid{
  background:#ffffff!important;
  border:1px solid #e3e7ef!important;
  box-shadow:0 20px 50px rgba(24,35,67,.10)!important;
  backdrop-filter:blur(12px)!important;
}

#layanan.services-modern .services-grid > .service-card:nth-child(n){
  --mouse-x:50%;
  --mouse-y:50%;
  --card-tilt-x:0deg;
  --card-tilt-y:0deg;
  position:relative!important;
  isolation:isolate!important;
  background:#ffffff!important;
  color:var(--svc-text)!important;
  border-right:1px solid var(--svc-line)!important;
  border-bottom:1px solid var(--svc-line)!important;
  box-shadow:none!important;
  cursor:pointer!important;
  transform:perspective(1000px) rotateX(var(--card-tilt-x)) rotateY(var(--card-tilt-y)) translateZ(0)!important;
  transform-origin:center!important;
  transition:transform .22s ease,background .22s ease,box-shadow .22s ease,border-color .22s ease!important;
}
#layanan.services-modern .services-grid > .service-card:nth-child(4n){border-right:0!important}
#layanan.services-modern .services-grid > .service-card:nth-child(n+5){border-bottom:0!important}

/* Cursor spotlight: blue only as a faint light, not as the card background. */
#layanan.services-modern .services-grid > .service-card:nth-child(n)::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  pointer-events:none!important;
  opacity:0!important;
  background:radial-gradient(
    300px circle at var(--mouse-x) var(--mouse-y),
    rgba(98,136,239,.12) 0%,
    rgba(89,124,220,.055) 30%,
    rgba(89,124,220,.018) 50%,
    transparent 72%
  )!important;
  transition:opacity .18s ease!important;
}
#layanan.services-modern .services-grid > .service-card:nth-child(n)::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  pointer-events:none!important;
  opacity:0!important;
  background:none!important;
}

#layanan.services-modern .services-grid > .service-card:nth-child(n):hover{
  background:#fbfcff!important;
  border-color:#dce3f2!important;
  box-shadow:0 14px 30px rgba(36,55,103,.08)!important;
  transform:perspective(1000px) rotateX(var(--card-tilt-x)) rotateY(var(--card-tilt-y)) translateY(-3px) translateZ(0)!important;
  z-index:3!important;
}
#layanan.services-modern .services-grid > .service-card:nth-child(n):hover::before{opacity:1!important}

/* Only the icon box receives the requested blue treatment. */
#layanan.services-modern .services-grid > .service-card:nth-child(n) .service-icon{
  position:relative!important;
  z-index:2!important;
  color:#ffffff!important;
  background:linear-gradient(145deg,var(--svc-blue-hi) 0%,var(--svc-blue-mid) 46%,var(--svc-blue-deep) 100%)!important;
  border:1px solid rgba(48,73,141,.18)!important;
  box-shadow:
    0 12px 26px rgba(48,73,141,.20),
    inset 0 1px 0 rgba(255,255,255,.24)!important;
  transition:transform .25s ease,box-shadow .25s ease,filter .25s ease!important;
}
#layanan.services-modern .services-grid > .service-card:nth-child(n):hover .service-icon{
  transform:translateY(-2px) scale(1.055)!important;
  filter:saturate(1.06) brightness(1.025)!important;
  box-shadow:
    0 17px 32px rgba(48,73,141,.26),
    0 0 24px rgba(98,136,239,.13),
    inset 0 1px 0 rgba(255,255,255,.30)!important;
}
#layanan.services-modern .service-icon svg{
  stroke:#ffffff!important;
  filter:drop-shadow(0 1px 2px rgba(23,39,92,.18))!important;
}

/* Restore dark text on white cards. */
#layanan.services-modern .service-content,
#layanan.services-modern .service-link{
  position:relative!important;
  z-index:2!important;
}
#layanan.services-modern .service-card h3{
  color:var(--svc-text)!important;
  text-shadow:none!important;
}
#layanan.services-modern .service-card p{
  color:var(--svc-muted)!important;
}
#layanan.services-modern .service-link,
#layanan.services-modern .service-link em,
#layanan.services-modern .service-link em::after{
  color:var(--svc-blue-link)!important;
}
#layanan.services-modern .service-link em::after{
  display:inline-block!important;
  transition:color .2s ease,transform .2s ease!important;
}
#layanan.services-modern .service-card:hover .service-link em::after{
  color:#30498d!important;
  transform:translateX(4px)!important;
  text-shadow:none!important;
}

/* A short blue accent line appears only during hover. */
#layanan.services-modern .service-content::before{
  content:"";
  position:absolute;
  left:0;
  top:-16px;
  width:50px;
  height:1.5px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--svc-blue-hi),rgba(98,136,239,.12),transparent);
  opacity:0;
  transform:scaleX(.6);
  transform-origin:left;
  transition:opacity .22s ease,transform .22s ease;
}
#layanan.services-modern .service-card:hover .service-content::before{
  opacity:.72;
  transform:scaleX(1);
}

@media(max-width:1100px){
  #layanan.services-modern .services-grid > .service-card:nth-child(n){
    border-right:1px solid var(--svc-line)!important;
    border-bottom:1px solid var(--svc-line)!important;
  }
  #layanan.services-modern .services-grid > .service-card:nth-child(2n){border-right:0!important}
  #layanan.services-modern .services-grid > .service-card:nth-child(n+7){border-bottom:0!important}
}

@media(max-width:760px){
  #layanan.services-modern .services-grid > .service-card:nth-child(n){
    transform:none!important;
    border-right:0!important;
    border-bottom:1px solid var(--svc-line)!important;
  }
  #layanan.services-modern .services-grid > .service-card:nth-child(8){border-bottom:0!important}
  #layanan.services-modern .services-grid > .service-card:nth-child(n):hover{transform:translateY(-2px)!important}
}

@media(prefers-reduced-motion:reduce){
  #layanan.services-modern .services-grid > .service-card:nth-child(n),
  #layanan.services-modern .service-icon,
  #layanan.services-modern .service-link em::after{transition:none!important;transform:none!important}
}