/* Figma 3684:2932 — third screen, shared desktop/mobile content. */
.solution-page .sol-turnkey {
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--amicro-section-h);
  padding: calc(72 / 1920 * 100vw) 0;
  color: #fff;
  background: #071129 url('../images/solution/turnkey/background.svg') center / 100% 100% no-repeat;
  scroll-snap-align: start;
}

.sol-turnkey__inner {
  width: calc(1440 / 1920 * 100vw);
  margin: auto;
}

.sol-turnkey__heading {
  margin-bottom: calc(49 / 1920 * 100vw);
  text-align: center;
}

.solution-page .sol-turnkey__heading h2 {
  margin: 0;
  color: #6db4ff;
  font-size: calc(32 / 1920 * 100vw);
  font-weight: 500;
  line-height: calc(48 / 1920 * 100vw);
}

.solution-page .sol-turnkey__heading p {
  margin: calc(1 / 1920 * 100vw) 0 0;
  font-size: calc(24 / 1920 * 100vw);
  line-height: calc(50 / 1920 * 100vw);
}

.sol-turnkey__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(24 / 1920 * 100vw);
}

.sol-turnkey__card {
  position: relative;
  min-width: 0;
  height: calc(240 / 1920 * 100vw);
}

.sol-turnkey__face {
  position: relative;
  display: block;
  height: 100%;
  list-style: none;
  mask: url('../images/solution/turnkey/card-mask.svg') 0 0 / 100% 100% no-repeat;
}

.sol-turnkey__face::-webkit-details-marker { display: none; }
.sol-turnkey__card[data-turnkey-card] > .sol-turnkey__face { cursor: pointer; }

.sol-turnkey__face::before,
.sol-turnkey__face::after {
  position: absolute;
  inset: 0 0 auto;
  height: 86.25%;
  background: url('../images/solution/turnkey/card.png') center / 100% 100% no-repeat;
  content: '';
}

.sol-turnkey__face::after {
  opacity: 0;
  background-image: url('../images/solution/turnkey/card-hover.png');
  transition: opacity 300ms ease-out;
}

.sol-turnkey__visual {
  position: absolute;
  z-index: 1;
  top: 0;
  left: calc(214 / 464 * 100%);
  width: calc(210 / 464 * 100%);
  height: 100%;
  mask: url('../images/solution/turnkey/robot-mask.svg') center / 100% 100% no-repeat;
  transition: transform 300ms ease-out;
}

.sol-turnkey__card--humanoid .sol-turnkey__visual { mask: none; }
.sol-turnkey__card--quadruped .sol-turnkey__visual,
.sol-turnkey__card--entry .sol-turnkey__visual {
  mask-image: url('../images/solution/turnkey/robot-top-mask.svg');
}

.solution-page .sol-turnkey__visual img {
  position: absolute;
  max-width: none;
  object-fit: cover;
}
.sol-turnkey__card--humanoid img { width: 100%; height: 100%; }
.sol-turnkey__card--quadruped img { left: 18.095238%; top: 32.916667%; width: 67.619048%; height: 59.166667%; }
.sol-turnkey__card--entry img { left: 36.187919%; top: 10.183105%; width: 43.608784%; height: 88.597075%; }
.sol-turnkey__card--standard img { left: 25.238095%; top: 29.166667%; width: 49.523810%; height: 42.083333%; }
.sol-turnkey__card--professional img { left: 10.476190%; top: 25.416667%; width: 81.904762%; height: 51.25%; opacity: 0.85; }
.sol-turnkey__card--intelligent img { left: 34.285714%; top: 18.333333%; width: 48.571429%; height: 76.25%; }

.sol-turnkey__hover-visual {
  position: absolute;
  z-index: 1;
  top: 0;
  left: calc(230 / 464 * 100%);
  width: calc(210 / 464 * 100%);
  height: 100%;
  opacity: 0;
  transition: opacity 300ms ease-out;
}
.solution-page .sol-turnkey__hover-visual img {
  width: 100%;
  height: 100%;
  opacity: 1;
  object-fit: contain;
}

.solution-page .sol-turnkey__label {
  position: absolute;
  z-index: 2;
  top: 30%;
  left: calc(60 / 464 * 100%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
  font-weight: 400;
  transition: top 300ms ease-out;
}

.sol-turnkey__tier {
  font-size: calc(54 / 1920 * 100vw);
  font-weight: 500;
  line-height: calc(65 / 1920 * 100vw);
  background: linear-gradient(90deg, #125bce, #fff);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sol-turnkey__name {
  color: rgba(255, 255, 255, 0.8);
  font-size: calc(20 / 1920 * 100vw);
  line-height: calc(24 / 1920 * 100vw);
}

.sol-turnkey__search { display: none; }
.sol-turnkey__search {
  width: calc(24 / 1920 * 100vw);
  height: calc(24 / 1920 * 100vw);
  margin-left: calc(5 / 1920 * 100vw);
  background: url('../images/solution/turnkey/search.svg') center / contain no-repeat;
}
.sol-turnkey__card--professional .sol-turnkey__search {
  background-image: url('../images/solution/turnkey/search-professional.svg');
}

.sol-turnkey__preview {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: calc(61 / 464 * 100%);
  display: grid;
  gap: calc(16 / 1920 * 100vw);
  opacity: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: calc(14 / 1920 * 100vw);
  line-height: calc(17 / 1920 * 100vw);
  transition: opacity 300ms ease-out;
}
.sol-turnkey__preview > span::before { content: '•'; margin-right: calc(7 / 1920 * 100vw); }

.sol-turnkey__card:has(> summary:focus-visible) {
  outline: 1px solid #6db4ff;
  outline-offset: calc(4 / 1920 * 100vw);
  border-radius: calc(8 / 1920 * 100vw);
}
.sol-turnkey__face:focus { outline: none; }

.sol-turnkey__card[open] { z-index: 3; }
.sol-turnkey__card[open] .sol-turnkey__label,
.sol-turnkey__card[open] .sol-turnkey__preview { visibility: hidden; }
.sol-turnkey__detail {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  width: 100%;
  min-height: calc(471 / 1920 * 100vw);
  padding: calc(30 / 1920 * 100vw) calc(32 / 1920 * 100vw) calc(20 / 1920 * 100vw);
  border-radius: calc(8 / 1920 * 100vw);
  background: linear-gradient(180deg, rgba(21, 21, 22, 0.8), #151516 59.615%);
}
.sol-turnkey__card:nth-child(n + 4) .sol-turnkey__detail {
  top: calc(-264 / 1920 * 100vw);
  background: linear-gradient(180deg, #151516 40.385%, rgba(21, 21, 22, 0.8));
}
.sol-turnkey__description + .sol-turnkey__description { margin-top: calc(29 / 1920 * 100vw); }
.solution-page .sol-turnkey__description h4 {
  margin: 0;
  font-size: calc(22 / 1920 * 100vw);
  font-weight: 500;
  line-height: calc(27 / 1920 * 100vw);
  background: linear-gradient(90deg, #125bce, #fff);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.solution-page .sol-turnkey__subtitle {
  margin: calc(6 / 1920 * 100vw) 0 calc(16 / 1920 * 100vw);
  color: #125bce;
  font-size: calc(16 / 1920 * 100vw);
  line-height: calc(19 / 1920 * 100vw);
}
.solution-page .sol-turnkey__body {
  color: rgba(255, 255, 255, 0.9);
  font-size: calc(14 / 1920 * 100vw);
  line-height: calc(20 / 1920 * 100vw);
}
.solution-page .sol-turnkey__description ul {
  margin: calc(11 / 1920 * 100vw) 0 0;
  padding: 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: calc(12 / 1920 * 100vw);
  line-height: calc(20 / 1920 * 100vw);
  list-style: disc;
}
.sol-turnkey__close {
  position: absolute;
  top: calc(2 / 1920 * 100vw);
  right: calc(4 / 1920 * 100vw);
  width: calc(28 / 1920 * 100vw);
  height: calc(28 / 1920 * 100vw);
  border: 0;
  color: #fff;
  background: transparent;
  font-size: calc(24 / 1920 * 100vw);
  cursor: pointer;
  opacity: 0;
}
.sol-turnkey__close:focus-visible { opacity: 1; outline: 1px solid #6db4ff; }

@media (min-width: 1081px) and (hover: hover) {
  .sol-turnkey__card[data-turnkey-card]:hover .sol-turnkey__face::after { opacity: 0.8; }
  .sol-turnkey__card[data-turnkey-card]:hover .sol-turnkey__visual { transform: translateX(calc(16 / 1920 * 100vw)); }
  .sol-turnkey__card[data-turnkey-card]:hover .sol-turnkey__label { top: 25%; flex-direction: row; align-items: center; gap: calc(7 / 1920 * 100vw); }
  .sol-turnkey__card[data-turnkey-card]:hover :is(.sol-turnkey__tier, .sol-turnkey__name) { font-size: calc(24 / 1920 * 100vw); line-height: calc(29 / 1920 * 100vw); }
  .sol-turnkey__card[data-turnkey-card]:hover .sol-turnkey__search { display: block; }
  .sol-turnkey__card[data-turnkey-card]:hover .sol-turnkey__preview { opacity: 1; }
  .sol-turnkey__card:has(.sol-turnkey__hover-visual):hover .sol-turnkey__visual { opacity: 0; }
  .sol-turnkey__card:hover .sol-turnkey__hover-visual { opacity: 1; }
}

/* Keep the desktop composition and proportions on the 1080 mobile canvas. */
html[data-mobile] .solution-page .sol-turnkey {
  min-height: calc(506.25 / 1080 * 100vw);
  padding: calc(40.5 / 1080 * 100vw) 0;
  scroll-margin-top: calc(120 / 1080 * 100vw);
}
html[data-mobile] .solution-page .sol-turnkey__heading p {
  margin: calc(0.5625 / 1080 * 100vw) 0 0;
}
html[data-mobile] .solution-page .sol-turnkey__subtitle {
  margin: calc(3.375 / 1080 * 100vw) 0 calc(9 / 1080 * 100vw);
}
html[data-mobile] .solution-page .sol-turnkey__description ul {
  margin: calc(6.1875 / 1080 * 100vw) 0 0;
  padding: 0;
}
html[data-mobile] .sol-turnkey__close { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .sol-turnkey *, .sol-turnkey *::after { transition: none !important; }
}