/* ============================================================
   رهپویان — لایه بازطراحی ظاهری
   Visual refresh layer.

   این فایل *بعد* از style.min.css بارگذاری می‌شود و ظاهر اجزای
   موجود صفحه را با سیستم طراحی جدید هماهنگ می‌کند — بدون آنکه
   حتی یک id یا ساختار HTML عوض شود.

   دلیل این روش: app.min.js با بیش از ۱۳۰ getElementById مستقیم به
   مارک‌آپ index.html چسبیده است. بازنویسی ساختار یعنی شکستن
   داشبورد کاربر. این لایه همان نتیجه‌ی بصری را بدون آن ریسک می‌دهد.

   نیازمند: rh-design.css (توکن‌ها از آنجا می‌آیند)
   ============================================================ */

/* ---------- ۱. تایپوگرافی و ریتم ---------- */
body {
  font-family: var(--rh-font);
  line-height: var(--rh-lh-body);
  /* متن دوباره قابل انتخاب است */
  -webkit-user-select: text;
  user-select: text;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { line-height: var(--rh-lh-tight); letter-spacing: -.01em; }

.section-title {
  font-size: var(--rh-t-h2) !important;
  font-weight: 800;
  letter-spacing: -.015em;
  margin-bottom: var(--rh-s5);
}

/* ---------- ۲. دکمه‌ها ---------- */
.btn {
  min-height: 48px;                 /* هدف لمسی استاندارد */
  border-radius: var(--rh-r-pill);
  font-weight: 700;
  position: relative;
  overflow: hidden;
  transition: transform var(--rh-dur-1) var(--rh-ease),
              box-shadow var(--rh-dur-2) var(--rh-ease),
              filter var(--rh-dur-2) var(--rh-ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--rh-shadow-2); }
.btn:active { transform: translateY(0) scale(.985); }

.btn-primary {
  background: linear-gradient(135deg, var(--rh-gold-400), var(--rh-gold-600)) !important;
  color: var(--rh-navy-900) !important;
  border: 0;
}
.btn-primary:hover { box-shadow: var(--rh-shadow-gold); }

/* فشردگی هنگام کلیک، مثل مُهر روی کاغذ، به‌جای درخشش عبوری SaaS */
.btn-primary:active { box-shadow: inset 0 2px 6px rgba(0,0,0,.35); }

/* ---------- ۳. کارت‌ها ---------- */
/* مثل برگه‌ی رسمی/گواهی: زمینه‌ی تخت، قاب باریک، دو گوشه‌ی «تیک»
   فلزی — نه شیشه‌ی مات با گرادیان که همه‌جای اینترنت تکرار شده.
   گوشه‌ها لایه‌ی background هستند، نه ::before/::after، چون بعضی
   صفحات (بج «پیشنهاد ویژه» در services.html) از همان pseudo-element
   برای کانتنت خودشان استفاده می‌کنند. */
.stat-card,
.home-feature,
.why-item,
.step-item,
.service-card,
.pkg-card,
.testimonial-card {
  position: relative;
  border-radius: var(--rh-r-sm);
  border: 1px solid var(--rh-line);
  --_tick: var(--rh-line-strong);
  background:
    linear-gradient(var(--_tick), var(--_tick)) top right / 13px 1px no-repeat,
    linear-gradient(var(--_tick), var(--_tick)) top right / 1px 13px no-repeat,
    linear-gradient(var(--_tick), var(--_tick)) bottom left / 13px 1px no-repeat,
    linear-gradient(var(--_tick), var(--_tick)) bottom left / 1px 13px no-repeat,
    var(--rh-surface-1);
  transition: border-color var(--rh-dur-2) var(--rh-ease),
              box-shadow var(--rh-dur-2) var(--rh-ease);
}
.stat-card:hover,
.home-feature:hover,
.why-item:hover,
.step-item:hover,
.service-card:hover,
.pkg-card:hover,
.testimonial-card:hover {
  --_tick: var(--rh-gold-400);
  border-color: var(--rh-line);
  box-shadow: var(--rh-shadow-2);
}

.stat-label { color: var(--rh-text-muted); font-size: var(--rh-t-small); }

/* آیکون داخل کارت‌ها فقط کمی بزرگ می‌شود؛ چرخش تزئینی حذف شد */
.home-feature i, .why-item i, .step-item i {
  transition: transform var(--rh-dur-2) var(--rh-ease-out);
}
.home-feature:hover i, .why-item:hover i, .step-item:hover i {
  transform: scale(1.08);
}

/* ---------- ۴. فرم‌ها ---------- */
.form-control {
  min-height: 48px;
  border-radius: var(--rh-r-md);
  border: 1px solid var(--rh-line);
  background: rgba(255,255,255,.04);
  transition: border-color var(--rh-dur-2) var(--rh-ease),
              background-color var(--rh-dur-2) var(--rh-ease);
}
.form-control:focus {
  border-color: var(--rh-gold-400);
  background: rgba(255,255,255,.06);
  outline: none;
}
.form-control[aria-invalid='true'] { border-color: var(--rh-danger); }
.form-label { font-weight: 700; font-size: var(--rh-t-small); }

/* ---------- ۵. آکاردئون سوالات ---------- */
.faq-item {
  border-radius: var(--rh-r-md);
  border: 1px solid var(--rh-line);
  overflow: hidden;
  transition: border-color var(--rh-dur-2) var(--rh-ease);
}
.faq-item.active, .faq-item:hover { border-color: var(--rh-line-strong); }
.faq-question { font-weight: 700; }
.faq-toggle { transition: transform var(--rh-dur-2) var(--rh-ease-out); }
.faq-item.active .faq-toggle { transform: rotate(180deg); }

/* ---------- ۶. مودال ---------- */
.modal-content {
  border-radius: var(--rh-r-xl);
  border: 1px solid var(--rh-line);
  box-shadow: var(--rh-shadow-3);
  animation: rh-modal-in var(--rh-dur-3) var(--rh-ease-out);
}
@keyframes rh-modal-in {
  from { opacity: 0; transform: translateY(24px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.modal-close {
  border-radius: var(--rh-r-pill);
  transition: background-color var(--rh-dur-2) var(--rh-ease), transform var(--rh-dur-1) var(--rh-ease);
}
.modal-close:hover { background: rgba(255,255,255,.10); transform: rotate(90deg); }

/* ---------- ۷. ناوبری ---------- */
.nav-item, .idx-sb-item, .idx-auth-item {
  border-radius: var(--rh-r-md);
  transition: background-color var(--rh-dur-2) var(--rh-ease),
              color var(--rh-dur-2) var(--rh-ease),
              transform var(--rh-dur-1) var(--rh-ease);
}
.nav-item:hover, .idx-sb-item:hover, .idx-auth-item:hover {
  background: rgba(212,175,55,.10);
  color: var(--rh-gold-400);
}
.nav-item.active, .idx-sb-item.active { color: var(--rh-gold-400); }

/* ---------- ۸. هدر ---------- */
#header {
  transition: background-color var(--rh-dur-2) var(--rh-ease),
              box-shadow var(--rh-dur-2) var(--rh-ease),
              border-color var(--rh-dur-2) var(--rh-ease);
}
#header.is-scrolled { box-shadow: var(--rh-shadow-2); }

/* ---------- ۸ب. نوار پیمایش پایین ---------- */
/* .bottom-nav یک نسخه‌ی موبایلی (تب‌بار) ناوبری اصلی است. روی دسکتاپ
   هدر بالای صفحه (.rh-header) همان مسیرها را دارد، پس نمایش هم‌زمان هر
   دو تکراری است و روی صفحاتی که محتوا تا لبه‌ی پایین ویوپورت می‌رسد
   (مثل کارت‌های services.html) نوار ثابت روی متن می‌افتد. بریک‌پوینت با
   .rh-burger (۹۰۰px) یکی نگه داشته شده تا دقیقاً همان‌جا که هدر کامل
   دیده می‌شود، این نوار جمع شود. */
@media (min-width: 900px) {
  .bottom-nav { display: none !important; }
  body { padding-bottom: 0 !important; }
}

/* ---------- ۸ج. هدر آرام‌تر ---------- */
/* لوگو و بج‌های هدر قبلاً دائم می‌درخشیدند و می‌زدند (شناور شدن +
   پالس نور). برای حس حرفه‌ای/مینیمال‌تر، حرکت مزاحم حذف شد؛ درخشش
   دور لوگو هم ملایم‌تر شد تا شلوغ نزند. */
.logo { animation: none !important; box-shadow: 0 0 0 3px rgba(212, 175, 55, .12) !important; }
.header-badge { animation: none !important; opacity: .92; }

/* ---------- ۸د. مسیر متصل «چگونه استفاده کنیم» ---------- */
/* به‌جای ۴ کارت جدا، یک مسیر با خط طلایی که شماره‌ها را به‌هم وصل
   می‌کند — روی موبایل عمودی، روی دسکتاپ افقی. هیچ HTML عوض نشده:
   شماره از overlay گوشه‌ی کارت به‌جای طبیعی‌اش در چیدمان برمی‌گردد
   (در مارک‌آپ همیشه اولین فرزند step-item بوده) و فقط با flex
   بالای آیکون قرار می‌گیرد. */
#stepsGrid {
  display: flex !important;
  flex-direction: column;
  gap: 0;
  position: relative;
}
#stepsGrid::before {
  content: '';
  position: absolute;
  inset-inline-start: 21px;
  top: 8px; bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--rh-gold-400) 8%, var(--rh-gold-400) 92%, transparent);
  opacity: .4;
}
.step-item {
  display: flex !important;
  flex-direction: row;
  align-items: flex-start;
  text-align: start !important;
  gap: var(--rh-s4);
  background: none !important;
  border: 0 !important;
  padding: var(--rh-s3) 0 !important;
}
.step-number {
  position: static !important;
  flex: none;
  width: 44px; height: 44px;
  font-size: 1rem !important;
  box-shadow: 0 0 0 6px var(--rh-surface-0);
  z-index: 1;
}
.step-icon { margin: 2px 0 0 !important; }
.step-item h3, .step-item p { text-align: start; }

@media (min-width: 900px) {
  #stepsGrid { flex-direction: row; align-items: flex-start; }
  #stepsGrid::before {
    inset-inline-start: 12px; inset-inline-end: 12px; top: 22px;
    width: auto; height: 2px;
    background: linear-gradient(90deg, transparent, var(--rh-gold-400) 6%, var(--rh-gold-400) 94%, transparent);
  }
  .step-item { flex: 1; flex-direction: column; align-items: center; text-align: center !important; gap: var(--rh-s3); }
  .step-item h3, .step-item p { text-align: center; }
}

/* ---------- ۸ه. کارت پکیج پیشنهادی ---------- */
/* قبلاً فقط یک ⭐ کوچک گوشه‌ی کارت بود؛ حالا قاب طلایی، برجستگی و
   یک ریبون واقعی — همان زبان بج «پیشنهاد ویژه» که در services.html
   هست. در services.html فلگ featured فقط روی یک پکیج درست است، اما
   در دیتای packagesGrid این صفحه ظاهراً روی همه‌ی پکیج‌ها true است؛
   برای همین این‌جا به‌جای اتکا به آن فلگ، فقط اولین کارت را برجسته
   می‌کنیم تا واقعاً «یکی» متمایز باشد، نه همه‌شان. */
.pkg-card.featured {
  border-color: var(--rh-gold-400) !important;
  box-shadow: 0 0 0 1px var(--rh-gold-400), 0 20px 45px rgba(212, 175, 55, .16) !important;
  transform: translateY(-6px);
}
#packagesGrid .package-card {
  border-color: var(--rh-line) !important;
  box-shadow: none !important;
  transform: none !important;
}
#packagesGrid .package-card::before { content: none !important; }
#packagesGrid .package-card:first-child {
  border-color: var(--rh-gold-400) !important;
  box-shadow: 0 0 0 1px var(--rh-gold-400), 0 20px 45px rgba(212, 175, 55, .16) !important;
  transform: translateY(-6px);
}
#packagesGrid .package-card:first-child::before {
  content: 'پیشنهاد ویژه' !important;
  position: absolute; top: 14px; inset-inline-end: 14px;
  font-size: .72rem; font-weight: 700;
  background: linear-gradient(135deg, var(--rh-gold-400), var(--rh-gold-600));
  color: var(--rh-navy-900);
  padding: 4px 12px; border-radius: 999px;
  z-index: 2; line-height: 1.6;
}

/* ---------- ۸و. مسیر متصل «درباره موسسه» ---------- */
/* همان زبان بصری بخش «چگونه استفاده کنیم» را اینجا هم می‌آوریم چون
   این ۶ ویژگی هم عملاً مراحل یک پرونده‌اند (ارزیابی → نقشه راه →
   اسناد → پیگیری → مشاوره → پشتیبانی). شماره‌ها با شمارنده‌ی CSS
   ساخته می‌شوند، بدون دست‌زدن به HTML. */
#homeFeatures {
  counter-reset: rh-feat;
  position: relative;
  display: flex !important;
  flex-direction: column;
  gap: 0;
}
#homeFeatures::before {
  content: '';
  position: absolute;
  inset-inline-start: 21px;
  top: 8px; bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--rh-gold-400) 6%, var(--rh-gold-400) 94%, transparent);
  opacity: .35;
}
.home-feature {
  counter-increment: rh-feat;
  display: flex !important;
  align-items: flex-start;
  gap: var(--rh-s4);
  background: none !important;
  border: 0 !important;
  padding: var(--rh-s3) 0 !important;
  text-align: start !important;
}
.home-feature::before {
  content: counter(rh-feat);
  flex: none;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  font-weight: 800; font-size: 1rem;
  font-variant-numeric: tabular-nums;
  color: var(--rh-navy-900);
  background: linear-gradient(135deg, var(--rh-gold-400), var(--rh-gold-600));
  border-radius: 50%;
  box-shadow: 0 0 0 6px var(--rh-surface-0);
  z-index: 1;
}
.home-feature i { display: none; } /* آیکون قدیمی جای خودش را به شماره داد */

/* ---------- ۸.۵ هیرو ---------- */
/* عناوین هیرو در index.html استایل درون‌خطی دارند (از پنل مدیریت قابل
   تنظیم‌اند)، پس اینجا فقط چیزهایی تنظیم می‌شود که آنجا تعریف نشده‌اند
   تا با مقادیر پنل درگیر نشویم. */
.hero-title { letter-spacing: -.02em; }
.hero-subtitle { max-width: 62ch; margin-inline: auto; }

.hero-cta-btn {
  position: relative;
  overflow: hidden;
  min-height: 48px;
  border-radius: var(--rh-r-pill);
  transition: transform var(--rh-dur-1) var(--rh-ease), box-shadow var(--rh-dur-2) var(--rh-ease);
}
.hero-cta-btn:hover { transform: translateY(-2px); box-shadow: var(--rh-shadow-2); }
.hero-cta-btn:active { transform: translateY(0) scale(.985); }
.hero-cta-btn.primary:hover { box-shadow: var(--rh-shadow-gold); }

.hero-trust-item {
  transition: color var(--rh-dur-2) var(--rh-ease), transform var(--rh-dur-2) var(--rh-ease-out);
}
.hero-trust-item:hover { color: var(--rh-gold-400) !important; transform: translateY(-2px); }

.header-badge {
  transition: transform var(--rh-dur-2) var(--rh-ease-out), border-color var(--rh-dur-2) var(--rh-ease);
}
.header-badge:hover { transform: translateY(-2px); border-color: var(--rh-line-strong); }

/* ---------- ۹. دسترس‌پذیری ---------- */
/* حلقه‌ی فوکوس برای کاربران کیبورد. قبلاً بسیاری از اجزا
   outline:none داشتند و مسیر Tab کاملاً نامرئی بود. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--rh-gold-400);
  outline-offset: 3px;
  border-radius: var(--rh-r-sm);
}

.rh-skip {
  position: absolute;
  inset-inline-end: var(--rh-s4);
  top: -100px;
  z-index: 9999;
  padding: var(--rh-s3) var(--rh-s5);
  background: var(--rh-gold-400);
  color: var(--rh-navy-900);
  font-weight: 700;
  border-radius: var(--rh-r-md);
  transition: top var(--rh-dur-2) var(--rh-ease-out);
}
.rh-skip:focus { top: var(--rh-s4); }

::selection { background: rgba(212,175,55,.3); color: #fff; }

/* ---------- ۱۰. حرکت ---------- */
[data-rh-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--rh-dur-3) var(--rh-ease-out),
              transform var(--rh-dur-3) var(--rh-ease-out);
  transition-delay: var(--rh-reveal-delay, 0ms);
}
[data-rh-reveal].is-visible { opacity: 1; transform: none; }
html.no-js [data-rh-reveal] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-rh-reveal] { opacity: 1 !important; transform: none !important; }
  .btn:hover, .stat-card:hover, .home-feature:hover,
  .why-item:hover, .step-item:hover { transform: none !important; }
}

/* ---------- ۱۱. اصلاحات ریز ---------- */
/* بلوک‌های پهن داخل خودشان اسکرول شوند، نه اینکه کل صفحه را افقی بکشند.
   عمداً display:block روی table گذاشته نشده - چیدمان جدول را خراب می‌کند. */
pre { max-width: 100%; overflow-x: auto; }
table { max-width: 100%; }

img { max-width: 100%; height: auto; }