/* ===== Local fonts ===== */
@font-face{
  font-family:'IRANSans';
  src:url('../storage/fonts/IRANSans.woff2') format('woff2'),
      url('../storage/fonts/IRANSans.woff') format('woff');
  font-display:swap;
}
@font-face{
  font-family:'Vazir';
  src:url('../storage/fonts/Vazir.woff2') format('woff2'),
      url('../storage/fonts/Vazir.woff') format('woff');
  font-display:swap;
}

.ms-proteam, .ms-proteam *{ box-sizing:border-box; }
.ms-proteam{
  /* پس‌زمینه کمی تیره‌تر (قابل شخصی‌سازی) */
  --bg:#f1f3f8;  /* اگر خواستی تیره‌تر: #eceff6 یا #e9edf6 */
  font-family:'IRANSans','Vazir',Tahoma,Arial,sans-serif;
  color:#161a2d;
  background: var(--bg);
  padding: clamp(48px,6vw,84px) clamp(16px,4vw,24px);
  position: relative;
}

.ms-proteam__inner{
  max-width: 1280px; margin: 0 auto;
  display:grid; gap: clamp(24px,4vw,56px);
  grid-template-columns: 1.05fr 1.1fr; /* چپ تصویر - راست متن */
  align-items: center;
}

/* ——— Left (visual) ——— */
.ms-proteam__visual{
  position: relative;
  min-height: 420px;
  display:flex; align-items:center; justify-content:center;
}

/* حلقه‌ها: سه دایره هم‌مرکز بزرگ */
.ms-proteam__ring-wrap{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.ms-proteam__ring{ overflow:visible; }
.ms-proteam__ring .ring circle{
  fill:none;
  stroke:#a79cff;
  stroke-width:2.5;
  stroke-dasharray:7 11; /* خط‌چین نرم */
  opacity:.55;
  transform-origin: 260px 260px; /* مرکز SVG بزرگ */
}
.ms-proteam__ring .ring--mid circle{ stroke:#79d7cf; opacity:.6; }
.ms-proteam__ring .ring--inner circle{ stroke:#c9c6ff; opacity:.5; }

/* کارت لایه‌ای — تصاویر با اندازهٔ واقعی خودشان */
.ms-proteam__card{
  position:relative;
  display:inline-block;  /* ظرف به اندازهٔ تصویر سفید */
  max-width: 100%;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.12));
}
.ms-proteam__img{
  display:block;
  width:auto; height:auto;         /* اندازهٔ واقعی */
  max-width:100%; max-height:100%; /* فقط scale-down در صورتی که ظرف کوچک‌تر باشد */
}
.ms-proteam__img--white{ position:relative; z-index:1; }
.ms-proteam__img--purple{
  position:absolute; inset:0 auto auto 0; z-index:2;
  /* روی ظرف سفید می‌نشیند، عرض برابر ظرف → هیچ upscale چون ظرف از تصویر سفید می‌آید */
  width:auto; height:auto;
  animation: mspt-float 6.5s ease-in-out infinite;
}
@keyframes mspt-float{
  0%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
  100%{ transform: translateY(0); }
}

/* ——— Right (content) ——— */
.ms-proteam__content{ padding-inline: clamp(0px, 2vw, 16px); }

.ms-proteam__kicker{
  display:inline-flex; gap:10px; align-items:center;
  color:#6b7cff; font-weight:800; font-size:.95rem; margin-bottom:10px;
}
.ms-proteam__kicker::before{ content:"•"; color:#b6baf3; font-size:1.1em; margin-inline-start:.25em; }

.ms-proteam__title{
  font-weight:900;
  font-size: clamp(22px,3.4vw,36px);
  line-height:1.25;
  margin: 0 0 10px;
}
.ms-proteam__desc{
  color:#5a6178; font-size:clamp(14px,1.1vw,16px); margin: 0 0 24px; max-width: 60ch;
}

.ms-proteam__list{ display:flex; flex-direction:column; gap:18px; }
.ms-proteam__item{ display:flex; align-items:flex-start; gap:14px; }
.ms-proteam__icon{
  flex:0 0 42px; width:42px; height:42px; border-radius:12px;
  display:grid; place-items:center; font-size:18px; color:#5f30ff; background:#f0edff;
}
.ms-proteam__item-title{ margin:0 0 6px; font-size:18px; font-weight:800; }
.ms-proteam__item-text{ margin:0; color:#4a5066; font-size:14px; line-height:1.9; }

/* ——— Responsive ——— */
@media (max-width: 1100px){
  .ms-proteam__ring{ transform: scale(.85); } /* حلقه کمی کوچک‌تر در عرض‌های کمتر */
}
@media (max-width: 1024px){
  .ms-proteam__inner{ grid-template-columns:1fr; }
  .ms-proteam__content{ text-align:center; }
  .ms-proteam__desc{ margin-left:auto; margin-right:auto; }
  .ms-proteam__list{ align-items:center; }
  .ms-proteam__ring{ transform: scale(.8); }
}
@media (prefers-color-scheme: dark){
  .ms-proteam{ color:#e6e7eb; --bg:#0f1115; }
  .ms-proteam__desc{ color:#c3c8db; }
  .ms-proteam__icon{ background:#1d1c2b; color:#b7a7ff; }
  .ms-proteam__ring .ring circle{ stroke:#b7a7ff; opacity:.5; }
  .ms-proteam__ring .ring--mid circle{ stroke:#6edbd0; opacity:.55; }
}
.ms-proteam{
  overflow:hidden;   /* همه‌ی بخش رو محدود می‌کنه */
  max-width:100%;    /* اجازه بیرون زدن از viewport نمیده */
}