/* /app.css */
/* ============================================================
   میروریتی — MIRORITY
   طراحی راست‌به‌چپ، مینیمال، کودک‌محور و آرام.
   رنگ‌ها مستقیماً از لوگو استخراج شده‌اند:
     سبز اصلی #00A820 · سبز تیره #188834 · خاکستری #808080
   ============================================================ */

/* ---------- فونت وزیرمتن (Vazirmatn v33.003) ----------
   فایل‌های woff2 در web/public/assets/fonts/ هستند و همراه پروژه ارسال می‌شوند.
   عمداً از local() استفاده نشده تا سایت روی همهٔ دستگاه‌ها دقیقاً یک‌شکل دیده شود
   و به نسخهٔ نصب‌شدهٔ احتمالی روی سیستم کاربر وابسته نباشد.
   هیچ CDN بیرونی در زمان اجرا فراخوانی نمی‌شود. */
@font-face{font-family:Vazirmatn;font-weight:400;font-display:swap;font-style:normal;
  src:url('/assets/fonts/Vazirmatn-Regular.woff2') format('woff2')}
@font-face{font-family:Vazirmatn;font-weight:500;font-display:swap;font-style:normal;
  src:url('/assets/fonts/Vazirmatn-Medium.woff2') format('woff2')}
@font-face{font-family:Vazirmatn;font-weight:600;font-display:swap;font-style:normal;
  src:url('/assets/fonts/Vazirmatn-SemiBold.woff2') format('woff2')}
@font-face{font-family:Vazirmatn;font-weight:700;font-display:swap;font-style:normal;
  src:url('/assets/fonts/Vazirmatn-Bold.woff2') format('woff2')}
@font-face{font-family:Vazirmatn;font-weight:800;font-display:swap;font-style:normal;
  src:url('/assets/fonts/Vazirmatn-ExtraBold.woff2') format('woff2')}

:root{
  --green:#00A820; --green-d:#188834; --green-l:#E8F7EC; --green-l2:#F4FBF6;
  --gray:#808080; --gray-2:#8E8E8E; --gray-3:#999999;
  --ink:#1E2622; --ink-2:#45514C; --ink-3:#66726D;
  --bg:#FBFCFB; --card:#FFFFFF; --line:#E7ECE8;
  --warm:#FFB020; --warm-l:#FFF6E4; --sky:#2E9BD1; --sky-l:#E7F4FB;
  --bad:#D64545; --bad-l:#FCECEC;
  --r-s:10px; --r:16px; --r-l:24px; --r-xl:32px;
  --sh-1:0 1px 2px rgba(30,38,34,.05), 0 2px 8px rgba(30,38,34,.04);
  --sh-2:0 4px 12px rgba(30,38,34,.07), 0 12px 32px rgba(30,38,34,.06);
  --sh-3:0 12px 40px rgba(0,168,32,.12);
  --wrap:1180px;
  --fs:15.5px;
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
button,input,select,textarea,optgroup{font-family:inherit}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:'Vazirmatn',Arial,sans-serif;
  font-size:var(--fs);line-height:1.85;font-weight:400;
  direction:rtl;text-align:right;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{line-height:1.45;margin:0 0 .5em}
h1,h2{font-weight:700}   /* عنوان‌های اصلی و بزرگ */
h3,h4{font-weight:600}   /* زیرعنوان بخش‌ها و عنوان کارت‌ها */
h1{font-size:clamp(1.7rem,3.6vw,2.5rem)}
h2{font-size:clamp(1.35rem,2.6vw,1.85rem)}
h3{font-size:1.15rem}
p{margin:0 0 1em}
a{color:var(--green-d);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}
hr{border:0;border-top:1px solid var(--line);margin:1.5rem 0}
:focus-visible{outline:3px solid var(--green);outline-offset:2px;border-radius:6px}
::selection{background:var(--green-l);color:var(--green-d)}

/* ---------- کاهش حرکت برای کاربران حساس ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ---------- چیدمان ---------- */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
.wrap-narrow{max-width:760px;margin-inline:auto;padding-inline:20px}
.pad{padding:22px}
.pad-xl{padding:56px 20px}
.section{padding:clamp(40px,6vw,76px) 0}
.center{text-align:center}
.row{display:flex;align-items:center;flex-wrap:wrap}
.row.gap{gap:10px}
.row.end{justify-content:flex-end}
.row.between{justify-content:space-between}
.col{display:flex;flex-direction:column}
.grid{display:grid;gap:20px}
.g-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g-3{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.g-4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.mt{margin-top:14px}.mt-l{margin-top:28px}.mb{margin-bottom:14px}
.muted{color:var(--ink-3)}
.small{font-size:.86rem}
.tiny{font-size:.78rem}
.strong{font-weight:700}
.nowrap{white-space:nowrap}
.hide{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;right:-999px;top:8px;z-index:100;background:#fff;padding:10px 16px;border-radius:10px;box-shadow:var(--sh-2)}
.skip:focus{right:8px}

/* ---------- کارت ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--sh-1)}
.card-soft{background:var(--green-l2);border:1px solid #DFF0E4;border-radius:var(--r-l)}

/* ---------- دکمه‌ها ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:inherit;font-size:.97rem;font-weight:500;line-height:1.3;
  padding:13px 22px;border-radius:999px;border:1.5px solid transparent;cursor:pointer;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease,color .16s ease;
  min-height:46px;text-decoration:none!important;
}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.55;cursor:not-allowed}
/* پس‌زمینهٔ سبز تیره — نسبت کنتراست متن سفید از ۳٫۰ به ۴٫۹ می‌رسد */
.btn-primary{background:var(--green-d);color:#fff;box-shadow:0 6px 18px rgba(24,136,52,.22)}
.btn-primary:hover{background:#12692A;box-shadow:0 10px 26px rgba(24,136,52,.3)}
.btn-ghost{background:#fff;color:var(--ink-2);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--green);color:var(--green-d)}
.btn-soft{background:var(--green-l);color:var(--green-d)}
.btn-soft:hover{background:#DCF1E2}
.btn-warm{background:var(--warm);color:#5A3B00}
.btn-danger{background:var(--bad-l);color:var(--bad);border-color:#F4D3D3}
.btn-sm{padding:8px 14px;min-height:36px;font-size:.85rem}
.btn-lg{padding:16px 30px;min-height:54px;font-size:1.05rem}
.btn-block{width:100%}
.icon-btn{background:transparent;border:0;font-size:1.1rem;cursor:pointer;color:var(--ink-2);
  width:38px;height:38px;border-radius:50%;display:inline-grid;place-items:center}
.icon-btn:hover{background:var(--green-l);color:var(--green-d)}

/* ---------- برچسب‌ها ---------- */
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;line-height:1.35;
  font-size:.78rem;font-weight:500;background:var(--green-l);color:var(--green-d);white-space:nowrap}
.chip-gray{background:#F1F3F2;color:var(--ink-2)}
.chip-warn{background:var(--warm-l);color:#8A5A00}
.chip-bad{background:var(--bad-l);color:var(--bad)}
.chip-sky{background:var(--sky-l);color:#1E6E9B}
.chip-dark{background:rgba(30,38,34,.72);color:#fff;backdrop-filter:blur(4px)}
.badge-demo{background:var(--warm-l);color:#8A5A00;border:1px dashed #E8C889}

/* ---------- سربرگ ---------- */
.site-head{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line)}
.head-in{display:flex;align-items:center;gap:16px;height:70px}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.brand img{height:38px;width:auto}
.nav{display:flex;gap:4px;margin-inline-start:auto;align-items:center}
.nav a{padding:9px 14px;border-radius:999px;color:var(--ink-2);font-size:.93rem;font-weight:500}
.nav a:hover{background:var(--green-l);color:var(--green-d);text-decoration:none}
.nav a[aria-current="page"]{background:var(--green-l);color:var(--green-d)}
.burger{display:none}
@media (max-width:900px){
  .nav{position:fixed;inset:70px 0 auto 0;background:#fff;flex-direction:column;align-items:stretch;
    padding:10px 16px 18px;border-bottom:1px solid var(--line);box-shadow:var(--sh-2);gap:2px}
  .nav[hidden]{display:none}
  .nav a{padding:13px 14px}
  .burger{display:inline-grid;margin-inline-start:auto}
}

/* ---------- بخش آغازین ---------- */
.hero{position:relative;overflow:hidden;background:
  radial-gradient(1100px 460px at 88% -12%, #E8F7EC 0%, rgba(232,247,236,0) 62%),
  radial-gradient(760px 420px at 6% 8%, #FFF6E4 0%, rgba(255,246,228,0) 60%), var(--bg)}
.hero-grid{display:grid;grid-template-columns:1fr 1.08fr;gap:44px;align-items:center;
  padding:clamp(34px,5vw,68px) 0 clamp(30px,4vw,54px)}
@media (max-width:940px){.hero-grid{grid-template-columns:1fr;gap:28px}}
.hero h1{margin-bottom:.35em;font-weight:800;line-height:1.35}
.slogan{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid #DFF0E4;
  color:var(--green-d);padding:8px 16px;border-radius:999px;font-weight:500;font-size:.92rem;box-shadow:var(--sh-1)}
.hero-lead{font-size:1.06rem;color:var(--ink-2);max-width:44ch}

/* ---------- نشانهٔ برند بالای تیتر (فقط همین بخش) ----------
   سطر اول: نشان M کنار «میروریتی» · سطر دوم: «آیینه خیریه‌ها» با بازتاب آینه‌ای ملایم.
   بازتاب با position:absolute ساخته شده تا هیچ فضای عمودی اضافه نکند و
   چیدمان بقیهٔ بخش آغازین دقیقاً همان‌طور که بود بماند. */
.brand-lockup{
  display:inline-grid;
  grid-template-columns:auto auto;
  column-gap:15px;
  row-gap:5px;
  align-items:center;
  justify-items:start;
}
.bl-mark{
  grid-column:1;grid-row:1;
  height:52px;width:auto;align-self:center;
}
.bl-name{
  grid-column:2;grid-row:1;
  color:var(--green-d);
  font-size:2.05rem;
  font-weight:800;
  line-height:1.15;
  /* «کشیدگی» بصری بدون letter-spacing — در خط فارسی فاصلهٔ حروف اتصال را می‌شکند */
  display:inline-block;
  transform:scaleX(1.12);
  transform-origin:right center;
}
.bl-mirror{
  grid-column:2;grid-row:2;
  position:relative;
  display:block;
  line-height:1.3;
}
.bl-sub{
  display:block;
  color:var(--green-d);
  font-size:1.04rem;
  font-weight:500;
  opacity:.9;
  white-space:nowrap;
}
.bl-sub-ref{
  position:absolute;
  /* کمی بالاتر از انتهای سطر تا بازتاب از روی خط کرسی شروع شود، نه با فاصله */
  top:calc(100% - 6px);
  inset-inline-start:0;
  white-space:nowrap;
  color:var(--green-d);
  font-size:1.04rem;
  font-weight:500;
  transform:scaleY(-1);
  opacity:.24;
  filter:blur(1px);
  -webkit-mask-image:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.25) 55%,transparent 92%);
  mask-image:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.25) 55%,transparent 92%);
  pointer-events:none;
  user-select:none;-webkit-user-select:none;
}
@media (max-width:600px){
  .bl-mark{height:42px}
  .bl-name{font-size:1.62rem}
  .bl-sub,.bl-sub-ref{font-size:.92rem}
}

/* قاب ویدیو */
.video-frame{position:relative;border-radius:var(--r-xl);overflow:hidden;background:#0D1512;
  box-shadow:var(--sh-3);border:6px solid #fff;aspect-ratio:16/9}
.video-frame video{width:100%;height:100%;object-fit:cover;display:block;background:#0D1512}
.video-frame img.poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.video-frame::after{content:'';position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);border-radius:inherit}
.play-btn{position:absolute;inset:0;display:grid;place-items:center;border:0;cursor:pointer;
  background:linear-gradient(180deg,rgba(13,21,18,.15),rgba(13,21,18,.5));width:100%;padding:0}
.play-core{width:84px;height:84px;border-radius:50%;background:rgba(255,255,255,.95);display:grid;place-items:center;
  box-shadow:0 10px 34px rgba(0,0,0,.3);transition:transform .2s ease}
.play-btn:hover .play-core{transform:scale(1.07)}
.play-core svg{margin-inline-end:5px}
.play-ring{position:absolute;width:84px;height:84px;border-radius:50%;border:2px solid rgba(255,255,255,.55);
  animation:ring 2.6s ease-out infinite}
@keyframes ring{0%{transform:scale(1);opacity:.75}100%{transform:scale(1.85);opacity:0}}
.video-cap{position:absolute;inset-inline:14px;bottom:14px;color:#fff;font-size:.85rem;
  background:rgba(13,21,18,.55);backdrop-filter:blur(6px);padding:7px 13px;border-radius:999px;display:inline-block;width:fit-content}

/* ---------- کادر آمار ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);padding:22px;box-shadow:var(--sh-2);
  margin-top:-26px;position:relative;z-index:2}
@media (max-width:820px){.stats{grid-template-columns:repeat(2,1fr);margin-top:6px}}
.stat{text-align:center;padding:12px 6px;border-radius:var(--r);position:relative}
.stat+.stat::before{content:'';position:absolute;inset-block:16%;inset-inline-end:-7px;width:1px;background:var(--line)}
@media (max-width:820px){.stat+.stat::before{display:none}}
.stat-n{font-size:clamp(1.5rem,3.4vw,2.1rem);font-weight:800;color:var(--green-d);line-height:1.25}
/* جدا کردن دیداری عدد پویا از واحد آن (فقط همین کاشی؛ اندازهٔ کاشی عوض نمی‌شود) */
.stat-n .stat-num{color:var(--green-d);font-weight:800}
.stat-n .stat-unit{display:block;font-size:.5em;font-weight:500;color:var(--gray);line-height:2.5}
.stat-l{font-size:.85rem;color:var(--ink-3)}
.stat-ico{font-size:1.25rem;margin-bottom:2px}

/* ---------- کارت کمپین ---------- */
.c-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-l);overflow:hidden;box-shadow:var(--sh-1);
  transition:transform .2s ease,box-shadow .2s ease;height:100%}
.c-card:hover{transform:translateY(-4px);box-shadow:var(--sh-2);text-decoration:none}
.c-media{position:relative;aspect-ratio:16/10;background:linear-gradient(135deg,#DFF0E4,#F5F7F6);overflow:hidden}
.c-media img{width:100%;height:100%;object-fit:cover}
.c-media .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,36,21,.74) 0%,rgba(24,136,52,.2) 52%,rgba(13,21,18,.58) 100%)}
.c-media.art{background:linear-gradient(160deg,#F4FBF6,#E8F7EC)}
.c-media.art .veil{background:linear-gradient(180deg,rgba(11,36,21,.66) 0%,rgba(24,136,52,.04) 46%,rgba(24,136,52,0) 62%,rgba(13,21,18,.46) 100%)}
.c-title-on{position:absolute;inset-inline:16px;top:14px;color:#fff;font-weight:700;font-size:1.05rem;
  text-shadow:0 1px 3px rgba(0,0,0,.6),0 2px 12px rgba(0,0,0,.45);line-height:1.55}
.c-badges{position:absolute;inset-inline:12px;bottom:12px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.c-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:9px;flex:1}
.c-charity{display:flex;align-items:center;gap:8px;font-size:.87rem;color:var(--ink-2)}
.c-charity .logo{width:36px;height:36px;border-radius:50%;background:var(--green-l);display:grid;place-items:center;
  overflow:hidden;flex-shrink:0;font-size:.92rem;color:var(--green-d);font-weight:700}
/* لوگوی بارگذاری‌شدهٔ خیریه: کامل و بدون کشیدگی داخل دایره */
.c-charity .logo.has-img{background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.c-charity .logo.has-img img{width:100%;height:100%;object-fit:contain;padding:3px;border-radius:50%;display:block}
.c-sum{color:var(--ink-2);font-size:.9rem;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.c-foot{margin-top:auto;padding-top:6px}

/* نوار پیشرفت */
.bar{height:10px;border-radius:999px;background:#EDF1EE;overflow:hidden;position:relative}
.bar>i{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--green-d),var(--green));transition:width .8s cubic-bezier(.2,.8,.2,1)}
.bar-info{display:flex;justify-content:space-between;font-size:.83rem;margin-bottom:6px;gap:8px}
.bar-goal{display:flex;justify-content:space-between;font-size:.78rem;color:var(--ink-3);margin-top:5px}
.bar-goal b{font-weight:800;color:var(--ink-2)}   /* مبلغ دریافت‌شده و هدف */
.bar-info .strong{font-weight:800}                /* درصد پیشرفت */

/* ---------- بخش «با هم ممکنش کردیم» ---------- */
.success{background:linear-gradient(165deg,#12351F 0%,#0E2A19 55%,#0B2415 100%);color:#fff;
  border-radius:var(--r-xl);padding:clamp(26px,4vw,48px);position:relative;overflow:hidden}
.success::before{content:'';position:absolute;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,168,32,.34),transparent 66%);top:-190px;inset-inline-start:-140px}
.success h2,.success h3{color:#fff}
.success .muted{color:#BDD6C7}
.success-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(18px,2.6vw,28px);
  position:relative;margin-top:clamp(14px,2vw,22px)}
@media (max-width:900px){.success-grid{grid-template-columns:1fr}}
.mini-v{display:flex;gap:12px;padding:12px;border-radius:var(--r);background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.1);cursor:pointer;text-align:right;width:100%;color:inherit;font-family:inherit}
.mini-v:hover{background:rgba(255,255,255,.13)}
.mini-v .thumb{width:96px;aspect-ratio:16/10;border-radius:10px;object-fit:cover;flex-shrink:0;background:#0B2415}
.result-line{color:#BFE7CC;font-size:.85rem}

/* ---------- حامیان ---------- */
.tier{border-radius:var(--r-l);padding:20px;border:1px solid var(--line);background:#fff}
.tier-gold{background:linear-gradient(160deg,#FFFBF0,#FFF6E0);border-color:#F0DFB4}
.tier-silver{background:linear-gradient(160deg,#FBFCFC,#F1F4F5);border-color:#DFE5E7}
.tier-bronze{background:linear-gradient(160deg,#FDF7F2,#F8EDE4);border-color:#E9D5C4}
.tier-head{display:flex;align-items:center;gap:9px;font-weight:700;margin-bottom:12px}
.tier-dot{width:12px;height:12px;border-radius:50%}
.sp-item{display:flex;align-items:center;gap:11px;background:rgba(255,255,255,.75);border-radius:var(--r);
  padding:11px 13px;margin-bottom:9px}
.sp-logo{width:46px;height:46px;border-radius:12px;background:#fff;border:1px solid var(--line);
  display:grid;place-items:center;font-weight:700;color:var(--gray);flex-shrink:0;overflow:hidden}

/* ---------- پایین سایت (پیشوند mf-) ---------- */
.site-foot{background:transparent;color:#D4E6DA;margin-top:60px;padding:0 0 28px}
.mf-outer{padding-inline:clamp(8px,1vw,16px)}
.mf{position:relative;overflow:hidden;isolation:isolate;border-radius:26px;
  background:
    radial-gradient(70% 90% at 50% 0%, rgba(120,200,120,.10) 0%, rgba(120,200,120,0) 60%),
    linear-gradient(180deg,#0F4A26 0%,#0B3D1F 55%,#093419 100%);
  box-shadow:0 24px 50px -28px rgba(9,52,25,.55), inset 0 1px 0 rgba(255,255,255,.06);
  padding:clamp(20px,2.3vw,32px) clamp(18px,3vw,42px) 13px}
.mf a{color:#E3EFE6;text-decoration:none}
.mf a:hover{color:#fff}
/* لوگوی بزرگ و محو در سمت راست */
.mf-mark{position:absolute;z-index:-1;top:50%;right:clamp(10px,2vw,34px);transform:translateY(-58%);
  height:78%;max-height:215px;width:auto;opacity:.09;filter:brightness(0) invert(1);pointer-events:none;user-select:none}
/* سه دایرهٔ شیشه‌ای روی خط موجی */
.mf-pillars{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  max-width:880px;margin:0 auto;text-align:center}
.mf-wave-wrap{position:absolute;inset-inline:0;top:0;height:clamp(76px,6.4vw,94px);pointer-events:none}
.mf-wave{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 4px rgba(140,220,100,.45))}
.mf-dot{position:absolute;top:65%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;
  background:#8EE36A;box-shadow:0 0 0 3px rgba(142,227,106,.14),0 0 12px 2px rgba(142,227,106,.55)}
.mf-dot-1{left:33.3%}
.mf-dot-2{left:66.7%}
.mf-pillar{position:relative;display:flex;flex-direction:column;align-items:center;gap:0;padding:0 8px}
.mf-circle{width:clamp(64px,5.6vw,90px);height:clamp(64px,5.6vw,90px);border-radius:50%;display:grid;place-items:center;margin-top:calc(clamp(76px,6.4vw,94px) * .375 - clamp(64px,5.6vw,90px) / 2);
  background:radial-gradient(circle at 50% 30%,rgba(255,255,255,.14),rgba(255,255,255,.04) 70%),rgba(16,80,40,.55);
  border:1px solid rgba(190,240,190,.28);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 10px 26px -12px rgba(0,0,0,.45),0 0 26px rgba(120,210,120,.16),inset 0 1px 0 rgba(255,255,255,.14);
  color:#fff;margin-bottom:8px}
.mf-ico svg{width:clamp(28px,2.7vw,42px);height:auto;display:block}
.mf-p-t{font-size:clamp(1.02rem,1.3vw,1.32rem);font-weight:800;color:#fff;line-height:1.5}
.mf-p-d{font-size:clamp(.86rem,1.02vw,1.04rem);color:#CFE2D5;line-height:1.6}
/* ردیف پیوندها */
.mf-nav{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px clamp(18px,3vw,56px);
  margin:clamp(14px,1.5vw,22px) auto 0;font-size:clamp(.9rem,1.02vw,1.02rem)}
.mf-sep{width:1px;height:18px;background:rgba(210,235,215,.28)}
/* سطر پایانی */
.mf-bottom{margin-top:clamp(12px,1.2vw,16px);padding-top:11px;border-top:1px solid rgba(200,235,200,.16);
  display:flex;justify-content:space-between;align-items:center;gap:10px 20px;flex-wrap:wrap;font-size:.86rem;color:#E3EFE6}
.mf-made{display:inline-flex;align-items:center;gap:14px;color:#BFD6C6}
.mf-enamad{font-size:.76rem;padding:3px 10px;border:1px solid rgba(255,255,255,.2);border-radius:8px}
@media (max-width:720px){
  .mf{border-radius:22px}
  .mf-mark{height:46%;top:20px;transform:none;opacity:.06}
  .mf-pillar{padding:0 2px}
  .mf-sep{display:none}
  .mf-nav{gap:10px 22px}
  .mf-bottom{justify-content:center;text-align:center}
}
@media (max-width:420px){
  .mf-p-d{font-size:.78rem}
  .mf-p-t{font-size:.98rem}
}

/* ---------- فرم ---------- */
.form{display:flex;flex-direction:column;gap:14px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:.89rem;font-weight:500;line-height:1.35;color:var(--ink-2)}
.req{color:var(--bad)}
input,select,textarea{
  font-family:inherit;font-size:.97rem;color:var(--ink);background:#fff;
  border:1.5px solid var(--line);border-radius:var(--r-s);padding:12px 14px;width:100%;
  transition:border-color .16s ease,box-shadow .16s ease;min-height:46px}
textarea{min-height:110px;resize:vertical;line-height:1.9}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--green);box-shadow:0 0 0 4px rgba(0,168,32,.12)}
input[type=file]{padding:9px 12px;background:#FAFBFA}
.hint{color:var(--ink-3);font-size:.79rem;line-height:1.7}
fieldset{border:1px solid var(--line);border-radius:var(--r);padding:16px;margin:0}
legend{font-weight:600;font-size:.92rem;padding-inline:8px}

/* ---------- جدول ---------- */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r);background:#fff}
table{width:100%;border-collapse:collapse;min-width:640px;font-size:.89rem}
th,td{padding:11px 13px;text-align:right;border-bottom:1px solid var(--line);vertical-align:middle}
th{background:#F7F9F8;font-weight:700;color:var(--ink-2);white-space:nowrap;position:sticky;top:0}
tbody tr:hover{background:#FBFDFC}
tbody tr:last-child td{border-bottom:0}

/* ---------- پیام‌ها ---------- */
.toasts{position:fixed;inset-block-end:18px;inset-inline-start:18px;z-index:200;display:flex;flex-direction:column;gap:9px}
.toast{background:#1E2622;color:#fff;padding:12px 18px;border-radius:14px;box-shadow:var(--sh-2);
  font-size:.9rem;max-width:min(90vw,380px);animation:tin .28s cubic-bezier(.2,.9,.3,1.2)}
.toast-error{background:var(--bad)}.toast-success{background:var(--green-d)}
.toast.out{opacity:0;transform:translateY(8px);transition:.3s}
@keyframes tin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.note{border-radius:var(--r);padding:13px 16px;font-size:.88rem;line-height:1.85;
  background:var(--sky-l);color:#175A80;border:1px solid #CBE7F5}
.note-warn{background:var(--warm-l);color:#845200;border-color:#F0DCB0}
.note-ok{background:var(--green-l);color:var(--green-d);border-color:#CFE9D7}
.note-bad{background:var(--bad-l);color:var(--bad);border-color:#F2CFCF}

/* ---------- پنجرهٔ گفت‌وگو ---------- */
.backdrop{position:fixed;inset:0;background:rgba(14,26,20,.5);backdrop-filter:blur(3px);z-index:150;
  display:grid;place-items:center;padding:18px;animation:fade .2s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{background:#fff;border-radius:var(--r-l);width:min(560px,100%);max-height:88vh;display:flex;flex-direction:column;
  box-shadow:0 30px 80px rgba(0,0,0,.28);animation:pop .26s cubic-bezier(.2,.9,.3,1.15)}
.modal-wide{width:min(900px,100%)}
@keyframes pop{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line)}
.modal-head h3{margin:0}
.modal-body{padding:20px;overflow:auto}

/* ---------- بارگذاری / خالی ---------- */
.loading{display:flex;align-items:center;gap:10px;justify-content:center;padding:44px;color:var(--ink-3)}
.spin{width:20px;height:20px;border:2.5px solid var(--line);border-top-color:var(--green);border-radius:50%;animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.empty{text-align:center;padding:44px 20px;color:var(--ink-3)}
.empty-ico{font-size:2.4rem;margin-bottom:6px}
.skel{background:linear-gradient(90deg,#EEF1EF 25%,#F7F9F8 50%,#EEF1EF 75%);background-size:200% 100%;
  animation:sk 1.4s infinite;border-radius:var(--r-s)}
@keyframes sk{to{background-position:-200% 0}}

/* ---------- پنل‌ها ---------- */
.panel{display:grid;grid-template-columns:236px 1fr;gap:24px;align-items:start;padding-block:26px}
@media (max-width:900px){.panel{grid-template-columns:1fr;gap:14px}}
.side{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);padding:12px;position:sticky;top:86px}
@media (max-width:900px){.side{position:static;display:flex;gap:6px;overflow-x:auto;padding:9px}}
.side a{display:flex;align-items:center;gap:9px;padding:11px 13px;border-radius:12px;color:var(--ink-2);
  font-size:.92rem;white-space:nowrap}
.side a:hover{background:var(--green-l2);text-decoration:none}
.side a[aria-current="page"]{background:var(--green-l);color:var(--green-d);font-weight:500}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}

/* ---------- ریز ---------- */
.kv{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px dashed var(--line);font-size:.9rem}
.kv:last-child{border-bottom:0}
.kv b{font-weight:700}
.tabs{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:18px;overflow-x:auto}
.tabs button{background:transparent;border:0;padding:11px 15px;font-family:inherit;font-size:.93rem;color:var(--ink-3);
  cursor:pointer;border-bottom:2.5px solid transparent;white-space:nowrap}
.tabs button[aria-selected="true"]{color:var(--green-d);border-bottom-color:var(--green);font-weight:500}
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:end;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-l);padding:14px 16px}
.filters .field{min-width:150px;flex:1}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--green-l);color:var(--green-d);
  display:grid;place-items:center;font-weight:700;font-size:.85rem;flex-shrink:0}
.slot-row{display:flex;gap:12px;align-items:center;padding:13px;border:1px solid var(--line);border-radius:var(--r);background:#fff}
.slot-row.filled{border-color:#CFE9D7;background:var(--green-l2)}
.slot-row.emptyslot{border-style:dashed;background:#FAFBFA}
.money-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.money-tile{background:#FAFBFA;border:1px solid var(--line);border-radius:var(--r);padding:13px}
.money-tile .l{font-size:.79rem;color:var(--ink-3)}
.money-tile .v{font-weight:800;font-size:1.02rem;margin-top:2px}
.amount-btns{display:flex;gap:8px;flex-wrap:wrap}
.amount-btns button{flex:1;min-width:96px}
.comment{padding:14px 0;border-bottom:1px solid var(--line)}
.comment:last-child{border-bottom:0}
.comment.reply{margin-inline-start:26px;border-inline-start:2px solid var(--green-l);padding-inline-start:14px}
.illus{width:100%;max-width:340px;margin-inline:auto;display:block}
.float{animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.mode-ribbon{background:var(--green-l);color:#14602C;text-align:center;font-size:.82rem;padding:8px 12px;
  border-bottom:1px solid #CDE8D5;line-height:1.9}
@media print{.site-head,.site-foot,.btn,.tabs{display:none!important}}

/* ---------- حالت خالیِ گزارش ابتدایی (کارت کمپین، سربرگ و «دربارهٔ این کمپین») ----------
   فقط وقتی دیده می‌شود که گزارش ابتدایی همان کمپین یا کاور/متن آن منتشر نشده باشد.
   همان زمینهٔ روشن .c-media.art قبلی؛ هیچ تصویر یا متنی از کمپین دیگری نمی‌آید. */
.ir-empty-cover{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:48px 18px;text-align:center;color:var(--ink-3);font-size:.82rem;font-weight:500;line-height:1.8}
.ir-empty-cover>span{background:rgba(255,255,255,.72);border:1px dashed #CFE3D5;border-radius:999px;padding:4px 14px}
.ir-empty-text{color:var(--ink-3);font-style:normal}

/* ---------- پنل ادمین: لوگوی نشان خیریهٔ همکار ---------- */
.cb-prev{width:40px;height:40px;border-radius:50%;background:var(--green-l);display:grid;place-items:center;overflow:hidden;
  font-size:.95rem;color:var(--green-d);font-weight:700}
.cb-prev.has-img{background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.cb-prev.has-img img{width:100%;height:100%;object-fit:contain;padding:3px;border-radius:50%}
.cb-actions{flex-wrap:wrap;align-items:center}
.cb-actions .cb-file{width:auto;max-width:230px;min-height:0;padding:6px 8px;font-size:.8rem}

/* ---------- صفحهٔ کمپین: کارت «کمک‌های دریافت‌شده» (ستون کناری) ---------- */
.recv-card{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:18px 22px;border-color:#D6EEDD;box-shadow:none;outline:0;transition:border-color .2s ease,box-shadow .2s ease}
.recv-card:hover{border-color:#BFE3CA}
.recv-card:focus-visible{border-color:var(--green);box-shadow:0 0 0 4px rgba(0,168,32,.12)}
.recv-txt{display:flex;flex-direction:column;gap:6px;min-width:0}
.recv-l{font-size:.9rem;color:var(--ink-3);font-weight:500}
.recv-v{font-size:clamp(1.3rem,1.05rem + .9vw,1.62rem);font-weight:800;color:var(--green-d);line-height:1.35;
  font-variant-numeric:tabular-nums;white-space:normal}
.recv-sprout{width:44px;height:44px;flex-shrink:0}
.recv-sprout .st{fill:none;stroke:var(--green-d);stroke-width:2.6;stroke-linecap:round}
.recv-sprout .lf1{fill:var(--green-d)}
.recv-sprout .lf2{fill:var(--green)}

/* ---------- کارت کمپین (صفحهٔ همهٔ کمپین‌ها): نشان شهر محل اجرا روی کاور ---------- */
.c-badges .cc-city{margin-inline-start:auto;display:inline-flex;align-items:center;gap:5px;max-width:58%;
  padding:5px 12px 5px 10px;border-radius:999px;line-height:1.35;font-size:.8rem;font-weight:600;color:var(--ink);
  background:rgba(255,255,255,.88);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  box-shadow:0 1px 3px rgba(13,21,18,.12)}
.cc-city .cc-pin{width:14px;height:14px;flex-shrink:0}
.cc-city .cc-pin path{fill:var(--green)}
.cc-city .cc-pin circle{fill:#fff}
.cc-city-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}

/* ---------- پنل ادمین: ویرایشگر محل اجرای کمپین ---------- */
.loc-editor{border:1px solid var(--line);border-radius:var(--r);padding:14px;background:#FAFCFB}
.loc-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:start}
.loc-fields{display:flex;flex-direction:column;gap:10px}
.loc-map{width:100%;height:auto;background:#fff;border:1px solid var(--line);border-radius:12px;cursor:crosshair}
.loc-prov{fill:#EEF2EF;stroke:#fff;stroke-width:1.2}
.loc-prov.is-sel{fill:#CFEAD6;stroke:var(--green-d);stroke-width:1.6}
.loc-dot{fill:var(--green);stroke:#fff;stroke-width:3}
@media (max-width:640px){.loc-grid{grid-template-columns:1fr}}

/* ---------- ویدیوی عمودی: قاب ۹:۱۶، کامل و بدون بریده‌شدن (ویدیوی افقی بدون تغییر) ---------- */
.video-frame.is-portrait{aspect-ratio:9/16;width:calc(min(70vh,680px) * 9 / 16);max-width:100%;margin-inline:auto}
.video-frame.is-portrait video{object-fit:contain}
/* ---------- پخش ویدیو: بدون نوار سیاه بالا/پایین — ویدیو لبه‌به‌لبه در همان قاب فعلی ----------
   (اندازه، نسبت و ابعاد قاب بدون تغییر؛ فقط محتوای ویدیو قاب را کامل پر می‌کند و ته‌رنگ سیاه دیده نمی‌شود) */
.video-frame video,.video-frame.is-portrait video{object-fit:cover;background:transparent}

/* ---------- پرسش «عمودی یا افقی» پیش از بارگذاری ویدیو ---------- */
.orient-q{font-size:.89rem;font-weight:500;line-height:1.35;color:var(--ink-2)}
.orient-pick{display:flex;gap:10px;flex-wrap:wrap}
.orient-opt{position:relative;flex:1 1 150px;display:flex;align-items:center;gap:10px;cursor:pointer;
  border:1.5px solid var(--line);border-radius:12px;padding:10px 12px;background:#fff;transition:border-color .15s,background .15s}
.orient-opt input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.orient-opt:hover{border-color:var(--green-l)}
.orient-opt:has(input:checked){border-color:var(--green);background:#F2FAF4}
.orient-opt:has(input:focus-visible){outline:2px solid var(--green);outline-offset:2px}
.orient-ico{width:34px;height:34px;display:grid;place-items:center;flex:none}
.orient-ico i{display:block;border:2px solid var(--gray);border-radius:4px}
.orient-opt:has(input:checked) .orient-ico i{border-color:var(--green-d);background:rgba(0,168,32,.12)}
.orient-txt{display:flex;flex-direction:column;line-height:1.5}
.orient-txt b{font-size:.9rem;color:var(--ink)}
.orient-txt small{font-size:.75rem;color:var(--ink-3)}
.orient-hint{color:var(--warm,#B7791F)}
input[type=file]:disabled{opacity:.5;cursor:not-allowed}

/* /progress.css */
/* ============================================================
   طرح‌های نمایش پیشرفت کارت کمپین (web/src/progress.js)
   کلاس کارت با پیشوند pvcard- و اجزای طرح با پیشوند pv- است
   تا با هم تداخل نکنند.
   ============================================================ */

/* ---------- ۱) قاب دوطرفه ---------- */
.pv-frame-layer{position:absolute;inset:0;pointer-events:none;z-index:3}
.pv-frame-svg{width:100%;height:100%;display:block;overflow:visible}
.c-card.pvcard-frame{border-color:transparent}

/* ---------- ۲) بالا آمدن آب ---------- */
.pv-water-layer{position:absolute;inset-inline:0;bottom:0;z-index:2;pointer-events:none;
  overflow:hidden;transition:height .9s cubic-bezier(.2,.8,.2,1)}
.pv-water-body{position:absolute;inset-inline:0;top:12px;bottom:0;opacity:.72}
.pv-water-wave{position:absolute;inset-inline:-50%;top:0;width:200%;height:20px;opacity:.85}
.pv-water-wave .w1{animation:pvWave 7s linear infinite}
.pv-water-wave .w2{animation:pvWave 11s linear infinite reverse}
@keyframes pvWave{from{transform:translateX(0)}to{transform:translateX(-200px)}}
.pv-bubble{position:absolute;bottom:6px;width:6px;height:6px;border-radius:50%;
  background:rgba(255,255,255,.6);animation:pvBubble 4.5s ease-in infinite}
@keyframes pvBubble{0%{transform:translateY(0);opacity:0}
  15%{opacity:.75}100%{transform:translateY(-90px);opacity:0}}
.c-card.pvcard-water .c-title-on{text-shadow:0 2px 14px rgba(0,0,0,.75),0 0 5px rgba(0,0,0,.55)}
.c-card.pvcard-water .c-badges{z-index:4}
.c-card.pvcard-water .c-title-on{z-index:4}

/* ---------- ۳) لبهٔ موج‌دار ---------- */
.pv-bar-wave{height:16px;overflow:visible}
.pv-bar-wave>i{position:relative;overflow:visible}
/* لبهٔ جلوی نوار در راست‌به‌چپ سمت چپ فیزیکی است */
.pv-wave-tip{position:absolute;top:-3px;left:-14px;width:16px;height:calc(100% + 6px);
  filter:drop-shadow(-3px 0 7px rgba(0,168,32,.5))}
.pv-wave-tip.live{animation:pvTip 2.5s ease-in-out infinite}
@keyframes pvTip{0%,100%{transform:translateY(-2px) scaleY(1)}50%{transform:translateY(2px) scaleY(1.14)}}

/* ---------- ۴) حلقه دور لوگوی خیریه ---------- */
.pv-logo-wrap{position:relative;width:42px;height:42px;flex-shrink:0;display:grid;place-items:center}
.pv-logo-ring{position:absolute;inset:0;width:42px;height:42px}
.pv-logo-wrap .logo{width:32px;height:32px}
.c-card.pvcard-logoring .c-charity{gap:10px}

/* ---------- ۵) قوس گیج‌مانند ---------- */
.pv-gauge-wrap{position:relative;padding-top:2px}
.pv-gauge-svg{width:100%;max-width:190px;margin-inline:auto;display:block}
.pv-gauge-svg{margin-bottom:-14px}
.pv-gauge-center{position:absolute;inset-inline:0;top:52px;text-align:center;pointer-events:none}
.pv-gauge-num{font-size:1.5rem;font-weight:800;color:var(--green-d);line-height:1.2}
.pv-gauge-amount{text-align:center;margin-top:2px}
.pv-gauge-amount b{font-weight:800}   /* مبلغ جمع‌آوری‌شدهٔ کمپین */
.pv-gauge-foot{margin-top:6px}
.c-card.pvcard-gauge .c-sum{-webkit-line-clamp:1}

/* ---------- ۶) هایلایت پشت مبلغ ---------- */
.pv-hl-row{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;padding-top:4px}
.pv-hl{position:relative;display:inline-block;padding:1px 5px;font-size:1.08rem;font-weight:800}
/* پر شدن از سمت راست: در راست‌به‌چپ inline-start همان راست است */
.pv-hl>i{position:absolute;inset-block:0;inset-inline-start:0;
  background:var(--green-l);border-radius:6px;z-index:0;
  transition:width .8s cubic-bezier(.2,.8,.2,1)}
.pv-hl>b{position:relative;z-index:1}
.pv-hl-pct{color:var(--green-d);font-weight:700;font-size:.9rem}
.pv-hl-goal{font-size:.82rem}
.pv-hl-days{font-size:.78rem;margin-inline-start:auto}

/* ---------- ۷) دو حلقهٔ هم‌مرکز ---------- */
.pv-dual-wrap{display:flex;align-items:center;gap:14px;padding-top:2px}
.pv-dual-svg{position:relative;width:80px;height:80px;flex-shrink:0}
.pv-dual{width:80px;height:80px;display:block}
.pv-dual-num{position:absolute;inset:0;display:grid;place-items:center;
  font-weight:700;font-size:.95rem;color:var(--green-d)}
.pv-dual-side{display:flex;flex-direction:column;gap:6px;align-items:flex-start;min-width:0}
.pv-legend{display:flex;gap:10px}
.pv-legend span{display:inline-flex;align-items:center;gap:4px}
.pv-legend i{width:9px;height:9px;border-radius:3px;display:inline-block}

/* ---------- ۸) ردیف قلب‌ها ---------- */
.pv-hearts{display:flex;gap:5px;flex-wrap:wrap;padding:5px 0 3px}
.pv-heart{flex-shrink:0;transition:opacity .3s ease}

/* ---------- گالری مقایسه ---------- */
.pg-head{position:sticky;top:70px;z-index:20;background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);border-block:1px solid var(--line);padding:14px 0;margin-bottom:22px}
.pg-controls{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.pg-controls input[type=range]{flex:1;min-width:170px;accent-color:var(--green);min-height:auto;padding:0}
.pg-block{border:1px solid var(--line);border-radius:var(--r-l);background:#fff;padding:20px;margin-bottom:22px}
.pg-block h3{margin:0}
.pg-title{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.pg-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:16px}
.pg-pick{margin-inline-start:auto}

@media (prefers-reduced-motion: reduce){
  .pv-water-wave .w1,.pv-water-wave .w2,.pv-bubble,.pv-wave-tip.live{animation:none}
  .pv-water-layer,.pv-hl>i{transition:none}
}

/* /iran-map.css */
/* ============================================================
   استایل بخش «اثر میروریتی در سراسر ایران»
   همهٔ گزینشگرها با پیشوند im- محدود شده‌اند و هیچ قاعدهٔ سراسری
   یا مؤلفهٔ موجودی را تغییر نمی‌دهند.
   ============================================================ */

.im-section{
  padding-block: clamp(38px, 5.5vw, 70px);
  background:#FFFFFF;                /* نقشه باید از زمینهٔ صفحه جدا دیده شود */
  border-block:1px solid var(--line);
}

/* ---------- سرتیتر ---------- */
.im-title{ text-align:center; margin:0; font-size:clamp(1.35rem,2.6vw,1.85rem);
  font-weight:700; color:var(--ink); letter-spacing:0 }
.im-title span{ color:var(--green-d) }
.im-sub{ text-align:center; margin:8px auto 0; max-width:52ch;
  font-size:.92rem; font-weight:400; color:var(--ink-2); line-height:2 }

/* ---------- فهرست استان‌ها (اطلاعات فقط به نقشه و هاور وابسته نیست) ---------- */
.im-chips{
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px;
  margin:clamp(16px,2.4vw,26px) auto 0; max-width:900px;
}
.im-chip{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 12px; border:1px solid #D8E6DC; border-radius:999px;
  background:#fff; color:var(--ink-2); cursor:pointer;
  font-family:inherit; font-size:.84rem; line-height:1.9;
  transition:background .18s ease, border-color .18s ease, color .18s ease;
}
.im-chip b{
  min-width:18px; padding:0 5px; border-radius:999px;
  background:var(--green-l); color:var(--green-d);
  font-size:.74rem; font-weight:700; text-align:center;
}
.im-chip:hover{ border-color:var(--green); color:var(--green-d) }
.im-chip.is-on{ background:var(--green-d); border-color:var(--green-d); color:#fff }
.im-chip.is-on b{ background:rgba(255,255,255,.2); color:#fff }

/* ---------- چیدمان: نقشه + پنل ---------- */
.im-grid{
  display:grid; grid-template-columns:minmax(0,1fr) 340px;
  gap:clamp(16px,2.6vw,30px); align-items:start;
  margin-top:clamp(14px,2.4vw,26px);
}

/* ---------- کادر نقشه ---------- */
.im-stage{ position:relative; width:100%; max-width:760px; margin-inline:auto }
.im-map{ display:block; width:100%; height:auto; overflow:visible }

/* کنتراست: استان بی‌کمپین روشن ولی دیده‌شدنی؛ استان دارای کمپین آشکارا متمایز */
.im-prov{
  fill:#EDF2EF; stroke:#BFD2C6; stroke-width:1.1; stroke-linejoin:round;
  transition:fill .2s ease, stroke .2s ease;
}
.im-prov.has-camp{ fill:#CFE7D8; stroke:#8FBFA1; cursor:pointer }
.im-prov.has-camp:hover{ fill:#B6DCC3 }
.im-prov.is-sel{ fill:var(--green); stroke:var(--green-d); stroke-width:1.8 }
.im-prov.has-camp:focus-visible{ outline:none; stroke:var(--green-d); stroke-width:2.6 }

/* ---------- نشانگرها: «جوانهٔ زنده» ---------- */
.im-markers{ position:absolute; inset:0; direction:ltr; pointer-events:none }
.im-pin{ position:absolute; transform:translate(-50%,-78%);
  width:26px; height:26px; display:grid; place-items:center;
  color:var(--green-d); line-height:0; pointer-events:auto; cursor:pointer }
.im-pin.is-hover{ z-index:3 }

/* حلقهٔ ظریف سبز با تپش آرام */
.im-pin::before{
  content:''; position:absolute; inset:3px; border-radius:50%;
  border:1px solid rgba(0,168,32,.38);
  opacity:.5; transform:scale(.88);
  animation:im-pulse 3.6s ease-in-out infinite;
  animation-delay:calc(var(--im-i,0) * -290ms);
  pointer-events:none;
}
/* هالهٔ لطیف هنگام هاور */
.im-pin::after{
  content:''; position:absolute; inset:-5px; border-radius:50%;
  background:radial-gradient(circle, rgba(0,168,32,.20) 0%, rgba(0,168,32,.08) 45%, rgba(0,168,32,0) 70%);
  opacity:0; transform:scale(.7);
  transition:opacity .3s ease, transform .3s cubic-bezier(.2,.8,.3,1);
  pointer-events:none;
}
.im-pin.is-hover::after{ opacity:1; transform:scale(1) }
@keyframes im-pulse{
  0%,100%{ transform:scale(.88); opacity:.5 }
  50%{ transform:scale(1.32); opacity:.1 }
}

.im-sprout{ position:relative; z-index:1; width:18px; height:18px; display:block; overflow:visible;
  transform-origin:50% 92%;
  filter:drop-shadow(0 0 1px rgba(255,255,255,.95)) drop-shadow(0 0 2px rgba(255,255,255,.7));
  transition:transform .3s cubic-bezier(.25,.8,.35,1) }
.im-sprout .im-leaf{ fill:var(--green) }
.im-stem{ transform-origin:12px 22px; transition:transform .3s cubic-bezier(.25,.8,.35,1) }
.im-leaf{ transition:transform .3s cubic-bezier(.25,.8,.35,1) }
.im-leaf-r{ transform-origin:12px 12.6px }
.im-leaf-l{ transform-origin:12px 15.8px }

/* هاور (حدود ۳۰۰ms): جوانه تا حدود ۱۲۵٪ از پایهٔ خودش رشد می‌کند، ساقه کمی بلندتر،
   برگ‌ها کمی بازتر و بلندتر؛ جابه‌جایی برگ‌ها دقیقاً هم‌پای رشد ساقه است تا به ساقه چسبیده بمانند */
.im-pin.is-hover .im-sprout{ transform:scale(1.25) }
.im-pin.is-hover .im-stem{ transform:scaleY(1.1) }
.im-pin.is-hover .im-leaf-r{ transform:translateY(-.94px) rotate(-13deg) scale(1.1) }
.im-pin.is-hover .im-leaf-l{ transform:translateY(-.62px) rotate(13deg) scale(1.1) }

.im-badge{ position:absolute; top:-3px; inset-inline-start:16px; z-index:2;
  min-width:16px; height:16px; padding:0 4px; border-radius:999px;
  background:#fff; border:1px solid #8FBFA1; color:var(--green-d);
  font-size:.68rem; font-weight:700; line-height:14px; text-align:center }

/* ---------- تولتیپ نشانگر ---------- */
.im-tip{
  position:absolute; z-index:5; pointer-events:none;
  direction:rtl; text-align:right; white-space:nowrap;
  display:flex; flex-direction:column; gap:2px;
  padding:7px 12px 8px; border-radius:12px;
  background:#FFFFFF; border:1px solid #DCE8E1;
  box-shadow:0 6px 18px rgba(14,42,25,.10), 0 1px 3px rgba(14,42,25,.06);
  line-height:1.7;
  opacity:0; visibility:hidden;
  transform:translate(calc(-50% + var(--im-dx,0px)), calc(-100% - 22px));
  transition:opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}
.im-tip.is-on{ opacity:1; visibility:visible;
  transform:translate(calc(-50% + var(--im-dx,0px)), calc(-100% - 26px));
  transition:opacity .22s ease, transform .22s ease, visibility 0s }
.im-tip-place{ font-size:.84rem; font-weight:700; color:var(--ink) }
.im-tip-count{ font-size:.76rem; font-weight:500; color:var(--green-d) }
/* فلش کوچک زیر تولتیپ */
.im-tip::after{
  content:''; position:absolute; top:100%; left:calc(50% - var(--im-dx,0px));
  width:8px; height:8px; background:#FFFFFF;
  border-right:1px solid #DCE8E1; border-bottom:1px solid #DCE8E1;
  transform:translate(-50%,-4px) rotate(45deg);
}
/* نزدیک لبهٔ بالای نقشه: تولتیپ زیر جوانه */
.im-tip.is-below{ transform:translate(calc(-50% + var(--im-dx,0px)), 18px) }
.im-tip.is-below.is-on{ transform:translate(calc(-50% + var(--im-dx,0px)), 14px) }
.im-tip.is-below::after{ top:auto; bottom:100%;
  transform:translate(-50%,4px) rotate(225deg) }

/* ---------- انیمیشن یک‌بارهٔ رویش ---------- */
.im-markers .im-pin{ opacity:0 }
.im-markers.is-grown .im-pin{ animation:im-rise .34s ease-out both; animation-delay:calc(var(--im-i,0) * 35ms) }
.im-markers.is-grown .im-stem{ transform-origin:12px 22px; animation:im-stem .34s cubic-bezier(.2,.8,.3,1) backwards;
  animation-delay:calc(var(--im-i,0) * 35ms) }
.im-markers.is-grown .im-leaf{ animation:im-leaf .3s cubic-bezier(.2,.8,.3,1) backwards;
  animation-delay:calc(var(--im-i,0) * 35ms + 200ms) }
.im-markers.is-grown .im-leaf-l{ animation-delay:calc(var(--im-i,0) * 35ms + 280ms) }
.im-markers.is-grown .im-badge{ animation:im-rise .3s ease-out both; animation-delay:calc(var(--im-i,0) * 35ms + 340ms) }
@keyframes im-rise{ from{opacity:0} to{opacity:1} }
@keyframes im-stem{ from{transform:scaleY(.1)} to{transform:scaleY(1)} }
@keyframes im-leaf{ from{transform:scale(.1)} to{transform:scale(1)} }

@media (prefers-reduced-motion: reduce){
  .im-markers .im-pin{ opacity:1 }
  .im-markers.is-grown .im-pin,.im-markers.is-grown .im-stem,
  .im-markers.is-grown .im-leaf,.im-markers.is-grown .im-badge{ animation:none }
  .im-pin::before{ animation:none }
  .im-pin::after,.im-sprout,.im-stem,.im-leaf,.im-tip,.im-tip.is-on{ transition:none }
  .im-prov,.im-chip,.im-row{ transition:none }
}

/* ---------- پنل استان ---------- */
.im-panel{
  position:sticky; top:16px;
  background:#FBFDFC; border:1px solid #DCE8E1; border-radius:var(--r-l);
  overflow:hidden;
}
.im-panel-body{ max-height:min(72vh,620px); overflow-y:auto }

.im-panel-empty{ padding:26px 20px; text-align:center; color:var(--ink-3) }
.im-panel-empty p{ margin:0 0 6px; font-size:.88rem; line-height:2 }
.im-panel-empty-t{ font-size:1rem; font-weight:700; color:var(--ink-2) }
.im-panel-empty .tiny{ margin-top:10px }

.im-panel-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
  padding:16px 18px; border-bottom:1px solid #E4EEE8; background:#fff;
  position:sticky; top:0; z-index:2;
}
.im-panel-head h3{ margin:0; font-size:1.05rem; color:var(--green-d) }
.im-panel-head p{ margin:2px 0 0; font-size:.82rem; color:var(--ink-3) }
.im-panel-x{
  flex:none; width:34px; height:34px; border:0; border-radius:9px; cursor:pointer;
  background:var(--green-l2); color:var(--ink-2); font-size:.9rem; line-height:1;
}
.im-panel-x:hover{ background:var(--green-l); color:var(--green-d) }

.im-rows{ display:flex; flex-direction:column }
.im-row{
  display:flex; gap:12px; padding:13px 16px; text-decoration:none; color:inherit;
  border-bottom:1px solid #EDF3EF; transition:background .18s ease;
}
.im-row:hover{ background:var(--green-l2); text-decoration:none }
.im-row:focus-visible{ outline:2px solid var(--green); outline-offset:-2px }
.im-row-media{
  flex:none; width:62px; height:62px; border-radius:12px; overflow:hidden;
  background:var(--green-l2); display:grid; place-items:center;
}
.im-row-media img{ width:100%; height:100%; object-fit:cover }
.im-row-media.is-art img{ width:76%; height:76%; object-fit:contain }
.im-row-body{ min-width:0; flex:1; display:flex; flex-direction:column; gap:1px }
.im-row-tag{ font-size:.7rem; color:var(--green); line-height:1.8 }
.im-row-title{
  font-size:.93rem; font-weight:700; color:var(--ink); line-height:1.75;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.im-row-meta{ font-size:.74rem; color:var(--ink-3); line-height:1.9 }
.im-row-ok{ color:var(--green-d); font-weight:600 }
.im-row-sum{
  font-size:.76rem; color:var(--ink-2); line-height:1.85; margin-top:2px;
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;
}
.im-row-bar{ display:block; height:5px; margin:7px 0 4px; border-radius:99px; background:#E4EEE8; overflow:hidden }
.im-row-bar i{ display:block; height:100%; border-radius:99px; background:var(--green) }
.im-row-foot{ display:flex; flex-wrap:wrap; gap:2px; font-size:.74rem; color:var(--ink-3); line-height:1.9 }
.im-row-foot b{ color:var(--green-d) }
.im-row-state{ margin-inline-start:auto }

.im-panel-all{ margin:12px 16px 16px; width:calc(100% - 32px) }

/* ============================================================
   تبلت
   ============================================================ */
@media (max-width:1000px){
  .im-grid{ grid-template-columns:1fr }
  .im-panel{ position:static; max-width:760px; margin-inline:auto }
  .im-panel-body{ max-height:none }
}

/* ============================================================
   موبایل — پنل به شکل کشوی پایین
   ============================================================ */
@media (max-width:760px){
  .im-stage{ max-width:100% }
  .im-pin{ width:24px; height:24px }
  .im-sprout{ width:17px; height:17px }
  .im-chips{ justify-content:flex-start; flex-wrap:nowrap; overflow-x:auto;
    padding-bottom:6px; scrollbar-width:thin }
  .im-chip{ flex:none }

  .im-panel{
    position:fixed; inset-inline:0; inset-block-end:0; z-index:80;
    max-width:none; margin:0; border-radius:20px 20px 0 0;
    border:1px solid #DCE8E1; border-bottom:0;
    box-shadow:0 -10px 34px rgba(14,42,25,.18);
    transform:translateY(101%); transition:transform .26s cubic-bezier(.2,.8,.3,1);
    visibility:hidden;
  }
  .im-panel.is-open{ transform:translateY(0); visibility:visible }
  .im-panel-body{ max-height:62vh; overflow-y:auto; -webkit-overflow-scrolling:touch }
  .im-panel-empty{ display:none }
  .im-panel-head{ padding-block:14px }
  /* دستهٔ کشو */
  .im-panel::before{
    content:''; position:absolute; top:7px; inset-inline:0; margin-inline:auto;
    width:42px; height:4px; border-radius:99px; background:#CBDCD2; z-index:3;
  }
  .im-panel-head{ padding-top:18px }
}
@media (prefers-reduced-motion: reduce){
  @media (max-width:760px){ .im-panel{ transition:none } }
}

/* ---------- نقشهٔ اثر: جوانه‌های قابل انتخاب و جزئیات کمپین در پنل ---------- */
button.im-pin{ border:0; padding:0; background:transparent; font:inherit }
.im-pin:focus-visible{ outline:2px solid var(--green); outline-offset:2px; border-radius:50% }
.im-pin.is-sel{ z-index:4; color:var(--green) }
.im-pin.is-sel .im-sprout{ transform:scale(1.18) }
button.im-row{ width:100%; border:0; border-bottom:1px solid #EDF3EF; background:transparent; font:inherit; text-align:start; cursor:pointer }
.im-back{ border:0; background:transparent; padding:0 0 4px; color:var(--green-d); font:inherit; font-size:.8rem; cursor:pointer }
.im-back:hover{ text-decoration:underline }
.im-camp{ padding:14px 18px 4px }
.im-camp-loading{ margin:8px 0; color:var(--ink-3); font-size:.86rem }
.im-camp-cover{ width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:12px; display:block; margin-bottom:10px }
.im-camp-meta{ display:flex; justify-content:space-between; gap:8px; font-size:.8rem; color:var(--ink-3); margin-bottom:6px }
.im-camp-state{ color:var(--green-d); font-weight:600 }
.im-camp-desc{ margin:0 0 10px; font-size:.88rem; line-height:2; color:var(--ink-2); white-space:pre-wrap }
.im-camp-desc.is-empty{ color:var(--ink-3); font-size:.82rem }
.im-camp-fund{ margin:0 0 12px; font-size:.8rem; color:var(--ink-3) }
.im-camp-fund b{ color:var(--green-d) }
.im-camp-h{ margin:4px 0 8px; font-size:.9rem; color:var(--ink) }
.im-reps{ display:flex; flex-direction:column; gap:8px; margin-bottom:6px }
.im-rep{ display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid #E4EEE8; border-radius:12px; background:#fff }
.im-rep-t{ flex:1; min-width:0; font-size:.82rem; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.im-rep-play{ flex:none }
.im-camp + .im-panel-all, .im-camp .im-panel-all{ margin:12px 0 16px; width:100% }
.im-camp-desc:not(.is-empty){ display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical; overflow:hidden }
/* موبایل: کشوی پایین فقط به اندازهٔ محتوایش (top ارثی نسخهٔ دسکتاپ آن را تمام‌صفحه می‌کرد) */
@media (max-width:760px){ .im-panel{ top:auto } }

/* /paths-wheel.css */
/* ============================================================
   استایل بخش «تو کجای این چرخه‌ای؟» — چرخِ تعاملی مسیرها
   ------------------------------------------------------------
   همهٔ گزینشگرها با پیشوند pw- محدود شده‌اند. این فایل هیچ قاعدهٔ
   سراسری، مؤلفه یا بخش دیگری از سایت را تغییر نمی‌دهد.
   ============================================================ */

:root{
  /* خانوادهٔ سبزِ سازمانی، فقط برای همین بخش */
  --pw-forest:#1E5233;      /* Dark Forest Green */
  --pw-green:#4E8D60;       /* Medium Green */
  --pw-sage:#BCD9C3;        /* Soft Sage Green */
  --pw-sage-l:#E8F1E9;      /* Very Light Sage */
  --pw-cream:#FBFAF6;       /* Warm Off-White */
}

/* ============================================================
   قاب بخش و پس‌زمینه
   ============================================================ */
.pw-section{
  position:relative; isolation:isolate; overflow:hidden;
  padding-block:clamp(48px,7vw,96px);
  background:
    radial-gradient(115% 85% at 10% 6%,  #F1F8F3 0%, rgba(241,248,243,0) 58%),
    radial-gradient(95% 75% at 92% 94%,  #EEF6F0 0%, rgba(238,246,240,0) 60%),
    radial-gradient(70% 60% at 50% 50%,  #FFFFFF 0%, rgba(255,255,255,0) 70%),
    var(--pw-cream);
}
.pw-bg{ position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden }

/* لکه‌های سبز بسیار کم‌رنگ و محو */
.pw-blob{ position:absolute; border-radius:50%; filter:blur(60px) }
.pw-blob-a{ inset-inline-start:-6%; top:-18%; width:46%; padding-block-end:46%;
  background:radial-gradient(circle, rgba(122,180,140,.22), rgba(122,180,140,0) 68%) }
.pw-blob-b{ inset-inline-end:-8%; bottom:-22%; width:52%; padding-block-end:52%;
  background:radial-gradient(circle, rgba(94,155,110,.16), rgba(94,155,110,0) 70%) }

/* برگ‌های محوِ تزئینی */
.pw-leaf{ position:absolute; color:var(--pw-sage); opacity:.34; filter:blur(1.4px) }
.pw-leaf-1{ width:210px; height:210px; top:-48px; inset-inline-end:4%; transform:rotate(18deg); opacity:.26 }
.pw-leaf-2{ width:150px; height:150px; top:26%;  inset-inline-end:-34px; transform:rotate(-42deg); opacity:.2; filter:blur(2.4px) }
.pw-leaf-3{ width:180px; height:180px; bottom:-40px; inset-inline-start:6%; transform:rotate(-150deg); opacity:.22 }
.pw-leaf-4{ width:120px; height:120px; top:12%; inset-inline-start:-22px; transform:rotate(126deg); opacity:.16; filter:blur(2.8px) }

/* ============================================================
   پس‌زمینهٔ یکپارچهٔ «نقشهٔ اثر» + «چرخ مسیرها»
   دو بخش داخل .im-pw-band می‌نشینند؛ پس‌زمینهٔ خودشان شفاف می‌شود و
   یک زمینهٔ پیوسته (همان رنگ‌های چرخ) پشت هر دو کشیده می‌شود.
   محتوای نقشه و چرخ دست نمی‌خورد.
   ============================================================ */
.im-pw-band{
  position:relative; isolation:isolate; overflow:hidden;
  border-top:1px solid var(--line);
  background:
    radial-gradient(90% 38% at 10% 4%,  #F1F8F3 0%, rgba(241,248,243,0) 70%),
    radial-gradient(80% 34% at 92% 40%, #EEF6F0 0%, rgba(238,246,240,0) 70%),
    radial-gradient(95% 40% at 8% 78%,  #F1F8F3 0%, rgba(241,248,243,0) 70%),
    radial-gradient(85% 36% at 92% 98%, #EEF6F0 0%, rgba(238,246,240,0) 70%),
    var(--pw-cream);
}
.im-pw-band > .im-section{ background:transparent; border-block:0 }
.im-pw-band > .pw-section{ background:transparent; overflow:visible }
/* لکه‌ها و برگ‌های چرخ در مرز دو بخش بریده نشوند (بریدن در لبهٔ بیرونی نوار انجام می‌شود) */
.im-pw-band > .pw-section > .pw-bg{ overflow:visible }

/* ============================================================
   چیدمان: متن سمت راست، چرخ سمت چپ
   ============================================================ */
.pw-grid{
  display:grid; grid-template-columns:0.92fr 1fr;
  align-items:center; gap:clamp(26px,5vw,70px);
}
.pw-stage{ min-width:0; display:flex; justify-content:center }
.pw-loading{ color:var(--ink-3); font-size:.9rem; padding-block:60px }

/* ---------- ستون متن ---------- */
.pw-copy{ min-width:0 }
.pw-eyebrow{
  display:flex; align-items:center; gap:12px; margin:0 0 14px;
  font-size:.92rem; font-weight:500; color:var(--pw-green); line-height:2;
}
.pw-eyebrow-line{ width:clamp(28px,4vw,56px); height:2px; border-radius:2px;
  background:linear-gradient(to left, var(--pw-green), rgba(78,141,96,.15)) }

.pw-title{
  margin:0; color:var(--pw-forest); font-weight:800;
  font-size:clamp(1.95rem,4.4vw,3.25rem); line-height:1.42; letter-spacing:0;
}
.pw-lead{
  margin:18px 0 0; max-width:44ch;
  font-size:clamp(.95rem,1.25vw,1.06rem); font-weight:400;
  color:var(--ink-2); line-height:2.25;
}

.pw-cta-row{ margin-top:clamp(20px,3vw,34px) }
.pw-cta{
  display:inline-flex; align-items:center; gap:14px;
  padding:14px 30px; border:0; border-radius:14px; cursor:pointer;
  background:var(--pw-forest); color:#fff;
  font-family:inherit; font-size:1rem; font-weight:700; line-height:1;
  box-shadow:0 8px 22px rgba(30,82,51,.20);
  transition:background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.pw-cta:hover{ background:#174226; transform:translateY(-2px); box-shadow:0 12px 28px rgba(30,82,51,.26) }
.pw-cta:active{ transform:translateY(0) }
.pw-cta-arrow{ font-size:1.35rem; line-height:0; opacity:.9 }

/* ============================================================
   چرخ
   ============================================================ */
.pw-wheel-wrap{ width:100%; display:flex; flex-direction:column; align-items:center }
.pw-wheel{
  position:relative; width:min(100%,540px); aspect-ratio:1/1;
  --pw-rot:0deg;
}
.pw-svg{ display:block; width:100%; height:100%; overflow:visible }

/* دیسک سفید مرکز */
.pw-hub-disc{ fill:#FFFFFF }

/* حلقهٔ چرخنده — چرخش کوتاه و نرم، سپس توقف */
.pw-rot{
  transform-box:view-box; transform-origin:50% 50%;
  transform:rotate(var(--pw-rot,0deg));
  transition:transform 880ms cubic-bezier(.22,.86,.25,1);
}

/* ---------- قطاع‌ها ---------- */
.pw-seg{
  cursor:pointer; text-decoration:none; outline:none;
  transform-box:fill-box; transform-origin:center;
  transition:transform 360ms cubic-bezier(.2,.7,.3,1);
}
.pw-seg:hover,.pw-seg:focus,.pw-seg:active{ text-decoration:none }
.pw-sec{
  fill:var(--pw-fill); color:var(--pw-fill);   /* color → رنگ خطِ گردکنندهٔ گوشه‌ها */
  transition:fill 340ms ease, color 340ms ease, filter 340ms ease;
}

/* برجسته‌شدن فقط همان قطاع: بزرگ‌نمایی کم، حرکت جزئی به بیرون، سایه و درخشش سبز */
.pw-seg:hover,
.pw-seg:focus-visible,
.pw-seg.is-active{
  transform:translate(var(--pw-ox,0), var(--pw-oy,0)) scale(1.05);
}
.pw-seg:hover .pw-sec,
.pw-seg:focus-visible .pw-sec,
.pw-seg.is-active .pw-sec{
  fill:var(--pw-fill-hover); color:var(--pw-fill-hover);
  filter:drop-shadow(0 4px 10px rgba(24,82,48,.22)) drop-shadow(0 0 9px rgba(78,141,96,.34));
}
.pw-seg:focus-visible .pw-sec{ stroke:#FFFFFF; stroke-width:3 }

/* ---------- نوشته‌ها: همیشه صاف و خوانا ---------- */
.pw-lbl{
  transform-box:fill-box; transform-origin:center;
  transform:rotate(calc(-1 * var(--pw-rot,0deg)));
  transition:transform 880ms cubic-bezier(.22,.86,.25,1);
  pointer-events:none;
}
.pw-seg text{
  font-family:'Vazirmatn',Arial,sans-serif; direction:rtl;
  text-anchor:middle; fill:var(--pw-ink); paint-order:stroke;
}
.pw-name{ font-weight:700; letter-spacing:0 }
.pw-tag{ font-size:10px; font-weight:400; opacity:.88 }
.pw-ico{ color:var(--pw-ink) }
.pw-seg:hover .pw-name,
.pw-seg.is-active .pw-name{ font-weight:800 }

/* ---------- مرکز چرخ (نمی‌چرخد) ---------- */
.pw-hub{
  position:absolute; inset:0; margin:auto;
  width:44%; height:44%; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; pointer-events:none; text-align:center;
}
.pw-hub-mark{ width:clamp(38px,9%,58px); height:auto; margin-bottom:4px }
.pw-hub-name{ font-size:clamp(1rem,2.4vw,1.45rem); font-weight:800; color:var(--pw-forest); line-height:1.3 }
.pw-hub-sub{ font-size:clamp(.66rem,1.4vw,.85rem); font-weight:500; color:#8AAE96; line-height:1.6 }

/* ---------- توضیح زیر چرخ (فقط در حالت لمسی پر می‌شود) ---------- */
.pw-note:empty{ display:none }
.pw-note{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px 10px;
  margin-top:14px; padding:12px 16px; max-width:420px;
  background:#fff; border:1px solid #E7EDE9; border-radius:14px;
  box-shadow:0 6px 18px rgba(14,42,25,.08); text-align:center;
}
.pw-note b{ color:var(--pw-forest); font-size:.98rem; font-weight:700 }
.pw-note span{ color:var(--ink-3); font-size:.85rem }
.pw-note-go{
  width:100%; margin-top:4px; padding:9px 14px; border:0; border-radius:10px; cursor:pointer;
  background:var(--pw-forest); color:#fff; font-family:inherit; font-size:.9rem; font-weight:700;
}

/* ============================================================
   بادبادک‌ها — لایهٔ روکشِ بدون تعامل
   ============================================================ */
.pw-kites{
  position:fixed; inset:0; z-index:70; overflow:hidden;
  pointer-events:none; contain:strict;
}
.pw-kite{
  position:fixed; width:22px; height:42px; margin:0;   /* بادکنک قرمز کوچک */
  pointer-events:none; will-change:transform,opacity;
  animation:pw-rise var(--pw-dur,3s) cubic-bezier(.36,.03,.36,1) forwards;
}
.pw-kite-in{
  width:100%; height:100%;
  animation:pw-sway 1.7s ease-in-out infinite alternate;
  will-change:transform;
}
.pw-kite-svg{ display:block; width:100%; height:100% }
.pw-kite-tail{
  transform-box:fill-box; transform-origin:top center;
  animation:pw-tail 1.15s ease-in-out infinite alternate;
}

@keyframes pw-rise{
  0%   { transform:translate(-50%,-50%) translateY(10px) scale(.84); opacity:0 }
  9%   { opacity:1 }
  82%  { opacity:1 }
  100% { transform:translate(-50%,-50%) translateY(calc(-1 * var(--pw-travel,600px))) scale(1.03); opacity:0 }
}
@keyframes pw-sway{
  from{ transform:translateX(calc(-1 * var(--pw-drift,20px))) rotate(calc(-1 * var(--pw-spin,8deg))) }
  to  { transform:translateX(var(--pw-drift,20px)) rotate(var(--pw-spin,8deg)) }
}
@keyframes pw-tail{
  from{ transform:rotate(-5deg) }
  to  { transform:rotate(5deg) }
}

/* ============================================================
   تبلت — همان ترکیب، فقط کوچک‌تر
   ============================================================ */
@media (max-width:1024px){
  .pw-grid{ grid-template-columns:0.9fr 1fr; gap:28px }
  .pw-wheel{ width:min(100%,440px) }
  .pw-tag{ font-size:10.5px }
}

/* ============================================================
   موبایل — اول عنوان و توضیح، بعد چرخ
   ============================================================ */
@media (max-width:760px){
  .pw-section{ padding-block:44px }
  .pw-grid{ grid-template-columns:1fr; gap:30px }   /* ترتیب DOM: متن، سپس چرخ */
  .pw-copy{ text-align:center }
  .pw-eyebrow{ justify-content:center }
  .pw-lead{ margin-inline:auto }
  .pw-wheel{ width:min(100%,400px) }
  .pw-name{ font-weight:700 }
  .pw-leaf-2,.pw-leaf-4{ display:none }
  .pw-kite{ width:20px; height:38px }
}
@media (max-width:400px){
  .pw-wheel{ width:100% }
  .pw-hub-sub{ font-size:.6rem }
}

/* ============================================================
   کاهش حرکت — بدون چرخش و بدون بادبادک
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .pw-kites{ display:none }
  .pw-rot{ transform:none; transition:none }
  .pw-lbl{ transform:none; transition:none }
  .pw-seg{ transition:none }
  .pw-seg:hover,.pw-seg:focus-visible,.pw-seg.is-active{ transform:none }
  .pw-seg:hover .pw-sec,
  .pw-seg:focus-visible .pw-sec,
  .pw-seg.is-active .pw-sec{ filter:none; stroke:#FFFFFF; stroke-width:3 }
}

/* ============================================================
   صفحهٔ اختصاصی هر مسیر (pd-)
   ============================================================ */
.pd-hero{
  position:relative; overflow:hidden; padding-block:clamp(28px,4.5vw,54px) clamp(24px,4vw,44px);
  background:
    radial-gradient(90% 120% at 88% 0%, rgba(255,255,255,.55), rgba(255,255,255,0) 62%),
    var(--pd-color,#4E8D60);
  color:var(--pd-ink,#fff);
}
.pd-hero-bg{ position:absolute; inset:0;
  background:radial-gradient(60% 90% at 12% 110%, rgba(255,255,255,.22), rgba(255,255,255,0) 70%) }
.pd-hero-in{ position:relative }
.pd-crumbs{ display:flex; align-items:center; gap:8px; font-size:.85rem; opacity:.88; margin-bottom:16px }
.pd-crumbs a{ color:inherit; text-decoration:none }
.pd-crumbs a:hover{ text-decoration:underline }
.pd-hero-row{ display:flex; align-items:center; gap:16px; flex-wrap:wrap }
.pd-badge{ display:grid; place-items:center; width:64px; height:64px; border-radius:20px;
  background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.3); color:inherit; flex:none }
.pd-title{ margin:0; font-size:clamp(1.6rem,3.4vw,2.45rem); font-weight:800; color:inherit; line-height:1.4 }
.pd-tagline{ margin:4px 0 0; font-size:clamp(.95rem,1.5vw,1.1rem); opacity:.9 }
.pd-hero-img{ margin-top:22px; width:100%; max-height:360px; object-fit:cover; border-radius:20px }

.pd-body{ display:grid; grid-template-columns:1.6fr .85fr; gap:clamp(18px,2.6vw,30px);
  padding-block:clamp(26px,4vw,48px); align-items:start }
.pd-main{ min-width:0; display:flex; flex-direction:column; gap:clamp(16px,2.2vw,24px) }
.pd-side{ min-width:0; display:flex; flex-direction:column; gap:16px; position:sticky; top:16px }
.pd-h2{ margin:0 0 12px; font-size:1.2rem; font-weight:700; color:var(--pw-forest) }
.pd-h3{ margin:0 0 12px; font-size:1.05rem; font-weight:700; color:var(--pw-forest) }

.pd-goal{ margin-top:16px; padding:14px 16px; border-radius:14px;
  background:var(--pw-sage-l); border:1px solid #D6E7DA; display:flex; gap:10px; flex-wrap:wrap; align-items:baseline }
.pd-goal-l{ font-size:.8rem; color:#6E8E79 }
.pd-goal b{ color:var(--pw-forest) }

.pd-gallery{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px }
.pd-shot{ margin:0 }
.pd-shot img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:14px }
.pd-shot figcaption{ margin-top:6px; font-size:.8rem; color:var(--ink-3) }

.pd-reports{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px }
.pd-reports li{ padding:14px 16px; border:1px solid var(--line); border-radius:14px; background:#FCFDFC }
.pd-rep-head{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:6px }
.pd-camp{ max-width:420px }

.pd-kv{ display:flex; justify-content:space-between; gap:10px; padding-block:7px;
  border-bottom:1px dashed var(--line); font-size:.92rem }
.pd-kv:last-of-type{ border-bottom:0 }
.pd-kv b{ color:var(--pw-forest) }
.pd-bar-info{ display:flex; justify-content:space-between; margin:8px 0 6px; font-size:.88rem }

.pd-options{ display:flex; flex-direction:column; gap:8px; margin-bottom:14px }
.pd-opt{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px;
  padding:12px 14px; border:1.5px solid var(--line); border-radius:14px;
  background:#fff; cursor:pointer; text-align:right; font-family:inherit;
  transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.pd-opt:hover{ border-color:#BCD9C3; background:#FAFDFB }
.pd-opt.is-on{ border-color:var(--pw-green); background:var(--pw-sage-l);
  box-shadow:0 3px 12px rgba(78,141,96,.14) }
.pd-opt-t{ font-weight:700; font-size:.96rem; color:var(--ink); width:100% }
.pd-opt.is-on .pd-opt-t{ color:var(--pw-forest) }
.pd-opt-b{ font-size:.82rem; color:var(--ink-3) }
.pd-opt-a{ margin-inline-start:auto; font-size:.86rem; font-weight:700; color:var(--pw-forest) }

@media (max-width:900px){
  .pd-body{ grid-template-columns:1fr }
  .pd-side{ position:static }
}

/* /home.css */
/* ============================================================
   بخش‌های تازهٔ صفحهٔ اصلی — پیشوند hm-
   ------------------------------------------------------------
   این فایل فقط بخش‌های تازه را استایل می‌دهد و هیچ قاعدهٔ سراسری
   یا مؤلفهٔ موجودی را بازنویسی نمی‌کند.
   رنگ‌ها از همان توکن‌های app.css می‌آیند.
   ============================================================ */

/* ---------- بخش آغازین ---------- */
/* شعار: خط — متن — قلب کوچکِ جوانه‌دار — خط */
.hm-slogan{
  display:flex; width:fit-content; align-items:center; gap:10px;
  margin:16px 0 10px; padding:0;
  /* همان ارتفاعِ نشان قبلی (۱٫۹em + ۱۲px) تا عنوان و بقیهٔ بخش جابه‌جا نشوند */
  height:calc(1.9em + 12px);
  color:var(--green-d);
  font-size:.92rem; font-weight:700; line-height:1.9;
}
.hm-sl-line{
  display:block; flex:none; width:clamp(22px,2.6vw,38px); height:1.5px;
  border-radius:2px; background:var(--green-d); opacity:.8;
}
.hm-sl-text{ white-space:nowrap }
/* قلب بزرگ‌تر (۵۶px). جای قلب در چیدمان همان ۳۰px قبلی است و خودِ نقش
   از دو طرف و بالا و پایین بیرون می‌زند؛ پس متن، خط‌ها و عنوان جابه‌جا نمی‌شوند. */
.hm-heart{ display:block; flex:none; width:30px; height:34.5px; margin-block:-4px 0; position:relative }
.hm-heart svg{
  display:block; position:absolute; overflow:visible;
  width:48.7px; height:56px; left:50%; top:50%;
  margin:-31px 0 0 -24.35px;
}
/* فقط آب حرکت می‌کند؛ قلب ثابت است */
.hm-hs-front,.hm-hs-back,.hm-hs-bob,.hm-hs-shine,.hm-hs-glints{ transform-box:view-box; transform-origin:0 0 }
.hm-hs-swell  { transform-box:view-box; transform-origin:0 28.4px }
.hm-hs-swell-b{ transform-box:view-box; transform-origin:0 26.6px }
/* دو لایه با سرعت و جهت متفاوت (حلقهٔ بی‌درز: لغزش برابر یک طول موج = ۲۰ واحد) */
.hm-hs-front  { animation:hm-hs-flow 3s linear infinite }
.hm-hs-back   { animation:hm-hs-flow-r 2.6s linear infinite }
.hm-hs-glints { animation:hm-hs-glint 3s linear infinite }
/* بالا و پایین رفتن آرام سطح آب */
.hm-hs-bob    { animation:hm-hs-bob 3.2s ease-in-out infinite alternate }
/* تغییر ملایم شکل موج‌ها (بلندی موج کم و زیاد می‌شود) */
.hm-hs-swell  { animation:hm-hs-swell 2.8s ease-in-out infinite alternate }
.hm-hs-swell-b{ animation:hm-hs-swell 3.4s ease-in-out -1.2s infinite alternate-reverse }
.hm-hs-shine,.hm-hs-shine-b{ transition:opacity .4s ease }
.hm-hs-back path{ transition:opacity .4s ease }
.hm-slogan:hover .hm-hs-shine{ opacity:.95 }
.hm-slogan:hover .hm-hs-back path{ opacity:.8 }
@keyframes hm-hs-flow  { from{ transform:translateX(0) }     to{ transform:translateX(-20px) } }
@keyframes hm-hs-flow-r{ from{ transform:translateX(-20px) } to{ transform:translateX(0) } }
@keyframes hm-hs-glint { from{ transform:translateX(0) }     to{ transform:translateX(-40px) } }
@keyframes hm-hs-bob   { from{ transform:translateY(1.4px) } to{ transform:translateY(-1.4px) } }
@keyframes hm-hs-swell { from{ transform:scaleY(.7) }        to{ transform:scaleY(1.25) } }
@media (prefers-reduced-motion:reduce){
  .hm-hs-front,.hm-hs-back,.hm-hs-bob,.hm-hs-swell,.hm-hs-swell-b,.hm-hs-glints{ animation:none }
}
.hm-h1{ margin:0 0 12px }

/* ---------- اعتماد ---------- */
.hm-trust{ background:var(--card); border-block:1px solid var(--line) }
.hm-stats{ margin-top:4px }
.hm-trust-cols{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2.4vw,26px);
  margin-top:clamp(22px,3vw,34px);
}
.hm-trust-col{ padding-inline-start:16px; border-inline-start:3px solid var(--green-l) }
.hm-trust-col h3{ margin:0 0 6px; font-size:1.02rem; color:var(--green-d) }
.hm-trust-col p{ margin:0; font-size:.92rem; color:var(--ink-2); line-height:2.1 }

/* تایم‌لاین پنج جایگاه گزارش */
.hm-tl{
  margin-top:clamp(24px,3.4vw,38px); padding:clamp(18px,2.4vw,26px);
  background:var(--green-l2); border:1px solid #DCEBE1; border-radius:var(--r-l);
}
.hm-tl-head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px; margin-bottom:18px }
.hm-tl-title{ font-size:1.02rem; font-weight:700; color:var(--green-d) }
.hm-tl-line{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(5,1fr); gap:10px;
}
.hm-tl-item{
  position:relative; padding-top:26px; text-align:center;
  font-size:.82rem; color:var(--ink-3);
}
/* خط افقی پشت نقطه‌ها */
.hm-tl-item::before{
  content:''; position:absolute; top:9px; inset-inline-start:50%; width:100%; height:2px;
  background:#D3E4D9;
}
.hm-tl-item:last-child::before{ display:none }
.hm-tl-dot{
  position:absolute; top:3px; inset-inline-start:50%; transform:translateX(50%);
  width:14px; height:14px; border-radius:50%;
  background:#fff; border:2px dashed #BFD4C6;
}
.hm-tl-item.is-on .hm-tl-dot{ background:var(--green-d); border:2px solid var(--green-d) }
.hm-tl-item.is-on::before{ background:var(--green-d) }
.hm-tl-name{ display:block; font-weight:700; color:var(--ink-2); line-height:1.8 }
.hm-tl-item.is-on .hm-tl-name{ color:var(--green-d) }
.hm-tl-state{ display:block; font-size:.76rem; line-height:1.9 }

/* ---------- با هم ممکنش کردیم ---------- */
.hm-success-wrap{ padding-block:clamp(30px,4vw,56px) }
.hm-empty{
  margin:0; padding:26px 22px; border-radius:var(--r);
  background:rgba(255,255,255,.08); color:#E6F2EA;
  font-size:.95rem; line-height:2.1; text-align:center;
}

/* ---------- دعوت به ثبت‌نام ---------- */
.hm-join{ padding-block:clamp(40px,6vw,72px); background:var(--green-l2); text-align:center }
.hm-next{
  display:inline-block; margin:0 auto 22px; padding:10px 18px;
  background:#fff; border:1px solid #DCEBE1; border-radius:999px;
  font-size:.9rem; color:var(--ink-2); line-height:1.9;
}
.hm-next b{ color:var(--green-d) }
.hm-join-h{ margin:0 0 8px; color:var(--green-d) }
.hm-join-sub{ margin:0 auto; max-width:46ch; color:var(--ink-2) }
.hm-perks{
  list-style:none; margin:clamp(20px,3vw,30px) auto 0; padding:0; max-width:760px;
  display:grid; gap:12px; text-align:start;
}
.hm-perks li{
  display:flex; align-items:flex-start; gap:12px;
  padding:14px 16px; background:var(--card);
  border:1px solid var(--line); border-radius:var(--r-s);
  font-size:.93rem; line-height:2.05; color:var(--ink-2);
}
.hm-perks b{ color:var(--ink) }
.hm-perk-ico{
  flex:none; display:grid; place-items:center; width:30px; height:30px; margin-top:3px;
  border-radius:9px; background:var(--green-l); color:var(--green-d); font-size:.95rem;
}
.hm-join-cta{ justify-content:center; margin-top:clamp(18px,2.6vw,28px) }

/* ---------- نوار حامیان سازمانی ---------- */
.hm-sponsor-bar{ background:var(--card); border-top:1px solid var(--line) }
.hm-sponsor-in{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:10px 18px; padding-block:22px; text-align:center;
}
.hm-sponsor-in p{ margin:0; font-size:.95rem; color:var(--ink-2) }

/* ============================================================
   تبلت
   ============================================================ */
@media (max-width:900px){
  .hm-trust-cols{ grid-template-columns:1fr; gap:16px }
  .hm-tl-line{ grid-template-columns:1fr; gap:0 }
  .hm-tl-item{
    padding:10px 0 10px 0; padding-inline-start:30px; text-align:start;
  }
  .hm-tl-item::before{
    top:26px; inset-inline-start:7px; width:2px; height:100%; transform:none;
  }
  .hm-tl-dot{ top:14px; inset-inline-start:1px; transform:none }
  .hm-tl-state{ display:inline; margin-inline-start:8px }
  .hm-tl-name{ display:inline }
}

/* ============================================================
   موبایل
   ============================================================ */
@media (max-width:640px){
  .hm-slogan{ font-size:.86rem }
  /* هدف لمسی: پیوندهای متنی روی موبایل دست‌کم ۳۲ پیکسل ارتفاع داشته باشند.
     padding روی عنصر inline چیدمان را جابه‌جا نمی‌کند، فقط ناحیهٔ لمس را بزرگ می‌کند. */
  .hm-trust p a,
  .hm-tl-title,
  .hm-next a,
  .hm-join p a{ display:inline-block; padding-block:8px; min-height:32px }
  .hm-perks li{ font-size:.9rem }
  .hm-next{ font-size:.85rem; border-radius:var(--r-s) }
}

/* ============================================================
   افزوده‌های کارت کمپین و بخش نتیجه‌ها
   (کلاس‌های تازه؛ هیچ قاعدهٔ موجودی بازنویسی نشده)
   ============================================================ */
.c-who{
  margin:2px 0 6px; font-size:.95rem; font-weight:700; color:var(--green-d); line-height:1.9;
}
.c-verified{
  font-size:.76rem; font-weight:600; color:var(--green-d);
  background:var(--green-l); border-radius:999px; padding:1px 8px; line-height:1.9;
  white-space:nowrap;
}
.hm-art-note{
  margin:14px 0 0; text-align:center; font-size:.78rem; color:var(--ink-3); line-height:2;
}
/* وقتی فقط یک ویدیوی نتیجه هست، ستون دوم خالی نماند */
.success-grid.is-single{ grid-template-columns:minmax(0,1fr) !important; max-width:760px }

/* ============================================================
   متن معرفی بخش آغازین (زیر «میروریتی چگونه کار می‌کند؟»)
   ------------------------------------------------------------
   راست‌چین و RTL؛ همهٔ سطرها از یک لبهٔ راست (همان لبهٔ عنوان) شروع می‌شوند.
   پهنای بلوک جمع‌وجور (--hm-about-w) است و سطرها با text-wrap:balance
   هم‌طول و کنترل‌شده می‌شکنند؛ بدون justify و بدون کشیدن حروف.
   ============================================================ */
.hm-about{ --hm-about-w:30.5em; max-width:var(--hm-about-w); margin-inline:0 auto; direction:rtl; text-align:right }
.hm-about p{ margin:0; line-height:2.05; text-wrap:balance }
.hm-about p + p{ margin-top:.75em }
@media (max-width:940px){
  .hm-about{ --hm-about-w:32em }
}

/* ============================================================
   کارت ویدیوی معرفی — فقط بخش آغازین (پیشوند hv-)
   ------------------------------------------------------------
   نرم و آرام: قاب سفیدِ مایل به شیری با گوشه‌های خیلی گرد، سایهٔ
   لطیف و هالهٔ سبز پخش و رؤیایی پشت کارت. نشان «داستان میروریتی»
   مثل برچسبی شناور و کمی کج روی گوشهٔ بالا-چپ کارت می‌نشیند.
   همهٔ قاعده‌ها زیر .hv-stage‌اند و به قاب ویدیوی هیچ بخش دیگری نمی‌رسند.
   ============================================================ */
.hv-stage{
  --hv-pad-t:clamp(26px,3.4vw,44px);
  position:relative;
  isolation:isolate;
  padding:var(--hv-pad-t) clamp(10px,1.6vw,22px) clamp(24px,3vw,40px);
}

/* هالهٔ سبز پخش و رؤیایی پشت کارت */
.hv-halo{
  position:absolute; z-index:0; pointer-events:none;
  inset:6% -2% 0;
  border-radius:48% 52% 50% 50% / 54% 50% 50% 46%;
  background:
    radial-gradient(58% 62% at 40% 45%, rgba(88,190,120,.20) 0%, rgba(88,190,120,0) 70%),
    radial-gradient(52% 56% at 68% 68%, rgba(160,222,180,.26) 0%, rgba(160,222,180,0) 72%);
  filter:blur(52px);
  opacity:.9;
}

/* نشان شناور، کمی کج، روی گوشهٔ بالا-چپ کارت */
.hv-badge{
  position:absolute; z-index:3;
  top:calc(var(--hv-pad-t) - 16px);
  left:clamp(-2px,.6vw,10px);
  display:inline-flex; align-items:center; gap:9px;
  padding:6px 7px 6px 16px;
  background:rgba(255,255,253,.94);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.9);
  border-radius:999px;
  box-shadow:
    0 10px 26px -10px rgba(24,136,52,.32),
    0 0 22px rgba(120,205,150,.28),
    0 1px 2px rgba(13,50,26,.06);
  font-size:.8rem; font-weight:600; color:var(--ink); line-height:1.8;
  white-space:nowrap; pointer-events:none;
  transform:rotate(-4deg);
  transform-origin:30% 50%;
}
.hv-badge-ico{ flex:none; display:grid; place-items:center; width:24px; height:24px }
.hv-badge-ico svg{ width:24px; height:24px; display:block }

/* کارت نرم */
.hv-card{
  position:relative; z-index:1;
  width:100%;
  transition:transform 520ms cubic-bezier(.22,.61,.36,1);
}
.hv-rim{
  padding:clamp(8px,.9vw,11px);
  background:linear-gradient(160deg,#FFFFFF 0%,#FBFCF9 60%,#F6FAF6 100%);
  border:1px solid rgba(255,255,255,.95);
  border-radius:clamp(28px,3vw,38px);
  box-shadow:
    0 28px 60px -28px rgba(24,110,52,.26),
    0 8px 22px -12px rgba(13,50,26,.10),
    0 0 44px rgba(130,210,160,.16);
}

/* قاب ویدیو درون کارت: گوشهٔ گرد نرم و هم‌خوان با کارت */
.hv-stage .hv-frame{
  border:0;
  border-radius:clamp(21px,2.3vw,29px);
  box-shadow:none;
  background:#EEF3EF;
}
.hv-stage .hv-frame::after{ display:none }
/* پخش درون همان کارت: قاب همیشه ۱۶:۹ و هم‌اندازه می‌ماند (حتی اگر
   ابعاد فایل ویدیو فرق کند) و ویدیو (با همان تصویر کاور به‌عنوان poster) بدون پرش جای کاور را می‌گیرد. */
.hv-stage .hv-frame,
.hv-stage .hv-frame.is-portrait{ aspect-ratio:16/9; width:100%; max-width:none; margin:0 }
.hv-stage .hv-frame img.poster{ object-fit:cover; object-position:center }
.hv-stage .hv-frame video{ object-fit:cover; background:#EEF3EF }

/* ---------- دکمهٔ پخش: شیشه‌ای و سبک، آیکن سبز ---------- */
.hv-stage .hv-frame .play-ring{ display:none }
/* لایهٔ خیلی ملایم فقط برای خوانایی دکمه؛ تصویر تیره نمی‌شود */
.hv-stage .hv-frame .play-btn{
  background:radial-gradient(38% 46% at 50% 50%, rgba(13,30,20,.10) 0%, rgba(13,30,20,0) 100%);
}
.hv-stage .hv-frame .play-core{
  width:clamp(54px,5.8vw,74px); height:clamp(54px,5.8vw,74px);
  background:rgba(255,255,255,.52);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  backdrop-filter:blur(14px) saturate(1.4);
  border:1px solid rgba(255,255,255,.78);
  box-shadow:0 10px 30px -8px rgba(13,50,26,.22), 0 0 24px rgba(255,255,255,.35), inset 0 1px 0 rgba(255,255,255,.9);
  transition:transform 320ms cubic-bezier(.22,.61,.36,1), background 320ms ease;
}
.hv-stage .hv-frame .play-core svg{ width:26%; height:auto }
.hv-stage .hv-frame .play-btn:hover .play-core,
.hv-stage .hv-frame .play-btn:focus-visible .play-core{
  transform:scale(1.05);
  background:rgba(255,255,255,.7);
}

/* هاور: کارت فقط چند پیکسل آرام بالا می‌آید */
@media (hover:hover) and (pointer:fine){
  .hv-stage:hover .hv-card,
  .hv-stage:focus-within .hv-card{ transform:translateY(-3px) }
}

/* ---------- موبایل ---------- */
@media (max-width:640px){
  .hv-stage{ --hv-pad-t:26px; padding-inline:4px; padding-bottom:20px }
  .hv-badge{ font-size:.74rem; padding:5px 6px 5px 12px; gap:7px; left:0; transform:rotate(-3deg) }
  .hv-badge-ico,.hv-badge-ico svg{ width:21px; height:21px }
  .hv-rim{ border-radius:26px; padding:7px }
  .hv-stage .hv-frame{ border-radius:20px }
}

/* ---------- احترام به کاهش حرکت ---------- */
@media (prefers-reduced-motion:reduce){
  .hv-card, .hv-stage .hv-frame .play-core{ transition:none }
  .hv-stage:hover .hv-card,
  .hv-stage:focus-within .hv-card{ transform:none }
}

/* ============================================================
   کادر آمار زندهٔ صفحهٔ اصلی — پیشوند ls-
   ------------------------------------------------------------
   لحن این بخش آرام و انسانی است، نه داشبوردی: یک عنوان کوتاه،
   یک جملهٔ زمینه‌ساز، و یک کادر سفید یکپارچه با چهار ستون.
   سلسله‌مراتب: استیکر ← عدد ← برچسب ← جملهٔ احساسی.
   همهٔ قاعده‌ها زیر .ls-section محدود شده‌اند.
   ============================================================ */
.ls-section{ background:var(--green-l2) }

/* ---------- سرفصل بخش ---------- */
.ls-head{ text-align:center; margin-bottom:clamp(26px,3.6vw,44px) }
.ls-sprig{ display:block; width:34px; margin:0 auto 14px; opacity:.9 }
.ls-sprig svg{ display:block; width:100%; height:auto }
.ls-h{
  margin:0 0 10px;
  font-size:clamp(1.35rem,2.7vw,1.95rem); font-weight:800; line-height:1.6;
  color:var(--green-d); letter-spacing:0;
}
.ls-sub{
  margin:0 auto; max-width:60ch;
  font-size:clamp(.88rem,1.5vw,1rem); font-weight:400; line-height:2.1;
  color:var(--ink-3);
}

/* ---------- کادر یکپارچه ---------- */
.ls-box{
  display:grid; grid-template-columns:repeat(4,1fr);
  background:#FFFDFA;
  border:1px solid #F0F5F1;
  border-radius:clamp(24px,3vw,38px);
  box-shadow:0 20px 50px rgba(18,60,32,.07), 0 2px 8px rgba(18,60,32,.03);
  padding:clamp(20px,2.8vw,38px) clamp(8px,1.6vw,22px);
}

.ls-cell{
  position:relative; isolation:isolate;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  gap:3px;
  padding:clamp(12px,1.8vw,22px) clamp(8px,1.4vw,18px);
  text-align:center;
}
/* هم‌ترازی سطرها بین چهار ستون: استیکر با استیکر، عدد با عدد،
   برچسب با برچسب و جمله با جمله روی یک خط می‌نشینند — حتی وقتی
   یکی از جمله‌ها دو سطر می‌شود. */
@supports (grid-template-rows: subgrid){
  .ls-box{ grid-template-rows:auto auto auto auto }
  .ls-cell{
    display:grid; grid-row:span 4; grid-template-rows:subgrid;
    /* ستون داخلی باید تمام عرض خانه را بگیرد؛ بدون این خط، ستون
       ضمنی به‌اندازهٔ پهن‌ترین عنصر جمع می‌شود و کنار لبهٔ شروع
       می‌نشیند، و محتوا از مرکز ستون بیرون می‌افتد. */
    grid-template-columns:minmax(0,1fr);
    justify-items:center; align-content:start; row-gap:4px;
  }
  .ls-art{ align-self:end }
  /* جمله‌های یک‌سطری و دوسطری باید از یک خط شروع شوند، نه وسط‌چین سطر */
  .ls-micro{ align-self:start }
}
/* جداکنندهٔ عمودیِ بسیار نازک.
   در RTL، inset-inline-end لبهٔ چپِ خانه است؛ یعنی مرز میان همین خانه و
   خانهٔ بعدی. پس خط باید روی خانه‌هایی بنشیند که خانهٔ بعدی دارند
   (:not(:last-child))، نه روی خانه‌هایی که خانهٔ قبلی دارند — وگرنه مرز
   خانهٔ اول و دوم بی‌خط می‌ماند و یک خط اضافی روی لبهٔ خودِ کادر می‌افتد. */
.ls-cell:not(:last-child)::before{
  content:''; position:absolute; inset-block:18%; inset-inline-end:0; z-index:-1;
  width:1px; background:linear-gradient(180deg,rgba(24,136,52,0),#E8EFEA 24%,#E8EFEA 76%,rgba(24,136,52,0));
}

/* نور سبزِ بسیار کم‌رنگ پشت آمارِ زیر اشاره‌گر — نه کارت، نه قاب */
.ls-glow{
  position:absolute; z-index:-2; inset:2% 6% 6%;
  border-radius:50%;
  background:radial-gradient(58% 56% at 50% 42%, rgba(0,168,32,.20) 0%, rgba(0,168,32,0) 72%);
  filter:blur(26px);
  opacity:0; transform:scale(.9);
  transition:opacity 420ms cubic-bezier(.22,.61,.36,1), transform 420ms cubic-bezier(.22,.61,.36,1);
}

/* استیکر — پشتیبانِ عدد، نه رقیبش */
.ls-art{
  display:grid; place-items:center; height:64px; margin-bottom:6px;
  transition:transform 380ms cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
.ls-sticker{ display:block }

/* عدد — پررنگ و سبز، ولی نه غول‌آسا */
.ls-v{
  display:flex; align-items:baseline; justify-content:center; gap:10px;
  flex-wrap:wrap; line-height:1.35; min-height:1.35em;
}
/* رنگ عدد در همهٔ حالت‌ها یکی است: پیش‌فرض، هاور، فوکوس و در تمام طول
   انیمیشن شمارش. هیچ قاعدهٔ هاوریِ والد آن را عوض نمی‌کند. */
.ls-num,
.ls-cell:hover .ls-num,
.ls-cell:focus-within .ls-num,
.ls-cell:active .ls-num{
  font-size:clamp(1.5rem,2.8vw,2rem); font-weight:800; color:var(--green-d);
}
/* پشتیبان: اگر روزی متن مستقیم داخل .ls-v بنشیند، باز هم سبز می‌ماند */
.ls-v{ color:var(--green-d) }
.ls-unit{ font-size:.86rem; font-weight:700; color:var(--green-d); opacity:.92 }
.ls-l{ font-size:.93rem; font-weight:600; color:var(--ink); line-height:2 }

/* جملهٔ احساسی — به‌طور پیش‌فرض بسیار ملایم، با هاور روشن‌تر می‌شود */
.ls-micro{
  margin-top:5px; max-width:24ch;
  font-size:.775rem; font-weight:400; line-height:1.95;
  color:var(--ink-3); opacity:.55;
  transform:translateY(4px);
  transition:opacity 420ms cubic-bezier(.22,.61,.36,1),
             transform 420ms cubic-bezier(.22,.61,.36,1),
             color 420ms ease;
  will-change:opacity,transform;
}

/* اسکلت بارگذاری — تا رسیدن دادهٔ واقعی، هیچ عدد ساختگی نشان داده نمی‌شود */
.ls-skeleton{
  display:inline-block; width:4.2ch; height:1.35em; border-radius:8px;
  background:linear-gradient(90deg,#EDF4EF,#F7FBF8,#EDF4EF);
  background-size:200% 100%;
  animation:ls-shimmer 1.25s ease-in-out infinite;
}
@keyframes ls-shimmer{ 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* یادداشت فنی — هست، ولی رقیب تجربهٔ بخش نیست */
.ls-note{
  margin:clamp(16px,2.2vw,24px) auto 0; max-width:72ch; text-align:center;
  font-size:.72rem; color:var(--ink-3); opacity:.62; line-height:2.1;
}

/* ---------- هاور یک آمار: فقط همان یکی واکنش نشان می‌دهد ---------- */
@media (hover:hover) and (pointer:fine){
  .ls-cell:hover .ls-glow{ opacity:1; transform:scale(1) }
  .ls-cell:hover .ls-art{ transform:translateY(-4px) }
  .ls-cell:hover .ls-micro{ opacity:1; transform:translateY(0); color:var(--ink-2) }
}
/* دستگاه لمسی: همان آشکارشدن، یک‌بار با ورود آمار به دید */
.ls-cell.is-revealed .ls-micro{ opacity:1; transform:translateY(0); color:var(--ink-2) }

/* ---------- تبلت: دو در دو ---------- */
@media (max-width:900px){
  .ls-box{ grid-template-columns:repeat(2,1fr); row-gap:clamp(8px,2vw,18px) }
  @supports (grid-template-rows: subgrid){
    .ls-box{ grid-template-rows:repeat(8,auto) }
  }
  .ls-cell:not(:last-child)::before{ display:none }
  /* جداکننده بین ستون راست و چپِ هر سطر (در RTL: لبهٔ inline-end خانه‌های فرد) */
  .ls-cell:nth-child(odd)::before{
    content:''; display:block; position:absolute; inset-block:18%; inset-inline-end:0; z-index:-1;
    width:1px; background:linear-gradient(180deg,rgba(24,136,52,0),#E8EFEA 24%,#E8EFEA 76%,rgba(24,136,52,0));
  }
  .ls-cell:nth-child(n+3)::after{
    content:''; position:absolute; top:0; inset-inline:10%; z-index:-1; height:1px;
    background:linear-gradient(90deg,rgba(24,136,52,0),#EEF4F0 25%,#EEF4F0 75%,rgba(24,136,52,0));
  }
}

/* ---------- موبایل: یک ستون ---------- */
@media (max-width:520px){
  .ls-box{ grid-template-columns:1fr; padding:16px 14px }
  @supports (grid-template-rows: subgrid){
    .ls-box{ grid-template-rows:repeat(16,auto) }
  }
  .ls-cell::before,
  .ls-cell:not(:last-child)::before,
  .ls-cell:nth-child(odd)::before{ display:none }
  .ls-cell + .ls-cell::after{
    content:''; position:absolute; top:0; inset-inline:12%; z-index:-1; height:1px;
    background:linear-gradient(90deg,rgba(24,136,52,0),#EEF4F0 25%,#EEF4F0 75%,rgba(24,136,52,0));
  }
  .ls-cell:nth-child(n+3)::after{ inset-inline:12% }
  .ls-art{ height:56px }
  .ls-sticker{ width:56px; height:56px }
  .ls-micro{ max-width:30ch }
}

/* ---------- احترام به کاهش حرکت ---------- */
@media (prefers-reduced-motion:reduce){
  .ls-art, .ls-num, .ls-micro, .ls-glow{ transition:none }
  .ls-cell:hover .ls-art{ transform:none }
  /* جملهٔ احساسی بدون انیمیشن، از همان ابتدا خوانا */
  .ls-micro{ opacity:.85; transform:none; color:var(--ink-2) }
  .ls-skeleton{ animation:none }
}

/* (برگ‌های تزئینی دور ویدیو برداشته شدند — کارت ویدیو اکنون مینیمال است) */

/* /success-showcase.css */
/* ============================================================
   «با هم ممکنش کردیم» — نمای سینمایی
   ------------------------------------------------------------
   فقط همین بخش. همهٔ گزینشگرها با .ss شروع می‌شوند، پس هیچ
   قاعدهٔ سراسری، فونت، رنگ یا فاصلهٔ بخش دیگری تغییر نمی‌کند.
   رنگ‌ها از همان نظام رنگ فعلی سایت گرفته شده‌اند.
   ============================================================ */

.ss{
  position:relative; overflow:hidden; color:#fff;
  border-radius:clamp(20px,2.4vw,32px);
  background:linear-gradient(180deg,#0E3320 0%,#0B2415 62%,#0A2113 100%);
  box-shadow:0 34px 70px -44px rgba(8,40,22,.6);
  isolation:isolate;
}

/* ---------- صحنهٔ اصلی: تصویر پروژه، پس‌زمینهٔ خودِ بخش است ---------- */
.ss-stage{ position:relative; aspect-ratio:16/7.1; min-height:420px }
.ss-media{ position:absolute; inset:0 }
.ss-bg{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:opacity .34s ease, transform .6s ease;
}
.ss-video{ width:100%; height:100%; object-fit:contain; display:block; background:#06170D }

/* گرادیان سبز تیره: در سمت متن پررنگ، در سمت تصویر تقریباً شفاف،
   و پایین‌دست به‌آرامی در بدنهٔ سبز بخش حل می‌شود. */
.ss-veil{
  position:absolute; inset:0; pointer-events:none;
  transition:opacity .3s ease;
  background:
    linear-gradient(to left,
      rgba(8,36,20,.97) 0%, rgba(8,36,20,.95) 24%,
      rgba(9,39,22,.82) 40%, rgba(10,42,24,.52) 56%,
      rgba(10,42,24,.24) 72%, rgba(10,42,24,.07) 88%, rgba(10,42,24,0) 100%),
    linear-gradient(to top,
      #0B2415 0%, rgba(11,36,21,.78) 9%, rgba(11,36,21,.24) 26%, rgba(11,36,21,0) 46%),
    linear-gradient(to bottom, rgba(6,28,15,.42) 0%, rgba(6,28,15,0) 26%);
}

/* ---------- نشان کوچک بالا-چپ ---------- */
.ss-top{
  position:absolute; z-index:3; display:flex; align-items:center; gap:9px;
  top:clamp(14px,2vw,26px); left:clamp(14px,2.2vw,28px);
}
.ss-pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 15px; border-radius:999px;
  background:rgba(255,255,255,.93); color:var(--green-d);
  font-size:.82rem; font-weight:700; line-height:1.7;
  box-shadow:0 8px 22px -10px rgba(0,0,0,.5);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.ss-pill svg{ color:var(--green) }
.ss-all{
  display:inline-flex; align-items:center; padding:7px 13px; border-radius:999px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
  color:#DCEFE3; font-size:.78rem; font-weight:600; line-height:1.7;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:background .25s ease, color .25s ease;
}
.ss-all:hover{ background:rgba(255,255,255,.2); color:#fff }

/* ---------- دکمهٔ پخش ---------- */
.ss-play{
  position:absolute; z-index:3; top:46%; left:45%; transform:translate(-50%,-50%);
  width:clamp(72px,7vw,104px); aspect-ratio:1; padding:0; border:0; background:none;
  cursor:pointer; transition:opacity .3s ease, transform .3s ease;
}
.ss-play-core{
  position:absolute; inset:0; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.96); box-shadow:0 18px 46px -16px rgba(0,0,0,.6);
  transition:transform .3s ease, background .25s ease;
}
.ss-play-core svg{ transform:translateX(2px) }
.ss-play-ring{
  position:absolute; inset:-11px; border-radius:50%;
  border:1px solid rgba(255,255,255,.4);
  transition:inset .3s ease, opacity .3s ease;
}
.ss-play:hover .ss-play-core{ transform:scale(1.05) }
.ss-play:hover .ss-play-ring{ inset:-17px; opacity:.75 }

/* ---------- متن پروژه، روی سمت سبز ---------- */
.ss-copy{
  position:absolute; z-index:3; text-align:right;
  right:clamp(18px,3.4vw,46px); bottom:clamp(18px,3vw,40px);
  max-width:min(580px,60%);
  transition:opacity .3s ease, transform .34s ease;
}
.ss-eyebrow{ margin:0 0 6px; font-size:clamp(.8rem,1vw,.93rem); font-weight:600; color:#7FE7A1; line-height:1.9 }
.ss-h{ margin:0; color:#fff; font-weight:800; line-height:1.4; font-size:clamp(1.9rem,4.4vw,3.35rem) }
.ss-title{ margin:6px 0 0; color:#EAF6EE; font-weight:700; line-height:1.9; font-size:clamp(1rem,1.7vw,1.45rem) }

.ss-impact{
  margin-top:clamp(12px,1.7vw,18px);
  display:inline-flex; align-items:center; flex-wrap:nowrap; gap:10px 12px;
  max-width:100%; overflow:hidden; padding:9px 16px; border-radius:999px;
  background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  color:#EAF6EE; font-size:clamp(.78rem,.96vw,.9rem); line-height:2;
}
.ss-imp{ display:inline-flex; align-items:center; gap:7px; min-width:0 }
/* کپسول همیشه یک‌سطری می‌ماند؛ اگر متن بلند بود، با سه‌نقطه کوتاه می‌شود */
.ss-imp > span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
/* نتیجهٔ عددی کامل می‌ماند؛ اگر جا کم آمد، جملهٔ دوم کوتاه می‌شود */
.ss-impact > .ss-imp:first-of-type{ flex:0 0 auto }
.ss-impact > .ss-imp:last-of-type{ flex:0 1 auto }
.ss-imp svg{ flex:none; color:#9BEFB6 }
.ss-sep{ display:inline-block; width:1px; height:15px; background:rgba(255,255,255,.3) }

/* کنش‌ها — همان مسیرهای قبلی این بخش، فقط با پوستهٔ شیشه‌ای */
.ss-acts{ margin-top:clamp(12px,1.7vw,18px); display:flex; flex-wrap:wrap; align-items:center; gap:8px }
.ss-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:10px 16px; border-radius:999px; cursor:pointer;
  font-family:inherit; font-size:.86rem; font-weight:700; line-height:1.7;
  color:#EAF6EE; background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.26);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:background .25s ease, color .25s ease, transform .25s ease;
}
.ss-btn:hover{ background:rgba(255,255,255,.2); color:#fff }
.ss-btn.is-primary{
  background:var(--green); border-color:transparent; color:#fff;
  box-shadow:0 14px 30px -14px rgba(0,168,32,.9);
}
.ss-btn.is-primary:hover{ background:#00B825 }
/* دکمهٔ اشتراک‌گذاری مشترک است؛ فقط داخل همین بخش پوسته‌اش عوض می‌شود */
.ss-share .btn{
  border-radius:999px; padding:10px 16px; font-size:.86rem; font-weight:700;
  color:#EAF6EE; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.26);
}
.ss-share .btn:hover{ background:rgba(255,255,255,.2); color:#fff; border-color:rgba(255,255,255,.4) }

/* ---------- حالت‌های صحنه ---------- */
.ss-stage.is-out .ss-bg{ opacity:0; transform:scale(1.025) }
.ss-stage.is-out .ss-copy{ opacity:0; transform:translateY(10px) }
.ss-stage.is-out .ss-play{ opacity:0 }
.ss-stage.is-playing .ss-veil,
.ss-stage.is-playing .ss-copy,
.ss-stage.is-playing .ss-play,
.ss-stage.is-playing .ss-top{ opacity:0; pointer-events:none }

/* ---------- ردیف پیش‌نمایش‌ها و ناوبری ---------- */
.ss-deck{
  position:relative; display:flex; align-items:center;
  gap:clamp(14px,2vw,26px);
  padding:clamp(14px,1.8vw,22px) clamp(16px,2.4vw,30px) clamp(18px,2.2vw,26px);
}
.ss-nav{ flex:none; display:flex; flex-direction:column; align-items:center; gap:2px }
.ss-arrows{ display:flex; gap:10px }
.ss-arrow{
  width:clamp(40px,3.2vw,50px); aspect-ratio:1; padding:0; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  color:#EAF6EE; background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.18);
  transition:background .25s ease, color .25s ease, box-shadow .25s ease;
}
.ss-arrow:hover{ background:rgba(255,255,255,.2); color:#fff }
.ss-arrow.is-next{
  background:var(--green); border-color:transparent; color:#fff;
  box-shadow:0 12px 26px -12px rgba(0,168,32,.95);
}
.ss-arrow.is-next:hover{ background:#00B825 }
.ss-cnt{ text-align:center }
.ss-count{ margin:8px 0 0; font-size:.9rem; color:#D9EFE0; line-height:1.8 }
.ss-count b{ color:#fff; font-weight:800 }
.ss-count i{ font-style:normal; color:#8FB39D; margin-inline:2px }
.ss-count-l{ margin:1px 0 0; font-size:.73rem; color:#9FC2AC; line-height:1.8 }

.ss-track{
  flex:1 1 auto; min-width:0; display:flex; gap:12px; padding:3px;
  overflow-x:auto; scroll-behavior:smooth; scroll-snap-type:x proximity;
  scrollbar-width:none; -ms-overflow-style:none;
}
.ss-track::-webkit-scrollbar{ display:none }

.ss-card{
  flex:0 0 clamp(272px,42%,440px); scroll-snap-align:center;
  display:flex; align-items:center; gap:12px; padding:10px;
  border-radius:16px; cursor:pointer; text-align:right;
  font-family:inherit; color:#CFE5D7;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09);
  transition:background .28s ease, border-color .28s ease, box-shadow .28s ease, color .28s ease;
}
.ss-card:hover{ background:rgba(255,255,255,.1) }
.ss-card.is-on{
  color:#fff; background:rgba(255,255,255,.1); border-color:#5FE38F;
  box-shadow:0 0 0 1px rgba(95,227,143,.45), 0 14px 34px -22px rgba(0,0,0,.9);
}
.ss-card-th{
  position:relative; flex:none; display:block; overflow:hidden;
  width:clamp(84px,7vw,104px); aspect-ratio:16/10;
  border-radius:11px; background:#0B2415;
}
.ss-card-th img{ width:100%; height:100%; object-fit:cover; display:block; transition:filter .28s ease, transform .4s ease }
.ss-card:not(.is-on) .ss-card-th img{ filter:brightness(.68) saturate(.92) }
.ss-card:hover .ss-card-th img{ transform:scale(1.04) }
.ss-card-play{
  position:absolute; inset:0; margin:auto; width:26px; height:26px; border-radius:50%;
  display:grid; place-items:center; background:rgba(0,0,0,.42);
  border:1px solid rgba(255,255,255,.42);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
.ss-card-play svg{ transform:translateX(1px) }
.ss-card-txt{ display:grid; gap:2px; min-width:0 }
.ss-card-t{ font-weight:700; font-size:.86rem; line-height:1.85; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.ss-card-s{ font-size:.74rem; color:#A8CBB5; line-height:1.9; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.ss-card.is-on .ss-card-s{ color:#C9E6D3 }

/* ---------- دسترس‌پذیری ---------- */
.ss :focus-visible{ outline:2px solid #8FF0AE; outline-offset:3px; border-radius:12px }

/* ============================================================
   تبلت
   ============================================================ */
@media (max-width:1100px){
  .ss-stage{ aspect-ratio:16/8; min-height:400px }
  .ss-copy{ max-width:68% }
  .ss-card{ flex-basis:clamp(250px,48%,360px) }
}

@media (max-width:860px){
  .ss-stage{ aspect-ratio:auto; height:clamp(460px,68vh,580px); min-height:0 }
  /* روی صفحهٔ باریک، خوانایی از پایین می‌آید نه از کنار */
  .ss-veil{
    background:
      linear-gradient(to top,
        #0B2415 0%, rgba(10,34,20,.97) 34%, rgba(11,36,21,.86) 48%,
        rgba(11,36,21,.52) 64%, rgba(10,42,24,.16) 86%, rgba(10,42,24,0) 100%),
      linear-gradient(to bottom, rgba(6,28,15,.4) 0%, rgba(6,28,15,0) 26%);
  }
  .ss-copy{ right:clamp(16px,4vw,24px); left:clamp(16px,4vw,24px); max-width:none; bottom:20px }
  .ss-play{ top:29% }
  /* روی صفحهٔ باریک، متن روی روشن‌ترین نقطهٔ تصویر هم خوانا بماند */
  .ss-eyebrow, .ss-h, .ss-title{ text-shadow:0 2px 14px rgba(5,24,13,.55) }
  .ss-deck{ flex-direction:column-reverse; align-items:stretch; gap:14px }
  .ss-nav{ flex-direction:row; align-items:center; justify-content:space-between; width:100% }
  .ss-cnt{ text-align:start }
  .ss-count{ margin:0 }
  .ss-card{ flex-basis:clamp(240px,62vw,300px) }
}

/* ============================================================
   موبایل
   ============================================================ */
@media (max-width:640px){
  .ss{ border-radius:20px }
  .ss-stage{ height:clamp(450px,78vh,540px) }
  .ss-top{ top:12px; left:12px; gap:7px }
  .ss-pill{ padding:7px 12px; font-size:.75rem }
  .ss-all{ padding:6px 11px; font-size:.72rem }
  .ss-h{ font-size:clamp(1.6rem,7.6vw,2.2rem) }
  .ss-impact{ padding:8px 13px; gap:6px 10px; border-radius:18px; flex-wrap:wrap }
  .ss-acts{ gap:6px }
  .ss-btn,
  .ss-share .btn{ padding:9px 13px; font-size:.79rem }
  .ss-card{ flex-basis:78vw; padding:9px; border-radius:14px }
}

/* ---------- احترام به «کاهش حرکت» ---------- */
@media (prefers-reduced-motion:reduce){
  .ss-bg, .ss-copy, .ss-play, .ss-card, .ss-card-th img, .ss-arrow, .ss-btn{ transition:none !important }
  .ss-track{ scroll-behavior:auto }
}

/* /home-cards-photo.css */
/* ============================================================
   کارت‌های کمپینِ صفحهٔ اصلی — فقط ناحیهٔ تصویر و ردیف محل
   ------------------------------------------------------------
   همهٔ قاعده‌ها به .c-card.hcc محدودند. کارت‌های صفحهٔ «کمپین‌ها»،
   گالری و هر جای دیگر سایت این کلاس را نمی‌گیرند، پس دقیقاً مثل
   قبل می‌مانند. هیچ قاعدهٔ سراسری، رنگ، فونت یا مؤلفهٔ مشترکی
   اینجا بازنویسی نشده و لایهٔ «پرشدن با آب» (.wfh-*) اصلاً
   هدف هیچ گزینشگری نیست.
   ============================================================ */

/* ناحیهٔ تصویر: همان نسبت ۱۶:۱۰ و همان ارتفاع قبلی؛ فقط عکس کمی
   از لبه‌ها فاصله می‌گیرد تا شناور دیده شود. */
.c-card.hcc .c-media{
  box-sizing:border-box;
  padding:12px 12px 0;
  background:transparent;
}

/* قاب شناور */
.c-card.hcc .hcc-frame{
  position:relative; display:block; width:100%; height:100%;
  border-radius:16px; overflow:hidden; background:#E9F1EB;
  box-shadow:0 8px 20px -12px rgba(16,40,26,.45), 0 1px 3px rgba(16,40,26,.10);
}
.c-card.hcc .hcc-frame img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
/* ریزحرکت هاور: فقط ۲٪ بزرگ‌نمایی نرم روی خود عکس */
@media (hover:hover) and (pointer:fine){
  .c-card.hcc:hover .hcc-frame img{ transform:scale(1.02) }
}

/* پردهٔ خوانایی فقط پشت عنوان، در نوار بالایی و بدون ته‌رنگ سبز؛
   دوسوم پایین عکس کاملاً دست‌نخورده و طبیعی می‌ماند. */
.c-card.hcc .hcc-frame .veil{
  position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(180deg,
    rgba(10,18,13,.60) 0%, rgba(10,18,13,.34) 26%,
    rgba(10,18,13,.10) 44%, rgba(10,18,13,0) 58%);
}
.c-card.hcc .hcc-frame .c-title-on{ inset-inline:14px; top:12px }

/* ردیف زیر تصویر: محل در راست، برچسب‌ها در سمت دیگر */
.c-card.hcc .hcc-meta{
  display:flex; align-items:center; justify-content:space-between;
  gap:8px 12px; flex-wrap:wrap;
  padding:10px 18px 0;
}
.c-card.hcc .hcc-loc{
  display:inline-flex; align-items:center; gap:5px;
  font-size:.82rem; font-weight:600; color:var(--ink-2); line-height:1.9;
}
.c-card.hcc .hcc-loc svg{ color:var(--green); flex:none }
.c-card.hcc .hcc-tags{ display:flex; align-items:center; gap:6px; flex-wrap:wrap }
/* همان برچسب‌های قبلی، فقط روی زمینهٔ روشن خوانا می‌شوند */
.c-card.hcc .hcc-tags .chip{ font-size:.74rem; padding:4px 10px }
.c-card.hcc .hcc-tags .chip-dark{
  background:var(--green-l); color:var(--green-d);
  -webkit-backdrop-filter:none; backdrop-filter:none;
}

/* بدنهٔ کارت کمی جمع‌تر می‌شود تا ردیف تازه ارتفاع اضافه نکند */
.c-card.hcc .c-body{ padding-top:10px }

@media (max-width:640px){
  .c-card.hcc .c-media{ padding:10px 10px 0 }
  .c-card.hcc .hcc-frame{ border-radius:14px }
  .c-card.hcc .hcc-meta{ padding:9px 16px 0 }
}

@media (prefers-reduced-motion:reduce){
  .c-card.hcc .hcc-frame img{ transition:none !important }
  .c-card.hcc:hover .hcc-frame img{ transform:none !important }
}

/* /campaign-journey.css */
/* ============================================================
   «مسیر یک کمپین» — پازل هشت‌قطعه‌ای، صفحهٔ دربارهٔ میروریتی
   ------------------------------------------------------------
   همهٔ گزینشگرها زیر .cj اند. هیچ قاعدهٔ سراسری، فونت، رنگ یا
   مؤلفهٔ مشترکی بازنویسی نشده و هیچ بخش دیگری از سایت این
   کلاس‌ها را ندارد.
   ============================================================ */

.cj{
  --dark:#1E5B33;
  --ink-soft:#7E8D84;
  position:relative;
  /* این بخش کمی از ستون متن پهن‌تر می‌شود تا هشت قطعه کنار هم جا شوند.
     فقط روی همین بخش اثر دارد و چیدمان بقیهٔ صفحه را جابه‌جا نمی‌کند. */
  --cj-w:min(calc(100vw - 24px), 1560px);
  width:var(--cj-w);
  margin-inline:calc((100% - var(--cj-w)) / 2);
  margin-top:clamp(10px,1.6vw,18px);
  padding:clamp(22px,3vw,40px) clamp(14px,2.6vw,42px) clamp(24px,3vw,38px);
  border-radius:var(--r-l);
  background:
    radial-gradient(90% 70% at 50% 0%, #FFFFFF 0%, #FCFBF7 42%, #F6F8F3 100%);
}
.cj-defs{ position:absolute; width:0; height:0; overflow:hidden }

/* ---------- سربرگ ---------- */
.cj-top{ text-align:center; position:relative; z-index:2 }
.cj-pill{
  display:inline-block; margin:0 0 clamp(12px,1.6vw,18px);
  padding:6px 18px; border-radius:999px;
  background:#E9F6ED; color:var(--green-d);
  font-size:.86rem; font-weight:700; line-height:1.9;
}
.cj-title{
  margin:0; color:var(--ink); font-weight:800; line-height:1.55;
  font-size:clamp(1.5rem,3.1vw,2.35rem);
}
.cj-title em{ font-style:normal; color:var(--green-d) }
.cj-sub{
  margin:10px auto 0; max-width:60ch; color:var(--ink-2);
  font-size:clamp(.85rem,1.05vw,.96rem); line-height:2.1;
}

/* ============================================================
   ریل پازل — افقی
   ============================================================ */
.cj-rail{
  list-style:none; margin:clamp(30px,4vw,52px) 0 0; padding:0;
  display:flex; align-items:stretch; justify-content:center;
}
/* عرض هر قطعه و میزان هم‌پوشانی، هر دو درصدی از خودِ ریل‌اند تا
   زبانه و فرورفتگی دقیقاً روی هم بنشینند:
   W = 100% / (8 - 7×0.115) = 13.899%   |   overlap = 0.115×W = 1.5984% */
.pz{
  position:relative; flex:0 0 13.899%; min-width:0;
  aspect-ratio:1 / 1.3;
  opacity:0;
}
.pz + .pz{ margin-inline-start:-1.5984% }

/* ورود: حرکت کوتاه و قفل‌شدن در قطعهٔ قبلی */
@keyframes pz-snap{
  0%   { opacity:0; transform:translateX(-22px) scale(.985) }
  62%  { opacity:1; transform:translateX(0) scale(1.021) }
  100% { opacity:1; transform:translateX(0) scale(1) }
}
.cj.is-on .pz{
  animation:pz-snap 280ms cubic-bezier(.22,.85,.28,1) both;
  animation-delay:var(--d,0s);
}
.cj.is-on.no-anim .pz{ animation:none; opacity:1 }

/* ---------- سایهٔ هم‌شکل قطعه ---------- */
.pz-sh{
  position:absolute; inset:0; display:block; z-index:0;
  background:#2A4635;
  clip-path:var(--clip-h);
  filter:blur(6px);
  opacity:.2;
  transform:translateY(5px) scale(1.008);
  transition:transform 220ms cubic-bezier(.25,.85,.3,1), opacity 220ms ease, filter 220ms ease;
  pointer-events:none;
}

/* ---------- خود قطعه ---------- */
.pz-face{
  position:absolute; inset:0; z-index:2; outline:none;
  display:flex; flex-direction:column; align-items:center;
  padding:clamp(16px,1.6vw,24px) clamp(20px,2.1vw,30px) clamp(14px,1.4vw,20px);
  clip-path:var(--clip-h);
  background:
    linear-gradient(168deg, rgba(255,255,255,.52) 0%, rgba(255,255,255,0) 46%),
    linear-gradient(0deg, rgba(20,45,28,.10) 0%, rgba(20,45,28,0) 34%),
    var(--tone);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.55),
    inset 0 -6px 12px -6px rgba(22,50,32,.28);
  transition:
    transform 220ms cubic-bezier(.25,.85,.3,1),
    background 220ms ease,
    box-shadow 220ms ease,
    -webkit-backdrop-filter 220ms ease,
    backdrop-filter 220ms ease;
}

/* شمارهٔ مرحله */
.pz-n{
  display:grid; place-items:center; flex:none;
  width:clamp(26px,2.2vw,32px); height:clamp(26px,2.2vw,32px);
  border-radius:50%; background:var(--dark); color:#fff;
  font-size:clamp(.74rem,.9vw,.86rem); font-weight:800; line-height:1;
  box-shadow:0 3px 8px -4px rgba(16,48,26,.8), inset 0 1px 0 rgba(255,255,255,.28);
}
.pz-ico{
  display:grid; place-items:center; flex:none;
  margin:clamp(8px,1vw,14px) 0 clamp(8px,.9vw,12px);
  color:var(--dark);
}
.pz-txt{ display:block; width:100% }
.pz-t{
  margin:0 0 6px; width:100%; text-align:center;
  font-size:clamp(.82rem,1vw,.98rem); font-weight:800;
  color:#20312A; line-height:1.75;
}
.pz-d{
  margin:0; width:100%; text-align:center;
  font-size:clamp(.68rem,.82vw,.8rem); color:#54685C; line-height:1.95;
}

/* هم‌ترازی متن: در چیدمان افقی، زبانهٔ لبهٔ چپ (۱۱٫۵٪ عرض قطعه، همان TH در
   campaign-journey.js) جزو بدنهٔ دیده‌شدهٔ کارت نیست؛ این مقدار با جابه‌جایی فاصله‌ها
   جبران می‌شود تا محتوا دقیقاً وسط بدنهٔ خودِ کارت بنشیند. نیمی از آن از راست
   کم و نیمی به چپ افزوده می‌شود تا پهنای متن و شکست سطرها عوض نشود.
   قطعهٔ آخر زبانه ندارد. */
@media (min-width:1161px){
  .pz:not(.is-last) .pz-face{
    padding-left:calc(clamp(20px,2.1vw,30px) + 5.75%);
    padding-right:calc(clamp(20px,2.1vw,30px) - 5.75%);
  }
}

/* قطعهٔ پایانی — سبز تیرهٔ میروریتی */
.pz.is-last .pz-face{
  background:
    linear-gradient(168deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 46%),
    linear-gradient(0deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,0) 36%),
    var(--tone);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.22),
    inset 0 -8px 16px -8px rgba(0,0,0,.45);
}
.pz.is-last .pz-n{ background:#57B67F; color:#0E2E19 }
.pz.is-last .pz-ico{ color:#EAFBF0 }
.pz.is-last .pz-t{ color:#FFFFFF }
.pz.is-last .pz-d{ color:#CDE7D6 }

/* نور پشت قطعهٔ پایانی — ثابت، ملایم و بدون تپش */
.pz-glow{
  position:absolute; z-index:0; inset:-26% -22%;
  display:block; pointer-events:none; border-radius:46%;
  background:
    radial-gradient(closest-side, rgba(64,208,118,.78) 0%, rgba(46,184,100,.42) 46%, rgba(46,184,100,.12) 70%, rgba(46,184,100,0) 84%);
  filter:blur(20px);
  opacity:0; transform:scale(.92);
}
@keyframes pz-light{
  0%   { opacity:0;   transform:scale(.9) }
  28%  { opacity:1;   transform:scale(1.07) }
  100% { opacity:.62; transform:scale(1) }
}
.pz-edge{
  position:absolute; z-index:1; inset:0; display:block; pointer-events:none;
  clip-path:var(--clip-h);
  background:#45DD86;
  transform:scale(1.035);
  filter:blur(7px);
  opacity:0;
}
@keyframes pz-edge-on{
  0%   { opacity:0;   transform:scale(1.005) }
  28%  { opacity:.95; transform:scale(1.06) }
  100% { opacity:.5;  transform:scale(1.035) }
}
.cj.is-on .pz.is-last .pz-glow{
  animation:pz-light 620ms cubic-bezier(.25,.8,.3,1) both;
  animation-delay:calc(var(--d,0s) + .12s);
}
.cj.is-on .pz.is-last .pz-edge{
  animation:pz-edge-on 620ms cubic-bezier(.25,.8,.3,1) both;
  animation-delay:calc(var(--d,0s) + .12s);
}
.cj.is-on.no-anim .pz.is-last .pz-glow{ animation:none; opacity:.62; transform:scale(1) }
.cj.is-on.no-anim .pz.is-last .pz-edge{ animation:none; opacity:.5; transform:scale(1.035) }

/* ============================================================
   هاور — فقط همان قطعه
   ============================================================ */
.pz:hover, .pz.is-focus{ z-index:20 }

@media (hover:hover) and (pointer:fine){
  .pz:hover .pz-face{
    transform:translateY(-4px) scale(1.06);
    background:
      linear-gradient(168deg, rgba(255,255,255,.78) 0%, rgba(255,255,255,.26) 52%),
      linear-gradient(0deg, rgba(255,255,255,.3), rgba(255,255,255,.3)),
      var(--tone);
    box-shadow:
      inset 0 2px 0 rgba(255,255,255,.9),
      inset 0 0 0 1px rgba(255,255,255,.4),
      inset 0 -8px 16px -8px rgba(22,50,32,.24);
    -webkit-backdrop-filter:blur(8px) saturate(1.05);
    backdrop-filter:blur(8px) saturate(1.05);
  }
  .pz:hover .pz-sh{
    transform:translateY(18px) scale(1.03);
    opacity:.26; filter:blur(17px);
  }
  .pz.is-last:hover .pz-face{
    background:
      linear-gradient(168deg, rgba(255,255,255,.3) 0%, rgba(255,255,255,.06) 52%),
      linear-gradient(0deg, rgba(120,220,160,.16), rgba(120,220,160,.16)),
      var(--tone);
    box-shadow:
      inset 0 2px 0 rgba(255,255,255,.34),
      inset 0 0 0 1px rgba(255,255,255,.18),
      inset 0 -8px 16px -8px rgba(0,0,0,.4);
  }
}
/* صفحهٔ لمسی: همان حالت، با نگه‌داشتن انگشت */
.pz-face:active{ transform:translateY(-3px) scale(1.04) }
.pz.is-focus .pz-face{
  transform:translateY(-4px) scale(1.06);
  box-shadow:inset 0 0 0 2px #8FF0AE, inset 0 2px 0 rgba(255,255,255,.8);
}

/* ---------- نوار پایانی ---------- */
.cj-foot{ margin-top:clamp(26px,3.4vw,42px); text-align:center }
.cj-foot-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 20px; border-radius:999px;
  background:#E9F6ED; color:var(--green-d);
  font-size:.9rem; font-weight:700; line-height:1.9;
}

/* ============================================================
   واکنش‌گرایی — زیر ۱۱۶۰ پیکسل، پازل عمودی می‌شود
   هر هشت قطعه همچنان در هم قفل‌اند و ترتیب ۱ تا ۸ روشن می‌ماند.
   ============================================================ */
@media (max-width:1160px){
  /* در عرض‌های کم، بخش دیگر پهن‌تر از ستون متن نمی‌شود */
  .cj{ width:auto; margin-inline:0; overflow-x:clip }
  .pz-glow{ inset:-14% -8% }
  .cj-rail{ flex-direction:column; align-items:center; margin-top:clamp(24px,4vw,40px) }
  .pz{
    /* ارتفاع قطعی تا عمق زبانه و میزان هم‌پوشانی دقیقاً بخوانند */
    --vh:clamp(174px,25vw,200px);
    flex:0 0 auto; width:min(430px,100%); aspect-ratio:auto; height:var(--vh);
  }
  .pz + .pz{ margin-inline-start:0; margin-top:calc(var(--vh) * -0.125) }
  .pz-sh, .pz-face, .pz-edge{ clip-path:var(--clip-v) }
  .pz-face{
    flex-direction:row; align-items:center; gap:15px;
    padding:calc(var(--vh) * .125 + 10px) 20px;
  }
  .pz-ico{ margin:0 }
  .pz-txt{ flex:1 1 auto; min-width:0 }
  .pz-t, .pz-d{ text-align:center }
  .pz-d{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden }
}
@media (max-width:1160px){
  @keyframes pz-snap{
    0%   { opacity:0; transform:translateY(-18px) scale(.985) }
    62%  { opacity:1; transform:translateY(0) scale(1.021) }
    100% { opacity:1; transform:translateY(0) scale(1) }
  }
}
@media (max-width:520px){
  .cj{ padding:20px 12px 26px }
  .pz{ --vh:clamp(200px,52vw,230px); width:100% }
  .pz-face{ padding-inline:16px; gap:12px }
  .pz-t{ font-size:.92rem }
  .pz-d{ font-size:.77rem; -webkit-line-clamp:4 }
}

/* ============================================================
   احترام به «کاهش حرکت»
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .pz{ opacity:1 !important; animation:none !important }
  .pz-face, .pz-sh{ transition:none !important }
  .pz:hover .pz-face{ transform:none !important }
  .pz-glow{ animation:none !important; opacity:.62 !important; transform:scale(1) !important }
  .pz-edge{ animation:none !important; opacity:.5 !important; transform:scale(1.035) !important }
}

/* /partners-orbit.css */
/* ==========================================================================
   بخش «همراهان میروریتی» — کاملاً محصور در .mp-section
   هیچ انتخابگر سراسری ندارد و روی بخش‌های دیگر اثر نمی‌گذارد.
   اندازه‌ها همه از --mp-k (ضریب مقیاس) می‌آیند تا هر سه دایره دقیقاً هم‌اندازه
   و تناسب‌ها ثابت بمانند.  دیسک = 256px × k   |   مدار = دیسک × 1.3
   کارت نام‌ها شناور است (موقعیت مطلق) و هیچ فضایی در چیدمان نمی‌گیرد.
   ========================================================================== */
.mp-section {
  --mp-bg: #faf9f7;
  --mp-title: #151515;
  --mp-sub: #5f5f5f;
  --mp-muted: #6f6f6f;
  --mp-k: .61;                                    /* دیسک ≈۱۵۶px ، مدار ≈۲۰۳px */
  --mp-disc: calc(256px * var(--mp-k));
  --mp-orbit: calc(var(--mp-disc) * 1.3);
  --mp-card: 232px;                               /* عرض کارت نام‌ها (تا ۵ نام) */
  --mp-speed: 48s;
  position: relative;
  direction: rtl;
  background: var(--mp-bg);
  color: var(--mp-title);
  padding-block: clamp(28px, 2.8vw, 44px) clamp(22px, 2.2vw, 32px);
  padding-inline: 16px;
  /* کارت شناور می‌تواند از لبهٔ بالای بخش بیرون بزند؛ فقط افقی بریده می‌شود */
  overflow-x: clip;
  overflow-y: visible;
  isolation: isolate;
  z-index: 1;
}
.mp-section *, .mp-section *::before, .mp-section *::after { box-sizing: border-box; }

.mp-inner { max-width: 1320px; margin-inline: auto; }

.mp-head { text-align: center; }
.mp-title {
  margin: 0;
  font-size: clamp(30px, 3.1vw, 52px);
  font-weight: 800;
  line-height: 1.35;
  color: var(--mp-title);
  letter-spacing: 0;
}
.mp-sub {
  margin: clamp(4px, .5vw, 8px) 0 0;
  font-size: clamp(16px, 1.45vw, 24px);
  font-weight: 400;
  line-height: 1.8;
  color: var(--mp-sub);
}

/* ---------- ردیف سه‌تایی (برنز | نقره‌ای | طلایی) ---------- */
.mp-row {
  list-style: none;
  max-width: 780px;
  margin: clamp(14px, 1.6vw, 24px) auto 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-items: center;
  column-gap: clamp(8px, 2vw, 32px);
}
.mp-item { width: 100%; display: flex; justify-content: center; min-width: 0; }

/* ---------- تم‌های فلزی ---------- */
.mp-tier--gold {
  --t-base: #d4af37;
  --t-hi: #fff0b3;
  --t-mid: #e8b547;
  --t-lo: #a86c15;
  --t-deep: #7a4c06;
  --t-face1: #e6b24e; --t-face2: #b67d22; --t-face3: #93600f;
  --t-ring: #e6b53c;
  --t-glow: rgba(246, 190, 60, .6);
  --t-box1: #fffaeb; --t-box2: #fbeec9;
  --t-box-border: rgba(226, 190, 90, .45);
  --t-name: #4a3508;
  --t-text: #fff4da;
  --t-text-shadow: rgba(110, 76, 6, .55);
}
.mp-tier--silver {
  --t-base: #a7adb4;
  --t-hi: #fbfcfd;
  --t-mid: #c3c7cb;
  --t-lo: #7c8086;
  --t-deep: #55595e;
  --t-face1: #aaabad; --t-face2: #7d7e80; --t-face3: #636466;
  --t-ring: #b4b9bf;
  --t-glow: rgba(160, 168, 178, .5);
  --t-box1: #fbfbfb; --t-box2: #efeff0;
  --t-box-border: rgba(170, 176, 184, .45);
  --t-name: #2f3236;
  --t-text: #ffffff;
  --t-text-shadow: rgba(50, 54, 60, .55);
}
.mp-tier--bronze {
  --t-base: #b7794b;
  --t-hi: #f6cfa8;
  --t-mid: #c58652;
  --t-lo: #7b4520;
  --t-deep: #56290c;
  --t-face1: #b87c4b; --t-face2: #8a5027; --t-face3: #6a3814;
  --t-ring: #d08a52;
  --t-glow: rgba(236, 140, 70, .55);
  --t-box1: #fffaf6; --t-box2: #f8eadf;
  --t-box-border: rgba(214, 160, 120, .45);
  --t-name: #5a2c0e;
  --t-text: #f8dcc4;
  --t-text-shadow: rgba(70, 34, 10, .6);
}

/* ---------- یک واحد حامی = دایره + مدار + گوی‌ها (کل ناحیه قابل هاور و کلیک) ---------- */
.mp-group {
  position: relative;
  width: var(--mp-orbit);
  height: var(--mp-orbit);
  flex: 0 0 auto;
  border-radius: 50%;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .3s ease, filter .3s ease;
}
.mp-group::before { /* ناحیهٔ هاور شامل هالهٔ نور دور مدار هم باشد */
  content: "";
  position: absolute;
  inset: -8%;
  border-radius: 50%;
}

/* کارت نام‌ها — مطلق، وسطِ بالای دایره؛ پیش‌فرض پنهان */
.mp-box {
  position: absolute;
  z-index: 3;
  left: 50%;
  /* کارت کمی روی لبهٔ بالای مدار می‌نشیند و نوکِ نشانگر به لبهٔ دیسک می‌رسد */
  bottom: calc(100% - var(--mp-orbit) * .1 + 4px);
  width: var(--mp-card);
  margin-left: calc(var(--mp-card) / -2);
  min-height: 170px;
  max-height: 240px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 14px 16px 12px;
  border-radius: 16px;
  text-align: center;
  background: linear-gradient(180deg, var(--t-box1), var(--t-box2));
  border: 1px solid var(--t-box-border);
  box-shadow:
    0 16px 34px -14px rgba(60, 40, 10, .25),
    0 0 36px -4px var(--t-glow),
    inset 0 1px 0 rgba(255, 255, 255, .95);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px) scale(.97);
  transform-origin: 50% 100%;
  transition: opacity .28s ease, transform .28s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .28s;
}
.mp-box::after { /* نشانگر رو به دایره */
  content: "";
  position: absolute;
  left: var(--mp-ptr, 50%);
  bottom: -8px;
  width: 16px;
  height: 16px;
  background: var(--t-box2);
  border-right: 1px solid var(--t-box-border);
  border-bottom: 1px solid var(--t-box-border);
  border-bottom-right-radius: 4px;
  transform: translateX(-50%) rotate(45deg);
}
.mp-names {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.75;
  color: var(--t-name);
}
.mp-divider {
  display: block;
  height: 1px;
  margin: 7px auto 6px;
  width: 58%;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.14), transparent);
}
.mp-more {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: color-mix(in srgb, var(--t-name) 85%, #777);
}

/* مدار + دایره */
.mp-stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.mp-halo {
  position: absolute;
  inset: -12%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--t-glow) 0%, transparent 62%);
  opacity: .6;
  filter: blur(calc(16px * var(--mp-k)));
  transition: opacity .3s ease;
  pointer-events: none;
}
.mp-orbit {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  animation: mp-spin var(--mp-speed) linear infinite;
  will-change: transform;
  opacity: .78;
  transition: opacity .3s ease;
}
.mp-tier--silver .mp-orbit { animation-duration: calc(var(--mp-speed) * 1.12); animation-direction: reverse; }
.mp-tier--bronze .mp-orbit { animation-duration: calc(var(--mp-speed) * .92); }
.mp-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: max(1px, calc(2px * var(--mp-k))) solid var(--t-ring);
  box-shadow:
    0 0 calc(12px * var(--mp-k)) -1px var(--t-glow),
    inset 0 0 calc(12px * var(--mp-k)) -1px var(--t-glow);
  -webkit-mask: conic-gradient(from 200deg, #000 0 55%, rgba(0,0,0,.55) 75%, #000);
          mask: conic-gradient(from 200deg, #000 0 55%, rgba(0,0,0,.55) 75%, #000);
}
.mp-dot {
  --d: max(6px, calc(var(--s, 20) * 1px * var(--mp-k)));
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--d);
  height: var(--d);
  margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
  border-radius: 50%;
  transform: rotate(var(--a)) translateX(calc(var(--mp-orbit) / 2));
  background: radial-gradient(circle at 35% 30%, #fff 0 8%, var(--t-hi) 18%, var(--t-mid) 48%, var(--t-lo) 80%, var(--t-deep) 100%);
  box-shadow: 0 2px 5px rgba(0,0,0,.25), 0 0 8px var(--t-glow);
}

/* دیسک فلزی (ثابت) */
.mp-disc {
  position: relative;
  width: var(--mp-disc);
  height: var(--mp-disc);
  border-radius: 50%;
  display: grid;
  place-items: center;
  padding: calc(var(--mp-disc) * .028);
  background:
    conic-gradient(from 210deg, var(--t-hi), var(--t-lo) 18%, var(--t-mid) 32%, var(--t-hi) 48%, var(--t-lo) 66%, var(--t-deep) 80%, var(--t-hi));
  box-shadow:
    0 calc(22px * var(--mp-k)) calc(38px * var(--mp-k)) calc(-16px * var(--mp-k)) rgba(40, 25, 5, .45),
    0 calc(6px * var(--mp-k)) calc(14px * var(--mp-k)) calc(-6px * var(--mp-k)) rgba(40, 25, 5, .35),
    0 0 calc(34px * var(--mp-k)) calc(-6px * var(--mp-k)) var(--t-glow);
  filter: saturate(.92);
  transition: filter .3s ease, box-shadow .3s ease;
}
.mp-face {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(70% 45% at 30% 12%, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 70%),
    radial-gradient(110% 80% at 50% 0%, var(--t-face1) 0%, var(--t-face2) 62%, var(--t-face3) 100%);
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.45),
    inset 0 -3px 6px rgba(255,255,255,.18),
    inset 0 0 18px rgba(0,0,0,.28),
    0 0 0 1px rgba(0,0,0,.18);
}
.mp-face::before { /* بافت ریز فلزی */
  content: "";
  position: absolute;
  inset: 0;
  opacity: .5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 1.2 -.1'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
}
.mp-face::after { /* برق لبهٔ بالا */
  content: "";
  position: absolute;
  inset: 4% 12% auto;
  height: 30%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.35), transparent 70%);
}
/* درخشش فلز صیقلی هنگام هاور: نواری نرم از نور که از روی دیسک می‌گذرد */
.mp-sheen {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
}
.mp-sheen::before {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 55%;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.08) 30%, rgba(255,255,255,.34) 50%, rgba(255,255,255,.08) 70%, transparent 100%);
  transform: translateX(-130%) skewX(-12deg);
  transition: transform 0s linear .3s;
}
.mp-label {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.35;
  font-size: calc(var(--mp-disc) * .145);
  font-weight: 500;
  color: var(--t-text);
  text-shadow: 0 1px 2px var(--t-text-shadow), 0 0 12px var(--t-text-shadow);
}
.mp-label b { font-weight: 500; }

/* ---------- حالت فعال ----------
   هاور (فقط دستگاه‌های دارای موس) و فوکوس صفحه‌کلید = نمایش موقت
   کلاس is-pinned (با کلیک) = نمایش ثابت
   در همهٔ حالت‌ها چرخش مدار دست نمی‌خورد (هیچ قاعده‌ای روی animation نیست).
   درخشش فقط با brightness/contrast ملایم است تا طلایی، طلایی و نقره‌ای، نقره‌ای بماند. */
.mp-ring, .mp-dot { transition: filter .3s ease, box-shadow .3s ease; }
.mp-group.is-pinned .mp-box,
.mp-group:focus-visible .mp-box {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition: opacity .28s ease, transform .28s cubic-bezier(.2, .7, .2, 1), visibility 0s;
}
.mp-group.is-pinned .mp-orbit,
.mp-group:focus-visible .mp-orbit { opacity: 1; }
.mp-group.is-pinned .mp-halo,
.mp-group:focus-visible .mp-halo { opacity: .95; }
.mp-group.is-pinned .mp-disc,
.mp-group:focus-visible .mp-disc {
  filter: saturate(.97) brightness(1.07) contrast(1.04);
  box-shadow:
    0 calc(22px * var(--mp-k)) calc(38px * var(--mp-k)) calc(-16px * var(--mp-k)) rgba(40, 25, 5, .45),
    0 calc(6px * var(--mp-k)) calc(14px * var(--mp-k)) calc(-6px * var(--mp-k)) rgba(40, 25, 5, .35),
    0 0 calc(48px * var(--mp-k)) calc(-2px * var(--mp-k)) var(--t-glow);
}
.mp-group.is-pinned .mp-sheen,
.mp-group:focus-visible .mp-sheen { opacity: 1; }
.mp-group.is-pinned .mp-sheen::before,
.mp-group:focus-visible .mp-sheen::before {
  transform: translateX(260%) skewX(-12deg);
  transition: transform .9s cubic-bezier(.25, .6, .3, 1);
}
.mp-group.is-pinned .mp-ring,
.mp-group:focus-visible .mp-ring {
  filter: brightness(1.15) contrast(1.05);
  box-shadow:
    0 0 calc(16px * var(--mp-k)) 0 var(--t-glow),
    inset 0 0 calc(14px * var(--mp-k)) 0 var(--t-glow);
}
.mp-group.is-pinned .mp-dot,
.mp-group:focus-visible .mp-dot { filter: brightness(1.14) contrast(1.06); }
.mp-group:focus-visible .mp-box {
  outline: 2px solid var(--t-ring);
  outline-offset: 3px;
}
/* فوکوس صفحه‌کلید روی نام یک شرکت درون کارت: کارت باز می‌ماند */
.mp-group:focus-within .mp-box {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition: opacity .28s ease, transform .28s cubic-bezier(.2, .7, .2, 1), visibility 0s;
}

/* ---------- فهرست حامیان درون کارت (یکسان برای هر سه سطح) ----------
   هر ردیف: لوگوی گرد ← نام ← نشانگر کوچک؛ ارتفاع یکسان، جداکنندهٔ ظریف،
   ردیف فعال (هاور/فوکوس) با پس‌زمینهٔ بسیار ملایم و سایهٔ نرم. رنگ‌ها از
   متغیرهای همان سطح (--t-*) می‌آیند تا طلایی/نقره‌ای/برنز هر کدام حال خودشان را داشته باشند. */
.mp-group .mp-box { width: var(--mp-card-list, var(--mp-card)); margin-left: calc(var(--mp-card-list, var(--mp-card)) / -2); }
.mp-section { --mp-card-list: 330px; }
.mp-box:has(.mp-names) { padding: 10px 10px 10px; justify-content: flex-start; min-height: 0; max-height: none; border-radius: 20px; }
.mp-names {
  max-height: calc(var(--mp-row) * 4 + 8px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  --mp-row: 60px;
  font-size: 15.5px; font-weight: 700; line-height: 1.55; letter-spacing: 0;
}
.mp-names li { position: relative; }
.mp-names li + li::before { /* جداکنندهٔ ظریف بین ردیف‌ها */
  content: ""; position: absolute; top: 0; inset-inline: 14px; height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--t-ring) 38%, transparent) 18%, color-mix(in srgb, var(--t-ring) 38%, transparent) 82%, transparent);
  transition: opacity .2s ease;
}
.mp-names li + li { margin-top: 0; }
.mp-co {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: var(--mp-row); padding: 8px 12px 8px 10px;
  border: 0; border-radius: 14px; background: transparent;
  font: inherit; color: color-mix(in srgb, var(--t-name) 62%, #16110a); text-align: right; cursor: pointer;
  transition: background .22s ease, box-shadow .22s ease;
}
.mp-co:hover, .mp-co:focus-visible {
  background: linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .42));
  box-shadow: 0 6px 16px -10px color-mix(in srgb, var(--t-deep) 45%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--t-ring) 22%, transparent);
}
.mp-co:focus-visible { outline: 2px solid var(--t-ring); outline-offset: 1px; }
/* ردیف فعال و ردیف بعدی‌اش جداکننده را پنهان می‌کنند تا برجستگی تمیز بماند */
.mp-names li:has(.mp-co:hover)::before, .mp-names li:has(.mp-co:focus-visible)::before,
.mp-names li:has(.mp-co:hover) + li::before, .mp-names li:has(.mp-co:focus-visible) + li::before { opacity: 0; }
.mp-co-logo {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; background: #fff;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--t-ring) 45%, transparent), 0 2px 6px -3px rgba(60, 40, 10, .25);
  font-size: 15px; font-weight: 800; color: var(--t-name);
}
.mp-co-logo img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }
.mp-co-name { /* در صورت جا یک سطر؛ وگرنه حداکثر دو سطرِ مرتب */
  flex: 1 1 auto; min-width: 0; text-align: right;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  text-wrap: balance;
}
.mp-co-demo { flex: 0 0 auto; font-size: 11px; font-weight: 500; padding: 1px 8px; border-radius: 999px; background: rgba(0,0,0,.05); color: var(--mp-muted); }
.mp-co-go { /* نشانگر «مشاهدهٔ جزئیات» رو به چپ */
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; color: color-mix(in srgb, var(--t-lo) 80%, var(--t-name));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t-ring) 25%, transparent);
  transition: background .22s ease, transform .22s ease;
}
.mp-co-go svg { width: 14px; height: 14px; }
.mp-co:hover .mp-co-go, .mp-co:focus-visible .mp-co-go {
  background: color-mix(in srgb, var(--t-ring) 22%, transparent);
  transform: translateX(-2px);
}
.mp-empty { line-height: 1.8; }
@media (max-width: 900px) {
  .mp-section { --mp-card-list: 280px; }
  .mp-names { font-size: 15px; --mp-row: 56px; }
  .mp-co-logo { width: 38px; height: 38px; }
}
@media (max-width: 600px) {
  .mp-section { --mp-card-list: 208px; }
  .mp-names { font-size: 13.5px; --mp-row: 50px; }
  .mp-co { gap: 8px; padding: 6px 8px; }
  .mp-co-logo { width: 32px; height: 32px; font-size: 13px; }
  .mp-co-go { width: 24px; height: 24px; }
  /* نام بلند در عرض کم: حداکثر دو سطر، مرتب */
  .mp-co-name { line-height: 1.45; }
  .mp-co-demo { display: none; }
}
@media (max-width: 360px) { .mp-section { --mp-card-list: 190px; } }
@media (prefers-reduced-motion: reduce) { .mp-co, .mp-co-go { transition: none; } }

/* ---------- پنجرهٔ جزئیات شرکت (درون modal مشترک سایت) ---------- */
.mp-detail-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.mp-detail-logo {
  width: 64px; height: 64px; flex: 0 0 auto; border-radius: 16px; overflow: hidden;
  display: grid; place-items: center; background: #fff;
  box-shadow: 0 0 0 1px var(--t-box-border), 0 0 0 4px color-mix(in srgb, var(--t-ring) 18%, transparent);
  font-size: 24px; font-weight: 800; color: var(--t-name);
}
.mp-detail-logo img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.mp-detail-name { display: block; font-size: 1.05rem; line-height: 1.6; }
.mp-detail-tier { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--t-name); }
.mp-detail-tier::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--t-ring); }
.mp-detail-text { margin: 0 0 16px; line-height: 2; color: var(--ink-2, #45514C); white-space: pre-line; }
.mp-detail-text.is-muted { color: var(--ink-3, #66726D); }
.mp-detail-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.mp-detail-host { opacity: .85; font-weight: 400; }

@media (hover: hover) {
  .mp-group:hover .mp-box {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition: opacity .28s ease, transform .28s cubic-bezier(.2, .7, .2, 1), visibility 0s;
  }
  .mp-group:hover .mp-orbit { opacity: 1; }
  .mp-group:hover .mp-halo { opacity: .95; }
  .mp-group:hover .mp-disc {
    filter: saturate(.97) brightness(1.07) contrast(1.04);
    box-shadow:
      0 calc(22px * var(--mp-k)) calc(38px * var(--mp-k)) calc(-16px * var(--mp-k)) rgba(40, 25, 5, .45),
      0 calc(6px * var(--mp-k)) calc(14px * var(--mp-k)) calc(-6px * var(--mp-k)) rgba(40, 25, 5, .35),
      0 0 calc(48px * var(--mp-k)) calc(-2px * var(--mp-k)) var(--t-glow);
  }
  .mp-group:hover .mp-sheen { opacity: 1; }
  .mp-group:hover .mp-sheen::before {
    transform: translateX(260%) skewX(-12deg);
    transition: transform .9s cubic-bezier(.25, .6, .3, 1);
  }
  .mp-group:hover .mp-ring {
    filter: brightness(1.15) contrast(1.05);
    box-shadow:
      0 0 calc(16px * var(--mp-k)) 0 var(--t-glow),
      inset 0 0 calc(14px * var(--mp-k)) 0 var(--t-glow);
  }
  .mp-group:hover .mp-dot { filter: brightness(1.14) contrast(1.06); }
  /* دو گروه دیگر آرام‌تر */
  .mp-row:has(.mp-group:hover) .mp-group:not(:hover) {
    opacity: .82;
    filter: saturate(.85);
  }
}

/* ---------- ریزمتن پایین ---------- */
.mp-note {
  margin: clamp(16px, 1.6vw, 26px) auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2.6vw, 44px);
  max-width: 1260px;
}
.mp-note::before, .mp-note::after {
  content: "";
  flex: 0 1 86px;
  height: 1px;
  background: rgba(0, 0, 0, .18);
}
.mp-note p {
  margin: 0;
  font-size: clamp(12.5px, 1.05vw, 17px);
  line-height: 1.9;
  color: var(--mp-muted);
  text-align: center;
}

@keyframes mp-spin { to { transform: rotate(360deg); } }

/* ---------- واکنش‌گرا ---------- */
@media (max-width: 900px) {
  .mp-section { --mp-k: .52; --mp-card: 210px; }
  .mp-names { font-size: 16px; }
  .mp-more { font-size: 13px; }
  .mp-note::before, .mp-note::after { display: none; }
  /* در عرض کم، کارت ثابت‌شده هنگام هاور روی دایرهٔ دیگر کنار می‌رود تا کارت‌ها روی هم نیفتند */
  .mp-row:has(.mp-group:hover) .mp-group.is-pinned:not(:hover) .mp-box,
  .mp-row:has(.mp-group:focus-visible) .mp-group.is-pinned:not(:focus-visible) .mp-box {
    opacity: 0; visibility: hidden;
  }
}
@media (max-width: 600px) {
  /* سه دایره همچنان در یک ردیف، کوچک‌تر؛ کارت‌های کناری به لبهٔ ستون خود تکیه می‌کنند
     تا از صفحه بیرون نزنند، و نشانگرشان روی مرکز دایره می‌ماند */
  .mp-section { --mp-k: .34; --mp-card: 180px; }
  .mp-row { column-gap: 6px; }
  .mp-names { font-size: 15px; line-height: 1.6; }
  .mp-box { padding: 12px 12px 10px; min-height: 150px; }
  .mp-item:first-child .mp-box { left: auto; right: 0; margin-left: 0; --mp-ptr: calc(100% - var(--mp-orbit) / 2); }
  .mp-item:last-child .mp-box { left: 0; margin-left: 0; --mp-ptr: calc(var(--mp-orbit) / 2); }
  .mp-label { font-size: 13px; line-height: 1.3; }
}
@media (max-width: 360px) {
  .mp-section { --mp-k: .31; --mp-card: 164px; }
}

/* ---------- کاهش حرکت ---------- */
@media (prefers-reduced-motion: reduce) {
  .mp-orbit { animation: none; }
  .mp-group, .mp-box, .mp-halo, .mp-orbit, .mp-disc { transition-duration: .01ms !important; }
  .mp-box { transform: none; }
  .mp-sheen::before { transition: none !important; }
}

/* جاگذاری خودکار لوگو (sponsor-logo-fit.js): تصویر پردازش‌شده خودش حاشیهٔ
   متوازن و مرکزیت دارد، پس فاصلهٔ داخلی قبلی فقط برای آن برداشته می‌شود.
   اندازهٔ نشان‌ها و هر چیز دیگر بدون تغییر. */
.mp-co-logo img.is-fitted, .mp-detail-logo img.is-fitted { padding: 0; }

/* /exec-timeline.css */
/* ============================================================
   «مسیر اجرای کمپین» — تایم‌لاین صفحهٔ هر کمپین (پیشوند et-)
   ------------------------------------------------------------
   همهٔ گزینشگرها با et- محدودند؛ هیچ قاعدهٔ سراسری یا مؤلفهٔ
   دیگری تغییر نمی‌کند. رنگ آب همان خانوادهٔ آب قلب شعار است.
   ============================================================ */
.et-card{
  --et-green:#1E9E4A; --et-green-d:#17803B; --et-mint:#E4F5EA;
  --et-aqua:#5CC9AE; --et-aqua-l:#D7F4EC; --et-aqua-d:#2E9E82;
  --et-gray:#C9CFCB; --et-gray-l:#F0F2F1; --et-gray-t:#9AA39E;
  container-type:inline-size;
  background:
    radial-gradient(120% 90% at 100% 0%, #EAF8F0 0%, rgba(234,248,240,0) 60%),
    linear-gradient(180deg, #F6FCF8 0%, #FFFFFF 100%);
  border-color:#DDEFE3;
}
.et-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:18px }
.et-h{ margin:0 }
.et-sub{ margin:4px 0 0; font-size:.86rem; color:var(--ink-3) }

/* نشان وضعیت کلی */
.et-badge{
  display:flex; align-items:center; gap:10px; padding:9px 16px 9px 14px;
  border-radius:16px; background:rgba(255,255,255,.8); border:1px solid #D8EEDF;
  box-shadow:0 6px 18px -12px rgba(20,90,50,.35);
}
.et-badge-ico{ width:30px; height:30px; flex:none }
.et-badge-ico svg{ width:100%; height:100% }
.et-badge-t{ display:flex; flex-direction:column; line-height:1.5 }
.et-badge-t b{ color:var(--et-green-d); font-size:.95rem }
.et-badge-t span{ color:var(--ink-3); font-size:.78rem }
.et-badge.is-not_started b{ color:var(--ink-2) }

/* ---------- مسیر ---------- */
.et-track{ position:relative }
.et-list{
  list-style:none; margin:0; padding:0; position:relative; z-index:1;
  display:grid; grid-template-columns:repeat(var(--n), minmax(0,1fr)); gap:6px;
}
.et-step{ display:flex; flex-direction:column; align-items:center; text-align:center; min-width:0 }

/* آیکن بالای هر مرحله */
.et-ico{
  position:relative; width:54px; height:54px; border-radius:50%;
  display:grid; place-items:center; margin-top:10px;
  background:var(--et-mint); color:var(--et-green);
  box-shadow:inset 0 0 0 1px rgba(30,158,74,.08);
}
.et-ico-svg{ width:24px; height:24px; display:block }
.et-ico-svg svg{ width:100%; height:100%; display:block }
.is-upcoming .et-ico{ background:var(--et-gray-l); color:var(--et-gray-t); box-shadow:none }
.is-current .et-ico{
  width:66px; height:66px; margin-top:4px;
  background:radial-gradient(circle at 50% 35%, #FFFFFF 0%, var(--et-aqua-l) 70%);
  color:var(--et-aqua-d);
  box-shadow:0 0 0 5px rgba(92,201,174,.14), 0 8px 22px -8px rgba(46,158,130,.55);
}
.is-current .et-ico-svg{ width:30px; height:30px }
.is-current .et-ico-svg svg{ fill:rgba(92,201,174,.35) }

/* قطره‌های بسیار ریز کنار مرحلهٔ جاری */
.et-drops i{
  position:absolute; width:5px; height:7px; border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
  background:linear-gradient(180deg,#BFEFE2,#5CC9AE); opacity:0;
  animation:et-drop 2.8s ease-in-out infinite;
}
.et-drops i:nth-child(1){ inset-inline-start:-6px; top:36px; animation-delay:.2s }
.et-drops i:nth-child(2){ inset-inline-end:-5px; top:30px; animation-delay:1.1s; transform:scale(.8) }
.et-drops i:nth-child(3){ inset-inline-end:-10px; top:44px; animation-delay:1.9s; transform:scale(.6) }
@keyframes et-drop{
  0%{ opacity:0; translate:0 4px } 30%{ opacity:.85 } 70%{ opacity:.6 } 100%{ opacity:0; translate:0 -8px }
}

/* نقطهٔ روی مسیر */
.et-node{
  position:relative; width:26px; height:26px; border-radius:50%; margin:12px 0 12px;
  display:grid; place-items:center; flex:none;
  background:#fff; border:2px solid var(--et-gray); color:#fff;
}
.is-current .et-node{ margin-top:10px }
.et-check{ width:15px; height:15px; display:block }
.et-check svg{ width:100%; height:100%; display:block }
.is-done .et-node{
  background:var(--et-gray); border-color:#fff;
  box-shadow:0 0 0 3px rgba(255,255,255,.9);
  transition:background-color .35s ease, box-shadow .35s ease;
  /* تیک وقتی سبز می‌شود که آب به این مرحله برسد */
  transition-delay:calc(var(--et-reveal) * var(--i) / var(--et-reach));
}
.is-done .et-check{ opacity:0; transform:scale(.4); transition:opacity .3s ease, transform .35s cubic-bezier(.3,1.6,.5,1);
  transition-delay:calc(var(--et-reveal) * var(--i) / var(--et-reach)) }
.is-revealed .is-done .et-node{ background:var(--et-green); box-shadow:0 0 0 3px #fff, 0 4px 10px -3px rgba(30,158,74,.6) }
.is-revealed .is-done .et-check{ opacity:1; transform:none }
.is-current .et-node{
  width:30px; height:30px; border:3px solid #fff;
  background:radial-gradient(circle, #FFFFFF 0 22%, var(--et-aqua) 26%);
  box-shadow:0 0 0 2px var(--et-aqua), 0 4px 12px -2px rgba(46,158,130,.6);
}
.is-upcoming .et-node{ width:16px; height:16px; margin:17px 0; background:var(--et-gray); border:3px solid #fff; box-shadow:0 0 0 1px #E3E7E4 }
/* موج کوچک دور مرحلهٔ جاری */
.et-ripple, .et-ripple::after{
  position:absolute; inset:-3px; border-radius:50%; border:2px solid rgba(92,201,174,.55);
  animation:et-ripple 2.6s ease-out infinite; pointer-events:none;
}
.et-ripple::after{ content:""; inset:-3px; animation-delay:1.3s }
@keyframes et-ripple{ from{ transform:scale(1); opacity:.8 } to{ transform:scale(2.1); opacity:0 } }

/* متن زیر هر مرحله */
.et-text{ display:flex; flex-direction:column; align-items:center; gap:2px; min-width:0 }
.et-title{ font-size:.86rem; color:var(--ink); line-height:1.7 }
.et-desc{ font-size:.76rem; color:var(--ink-3); line-height:1.8 }
.et-date{ margin-top:4px; font-size:.8rem; font-weight:700; color:var(--et-green-d) }
.et-live{ color:var(--et-aqua-d) }
.et-none{ color:var(--et-gray-t); font-weight:400 }
.is-upcoming .et-title{ color:var(--ink-2); font-weight:600 }
.is-current .et-title{ color:var(--ink) }

.et-foot{ margin:14px 0 0; font-size:.74rem; color:var(--ink-3) }

/* ---------- ریل خاکستری و آب ---------- */
.et-rail{ position:absolute; inset:0; pointer-events:none; z-index:0; opacity:0; transition:opacity .3s ease }
.is-measured .et-rail{ opacity:1 }
.et-gray{
  position:absolute; top:var(--rail-y); left:var(--gray-x); width:var(--gray-len); height:0;
  border-top:2px dashed var(--et-gray);
  transform:translateY(-1px);
}
.et-water{
  position:absolute; top:calc(var(--rail-y) - 15px); left:var(--w-start); width:var(--w-len); height:30px;
  overflow:hidden; border-radius:15px;
  -webkit-mask:linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
          mask:linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
  filter:drop-shadow(0 0 5px rgba(92,201,174,.45));
  /* نمایش یک‌باره از نقطهٔ اول (راست) تا مرحلهٔ جاری */
  clip-path:inset(0 0 0 100%);
}
.is-ready .et-water{ transition:clip-path var(--et-reveal, 1.8s) cubic-bezier(.45,.05,.35,1) }
.is-revealed .et-water{ clip-path:inset(0 0 0 0) }
.et-water.is-empty{ display:none }
.et-w{ position:absolute; inset:0; background-repeat:repeat-x; background-position:0 50%; will-change:background-position, transform }
.et-w1{
  background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2760%27 height=%2730%27 viewBox=%270 0 60 30%27%3E%3Cdefs%3E%3ClinearGradient id=%27g%27 x1=%270%27 y1=%273%27 x2=%270%27 y2=%2727%27 gradientUnits=%27userSpaceOnUse%27%3E%3Cstop offset=%270%27 stop-color=%27%23C4F1E4%27/%3E%3Cstop offset=%27.5%27 stop-color=%27%237FD6BF%27/%3E%3Cstop offset=%271%27 stop-color=%27%233FB08F%27/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d=%27M0 11Q15 3 30 11T60 11L60 20Q45 28 30 20T0 20Z%27 fill=%27url%28%23g%29%27/%3E%3Cpath d=%27M0 11Q15 3 30 11T60 11%27 fill=%27none%27 stroke=%27%23fff%27 stroke-width=%271.3%27 stroke-opacity=%27.75%27/%3E%3Cpath d=%27M10 16.5h5M40 14.5h4%27 stroke=%27%23fff%27 stroke-width=%271%27 stroke-linecap=%27round%27 stroke-opacity=%27.45%27/%3E%3C/svg%3E");
  background-size:60px 30px;
  animation:et-flow-1 2.8s linear infinite, et-bob 2.2s ease-in-out infinite alternate;
}
.et-w2{
  background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2790%27 height=%2730%27 viewBox=%270 0 90 30%27%3E%3Cpath d=%27M0 13Q22.5 23 45 13T90 13L90 19Q67.5 9 45 19T0 19Z%27 fill=%27%239BE3CF%27 fill-opacity=%27.75%27/%3E%3Cpath d=%27M0 13Q22.5 23 45 13T90 13%27 fill=%27none%27 stroke=%27%23fff%27 stroke-width=%27.9%27 stroke-opacity=%27.5%27/%3E%3C/svg%3E");
  background-size:90px 30px;
  animation:et-flow-2 3.8s linear infinite, et-swell 3.2s ease-in-out infinite alternate;
}
/* راست‌به‌چپ: موج‌ها از نقطهٔ اول به سمت مرحلهٔ جاری (چپ) می‌روند */
@keyframes et-flow-1{ from{ background-position-x:0 } to{ background-position-x:-60px } }
@keyframes et-flow-2{ from{ background-position-x:0 } to{ background-position-x:-90px } }
@keyframes et-bob{ from{ transform:translateY(-1.8px) } to{ transform:translateY(1.8px) } }
@keyframes et-swell{ from{ transform:scaleY(.75) translateY(1px) } to{ transform:scaleY(1.25) translateY(-1px) } }

/* ---------- حالت عمودی (عرض کم) ---------- */
@container (max-width: 620px){
  .et-list{ grid-template-columns:1fr; gap:4px }
  .et-step{
    display:grid; grid-template-columns:40px 52px minmax(0,1fr); align-items:start;
    text-align:start; column-gap:10px; padding-block:6px;
  }
  .et-node{ grid-column:1; grid-row:1; justify-self:center; margin:14px 0 0 }
  .is-current .et-node{ margin-top:18px }
  .is-upcoming .et-node{ margin-top:19px }
  .et-ico{ grid-column:2; grid-row:1; margin:0; width:48px; height:48px }
  .is-current .et-ico{ width:54px; height:54px; margin:0 }
  .et-ico-svg{ width:22px; height:22px }
  .is-current .et-ico-svg{ width:26px; height:26px }
  .et-text{ grid-column:3; grid-row:1; align-items:flex-start; padding-top:2px }
  .et-date{ margin-top:2px }
}
.is-vertical .et-gray{
  top:var(--gray-y); left:var(--rail-x); width:0; height:var(--gray-len);
  border-top:0; border-inline-start:2px dashed var(--et-gray); transform:translateX(-1px);
}
.is-vertical .et-water{
  top:var(--w-start); left:calc(var(--rail-x) - 15px); width:30px; height:var(--w-len);
  -webkit-mask:linear-gradient(180deg, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
          mask:linear-gradient(180deg, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
  clip-path:inset(0 0 100% 0);
}
.is-revealed .is-vertical .et-water{ clip-path:inset(0 0 0 0) }
.is-vertical .et-w{ background-repeat:repeat-y; background-position:50% 0 }
.is-vertical .et-w1{ background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2730%27 height=%2760%27 viewBox=%270 0 30 60%27%3E%3Cdefs%3E%3ClinearGradient id=%27g%27 x1=%2727%27 y1=%270%27 x2=%273%27 y2=%270%27 gradientUnits=%27userSpaceOnUse%27%3E%3Cstop offset=%270%27 stop-color=%27%23C4F1E4%27/%3E%3Cstop offset=%27.5%27 stop-color=%27%237FD6BF%27/%3E%3Cstop offset=%271%27 stop-color=%27%233FB08F%27/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d=%27M19 0Q27 15 19 30T19 60L10 60Q2 45 10 30T10 0Z%27 fill=%27url%28%23g%29%27/%3E%3Cpath d=%27M19 0Q27 15 19 30T19 60%27 fill=%27none%27 stroke=%27%23fff%27 stroke-width=%271.3%27 stroke-opacity=%27.75%27/%3E%3C/svg%3E"); background-size:30px 60px;
  animation:et-vflow-1 2.8s linear infinite, et-vbob 2.2s ease-in-out infinite alternate }
.is-vertical .et-w2{ background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2730%27 height=%2790%27 viewBox=%270 0 30 90%27%3E%3Cpath d=%27M17 0Q7 22.5 17 45T17 90L11 90Q21 67.5 11 45T11 0Z%27 fill=%27%239BE3CF%27 fill-opacity=%27.75%27/%3E%3C/svg%3E"); background-size:30px 90px;
  animation:et-vflow-2 3.8s linear infinite, et-vswell 3.2s ease-in-out infinite alternate }
@keyframes et-vflow-1{ from{ background-position-y:0 } to{ background-position-y:60px } }
@keyframes et-vflow-2{ from{ background-position-y:0 } to{ background-position-y:90px } }
@keyframes et-vbob{ from{ transform:translateX(-1.8px) } to{ transform:translateX(1.8px) } }
@keyframes et-vswell{ from{ transform:scaleX(.75) } to{ transform:scaleX(1.25) } }

/* ---------- کاهش حرکت ---------- */
@media (prefers-reduced-motion: reduce){
  .et-w, .et-drops i, .et-ripple, .et-ripple::after{ animation:none }
  .et-water, .is-done .et-node, .is-done .et-check{ transition:none }
}

/* /report-cover.css */
/* ============================================================
   کاور گزارش‌های ویدیویی — فقط همین بندانگشتی‌ها
   ------------------------------------------------------------
   تمام قاعده‌ها با پیشوند rcov نوشته شده‌اند تا هیچ‌کدام روی
   استایل‌های مشترک سایت (app.css و بقیه) اثر نگذارند. چیدمان
   ردیف جایگاه (slot-row) دست‌نخورده می‌ماند؛ این تصویر فقط یک
   عضو تازه در همان ردیف فلکسِ موجود است و وقتی کاوری ثبت نشده
   باشد اصلاً ساخته نمی‌شود، یعنی ظاهر قبلی عیناً باقی است.
   ============================================================ */

.rcov-thumb {
  position: relative;
  flex: 0 0 auto;
  width: 104px;
  height: 59px;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 10px;
  overflow: hidden;
  background: #EDF3EE;
  cursor: pointer;
  line-height: 0;
  transition: transform .18s ease, box-shadow .18s ease;
}

.rcov-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rcov-thumb:hover,
.rcov-thumb:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(20, 60, 35, .16);
}

/* پردهٔ نازک و مثلث پخش روی کاور صفحهٔ عمومی */
.rcov-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(12, 42, 24, .26);
  transition: background .18s ease;
}

.rcov-thumb:hover .rcov-play,
.rcov-thumb:focus-visible .rcov-play {
  background: rgba(12, 42, 24, .42);
}

.rcov-play svg {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45));
}

/* در پنل ادمین کوچک‌تر و بدون پردهٔ پخش */
.rcov-thumb-admin {
  width: 78px;
  height: 45px;
  border-radius: 8px;
}

/* تصویر کاور در حالت پیش‌نمایش کامل (پنجرهٔ پنل ادمین) */
.rcov-full {
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, .08);
}

@media (max-width: 560px) {
  .rcov-thumb { width: 84px; height: 48px; }
  .rcov-thumb-admin { width: 64px; height: 37px; }
}

@media (prefers-reduced-motion: reduce) {
  .rcov-thumb, .rcov-play { transition: none; }
  .rcov-thumb:hover, .rcov-thumb:focus-visible { transform: none; }
}

/* /jalali-date.css */
/* ============================================================
   تقویم شمسی فیلد «تاریخ گزارش» — فقط همین انتخابگر
   ------------------------------------------------------------
   همهٔ قاعده‌ها با پیشوند jdp هستند تا روی هیچ فرم، دکمه یا
   پنجرهٔ دیگری اثر نگذارند. تقویم به‌صورت درون‌خطی (زیر کادر)
   باز می‌شود، نه شناور، چون بدنهٔ پنجره overflow:auto دارد و
   لایهٔ شناور بریده می‌شد؛ این‌طور ابعاد پنجره هم عوض نمی‌شود.
   ============================================================ */

.jdp { position: relative; }

/* کادر ورودی: از همان استایل input سایت ارث می‌برد و چیزی را بازنویسی نمی‌کند */
.jdp-input { cursor: pointer; }

.jdp-pop {
  display: none;
  margin-top: 8px;
  padding: 10px;
  border: 1.5px solid var(--line, #E3E8E4);
  border-radius: 12px;
  background: #fff;
  direction: rtl;
}

.jdp.is-open .jdp-pop { display: block; }

.jdp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.jdp-selects { display: flex; gap: 6px; flex: 1; }

.jdp-pop .jdp-sel {
  padding: 7px 8px;
  font-size: .88rem;
  min-height: auto;
  width: auto;
  flex: 1;
}

.jdp-nav {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  padding: 0;
  line-height: 1;
  font-size: 1.1rem;
  border: 1px solid var(--line, #E3E8E4);
  border-radius: 9px;
  background: #fff;
  color: var(--ink-2, #3C4A40);
  cursor: pointer;
}

.jdp-nav:hover { background: var(--green-l2, #F1F7F2); }

.jdp-week,
.jdp-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.jdp-week {
  margin-bottom: 4px;
  font-size: .74rem;
  color: var(--ink-3, #6B7A70);
  text-align: center;
}

.jdp-cell {
  height: 32px;
  display: grid;
  place-items: center;
  font-size: .86rem;
  border-radius: 8px;
  border: 0;
  background: transparent;
  color: var(--ink, #14211A);
  padding: 0;
  width: auto;
  min-height: auto;
}

.jdp-day { cursor: pointer; }
.jdp-day:hover { background: var(--green-l2, #F1F7F2); }
.jdp-blank { pointer-events: none; }

.jdp-day.is-today {
  box-shadow: inset 0 0 0 1.5px var(--green-l, #BFE3C9);
  font-weight: 700;
}

.jdp-day.is-sel {
  background: var(--green, #00A820);
  color: #fff;
  font-weight: 700;
}

.jdp-foot {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line, #E3E8E4);
}

.jdp-link {
  border: 0;
  background: transparent;
  padding: 4px 6px;
  font-size: .83rem;
  font-family: inherit;
  color: var(--green-d, #0B7A22);
  cursor: pointer;
  width: auto;
  min-height: auto;
}

.jdp-link:hover { text-decoration: underline; }
.jdp-clear { color: var(--ink-3, #6B7A70); }

@media (max-width: 420px) {
  .jdp-cell { height: 30px; font-size: .82rem; }
}

/* /campaigns-head.css */
/* ============================================================
   صفحهٔ «همهٔ کمپین‌ها» — فقط ظاهر سربرگ و نوار جست‌وجو/فیلتر
   همهٔ قاعده‌ها زیر .cmp-hero و .cmp-filters محدود شده‌اند تا
   هیچ بخش دیگری از سایت (از جمله .filters پنل‌ها) تغییر نکند.
   ============================================================ */

/* ---------- سربرگ با موج سبز ملایم ---------- */
.cmp-hero{
  position:relative;overflow:hidden;isolation:isolate;
  border:1px solid var(--line);border-radius:var(--r-l);
  background:linear-gradient(180deg,#FFFFFF 0%,#FAFDFB 55%,#F1F9F3 100%);
  padding:38px 34px 34px;margin-bottom:14px;
}
.cmp-hero-wave{position:absolute;inset:auto 0 0 0;width:100%;height:100%;z-index:-1;pointer-events:none}
.cmp-hero-wave .w1{fill:#EAF6ED;opacity:.8}
.cmp-hero-wave .w2{fill:#DFF1E4;opacity:.5}
.cmp-hero > .row{margin:0!important}
.cmp-hero h2{font-size:clamp(1.7rem,1.2rem + 1.6vw,2.35rem);font-weight:800;line-height:1.3;color:var(--ink);letter-spacing:0}
.cmp-hero p{margin-top:8px!important;font-size:.95rem;color:var(--ink-3)}

/* ---------- نوار فیلتر: قاب سبز روشن + پنج فیلد سفید ---------- */
.filters.cmp-filters{
  display:flex;flex-wrap:nowrap;gap:14px;align-items:end;
  background:#E8F5EA;border:1px solid #DCEFE0;border-radius:var(--r-l);
  padding:16px 20px 18px;
}
.cmp-filters .field{min-width:0;flex:1 1 0;gap:8px}
.cmp-filters .field.cmp-f-search{flex:1.75 1 0}
.cmp-filters .field label{font-size:.9rem;font-weight:600;color:var(--ink);padding-inline:2px}
.cmp-filters input,
.cmp-filters select{
  background-color:#fff;border:1px solid transparent;border-radius:12px;
  height:48px;min-height:48px;padding:0 14px;line-height:1.4;font-size:.95rem;font-weight:500;color:var(--ink);
  box-shadow:0 1px 2px rgba(24,136,52,.06);
}
.cmp-filters select{cursor:pointer}
.cmp-filters input:hover,.cmp-filters select:hover{border-color:#CDE8D3}
.cmp-filters input:focus,.cmp-filters select:focus{border-color:var(--green);box-shadow:0 0 0 4px rgba(0,168,32,.14)}
.cmp-filters input::placeholder{color:var(--ink-3);font-weight:400;opacity:1}

/* آیکن ذره‌بین داخل فیلد جست‌وجو (سمت راست، مثل تصویر مرجع) */
.cmp-search{position:relative;display:flex;align-items:center}
.cmp-search input{padding-inline-start:42px}
.cmp-search-ic{position:absolute;inset-inline-start:14px;top:50%;width:19px;height:19px;transform:translateY(-50%);
  fill:none;stroke:var(--ink-2);stroke-width:1.9;stroke-linecap:round;pointer-events:none}
.cmp-search:focus-within .cmp-search-ic{stroke:var(--green-d)}

/* ---------- تبلت: جست‌وجو یک ردیف کامل، چهار فیلتر در ردیف دوم ---------- */
@media (max-width:900px){
  .filters.cmp-filters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
  .cmp-filters .field.cmp-f-search{grid-column:1 / -1}
}
/* ---------- موبایل: جست‌وجو تمام‌عرض، فیلترها دوتایی؛ هیچ فیلتری پنهان نمی‌شود ---------- */
@media (max-width:600px){
  .cmp-hero{padding:26px 20px 24px;border-radius:var(--r)}
  .filters.cmp-filters{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 10px;padding:14px;border-radius:var(--r)}
  .cmp-filters .field{gap:6px}
  .cmp-filters input,.cmp-filters select{height:50px;min-height:50px;font-size:1rem}
}

/* /donor.css */
/* ============================================================
   داشبورد مشارکت‌کننده — فقط کلاس‌های dn-* (روی بخش دیگری اثر ندارد)
   ============================================================ */
.dn-page{padding-block:36px 64px;display:flex;flex-direction:column;gap:18px}
.dn-page h2{font-size:1.15rem;margin:0 0 12px}

/* قلب */
.dn-heart{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;margin-inline-start:8px;border-radius:999px;outline-offset:3px;cursor:help}
.dn-heart svg path{stroke-width:1.4}
.dn-heart-green svg path{fill:#9FDFB4;stroke:#3E9E5E}
.dn-heart-red svg path{fill:#E5484D;stroke:#B4282D}
.dn-heart:focus-visible{outline:2px solid var(--green-d)}

/* معرفی */
.dn-hero{display:flex;align-items:center;gap:20px;padding:26px 28px;flex-wrap:wrap;
  background:linear-gradient(180deg,#fff, var(--green-l2))}
.dn-hero-text{flex:1;min-width:220px}
.dn-name{margin:0;font-size:1.6rem;line-height:1.5;display:flex;align-items:center;flex-wrap:wrap}
.dn-sub{margin:6px 0 0;color:var(--ink-2)}
.dn-heart-caption{margin:6px 0 0;color:var(--ink-3)}
.dn-cta{align-self:flex-start}
.dn-avatar{width:76px;height:76px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 0 0 4px #fff, var(--sh-1)}
.dn-avatar-default{display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:1.6rem;color:var(--green-d);
  background:radial-gradient(circle at 30% 25%, #fff 0, #E3F5E9 45%, #CDEBD7 100%)}

/* کاشی‌های خلاصه */
.dn-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.dn-tile{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--sh-1);padding:18px 20px;min-height:110px}
.dn-tile-l{font-size:.86rem;color:var(--ink-3);margin-bottom:8px}
.dn-tile-v{font-size:1.25rem;font-weight:700;color:var(--ink)}
.dn-amount{display:inline-block;font-variant-numeric:tabular-nums;border-radius:8px;outline-offset:3px;cursor:default;white-space:nowrap}
.dn-amount:focus-visible{outline:2px solid var(--green-d)}
.dn-big{color:var(--green-d);font-size:1.45rem}

/* نشان مشارکت */
.dn-milestone{padding:18px 22px}
.dn-bar{height:8px;background:#EEF2EF;border-radius:999px;overflow:hidden;margin-top:12px}
.dn-bar>span{display:block;height:100%;background:linear-gradient(90deg,#9FDFB4,#E5484D);border-radius:inherit}

/* کمپین‌ها */
.dn-camps{display:flex;flex-direction:column;gap:14px}
.dn-camp{padding:18px 20px}
.dn-camp-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.dn-cover{width:72px;height:72px;border-radius:14px;object-fit:cover;flex:none;background:var(--green-l)}
.dn-cover-empty{display:inline-block}
.dn-camp-title{flex:1;min-width:160px}
.dn-camp-link{font-weight:700;color:var(--ink);text-decoration:none}
.dn-camp-link:hover,.dn-camp-link:focus-visible{color:var(--green-d);text-decoration:underline}
.dn-camp-total{text-align:left}
.dn-camp-total .dn-amount{font-weight:700;color:var(--green-d);font-size:1.1rem}
.dn-dons{list-style:none;margin:14px 0 0;padding:0;border-top:1px solid var(--line)}
.dn-don{display:grid;grid-template-columns:1fr auto auto auto;gap:12px;align-items:center;padding:10px 2px;border-bottom:1px dashed var(--line);font-size:.92rem}
.dn-don-date{color:var(--ink-3)}
.dn-don-amt{font-variant-numeric:tabular-nums;font-weight:600}
.dn-status{justify-self:start;font-size:.78rem;padding:3px 10px;border-radius:999px;background:#F1F3F2;color:var(--ink-2);white-space:nowrap}
.dn-st-ok{background:var(--green-l);color:var(--green-d)}
.dn-st-wait{background:var(--warm-l);color:#845200}
.dn-st-bad{background:var(--bad-l);color:var(--bad)}
.dn-st-ref{background:var(--sky-l);color:#1E6E9B}
.dn-guest-note{margin:4px 2px 0}

/* حالت خالی */
.dn-empty{padding:36px 24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}
.dn-empty h2{margin:6px 0 0}
.dn-empty p{max-width:520px}

/* پروفایل */
.dn-profile{padding:22px}
.dn-prof-grid{display:grid;grid-template-columns:220px 1fr;gap:24px;align-items:start}
.dn-prof-avatar{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.dn-prof-avatar input[type=file]{position:absolute;width:1px;height:1px;opacity:0}
.dn-prof-avatar .dn-avatar{width:88px;height:88px}

/* ورود پیامکی */
.dn-auth h1{margin-top:0}
.dn-tabs{display:inline-flex;gap:4px;background:var(--green-l2);border:1px solid var(--line);border-radius:999px;padding:4px;margin:4px 0 10px}
.dn-tab{border:0;background:transparent;padding:7px 18px;border-radius:999px;font:inherit;color:var(--ink-2);cursor:pointer}
.dn-tab.on{background:#fff;color:var(--green-d);font-weight:600;box-shadow:var(--sh-1)}
.dn-tab:focus-visible{outline:2px solid var(--green-d)}
.dn-code{letter-spacing:.5em;text-align:center;font-size:1.3rem;font-variant-numeric:tabular-nums}

@media (max-width:900px){.dn-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){
  .dn-page{padding-block:22px 48px}
  .dn-hero{padding:20px;gap:14px}
  .dn-name{font-size:1.3rem}
  .dn-stats{gap:10px}
  .dn-tile{padding:14px;min-height:96px}
  .dn-big{font-size:1.2rem}
  .dn-camp-total{text-align:right;width:100%}
  .dn-don{grid-template-columns:1fr auto;row-gap:4px}
  .dn-prof-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce){.dn-bar>span{transition:none}}

/* /path-detail-v2.css */
/* ============================================================
   طرح بصری تازهٔ صفحهٔ مسیر «مهر» — فقط زیر کلاس .pdx
   هیچ انتخابگری بیرون از .pdx ندارد، پس روی صفحه یا بخش دیگری اثر نمی‌گذارد.
   ============================================================ */
.pdx{
  --x-green:#0F5A3C;  --x-green-d:#0B4630;
  --x-sage:#EAF4ED;   --x-sage-l:#F4F8F5;
  --x-bg:#FBFCFA;     --x-line:#E5EAE6;
  --x-ink:#23332B;    --x-ink-2:#3E4B44;   --x-ink-3:#69756E;
  background:var(--x-bg);
  padding-bottom:clamp(40px,6vw,72px);
  color:var(--x-ink);
}

/* عرض محتوا مطابق نسبت‌های طرح مرجع (فقط در همین صفحه) */
.pdx .wrap{ max-width:1400px }
/* هم‌ترازی لبه‌های نوار بالا با محتوای همین صفحه؛ فقط وقتی این صفحه باز است */
body:has(.pdx:not(.pdx--simorgh)) .site-head .head-in{ max-width:1400px }

/* ---------- سرصفحه ---------- */
.pdx-hero{
  position:relative; overflow:hidden;
  min-height:clamp(230px,19.5vw,300px);
  display:flex; align-items:center;
  background:
    radial-gradient(70% 120% at 100% 0%, #F7FAF6 0%, rgba(247,250,246,0) 60%),
    linear-gradient(100deg, #EEF5F0 0%, #F2F7F3 45%, #F6F9F6 100%);
  border-bottom:1px solid #EDF1EE;
}
.pdx-hero-bg{ position:absolute; inset:0; pointer-events:none }
.pdx-hero-curve{ position:absolute; inset:0; width:100%; height:100% }
.pdx-hero-photo{
  position:absolute; inset-block:0; left:0; width:45%; pointer-events:none;
  -webkit-mask-image:linear-gradient(to right, #000 0%, #000 86%, rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(to right, #000 0%, #000 86%, rgba(0,0,0,0) 100%);
}
.pdx-hero-photo img{ display:block; width:100%; height:100%; object-fit:cover; object-position:60% 50% }
.pdx-hero-in{ position:relative; width:100%; display:flex; justify-content:flex-start }
.pdx-hero-text{ padding-block:clamp(26px,3.4vw,44px) }
.pdx-crumbs{
  display:flex; align-items:center; gap:12px; margin:0 0 18px; padding-inline-start:clamp(0px,6vw,90px);
  font-size:.9rem; color:var(--x-ink-3);
}
.pdx-crumbs a{ color:var(--x-ink-3); text-decoration:none }
.pdx-crumbs a:hover{ color:var(--x-green) }
.pdx-crumbs span{ font-size:.8rem; opacity:.7 }
.pdx-crumbs b{ color:var(--x-green); font-weight:700 }
.pdx-hero-row{ display:flex; align-items:center; gap:clamp(18px,2.4vw,32px) }
.pdx-badge{
  flex:none; display:grid; place-items:center;
  width:clamp(76px,6.6vw,98px); height:clamp(76px,6.6vw,98px); border-radius:24px;
  background:#E4EFE7; color:var(--x-green);
  box-shadow:inset 0 0 0 1px rgba(15,90,60,.05);
}
.pdx-h1{
  margin:0; font-size:clamp(2.2rem,4vw,3.4rem); font-weight:900; line-height:1.2;
  color:#0E4A31; letter-spacing:0;
}
.pdx-tagline{ margin:8px 0 0; font-size:clamp(1.15rem,1.9vw,1.65rem); font-weight:500; color:var(--x-ink); line-height:1.5 }

/* ---------- شبکهٔ کارت‌ها ---------- */
.pdx-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,1.9vw,26px);
  margin-top:clamp(20px,2.2vw,28px); align-items:stretch;
}
.pdx .pdx-card{
  background:#fff; border:1px solid var(--x-line); border-radius:24px;
  box-shadow:0 1px 2px rgba(35,51,43,.03), 0 10px 30px rgba(35,51,43,.035);
  padding:clamp(22px,2.2vw,30px) clamp(22px,2.3vw,32px);
  min-width:0; display:flex; flex-direction:column;
}
.pdx .pdx-wide{ grid-column:1 / -1 }
.pdx-head{ display:flex; align-items:center; gap:16px; margin-bottom:22px }
.pdx-hico{
  flex:none; display:grid; place-items:center; width:50px; height:50px; border-radius:14px;
  background:var(--x-sage); color:var(--x-green);
}
.pdx-title{ margin:0; font-size:clamp(1.2rem,1.6vw,1.45rem); font-weight:800; color:#173F2C; line-height:1.4 }

/* درباره */
.pdx-text p{ margin:0 0 .6em; font-size:1.04rem; line-height:2; color:var(--x-ink-2) }
.pdx-text p:last-child{ margin-bottom:0 }
.pdx-muted{ color:var(--x-ink-3) !important }
.pdx-goal{
  margin-top:auto;
  display:flex; align-items:center; gap:14px; flex-wrap:nowrap;
  padding:18px 22px; border-radius:18px; background:#EEF5F0;
}
.pdx-text{ margin-bottom:22px }
.pdx-goal-ico{ display:grid; place-items:center; color:#2D6A4C }
.pdx-goal-l{ flex:none; font-size:.86rem; color:var(--x-ink-3) }
.pdx-goal b{ flex:1; min-width:0; font-size:1rem; font-weight:800; color:#173F2C }

/* وضعیت */
.pdx-kvs{ display:flex; flex-direction:column }
.pdx-kv{
  display:flex; align-items:center; gap:14px; padding-block:14px;
  border-bottom:1px solid #EEF1EE;
}
.pdx-kv:first-child{ padding-top:2px }
.pdx-kv:last-child{ border-bottom:0 }
.pdx-kv-l{ flex:1; font-size:1.02rem; color:var(--x-ink-3) }
.pdx-kv-v{ font-size:1.14rem; font-weight:800; color:var(--x-ink); white-space:nowrap }
.pdx-kv-i{ display:grid; place-items:center; width:40px; color:#4F5D55 }
.pdx-bar-info{ margin:6px 0 8px; font-size:.9rem; font-weight:700; color:var(--x-green) }
.pdx-bar{ height:10px; border-radius:99px; background:var(--x-sage); overflow:hidden }
.pdx-bar i{ display:block; height:100%; border-radius:inherit; background:var(--x-green) }
.pdx-info{
  margin-top:auto; display:flex; gap:12px; align-items:flex-start;
  padding:16px 20px; border-radius:16px; background:#F1F7F2;
}
.pdx-kvs, .pdx-bar{ margin-bottom:16px }
.pdx-info-ico{ flex:none; color:#2D6A4C; margin-top:3px; display:grid }
.pdx-info p{ margin:0; font-size:.84rem; line-height:2; color:var(--x-ink-3) }

/* گزارش‌ها */
.pdx-empty{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:0 8px 4px }
.pdx-empty-art{ width:min(220px,70%); height:auto; margin:-6px 0 10px }
.pdx-empty-t{ margin:0; font-size:1.04rem; font-weight:500; color:var(--x-ink) }
.pdx-empty-s{ margin:4px 0 0; font-size:.86rem; color:#8A958F }
.pdx-rep-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px }
.pdx-rep-list li{ padding:16px 18px; border:1px solid var(--x-line); border-radius:16px; background:var(--x-sage-l) }
.pdx-rep-list p{ margin:6px 0 10px; font-size:.92rem; color:var(--x-ink-2) }
.pdx-rep-head{ display:flex; justify-content:space-between; align-items:baseline; gap:10px }
.pdx-rep-date{ font-size:.8rem; color:var(--x-ink-3) }

/* چطور همراه شویم؟ */
.pdx-give > p{ font-size:1.04rem; line-height:2; color:var(--x-ink-2) }
.pdx-give > p.small{ margin:0 0 22px }
.pdx .pdx-cta{
  position:relative; margin-top:auto;
  display:flex; align-items:center; justify-content:center;
  width:100%; min-height:58px; padding:12px 56px; border-radius:16px; border:0;
  background:var(--x-green); color:#fff !important;
  font-family:inherit; font-size:1.06rem; font-weight:700; text-decoration:none;
  box-shadow:0 6px 16px rgba(15,90,60,.16);
  transition:background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.pdx .pdx-cta:hover{ background:var(--x-green-d); box-shadow:0 10px 24px rgba(15,90,60,.22); transform:translateY(-1px) }
.pdx .pdx-cta:focus-visible{ outline:3px solid #BFDCC9; outline-offset:3px }
.pdx-cta-ico{ position:absolute; left:22px; top:50%; transform:translateY(-50%); display:grid; transition:transform .2s ease }
.pdx .pdx-cta:hover .pdx-cta-ico{ transform:translate(-3px,-50%) }

@media (prefers-reduced-motion: reduce){
  .pdx .pdx-cta, .pdx-cta-ico{ transition:none }
  .pdx .pdx-cta:hover{ transform:none }
}

/* ---------- تبلت ---------- */
@media (max-width:980px){
  .pdx-hero-photo{ width:40% }
  .pdx-crumbs{ padding-inline-start:0 }
}

/* ---------- موبایل ---------- */
@media (max-width:760px){
  .pdx-hero{ display:block; min-height:0 }
  .pdx-hero-photo{
    position:relative; width:100%; height:210px;
    -webkit-mask-image:linear-gradient(to bottom, #000 72%, rgba(0,0,0,0) 100%);
            mask-image:linear-gradient(to bottom, #000 72%, rgba(0,0,0,0) 100%);
  }
  .pdx-hero-text{ padding-block:10px 26px }
  .pdx-crumbs{ margin-bottom:14px }
  .pdx-badge{ width:66px; height:66px; border-radius:20px }
  .pdx-badge svg{ width:34px; height:34px }
  .pdx-grid{ grid-template-columns:1fr }
  .pdx-goal{ padding:16px 18px; flex-wrap:wrap }
  .pdx-goal b{ flex-basis:100% }
  .pdx-info br, .pdx-give > p.small br{ display:none }
  .pdx-kv-l{ font-size:.96rem }
}


/* ============================================================
   تم «سیمرغ» — سرصفحهٔ سبز جنگلی، فقط زیر .pdx--simorgh
   ============================================================ */
.pdx--simorgh{ --x-green:#145C3B; --x-green-d:#0F4F34; --x-bg:#FAFBFA; --x-ink-3:#6B756F; --x-line:#E6ECE7 }
.pdx--simorgh .wrap{ max-width:var(--wrap) }

.pdx--simorgh .pdx-hero{
  min-height:clamp(220px,14.6vw,270px);
  border-bottom:0;
  background:
    radial-gradient(95% 150% at 72% -55%, rgba(196,222,203,.92) 0%, rgba(150,188,162,.62) 42%, rgba(70,118,88,0) 64%),
    linear-gradient(180deg, #3F7155 0%, #2C5E42 45%, #1E4C31 100%);
}
.pdx--simorgh .pdx-hero-curve{ display:none }
.pdx--simorgh .pdx-hero-bg::after{
  content:""; position:absolute; top:-175%; right:-8%; width:82%; height:240%;
  border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,255,255,.07), rgba(255,255,255,0));
}
.pdx--simorgh .pdx-hero-photo{
  width:56%;
  -webkit-mask-image:linear-gradient(to right, #000 0%, #000 62%, rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(to right, #000 0%, #000 62%, rgba(0,0,0,0) 100%);
}
.pdx--simorgh .pdx-hero-photo img{ object-position:40% 50% }
.pdx--simorgh .pdx-crumbs{ padding-inline-start:0; color:rgba(255,255,255,.9); margin-bottom:14px; font-size:.92rem }
.pdx--simorgh .pdx-crumbs a{ color:rgba(255,255,255,.92) }
.pdx--simorgh .pdx-crumbs a:hover{ color:#fff }
.pdx--simorgh .pdx-crumbs b{ color:rgba(255,255,255,.92); font-weight:500 }
.pdx--simorgh .pdx-crumbs span{ opacity:.9; font-size:.95rem }
.pdx--simorgh .pdx-hero-row{ gap:clamp(16px,1.6vw,22px) }
.pdx--simorgh .pdx-badge{
  width:clamp(64px,4.6vw,78px); height:clamp(64px,4.6vw,78px); border-radius:18px;
  background:rgba(255,255,255,.16); color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.26), 0 6px 18px rgba(10,40,24,.12);
}
.pdx--simorgh .pdx-badge svg{ width:36px; height:36px }
.pdx--simorgh .pdx-h1{ color:#fff; font-weight:800; font-size:clamp(2rem,3vw,2.75rem) }
.pdx--simorgh .pdx-tagline{ color:rgba(255,255,255,.94); font-size:clamp(1rem,1.2vw,1.12rem); margin-top:6px }

/* کارت‌ها */
.pdx--simorgh .pdx-grid{ grid-template-columns:1.07fr 1fr; gap:22px 26px; margin-top:28px }
.pdx--simorgh .pdx-card{
  border-radius:22px; border-color:#E6ECE7; background:#FEFEFD;
  box-shadow:0 1px 2px rgba(35,51,43,.03), 0 8px 26px rgba(35,51,43,.045);
  padding:20px 24px 24px;
}
.pdx--simorgh .pdx-head{ margin-bottom:14px; gap:14px }
.pdx--simorgh .pdx-head--split{ justify-content:space-between }
.pdx--simorgh .pdx-head--split .pdx-hico{ order:2 }
.pdx--simorgh .pdx-hico{ width:56px; height:56px; border-radius:15px; background:#EDF5EF; color:var(--x-green) }
.pdx--simorgh .pdx-title{ font-size:clamp(1.08rem,1.25vw,1.22rem); color:#1D2A22; font-weight:800 }

.pdx--simorgh .pdx-text p{ font-size:.95rem; line-height:1.95; color:#56615B }
.pdx--simorgh .pdx-text{ margin-bottom:18px }
.pdx--simorgh .pdx-goal{ padding:14px 18px; border-radius:14px; background:#EFF6F1; gap:12px }
.pdx--simorgh .pdx-goal-ico{ color:var(--x-green) }
.pdx--simorgh .pdx-goal-l{ font-size:.86rem; color:#56615B }
.pdx--simorgh .pdx-goal b{ font-size:1rem; color:#1D2A22 }

.pdx--simorgh .pdx-kv{ padding-block:12px; border-bottom:1px dashed #E2E8E3 }
.pdx--simorgh .pdx-kv:first-child{ padding-top:0 }
.pdx--simorgh .pdx-kv:last-child{ border-bottom:0 }
.pdx--simorgh .pdx-kv-l{ font-size:.92rem; color:#56615B }
.pdx--simorgh .pdx-kv-v{ font-size:1.18rem; color:#173F2C }
.pdx--simorgh .pdx-kvs{ margin-bottom:12px }
.pdx--simorgh .pdx-info{ align-items:center; gap:16px; padding:12px 20px; border-radius:14px; background:#F1F7F2 }
.pdx--simorgh .pdx-info-ico{ order:0; margin:0; color:#2F4A3B }
.pdx--simorgh .pdx-info p{ font-size:.8rem; line-height:1.95; color:#56615B }

.pdx--simorgh .pdx-give > p{ font-size:.95rem; line-height:1.9; color:#56615B }
.pdx--simorgh .pdx-give > p.small{ margin:0 0 20px }
.pdx--simorgh .pdx-cta{
  min-height:58px; border-radius:16px;
  background:linear-gradient(90deg, #1B5A3C 0%, #1E6443 55%, #1A5A3B 100%);
  box-shadow:0 8px 20px rgba(20,92,59,.18);
  font-size:1.08rem;
}
.pdx--simorgh .pdx-cta:hover{ background:var(--x-green-d) }
.pdx-cta-ico--circle{
  left:18px; width:34px; height:34px; border-radius:50%; place-items:center;
  background:rgba(255,255,255,.16); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}

.pdx-empty-circle{ width:90px; height:90px; margin:-6px 0 12px }
.pdx--simorgh .pdx-empty-t{ font-size:.96rem; font-weight:700; color:#2B3A32 }
.pdx--simorgh .pdx-empty-s{ font-size:.84rem; color:#8A958F; margin-top:6px }

@media (max-width:760px){
  .pdx--simorgh .pdx-hero{ display:flex; flex-direction:column-reverse; min-height:0 }
  .pdx--simorgh .pdx-hero-photo{
    width:100%; height:190px;
    -webkit-mask-image:linear-gradient(to top, #000 70%, rgba(0,0,0,0) 100%);
            mask-image:linear-gradient(to top, #000 70%, rgba(0,0,0,0) 100%);
  }
  .pdx--simorgh .pdx-hero-text{ padding-block:26px 12px }
  .pdx--simorgh .pdx-grid{ grid-template-columns:1fr }
  .pdx--simorgh .pdx-hico{ width:48px; height:48px }
}

/* /path-water.css */
/* ============================================================
   طرح مینیمال صفحهٔ مسیر «قطره‌های زندگی» — فقط زیر کلاس .pdw
   هیچ انتخابگری بیرون از .pdw ندارد، پس روی صفحه یا بخش دیگری اثر نمی‌گذارد.
   ============================================================ */
.pdw{
  --w-green:#00A820;  --w-green-d:#188834; --w-forest:#14532F;
  --w-sage:#EDF6F0;   --w-sage-2:#F5FAF6;  --w-line:#E6EDE8;
  --w-ink:#1F2B25;    --w-ink-2:#4A5650;   --w-ink-3:#7A857F;
  background:linear-gradient(180deg,#F7FAF8 0%, #FBFCFB 340px);
  padding-bottom:clamp(44px,6vw,80px);
  color:var(--w-ink);
}

/* ---------- سرصفحه ---------- */
.pdw-hero{
  position:relative; overflow:hidden;
  min-height:clamp(200px,17vw,250px);
  display:flex; align-items:center;
  background:
    radial-gradient(60% 140% at 100% 0%, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(100deg, #2F7550 0%, #4C8F68 38%, #6FA886 70%, #93C0A3 100%);
}
.pdw-hero-bg{ position:absolute; inset:0; pointer-events:none }
.pdw-hero-art{
  position:absolute; inset-block:0; left:0; height:100%; width:min(52%,620px);
  -webkit-mask-image:linear-gradient(to right,#000 55%,rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(to right,#000 55%,rgba(0,0,0,0) 100%);
}
.pdw-hero-img{
  position:absolute; inset-block:0; left:0; width:48%; height:100%; object-fit:cover;
  -webkit-mask-image:linear-gradient(to right,#000 60%,rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(to right,#000 60%,rgba(0,0,0,0) 100%);
}
.pdw-hero-waves{ position:absolute; inset:0; width:100%; height:100% }
.pdw-drop{ transform-origin:392px 146px; animation:pdwSway 6s ease-in-out infinite }
@keyframes pdwSway{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(3px) } }

.pdw-hero-in{ position:relative; width:100%; padding-block:clamp(26px,3.2vw,40px) }
.pdw-crumbs{
  display:flex; align-items:center; gap:10px; margin:0 0 20px;
  font-size:.9rem; color:rgba(255,255,255,.82);
}
.pdw-crumb-home{ display:inline-grid; color:rgba(255,255,255,.85) }
.pdw-crumbs a{ color:rgba(255,255,255,.88); text-decoration:none }
.pdw-crumbs a:hover{ color:#fff; text-decoration:underline }
.pdw-sep{ font-size:.8rem; opacity:.65 }
.pdw-crumbs b{ color:#fff; font-weight:600 }
.pdw-hero-row{ display:flex; align-items:center; gap:clamp(16px,2vw,24px) }
.pdw-badge{
  flex:none; display:grid; place-items:center;
  width:clamp(64px,5.4vw,76px); height:clamp(64px,5.4vw,76px); border-radius:20px;
  color:#fff;
  background:linear-gradient(145deg,rgba(255,255,255,.30),rgba(255,255,255,.10));
  border:1px solid rgba(255,255,255,.38);
  box-shadow:0 8px 24px rgba(10,50,28,.12), inset 0 1px 0 rgba(255,255,255,.35);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.pdw-h1{
  margin:0; color:#fff; font-weight:800; line-height:1.25;
  font-size:clamp(1.9rem,3.4vw,2.6rem);
  text-shadow:0 2px 14px rgba(10,50,28,.12);
}
.pdw-tagline{ margin:6px 0 0; color:rgba(255,255,255,.9); font-size:clamp(1rem,1.5vw,1.15rem); font-weight:400 }

/* ---------- چیدمان دوستونه ---------- */
.pdw-grid{
  display:grid; grid-template-columns:minmax(0,1.22fr) minmax(0,1fr);
  gap:clamp(18px,2vw,26px); margin-top:clamp(24px,2.6vw,34px); align-items:start;
}
.pdw-main, .pdw-side{ display:flex; flex-direction:column; gap:clamp(18px,2vw,26px); min-width:0 }

.pdw .pdw-card{
  position:relative; overflow:hidden;
  background:#fff; border:1px solid var(--w-line); border-radius:22px;
  box-shadow:0 1px 2px rgba(31,43,37,.03), 0 8px 28px rgba(31,43,37,.04);
  padding:clamp(22px,2.2vw,30px);
  min-width:0;
}
.pdw-head{ display:flex; align-items:center; gap:12px; margin-bottom:18px }
.pdw-hico{
  flex:none; display:grid; place-items:center; width:40px; height:40px; border-radius:50%;
  background:var(--w-sage); color:var(--w-green-d);
}
.pdw .pdw-title{ margin:0; font-size:clamp(1.08rem,1.4vw,1.22rem); font-weight:700; color:var(--w-forest); line-height:1.5 }

/* درباره */
.pdw-text p{ margin:0 0 .9em; color:var(--w-ink-2); font-size:1rem; line-height:2.05 }
.pdw-text p:last-child{ margin-bottom:0 }
.pdw-muted{ color:var(--w-ink-3) }
.pdw-goal{
  position:relative; overflow:hidden; margin-top:22px;
  display:flex; align-items:center; gap:14px;
  padding:16px 18px; border-radius:16px;
  background:linear-gradient(100deg,#EEF7F1,#F5FAF6);
  border:1px solid #DFEDE3;
}
.pdw-goal-hills{ position:absolute; inset-inline:0; bottom:0; width:100%; height:60%; pointer-events:none }
.pdw-goal-ico{
  position:relative; flex:none; display:grid; place-items:center; width:46px; height:46px; border-radius:14px;
  background:#DCEEE2; color:var(--w-green-d);
}
.pdw-goal-txt{ position:relative; display:flex; flex-direction:column; gap:2px }
.pdw-goal-l{ font-size:.85rem; color:var(--w-ink-3) }
.pdw-goal b{ font-size:1.05rem; font-weight:700; color:var(--w-forest) }

/* وضعیت */
.pdw-statrow{ display:grid; grid-template-columns:1fr 1fr; gap:0 }
.pdw-statrow.has-3{ grid-template-columns:repeat(3,1fr) }
.pdw-stat{ display:flex; align-items:center; gap:12px; padding:4px 14px; min-width:0 }
.pdw-stat:first-child{ padding-inline-start:0 }
.pdw-stat + .pdw-stat{ border-inline-start:1px solid var(--w-line) }
.pdw-stat-i{
  flex:none; display:grid; place-items:center; width:44px; height:44px; border-radius:50%;
  background:var(--w-sage-2); border:1px solid #E3EFE6; color:var(--w-green-d);
}
.pdw-statrow.has-3 .pdw-stat{ flex-direction:column; align-items:flex-start; gap:8px }
.pdw-statrow.has-3 .pdw-stat-i{ width:38px; height:38px }
.pdw-statrow.has-3 .pdw-stat-v{ white-space:nowrap; font-size:1.02rem }
.pdw-stat-l{ display:block; font-size:.82rem; color:var(--w-ink-3); line-height:1.6 }
.pdw-stat-v{ display:block; font-size:1.12rem; font-weight:700; color:var(--w-green-d); line-height:1.5 }

.pdw-progress{ display:flex; align-items:center; gap:12px; margin-top:20px }
.pdw-bar{ flex:1; height:6px; border-radius:99px; background:#EBF1EC; overflow:hidden }
.pdw-bar i{ display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#3FB15A,var(--w-green-d)) }
.pdw-bar-info{ flex:none; font-size:.85rem; font-weight:600; color:var(--w-green-d) }

.pdw-info{
  display:flex; gap:10px; align-items:flex-start;
  margin-top:20px; padding:13px 15px; border-radius:14px;
  background:#F6F8F7; border:1px solid #EDF1EE;
}
.pdw-info-ico{ flex:none; display:inline-grid; color:#8A958F; margin-top:3px }
.pdw-info p{ margin:0; font-size:.84rem; line-height:1.95; color:var(--w-ink-3) }

/* گزارش‌ها */
.pdw-empty{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:4px 0 6px }
.pdw-empty-art{ width:min(100%,380px); height:auto; margin-bottom:10px }
.pdw-empty-t{ margin:0; font-size:.95rem; font-weight:500; color:var(--w-ink-2) }
.pdw-empty-s{ margin:4px 0 0; font-size:.84rem; color:var(--w-ink-3) }
.pdw-rep-list{ list-style:none; margin:0; padding:0; display:grid; gap:12px }
.pdw-rep-list li{ padding:14px 16px; border:1px solid var(--w-line); border-radius:14px; background:var(--w-sage-2) }
.pdw-rep-head{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap }
.pdw-rep-head b{ color:var(--w-forest) }
.pdw-rep-date{ font-size:.82rem; color:var(--w-ink-3) }
.pdw-rep-list p{ margin:6px 0 10px; font-size:.92rem; color:var(--w-ink-2) }

/* مشارکت (همان کارت contributionBlock) */
.pdw-give > p.small{ color:var(--w-ink-2); font-size:.95rem; line-height:2 }
.pdw .pdw-cta{
  display:flex; align-items:center; justify-content:center; gap:10px;
  min-height:50px; margin-top:6px; border-radius:14px; font-weight:600;
}
.pdw a.pdw-cta{
  background:var(--w-sage-2); color:var(--w-green-d); border:1px solid #DCEBE0; box-shadow:none;
}
.pdw a.pdw-cta:hover{ background:var(--w-sage); border-color:#C9E0CF; color:var(--w-forest); text-decoration:none }
.pdw .pdw-cta-ico{ display:inline-grid; transition:transform .2s ease }
.pdw .pdw-cta:hover .pdw-cta-ico{ transform:translateX(-3px) }
.pdw .pdw-cta:focus-visible{ outline:2px solid var(--w-green); outline-offset:3px }

/* بخش‌های اختیاری (فقط وقتی داده دارند) */
.pdw .pdw-gallery .pd-h2{ font-size:1.15rem; color:var(--w-forest) }
.pdw .pdw-linked .pd-h2{ font-size:1.15rem; color:var(--w-forest) }

/* ---------- واکنش‌گرا ---------- */
@media (max-width:900px){
  .pdw-grid{ grid-template-columns:1fr }
}
@media (max-width:640px){
  .pdw-hero-art, .pdw-hero-img{ width:80%; opacity:.45 }
  .pdw-statrow, .pdw-statrow.has-3{ grid-template-columns:1fr; gap:12px }
  .pdw-stat{ padding:0 }
  .pdw-stat + .pdw-stat{ border-inline-start:0; border-top:1px solid var(--w-line); padding-top:12px }
  .pdw .pdw-card{ border-radius:20px; padding:20px 18px }
}
@media (prefers-reduced-motion:reduce){
  .pdw-drop{ animation:none }
}

/* ============================================================
   تم «قدم‌های امید» — فقط زیر .pdw--shoes
   ============================================================ */
.pdw--shoes .pdw-hero{
  min-height:clamp(220px,19vw,280px);
  background:
    radial-gradient(55% 120% at 0% 100%, #EAF3EC 0%, rgba(234,243,236,0) 70%),
    linear-gradient(100deg, #F3F7F2 0%, #F7F9F5 50%, #FAFAF6 100%);
  border-bottom:1px solid #EDF1EC;
}
.pdw--shoes .pdw-hero-art{
  width:min(50%,640px);
  -webkit-mask-image:linear-gradient(to right,#000 45%,rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(to right,#000 45%,rgba(0,0,0,0) 100%);
}
.pdw--shoes .pdw-crumbs{ color:var(--w-ink-3) }
.pdw--shoes .pdw-crumb-home, .pdw--shoes .pdw-crumbs a{ color:var(--w-ink-3) }
.pdw--shoes .pdw-crumbs a:hover{ color:var(--w-forest) }
.pdw--shoes .pdw-crumbs b{ color:var(--w-forest) }
.pdw--shoes .pdw-badge{
  color:var(--w-forest);
  background:linear-gradient(145deg,rgba(214,234,220,.85),rgba(232,243,235,.6));
  border:1px solid rgba(24,136,52,.10);
  box-shadow:0 6px 20px rgba(20,83,47,.06), inset 0 1px 0 rgba(255,255,255,.7);
}
.pdw--shoes .pdw-h1{ color:var(--w-forest); text-shadow:none }
.pdw--shoes .pdw-tagline{ color:var(--w-ink-2) }

/* دکمه/لینک بخش «چطور همراه شوم؟» وقتی کمپین فعالی نیست (همان لینک موجود) */
.pdw--shoes a.pdw-cta{
  background:#EEF2EE; color:#7D8A82; border:1px solid #E2E8E3;
}
.pdw--shoes a.pdw-cta:hover{ background:#E7EEE8; color:var(--w-forest); border-color:#D6E2D9 }
.pdw--shoes .pdw-cta:hover .pdw-cta-ico{ transform:none }

@media (max-width:640px){
  .pdw--shoes .pdw-hero-art{ width:90%; opacity:.18 }
}

/* وضعیت: ردیف‌های ساده با جداکننده (فقط قدم‌های امید) */
.pdw--shoes .pdw-statrow, .pdw--shoes .pdw-statrow.has-3{ grid-template-columns:1fr; gap:0 }
.pdw--shoes .pdw-stat, .pdw--shoes .pdw-statrow.has-3 .pdw-stat{
  flex-direction:row; align-items:center; gap:14px; padding:12px 0; border:0;
}
.pdw--shoes .pdw-stat + .pdw-stat{ border-top:1px solid var(--w-line); border-inline-start:0; padding-top:12px }
.pdw--shoes .pdw-stat:first-child{ border-top:1px solid var(--w-line) }
.pdw--shoes .pdw-stat > div{ flex:1; display:flex; align-items:center; justify-content:space-between; gap:12px }
.pdw--shoes .pdw-stat-i, .pdw--shoes .pdw-statrow.has-3 .pdw-stat-i{ order:2; width:40px; height:40px; background:var(--w-sage); border:0 }
.pdw--shoes .pdw-stat-l{ font-size:.92rem; color:var(--w-ink-2) }
.pdw--shoes .pdw-stat-v{ font-size:1.12rem; white-space:nowrap }
.pdw--shoes .pdw-info{ margin-top:14px }
@media (max-width:640px){
  .pdw--shoes .pdw-stat + .pdw-stat{ padding-top:12px }
}

/* ============================================================
   تم «یک روز برای تو» — فقط زیر .pdw--day
   ============================================================ */
.pdw--day .pdw-hero{
  min-height:clamp(220px,19vw,280px);
  background:linear-gradient(100deg, #3E8358 0%, #4F9168 40%, #6FA683 75%, #8FBC9D 100%);
}
.pdw--day .pdw-hero-art{
  width:min(50%,640px);
  -webkit-mask-image:linear-gradient(to right,#000 50%,rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(to right,#000 50%,rgba(0,0,0,0) 100%);
}
.pdw--day .pdw-hero-img{ width:50% }
.pdw-day-deco{ position:absolute; inset:0; width:100%; height:100% }
.pdw--day .pdw-badge{
  width:clamp(76px,6.6vw,96px); height:clamp(76px,6.6vw,96px); border-radius:24px; position:relative;
}
.pdw--day .pdw-badge::after{   /* سه خط کوچک درخشش کنار آیکن */
  content:""; position:absolute; top:-12px; left:-16px; width:22px; height:22px;
  background:
    linear-gradient(#F3E7B4,#F3E7B4) 2px 2px/2px 8px no-repeat,
    linear-gradient(#F3E7B4,#F3E7B4) 10px 9px/8px 2px no-repeat,
    linear-gradient(#F3E7B4,#F3E7B4) 9px 17px/8px 2px no-repeat;
  opacity:.8; transform:rotate(-10deg);
}

/* کارت‌ها بدون آیکن عنوان (مطابق مرجع) */
.pdw--day .pdw-head{ margin-bottom:16px }

/* وضعیت: عدد بالا، برچسب پایین، آیکن در چپ */
.pdw--day .pdw-statrow, .pdw--day .pdw-statrow.has-3{ grid-template-columns:1fr; gap:0 }
.pdw--day .pdw-stat, .pdw--day .pdw-statrow.has-3 .pdw-stat{
  flex-direction:row; align-items:center; gap:14px; padding:12px 0; border:0;
}
.pdw--day .pdw-stat + .pdw-stat{ border-top:1px dashed #E2E9E4; border-inline-start:0 }
.pdw--day .pdw-stat > div{ flex:1; display:flex; flex-direction:column-reverse; align-items:flex-start }
.pdw--day .pdw-stat-i, .pdw--day .pdw-statrow.has-3 .pdw-stat-i{ order:2; width:48px; height:48px; background:var(--w-sage); border:0 }
.pdw--day .pdw-stat-v{ font-size:1.18rem; color:var(--w-forest) }
.pdw--day .pdw-stat-l{ font-size:.9rem; color:var(--w-ink-3) }

/* هدف مسیر: ساده‌تر، بدون تپه */
.pdw--day .pdw-goal-hills{ display:none }
.pdw--day .pdw-goal{ padding:14px 18px; background:#EAF4EC; border-color:#DCEBE0 }
.pdw--day .pdw-goal-ico{ width:auto; height:auto; background:none; color:var(--w-green-d) }
.pdw--day .pdw-goal-txt{ flex-direction:row; align-items:baseline; gap:10px; flex-wrap:wrap }

/* دکمه/لینک «چطور همراه شوم؟» وقتی کمپین فعالی نیست (همان لینک موجود) */
.pdw--day a.pdw-cta{ background:#EEF1EE; color:#8A948E; border:1px solid #E4E9E5 }
.pdw--day a.pdw-cta:hover{ background:#E8EDE9; color:var(--w-forest); border-color:#D8E2DA }
.pdw--day .pdw-cta:hover .pdw-cta-ico{ transform:none }

@media (max-width:640px){
  .pdw--day .pdw-hero-art{ width:100%; opacity:.35 }
}

/* ============================================================
   تم «هدیه تولد» — فقط زیر .pdw--gift
   ============================================================ */
.pdw--gift{ padding-top:14px }
.pdw--gift .pdw-hero{
  margin-inline:clamp(10px,2vw,30px); border-radius:24px;
  min-height:clamp(220px,19vw,280px);
  background:
    radial-gradient(60% 120% at 80% 0%, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(100deg, #D9ECDD 0%, #E6F2E8 45%, #EEF6EF 100%);
  box-shadow:0 1px 2px rgba(31,43,37,.03), 0 10px 30px rgba(31,43,37,.04);
}
.pdw--gift .pdw-hero-art{
  width:min(46%,600px);
  -webkit-mask-image:linear-gradient(to right,#000 60%,rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(to right,#000 60%,rgba(0,0,0,0) 100%);
}
.pdw--gift .pdw-hero-waves path{ stroke:#fff }
.pdw--gift .pdw-crumbs, .pdw--gift .pdw-crumb-home, .pdw--gift .pdw-crumbs a{ color:var(--w-ink-2) }
.pdw--gift .pdw-crumbs a:hover{ color:var(--w-forest) }
.pdw--gift .pdw-crumbs b{ color:var(--w-forest) }
.pdw--gift .pdw-h1{ color:var(--w-forest); text-shadow:none }
.pdw--gift .pdw-tagline{ color:#4E6E5A }
.pdw--gift .pdw-badge{
  width:clamp(76px,6.6vw,100px); height:clamp(76px,6.6vw,100px); border-radius:26px; position:relative;
  color:var(--w-forest);
  background:linear-gradient(145deg,rgba(255,255,255,.75),rgba(235,245,238,.55));
  border:1px solid rgba(255,255,255,.8);
  box-shadow:0 8px 24px rgba(20,83,47,.07);
}
.pdw--gift .pdw-badge::after{
  content:""; position:absolute; top:-14px; left:-18px; width:22px; height:22px;
  background:
    linear-gradient(#7FB08C,#7FB08C) 2px 2px/2px 8px no-repeat,
    linear-gradient(#7FB08C,#7FB08C) 10px 12px/9px 2px no-repeat;
  transform:rotate(-20deg); opacity:.8;
}

.pdw--gift .pdw-head{ margin-bottom:16px }

/* وضعیت: آیکن راست، برچسب، عدد در چپ */
.pdw--gift .pdw-statrow, .pdw--gift .pdw-statrow.has-3{ grid-template-columns:1fr; gap:0 }
.pdw--gift .pdw-stat, .pdw--gift .pdw-statrow.has-3 .pdw-stat{
  flex-direction:row; align-items:center; gap:14px; padding:12px 0; border:0;
}
.pdw--gift .pdw-stat + .pdw-stat{ border-top:1px dashed #E2E9E4; border-inline-start:0 }
.pdw--gift .pdw-stat > div{ flex:1; display:flex; align-items:center; justify-content:space-between; gap:12px }
.pdw--gift .pdw-stat-i, .pdw--gift .pdw-statrow.has-3 .pdw-stat-i{ width:46px; height:46px; background:var(--w-sage); border:0 }
.pdw--gift .pdw-stat-l{ font-size:.95rem; color:var(--w-ink-2) }
.pdw--gift .pdw-stat-v{ font-size:1.15rem; color:var(--w-forest); white-space:nowrap }
.pdw--gift .pdw-info{ background:none; border:0; padding:6px 0 0 }

/* هدف مسیر */
.pdw--gift .pdw-goal-hills{ display:none }
.pdw--gift .pdw-goal{ background:#EAF4EC; border-color:#DCEBE0 }
.pdw--gift .pdw-goal-ico{ background:#fff; color:var(--w-green-d); border-radius:50% }

/* دکمه/لینک «چطور همراه شوم؟» وقتی کمپین فعالی نیست (همان لینک موجود) */
.pdw--gift a.pdw-cta{ background:#ECEFEC; color:#8A948E; border:1px solid #E3E8E4 }
.pdw--gift a.pdw-cta:hover{ background:#E6ECE7; color:var(--w-forest); border-color:#D8E2DA }
.pdw--gift .pdw-cta:hover .pdw-cta-ico{ transform:none }

@media (max-width:640px){
  .pdw--gift .pdw-hero-art{ width:100%; opacity:.3 }
}

/* ============================================================
   تم «یک عروسک، یک لبخند» — فقط زیر .pdw--teddy
   ============================================================ */
.pdw--teddy .pdw-hero{
  min-height:clamp(230px,20vw,290px);
  background:
    radial-gradient(50% 120% at 100% 100%, #CFE6D4 0%, rgba(207,230,212,0) 70%),
    linear-gradient(100deg, #E8F3EA 0%, #EEF6EF 50%, #E3F0E6 100%);
}
.pdw--teddy .pdw-hero-art{
  width:min(56%,760px);
  -webkit-mask-image:linear-gradient(to right,#000 62%,rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(to right,#000 62%,rgba(0,0,0,0) 100%);
}
.pdw--teddy .pdw-hero-img{ width:54% }
/* موج سفید نیمه‌شفاف بین تصویر و متن */
.pdw--teddy .pdw-hero-bg::after{
  content:""; position:absolute; inset-block:-20%; left:36%; width:46%;
  border-radius:50%; background:rgba(255,255,255,.35);
  box-shadow:inset 30px 0 60px rgba(255,255,255,.25);
  transform:rotate(-8deg); pointer-events:none;
}
.pdw--teddy .pdw-hero-waves path{ stroke:#fff }
.pdw--teddy .pdw-crumbs, .pdw--teddy .pdw-crumb-home, .pdw--teddy .pdw-crumbs a{ color:var(--w-ink-2) }
.pdw--teddy .pdw-crumbs a:hover{ color:var(--w-forest) }
.pdw--teddy .pdw-crumbs b{ color:var(--w-ink-2); font-weight:500 }
.pdw--teddy .pdw-h1{ color:var(--w-forest); text-shadow:none }
.pdw--teddy .pdw-tagline{ color:#3E5A48 }
.pdw--teddy .pdw-badge{
  width:clamp(76px,6.6vw,96px); height:clamp(76px,6.6vw,96px); border-radius:24px; position:relative;
  color:var(--w-green-d);
  background:linear-gradient(145deg,rgba(255,255,255,.8),rgba(240,248,242,.6));
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 8px 24px rgba(20,83,47,.07);
}
.pdw--teddy .pdw-badge::after{
  content:""; position:absolute; top:-14px; left:-18px; width:22px; height:22px;
  background:
    linear-gradient(#7FB08C,#7FB08C) 2px 2px/2px 8px no-repeat,
    linear-gradient(#7FB08C,#7FB08C) 10px 12px/9px 2px no-repeat;
  transform:rotate(-20deg); opacity:.8;
}
.pdw--teddy .pdw-hico{ border-radius:14px }

/* وضعیت: آیکن راست، برچسب، عدد در چپ */
.pdw--teddy .pdw-statrow, .pdw--teddy .pdw-statrow.has-3{ grid-template-columns:1fr; gap:0 }
.pdw--teddy .pdw-stat, .pdw--teddy .pdw-statrow.has-3 .pdw-stat{
  flex-direction:row; align-items:center; gap:12px; padding:10px 0; border:0;
}
.pdw--teddy .pdw-stat + .pdw-stat{ border-top:1px solid var(--w-line); border-inline-start:0 }
.pdw--teddy .pdw-stat > div{ flex:1; display:flex; align-items:center; justify-content:space-between; gap:12px }
.pdw--teddy .pdw-stat-i, .pdw--teddy .pdw-statrow.has-3 .pdw-stat-i{ width:40px; height:40px; background:var(--w-sage); border:0 }
.pdw--teddy .pdw-stat-l{ font-size:.93rem; color:var(--w-ink-2) }
.pdw--teddy .pdw-stat-v{ font-size:1.12rem; color:var(--w-forest); white-space:nowrap }
.pdw--teddy .pdw-info{ background:none; border:0; border-top:1px dashed #E2E9E4; border-radius:0; padding:12px 0 0; margin-top:10px }

/* هدف مسیر با برگ تزئینی سمت چپ */
.pdw--teddy .pdw-goal-hills{ display:none }
.pdw--teddy .pdw-goal{ background:linear-gradient(100deg,#EEF7F0,#E6F2E9); border-color:#DCEBE0; padding:18px }
.pdw--teddy .pdw-goal-ico{ background:#DCEEE2; border-radius:50%; width:44px; height:44px }
.pdw-goal-leaf{ position:absolute; left:10px; bottom:0; width:80px; height:72px; pointer-events:none }

/* دکمه/لینک «چطور همراه شوم؟» وقتی کمپین فعالی نیست (همان لینک موجود) */
.pdw--teddy a.pdw-cta{ background:#ECEFEC; color:#8A948E; border:1px solid #E3E8E4 }
.pdw--teddy a.pdw-cta:hover{ background:#E6ECE7; color:var(--w-forest); border-color:#D8E2DA }
.pdw--teddy .pdw-cta:hover .pdw-cta-ico{ transform:none }

@media (max-width:640px){
  .pdw--teddy .pdw-hero-art{ width:100%; opacity:.28 }
  .pdw--teddy .pdw-hero-bg::after{ display:none }
}

/* ============================================================
   تصویر سرصفحه (برگرفته از طرح مرجع یا بارگذاری ادمین) — فقط زیر .pdw
   ============================================================ */
.pdw .pdw-hero.has-img .pdw-hero-img{
  inset-block:0; left:0; height:100%; object-fit:cover; object-position:left center;
  -webkit-mask-image:linear-gradient(to right,#000 72%,rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(to right,#000 72%,rgba(0,0,0,0) 100%);
}
.pdw:not([class*="pdw--"]) .pdw-hero.has-img .pdw-hero-img{ width:min(60%,900px) }
.pdw--shoes .pdw-hero.has-img .pdw-hero-img{ width:min(62%,940px) }
.pdw--day   .pdw-hero.has-img .pdw-hero-img{ width:min(56%,860px) }
.pdw--gift  .pdw-hero.has-img .pdw-hero-img{ width:min(38%,560px) }
.pdw--teddy .pdw-hero.has-img .pdw-hero-img{ width:min(62%,940px) }
@media (max-width:640px){
  .pdw .pdw-hero.has-img .pdw-hero-img{ width:100% !important; opacity:.3 }
}
.pdw--teddy .pdw-hero.has-img .pdw-hero-bg::after{ left:52%; width:40%; background:rgba(255,255,255,.22) }

/* «هدیه تولد» — تصویر سرصفحهٔ تازه (برگرفته از طرح مرجع) */
.pdw--gift .pdw-hero.has-img{ min-height:clamp(240px,21vw,320px) }
.pdw--gift .pdw-hero.has-img .pdw-hero-img{
  width:min(70%,1100px);
  -webkit-mask-image:linear-gradient(to right,#000 80%,rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(to right,#000 80%,rgba(0,0,0,0) 100%);
}
.pdw--gift .pdw-hero.has-img{ background:#E9F4EC }