/* Masar Al Marifah — published partner/client logo showcase.
   Independent stylesheet; no changes to existing reviews, SEO, or admin. */
.masar-ecosystem {
  --ecosystem-accent: #5ee5df;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  scroll-margin-top: 105px;
  color: #f4fbff;
  background:
    radial-gradient(ellipse at 14% 0%, rgba(13, 176, 189, .18), transparent 42%),
    radial-gradient(ellipse at 88% 90%, rgba(43, 94, 202, .16), transparent 42%),
    linear-gradient(125deg, #061627, #0b2438 55%, #071a2c);
  padding: clamp(64px, 8vw, 108px) 0;
}
.masar-ecosystem--clients {
  background:
    radial-gradient(ellipse at 80% 15%, rgba(13, 176, 189, .16), transparent 45%),
    radial-gradient(ellipse at 10% 90%, rgba(36, 115, 175, .17), transparent 45%),
    linear-gradient(125deg, #081a2d, #092d39 60%, #071827);
}
.masar-ecosystem *,.masar-ecosystem-stats * { box-sizing: border-box; }
.masar-ecosystem__mesh {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .75;
  background-image:
    linear-gradient(rgba(94,229,223,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(94,229,223,.055) 1px,transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent);
}
.masar-ecosystem__inner { width: min(1240px, calc(100% - 32px)); margin-inline: auto; }
.masar-ecosystem__heading { max-width: 800px; margin: 0 auto 40px; text-align: center; }
.masar-ecosystem__eyebrow {
  display: inline-block;
  font-size: .77rem;
  font-weight: 800;
  letter-spacing: .1em;
  color: #72eee8;
  border: 1px solid rgba(94,229,223,.28);
  border-radius: 999px;
  padding: 7px 17px;
  background: rgba(94,229,223,.06);
}
.masar-ecosystem__heading h2 {
  color: #fff;
  font-size: clamp(1.85rem, 4vw, 3.35rem);
  line-height: 1.35;
  margin: 18px 0 12px;
  font-weight: 850;
}
.masar-ecosystem__heading p {
  color: #bbd5df;
  line-height: 1.9;
  font-size: clamp(.94rem, 1.5vw, 1.08rem);
  margin: 0;
}
.masar-ecosystem__viewport {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 12px 0 22px;
  direction: ltr;
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.masar-ecosystem__track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 18px;
}
.masar-ecosystem__repeat { display: flex; align-items: center; gap: 18px; }
.masar-ecosystem__logo {
  width: clamp(172px, 19vw, 235px);
  height: clamp(94px, 11vw, 124px);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 19px 22px;
  border-radius: 19px;
  border: 1px solid rgba(255,255,255,.58);
  background: #fff;
  box-shadow: 0 14px 40px rgba(0,0,0,.2);
  transition: transform .25s ease, box-shadow .25s ease;
}
.masar-ecosystem__logo:hover { transform: translateY(-5px); box-shadow: 0 19px 45px rgba(0,0,0,.3); }
.masar-ecosystem__logo img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.masar-ecosystem__viewport--moving .masar-ecosystem__track {
  animation: masar-ecosystem-marquee 35s linear infinite;
}
.masar-ecosystem__viewport--moving:hover .masar-ecosystem__track,
.masar-ecosystem__viewport--moving:focus-within .masar-ecosystem__track {
  animation-play-state: paused;
}
.masar-ecosystem__viewport--single .masar-ecosystem__track { margin-inline: auto; }
@keyframes masar-ecosystem-marquee { to { transform: translateX(calc(-50% - 9px)); } }
.masar-ecosystem-stats {
  color: #fff;
  background: linear-gradient(90deg,#062438,#0a3a46,#062438);
  border-block: 1px solid rgba(94,229,223,.2);
  padding: 28px 16px;
}
.masar-ecosystem-stats__inner {
  width: min(900px, 100%);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(22px, 8vw, 110px);
}
.masar-ecosystem-stats__item { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.masar-ecosystem-stats__item strong {
  color: #7df3e9;
  font-size: clamp(2.2rem, 5vw, 4rem);
  line-height: 1.15;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}
.masar-ecosystem-stats__item > span { color: #e1f4f5; font-size: clamp(.87rem, 1.7vw, 1.1rem); font-weight: 700; }
.masar-ecosystem-stats__divider { width: 1px; height: 64px; background: linear-gradient(transparent,#7df3e9,transparent); }
@media (max-width: 640px) {
  .masar-ecosystem { padding: 56px 0; }
  .masar-ecosystem__heading { margin-bottom: 25px; }
  .masar-ecosystem__viewport { mask-image: linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); }
  .masar-ecosystem__track,.masar-ecosystem__repeat { gap: 12px; }
  .masar-ecosystem__logo { width: 170px; height: 96px; padding: 16px; border-radius: 14px; }
  .masar-ecosystem__viewport--moving .masar-ecosystem__track { animation-duration: 25s; }
}
@media (prefers-reduced-motion: reduce) {
  .masar-ecosystem__viewport--moving .masar-ecosystem__track { animation: none !important; }
  .masar-ecosystem__viewport--moving { overflow-x: auto; mask-image: none; }
  .masar-ecosystem__repeat { display: none; }
  .masar-ecosystem__logo { transition: none; }
}