/* ===============================
   WIDESH — Our Story (SCOPED: .ms-story)
   نسخه با پس‌زمینه‌ی road.png در هدر
   =============================== */

.ms-story, .ms-story * { box-sizing: border-box; }
.ms-story{
  --ink:#1b2034;
  --muted:#5f6b8a;
  --brand:#5b6cff;
  --brand2:#ff7ab6;
  position:relative; width:100%;
  padding: clamp(28px,4vw,48px) 0 clamp(48px,7vw,72px);
  background:#fff; isolation:isolate;
  font-family: IRANSans, Tahoma, Arial, sans-serif;
}

/* Container */
.ms-story__container{ max-width: 1080px; margin-inline:auto; padding: 0 clamp(16px,3vw,24px); }

/* پس‌زمینه‌ی نرم کلی (بالا سفید → پایین رنگ‌ها) */
.ms-story__bg{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(180deg, #ffffff 0%, #ffffff 30%, #fbfcff 45%, #f7f8ff 60%, #ffffff 100%),
    radial-gradient(900px 420px at 70% 78%, rgba(91,108,255,.14), transparent 60%),
    radial-gradient(820px 380px at 25% 92%, rgba(255,122,182,.12), transparent 60%);
}

/* ===== Header with image background (road.png @ 35%) ===== */
.ms-story__head{
  position:relative; z-index:1; text-align:center; margin-bottom: 10px;
  padding: clamp(20px,4vw,28px) clamp(16px,4vw,28px) clamp(64px,8vw,92px);
  overflow:hidden; border-radius: 18px;
  background: #fff;
  border: 1px solid #edf0ff;
  box-shadow: 0 14px 34px rgba(27,32,64,.06);
}

/* تصویر پس‌زمینه با شفافیت بدون تأثیر روی متن */
.ms-story__head::before{
  content:"";
  position:absolute; inset: clamp(8px,2vw,14px);
  background-image: attr(data-road-bg url);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;        /* تصویر کامل داخل باکس دیده شود */
  opacity: .35;                    /* ≈ 35% که خواستی */
  z-index:0; pointer-events:none;
  filter: saturate(1.02) drop-shadow(0 10px 24px rgba(27,32,64,.06));
}

/* متن روی تصویر */
.ms-story__eyebrow{
  position:relative; z-index:1;
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px; border-radius:9999px;
  background: rgba(91,108,255,.10);
  color:#394064; font-weight:800; font-size:.95rem;
}
.ms-story__title{
  position:relative; z-index:1;
  margin:10px 0 8px; color:var(--ink);
  font-family:'Lalezar', system-ui;
  font-size: clamp(28px, 4.6vw, 54px);
  line-height:1.15;
}
.ms-story__subtitle{
  position:relative; z-index:1;
  margin:0; color:var(--muted);
  font-size: clamp(14px, 1.15vw, 17px);
}

/* Content block */
.ms-story__content{
  position:relative; z-index:1;
  margin: 16px auto 10px;
  padding: clamp(18px,2.6vw,24px) clamp(16px,2vw,22px);
  border-radius: 22px;
  background: linear-gradient(180deg, #fff, #fbfbff);
  border: 1px solid #edf0ff;
  box-shadow: 0 14px 38px rgba(27,32,64,.08);
}
.ms-story__quote{
  position:absolute; font-family:'Lalezar', system-ui;
  color: rgba(91,108,255,.20); font-size: clamp(46px,6vw,88px); line-height:1;
}
.ms-story__quote--open{ inset-block-start: -8px; inset-inline-start: 12px; }
.ms-story__quote--close{ inset-block-end: -16px; inset-inline-end: 12px; }

.ms-story__prose{
  color:#2a2f45; line-height:2; font-size: clamp(14px,1.15vw,16px);
}
.ms-story__prose p{ margin:0 0 12px; }
.ms-story__prose strong{ color:#111833 }

/* Milestones */
.ms-story__milestones{
  position:relative; z-index:1;
  display:grid; grid-template-columns: 1fr; gap: 10px;
  margin: 14px 0 4px; padding:0; list-style:none;
}
@media (min-width:780px){
  .ms-story__milestones{ grid-template-columns: repeat(3, minmax(0,1fr)); gap:16px; }
}
.ms-story__milestones li{
  background:#fff; border:1px solid #edf0ff; border-radius:16px;
  padding:12px 14px; text-align:center;
  box-shadow:0 10px 24px rgba(27,32,64,.06);
}
.ms-story__chip{
  display:inline-flex; align-items:center; justify-content:center;
  height:30px; padding:0 12px; border-radius:9999px; margin-bottom:6px;
  background:linear-gradient(135deg, #e9edff, #fff);
  color:#272f55; font-weight:900; font-size:.95rem;
  border:1px solid #dfe5ff;
}
.ms-story__milestones p{ margin:0; color:#4a5275; font-size:.95rem; }

/* CTA */
.ms-story__cta{ text-align:center; margin-top:14px; }
.ms-story__btn{
  display:inline-flex; align-items:center; gap:10px;
  height:44px; padding:0 18px; border-radius:14px;
  color:#fff; text-decoration:none; font-weight:800;
  background:linear-gradient(135deg, var(--brand), var(--brand2));
  box-shadow:0 12px 28px rgba(91,108,255,.28);
  transition: transform .15s ease, filter .2s ease, box-shadow .2s ease;
}
.ms-story__btn i{ order:2; }
.ms-story__btn:hover{ transform:translateY(-2px); filter:brightness(1.03); box-shadow:0 16px 36px rgba(91,108,255,.34); }

/* ریسپانسیو */
@media (max-width:720px){
  .ms-story__head{
    padding: clamp(16px,4vw,22px) clamp(14px,4vw,24px) clamp(56px,10vw,80px);
  }
  .ms-story__head::before{
    inset: clamp(6px,2.5vw,10px);
    background-size: contain;
  }
}
/* هدر؛ تصویر پس‌زمینه از طریق متغیر --ms-road تزریق می‌شود */
.ms-story__head{
  position: relative;
  z-index: 1;
  text-align: center;
  margin-bottom: 10px;
  padding: clamp(20px,4vw,28px) clamp(16px,4vw,28px) clamp(64px,8vw,92px);
  overflow: hidden;
  border-radius: 18px;
  background: #fff;
  border: 1px solid #edf0ff;
  box-shadow: 0 14px 34px rgba(27,32,64,.06);
}

/* تصویر road.png با شفافیت ~35% */
/* تصویر پس‌زمینهٔ هدر: تمام‌صفحه داخل هدر */
/* تصویر پس‌زمینهٔ هدر: تمام‌صفحه داخل هدر */
.ms-story__head::before{
  content:"";
  position:absolute;
  inset: 0;                     /* کل باکس هدر را بپوشاند */
  background-image: var(--ms-road);
  background-repeat: no-repeat;
  background-position: center;
  opacity: .15;                 /* شفافیت 35٪ */
  z-index:0;
  pointer-events:none;
  border-radius: inherit;       /* هم‌ردیف با گردی خود هدر */
  filter: saturate(1.02) drop-shadow(0 10px 24px rgba(27,32,64,.06));
}



/* ظرف آیکون‌ها که زیر متن باشد */
.ms-story__road-icons{
  position: absolute;
  inset-inline: clamp(18px, 4vw, 36px);
  top: 0;
  height: 100%;
  z-index: 0;                      /* پشت عنوان/ساب‌تیتر */
  pointer-events: none;
}

/* آیکون‌های رنگی با حرکت نرم */
.ms-story__road-icons i{
  position: absolute;
  left: var(--x);                  /* درصد از چپ/راست (LTR/RTL فرقی ندارد) */
  top:  var(--y);                  /* درصدِ ارتفاع ظرف */
  transform: translate(-50%,-50%);
  font-size: clamp(22px, 3.4vw, 34px);
  color: var(--c, #5b6cff);
  opacity: .55;                    /* کم‌رنگ‌تر تا مزاحم متن نشود */
  text-shadow: 0 10px 24px rgba(17,24,39,.12);
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.10));
  animation: ms-road-bob 4.8s ease-in-out infinite;
}
.ms-story__road-icons i:nth-child(2){ animation-delay: .4s }
.ms-story__road-icons i:nth-child(3){ animation-delay: .8s }
.ms-story__road-icons i:nth-child(4){ animation-delay: 1.2s }
.ms-story__road-icons i:nth-child(5){ animation-delay: 1.6s }
.ms-story__road-icons i:nth-child(6){ animation-delay: 2.0s }

@keyframes ms-road-bob{
  0%,100%{ transform: translate(-50%,-50%) translateY(0) }
  50%    { transform: translate(-50%,-50%) translateY(-6px) }
}

/* موبایل: جمع‌وجورتر */
@media (max-width:720px){
  .ms-story__head{ padding: clamp(16px,4vw,22px) clamp(14px,4vw,24px) clamp(56px,10vw,80px); }
  .ms-story__head::before{ inset: clamp(6px,2.5vw,10px); }
  .ms-story__road-icons{ inset-inline: clamp(12px,4vw,24px); }
}