/* ==========================================================================
   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-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);

  /* --- 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;

  --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:      17px;
  --nq-fs-h4:        20px;
  --nq-fs-logo:      21px;
  --nq-fs-h3:        26px;
  --nq-fs-h2:        30px;
  /* H1 سیال: در طرح اصلی 44px ثابت بود و روی موبایل سرریز می‌کرد. */
  --nq-fs-h1:        clamp(30px, 6.4vw, 44px);

  --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;

  /* --- Layout --- */
  --nq-container:        1200px;
  --nq-container-narrow: 720px;
  --nq-gutter:           var(--nq-space-6);
  --nq-header-height:    64px;

  /* --- Border ---
     برند Niqow گوشه‌ی تیز است. radius عمداً صفر است. */
  --nq-radius:      0;
  --nq-border-width: 1px;

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

  /* --- Motion --- */
  --nq-duration: 150ms;
  --nq-ease: ease;

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

/* ==========================================================================
   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-space-22);
}

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

.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: var(--nq-space-10);
}

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

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

.nq-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nq-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nq-grid--4 { grid-template-columns: repeat(4, minmax(0, 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);
}

.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);
}

.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);
}

.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-block;
  padding: var(--nq-space-1) var(--nq-space-3);
  border: var(--nq-border-width) solid var(--nq-accent);
  color: var(--nq-accent);
  font-size: var(--nq-fs-small);
  font-weight: var(--nq-fw-bold);
}

/* برچسب دسته‌بندی داخل کارت */
.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);
}

.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);
  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);
}

.nq-btn:hover {
  opacity: 0.88;
  text-decoration: none;
}

.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);
}

.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 {
  color: var(--nq-text);
  font-size: var(--nq-fs-body);
  font-weight: var(--nq-fw-bold);
}

.nq-link--onward::after {
  content: ' ←';
}

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

.nq-card {
  display: flex;
  flex-direction: column;
  padding: var(--nq-space-7);
  background: var(--nq-surface);
  border: var(--nq-border-width) solid var(--nq-border);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--nq-duration) var(--nq-ease);
}

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

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

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

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

/* کارت داخل شبکه‌ی متصل: قاب بیرونی از 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-card__media {
  margin: calc(var(--nq-space-7) * -1) calc(var(--nq-space-7) * -1) var(--nq-space-5);
  border-block-end: var(--nq-border-width) solid var(--nq-border);
  aspect-ratio: 16 / 10;
  object-fit: cover;
  width: calc(100% + var(--nq-space-7) * 2);
}

/* --- 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);
  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);
}

.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);
}

.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);
  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-surface);
  border-block-end: var(--nq-border-width) solid var(--nq-border);
}

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

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

.nq-brand {
  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: var(--nq-space-7);
}

.nq-nav__link {
  color: var(--nq-text);
  font-size: var(--nq-fs-body);
  font-weight: var(--nq-fw-medium);
}

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

.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.2 Hero ------------------------------------------------------------ */

.nq-hero {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--nq-space-14);
  align-items: center;
  padding-block: var(--nq-space-20) var(--nq-space-16);
}

.nq-hero__title {
  margin-block: var(--nq-space-6) var(--nq-space-5);
}

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

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

.nq-hero__media {
  width: 100%;
  height: auto;
  border: var(--nq-border-width) solid var(--nq-border);
}

/* --- 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: 1;
  min-width: 80px;
  height: 32px;
  object-fit: contain;
}

/* --- 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.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-3);
  margin-block-start: var(--nq-space-4);
}

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

.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);
  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);
  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); }

/* پاورقی بخش — لینک «مشاهده همه» زیر یک شبکه */
.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
   ========================================================================== */

@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);
  }

  .nq-grid--3,
  .nq-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* شبکه‌ی متصل در دو ستون: خط جداکننده باید بازتعریف شود */
  .nq-grid--seam > .nq-card:nth-child(2n + 1) {
    border-inline-start: 0;
  }

  .nq-grid--seam > .nq-card:nth-child(n + 3) {
    border-block-start: var(--nq-border-width) solid var(--nq-border);
  }

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

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

@media (max-width: 700px) {
  .nq-grid--2,
  .nq-grid--3,
  .nq-grid--4 {
    grid-template-columns: 1fr;
  }

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

  .nq-grid--seam > .nq-card:not(:first-child) {
    border-block-start: var(--nq-border-width) solid var(--nq-border);
  }

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

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

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