/* Mobile App Development page — isolated styles */
.mobile-service-page { color: #0b1b52; background: #fff; overflow: hidden; }
.mobile-service-page * { box-sizing: border-box; }
.mobile-service-page a { color: inherit; text-decoration: none; }

/* ============================================================
   HERO
   ============================================================ */
.mobile-hero { position: relative; background: linear-gradient(110deg,#f4f8ff 0%,#eef5ff 45%,#f9fbff 100%); }
.mobile-hero-inner { width: min(1440px,100%); margin: 0 auto; min-height: 376px; display: grid; grid-template-columns: 43% 57%; padding: 0 38px; position: relative; }
.mobile-hero-copy { padding: 18px 0 25px; position: relative; z-index: 2; }
.mobile-breadcrumb { display:flex; align-items:center; gap:5px; font-size:11px; color:#0b1b52; margin:0 0 22px; }
.mobile-breadcrumb a { color:#10285f; }
.mobile-hero-copy h1 { font-size: clamp(34px,3.6vw,48px); line-height:1.08; letter-spacing:-1.8px; margin:0 0 10px; font-weight:850; max-width:500px; }
.mobile-hero-copy h1 span { display:block; color:#0865f9; }
.mobile-hero-lead { font-size:16px; line-height:1.45; max-width:460px; margin:0 0 8px; color:#071b50; }
.mobile-hero-desc { font-size:12.5px; line-height:1.5; max-width:440px; margin:0; color:#203b75; }
.mobile-benefits { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:20px; max-width:440px; }
.mobile-benefits div { display:flex; align-items:center; flex-direction:column; text-align:center; gap:7px; font-size:10px; line-height:1.35; }
.mobile-benefits svg { width:27px;height:27px; color:#08b779; stroke-width:2.8; }
.mobile-benefits div:nth-child(2) svg { color:#762aff; }
.mobile-benefits div:nth-child(3) svg { color:#f01885; }
.mobile-benefits div:nth-child(4) svg { color:#ff8a00; }

.mobile-hero-art { min-height:376px; position:relative; overflow:visible; }
.mobile-orb { position:absolute; border-radius:50%; filter:blur(1px); }
.orb-pink { width:350px;height:330px;left:3%;top:-35px;background:radial-gradient(circle at 35% 40%,#f4a4ff 0,#e4b5ff 40%,#e7f2ff 72%,transparent 73%); }
.orb-blue { width:350px;height:300px;right:8%;top:25px;background:radial-gradient(circle at 60% 40%,#78baff 0,#b7dcff 48%,transparent 72%);opacity:.8; }
.handwritten { position:absolute; top:24px; right:20%; z-index:3; transform:rotate(-9deg); font-family:cursive; font-size:23px; line-height:1.1; color:#132b77; }

.phone { position:absolute; width:94px; height:235px; border:5px solid #101b2b; border-radius:19px; background:#fff; box-shadow:0 12px 20px #132e6540; padding:15px 7px 8px; z-index:2; overflow:hidden; }
.phone-one { left:17%; top:60px; transform:rotate(-5deg); }
.phone-two { left:37%; top:27px; width:110px;height:277px; transform:rotate(3deg); z-index:4; }
.phone-three { left:59%; top:94px; width:95px;height:226px; transform:rotate(6deg); }
.phone-four { left:75%; top:111px; width:87px;height:204px; transform:rotate(-7deg); background:#0b2730;color:white; }
.phone-notch { position:absolute; width:40px;height:9px; top:0;left:50%;transform:translateX(-50%);border-radius:0 0 8px 8px;background:#101b2b; }
.phone-topline { font-size:7px; font-weight:800; margin:3px 0 8px; color:#122354; }
.phone-topline span { float:right;color:#0d6bff; }
.phone-banner { background:linear-gradient(135deg,#0875ff,#4a9cff);color:white;border-radius:7px;padding:9px 6px;height:58px;display:flex;flex-direction:column;gap:5px;font-size:9px; }
.phone-banner small {font-size:6px;}
.phone-tiles { display:grid;grid-template-columns:repeat(2,1fr);gap:5px;margin:9px 0; }
.phone-tiles i {font-style:normal;background:#eaf3ff;color:#0872f9;border-radius:5px;display:grid;place-items:center;height:25px;font-size:12px;}
.phone-lines { height:32px;border-radius:6px;background:repeating-linear-gradient(to bottom,#dfe8f6 0 4px,transparent 4px 10px);margin-top:8px; }
.phone-nav { position:absolute;bottom:7px;left:6px;right:6px;border-top:1px solid #e5eafa;padding-top:7px;text-align:center;color:#0872f9;font-size:9px; }
.phone-avatar { width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#9ed6ff,#e5f6ff);margin:7px auto; }
.phone-map { height:55px;border-radius:7px;background:linear-gradient(135deg,#d9f4ed,#e7f0ff);display:flex;align-items:center;justify-content:center;flex-direction:column;color:#008b74;font-size:6px; }
.phone-map svg {width:16px;height:16px;}
.phone-stat {height:46px;border-radius:8px;background:linear-gradient(135deg,#e8f1ff,#80b8ff);margin:8px 0;}
.green-stat {background:linear-gradient(135deg,#1fbe8c,#a4f0ce);}

.mobile-float-tags { position:absolute;right:0;top:23px;display:flex;flex-direction:column;gap:8px;z-index:5;width:124px; }
.mobile-float-tags span { border-radius:10px;color:#fff;padding:12px 11px;font-size:10px;font-weight:800;box-shadow:0 8px 18px #102b6b18; }
.tag-android {background:#06b96d}
.tag-ios{background:#087bfa}
.tag-flutter{background:#ff9200}
.tag-cross{background:#7626f4}
.tag-custom{background:#f3258c}
.hero-spark { position:absolute; color:#1977ff;letter-spacing:5px;line-height:1.5;font-size:12px;z-index:1; }
.spark-one{left:4%;top:120px}
.spark-two{right:30%;top:5px;color:#e936c8}

/* ============================================================
   CATALOGUE
   ============================================================ */
.mobile-catalogue { width:min(1440px,100%);margin:0 auto;padding:17px 28px 44px; }
.mobile-catalogue-heading { display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px; }
.mobile-catalogue-heading h2 {font-size:21px;letter-spacing:-.7px;line-height:1.2;margin:0 0 5px;font-weight:850;}
.mobile-catalogue-heading p {font-size:11px;color:#49618f;margin:0;}
.mobile-search {height:39px;width:260px;flex-shrink:0;border:1px solid #d5e2f5;border-radius:15px;background:#fff;display:flex;align-items:center;gap:8px;padding:0 12px;color:#42618f;transition:border-color .25s ease, box-shadow .25s ease;}
.mobile-search:focus-within {border-color:#0874ff; box-shadow:0 0 0 4px rgba(8,116,255,.12);}
.mobile-search input {border:0;outline:0;width:100%;font:inherit;font-size:11px;color:#132658;background:transparent;}
.mobile-search button {border:0;background:transparent;color:#49618f;display:flex;cursor:pointer;transition:transform .25s ease, color .25s ease;}
.mobile-search button:hover {transform:rotate(90deg); color:#0874ff;}

/* Card grid — full width, no side panel */
.mobile-card-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;}

/* Reveal wrapper should not break the grid */
.mobile-card-grid > .mobile-reveal { display:block; min-width:0; }
.mobile-card-grid > .mobile-reveal .mobile-service-card { width:100%; height:100%; }

/* Card */
.mobile-service-card { position:relative;min-height:111px;text-align:left;border:1px solid #d9e6fb;border-radius:14px;padding:15px 12px 12px;background:#fff;cursor:pointer;color:#0b1b52;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease; }
.mobile-service-card:hover {transform:translateY(-3px);box-shadow:0 12px 24px #163c7918;border-color:#83b7ff;}
.mobile-card-number {position:absolute;left:10px;top:9px;width:23px;height:23px;border-radius:50%;background:#dcecff;color:#1764e8;display:grid;place-items:center;font-size:11px;font-weight:800;}
.mobile-card-icon {display:block;margin:0 0 8px 24px;color:#0874ff;fill:#0874ff0d;transition:transform .4s cubic-bezier(.34,1.56,.64,1);}
.mobile-service-card:hover .mobile-card-icon {transform:scale(1.12) rotate(-6deg);}
.mobile-service-card h3 {font-size:11.5px;line-height:1.25;margin:0 17px 5px 0;font-weight:850;letter-spacing:-.15px;transition:color .25s ease;}
.mobile-service-card p {font-size:10px;line-height:1.35;margin:0;color:#344b7d;max-width:230px;}
.mobile-card-arrow {position:absolute;right:9px;bottom:9px;width:19px;height:19px;border-radius:50%;background:#0874ff;color:#fff;display:grid;place-items:center;transition:transform .3s ease;}

/* Tones */
.tone-blue {background:linear-gradient(130deg,#f5faff,#eaf4ff);border-color:#cce1ff}
.tone-pink {background:linear-gradient(130deg,#fff7fb,#ffedf5);border-color:#ffdeec}
.tone-green {background:linear-gradient(130deg,#f3fff8,#e7fff1);border-color:#cef6df}
.tone-orange {background:linear-gradient(130deg,#fffaf0,#fff4d9);border-color:#ffe8b9}
.tone-purple {background:linear-gradient(130deg,#fbf7ff,#f3eaff);border-color:#e5d5ff}
.tone-sky {background:linear-gradient(130deg,#f2fbff,#e5f5ff);border-color:#cdeaff}

.mobile-service-card.tone-pink .mobile-card-icon {color:#f20b81}
.mobile-service-card.tone-green .mobile-card-icon {color:#06b65d}
.mobile-service-card.tone-orange .mobile-card-icon {color:#ff8a00}
.mobile-service-card.tone-purple .mobile-card-icon {color:#852aff}
.mobile-service-card.tone-sky .mobile-card-icon {color:#0874ff}

.mobile-service-card.tone-pink .mobile-card-arrow {background:#f20b81}
.mobile-service-card.tone-green .mobile-card-arrow {background:#06b65d}
.mobile-service-card.tone-orange .mobile-card-arrow {background:#ff8a00}
.mobile-service-card.tone-purple .mobile-card-arrow {background:#852aff}
.mobile-service-card.tone-sky .mobile-card-arrow {background:#0874ff}

.mobile-service-card.tone-pink .mobile-card-number {background:#ffe0ef;color:#d90b71}
.mobile-service-card.tone-green .mobile-card-number {background:#d3fbe4;color:#07864c}
.mobile-service-card.tone-orange .mobile-card-number {background:#ffedc3;color:#9a5a00}
.mobile-service-card.tone-purple .mobile-card-number {background:#eadcff;color:#7421e5}

/* Empty state */
.mobile-empty {grid-column:1/-1;min-height:150px;border:1px dashed #cbdaf0;border-radius:15px;display:flex;align-items:center;justify-content:center;gap:8px;flex-direction:column;color:#38517f;text-align:center;padding:24px;}
.mobile-empty svg {color:#0874ff}
.mobile-empty b{color:#0b1b52}
.mobile-empty span{font-size:12px;}

/* ============================================================
   MODAL
   ============================================================ */
.mobile-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(9, 27, 75, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: mobileOverlayIn .25s ease forwards;
}
@keyframes mobileOverlayIn { from { opacity: 0 } to { opacity: 1 } }

.mobile-modal {
  position: relative;
  width: min(880px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: #fff;
  border-radius: 22px;
  border: 1px solid #e0e8f7;
  box-shadow: 0 30px 70px rgba(10, 30, 80, 0.28);
  padding: 26px 26px 22px;
  animation: mobileModalIn .35s cubic-bezier(.22, 1, .36, 1) forwards;
}
@keyframes mobileModalIn {
  from { opacity: 0; transform: translateY(20px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* --- Header --- */
.mobile-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #eef3fc;
  margin-bottom: 20px;
}
.mobile-modal-title-wrap { display: flex; align-items: center; gap: 14px; }

.mobile-modal-number {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  font-size: 13px; font-weight: 800;
  color: #1764e8; background: #dcecff;
  flex-shrink: 0;
}

.mobile-modal-icon {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: 12px;
  background: #0874ff; color: #fff;
  flex-shrink: 0;
  box-shadow: 0 8px 20px rgba(8, 116, 255, .3);
}
.mobile-modal-icon svg { width: 24px; height: 24px; }

.mobile-modal-eyebrow {
  font-size: 10px; letter-spacing: 2px; font-weight: 800;
  color: #6b7aa3; margin: 0 0 4px;
}
.mobile-modal-header h2 {
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.25; letter-spacing: -.5px;
  margin: 0; color: #0b1b4a;
}

.mobile-modal-close {
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 0; border-radius: 10px;
  background: #f3f7ff; color: #21355e;
  cursor: pointer;
  transition: transform .25s ease, background .25s ease, color .25s ease;
}
.mobile-modal-close:hover {
  transform: rotate(90deg);
  background: #e6efff; color: #0874ff;
}

/* Tone-aware header */
.mobile-modal.tone-pink   .mobile-modal-number { background:#ffe0ef; color:#d90b71; }
.mobile-modal.tone-pink   .mobile-modal-icon   { background:#f20b81; box-shadow:0 8px 20px rgba(242,11,129,.3); }
.mobile-modal.tone-green  .mobile-modal-number { background:#d3fbe4; color:#07864c; }
.mobile-modal.tone-green  .mobile-modal-icon   { background:#06b65d; box-shadow:0 8px 20px rgba(6,182,93,.3); }
.mobile-modal.tone-orange .mobile-modal-number { background:#ffedc3; color:#9a5a00; }
.mobile-modal.tone-orange .mobile-modal-icon   { background:#ff8a00; box-shadow:0 8px 20px rgba(255,138,0,.3); }
.mobile-modal.tone-purple .mobile-modal-number { background:#eadcff; color:#7421e5; }
.mobile-modal.tone-purple .mobile-modal-icon   { background:#852aff; box-shadow:0 8px 20px rgba(133,42,255,.3); }
.mobile-modal.tone-sky    .mobile-modal-number { background:#dcefff; color:#0874ff; }
.mobile-modal.tone-sky    .mobile-modal-icon   { background:#0874ff; box-shadow:0 8px 20px rgba(8,116,255,.3); }

/* --- Body --- */
.mobile-modal-body {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 22px;
  align-items: start;
}

.mobile-modal-desc {
  font-size: 13.5px; line-height: 1.7;
  color: #33456b; margin: 0 0 20px;
}

.mobile-modal-meta { display: grid; gap: 12px; }
.mobile-modal-meta-item {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid #e7eefb;
  border-radius: 12px;
  background: #f9fbff;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.mobile-modal-meta-item:hover {
  transform: translateY(-2px);
  border-color: #c8d9ff;
  box-shadow: 0 10px 24px rgba(20, 45, 95, .08);
}
.mobile-modal-meta-item > svg {
  width: 20px; height: 20px;
  color: #0874ff; margin-top: 2px;
}
.mobile-modal-meta-item b {
  display: block; font-size: 12px; color: #172554; margin-bottom: 4px;
}
.mobile-modal-meta-item p {
  margin: 0; font-size: 12.5px; line-height: 1.5; color: #52618b;
}

.mobile-modal-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.mobile-modal-tags span {
  font-size: 10px;
  background: #eef4fd;
  border-radius: 5px;
  padding: 5px 8px;
  color: #294572;
}

/* Right preview mockup reuses .detail-phone / .detail-* styles */
.mobile-modal-visual {
  height: 200px;
  border-radius: 13px;
  background: linear-gradient(135deg, #eef8f4, #f5f8ff);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

/* --- Bottom (features + suitable) --- */
.mobile-modal-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid #eef3fc;
}
.mobile-modal-bottom h3 {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; margin: 0 0 12px; color: #172554;
}
.mobile-modal-bottom h3 svg { width: 16px; height: 16px; color: #0874ff; }

.mobile-modal-checks {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 8px;
}
.mobile-modal-checks li {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; line-height: 1.5; color: #33456b;
  transition: color .2s ease, transform .2s ease;
}
.mobile-modal-checks li:hover {
  color: #0874ff; transform: translateX(3px);
}
.mobile-modal-checks svg {
  width: 14px; height: 14px;
  color: #09a76d;
  flex-shrink: 0;
}

/* --- Footer --- */
.mobile-modal-footer {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid #eef3fc;
  display: flex;
  justify-content: flex-end;
}

.mobile-enquire-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #0867f7;
  color: white !important;
  border-radius: 9px;
  padding: 12px 22px;
  font-size: 12px;
  font-weight: 800;
  position: relative;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.mobile-enquire-button::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at center, rgba(255,255,255,.35), transparent 60%);
  opacity: 0; transform: scale(.6);
  transition: opacity .4s ease, transform .4s ease;
  pointer-events: none;
}
.mobile-enquire-button:hover::after { opacity: 1; transform: scale(1.4); }
.mobile-enquire-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(8, 103, 247, .28);
}
.mobile-enquire-button svg { transition: transform .3s ease; }
.mobile-enquire-button:hover svg { transform: translateX(4px); }

/* ============================================================
   PREVIEW MOCKUP (reused inside modal)
   ============================================================ */
.detail-phone {position:relative;background:white;border:4px solid #101b2b;border-radius:18px;width:105px;height:160px;padding:15px 7px 7px;box-shadow:0 10px 18px #172e5930;overflow:hidden;}
.detail-phone-map {transform:rotate(-5deg);}
.detail-phone-app{transform:rotate(5deg);height:168px;}
.detail-notch {position:absolute;top:0;left:50%;transform:translateX(-50%);width:37px;height:7px;background:#101b2b;border-radius:0 0 6px 6px;}
.detail-map-art {height:82px;background-color:#e2f5ed;background-image:linear-gradient(30deg,transparent 45%,#b5d8d1 46%,#b5d8d1 50%,transparent 51%),linear-gradient(120deg,transparent 40%,#c6e3db 41%,#c6e3db 46%,transparent 47%);display:flex;align-items:center;justify-content:center;flex-direction:column;color:#078d70;font-size:7px;border-radius:6px;}
.detail-mini-list {display:flex;flex-direction:column;gap:6px;margin-top:8px;}
.detail-mini-list i {display:block;height:5px;border-radius:5px;background:#dce8f3;width:85%;}
.detail-mini-list i:nth-child(2){width:68%}
.detail-mini-list i:nth-child(3){width:76%}
.detail-bottom-nav {font-size:8px;text-align:center;color:#0874ff;margin-top:8px;border-top:1px solid #edf0f6;padding-top:5px;}
.detail-app-title {font-size:8px;font-weight:850;margin:3px 0 8px;color:#142958;}
.detail-app-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.detail-app-grid i{font-style:normal;background:#eaf3ff;border-radius:5px;height:25px;display:grid;place-items:center;color:#0874ff;font-size:11px}
.detail-app-button{font-size:7px;color:#fff;background:#0874ff;border-radius:5px;text-align:center;padding:6px;margin-top:8px}
.detail-plant{position:absolute;bottom:-8px;left:2px;color:#0f9a65;font-size:60px;transform:rotate(-20deg);opacity:.45;}

/* ============================================================
   ANIMATIONS
   ============================================================ */
.mobile-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity .65s cubic-bezier(.22, 1, .36, 1),
    transform .65s cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}
.mobile-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Hero entrance */
.mobile-hero-copy h1,
.mobile-hero-copy .mobile-hero-lead,
.mobile-hero-copy .mobile-hero-desc,
.mobile-hero-copy .mobile-benefits {
  opacity: 0;
  transform: translateY(16px);
  animation: mobileHeroFadeUp .9s cubic-bezier(.22, 1, .36, 1) forwards;
}
.mobile-hero-copy h1 { animation-delay: .1s; }
.mobile-hero-copy .mobile-hero-lead { animation-delay: .25s; }
.mobile-hero-copy .mobile-hero-desc { animation-delay: .38s; }
.mobile-hero-copy .mobile-benefits { animation-delay: .52s; }
@keyframes mobileHeroFadeUp { to { opacity: 1; transform: translateY(0); } }

.mobile-hero-art {
  opacity: 0;
  animation: mobileVisualIn 1s cubic-bezier(.22, 1, .36, 1) .25s forwards;
}
@keyframes mobileVisualIn {
  from { opacity: 0; transform: translateX(28px) scale(.98); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

/* Floating chips */
.mobile-float-tags span {
  animation: mobileTagFloat 5s ease-in-out infinite;
}
.tag-android { animation-delay: 0s; }
.tag-ios { animation-delay: .5s; }
.tag-flutter { animation-delay: 1s; }
.tag-cross { animation-delay: 1.5s; }
.tag-custom { animation-delay: 2s; }
@keyframes mobileTagFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.mobile-float-tags span:hover {
  transform: translateY(-6px) scale(1.05);
  transition: transform .25s ease;
}

/* Benefits */
.mobile-benefits > div { transition: transform .25s ease; }
.mobile-benefits > div:hover { transform: translateY(-4px); }
.mobile-benefits svg { transition: transform .3s ease; }
.mobile-benefits > div:hover svg { transform: scale(1.15) rotate(-4deg); }

/* Phones gentle float */
.phone { animation: mobilePhoneFloat 6s ease-in-out infinite; }
.phone-one { animation-delay: 0s; }
.phone-two { animation-delay: .8s; }
.phone-three { animation-delay: 1.6s; }
.phone-four { animation-delay: 2.4s; }
@keyframes mobilePhoneFloat {
  0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
  50%      { transform: translateY(-8px) rotate(var(--rot, 0deg)); }
}

/* Card arrow nudge */
.mobile-service-card:hover .mobile-card-arrow { transform: translateX(3px); }

/* Card heading tone */
.mobile-service-card.tone-blue:hover h3 { color: #0874ff; }
.mobile-service-card.tone-pink:hover h3 { color: #f20b81; }
.mobile-service-card.tone-green:hover h3 { color: #06b65d; }
.mobile-service-card.tone-orange:hover h3 { color: #ff8a00; }
.mobile-service-card.tone-purple:hover h3 { color: #852aff; }
.mobile-service-card.tone-sky:hover h3 { color: #0874ff; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (min-width:1250px) {
  .mobile-card-grid {grid-template-columns:repeat(4,minmax(0,1fr));}
}
@media (max-width:1100px) {
  .mobile-hero-inner{grid-template-columns:45% 55%;padding:0 25px}
  .mobile-hero-copy h1{font-size:38px}
  .mobile-hero-art{transform:scale(.92);transform-origin:top left;width:108%;}
  .mobile-catalogue{padding-left:20px;padding-right:20px}
  .mobile-card-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mobile-float-tags{right:-10px}
}
@media (max-width:800px) {
  .mobile-hero-inner{display:flex;flex-direction:column;padding:0 22px}
  .mobile-hero-copy{padding-bottom:0}
  .mobile-hero-copy h1{font-size:39px}
  .mobile-hero-art{min-height:330px;transform:none;width:100%;margin-top:0}
  .mobile-benefits{max-width:100%}
  .mobile-catalogue-heading{align-items:flex-start;flex-direction:column}
  .mobile-search{width:100%}
  .mobile-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mobile-float-tags{right:0;width:112px}
  .handwritten{right:26%;font-size:20px}

  /* Modal stacks */
  .mobile-modal-overlay { padding: 12px; }
  .mobile-modal {
    padding: 20px 18px 18px;
    border-radius: 18px;
    max-height: calc(100vh - 24px);
  }
  .mobile-modal-body { grid-template-columns: 1fr; gap: 16px; }
  .mobile-modal-right { order: -1; }
  .mobile-modal-visual { height: 170px; }
  .mobile-modal-bottom { grid-template-columns: 1fr; gap: 14px; }
  .mobile-modal-footer { justify-content: stretch; }
  .mobile-modal-footer .mobile-enquire-button { width: 100%; }
}
@media (max-width:480px) {
  .mobile-hero-inner{padding:0 16px}
  .mobile-breadcrumb{font-size:10px;margin-bottom:16px}
  .mobile-hero-copy h1{font-size:34px;letter-spacing:-1.2px}
  .mobile-hero-lead{font-size:15px}
  .mobile-hero-desc{font-size:12px}
  .mobile-benefits{gap:5px}
  .mobile-benefits div{font-size:9px}
  .mobile-hero-art{min-height:300px;margin-left:-6px;width:calc(100% + 12px);transform:scale(.95);transform-origin:top center}
  .phone-one{left:8%}.phone-two{left:29%}.phone-three{left:53%}.phone-four{left:69%}
  .mobile-float-tags{width:98px;right:-4px;top:22px;gap:6px}
  .mobile-float-tags span{font-size:8px;padding:10px 7px}
  .handwritten{right:23%;top:15px;font-size:17px}

  .mobile-catalogue{padding:16px 14px 32px}
  .mobile-catalogue-heading h2{font-size:19px}
  .mobile-card-grid{gap:8px}
  .mobile-service-card{min-height:125px;padding:14px 9px 12px}
  .mobile-service-card h3{font-size:11px}
  .mobile-service-card p{font-size:9.5px}
  .mobile-card-number{left:8px;top:8px;width:21px;height:21px}
  .mobile-card-icon{margin-left:23px;width:27px;height:27px}

  .mobile-modal-header h2 { font-size: 16px; }
  .mobile-modal-icon { width: 40px; height: 40px; }
  .mobile-modal-number { width: 30px; height: 30px; font-size: 12px; }
  .mobile-modal-desc { font-size: 12.5px; }
  .mobile-modal-checks li { font-size: 11.5px; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .mobile-reveal { opacity: 1; transform: none; }
  .mobile-float-tags span,
  .phone,
  .mobile-modal-overlay,
  .mobile-modal { animation: none; }
  .mobile-service-card:hover,
  .mobile-float-tags span:hover,
  .mobile-enquire-button:hover { transform: none; }
}

/* Hide heavy animations on mobile */
@media (max-width: 760px) {
  .phone,
  .mobile-float-tags span { animation: none; }
}

/* Add these rules to src/styles/MobileAppDevelopment.css.
   The source image files are exactly 303 × 279 pixels. */
.mobile-modal-image-wrap {
  width: 303px;
  height: 279px;
  max-width: 100%;
  margin-inline: auto;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: #f4f7ff;
}

.mobile-service-detail-image {
  display: block;
  width: 303px;
  height: 279px;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: 16px;
}

.mobile-service-image-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  box-sizing: border-box;
  text-align: center;
  color: #123064;
  background: linear-gradient(135deg, #eef5ff, #f8efff);
}

.mobile-service-image-fallback b {
  font-size: 1rem;
}

.mobile-service-image-fallback span {
  font-size: 0.85rem;
  color: #64748b;
}

@media (max-width: 600px) {
  .mobile-modal-image-wrap {
    width: 303px;
    height: 279px;
  }

  .mobile-service-detail-image {
    width: 303px;
    height: 279px;
  }
}