/* Service overview: project screens and clearly labelled scenario illustrations. */
.m-service-list.service-gallery { padding-top: 28px; }
.service-gallery article.service-showcase-row {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(32px, 6vw, 88px);
  padding: 46px 0;
  align-items: center;
}
.service-gallery article:first-child { border-top: 0; padding-top: 0; }
.service-copy { min-width: 0; padding-bottom: 24px; }
.service-copy .service-index { display: block; color: var(--m-blue); font-size: 12px; margin-bottom: 20px; }
.service-gallery .service-copy h2 { font-size: clamp(28px, 3.1vw, 44px); line-height: 1.15; margin-bottom: 20px; }
.service-copy p { font-size: 17px; line-height: 1.7; margin-bottom: 20px; }
.service-visual { min-width: 0; margin: 0; }
.service-visual figcaption { margin-top: 14px; color: #607188; font-size: 11px; line-height: 1.6; }
.service-visual-stage {
  position: relative;
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1.4;
  overflow: hidden;
  isolation: isolate;
  border-radius: 12px;
  border: 1px solid #dae3ed;
}
.service-visual-stage img { display: block; width: 100%; height: auto; }
.service-visual-crm { background: radial-gradient(ellipse at 80% 10%, #325b94, transparent 75%), #0e2b52; border-color: #18375d; padding: 28px 24px; }
.service-browser { width: 100%; overflow: hidden; background: #fff; border: 1px solid #b8c9de; border-radius: 7px; box-shadow: 0 22px 30px #071b3433; transform: perspective(850px) rotateY(-7deg) rotateZ(-3deg); }
.service-browser-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; background: #f8fafc; color: #697b93; font-size: 8px; line-height: 1; }
.service-browser-bar>span:first-child { color: #a0aec0; letter-spacing: 2px; font-size: 6px; }
.service-visual-web { background: #f3ede5; }
.service-visual-web img { position: absolute; width: 80%; border: 1px solid #e1d6cb; border-radius: 6px; box-shadow: 0 14px 24px #7b635d24; }
.service-visual-web .service-web-back { top: 9%; left: 6%; transform: rotate(-5deg); }
.service-visual-web .service-web-front { bottom: 8%; right: -6%; transform: rotate(4deg); }
.service-visual-pwa { background: radial-gradient(ellipse at 80% 30%, #c8ded4, transparent 85%), #eaf0e9; }
.service-phone { position: absolute; width: 39%; border: 5px solid #1b3933; border-radius: 21px; overflow: hidden; background: #f9f0db; box-shadow: 0 17px 30px #173b332b; }
.service-phone-back { top: -12%; left: 9%; transform: rotate(-8deg); }
.service-phone-front { top: 10%; right: 10%; transform: rotate(9deg); }
.service-visual-ai { min-height: 276px; padding: 24px 30px; background: #edf1fa; }
.service-ai-demo { width: 100%; max-width: 350px; font-size: 13px; }
.service-ai-heading { display: flex; align-items: center; gap: 10px; color: #163154; line-height: 1.4; margin-bottom: 21px; }
.service-ai-heading small { display: block; color: #76839b; font-size: 9px; margin-top: 3px; }
.service-ai-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: #1e5be4; color: white; font-size: 29px; }
.service-ai-question { margin-left: auto; width: fit-content; padding: 10px 15px; background: #1f4e9c; color: #fff; border-radius: 11px 11px 2px 11px; font-size: 12px; line-height: 1.5; }
.service-ai-answer { margin-top: 13px; width: 88%; padding: 14px 16px; background: #fff; border: 1px solid #d9e2f0; border-radius: 2px 11px 11px 11px; box-shadow: 0 8px 16px #304e7b0b; }
.service-ai-answer>span { font-size: 12px; color: #254a7c; }
.service-ai-answer>div { display: grid; gap: 7px; margin: 13px 0; }
.service-ai-answer i { height: 5px; width: 90%; border-radius: 3px; background: #edf1f7; }
.service-ai-answer i:nth-child(2) { width: 72%; }
.service-ai-answer i:nth-child(3) { width: 82%; }
.service-ai-answer small { display: flex; justify-content: space-between; gap: 10px; font-size: 8px; color: #6d7f97; }
.service-ai-answer b { font-size: 12px; color: #1e5be4; }
.service-visual-api { min-height: 240px; background: #f1f5fa; padding: 20px; }
.service-api-demo { display: grid; grid-template-columns: 1fr 18px 1.2fr 18px 1fr; align-items: center; width: 100%; gap: 7px; }
.service-api-column { display: grid; gap: 16px; }
.service-api-column>span { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 11px 4px; background: #fff; border: 1px solid #dce4ee; border-radius: 8px; color: #5e718c; font-size: 10px; }
.service-api-column i { font-style: normal; font-size: 20px; color: #356ec2; line-height: 1.2; }
.service-api-connector { color: #92aac9; text-align: center; font-size: 20px; }
.service-api-core { display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: .95; background: #153d77; color: #fff; border-radius: 12px; box-shadow: 0 15px 22px #16345b26; }
.service-api-core>span { color: #bed7ff; font-size: 28px; line-height: 1.4; }
.service-api-core strong { font-size: 23px; font-weight: 500; }
.service-api-core small { font-size: 8px; color: #b6c9e7; }
.service-api-note { position: absolute; bottom: 7%; font-size: 9px; color: #637b92; display: flex; gap: 7px; align-items: center; }
.service-api-note i { width: 5px; height: 5px; border-radius: 50%; background: #4c947b; }
.service-visual-portal { background: #e8edf5; padding: 28px 24px; }
.service-visual-portal .service-browser { transform: perspective(850px) rotateY(7deg) rotateZ(3deg); }
@media (max-width: 1000px) {
  .service-gallery article.service-showcase-row { gap: 32px; }
  .service-copy p { font-size: 15px; }
  .service-visual-ai { padding: 20px; }
  .service-ai-heading { margin-bottom: 12px; }
  .service-ai-answer { margin-top: 10px; padding: 10px 13px; }
  .service-api-demo { gap: 3px; grid-template-columns: 1fr 12px 1.2fr 12px 1fr; }
  .service-api-core strong { font-size: 20px; }
  .service-api-column>span { font-size: 8px; }
}
@media (max-width: 700px) {
  .m-service-list.service-gallery { padding-top: 0; }
  .service-gallery article.service-showcase-row { grid-template-columns: 1fr; gap: 24px; padding: 34px 0; }
  .service-visual-stage { aspect-ratio: 1.5; }
  .service-copy { padding-bottom: 0; }
  .service-copy .service-index { margin-bottom: 12px; font-size: 11px; }
  .service-gallery .service-copy h2 { font-size: 30px; margin-bottom: 16px; }
  .service-copy p { margin-bottom: 13px; }
  .service-visual figcaption { margin-top: 10px; font-size: 10px; }
  .service-visual-ai { padding: 20px 24px; }
  .service-ai-demo { max-width: 350px; }
  .service-api-demo { gap: 7px; grid-template-columns: 1fr 18px 1.2fr 18px 1fr; }
  .service-api-column>span { font-size: 10px; }
}
@media (max-width: 370px) {
  .service-visual-ai { padding: 16px; }
  .service-ai-heading { margin-bottom: 8px; }
  .service-ai-answer>div { gap: 5px; margin: 9px 0; }
  .service-api-demo { gap: 3px; grid-template-columns: 1fr 12px 1.2fr 12px 1fr; }
  .service-api-core small { font-size: 7px; }
}