/* Scope: .ms-widesh-problem — هم‌تم با قهرمان */
/* 100% عرض، بدون مارجین بیرونی، بدون اورفلو */
.ms-widesh-problem{
  width:100%;
  margin:0 !important;
  overflow:hidden;
  position:relative;
  isolation:isolate;
  background:#fff;
}

/* درز بالایی (همان حسِ برش قهرمان) */
.mwp-seam{ position:relative; height:70px; }
.mwp-seam svg{ width:100%; height:100%; display:block; }

/* پس‌زمینه: گرادیان بنفش قهرمان + نور نرم */
.mwp-bg{ position:absolute; pointer-events:none; z-index:0; }
.mwp-bg--soft{
  inset:0;
  background:
    radial-gradient(900px 420px at 85% -10%, rgba(255,255,255,.15), transparent 60%),
    linear-gradient(135deg, #7B3AED 0%, #B235FF 100%);
  opacity:.08; /* فقط روحِ بنفش؛ متن‌ها روی سفید خواناست */
}
.mwp-bg--ribbon{
  right:-10%; top:-20px; width:60%; height:120px; opacity:.15;
  background: linear-gradient(135deg, #22D3EE, #FF4FD8);
  transform: skewX(-10deg);
  filter: blur(30px);
}

/* ظرف داخلی */
.mwp-container{ position:relative; z-index:1; max-width:1200px; margin-inline:auto; padding:24px 24px 56px; }
@media (max-width:1024px){ .mwp-container{ padding:16px 20px 40px; } }

/* سربرگ */
.mwp-head{ text-align:center; }
.mwp-title{
  font-family:"Lalezar", system-ui; font-weight:400;
  font-size: clamp(26px,3.8vw,40px); line-height:1.25; color:#1B1440; margin:0 0 8px;
  text-shadow: 0 6px 22px rgba(0,0,0,.08);
}
.mwp-subtitle{
  font-family: iransans, Tahoma, sans-serif; color:#4B4B57;
  font-size: clamp(14px,1.5vw,16px); line-height:1.95; margin:0 auto 12px; max-width:900px;
}

/* چیپ‌های چهارگانه (همسان قهرمان) */
.mwp-anchors{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.mwp-anchors li{
  font-family: iransans, Tahoma, sans-serif; font-size:13.5px; color:#0F1027;
  background: linear-gradient(135deg, #22D3EE, #7CF4FF);
  border:1px solid rgba(0,0,0,.04);
  border-radius:9999px; padding:8px 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}

/* گرید کارت‌ها */
.mwp-grid{
  display:grid; gap:18px; margin-top:26px;
  grid-template-columns: repeat(4, minmax(0,1fr));
}
@media (max-width:1100px){ .mwp-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width:560px){ .mwp-grid{ grid-template-columns: 1fr; } }

/* کارت‌ها: گلس روشن + نوار عمودی بنفش (هویت قهرمان) */
.mwp-card{
  position:relative; background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.92));
  border-radius:16px; padding:18px; border:1px solid #ECE3FF;
  box-shadow: 0 12px 36px rgba(27,20,64,.10);
  transform: translateY(14px); opacity:0;
}
.mwp-card::before{
  content:""; position:absolute; inset:0 auto 0 0; width:6px; border-radius:16px 0 0 16px;
  background: linear-gradient(180deg, #7B3AED, #B235FF);
}
.mwp-card:hover{ transform: translateY(-3px); box-shadow: 0 18px 44px rgba(27,20,64,.16); transition:.18s ease; }

/* سر کارت */
.mwp-card__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.mwp-icon{
  width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  background:#F5F1FF; color:#5C2FF6; border:1px solid #ECE3FF; font-size:18px;
}
.mwp-tag{
  font-family: iransans, Tahoma, sans-serif; font-size:12px; color:#1B1440;
  background: linear-gradient(135deg, #E7F8FB, #F8E7FB);
  border:1px solid #EFE2FF; border-radius:9999px; padding:6px 10px;
}

/* متن کارت */
.mwp-card__title{ font-family: iransans, Tahoma, sans-serif; font-weight:900; font-size:16px; color:#1B1440; margin:6px 0; }
.mwp-lead{ font-family: iransans, Tahoma, sans-serif; color:#3F3D56; font-weight:700; margin:0 0 6px; }
.mwp-explain{ font-family: iransans, Tahoma, sans-serif; color:#57556A; line-height:1.95; font-size:14px; margin:0 0 10px; }

/* زیرعنوان‌های جزئی و لیست‌ها */
.mwp-subtitle-mini{
  font-family: iransans, Tahoma, sans-serif; font-size:12px; font-weight:800; color:#1B1440; margin-top:8px; margin-bottom:4px;
}
.mwp-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px; }
.mwp-list li{ display:flex; align-items:flex-start; gap:8px; color:#4B4B57; font-family: iransans, Tahoma, sans-serif; font-size:13.5px; }
.mwp-list i.fa-check{ color:#22D3EE; margin-top:4px; }
.mwp-list--signals i{ color:#FF4FD8; }

/* CTA پایانی (دقیقاً همان حس قهرمان) */
.mwp-cta{ display:flex; justify-content:center; margin-top:30px; }
.mwp-btn{
  display:inline-flex; align-items:center; gap:10px; padding:12px 18px; border-radius:9999px;
  background: linear-gradient(135deg, #22D3EE, #7CF4FF); color:#0F1027; font-weight:900;
  border:1px solid rgba(0,0,0,.04); text-decoration:none; font-family: iransans, Tahoma, sans-serif;
  box-shadow: 0 8px 26px rgba(0,0,0,.18);
}
.mwp-btn:hover{ transform: translateY(-2px) scale(1.02); transition:.16s ease; }

/* انیمیشن ورود */
.ms-widesh-problem .is-visible{ transform:none !important; opacity:1 !important; transition: all .34s ease-out; }