/* ==========================================================================
   Niqow Design System
   --------------------------------------------------------------------------
   استخراج‌شده از Niqow_Landing_dc.html و تبدیل به یک سیستم قابل نگهداری.
   ساختار فایل:
     1. Tokens          — تمام مقادیر خام طراحی
     2. Reset & Base    — پایه‌ی سراسری
     3. Layout          — container / section / grid
     4. Typography      — heading / lead / muted / eyebrow
     5. Components      — button / card / accordion / form / ...
     6. Regions         — header / footer / cta band
     7. Responsive      — breakpoints
   قرارداد نام‌گذاری: BEM با پیشوند nq- (جلوگیری از تداخل با CKEditor و admin)
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
  /* --- Color: surface --- */
  --nq-bg:              oklch(98.5% 0.003 250);
  --nq-surface:         #ffffff;
  --nq-surface-alt:     oklch(97% 0.004 255);
  --nq-surface-accent:  oklch(98% 0.02 258);

  /* --- Color: text --- */
  --nq-text:            oklch(18% 0.008 255);
  --nq-text-strong-alt: oklch(28% 0.008 255);
  --nq-text-muted:      oklch(38% 0.01 255);
  --nq-text-subtle:     oklch(45% 0.01 255);
  --nq-text-on-accent:  #ffffff;

  /* --- Color: border --- */
  --nq-border:          oklch(87% 0.006 255);
  --nq-border-soft:     oklch(93% 0.004 255);
  --nq-border-strong:   oklch(80% 0.008 255);

  /* --- Color: brand ---
     accent تنها متغیر برند است. برای تغییر تم کل سایت فقط همین را عوض کنید. */
  --nq-accent:          oklch(52% 0.19 258);
  --nq-accent-hover:    oklch(46% 0.19 258);
  --nq-accent-soft:     oklch(95% 0.03 258);

  /* پس‌زمینه‌ی شیشه‌ای هدر چسبان */
  --nq-glass:           oklch(100% 0 0 / 0.72);

  /* --- Color: placeholder pattern --- */
  --nq-pattern-a:       oklch(97% 0.003 250);
  --nq-pattern-b:       oklch(94% 0.004 250);

  /* --- Typography --- */
  --nq-font: 'Vazirmatn', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --nq-font-mono: ui-monospace, 'Cascadia Code', Menlo, monospace;

  /* مقیاس تایپوگرافی سیال: بین موبایل و دسکتاپ نرم تغییر می‌کند،
     به‌جای پرش ناگهانی سر هر breakpoint. */
  --nq-fs-micro:     11px;
  --nq-fs-caption:   12px;
  --nq-fs-small:     13px;
  --nq-fs-body-sm:   14px;
  --nq-fs-body:      15px;
  --nq-fs-body-lg:   16px;
  --nq-fs-lead:      clamp(16px, 1.4vw, 18px);
  --nq-fs-h4:        clamp(18px, 1.6vw, 21px);
  --nq-fs-logo:      21px;
  --nq-fs-h3:        clamp(21px, 2.4vw, 27px);
  --nq-fs-h2:        clamp(25px, 3.4vw, 34px);
  --nq-fs-h1:        clamp(31px, 5.2vw, 52px);
  --nq-fs-display:   clamp(34px, 6vw, 60px);

  --nq-fw-regular:   400;
  --nq-fw-medium:    500;
  --nq-fw-semibold:  600;
  --nq-fw-bold:      700;
  --nq-fw-black:     800;

  --nq-lh-tight:     1.3;
  --nq-lh-snug:      1.8;
  --nq-lh-normal:    1.85;
  --nq-lh-relaxed:   1.9;

  --nq-tracking-tight: -0.01em;

  /* --- Spacing (مضرب ۴) --- */
  --nq-space-1:   4px;
  --nq-space-2:   8px;
  --nq-space-3:   12px;
  --nq-space-4:   16px;
  --nq-space-5:   20px;
  --nq-space-6:   24px;
  --nq-space-7:   28px;
  --nq-space-8:   32px;
  --nq-space-10:  40px;
  --nq-space-12:  48px;
  --nq-space-14:  56px;
  --nq-space-16:  64px;
  --nq-space-18:  72px;
  --nq-space-20:  80px;
  --nq-space-22:  88px;

  /* فاصله‌ی عمودی بخش‌ها هم سیال است تا روی موبایل صفحه بیش از حد کشیده نشود */
  --nq-section-y:       clamp(56px, 8vw, 104px);
  --nq-section-y-tight: clamp(40px, 6vw, 72px);

  /* --- Layout --- */
  --nq-container:        1200px;
  --nq-container-narrow: 720px;
  --nq-gutter:           clamp(16px, 4vw, 24px);
  --nq-header-height:    64px;

  /* --- Border --- */
  --nq-radius-sm:   6px;
  --nq-radius:      10px;
  --nq-radius-lg:   18px;
  --nq-radius-full: 999px;
  --nq-border-width: 1px;

  /* --- Elevation (shadow) ---
     سایه‌ی چندلایه طبیعی‌تر از یک سایه‌ی تک‌لایه دیده می‌شود. */
  --nq-shadow-sm: 0 1px 2px oklch(18% 0.008 255 / 0.05),
                  0 1px 3px oklch(18% 0.008 255 / 0.04);
  --nq-shadow:    0 2px 4px oklch(18% 0.008 255 / 0.04),
                  0 12px 28px -10px oklch(18% 0.008 255 / 0.14);
  --nq-shadow-lg: 0 4px 8px oklch(18% 0.008 255 / 0.04),
                  0 24px 48px -16px oklch(18% 0.008 255 / 0.18);

  /* --- Focus --- */
  --nq-focus-width:  2px;
  --nq-focus-offset: 3px;

  /* --- Motion --- */
  --nq-duration: 180ms;
  --nq-duration-slow: 320ms;
  --nq-ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Elevation (z-index) --- */
  --nq-z-header:      50;
  --nq-z-mobile-nav:  49;
  --nq-z-lightbox:    150;
  --nq-z-skip:        200;
}

/* حالت تیره بر اساس تنظیم سیستم کاربر. فقط توکن‌ها بازتعریف می‌شوند،
   هیچ کامپوننتی نیاز به قانون جداگانه ندارد. */
@media (prefers-color-scheme: dark) {
  :root {
    --nq-bg:              oklch(17% 0.008 258);
    --nq-surface:         oklch(21% 0.009 258);
    --nq-surface-alt:     oklch(24% 0.01 258);
    --nq-surface-accent:  oklch(26% 0.03 258);

    --nq-text:            oklch(96% 0.004 255);
    --nq-text-strong-alt: oklch(90% 0.005 255);
    --nq-text-muted:      oklch(76% 0.008 255);
    --nq-text-subtle:     oklch(65% 0.01 255);

    --nq-border:          oklch(32% 0.01 258);
    --nq-border-soft:     oklch(27% 0.009 258);
    --nq-border-strong:   oklch(42% 0.012 258);

    --nq-accent:          oklch(72% 0.15 258);
    --nq-accent-hover:    oklch(78% 0.15 258);
    --nq-accent-soft:     oklch(28% 0.05 258);
    --nq-text-on-accent:  oklch(17% 0.01 258);

    --nq-glass:           oklch(21% 0.009 258 / 0.78);

    --nq-pattern-a:       oklch(23% 0.008 258);
    --nq-pattern-b:       oklch(27% 0.009 258);

    --nq-shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.3);
    --nq-shadow:    0 2px 4px oklch(0% 0 0 / 0.25),
                    0 12px 28px -10px oklch(0% 0 0 / 0.5);
    --nq-shadow-lg: 0 4px 8px oklch(0% 0 0 / 0.25),
                    0 24px 48px -16px oklch(0% 0 0 / 0.55);
  }
}

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

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--nq-bg);
  color: var(--nq-text);
  font-family: var(--nq-font);
  font-size: var(--nq-fs-body);
  line-height: var(--nq-lh-snug);
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: var(--nq-accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

::selection {
  background: var(--nq-accent);
  color: var(--nq-text-on-accent);
}

/* فوکوس صفحه‌کلید — در طرح اصلی با style-focus پیاده شده بود */
:focus-visible {
  outline: var(--nq-focus-width) solid var(--nq-accent);
  outline-offset: var(--nq-focus-offset);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* --- ابزارهای دسترس‌پذیری --- */

.nq-skip-link {
  position: absolute;
  inset-block-start: -48px;
  inset-inline-end: var(--nq-space-4);
  z-index: var(--nq-z-skip);
  padding: 10px var(--nq-space-4);
  background: var(--nq-text);
  color: var(--nq-text-on-accent);
  font-size: var(--nq-fs-body-sm);
  font-weight: var(--nq-fw-bold);
  transition: inset-block-start var(--nq-duration) var(--nq-ease);
}

.nq-skip-link:focus {
  inset-block-start: var(--nq-space-2);
  text-decoration: none;
}

.nq-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   3. LAYOUT
   ========================================================================== */

.nq-container {
  max-width: var(--nq-container);
  margin-inline: auto;
  padding-inline: var(--nq-gutter);
}

.nq-container--narrow {
  max-width: var(--nq-container-narrow);
}

/* بخش‌ها: فاصله‌ی عمودی فقط از اینجا کنترل می‌شود تا تداخل margin پیش نیاید */
.nq-section {
  padding-block: var(--nq-section-y);
}

.nq-section--tight {
  padding-block: var(--nq-section-y-tight);
}

.nq-section--flush {
  padding-block: var(--nq-space-7);
}

/* نوارهای سفید با خط بالا و پایین — الگوی تکرارشونده‌ی طرح */
.nq-section--banded {
  background: var(--nq-surface);
  border-block: var(--nq-border-width) solid var(--nq-border);
}

.nq-section__head {
  margin-block-end: clamp(28px, 4vw, 48px);
}

.nq-section__head--center {
  text-align: center;
}

.nq-section__head--center .nq-lead {
  margin-inline: auto;
}

.nq-grid {
  display: grid;
  gap: var(--nq-space-5);
}

/* auto-fit یعنی تعداد ستون‌ها با عرض واقعی ظرف تطبیق پیدا می‌کند و
   دیگر لازم نیست هر تعداد ستون در چند breakpoint دستی بازنویسی شود. */
.nq-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.nq-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.nq-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

.nq-grid--gap-lg { gap: var(--nq-space-10); }

/* شبکه‌ی متصل: کارت‌ها بدون فاصله، با یک قاب مشترک */
.nq-grid--seam {
  gap: 0;
  border: var(--nq-border-width) solid var(--nq-border);
}

.nq-stack {
  display: flex;
  flex-direction: column;
  gap: var(--nq-space-3);
}

.nq-cluster {
  display: flex;
  align-items: center;
  gap: var(--nq-space-6);
  flex-wrap: wrap;
}

/* ==========================================================================
   4. TYPOGRAPHY
   ========================================================================== */

.nq-h1,
.nq-h2,
.nq-h3,
.nq-h4 {
  margin: 0;
  color: var(--nq-text);
  /* عنوان‌ها را متعادل می‌شکند تا یک کلمه تنها در خط آخر نماند */
  text-wrap: balance;
}

.nq-h1 {
  font-size: var(--nq-fs-h1);
  font-weight: var(--nq-fw-black);
  line-height: var(--nq-lh-tight);
  letter-spacing: var(--nq-tracking-tight);
}

.nq-h2 {
  font-size: var(--nq-fs-h2);
  font-weight: var(--nq-fw-black);
  line-height: var(--nq-lh-tight);
  letter-spacing: var(--nq-tracking-tight);
}

.nq-h3 {
  font-size: var(--nq-fs-h3);
  font-weight: var(--nq-fw-black);
  line-height: var(--nq-lh-tight);
}

.nq-h4 {
  font-size: var(--nq-fs-h4);
  font-weight: var(--nq-fw-bold);
  line-height: var(--nq-lh-tight);
}

.nq-lead {
  margin: var(--nq-space-3) 0 0;
  max-width: 60ch;
  color: var(--nq-text-muted);
  font-size: var(--nq-fs-lead);
  line-height: var(--nq-lh-relaxed);
  text-wrap: pretty;
}

.nq-text {
  margin: 0;
  color: var(--nq-text-muted);
  font-size: var(--nq-fs-body);
  line-height: var(--nq-lh-normal);
}

.nq-text--sm {
  font-size: var(--nq-fs-body-sm);
}

.nq-note {
  margin: 0;
  color: var(--nq-text-subtle);
  font-size: var(--nq-fs-small);
}

/* برچسب بالای عنوان — پیل نرم با رنگ برند */
.nq-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--nq-space-2);
  padding: var(--nq-space-2) var(--nq-space-4);
  background: var(--nq-accent-soft);
  border: var(--nq-border-width) solid transparent;
  border-radius: var(--nq-radius-full);
  color: var(--nq-accent);
  font-size: var(--nq-fs-small);
  font-weight: var(--nq-fw-bold);
}

/* نقطه‌ی کوچک ابتدای برچسب */
.nq-eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* برچسب دسته‌بندی داخل کارت */
.nq-tag {
  color: var(--nq-accent);
  font-size: var(--nq-fs-small);
  font-weight: var(--nq-fw-bold);
}

/* عنوان ستون فوتر / برچسب فرم */
.nq-label {
  display: block;
  color: var(--nq-text-muted);
  font-size: var(--nq-fs-small);
  font-weight: var(--nq-fw-bold);
}

/* محتوای تولیدشده توسط CKEditor */
.nq-prose {
  color: var(--nq-text-muted);
  font-size: var(--nq-fs-body-lg);
  line-height: var(--nq-lh-relaxed);
}

.nq-prose > :first-child { margin-block-start: 0; }
.nq-prose > :last-child  { margin-block-end: 0; }

.nq-prose h2,
.nq-prose h3,
.nq-prose h4 {
  margin-block: var(--nq-space-8) var(--nq-space-3);
  color: var(--nq-text);
  font-weight: var(--nq-fw-bold);
  line-height: var(--nq-lh-tight);
}

.nq-prose h2 { font-size: var(--nq-fs-h3); }
.nq-prose h3 { font-size: var(--nq-fs-h4); }
.nq-prose h4 { font-size: var(--nq-fs-lead); }

.nq-prose p,
.nq-prose ul,
.nq-prose ol {
  margin-block: 0 var(--nq-space-4);
}

.nq-prose ul,
.nq-prose ol {
  padding-inline-start: var(--nq-space-5);
}

.nq-prose li { margin-block-end: var(--nq-space-2); }

.nq-prose img {
  margin-block: var(--nq-space-6);
  border: var(--nq-border-width) solid var(--nq-border);
  border-radius: var(--nq-radius);
}

.nq-prose table {
  width: 100%;
  border-collapse: collapse;
  margin-block-end: var(--nq-space-4);
}

.nq-prose th,
.nq-prose td {
  padding: var(--nq-space-3);
  border: var(--nq-border-width) solid var(--nq-border);
  text-align: start;
}

/* ==========================================================================
   5. COMPONENTS
   ========================================================================== */

/* --- 5.1 Button ---------------------------------------------------------- */

.nq-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--nq-space-2);
  padding: var(--nq-space-3) var(--nq-space-5);
  border: var(--nq-border-width) solid transparent;
  border-radius: var(--nq-radius-full);
  font-family: inherit;
  font-size: var(--nq-fs-body-sm);
  font-weight: var(--nq-fw-bold);
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: opacity var(--nq-duration) var(--nq-ease),
              background-color var(--nq-duration) var(--nq-ease),
              color var(--nq-duration) var(--nq-ease),
              box-shadow var(--nq-duration) var(--nq-ease),
              transform var(--nq-duration) var(--nq-ease);
}

.nq-btn:hover {
  opacity: 0.92;
  text-decoration: none;
  transform: translateY(-1px);
}

.nq-btn:active {
  transform: translateY(0);
}

.nq-btn:disabled,
.nq-btn[aria-disabled='true'] {
  opacity: 0.5;
  cursor: not-allowed;
}

.nq-btn--lg {
  padding: var(--nq-space-3) var(--nq-space-7);
  font-size: var(--nq-fs-body-lg);
}

.nq-btn--block {
  width: 100%;
}

/* دکمه‌ی اصلی */
.nq-btn--primary {
  background: var(--nq-accent);
  color: var(--nq-text-on-accent);
  border-color: var(--nq-accent);
  box-shadow: var(--nq-shadow-sm);
}

.nq-btn--primary:hover {
  box-shadow: var(--nq-shadow);
}

.nq-btn--primary:focus-visible {
  outline-color: var(--nq-text);
}

/* دکمه‌ی ثانویه: قاب برند، پس‌زمینه شفاف */
.nq-btn--outline {
  background: transparent;
  color: var(--nq-accent);
  border-color: var(--nq-accent);
}

/* دکمه روی زمینه‌ی برند */
.nq-btn--invert {
  background: var(--nq-surface);
  color: var(--nq-accent);
  border-color: var(--nq-surface);
}

.nq-btn--invert:focus-visible {
  outline-color: var(--nq-surface);
}

/* دکمه‌ی خنثی (منوی موبایل) */
.nq-btn--quiet {
  background: none;
  border-color: var(--nq-border-strong);
  color: var(--nq-text);
}

/* لینک متنی با فلش */
.nq-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--nq-text);
  font-size: var(--nq-fs-body);
  font-weight: var(--nq-fw-bold);
}

/* داخل کارت، لینک بخشی از خود کارت است و نباید ارتفاع اضافه بگیرد */
.nq-card .nq-link,
.nq-card__foot.nq-link--onward {
  min-height: 0;
}

.nq-link--onward::after {
  content: '←';
  display: inline-block;
  margin-inline-start: var(--nq-space-2);
  transition: transform var(--nq-duration) var(--nq-ease);
}

.nq-link--onward:hover::after {
  transform: translateX(-4px);
}

/* --- 5.2 Card ------------------------------------------------------------ */

.nq-card {
  /* یک متغیر تا padding کارت و «تمام‌عرض شدن» تصویر بالای آن همیشه هم‌اندازه بمانند */
  --nq-card-pad: clamp(20px, 2.4vw, 28px);

  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: var(--nq-card-pad);
  background: var(--nq-surface);
  border: var(--nq-border-width) solid var(--nq-border);
  border-radius: var(--nq-radius-lg);
  box-shadow: var(--nq-shadow-sm);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--nq-duration) var(--nq-ease),
              box-shadow var(--nq-duration) var(--nq-ease),
              transform var(--nq-duration) var(--nq-ease);
}

/* ========== اصلاح اصلی: تصویر کل بالای صفحه ========== */
.nq-card__media {
  margin: calc(var(--nq-card-pad) * -1) calc(var(--nq-card-pad) * -1) var(--nq-space-5);
  width: calc(100% + var(--nq-card-pad) * 2);
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block; /* حذف فاصله اضافی زیر تصویر */
  flex-shrink: 0; /* جلوگیری از کوچک‌شدن تصویر */
  transition: transform var(--nq-duration-slow) var(--nq-ease);
  background-color: var(--nq-surface-alt); /* رنگ پشتیبان هنگام لود */
}

/* ========== اصلاح: وقتی تصویر placeholder است ========== */
.nq-card .nq-placeholder--media {
  margin: calc(var(--nq-card-pad) * -1) calc(var(--nq-card-pad) * -1) var(--nq-space-5);
  width: calc(100% + var(--nq-card-pad) * 2);
  aspect-ratio: 16 / 10;
  border: 0;
  border-radius: 0;
}

/* ========== اصلاح: عنوان و محتوا با padding ========== */
.nq-card__title {
  margin: var(--nq-space-2) 0 var(--nq-space-3);
  font-size: var(--nq-fs-h4);
  font-weight: var(--nq-fw-bold);
  line-height: var(--nq-lh-tight);
  text-wrap: balance;
  transition: color var(--nq-duration) var(--nq-ease);
}

.nq-card__body {
  margin: 0 0 var(--nq-space-5);
  flex: 1;
  color: var(--nq-text-muted);
  line-height: var(--nq-lh-snug);
  text-wrap: pretty;
}

.nq-card__foot {
  display: inline-flex;
  align-items: center;
  gap: var(--nq-space-2);
  margin-block-start: auto;
  color: var(--nq-accent);
  font-size: var(--nq-fs-body-sm);
  font-weight: var(--nq-fw-bold);
}

/* ========== اصلاح: تگ داخل کارت با padding ========== */
.nq-card .nq-tag {
  display: inline-block;
  margin-top: var(--nq-space-2);
}

/* ردیف متا برای مقاله: تاریخ + تعداد بازدید */
.nq-card__foot.nq-article-meta,
.nq-article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nq-space-2);
  color: var(--nq-text-muted);
  font-weight: var(--nq-fw-regular);
  font-size: var(--nq-fs-small);
}

.nq-article-meta__views {
  color: var(--nq-text-subtle);
}

/* نسخه‌ی قابل کلیک */
a.nq-card:hover {
  border-color: var(--nq-accent);
  box-shadow: var(--nq-shadow-lg);
  transform: translateY(-4px);
  text-decoration: none;
}

a.nq-card:hover .nq-card__title {
  color: var(--nq-accent);
}

/* فلش انتهای کارت هنگام hover کمی جلو می‌رود */
a.nq-card:hover .nq-link--onward::after {
  transform: translateX(-4px);
}

/* تصویر کارت هنگام hover کمی بزرگ‌نمایی می‌شود */
a.nq-card:hover .nq-card__media {
  transform: scale(1.03);
}

/* کارت داخل شبکه‌ی متصل: قاب بیرونی از grid می‌آید */
.nq-grid--seam > .nq-card {
  border: 0;
  border-inline-start: var(--nq-border-width) solid var(--nq-border);
}

.nq-grid--seam > .nq-card:first-child {
  border-inline-start: 0;
}

/* وقتی کارت‌ها به ردیف دوم (یا بعدی) می‌رسند، بدون این خط بدون جداکننده شناور بودند */
.nq-grid--seam > .nq-card:nth-child(n + 4) {
  border-block-start: var(--nq-border-width) solid var(--nq-border);
}

/* --- 5.3 Placeholder ----------------------------------------------------- */

.nq-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(
    45deg,
    var(--nq-pattern-b),
    var(--nq-pattern-b) 6px,
    var(--nq-pattern-a) 6px,
    var(--nq-pattern-a) 12px
  );
  color: var(--nq-text-muted);
  font-family: var(--nq-font-mono);
  font-size: var(--nq-fs-micro);
}

.nq-placeholder--media {
  aspect-ratio: 4 / 3;
  border: var(--nq-border-width) solid var(--nq-border);
  border-radius: var(--nq-radius);
  font-size: var(--nq-fs-body-sm);
}

/* --- 5.4 Stat ------------------------------------------------------------ */

/* بلوک آمار: خط بالایی به رنگ برند، امضای بصری همین بخش */
.nq-stat {
  border-block-start: 2px solid var(--nq-accent);
  padding-block-start: var(--nq-space-4);
}

.nq-stat__value {
  color: var(--nq-accent);
  font-size: var(--nq-fs-h3);
  font-weight: var(--nq-fw-black);
  line-height: 1.2;
}

.nq-stat__title {
  margin: var(--nq-space-3) 0 var(--nq-space-2);
  font-size: var(--nq-fs-lead);
  font-weight: var(--nq-fw-bold);
}

.nq-stat__desc {
  margin: 0;
  color: var(--nq-text-muted);
  font-size: var(--nq-fs-body-sm);
  line-height: var(--nq-lh-snug);
}

/* --- 5.5 Accordion (بدون JS، مبتنی بر <details>) ------------------------- */

/* بلوک آکاردئون: خط بالا تا اولین آیتم هم جداکننده داشته باشد */
.nq-accordion {
  border-block-start: var(--nq-border-width) solid var(--nq-border);
}

.nq-accordion__item {
  border-block-end: var(--nq-border-width) solid var(--nq-border);
}

.nq-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nq-space-4);
  padding: var(--nq-space-5) var(--nq-space-1);
  cursor: pointer;
  list-style: none;
  font-size: var(--nq-fs-body-lg);
  font-weight: var(--nq-fw-bold);
  color: var(--nq-text);
}

/* حذف مثلث پیش‌فرض مرورگرها */
.nq-accordion__trigger::-webkit-details-marker { display: none; }
.nq-accordion__trigger::marker { content: ''; }

.nq-accordion__icon {
  flex: none;
  color: var(--nq-accent);
  font-size: var(--nq-fs-h4);
  font-weight: var(--nq-fw-regular);
}

.nq-accordion__icon::before { content: '+'; }

.nq-accordion__item[open] .nq-accordion__icon::before { content: '−'; }

.nq-accordion__panel {
  padding: 0 var(--nq-space-1) var(--nq-space-5);
  color: var(--nq-text-muted);
  font-size: var(--nq-fs-body);
  line-height: var(--nq-lh-normal);
}

/* --- 5.6 Testimonial ----------------------------------------------------- */

.nq-testimonial {
  display: flex;
  flex-direction: column;
  margin: 0; /* وقتی روی <figure> استفاده می‌شود */
  padding: var(--nq-space-7);
  background: var(--nq-surface);
  border: var(--nq-border-width) solid var(--nq-border);
  border-radius: var(--nq-radius);
  box-shadow: var(--nq-shadow-sm);
}

.nq-testimonial__quote {
  margin: 0 0 var(--nq-space-5);
  flex: 1;
  color: var(--nq-text-strong-alt);
  font-size: var(--nq-fs-body-lg);
  line-height: var(--nq-lh-normal);
}

.nq-testimonial__author {
  display: flex;
  align-items: center;
  gap: var(--nq-space-3);
}

.nq-testimonial__avatar {
  width: 40px;
  height: 40px;
  flex: none;
  object-fit: cover;
  border: var(--nq-border-width) solid var(--nq-border);
  border-radius: var(--nq-radius-full);
}

.nq-testimonial__name {
  font-size: var(--nq-fs-body-sm);
  font-weight: var(--nq-fw-bold);
}

.nq-testimonial__role {
  color: var(--nq-text-subtle);
  font-size: var(--nq-fs-small);
}

.nq-rating {
  color: var(--nq-accent);
  font-size: var(--nq-fs-small);
  letter-spacing: 2px;
}

/* --- 5.7 Form ------------------------------------------------------------ */

.nq-field {
  display: flex;
  flex-direction: column;
  gap: var(--nq-space-2);
}

.nq-field__control {
  padding: var(--nq-space-3);
  background: var(--nq-surface);
  border: var(--nq-border-width) solid var(--nq-border);
  border-radius: var(--nq-radius);
  font-size: var(--nq-fs-body);
  color: var(--nq-text);
  transition: border-color var(--nq-duration) var(--nq-ease);
}

.nq-field__control::placeholder {
  color: var(--nq-text-subtle);
}

.nq-field__control:hover {
  border-color: var(--nq-border-strong);
}

textarea.nq-field__control {
  min-height: 140px;
  resize: vertical;
}

.nq-field__error {
  color: oklch(52% 0.19 25);
  font-size: var(--nq-fs-small);
  font-weight: var(--nq-fw-semibold);
}

.nq-field__control[aria-invalid='true'] {
  border-color: oklch(52% 0.19 25);
}

/* پیام نتیجه‌ی فرم */
.nq-alert {
  padding: var(--nq-space-3) var(--nq-space-4);
  border: var(--nq-border-width) solid var(--nq-border);
  border-radius: var(--nq-radius-sm);
  font-size: var(--nq-fs-body-sm);
  font-weight: var(--nq-fw-semibold);
}

.nq-alert--success {
  border-color: var(--nq-accent);
  background: var(--nq-surface-accent);
  color: var(--nq-accent);
}

.nq-alert--error {
  border-color: oklch(52% 0.19 25);
  color: oklch(52% 0.19 25);
}

/* ==========================================================================
   6. REGIONS
   ========================================================================== */

/* --- 6.1 Header ---------------------------------------------------------- */

.nq-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--nq-z-header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nq-space-4);
  height: var(--nq-header-height);
  padding-inline: var(--nq-gutter);
  /* هدر شیشه‌ای: محتوا هنگام اسکرول از زیرش محو دیده می‌شود */
  background: var(--nq-glass);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-block-end: var(--nq-border-width) solid var(--nq-border);
}

/* مرورگرهایی که backdrop-filter ندارند، پس‌زمینه‌ی مات می‌گیرند */
@supports not (backdrop-filter: blur(1px)) {
  .nq-header {
    background: var(--nq-surface);
  }
}

.nq-header__inner {
  display: contents;
}

.nq-header__start {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  min-width: 0;
}

.nq-header__end {
  display: flex;
  align-items: center;
  gap: var(--nq-space-4);
}

.nq-brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--nq-text);
  font-size: var(--nq-fs-logo);
  font-weight: var(--nq-fw-black);
  letter-spacing: var(--nq-tracking-tight);
}

.nq-brand:hover { text-decoration: none; }

.nq-nav {
  display: flex;
  gap: clamp(16px, 2vw, 28px);
}

.nq-nav__link {
  position: relative;
  padding-block: var(--nq-space-2);
  color: var(--nq-text-muted);
  font-size: var(--nq-fs-body);
  font-weight: var(--nq-fw-medium);
  transition: color var(--nq-duration) var(--nq-ease);
}

/* خط زیرِ لینک از وسط باز می‌شود */
.nq-nav__link::after {
  content: '';
  position: absolute;
  inset-block-end: 0;
  inset-inline: 50%;
  height: 2px;
  border-radius: var(--nq-radius-full);
  background: var(--nq-accent);
  transition: inset-inline var(--nq-duration) var(--nq-ease);
}

.nq-nav__link:hover {
  color: var(--nq-text);
  text-decoration: none;
}

.nq-nav__link:hover::after,
.nq-nav__link[aria-current='page']::after {
  inset-inline: 0;
}

.nq-nav__link[aria-current='page'] {
  color: var(--nq-accent);
  font-weight: var(--nq-fw-semibold);
}

.nq-header__login {
  color: var(--nq-text);
  font-size: var(--nq-fs-body-sm);
  font-weight: var(--nq-fw-semibold);
}

.nq-nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  padding: 0;
  align-items: center;
  justify-content: center;
}

.nq-nav-toggle__bars {
  display: flex;
  flex-direction: column;
  gap: var(--nq-space-1);
  width: 18px;
}

.nq-nav-toggle__bars span {
  height: 2px;
  background: var(--nq-text);
}

.nq-mobile-nav {
  position: sticky;
  inset-block-start: var(--nq-header-height);
  z-index: var(--nq-z-mobile-nav);
  display: flex;
  flex-direction: column;
  padding: var(--nq-space-2) var(--nq-gutter) var(--nq-space-4);
  background: var(--nq-surface);
  border-block-end: var(--nq-border-width) solid var(--nq-border);
}

.nq-mobile-nav[hidden] {
  display: none;
}

.nq-mobile-nav__link {
  padding-block: var(--nq-space-3);
  border-block-end: var(--nq-border-width) solid var(--nq-border-soft);
  color: var(--nq-text);
  font-size: var(--nq-fs-body-lg);
  font-weight: var(--nq-fw-semibold);
}

.nq-mobile-nav__link:last-child {
  border-block-end: 0;
}

/* --- 6.1b Breadcrumb ------------------------------------------------------- */

.nq-breadcrumb {
  padding-block: var(--nq-space-4) 0;
}

.nq-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nq-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--nq-text-subtle);
  font-size: var(--nq-fs-small);
}

.nq-breadcrumb__item:not(:last-child)::after {
  content: '/';
  margin-inline-start: var(--nq-space-2);
  color: var(--nq-border-strong);
}

.nq-breadcrumb__link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: var(--nq-text-muted);
  font-weight: var(--nq-fw-medium);
  transition: color var(--nq-duration) var(--nq-ease);
}

.nq-breadcrumb__link:hover {
  color: var(--nq-accent);
}

.nq-breadcrumb__item:last-child span {
  color: var(--nq-text-subtle);
}

/* --- 6.2 Hero ------------------------------------------------------------ */

.nq-hero {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
  padding-block: clamp(48px, 7vw, 96px) clamp(40px, 6vw, 72px);
}

/* هاله‌ی نرم رنگ برند پشت hero — عمق می‌دهد بدون اینکه متن را کم‌کنتراست کند.
   عمداً داخل مرز افقی hero می‌ماند؛ بیرون‌زدگی باعث افزایش scrollWidth
   و اسکرول افقی ناخواسته روی موبایل می‌شد. */
.nq-hero::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset-block-start: -10%;
  inset-inline-end: 0;
  width: min(60%, 620px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    var(--nq-accent) 0%,
    transparent 68%
  );
  opacity: 0.1;
  pointer-events: none;
}

.nq-hero__title {
  margin-block: var(--nq-space-6) var(--nq-space-5);
  font-size: var(--nq-fs-display);
  text-wrap: balance;
}

.nq-hero__lead {
  margin: 0 0 var(--nq-space-8);
  max-width: 52ch;
  color: var(--nq-text-muted);
  font-size: var(--nq-fs-lead);
  line-height: var(--nq-lh-relaxed);
  text-wrap: pretty;
}

.nq-hero__meta {
  margin: var(--nq-space-5) 0 0;
}

.nq-hero__media {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: var(--nq-border-width) solid var(--nq-border);
  border-radius: var(--nq-radius-lg);
  box-shadow: var(--nq-shadow-lg);
}

/* --- 6.3 Logo strip ------------------------------------------------------ */

.nq-logo-strip {
  display: flex;
  align-items: center;
  gap: var(--nq-space-6);
  flex-wrap: wrap;
}

.nq-logo-strip__label {
  color: var(--nq-text-muted);
  font-size: var(--nq-fs-small);
  font-weight: var(--nq-fw-semibold);
  white-space: nowrap;
}

.nq-logo-strip__item {
  flex: 0 1 auto;
  width: auto;
  max-width: 140px;
  min-width: 80px;
  height: 32px;
  object-fit: contain;
}

/* --- 6.3b Tech grid -------------------------------------------------------- */

/* شبکه‌ی مربعی برای نمایش لوگوی تکنولوژی‌ها */
.nq-tech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: var(--nq-space-4);
}

.nq-tech-grid__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--nq-space-3);
  aspect-ratio: 1 / 1;
  padding: var(--nq-space-4);
  border: var(--nq-border-width) solid var(--nq-border);
  border-radius: var(--nq-radius);
  justify-content: center;
  transition: border-color var(--nq-duration) var(--nq-ease),
              box-shadow var(--nq-duration) var(--nq-ease);
}

.nq-tech-grid__item:hover {
  border-color: var(--nq-accent);
  box-shadow: var(--nq-shadow-sm);
}

.nq-tech-grid__media {
  width: 40%;
  height: 40%;
  object-fit: contain;
}

.nq-tech-grid__label {
  font-size: var(--nq-fs-small);
  color: var(--nq-text-muted);
  text-align: center;
}

/* --- 6.4 CTA band -------------------------------------------------------- */

.nq-cta-band {
  padding: var(--nq-space-16) var(--nq-gutter);
  background: var(--nq-accent);
  text-align: center;
}

.nq-cta-band__title {
  margin: 0 0 var(--nq-space-4);
  color: var(--nq-text-on-accent);
  font-size: var(--nq-fs-h2);
  font-weight: var(--nq-fw-black);
  line-height: var(--nq-lh-tight);
}

.nq-cta-band__text {
  margin: 0 0 var(--nq-space-8);
  color: var(--nq-text-on-accent);
  opacity: 0.92;
  font-size: var(--nq-fs-body-lg);
}

/* --- 6.4b Lightbox --------------------------------------------------------- */

.nq-lightbox-trigger {
  cursor: zoom-in;
}

.nq-lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--nq-z-lightbox);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--nq-space-8);
  background: rgba(0, 0, 0, 0.85);
}

.nq-lightbox[hidden] {
  display: none;
}

.nq-lightbox__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border: var(--nq-border-width) solid var(--nq-border);
  border-radius: var(--nq-radius);
  cursor: default;
}

.nq-lightbox__close {
  position: absolute;
  top: var(--nq-space-5);
  inset-inline-end: var(--nq-space-5);
  width: 44px;
  height: 44px;
  border: var(--nq-border-width) solid var(--nq-border);
  border-radius: var(--nq-radius-full);
  background: var(--nq-bg);
  color: var(--nq-text);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

/* --- 6.5 Footer ---------------------------------------------------------- */

.nq-footer {
  max-width: var(--nq-container);
  margin-inline: auto;
  padding: var(--nq-space-14) var(--nq-gutter) var(--nq-space-8);
}

.nq-footer__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: var(--nq-space-8);
  margin-block-end: var(--nq-space-10);
}

.nq-footer__about {
  margin: var(--nq-space-3) 0 0;
  max-width: 280px;
  color: var(--nq-text-muted);
  font-size: var(--nq-fs-body-sm);
  line-height: var(--nq-lh-normal);
}

.nq-footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--nq-space-1);
  margin-block-start: var(--nq-space-3);
}

/* padding عمودی به‌جای gap: ناحیه‌ی قابل لمس را به ۴۴px می‌رساند
   (حداقل توصیه‌شده‌ی WCAG) بدون اینکه فاصله‌ی بصری زیاد شود. */
.nq-footer__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--nq-text-muted);
  font-size: var(--nq-fs-body-sm);
  transition: color var(--nq-duration) var(--nq-ease);
}

.nq-footer__link:hover {
  color: var(--nq-accent);
}

.nq-footer__trust {
  margin-block-end: var(--nq-space-6);
}

.nq-footer__trust img {
  max-width: 100px;
  height: auto;
}

.nq-footer__bottom {
  padding-block-start: var(--nq-space-6);
  border-block-start: var(--nq-border-width) solid var(--nq-border);
  color: var(--nq-text-subtle);
  font-size: var(--nq-fs-small);
}

.nq-social {
  display: flex;
  gap: var(--nq-space-3);
  margin-block-start: var(--nq-space-4);
}

.nq-social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: var(--nq-border-width) solid var(--nq-border);
  border-radius: var(--nq-radius-full);
  color: var(--nq-text);
  font-size: var(--nq-fs-caption);
  font-weight: var(--nq-fw-bold);
  transition: border-color var(--nq-duration) var(--nq-ease);
}

.nq-social__link:hover {
  border-color: var(--nq-accent);
  color: var(--nq-accent);
  text-decoration: none;
}

/* --- 6.7 Filter (فیلتر دسته‌بندی نمونه‌کارها) ---------------------------- */

.nq-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nq-space-2);
  margin-block-end: var(--nq-space-10);
}

.nq-filter__item {
  padding: var(--nq-space-2) var(--nq-space-4);
  border: var(--nq-border-width) solid var(--nq-border);
  border-radius: var(--nq-radius-full);
  background: var(--nq-surface);
  color: var(--nq-text);
  font-size: var(--nq-fs-body-sm);
  font-weight: var(--nq-fw-semibold);
  text-decoration: none;
  transition: border-color var(--nq-duration) var(--nq-ease),
              color var(--nq-duration) var(--nq-ease);
}

.nq-filter__item:hover {
  border-color: var(--nq-accent);
  text-decoration: none;
}

/* حالت انتخاب‌شده با aria-current علامت‌گذاری می‌شود، نه با کلاس اضافه:
   یک منبع حقیقت برای هم استایل و هم screen reader. */
.nq-filter__item[aria-current='page'] {
  border-color: var(--nq-accent);
  background: var(--nq-accent);
  color: var(--nq-text-on-accent);
}

/* --- 6.8 Pagination ------------------------------------------------------ */

.nq-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--nq-space-3);
  margin-block-start: var(--nq-space-12);
}

.nq-pagination__status {
  color: var(--nq-text-subtle);
  font-size: var(--nq-fs-body-sm);
}

/* ==========================================================================
   6.6 UTILITIES
   عمداً حداقلی — هر چیزی که سه بار تکرار شود باید کامپوننت شود، نه utility.
   ========================================================================== */

.nq-framed { border: var(--nq-border-width) solid var(--nq-border); border-radius: var(--nq-radius); }

/* پاورقی بخش — لینک «مشاهده همه» زیر یک شبکه */
.nq-section__foot {
  margin: var(--nq-space-10) 0 0;
  text-align: center;
}

.nq-mbs-3  { margin-block-start: var(--nq-space-3); }
.nq-mbs-10 { margin-block-start: var(--nq-space-10); }

/* ==========================================================================
   7. RESPONSIVE
   ========================================================================== */

/* شبکه‌های اصلی (.nq-grid--2/3/4) با auto-fit خودشان تطبیق پیدا می‌کنند و
   اینجا override نمی‌خواهند؛ فقط چیدمان‌های خاص اینجا تنظیم می‌شوند. */

@media (max-width: 860px) {
  .nq-nav,
  .nq-header__login {
    display: none;
  }

  .nq-nav-toggle {
    display: inline-flex;
  }

  .nq-hero {
    grid-template-columns: 1fr;
    gap: var(--nq-space-10);
    padding-block: var(--nq-space-12) var(--nq-space-10);
    text-align: start;
  }

  /* روی موبایل تصویر hero بعد از متن می‌آید، نه قبل از آن */
  .nq-hero__media {
    order: 2;
    aspect-ratio: 16 / 10;
  }

  .nq-footer__grid {
    grid-template-columns: 1fr 1fr;
  }

  /* ========== اصلاح موبایل: ارتفاع کمتر برای تصاویر کارت ========== */
  .nq-card__media {
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 480px) {
  .nq-footer__grid {
    grid-template-columns: 1fr;
  }

  .nq-cluster {
    gap: var(--nq-space-4);
  }

  /* روی صفحه‌ی خیلی کوچک، دکمه‌ها تمام‌عرض بهتر قابل لمس‌اند */
  .nq-hero .nq-cluster .nq-btn {
    width: 100%;
  }

  /* ========== اصلاح موبایل کوچک: ارتفاع کمتر برای تصاویر کارت ========== */
  .nq-card__media {
    aspect-ratio: 16 / 9;
  }
}