/* ============================================================
   orthopro.ir — glam2.css — نسخهٔ ۲.۲
   ۲.۲: آکاردئونِ آهسته‌تر + فاصلهٔ متقارن متن پاسخ
   ============================================================ */

/* ============ ۱) نقشهٔ درد — .pain ============ */
.pains .pain {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1.5px solid #D8E4EF;
  border-radius: 999px !important;
  font-weight: 700;
  color: #1E3A5F;
  box-shadow: 0 2px 8px rgba(30,58,95,.07);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pains .pain::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 40%;
  right: -50%;
  background: linear-gradient(90deg, transparent, rgba(41,168,216,.25), transparent);
  transform: skewX(-18deg);
  transition: right .45s ease;
  pointer-events: none;
}
.pains .pain:hover::after { right: 130%; }
.pains .pain:hover {
  transform: translateY(-3px) scale(1.03);
  border-color: #7FB3E0;
  box-shadow: 0 8px 20px rgba(30,58,95,.15);
  color: #1E88B8;
}

/* ============ ۲) چرا فنی پرواز — ol.why-list ============ */
.why-list {
  counter-reset: why;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 14px;
}
.why-list li {
  counter-increment: why;
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #fff 0%, #F7FBFE 100%);
  border: 1px solid #E0EAF3;
  border-radius: 16px;
  padding: 16px 74px 16px 18px;
  min-height: 76px;
  box-shadow: 0 3px 10px rgba(30,58,95,.05);
  transition: transform .2s ease, box-shadow .2s ease;
}
.why-list li::before {
  content: counter(why, persian);
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 18px;
  color: #fff;
  background: linear-gradient(135deg, #2A5A8F, #29A8D8);
  box-shadow: 0 6px 14px rgba(30,58,95,.28);
  transition: transform .25s ease, box-shadow .25s ease;
}
.why-list li:nth-child(2)::before { background: linear-gradient(135deg, #6A5AB0, #B49BE0); box-shadow: 0 6px 14px rgba(106,90,176,.30); }
.why-list li:nth-child(3)::before { background: linear-gradient(135deg, #C9962F, #F0C36D); box-shadow: 0 6px 14px rgba(201,150,47,.30); }
.why-list li:nth-child(4)::before { background: linear-gradient(135deg, #2D8A5F, #52B788); box-shadow: 0 6px 14px rgba(45,138,95,.30); }
.why-list li:nth-child(5)::before { background: linear-gradient(135deg, #B05A7E, #E58BB0); box-shadow: 0 6px 14px rgba(176,90,126,.30); }
.why-list li:nth-child(6)::before { background: linear-gradient(135deg, #1E3A5F, #5A7EA8); box-shadow: 0 6px 14px rgba(30,58,95,.30); }
.why-list li::after {
  content: '';
  position: absolute;
  top: 0; right: 0; left: 0;
  height: 4px;
  background: linear-gradient(90deg, #2A5A8F, #29A8D8);
}
.why-list li:nth-child(2)::after { background: linear-gradient(90deg, #6A5AB0, #B49BE0); }
.why-list li:nth-child(3)::after { background: linear-gradient(90deg, #C9962F, #F0C36D); }
.why-list li:nth-child(4)::after { background: linear-gradient(90deg, #2D8A5F, #52B788); }
.why-list li:nth-child(5)::after { background: linear-gradient(90deg, #B05A7E, #E58BB0); }
.why-list li:nth-child(6)::after { background: linear-gradient(90deg, #1E3A5F, #5A7EA8); }
.why-list li b {
  display: inline;
  color: #1E3A5F;
  font-size: 14.5px;
}
.why-list li {
  color: #43556A;
  font-size: 13.5px;
  line-height: 1.95;
}
.why-list li:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(30,58,95,.13);
}
.why-list li:hover::before {
  transform: translateY(-50%) scale(1.14) rotate(-6deg);
}

/* ============ ۳) سوالات متداول ============ */
#faqList details {
  background: linear-gradient(160deg, #fff 0%, #F6FAFD 100%);
  border: 1px solid #DCE8F2;
  border-radius: 14px;
  overflow: hidden;
  transition: box-shadow .18s ease, border-color .18s ease;
}
#faqList details + details { margin-top: 10px; }
#faqList details summary {
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
#faqList details summary .chev {
  display: inline-block;
  transition: transform .3s ease;
}
#faqList details summary:hover {
  background: #EFF6FC;
  color: #1E88B8;
}
#faqList details[open] summary {
  background: linear-gradient(135deg, #2A5A8F, #1E3A5F);
  color: #fff;
}
#faqList details[open] summary .chev {
  transform: rotate(180deg);
}
/* فاصلهٔ متقارن متن پاسخ — بالا = پایین */
#faqList details[open] .a {
  border-top: 2px solid #E0EAF3;
  background: #F6FAFD;
  color: #37485C;
  padding: 18px 20px !important;
  margin: 0 !important;
}

/* ============ ۴) آمار ============ */
.stats .stat b {
  background: linear-gradient(135deg, #2A5A8F, #29A8D8);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stats .stat {
  position: relative;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.stats .stat::after {
  content: '';
  position: absolute;
  top: 0; right: 0; left: 0;
  height: 4px;
  background: linear-gradient(90deg, #2A5A8F, #29A8D8);
  opacity: 0;
  transition: opacity .2s ease;
}
.stats .stat:nth-child(2)::after { background: linear-gradient(90deg, #6A5AB0, #B49BE0); }
.stats .stat:nth-child(3)::after { background: linear-gradient(90deg, #C9962F, #F0C36D); }
.stats .stat:nth-child(4)::after { background: linear-gradient(90deg, #2D8A5F, #52B788); }
.stats .stat:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(30,58,95,.13);
}
.stats .stat:hover::after { opacity: 1; }

/* ============ ۵) انیمیشن ورود پله‌ای — آهسته‌تر ============ */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.22,.8,.35,1);
  transition-delay: var(--rd, 0ms);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============ ۶) موبایل ============ */
@media (max-width: 640px) {
  .why-list { grid-template-columns: 1fr; }
  .why-list li { padding: 14px 62px 14px 14px; min-height: 64px; }
  .why-list li::before { width: 36px; height: 36px; font-size: 15px; right: 14px; }
  #faqList details[open] .a { padding: 14px 16px !important; }
}