/* Scope: .ms-widesh-solution  —  Lalezar (titles), iransans (body) */
/* Full-width, no outer margin, no overflow */
.ms-widesh-solution{
  position:relative; width:100%; margin:0 !important; overflow:hidden; isolation:isolate;
  background: radial-gradient(1200px 600px at 80% -15%, rgba(255,255,255,.12), transparent 60%),
              linear-gradient(135deg, var(--pr-from,#7B3AED) 0%, var(--pr-to,#B235FF) 100%);
  color: var(--t-light,#fff);
}

/* Prism lines */
.mws-prism{ position:absolute; left:0; right:0; height:8px; pointer-events:none; mix-blend-mode:screen; opacity:.9; }
.mws-prism--top{ top:0; background: linear-gradient(90deg, #22D3EE, #FF4FD8, #7B3AED, #22D3EE); filter: blur(8px); }
.mws-prism--bottom{ bottom:0; background: linear-gradient(90deg, #FF4FD8, #22D3EE, #7B3AED, #FF4FD8); filter: blur(8px); }

/* Aurora background layers (CSS-only) */
.mws-aurora{ position:absolute; inset:-30% -10% -30% -10%; pointer-events:none; z-index:0; }
.mws-aurora--one{
  background:
    radial-gradient(60% 60% at 80% 20%, rgba(34,211,238,.25), transparent 60%),
    radial-gradient(50% 50% at 20% 70%, rgba(255,79,216,.25), transparent 60%);
  animation: auroraSlide 14s ease-in-out infinite alternate;
}
.mws-aurora--two{
  background:
    conic-gradient(from 120deg at 70% 20%, rgba(124,244,255,.18), transparent 60%),
    conic-gradient(from -45deg at 25% 80%, rgba(255,79,216,.16), transparent 60%);
  mix-blend-mode: screen;
  animation: auroraSlide2 18s ease-in-out infinite alternate;
}
.mws-aurora--grid{
  inset:0; opacity:.08; mix-blend-mode: screen;
  background:
    repeating-linear-gradient( 90deg, rgba(255,255,255,.14) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(180deg, rgba(255,255,255,.10) 0 1px, transparent 1px 26px);
}
@keyframes auroraSlide{ 0%{ transform: translate3d(0,0,0) } 100%{ transform: translate3d(0,-20px,0) } }
@keyframes auroraSlide2{ 0%{ transform: translate3d(0,0,0) rotate(0deg) } 100%{ transform: translate3d(0,16px,0) rotate(2deg) } }
@media (prefers-reduced-motion: reduce){ .mws-aurora--one, .mws-aurora--two{ animation:none; } }

/* Container */
.mws-container{ position:relative; z-index:1; max-width:1200px; margin-inline:auto; padding:56px 24px; }
@media (max-width:1024px){ .mws-container{ padding:40px 20px; } }

/* Head */
.mws-head{ text-align:center; }
.mws-title{
  font-family:"Lalezar", system-ui; font-weight:400;
  font-size: clamp(26px,3.8vw,40px); line-height:1.25; margin:0 0 8px;
  text-shadow: 0 10px 30px rgba(0,0,0,.28);
}
.mws-subtitle{
  font-family: iransans, Tahoma, sans-serif; color: rgba(255,255,255,.95);
  font-size: clamp(14px,1.5vw,16px); line-height:1.95; margin:0 auto 14px; max-width: 900px;
}

/* CTA pair */
.mws-cta{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:8px; }
.mws-btn{
  --px:18px; --py:12px; display:inline-flex; align-items:center; gap:10px;
  padding:var(--py) var(--px); border-radius:9999px; text-decoration:none; font-weight:800; font-size:15px;
  border:1px solid rgba(255,255,255,.22); color:#0F1027; font-family: iransans, Tahoma, sans-serif;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,.12), 0 16px 36px rgba(0,0,0,.22);
}
.mws-btn--primary{ background: linear-gradient(135deg, var(--c-cyan,#22D3EE), #7CF4FF); border-color:transparent; }
.mws-btn--primary:hover{ transform: translateY(-2px) scale(1.02); }
.mws-btn--ghost{ background: rgba(255,255,255,.16); color:#fff; }
.mws-btn--ghost:hover{ background: rgba(255,255,255,.24); transform: translateY(-2px); }

/* Grid (benefits + optional visual) */
.mws-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap:22px; align-items:start; margin-top:22px; }
@media (max-width:1024px){ .mws-grid{ grid-template-columns: 1fr; } }

/* Benefits: glass cards with gradient border */
.mws-benefits{ list-style:none; margin:0; padding:0; display:grid; gap:14px;
  grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (max-width:640px){ .mws-benefits{ grid-template-columns: 1fr; } }

.mws-card{
  position:relative;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.88));
  border-radius:16px; padding:14px; display:grid; grid-template-columns: 44px 1fr; gap:12px; align-items:flex-start;
  border:1px solid transparent; background-clip: padding-box, border-box;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.88)),
    linear-gradient(135deg, #F0E9FF, #FFFFFF);
  box-shadow: 0 12px 32px rgba(10,8,30,.28);
}
/* پیش‌فرض: دیده شود. با JS ابتدا مخفی می‌شود تا افکت اجرا گردد */
.mws-card{ opacity:1; transform:none; }
.js .ms-widesh-solution .mws-card{ opacity:0; transform:translateY(14px); }

.mws-ic{
  width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  background:#F5F1FF; color:#5C2FF6; border:1px solid #ECE3FF; font-size:18px;
}
.mws-bdy h3{ margin:0 0 4px; font-family: iransans, Tahoma, sans-serif; color: #1B1440; font-weight:900; font-size:15px; }
.mws-bdy p{ margin:0; font-family: iransans, Tahoma, sans-serif; color:#4B4B57; font-size:14px; line-height:1.9; }

/* Optional visual */
.mws-visual{ margin:0; padding:0; }
.mws-mock{ width:100%; height:auto; display:block; object-fit:contain; border-radius:16px; box-shadow: 0 18px 46px rgba(5,4,22,.42); }

/* Journey / timeline band */
.mws-journey{ margin-top:22px; }
.mws-journey__wrap{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center;
  background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.12));
  border:1px solid rgba(255,255,255,.28); border-radius:9999px; padding:10px 14px;
  backdrop-filter: blur(10px);
}
.mws-step{
  display:inline-flex; align-items:center; gap:8px;
  background:#fff; color:#1B1440; border-radius:9999px; padding:8px 12px; font-family: iransans, Tahoma, sans-serif; font-weight:800; font-size:13.5px;
  border:1px solid #EDE5FF; box-shadow: 0 6px 18px rgba(0,0,0,.10);
}
.mws-step i{ color: var(--c-cyan,#22D3EE); }
.mws-arrow{ color:#fff; opacity:.9; }

/* Stats */
.mws-stats{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:16px; }
.mws-stat{
  background:#fff; border-radius:12px; padding:10px 14px; min-width:128px;
  border:1px solid transparent; background-clip: padding-box, border-box;
  background-image: linear-gradient(#FFFFFF, #FFFFFF), linear-gradient(135deg, #F0E9FF, #E5F9FD);
  box-shadow: 0 8px 26px rgba(0,0,0,.16);
}
/* پیش‌فرض: دیده شود. با JS ابتدا مخفی می‌شود تا افکت اجرا گردد */
.mws-stat{ opacity:1; transform:none; }
.js .ms-widesh-solution .mws-stat{ opacity:0; transform:translateY(14px); }

/* Reveal */
.ms-widesh-solution .is-visible{ transform:none !important; opacity:1 !important; transition: all .34s ease-out; }
.mws-stat{
  background:#fff; border-radius:12px; min-width:140px; padding:10px 14px;
  border:1px solid transparent; background-clip: padding-box, border-box;
  background-image: linear-gradient(#FFFFFF, #FFFFFF), linear-gradient(135deg, #F0E9FF, #E5F9FD);
  box-shadow: 0 8px 26px rgba(0,0,0,.16);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; /* چیدمان امن */
  /* پیش‌فرض: دیده شود؛ با JS انیمیت می‌شود */
  opacity:1; transform:none;
}
.js .ms-widesh-solution .mws-stat{ opacity:0; transform:translateY(14px); }

.mws-stat__value{
  font-family: iransans, Tahoma, sans-serif;
  font-weight:900; font-size:16px; color:#5C2FF6; line-height:1.6;
  white-space:nowrap; unicode-bidi:isolate;
}
.mws-stat__label{
  font-family: iransans, Tahoma, sans-serif;
  font-size:12px; color:#57556A; margin-top:2px; line-height:1.5;
  white-space:nowrap; unicode-bidi:isolate;
}

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