/* ============================================================
  استایل صفحه نوپی
  هدف: ظاهر حرفه‌ای + لود سریع + ریسپانسیو
  نکته: از selectorهای محدود به .nopy استفاده شده تا با قالب اصلی تداخل نکند.
============================================================ */

.nopy {
  direction: rtl;
  color: #101828;
}

/* یک container استاندارد */
.nopy-container {
  width: min(1120px, calc(100% - 32px));
  margin-inline: auto;
}

/* تایپوگرافی */
.nopy-h1 {
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.1rem);
  line-height: 1.35;
  margin: 0 0 12px;
  letter-spacing: -0.2px;
}

.nopy-h2 {
  font-size: clamp(1.2rem, 1rem + 0.7vw, 1.6rem);
  line-height: 1.4;
  margin: 0 0 12px;
}

.nopy-h3 {
  font-size: 1.05rem;
  margin: 0 0 8px;
  line-height: 1.5;
}

.nopy-lead,
.nopy-text,
.nopy-muted,
.nopy-figcaption {
  line-height: 1.9;
}

.nopy-lead {
  font-size: 1.02rem;
  color: #344054;
  margin: 0 0 18px;
}

.nopy-text {
  color: #344054;
  margin: 0 0 16px;
}

.nopy-muted {
  color: #667085;
  margin: 0;
}

.nopy-figcaption {
  color: #667085;
  font-size: 0.9rem;
  margin-top: 10px;
}

/* سکشن‌ها */
.nopy-section {
  padding: 42px 0;
}

.nopy-section--muted {
  background: #F7F9FC;
  border-top: 1px solid #EEF2F6;
  border-bottom: 1px solid #EEF2F6;
}

/* Breadcrumb */
.nopy-breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 0.9rem;
}

.nopy-breadcrumb__link {
  color: #175CD3;
  text-decoration: none;
}

.nopy-breadcrumb__link:hover {
  text-decoration: underline;
}

.nopy-breadcrumb__sep,
.nopy-breadcrumb__current {
  color: #667085;
}

/* Hero */
.nopy-hero {
  padding: 44px 0 24px;
  background: radial-gradient(1200px 500px at 70% 10%, #EAF2FF 0%, rgba(234, 242, 255, 0) 60%);
}

.nopy-hero__grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 26px;
  align-items: center;
}

.nopy-hero__media img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  background: #fff;
  border: 1px solid #E6ECF5;
}

/* دکمه‌ها */
.nopy-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0 14px;
}

.nopy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 12px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform .08s ease, background-color .2s ease, border-color .2s ease;
}

.nopy-btn:active {
  transform: translateY(1px);
}

.nopy-btn--primary {
  background: #175CD3;
  color: #fff;
  border-color: #175CD3;
}

.nopy-btn--primary:hover {
  background: #0B4DBA;
  border-color: #0B4DBA;
}

.nopy-btn--ghost {
  background: #fff;
  color: #175CD3;
  border-color: #CFE0FF;
}

.nopy-btn--ghost:hover {
  border-color: #94B6FF;
}

/* Badge */
.nopy-badges {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.nopy-badge {
  font-size: 0.85rem;
  padding: 7px 10px;
  border-radius: 999px;
  background: #FFFFFF;
  border: 1px solid #E6ECF5;
  color: #344054;
}

/* کارت‌ها */
.nopy-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.nopy-card {
  background: #fff;
  border: 1px solid #E6ECF5;
  border-radius: 14px;
  padding: 16px;
}

/* گرید 2 ستونه */
.nopy-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

/* Feature */
.nopy-feature {
  background: #fff;
  border: 1px solid #E6ECF5;
  border-radius: 14px;
  padding: 16px;
}

.nopy-feature__head {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #E6ECF5;
}

/* لیست‌ها */
.nopy-list {
  margin: 0;
  padding: 0 18px 0 0;
  color: #344054;
}

.nopy-list li {
  margin: 8px 0;
}

/* تصویر/figure */
.nopy-figure {
  margin: 22px 0 0;
  padding: 16px;
  background: #fff;
  border: 1px solid #E6ECF5;
  border-radius: 14px;
}

.nopy-figure img {
  width: 100%;
  height: auto;
  display: block;
}

.nopy-figure--logo img {
  width: 180px;
  max-width: 100%;
}

/* Steps */
.nopy-steps {
  margin: 0;
  padding: 0 18px 0 0;
}

.nopy-step {
  margin: 14px 0;
  padding: 14px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid #E6ECF5;
}

/* Callout */
.nopy-callout {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #FFF7E6;
  border: 1px solid #FFE1A6;
  color: #7A4B00;
}

/* Accordion (FAQ) */
.nopy-accordion {
  display: grid;
  gap: 10px;
}

.nopy-qa {
  background: #fff;
  border: 1px solid #E6ECF5;
  border-radius: 14px;
  overflow: hidden;
}

.nopy-qa__q {
  cursor: pointer;
  padding: 14px 14px;
  font-weight: 800;
  color: #101828;
  list-style: none;
}

/* حذف مثلث پیشفرض details در برخی مرورگرها */
.nopy-qa__q::-webkit-details-marker {
  display: none;
}

.nopy-qa__a {
  padding: 0 14px 14px;
  color: #344054;
}

.nopy-qa[open] .nopy-qa__q {
  border-bottom: 1px solid #EEF2F6;
}

/* لینک‌ها */
.nopy-links {
  margin: 0;
  padding: 0 18px 0 0;
}

.nopy-links li {
  margin: 10px 0;
}

.nopy-links a {
  color: #175CD3;
  text-decoration: none;
}

.nopy-links a:hover {
  text-decoration: underline;
}

/* ============================================================
  ریسپانسیو
============================================================ */
@media (max-width: 980px) {
  .nopy-hero__grid {
    grid-template-columns: 1fr;
  }

  .nopy-cards {
    grid-template-columns: 1fr;
  }

  .nopy-grid-2 {
    grid-template-columns: 1fr;
  }
}