/* Data engineering service redesign: a compact, traceable pipeline language. */
.service-detail-data {
  --detail-blue: #168b94 !important;
  --detail-ink: #1c4c57 !important;
  --detail-muted: #708990 !important;
}

.service-detail-data .service-redesign-nav,
.service-detail-data .service-redesign-proof,
.service-detail-data .service-redesign-expansion-meta,
.service-detail-data .service-detail-scenes {
  display: none !important;
}

html body #app .service-detail-page.service-detail-data .service-detail-hero.has-redesign-content {
  min-height: min(620px, calc(100vh - 86px)) !important;
  grid-template-columns: minmax(0, .86fr) minmax(430px, 1.04fr) !important;
  gap: clamp(44px, 7vw, 116px) !important;
  padding: clamp(68px, 8vw, 112px) 7vw !important;
  background-color: #f2fbfd !important;
  background-image:
    linear-gradient(90deg, rgba(20, 142, 174, .09) 1px, transparent 1px),
    linear-gradient(0deg, rgba(20, 142, 174, .09) 1px, transparent 1px),
    radial-gradient(circle at 83% 19%, rgba(33, 192, 199, .22), transparent 36%),
    linear-gradient(125deg, #fff 0%, #f6fcfd 48%, #e7f8f8 100%) !important;
  background-size: 54px 54px, 54px 54px, auto, auto !important;
}

.service-detail-data .service-detail-hero.has-redesign-content::before,
.service-detail-data .service-detail-hero.has-redesign-content > .service-detail-hero-action,
.service-detail-data .service-detail-hero.has-redesign-content::after {
  display: none !important;
}

.service-detail-data .service-redesign-hero-content {
  z-index: 3 !important;
  display: block !important;
  width: min(560px, 100%) !important;
  max-width: 560px !important;
}

.service-detail-data .service-redesign-code {
  display: block !important;
  margin-bottom: 20px !important;
  color: #118a98 !important;
  font: 800 10px ui-monospace, SFMono-Regular, Menlo, monospace !important;
  letter-spacing: .18em !important;
}

.service-detail-data .service-redesign-hero-content h1 {
  max-width: 560px !important;
  margin: 0 !important;
  color: #123c4b !important;
  font-size: 64px !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
}

.service-detail-data .service-redesign-hero-content p {
  max-width: 490px !important;
  margin: 22px 0 0 !important;
  color: #617c88 !important;
  font-size: 16px !important;
  line-height: 1.8 !important;
}

.service-detail-data .service-redesign-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px 20px !important;
  margin-top: 24px !important;
}

.service-detail-data .service-redesign-chips span {
  position: relative !important;
  min-height: auto !important;
  padding: 0 0 0 13px !important;
  color: #557681 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-size: 12px !important;
}

.service-detail-data .service-redesign-chips span::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 5px;
  height: 5px;
  content: "";
  border-radius: 50%;
  background: #15a8a8;
  transform: translateY(-50%);
}

.service-detail-data .service-redesign-consult {
  display: inline-flex !important;
  min-height: 50px !important;
  align-items: center !important;
  gap: 14px !important;
  margin-top: 34px !important;
  padding: 0 22px !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: linear-gradient(135deg, #1179e4, #11a9ad) !important;
  box-shadow: 0 16px 30px rgba(17, 137, 163, .23) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  transition: transform .24s ease, box-shadow .24s ease !important;
}

.service-detail-data .service-redesign-consult:hover {
  box-shadow: 0 22px 38px rgba(17, 137, 163, .31) !important;
  transform: translateY(-2px) !important;
}

.service-detail-data .data-hero-visual {
  z-index: 3 !important;
  display: block !important;
  min-height: 426px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.data-hero-visual-head,
.data-hero-visual-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: #638995;
  font: 9px ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .12em;
}

.data-hero-visual-head { margin: 0 4px 12px; }
.data-hero-visual-head strong { display: inline-flex; align-items: center; gap: 7px; color: #118a98; font-size: 9px; }
.data-hero-visual-head strong i { width: 6px; height: 6px; border-radius: 50%; background: #35c59c; box-shadow: 0 0 0 4px rgba(53, 197, 156, .13); }

.data-hero-workbench {
  min-height: 374px;
  padding: 18px 18px 14px;
  overflow: hidden;
  border: 1px solid rgba(21, 153, 163, .18);
  border-radius: 24px;
  background: rgba(255, 255, 255, .93);
  box-shadow: 0 26px 58px rgba(25, 91, 112, .17), 0 0 0 9px rgba(255, 255, 255, .74);
}

.data-hero-workbench-top,
.data-hero-workbench-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.data-hero-workbench-top { padding-bottom: 14px; color: #274f5a; border-bottom: 1px solid rgba(21, 153, 163, .12); font-size: 11px; font-weight: 800; }
.data-hero-workbench-top small { color: #88a7ae; font: 8px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; }

.data-hero-flow { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin-top: 29px; }
.data-hero-flow-line { position: absolute; top: 19px; right: 10%; left: 10%; height: 1px; background: #cce6e5; }
.data-hero-flow-line i { position: absolute; top: -2px; width: 5px; height: 5px; border-radius: 50%; background: #20b4b2; box-shadow: 0 0 0 4px rgba(32, 180, 178, .12); animation: data-flow-pulse 2.4s ease-in-out infinite; }
.data-hero-flow-line i:nth-child(1) { left: 8%; }
.data-hero-flow-line i:nth-child(2) { left: 34%; animation-delay: .35s; }
.data-hero-flow-line i:nth-child(3) { left: 61%; animation-delay: .7s; }
.data-hero-flow-line i:nth-child(4) { right: 8%; animation-delay: 1.05s; }
@keyframes data-flow-pulse { 0%, 100% { opacity: .35; transform: scale(.75); } 50% { opacity: 1; transform: scale(1.25); } }

.data-hero-flow article { position: relative; min-width: 0; padding-top: 37px; text-align: center; }
.data-hero-flow article > b { position: absolute; top: 0; left: 50%; display: grid; width: 38px; height: 38px; place-items: center; color: #23858c; border: 1px solid #cae8e6; border-radius: 50%; background: #f8ffff; font: 9px ui-monospace, SFMono-Regular, Menlo, monospace; transform: translateX(-50%); }
.data-hero-flow article.is-current > b { color: #fff; border-color: #17a8a9; background: linear-gradient(145deg, #1594a3, #16b5aa); box-shadow: 0 7px 16px rgba(21, 168, 169, .24); }
.data-hero-node-icon { display: block; color: #159aa1; font-size: 14px; line-height: 1; }
.data-hero-flow strong { display: block; margin-top: 9px; overflow: hidden; color: #315b64; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.data-hero-flow small { display: block; margin-top: 7px; overflow: hidden; color: #88a2a7; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }

.data-hero-insight { display: grid; grid-template-columns: .9fr 1.1fr; gap: 16px; align-items: end; margin-top: 35px; padding: 14px 0 16px; border-top: 1px solid rgba(21, 153, 163, .11); border-bottom: 1px solid rgba(21, 153, 163, .11); }
.data-hero-insight small { display: block; color: #8ba7aa; font-size: 8px; }
.data-hero-insight strong { display: block; margin-top: 5px; color: #175764; font: 800 28px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0; }
.data-hero-insight strong span { margin-left: 2px; color: #3a9399; font-size: 13px; letter-spacing: 0; }
.data-hero-insight em { display: inline-flex; align-items: center; gap: 5px; margin-top: 5px; color: #39a886; font-size: 8px; font-style: normal; }
.data-hero-insight em i { width: 5px; height: 5px; border-radius: 50%; background: #39b493; }
.data-hero-bars { display: flex; height: 52px; align-items: end; gap: 7px; }
.data-hero-bars i { flex: 1; min-width: 5px; border-radius: 4px 4px 1px 1px; background: linear-gradient(180deg, #4fc6bc, #9ce3dc); }
.data-hero-workbench-foot { margin-top: 13px; color: #829ca1; font: 8px ui-monospace, SFMono-Regular, Menlo, monospace; }
.data-hero-workbench-foot span { display: inline-flex; align-items: center; gap: 5px; }
.data-hero-workbench-foot span i { width: 5px; height: 5px; border-radius: 50%; background: #32b892; }
.data-hero-workbench-foot em { color: #168b94; font-style: normal; }
.data-hero-visual-footer { margin: 12px 4px 0; color: #779ba0; font-size: 8px; }

.service-detail-data .service-redesign-expansion {
  padding: 76px 6vw 88px !important;
  background: linear-gradient(180deg, #f4fbfc 0%, #fff 50%, #f5fbfc 100%) !important;
}

.service-detail-data .service-redesign-contact {
  border-top-color: rgba(21, 153, 163, .16) !important;
  background: linear-gradient(135deg, #f6fcfc, #eaf8f8) !important;
}
.service-detail-data .service-redesign-contact > div > span { color: #168b94 !important; }
.service-detail-data .service-redesign-contact h2 { color: #1c4c57 !important; }
.service-detail-data .service-redesign-contact p { color: #708990 !important; }
.service-detail-data .service-redesign-contact button { background: linear-gradient(135deg, #1179e4, #11a9ad) !important; box-shadow: 0 16px 30px rgba(17, 137, 163, .2) !important; }
.service-detail-data .service-redesign-expansion-head { width: min(1210px, 100%) !important; padding-bottom: 32px !important; border-bottom: 1px solid rgba(21, 153, 163, .15) !important; }
.service-detail-data .service-redesign-expansion-head > span { margin-bottom: 14px !important; color: #168b94 !important; }
.service-detail-data .service-redesign-expansion-head h2 { max-width: 860px !important; color: #1c4c57 !important; font-size: 46px !important; line-height: 1.18 !important; letter-spacing: 0 !important; }
.service-detail-data .service-redesign-expansion-head p { max-width: 660px !important; margin-top: 16px !important; color: #708990 !important; font-size: 14px !important; line-height: 1.8 !important; }
.service-detail-data .service-redesign-step-track { width: min(1210px, 100%) !important; margin-top: 40px !important; gap: 14px !important; }
.service-detail-data .service-redesign-step-track article { min-height: 154px !important; padding: 46px 18px 16px !important; border: 1px solid rgba(21, 153, 163, .13) !important; border-radius: 12px !important; background: rgba(255,255,255,.86) !important; box-shadow: 0 14px 34px rgba(25, 91, 112, .07) !important; transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease !important; }
.service-detail-data .service-redesign-step-track article:hover { border-color: rgba(21, 153, 163, .32) !important; box-shadow: 0 22px 42px rgba(25, 91, 112, .14) !important; transform: translateY(-5px) !important; }
.service-detail-data .service-redesign-step-track article > span { top: 13px !important; left: 16px !important; color: #168b94 !important; }
.service-detail-data .service-redesign-step-track article strong { color: #275864 !important; font-size: 17px !important; }
.service-detail-data .service-redesign-step-track article p { margin-top: 9px !important; color: #708990 !important; font-size: 12px !important; line-height: 1.7 !important; }
.service-detail-data .service-redesign-step-track article small { margin-top: 14px !important; color: #92a8ac !important; }

.service-detail-data .data-showcase-media { position: relative; overflow: hidden; border: 1px solid rgba(21, 153, 163, .16); border-radius: 18px; background: #f0fbfb; box-shadow: 0 28px 60px rgba(25, 84, 99, .14), 0 0 0 8px #fff; }
.data-showcase-chrome { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; color: #6f9298; border-bottom: 1px solid rgba(21, 153, 163, .12); font: 8px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .1em; }
.data-showcase-chrome strong { display: inline-flex; align-items: center; gap: 6px; color: #148b94; font-size: 8px; }
.data-showcase-chrome strong i { width: 5px; height: 5px; border-radius: 50%; background: #34b897; }
.data-showcase-board { margin: 18px; padding: 16px; border: 1px solid rgba(21, 153, 163, .12); border-radius: 13px; background: rgba(255,255,255,.84); }
.data-showcase-board-top { display: flex; justify-content: space-between; color: #2d5b64; font-size: 11px; font-weight: 800; }
.data-showcase-board-top small { color: #89a4a8; font: 8px ui-monospace, SFMono-Regular, Menlo, monospace; }
.data-showcase-score { display: flex; align-items: center; justify-content: space-between; margin-top: 24px; padding-bottom: 18px; border-bottom: 1px solid rgba(21, 153, 163, .1); }
.data-showcase-score small { display: block; color: #86a0a4; font-size: 8px; }
.data-showcase-score strong { display: block; margin-top: 5px; color: #175764; font: 800 30px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0; }
.data-showcase-score strong span { margin-left: 2px; color: #3a9399; font-size: 12px; letter-spacing: 0; }
.data-showcase-ring { position: relative; display: grid; width: 66px; height: 66px; place-items: center; border-radius: 50%; background: conic-gradient(#25b5a4 0 86%, #e2f2f0 86% 100%); }
.data-showcase-ring::after { position: absolute; inset: 6px; content: ""; border-radius: 50%; background: #fff; }
.data-showcase-ring b { position: relative; z-index: 1; color: #248e8d; font: 8px ui-monospace, SFMono-Regular, Menlo, monospace; }
.data-showcase-checks { display: grid; gap: 11px; margin-top: 17px; }
.data-showcase-checks span { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 8px; align-items: center; color: #718b90; font-size: 10px; }
.data-showcase-checks i { width: 6px; height: 6px; border-radius: 50%; background: #34b897; }
.data-showcase-checks strong { color: #31828a; font: 9px ui-monospace, SFMono-Regular, Menlo, monospace; }
.data-showcase-footer { display: flex; justify-content: space-between; padding: 0 18px 16px; color: #829da1; font: 8px ui-monospace, SFMono-Regular, Menlo, monospace; }

.service-detail-data .service-detail-card[data-data-index]::before { content: attr(data-data-index); display: block; margin-bottom: 16px; color: #14929b; font: 800 10px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; }
.service-detail-data .service-detail-guarantees { background: linear-gradient(90deg, rgba(21, 153, 163, .04) 1px, transparent 1px), linear-gradient(0deg, rgba(21, 153, 163, .04) 1px, transparent 1px), #f4fbfb !important; background-size: 52px 52px, 52px 52px, auto !important; }
.service-detail-data .service-detail-guarantee-grid article { border-color: rgba(21, 153, 163, .14) !important; background: rgba(255, 255, 255, .86) !important; }
.service-detail-data .service-detail-guarantee-grid article:hover { border-color: rgba(21, 153, 163, .34) !important; box-shadow: 0 22px 42px rgba(25, 91, 112, .14) !important; transform: translateY(-5px) !important; }

@media (max-width: 900px) {
  html body #app .service-detail-page.service-detail-data .service-detail-hero.has-redesign-content { grid-template-columns: 1fr !important; min-height: 0 !important; }
  .service-detail-data .data-hero-visual { min-height: 0 !important; }
  .service-detail-data .service-redesign-hero-content h1 { font-size: 48px !important; }
  .service-detail-data .service-redesign-expansion-head h2 { font-size: 38px !important; }
}

@media (max-width: 560px) {
  .service-detail-data .service-redesign-hero-content h1 { font-size: 38px !important; }
  .service-detail-data .service-redesign-expansion-head h2 { font-size: 32px !important; }
  .data-hero-workbench { padding: 14px 12px 12px; border-radius: 18px; }
  .data-hero-flow { gap: 4px; }
  .data-hero-flow article > b { width: 32px; height: 32px; }
  .data-hero-flow article { padding-top: 32px; }
  .data-hero-flow strong { font-size: 10px; }
  .data-hero-flow small { font-size: 7px; }
  .data-hero-insight { gap: 8px; margin-top: 26px; }
  .data-hero-bars { gap: 4px; }
  .data-hero-workbench-foot { font-size: 7px; }
}