/* Final service banner layer. Loaded after the legacy stylesheet. */
.services-page .services-hero {
  display: grid !important;
  grid-template-columns: minmax(360px, .84fr) minmax(500px, 1.16fr) !important;
  align-items: center !important;
  gap: clamp(44px, 6vw, 100px) !important;
  min-height: min(720px, calc(100vh - 86px)) !important;
  aspect-ratio: auto !important;
  padding: clamp(76px, 8vw, 124px) 7vw !important;
  overflow: hidden !important;
  background:
    linear-gradient(90deg, rgb(20 118 232 / 5%) 1px, transparent 1px),
    linear-gradient(0deg, rgb(20 118 232 / 5%) 1px, transparent 1px),
    radial-gradient(circle at 83% 19%, rgb(18 166 209 / 18%), transparent 28%),
    linear-gradient(125deg, #fff 0%, #f4faff 62%, #eaf7fc 100%) !important;
  background-size: 54px 54px, 54px 54px, auto, auto !important;
}

.services-page .services-hero::before,
.services-page .services-hero::after { display: none !important; }

.services-page .services-hero-copy {
  position: relative !important;
  z-index: 3 !important;
  display: block !important;
  width: min(620px, 100%) !important;
}

.services-page .services-hero-visual {
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
  min-height: 508px !important;
  background: transparent !important;
}

.services-page .services-hero-visual.services-hero-capability-visual { display: grid !important; }
.services-page .services-hero-visual > img,
.services-page .services-hero-visual > .services-hero-visual-orbit { display: none !important; }

.services-page .services-hero-action {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: fit-content !important;
  height: 52px !important;
  min-height: 52px !important;
  margin-top: 34px !important;
  padding: 0 24px !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: linear-gradient(135deg, #1476e8, #12a6d1) !important;
  box-shadow: 0 16px 30px rgb(20 118 232 / 25%) !important;
  font-size: 15px !important;
}

.service-detail-software .service-detail-hero.is-software-hero {
  grid-template-columns: minmax(0, .84fr) minmax(460px, 1.16fr) !important;
  gap: clamp(44px, 7vw, 112px) !important;
  min-height: min(700px, calc(100vh - 86px)) !important;
  padding: clamp(76px, 8vw, 124px) 7vw !important;
}

.service-detail-software .service-detail-hero.is-software-hero::before,
.service-detail-software .service-detail-hero.is-software-hero::after,
.service-detail-software .service-detail-hero.is-software-hero > img { display: none !important; }

.service-detail-software .service-detail-software-hero-content {
  position: relative !important;
  z-index: 3 !important;
  transform: none !important;
}

.software-hero-visual {
  position: relative;
  z-index: 3;
  display: grid;
  min-height: 426px;
  grid-template-rows: auto 1fr auto;
  padding: 17px;
  border: 1px solid rgb(20 118 232 / 20%);
  border-radius: 22px;
  background: linear-gradient(145deg, #fff, #f2f9ff);
  box-shadow: 0 28px 66px rgb(25 87 139 / 16%), 0 0 0 9px rgb(255 255 255 / 78%);
  transform: rotate(1.2deg);
}

.software-hero-visual-head,
.software-hero-visual-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #7894aa;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
}

.software-hero-visual-head { min-height: 31px; padding: 0 7px 12px; border-bottom: 1px solid rgb(20 118 232 / 12%); }
.software-hero-visual-head strong { display: inline-flex; align-items: center; gap: 6px; color: #159e78; font-size: 8px; }
.software-hero-visual-head strong i { width: 6px; height: 6px; border-radius: 50%; background: #19b687; box-shadow: 0 0 0 4px rgb(25 182 135 / 12%); }
.software-hero-screen { position: relative; display: grid; min-height: 315px; place-items: center; overflow: hidden; margin: 13px 0; border: 1px solid rgb(20 118 232 / 12%); border-radius: 14px; background: #e9f5fc; }
.software-hero-screen img { display: block; width: 92%; height: 88%; object-fit: cover; border-radius: 11px; box-shadow: 0 20px 40px rgb(10 43 75 / 19%); }
.software-hero-screen-corner { position: absolute; width: 20px; height: 20px; border-color: rgb(20 118 232 / 45%); }
.software-hero-screen-corner.corner-tl { top: 16px; left: 16px; border-top: 1px solid; border-left: 1px solid; }
.software-hero-screen-corner.corner-br { right: 16px; bottom: 16px; border-right: 1px solid; border-bottom: 1px solid; }
.software-hero-visual-footer { padding: 12px 7px 0; border-top: 1px solid rgb(20 118 232 / 12%); font-size: 8px; }
.software-hero-visual-footer span:last-child { color: #1476e8; }

.service-redesign-data-media {
  position: relative;
  display: grid;
  min-height: 330px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgb(20 118 232 / 13%);
  border-radius: 14px;
  background: radial-gradient(circle at 50% 48%, #fff, #eef8ff 68%, #e7f4fc);
}

.service-redesign-data-media img {
  position: relative;
  z-index: 2;
  display: block;
  width: 190px !important;
  height: 216px !important;
  object-fit: contain;
  filter: drop-shadow(0 22px 18px rgb(20 118 232 / 17%));
}

.service-redesign-data-rings { position: absolute; width: 270px; height: 270px; border: 1px solid rgb(20 118 232 / 14%); border-radius: 50%; }
.service-redesign-data-rings::before,
.service-redesign-data-rings::after { position: absolute; inset: 22px; content: ""; border: 1px dashed rgb(18 166 209 / 22%); border-radius: 50%; }
.service-redesign-data-rings::after { inset: 50px; border-style: solid; border-color: rgb(20 118 232 / 13%); }
.service-redesign-data-lines { position: absolute; right: 16px; bottom: 13px; left: 16px; display: flex; justify-content: space-between; color: #75a0b9; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 8px; letter-spacing: .1em; }

@media (max-width: 900px) {
  .services-page .services-hero,
  .service-detail-software .service-detail-hero.is-software-hero { grid-template-columns: 1fr !important; min-height: 0 !important; }
  .services-page .services-hero-visual,
  .software-hero-visual { width: min(680px, 90vw) !important; margin: 20px auto 0 !important; }
}

@media (max-width: 560px) {
  .services-page .services-hero { padding: 58px 7vw 68px !important; }
  .services-page .services-hero-visual,
  .software-hero-visual { min-height: 360px !important; padding: 11px !important; border-radius: 16px !important; }
  .software-hero-screen { min-height: 250px; }
  .service-redesign-data-media { min-height: 250px; }
  .service-redesign-data-media img { width: 150px !important; height: 170px !important; }
}