:root {
  --akira-line: rgba(148, 163, 184, .13);
}
body {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
#page_wrapper {
  max-width: 1680px;
  margin-inline: auto;
}
.service-card {
  border: 1px solid var(--akira-line);
  border-radius: 16px;
  background: rgba(15, 23, 42, .66);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .12);
  transition: border-color .15s ease, background .15s ease;
}
.service-card:hover {
  border-color: rgba(56, 189, 248, .38);
  background: rgba(30, 41, 59, .86);
}
.service-name {
  font-weight: 650;
}
.service-description {
  line-height: 1.5;
}
.service-group-name {
  letter-spacing: .02em;
}
.service-card .justify-between.text-xs {
  gap: .75rem;
  align-items: flex-start;
}
.service-card .justify-between.text-xs > div {
  min-width: 0;
  overflow-wrap: anywhere;
}
.service-card .justify-between.text-xs > .font-thin {
  flex: 0 0 28%;
  font-weight: 400;
}
.service-card .justify-between.text-xs > .text-right {
  flex: 1;
  justify-content: flex-end;
}
@media (prefers-reduced-motion: reduce) {
  .service-card { transition: none; }
}
@media (max-width: 640px) {
  .service-card { border-radius: 12px; }
  .service-card .justify-between.text-xs { flex-direction: column; gap: .25rem; }
  .service-card .justify-between.text-xs > .font-thin { flex-basis: auto; }
  .service-card .justify-between.text-xs > .text-right { text-align: left; }
}