/* ========== Why Parin Sanat (pages/why.css) ========== */
:root{
  --sky-200:#bae6fd; --sky-300:#7dd3fc; --sky-400:#38bdf8;
  --emerald-200:#a7f3d0; --emerald-300:#6ee7b7; --emerald-400:#34d399;
  --slate-50:#f8fafc; --slate-100:#f1f5f9; --slate-200:#e2e8f0; --slate-300:#cbd5e1; --slate-700:#334155; --slate-900:#0f172a;
}

/* بنر */
.why-banner{
  border-radius:1.5rem; /* md:rounded-3xl */
  overflow:hidden;
  border:2px solid var(--slate-200);
  box-shadow:0 14px 40px rgba(15,23,42,.10);
  position:relative;
}
.why-banner .ring{position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.04)}
.why-banner .grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,6,23,.0),rgba(2,6,23,.35) 65%,rgba(2,6,23,.55))}
.why-title-wrap{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;padding:1.25rem 1rem}
.why-title{color:#fff;text-shadow:0 8px 32px rgba(0,0,0,.35)}

/* کارت‌ها و دکمه‌ها */
.card{
  background:#fff;border:1px solid var(--slate-200);border-radius:1.25rem;
  transition:border-color .25s, box-shadow .25s, transform .18s;
}
.card:hover{border-color:var(--sky-300);box-shadow:0 18px 40px rgba(15,23,42,.10);transform:translateY(-2px)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.7rem 1.1rem;border-radius:14px;border:2px solid transparent;
  font-weight:700;transition:background-color .2s,border-color .2s,box-shadow .2s,transform .08s
}
.btn:active{transform:scale(.985)}
.btn-outline{background:#fff;color:var(--slate-900);border-color:var(--slate-200)}
.btn-outline:hover{border-color:var(--slate-300);background:var(--slate-50);box-shadow:0 10px 22px rgba(15,23,42,.08)}
.btn-outline.sky{border-color:color-mix(in oklab, var(--sky-300) 50%, transparent)}
.btn-outline.sky:hover{border-color:var(--sky-400)}
.btn-outline.emerald{border-color:color-mix(in oklab, var(--emerald-300) 50%, transparent)}
.btn-outline.emerald:hover{border-color:var(--emerald-400)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--slate-900)}
.btn-ghost:hover{background:var(--slate-50);border-color:var(--slate-200)}

/* چیپ‌ها و بَدج‌ها */
.badge{display:inline-flex;align-items:center;gap:.55rem;font-weight:800;border-radius:999px;
  border:1px solid var(--slate-200);padding:.45rem .85rem;background:#fff}

/* لیست شماره‌دار زیبا برای دلایل */
.reasons{counter-reset:r}
.reasons .reason{counter-increment:r;position:relative;padding-right:3.5rem}
.reasons .reason::before{
  content:counter(r);
  position:absolute;right:.85rem;top:.4rem;width:2.4rem;height:2.4rem;display:grid;place-items:center;
  border-radius:999px;border:2px solid var(--slate-200);background:#fff;font-weight:900;color:var(--slate-700)
}

/* KPI */
.kpi{display:flex;flex-direction:column;gap:.25rem;padding:1rem 1.25rem;border:1px dashed var(--slate-200);border-radius:1rem;background:linear-gradient(135deg,#fff, var(--slate-50))}
.kpi .val{font-weight:900}

/* انیمیشن ظاهر شدن ملایم */
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.reveal{animation:fadeUp .45s ease both}

/* ریسپانسیو ریز */
@media (max-width:640px){
  .btn{padding:.65rem 1rem;border-radius:12px}
}