/* ============================================================
   Gelai Infotech — Service Detail Pages (Mobile, Web, …)
   Figma: Mobile 818:2221 · Web 814:938
   ============================================================ */

.mobile-svc-page {
  background: var(--white);
  font-family: var(--font);
}

/* ===================== HERO (Frame 28 — 676px) ===================== */
.mobile-svc-hero {
  position: relative;
  min-height: 676px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-top: var(--site-header-offset, 168px);
  background:
    radial-gradient(
      ellipse 95% 90% at 88% 6%,
      #0c6eb7 0%,
      #569acd 32%,
      rgba(255, 255, 255, 0) 70%
    ),
    #ffffff;
}

.mobile-svc-hero__header {
  z-index: 3;
  padding-top: 0;
  flex-shrink: 0;
}

.mobile-svc-hero__header .hero__logo img {
  width: 150px;
  height: auto;
}

.mobile-svc-hero__body {
  position: relative;
  z-index: 2;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
  align-items: center;
  gap: 32px 48px;
  margin-top: 40px;
  padding-bottom: 48px;
}

.mobile-svc-hero__title {
  font-family: var(--font);
  font-size: clamp(32px, 3.6vw, var(--fs-title-hero));
  font-weight: 600;
  line-height: 1.3;
  color: var(--navy);
  margin: 0 0 20px;
  max-width: 467px;
  text-shadow: var(--title-shadow);
}

.mobile-svc-hero__desc {
  max-width: 480px;
  margin: 0 0 28px;
}

.mobile-svc-hero__desc p {
  font-family: var(--font);
  font-size: var(--fs-body-lg);
  font-weight: 400;
  line-height: 1.45;
  color: var(--navy);
  margin: 0 0 14px;
}

.mobile-svc-hero__desc p:last-child {
  margin-bottom: 0;
}

.mobile-svc-hero__visual {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.mobile-svc-hero__visual img {
  display: block;
  width: 100%;
  max-width: 789px;
  height: auto;
}

/* CTA uses unified .btn via class on element */

/* ===================== WHAT WE OFFER ===================== */
.msvc-offer {
  position: relative;
  padding: 72px 0 88px;
  background: var(--white);
  overflow: hidden;
}

.msvc-offer__layout {
  display: grid;
  grid-template-columns: minmax(0, 730px) minmax(0, 1fr);
  gap: 32px 40px;
  align-items: center;
}

.msvc-offer__visual {
  position: relative;
  z-index: 2;
}

.msvc-offer__visual img {
  display: block;
  width: 100%;
  max-width: 730px;
  height: auto;
}

/* Figma Rectangle 2 — rotated light-blue panel behind copy */
.msvc-offer__panel {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
  min-height: 620px;
}

.msvc-offer__panel-bg {
  position: absolute;
  top: 50%;
  left: -72px;
  right: calc(-1 * var(--pad-x));
  height: 695px;
  border-radius: 93px;
  background: rgba(12, 110, 183, 0.05);
  transform: translateY(-50%) rotate(10deg);
  transform-origin: center center;
  pointer-events: none;
  z-index: 0;
}

.msvc-offer__content {
  position: relative;
  z-index: 1;
  padding: 56px 48px 56px 40px;
  max-width: 1000px;
}

.msvc-offer__label {
  display: block;
  font-family: var(--font);
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: 1.3;
  color: var(--blue);
  margin: 0 0 24px;
}

.msvc-offer__item {
  margin-bottom: 36px;
}

.msvc-offer__item:last-child {
  margin-bottom: 0;
}

.msvc-offer__item-title {
  font-family: var(--font);
  font-size: var(--fs-title-card);
  font-weight: 600;
  line-height: 1.3;
  color: var(--navy);
  margin: 0 0 12px;
}

.msvc-offer__item-desc {
  font-family: var(--font);
  font-size: var(--fs-lead);
  font-weight: 400;
  line-height: 1.5;
  color: rgba(35, 43, 64, 0.82);
  margin: 0;
}

/* SVG illustrations — fade only (no slide transform = no blur) */
.mobile-svc-hero__visual.reveal-fade,
.msvc-offer__visual.reveal-fade {
  transform: none;
  transition: opacity var(--dur-slow) var(--ease-out);
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 1200px) {
  .mobile-svc-hero__body {
    grid-template-columns: 1fr;
  }

  .mobile-svc-hero__visual {
    justify-content: center;
  }

  .msvc-offer__layout {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .msvc-offer__panel {
    min-height: 0;
  }

  .msvc-offer__panel-bg {
    left: 0;
    right: 0;
    height: 100%;
    min-height: 480px;
    transform: translateY(-50%) rotate(0deg);
    border-radius: 48px;
  }

  .msvc-offer__content {
    padding: 40px 32px;
    max-width: none;
  }

}

@media (max-width: 768px) {
  .mobile-svc-hero {
    min-height: auto;
  }

  .msvc-offer {
    padding: 56px 0 64px;
  }

  .msvc-offer__item {
    margin-bottom: 28px;
  }
}