/*
 * Service card icons.
 *
 * Each service card's <h5> title is tagged by js/mobile-app-card.js with
 * data-service-icon="<slug>" once the card mounts. The ::before pseudo-
 * element paints the matching icon — kept outside the React virtual DOM so
 * textContent overwrites can't strip it.
 *
 * Icons are inline data-URI SVGs (Lucide-style outlines, dark stroke #111).
 */

h5[data-service-icon]::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 10px;
  vertical-align: -3px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

h5[data-service-icon="mobile-app"]::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='6' y='2' width='12' height='20' rx='2.5' ry='2.5'/><line x1='11' y1='18' x2='13' y2='18'/></svg>");
}

h5[data-service-icon="web-design"]::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='4' width='20' height='14' rx='2'/><line x1='8' y1='22' x2='16' y2='22'/><line x1='12' y1='18' x2='12' y2='22'/></svg>");
}

h5[data-service-icon="marketing"]::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m3 11 18-5v12L3 14v-3z'/><path d='M11.6 16.8a3 3 0 1 1-5.8-1.6'/></svg>");
}

h5[data-service-icon="ecommerce"]::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'/><path d='M3 6h18'/><path d='M16 10a4 4 0 0 1-8 0'/></svg>");
}