/* Scoped to the two marketing service cards, shared by landing and About. */
.service-brand-heading { line-height: 1.45 !important; }
.service-brand { display: inline-flex; align-items: center; gap: .25em; white-space: nowrap; vertical-align: middle; }
.service-brand-icon { display: inline-block; width: 1.12em; height: 1.12em; flex: none; }
.service-telegram-name { display: inline-block; width: 3.8em; height: .95em; }
.service-max-brand { display: inline-block; width: 4.2em; height: auto; vertical-align: middle; margin: -.15em .04em -.1em; }
.service-brand-yandex { color: #f5f0ff; }
.service-brand-yandex .service-brand-icon { filter: drop-shadow(0 0 5px #ff563733); }
.service-maps ul { display: grid; gap: 8px; }
.service-maps-promise { display: block; margin-top: .65em; font-weight: 600; }
.service-maps-result { color: var(--purple); }

/* Decorative numbering, limited to the three marketing cards. */
#platform .services { counter-reset: marketing-service; gap: 26px; }
#platform .services > .service { position: relative; counter-increment: marketing-service; }
#platform .services > .service::before {
  content: counter(marketing-service);
  position: absolute;
  top: -23px;
  left: 25px;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #454545;
  border-radius: 50%;
  background: #171717;
  color: #e0e0e0;
  font: 500 25px/1 Arial, Helvetica, sans-serif;
  pointer-events: none;
}
#platform .services > .service-featured::before {
  border-color: #aa7ce591;
  background: #21162f;
  color: #d6bfff;
  box-shadow: 0 0 14px #9960e521;
}

/* Keep the original phones and labels intact; dissolve only the backdrop edges. */
#platform .platform-art { border: 0; border-radius: 0; background: transparent; overflow: visible; }
#platform .platform-art img {
  width: 108%;
  max-width: none;
  height: auto;
  margin-left: -4%;
  clip-path: inset(0 round 13% / 10%);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 92%, transparent), linear-gradient(to bottom, transparent, #000 6%, #000 96%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 14%, #000 92%, transparent), linear-gradient(to bottom, transparent, #000 6%, #000 96%, transparent);
  mask-composite: intersect;
}
.growth-brand-corrected { position: relative; }
.growth-brand-corrected .growth-brand-letter { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }