.platform-engineering-page .service-detail-content {
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, #2b72c7 20%, var(--line));
  background: linear-gradient(145deg, color-mix(in srgb, #2b72c7 4%, var(--surface)), var(--surface) 48%);
  transition: transform 200ms ease, border-color 200ms ease, background-color 200ms ease, box-shadow 200ms ease;
}

.platform-engineering-page .service-detail-content::before {
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: #2b72c7;
  content: "";
  opacity: 1;
  transform: scaleX(1);
  transform-origin: left;
  transition: opacity 200ms ease, transform 200ms ease, height 200ms ease;
}

.platform-engineering-page .service-detail-content:is(:hover, :focus-within) {
  transform: translateY(-5px);
  border-color: #2b72c7;
  background: linear-gradient(145deg, color-mix(in srgb, #2b72c7 12%, var(--surface)), color-mix(in srgb, #2b72c7 4%, var(--surface)) 62%);
  box-shadow: 0 16px 34px color-mix(in srgb, #2b72c7 18%, transparent);
}

.platform-engineering-page .service-detail-content:is(:hover, :focus-within)::before { height: 5px; }
.platform-engineering-page .service-card-heading { color: color-mix(in srgb, #2b72c7 76%, var(--ink)); }
.platform-engineering-page .service-card-icon {
  width: 52px;
  height: 52px;
  flex-basis: 52px;
  padding: 13px;
  border-color: color-mix(in srgb, #2b72c7 18%, var(--line));
  border-radius: 14px;
  color: #2b72c7;
  background: #e8f1fc;
}

.service-detail-main.platform-engineering-page .service-detail-content:is(:hover, :focus-within) .service-card-icon {
  transform: translateY(-1px);
  border-color: transparent;
  color: #fff;
  background: #2b72c7;
  box-shadow: 0 5px 12px color-mix(in srgb, #2b72c7 26%, transparent);
}

[data-theme="cloud"] .platform-engineering-page .service-detail-content {
  border-color: color-mix(in srgb, #91c2f4 20%, var(--line));
  background: linear-gradient(145deg, color-mix(in srgb, #91c2f4 6%, var(--surface)), var(--surface) 52%);
}
[data-theme="cloud"] .platform-engineering-page .service-detail-content::before { background: #91c2f4; }
[data-theme="cloud"] .platform-engineering-page .service-detail-content:is(:hover, :focus-within) {
  border-color: #91c2f4;
  background: linear-gradient(145deg, color-mix(in srgb, #91c2f4 15%, var(--surface)), color-mix(in srgb, #91c2f4 6%, var(--surface)) 62%);
  box-shadow: 0 16px 34px color-mix(in srgb, #91c2f4 16%, transparent);
}
[data-theme="cloud"] .platform-engineering-page .service-card-heading { color: #91c2f4; }
[data-theme="cloud"] .platform-engineering-page .service-card-icon { border-color: color-mix(in srgb, #91c2f4 20%, var(--line)); color: #91c2f4; background: #1e3450; }
[data-theme="cloud"] .service-detail-main.platform-engineering-page .service-detail-content:is(:hover, :focus-within) .service-card-icon {
  border-color: transparent;
  color: #102039;
  background: #91c2f4;
  box-shadow: 0 5px 12px color-mix(in srgb, #91c2f4 22%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .platform-engineering-page .service-detail-content,
  .platform-engineering-page .service-detail-content::before { transition: none; }
  .platform-engineering-page .service-detail-content:is(:hover, :focus-within) { transform: none; }
}