/* ==========================================================================
   Nafasland — Landing «پیشنهاد شگفت‌انگیز»
   فایل استایل اختصاصی این صفحه (فقط همین‌جا لینک می‌شود)
   --------------------------------------------------------------------------
   بخش ۱ — Design Tokens / پالت رنگی برند
   همه‌ی رنگ‌ها به‌صورت متغیر CSS تعریف شده‌اند تا در کل طراحی از آن‌ها
   استفاده کنیم و در صورت نیاز فقط از یک نقطه تغییرشان دهیم.
   پیشوند --nl- (nafasland) برای جلوگیری از تداخل با متغیرهای تم Portal.
   ========================================================================== */

/* ==========================================================================
   بخش ۰ — فونت‌ها (Peyda برای تیترها، Vazirmatn برای متن/UI)
   فایل‌ها از assets تم پرتال روی nafasland.com سرو می‌شوند.
   مطابق فیگما: H1 = Peyda ExtraBold(۸۰۰)، H2 = Peyda Bold(۷۰۰)،
   متن = Vazirmatn ۴۰۰/۵۰۰/۷۰۰/۸۰۰.
   ========================================================================== */

/* --- Peyda (تیترها) --- */
@font-face {
  font-family: 'Peyda';
  src: url('https://nafasland.com/themes/custom-566a/assets/fonts/f8ecf8ba4bdf80a4ba4277a3b2f702b6.woff2') format('woff2');
  font-weight: 600 700;      /* Bold — H2 */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Peyda';
  src: url('https://nafasland.com/themes/custom-566a/assets/fonts/bad932b256c899a3f6f0651b9ca19470.woff2') format('woff2');
  font-weight: 800 900;      /* ExtraBold — H1 */
  font-style: normal;
  font-display: swap;
}

/* --- Vazirmatn (متن و UI) --- */
@font-face {
  font-family: 'Vazirmatn';
  src: url('https://nafasland.com/themes/custom-566a/assets/fonts/Vazirmatn-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('https://nafasland.com/themes/custom-566a/assets/fonts/Vazirmatn-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('https://nafasland.com/themes/custom-566a/assets/fonts/Vazirmatn-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('https://nafasland.com/themes/custom-566a/assets/fonts/Vazirmatn-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- رنگ‌های اصلی برند (به‌ترتیب اولویت) ------------------------------- */
  --nl-identity:  #96146a;  /* بنفش/ماژنتا — رنگ هویتی، تأکید محدود (eyebrow، بج ویژه، hover لینک) */
  --nl-urgency:   #ff5700;  /* نارنجی — فقط: بج تخفیف، شمارش معکوس، قیمت نهایی، CTA اصلی */
  --nl-secondary: #3cac4a;  /* سبز روشن — چیپ/تب فعال، دکمه ثانویه، آیکون افزودن به سبد */
  --nl-primary:   #006d3d;  /* سبز تیره — هدینگ‌ها، هدر/فوتر، آیکون‌های اعتماد، تینت پس‌زمینه */

  /* --- سایه‌های تیره‌تر (برای hover / حالت فعال) ------------------------ */
  --nl-identity-dark:  #7a1057;
  --nl-urgency-dark:   #e04d00;
  --nl-secondary-dark: #329a3f;
  --nl-primary-dark:   #005730;

  /* --- سایه‌های روشن‌تر (برای گرادیان / حالت‌های ملایم) ------------------ */
  --nl-identity-light:  #b5488f;
  --nl-urgency-light:   #ff7a38;
  --nl-secondary-light: #5cbf68;
  --nl-primary-light:   #2c8a5e;

  /* --- تینت‌های کم‌رنگ پس‌زمینه (۶–۱۲٪ برای تناوب بخش‌ها) --------------- */
  --nl-primary-tint:        rgba(0, 109, 61, 0.06);
  --nl-primary-tint-strong: rgba(0, 109, 61, 0.12);
  --nl-secondary-tint:      rgba(60, 172, 74, 0.10);
  --nl-urgency-tint:        rgba(255, 87, 0, 0.10);
  --nl-identity-tint:       rgba(150, 20, 106, 0.08);

  /* --- خنثی‌ها (متن، سطح، خطوط) ---------------------------------------- */
  --nl-ink:          #0a0a0a;  /* متن اصلی تیره — معادل --foreground فیگما: oklch(0.145 0 0) */
  --nl-muted:        #717182;  /* متن کم‌اهمیت / توضیحات — معادل --muted-foreground فیگما */
  --nl-on-dark:      #ffffff;  /* متن روی پس‌زمینه‌های تیره برند */
  --nl-surface:      #ffffff;  /* سطح کارت / پس‌زمینه‌ی اصلی */
  --nl-surface-soft: #f6f8f7;  /* پس‌زمینه‌ی خاکستری بسیار ملایم بخش‌ها */
  --nl-line:         rgba(0, 0, 0, 0.10); /* خطوط و بوردرهای نازک */

  /* --- فونت‌ها --------------------------------------------------------- */
  --nl-font-heading: 'Peyda', 'Vazirmatn', system-ui, sans-serif; /* تیترها */
  --nl-font-body:    'Vazirmatn', system-ui, sans-serif;          /* متن و UI */
}

/* ==========================================================================
   بخش ۱.۱ — کلاس‌های کمکی رنگ (بر پایه‌ی همان متغیرها)
   چون Tailwind سایت از قبل کامپایل شده، این کلاس‌ها را خودمان می‌سازیم
   تا در markup ابزارک‌ها بدون وابستگی به build مطمئن استفاده کنیم.
   ========================================================================== */

/* پس‌زمینه */
.nl-bg-identity  { background-color: var(--nl-identity); }
.nl-bg-urgency   { background-color: var(--nl-urgency); }
.nl-bg-secondary { background-color: var(--nl-secondary); }
.nl-bg-primary   { background-color: var(--nl-primary); }

/* پس‌زمینه‌ی تینت‌دار */
.nl-bg-primary-tint   { background-color: var(--nl-primary-tint); }
.nl-bg-secondary-tint { background-color: var(--nl-secondary-tint); }
.nl-bg-urgency-tint   { background-color: var(--nl-urgency-tint); }
.nl-bg-identity-tint  { background-color: var(--nl-identity-tint); }
.nl-bg-soft           { background-color: var(--nl-surface-soft); }

/* متن */
.nl-text-identity  { color: var(--nl-identity); }
.nl-text-urgency   { color: var(--nl-urgency); }
.nl-text-secondary { color: var(--nl-secondary); }
.nl-text-primary   { color: var(--nl-primary); }
.nl-text-ink       { color: var(--nl-ink); }
.nl-text-muted     { color: var(--nl-muted); }
.nl-text-on-dark   { color: var(--nl-on-dark); }

/* بوردر */
.nl-border-identity  { border-color: var(--nl-identity); }
.nl-border-urgency   { border-color: var(--nl-urgency); }
.nl-border-secondary { border-color: var(--nl-secondary); }
.nl-border-primary   { border-color: var(--nl-primary); }
.nl-border-line      { border-color: var(--nl-line); }

/* ==========================================================================
   بخش ۲ — هدر (Header)
   نوار چسبان: لوگو + منوی دسکتاپ + تلفن + سبد خرید + منوی موبایل
   با CSS اختصاصی نوشته شده تا در همه‌ی بریک‌پوینت‌ها مو‌به‌مو مطابق Figma باشد.
   بریک‌پوینت‌ها: md = 768px ، lg = 1024px (مطابق Tailwind)
   ========================================================================== */

/* helper: reset باکس برای عناصر هدر ما */
.nl-header *,
.nl-mobilemenu *,
.nl-cart * { box-sizing: border-box; }

/* --- نوار اصلی هدر --------------------------------------------------- */
.nl-header {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid var(--nl-line);
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-family: var(--nl-font-body);
}

.nl-header__inner {
  max-width: 72rem;            /* max-w-6xl = 1152px */
  margin-inline: auto;
  height: 4rem;                /* h-16 = 64px */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-inline: 1rem;        /* px-4 */
}
@media (min-width: 768px) {
  .nl-header__inner { padding-inline: 1.5rem; } /* md:px-6 */
}

/* گروه راست: لوگو + منوی دسکتاپ */
.nl-header__brand {
  display: flex;
  align-items: center;
  gap: 2rem;                   /* gap-8 */
}

/* لوگو */
.nl-logo {
  height: 2rem;                /* h-8 = 32px */
  width: auto;
  object-fit: contain;
  display: block;
}
@media (min-width: 768px) {
  .nl-logo { height: 2.25rem; } /* md:h-9 = 36px */
}

/* منوی دسکتاپ */
.nl-nav {
  display: none;               /* hidden تا lg */
  align-items: center;
  gap: 1.5rem;                 /* gap-6 */
}
@media (min-width: 1024px) {
  .nl-nav { display: flex; }   /* lg:flex */
}
.nl-nav__link {
  font-size: 0.875rem;         /* text-sm */
  line-height: 1.5;
  color: rgba(10, 10, 10, 0.80); /* text-foreground/80 */
  text-decoration: none;
  transition: color 0.2s ease;
  white-space: nowrap;
}
.nl-nav__link:hover { color: var(--nl-identity); }

/* گروه چپ: تلفن + سبد + همبرگر */
.nl-header__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;                /* gap-3 */
}

/* لینک تلفن */
.nl-phone {
  display: none;               /* hidden تا md */
  align-items: center;
  gap: 0.5rem;                 /* gap-2 */
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--nl-primary);
  text-decoration: none;
  transition: color 0.2s ease;
}
@media (min-width: 768px) {
  .nl-phone { display: inline-flex; } /* md:inline-flex */
}
.nl-phone:hover { color: var(--nl-identity); }
.nl-phone svg { width: 1rem; height: 1rem; color: var(--nl-identity); }
.nl-phone__num { direction: ltr; }

/* دکمه‌های آیکونی (سبد و همبرگر) — 40×40 */
.nl-icon-btn {
  position: relative;
  display: grid;
  place-items: center;
  height: 2.5rem;              /* h-10 = 40px */
  width: 2.5rem;               /* w-10 = 40px */
  border-radius: 0.75rem;      /* rounded-xl */
  border: 1px solid var(--nl-line);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

/* دکمه سبد خرید */
.nl-cart-btn { color: var(--nl-identity); }
.nl-cart-btn svg { width: 1.25rem; height: 1.25rem; } /* h-5 w-5 */
.nl-cart-btn:hover {
  border-color: rgba(150, 20, 106, 0.25);
  background: rgba(150, 20, 106, 0.05);
}
/* بج تعداد سبد */
.nl-cart-badge {
  position: absolute;
  top: -0.25rem;               /* -top-1 */
  left: -0.25rem;              /* -left-1 (RTL: گوشه‌ی بالا-چپ) */
  display: grid;
  place-items: center;
  height: 1rem;                /* h-4 */
  width: 1rem;                 /* w-4 */
  border-radius: 9999px;
  background: var(--nl-urgency);
  color: #fff;
  font-size: 0.6rem;
  line-height: 1;
}
.nl-cart-badge[data-count="0"] { display: none; }

/* دکمه همبرگر (فقط زیر lg) */
.nl-menu-btn {
  color: rgba(10, 10, 10, 0.70); /* text-foreground/70 */
}
.nl-menu-btn svg { width: 1.25rem; height: 1.25rem; }
@media (min-width: 1024px) {
  .nl-menu-btn { display: none; } /* lg:hidden */
}
/* جابه‌جایی آیکون باز/بسته منو */
.nl-menu-btn .nl-icon-close { display: none; }
.nl-menu-btn.is-open .nl-icon-menu  { display: none; }
.nl-menu-btn.is-open .nl-icon-close { display: block; }

/* --- منوی موبایل کشویی ---------------------------------------------- */
.nl-mobilemenu {
  position: fixed;
  inset-inline: 0;             /* inset-x-0 */
  top: 4rem;                   /* top-16 */
  z-index: 30;
  border-bottom: 1px solid var(--nl-line);
  background: rgba(255, 255, 255, 0.98);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding: 1rem;               /* px-4 py-4 */
  box-shadow: 0 20px 36px -26px rgba(0, 0, 0, 0.32);
}
.nl-mobilemenu[hidden] { display: none; }
@media (min-width: 1024px) {
  .nl-mobilemenu { display: none !important; } /* lg:hidden */
}
.nl-mobilemenu__grid {
  max-width: 72rem;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;                 /* gap-2 */
}
.nl-mobilemenu__item {
  border-radius: 0.75rem;
  border: 1px solid rgba(150, 20, 106, 0.16);
  background: rgba(150, 20, 106, 0.035);
  padding: 0.75rem;            /* px-3 py-3 */
  text-align: right;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--nl-primary);
  font-family: var(--nl-font-body);
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.nl-mobilemenu__item:active { background: rgba(150, 20, 106, 0.10); }

/* --- کشوی سبد خرید --------------------------------------------------- */
.nl-cart {
  position: fixed;
  inset: 0;
  z-index: 60;
}
.nl-cart[hidden] { display: none; }
.nl-cart__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 61, 36, 0.30);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  border: 0;
  cursor: pointer;
}
.nl-cart__panel {
  position: absolute;
  left: 0;                     /* از سمت چپ باز می‌شود */
  top: 0;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  width: 100%;
  max-width: 24rem;            /* max-w-sm = 384px */
  background: #fff;
  box-shadow: -24px 0 60px -24px rgba(0, 0, 0, 0.35);
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.nl-cart.is-open .nl-cart__panel { transform: translateX(0); }
.nl-cart__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--nl-line);
  padding: 1.25rem;            /* px-5 py-5 */
}
.nl-cart__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--nl-primary);
  font-family: var(--nl-font-heading);
  font-weight: 800;
  font-size: 1.125rem;         /* text-lg */
  margin: 0;
}
.nl-cart__title svg { width: 1.25rem; height: 1.25rem; }
.nl-cart__close {
  display: grid;
  place-items: center;
  height: 2.25rem;
  width: 2.25rem;
  border-radius: 0.75rem;
  border: 0;
  background: transparent;
  color: rgba(10, 10, 10, 0.60);
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.nl-cart__close:hover { background: rgba(150, 20, 106, 0.08); color: var(--nl-identity); }
.nl-cart__close svg { width: 1.25rem; height: 1.25rem; }
.nl-cart__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 1.25rem;
}
.nl-cart__empty {
  padding-block: 2.5rem;
  text-align: center;
  font-size: 0.875rem;
  color: rgba(10, 10, 10, 0.60);
}
.nl-cart__foot {
  border-top: 1px solid var(--nl-line);
  background: #fff;
  padding: 1rem;
  padding-bottom: calc(1rem + env(safe-area-inset-bottom));
}
.nl-cart__checkout {
  width: 100%;
  border: 0;
  border-radius: 1rem;         /* rounded-2xl */
  background: var(--nl-urgency);
  color: #fff;
  padding: 0.875rem 1.25rem;
  font-family: var(--nl-font-body);
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 12px 28px -14px rgba(255, 87, 0, 0.75);
}

/* قفل اسکرول هنگام باز بودن کشو/منو */
body.nl-noscroll { overflow: hidden; }

/* ==========================================================================
   بخش ۳ — هیرو (Hero)
   ستون راست: eyebrow + تیتر + متن + شمارش معکوس + CTA
   ستون چپ: سه تصویر دایره‌ای با افکت blur-reveal (ابزارک contentlist)
   ریسپانسیو: md=768 (اندازه تصاویر/فاصله) ، lg=1024 (دو ستونه)
   ========================================================================== */
.nl-hero {
  position: relative;
  overflow: hidden;
  font-family: var(--nl-font-body);
}

/* بلاب‌های نرم پس‌زمینه */
.nl-hero__blob {
  position: absolute;
  border-radius: 9999px;
  filter: blur(48px);
  pointer-events: none;
  z-index: 0;
}
.nl-hero__blob--1 { left: -6rem; top: 2.5rem;  width: 18rem;   height: 18rem;   background: rgba(150, 20, 106, 0.12); }
.nl-hero__blob--2 { right: -4rem; top: -2.5rem; width: 16rem;   height: 16rem;   background: rgba(60, 172, 74, 0.10); }
.nl-hero__blob--3 { left: 50%;    top: 7rem;    width: 10rem;   height: 10rem;   background: rgba(150, 20, 106, 0.07); }

/* کانتینر داخلی */
.nl-hero__inner {
  position: relative;
  z-index: 10;
  max-width: 72rem;
  margin-inline: auto;
  display: grid;
  align-items: center;
  gap: 2.5rem;                 /* gap-10 */
  padding: 3rem 1rem;          /* py-12 px-4 */
}
@media (min-width: 768px) {
  .nl-hero__inner { padding: 4rem 1.5rem; } /* md:py-16 md:px-6 */
}
@media (min-width: 1024px) {
  .nl-hero__inner { grid-template-columns: 1fr 1fr; } /* lg:grid-cols-2 */
}

/* --- ستون متن --- */
.nl-hero__copy {
  position: relative;
  z-index: 10;
  text-align: center;
}
@media (min-width: 1024px) { .nl-hero__copy { text-align: right; } }

/* eyebrow بنفش */
.nl-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid rgba(150, 20, 106, 0.70);
  border-radius: 9999px;
  padding: 0.25rem 0.75rem;    /* py-1 px-3 */
  font-size: 0.75rem;          /* text-xs */
  color: #fff;
  background: linear-gradient(135deg, #ad2a83 0%, #96146a 58%, #7d0d56 100%);
  box-shadow: 0 10px 24px -18px rgba(150, 20, 106, 0.80);
}
.nl-hero__eyebrow-dot {
  width: 0.375rem; height: 0.375rem;  /* 6px */
  border-radius: 9999px;
  background: #fff;
  flex: none;
}

/* تیتر دورنگ */
.nl-hero__title {
  margin: 1.25rem 0 0;         /* mt-5 */
  font-family: var(--nl-font-heading);
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.15;
  color: var(--nl-primary);
}
.nl-hero__title-accent { color: var(--nl-urgency); }
.nl-hero__br { display: none; }
@media (min-width: 768px) { .nl-hero__br { display: block; } } /* br hidden md:block */

/* متن توضیح — در فیگما هیچ کلاس اندازه/leading ندارد، پس از base ارث می‌برد: 1rem / 1.5 */
.nl-hero__lead {
  margin: 1rem auto 0;         /* mt-4 mx-auto */
  max-width: 28rem;            /* max-w-md */
  color: rgba(10, 10, 10, 0.70); /* text-foreground/70 */
  font-size: 1rem;
  line-height: 1.5;
}
@media (min-width: 1024px) { .nl-hero__lead { margin-inline: 0; } } /* lg:mx-0 */

/* بخش اکشن (شمارش + CTA) */
.nl-hero__actions {
  margin-top: 1.75rem;         /* mt-7 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;                /* gap-5 */
}
@media (min-width: 1024px) { .nl-hero__actions { align-items: flex-start; } }

/* ردیف شمارش معکوس */
.nl-hero__countdown-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;                /* gap-3 */
}
.nl-hero__countdown-label {
  font-size: 0.875rem;
  color: rgba(10, 10, 10, 0.60);
}

/* شمارش معکوس */
.nl-countdown {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.nl-countdown__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}
.nl-countdown__box {
  display: grid;
  place-items: center;
  height: 3rem; width: 3rem;   /* h-12 w-12 = 48px */
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 87, 0, 0.25);
  background: rgba(255, 87, 0, 0.06);
  font-weight: 700;
  color: var(--nl-urgency);
  font-variant-numeric: tabular-nums;
}
.nl-countdown__lbl {
  font-size: 0.7rem;
  color: var(--nl-muted);
}
.nl-countdown__sep {
  color: var(--nl-urgency);
  font-size: 1.125rem;
  padding-bottom: 1.25rem;     /* pb-5 برای هم‌ترازی با باکس‌ها */
}
/* لینک ویرایش ابزارک timerr — فقط برای ادمین دیده می‌شود */
.nl-countdown__edit { flex: none; }

/* دکمه CTA */
.nl-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 1rem;         /* rounded-2xl */
  padding: 1rem 1.75rem;       /* py-4 px-7 */
  color: #fff;
  text-decoration: none;
  background: linear-gradient(135deg, #ff742e 0%, #ff5700 58%, #ed4900 100%);
  box-shadow: 0 10px 30px -10px rgba(255, 87, 0, 0.60);
  transition: transform 0.2s ease;
}
.nl-hero__cta:hover { transform: translateY(-2px); }
.nl-hero__cta span { font-size: 1rem; font-weight: 700; }
.nl-hero__cta svg { width: 1.25rem; height: 1.25rem; transition: transform 0.2s ease; }
.nl-hero__cta:hover svg { transform: translateX(-4px); }

/* --- ستون تصاویر --- */
.nl-hero__media {
  position: relative;
  z-index: 10;
  margin-inline: auto;
  width: 100%;
  max-width: 28rem;            /* max-w-md */
  height: 360px;
}
@media (min-width: 768px) { .nl-hero__media { height: 440px; } }

/* بلاب پشت تصاویر — pseudo-element تا در شمارش :nth-child کارت‌ها دخالت نکند */
.nl-hero__media::before {
  content: "";
  position: absolute;
  right: 50%; top: 50%;
  width: 18rem; height: 18rem; /* h-72 w-72 */
  transform: translate(50%, -50%);
  border-radius: 42% 58% 60% 40% / 45% 50% 50% 55%;
  background: radial-gradient(circle at 38% 35%, rgba(150,20,106,0.18), rgba(150,20,106,0.07) 56%, rgba(150,20,106,0.02) 74%);
  pointer-events: none;
  z-index: 0;
}
.nl-hero__card { z-index: 1; } /* کارت‌ها روی بلاب */

/* کارت تصویر (هر آیتم contentlist) */
.nl-hero__card {
  position: absolute;
  overflow: hidden;
  border-radius: 1.5rem;       /* rounded-3xl */
  border: 4px solid #fff;
  background: #f5f5f5;
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.25);
  /* انیمیشن ورود (spread → جای نهایی) */
  animation: nl-hero-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}
/* موقعیت و اندازه‌ی هر یک از سه تصویر (nth-child) */
.nl-hero__card:nth-child(1) { right: 0.5rem; top: 0.5rem;  width: 11rem; height: 11rem; --nl-in-x: 42px;  --nl-in-y: -32px; animation-delay: 0.12s; }
.nl-hero__card:nth-child(2) { left: 0;       top: 6rem;    width: 9rem;  height: 9rem;  --nl-in-x: -46px; --nl-in-y: -22px; animation-delay: 0.24s; }
.nl-hero__card:nth-child(3) { bottom: 0.5rem; right: 4rem; width: 8rem;  height: 8rem;  --nl-in-x: 32px;  --nl-in-y: 44px;  animation-delay: 0.36s; }
@media (min-width: 768px) {
  .nl-hero__card:nth-child(1) { width: 13rem;   height: 13rem; }   /* md:h-52 */
  .nl-hero__card:nth-child(2) { width: 11rem;   height: 11rem; }   /* md:h-44 */
  .nl-hero__card:nth-child(3) { width: 10rem;   height: 10rem; }   /* md:h-40 */
}
@keyframes nl-hero-in {
  from { opacity: 0; transform: translate(var(--nl-in-x, 0), var(--nl-in-y, 0)) scale(0.94); }
  to   { opacity: 1; transform: translate(0, 0) scale(1); }
}

/* تصویر داخل کارت + حالت‌های blur */
.nl-hero__card-img {
  display: block;
  height: 100%; width: 100%;
  object-fit: cover;
  filter: blur(4px) saturate(0.88);
  transform: scale(1);
  transition: filter 0.3s ease-out, transform 0.3s ease-out;
}
.nl-hero__card.is-revealed .nl-hero__card-img { filter: blur(0) saturate(1); transform: scale(1.03); }

/* پوشش تیره */
.nl-hero__card-overlay {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0.12;
  pointer-events: none;
  transition: opacity 0.3s ease-out;
}
.nl-hero__card.is-revealed .nl-hero__card-overlay { opacity: 0; }

/* برچسب نام محصول (حالت پیش‌فرض) */
.nl-hero__card-label {
  position: absolute;
  bottom: 0.75rem; left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.28);
  padding: 0.25rem 0.75rem;
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.90);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}
.nl-hero__card.is-revealed .nl-hero__card-label { opacity: 0; transform: translate(-50%, 8px); }

/* بج تخفیف بلابی (حالت reveal) */
.nl-hero__card-badge {
  position: absolute;
  left: 0.625rem; top: 0.625rem;
  display: grid;
  place-items: center;
  color: #fff;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.86) rotate(-8deg);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
  filter: drop-shadow(0 12px 18px rgba(255, 87, 0, 0.28));
}
.nl-hero__card.is-revealed .nl-hero__card-badge { opacity: 1; transform: scale(1) rotate(8deg); }
.nl-hero__card:nth-child(1) .nl-hero__card-badge { width: 4rem;    height: 4rem; }
.nl-hero__card:nth-child(2) .nl-hero__card-badge { width: 3.5rem;  height: 3.5rem; }
.nl-hero__card:nth-child(3) .nl-hero__card-badge { width: 2.75rem; height: 2.75rem; }
@media (min-width: 768px) {
  .nl-hero__card:nth-child(1) .nl-hero__card-badge { width: 5rem;      height: 5rem; }
  .nl-hero__card:nth-child(2) .nl-hero__card-badge { width: 4.25rem;   height: 4.25rem; }
  .nl-hero__card:nth-child(3) .nl-hero__card-badge { width: 3.5rem;    height: 3.5rem; }
}
.nl-hero__card-badge svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.nl-hero__card-badge-txt {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; line-height: 1;
  font-weight: 700;
}
.nl-hero__card-badge-txt b { font-size: 0.85em; }
.nl-hero__card-badge-txt i { font-style: normal; font-size: 0.6em; margin-top: 0.15rem; opacity: 0.95; }

/* کاهش حرکت برای کاربرانی که ترجیح می‌دهند */
@media (prefers-reduced-motion: reduce) {
  .nl-hero__card { animation: none; }
}

/* ==========================================================================
   بخش ۴ — ارسال فوری تهران (TehranDelivery)
   بند تمام‌عرض با گرادیان سبز برند، آیکون ساعت متحرک، تیتر با افکت
   blur-reveal هنگام ورود به دید، و بج بنفش «ویژه سفارش‌های تهران».
   بخش کاملاً استاتیک است (بدون ابزارک/دیتای بک‌اند).
   ========================================================================== */
.nl-td {
  padding-inline: 1rem;                 /* px-4 */
  font-family: var(--nl-font-body);
}
@media (min-width: 768px) {
  .nl-td { padding-inline: 1.5rem; }    /* md:px-6 */
}

/* پنل گرادیانی */
.nl-td__panel {
  max-width: 72rem;                     /* max-w-6xl */
  margin-inline: auto;
  overflow: hidden;
  border-radius: 2rem;                  /* rounded-[2rem] */
  color: #fff;
  background: linear-gradient(135deg, #197d52 0%, #006d3d 100%);
  box-shadow: 0 24px 60px -32px rgba(0, 109, 61, 0.75);
}

/* محتوای داخلی */
.nl-td__inner {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;                         /* gap-5 */
  padding: 2rem 1.5rem;                 /* py-8 px-6 */
  text-align: center;
}
@media (min-width: 768px) {
  .nl-td__inner {
    flex-direction: row;
    justify-content: space-between;
    padding: 2.5rem;                    /* md:py-10 md:px-10 */
    text-align: right;
  }
}

/* بلاب‌های نرم پس‌زمینه */
.nl-td__blob {
  position: absolute;
  border-radius: 9999px;
  filter: blur(40px);                   /* blur-2xl */
  pointer-events: none;
  z-index: 0;
}
.nl-td__blob--1 {
  left: -3rem; top: -4rem;              /* -left-12 -top-16 */
  width: 10rem; height: 10rem;          /* h-40 w-40 */
  background: rgba(150, 20, 106, 0.35); /* #96146a/35 */
}
.nl-td__blob--2 {
  right: 2.5rem; bottom: -5rem;         /* right-10 -bottom-20 */
  width: 11rem; height: 11rem;          /* h-44 w-44 */
  background: rgba(60, 172, 74, 0.25);  /* #3cac4a/25 */
}
/* شکل ارگانیک تزئینی */
.nl-td__deco {
  position: absolute;
  left: 2rem; top: 2rem;                /* left-8 top-8 */
  width: 4rem; height: 4rem;            /* h-16 w-16 */
  border-radius: 42% 58% 60% 40% / 45% 50% 50% 55%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  pointer-events: none;
  z-index: 0;
}

/* گروه راست: آیکون + متن */
.nl-td__lead {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 1rem;                            /* gap-4 */
}

/* جعبه‌ی آیکون ساعت */
.nl-td__icon {
  position: relative;
  display: grid;
  place-items: center;
  height: 4rem; width: 4rem;            /* h-16 w-16 */
  flex: none;                           /* shrink-0 */
  overflow: hidden;
  border-radius: 1.5rem;               /* rounded-3xl */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.20); /* ring-1 ring-white/20 */
  background: linear-gradient(135deg, rgba(255,255,255,0.14) 0%, rgba(60,172,74,0.14) 36%, rgba(150,20,106,0.38) 100%);
}
.nl-td__icon-blob {
  position: absolute;
  right: -1.25rem; top: -1.25rem;       /* -right-5 -top-5 */
  width: 3.5rem; height: 3.5rem;        /* h-14 w-14 */
  border-radius: 9999px;
  background: rgba(150, 20, 106, 0.30);
  filter: blur(40px);
  pointer-events: none;
}

/* ساعت (دایره + عقربه‌ها) */
.nl-td__clock {
  position: relative;
  height: 2rem; width: 2rem;            /* h-8 w-8 = 32px */
  border-radius: 9999px;
  border: 2px solid #fff;
}
/* عقربه‌ی ثابت (کوتاه، افقی به سمت مرکز→راست) */
.nl-td__clock-hand-fixed {
  position: absolute;
  left: 50%; top: 50%;
  height: 2px; width: 7px;
  transform: translateY(-50%);
  border-radius: 9999px;
  background: #fff;
}
/* عقربه‌ی چرخان (عمودی، محور چرخش در مرکز) */
.nl-td__clock-hand-spin {
  position: absolute;
  left: 50%; top: 4px;
  height: 0.75rem; width: 2px;          /* h-3 */
  transform: translateX(-50%) rotate(0deg);
  transform-origin: bottom center;      /* origin-bottom → مرکز ساعت */
  border-radius: 9999px;
  background: #fff;
}
/* نقطه‌ی مرکزی */
.nl-td__clock-center {
  position: absolute;
  left: 50%; top: 50%;
  height: 0.375rem; width: 0.375rem;    /* h-1.5 w-1.5 */
  transform: translate(-50%, -50%);
  border-radius: 9999px;
  background: #fff;
}
/* چرخش عقربه پس از ورود بخش به دید (معادل framer-motion rotate [0,0,360]) */
.nl-td.is-revealed .nl-td__clock-hand-spin {
  animation: nl-td-spin 3.75s ease-in-out 0.18s infinite;
}
@keyframes nl-td-spin {
  0%, 15%  { transform: translateX(-50%) rotate(0deg); }   /* مکث */
  46%      { transform: translateX(-50%) rotate(360deg); } /* یک دور چرخش */
  100%     { transform: translateX(-50%) rotate(360deg); } /* استراحت تا دور بعد */
}

/* متن */
.nl-td__text { min-width: 0; }
.nl-td__headline {
  margin: 0;
  font-family: var(--nl-font-heading);
  font-weight: 800;
  font-size: 1.5rem;                    /* text-2xl */
  line-height: 1.375;                   /* leading-snug */
  will-change: transform, filter, opacity;
  /* حالت اولیه پیش از reveal */
  opacity: 0;
  transform: translateY(32px) scale(0.96);
  filter: blur(8px);
  transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.1s cubic-bezier(0.16, 1, 0.3, 1),
              filter 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (min-width: 768px) {
  .nl-td__headline { font-size: 1.875rem; } /* md:text-3xl */
}
.nl-td.is-revealed .nl-td__headline {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}
.nl-td__sub {
  margin: 0.5rem 0 0;                   /* mt-2 */
  max-width: 42rem;                     /* max-w-2xl */
  font-size: 0.875rem;                  /* text-sm */
  line-height: 1.75rem;                 /* leading-7 */
  color: rgba(255, 255, 255, 0.84);
}
@media (min-width: 768px) {
  .nl-td__sub { font-size: 1rem; }      /* md:text-base */
}

/* بج «ویژه سفارش‌های تهران» */
.nl-td__badge {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;                          /* gap-2 */
  flex: none;
  border-radius: 9999px;
  background: #fff;
  padding: 0.5rem 1rem;                 /* py-2 px-4 */
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--nl-identity);            /* #96146a */
  box-shadow: 0 12px 30px -20px rgba(0, 0, 0, 0.55);
  white-space: nowrap;
}
.nl-td__badge svg { width: 1rem; height: 1rem; }

/* کاهش حرکت */
@media (prefers-reduced-motion: reduce) {
  .nl-td__headline {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
  .nl-td.is-revealed .nl-td__clock-hand-spin { animation: none; }
}

/* ==========================================================================
   بخش ۵ — جداکننده‌ی موجی (SectionDivider)
   خط نازک ارگانیک که هنگام ورود به دید کشیده می‌شود.
   ========================================================================== */
.nl-divider {
  position: relative;
  height: 3rem;                 /* h-12 */
  width: 100%;
  overflow: hidden;
}
.nl-divider svg { display: block; height: 100%; width: 100%; }
.nl-divider__path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;         /* مخفی تا زمان reveal (pathLength=1) */
}
.nl-divider.is-drawn .nl-divider__path {
  animation: nl-divider-draw 3.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes nl-divider-draw { to { stroke-dashoffset: 0; } }

/* ==========================================================================
   بخش ۶ — کاتالوگ: استریپ «پیشنهادهای شگفت‌انگیز» + انتخابگر دسته‌بندی
   ========================================================================== */
.nl-catalog {
  scroll-margin-top: 5rem;      /* scroll-mt-20 */
  font-family: var(--nl-font-body);
}

/* --- استریپ پیشنهادها --- */
.nl-deals {
  max-width: 72rem;             /* max-w-6xl */
  margin-inline: auto;
  margin-bottom: 2.5rem;        /* mb-10 */
  padding: 3rem 1rem 0;         /* pt-12 px-4 */
}
@media (min-width: 768px) {
  .nl-deals { padding-inline: 1.5rem; } /* md:px-6 */
}
.nl-deals__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;                  /* gap-2 */
  margin-bottom: 1rem;          /* mb-4 */
}
.nl-deals__flame {
  display: inline-grid;
  color: var(--nl-urgency);
  animation: nl-flame 2.6s ease-in-out infinite;
}
.nl-deals__flame svg { width: 1.25rem; height: 1.25rem; } /* h-5 w-5 */
@keyframes nl-flame {
  0%   { transform: rotate(0deg)  translateY(0)     scale(1); }
  13%  { transform: rotate(-7deg) translateY(-1.5px) scale(1.08); }
  26%  { transform: rotate(5deg)  translateY(0)     scale(1); }
  39%  { transform: rotate(-3deg) translateY(-1.5px) scale(1.05); }
  52%  { transform: rotate(0deg)  translateY(0)     scale(1); }
  100% { transform: rotate(0deg)  translateY(0)     scale(1); }
}
.nl-deals__title {
  margin: 0;
  font-family: var(--nl-font-heading);
  font-weight: 700;
  font-size: 1.125rem;          /* text-lg */
  color: var(--nl-primary);
}

/* گرید کارت‌ها: 2 → 3 (md) → 4 (lg) ستون */
.nl-deals__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;                    /* gap-4 */
}
@media (min-width: 768px) {
  .nl-deals__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } /* md:grid-cols-3 md:gap-6 */
}
@media (min-width: 1024px) {
  .nl-deals__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* lg:grid-cols-4 */
}

/* --- کارت محصول --- */
.nl-pcard {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border-radius: 1rem;          /* rounded-2xl */
  border: 1px solid var(--nl-line);
  background: var(--nl-surface);
  padding: 0.625rem;            /* p-2.5 */
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.nl-pcard:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 87, 0, 0.35);
  box-shadow: 0 18px 36px -24px rgba(0, 0, 0, 0.25);
}
.nl-pcard__media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 0.75rem;       /* rounded-xl */
  background: #fafafa;          /* bg-neutral-50 */
}
.nl-pcard__img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.nl-pcard:hover .nl-pcard__img { transform: scale(1.05); }

/* بج تخفیف بلابی — هم‌شکل با بج هیرو (همان مسیر بلاب فیگما) */
.nl-pcard__badge {
  position: absolute;
  right: 0.5rem; top: 0.5rem;   /* right-2 top-2 */
  display: grid;
  place-items: center;
  height: 3rem; width: 3rem;    /* h-12 w-12 */
  text-align: center;
  color: #fff;
  font-weight: 700;
  pointer-events: none;
  filter: drop-shadow(0 12px 18px rgba(255, 87, 0, 0.28));
}
@media (min-width: 768px) {
  .nl-pcard__badge { height: 3.5rem; width: 3.5rem; } /* کمی بزرگ‌تر از md به بالا */
}
.nl-pcard__badge svg { position: absolute; inset: 0; height: 100%; width: 100%; }
.nl-pcard__badge-txt {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}
.nl-pcard__badge-txt b { font-weight: 700; font-size: 0.75rem; }
.nl-pcard__badge-txt i {
  font-style: normal;
  font-size: 0.5rem;
  margin-top: 0.25rem;          /* mt-1 */
  opacity: 0.95;
}
@media (min-width: 768px) {
  .nl-pcard__badge-txt b { font-size: 0.875rem; }
  .nl-pcard__badge-txt i { font-size: 0.58rem; }
}

/* بج «پیشنهاد ویژه» (بنفش) */
.nl-pcard__special {
  position: absolute;
  bottom: 0.5rem; right: 0.5rem; /* bottom-2 right-2 */
  border-radius: 9999px;
  background: var(--nl-identity);
  padding: 0.25rem 0.5rem;      /* px-2 py-1 */
  font-size: 0.58rem;
  font-weight: 700;
  color: #fff;
}

.nl-pcard__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 0.75rem 0.25rem 0;   /* pt-3 px-1 */
}
.nl-pcard__brand {
  font-size: 0.68rem;
  color: var(--nl-primary);
}
.nl-pcard__name {
  margin: 0.25rem 0 0;          /* mt-1 */
  min-height: 2.45rem;
  font-size: 0.75rem;           /* text-xs */
  font-weight: 600;
  line-height: 1.35;
  color: var(--nl-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nl-pcard__foot {
  margin-top: 0.75rem;          /* mt-3 */
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.5rem;
}
.nl-pcard__prices { min-width: 0; }
.nl-pcard__old {
  display: block;
  font-size: 0.65rem;
  color: var(--nl-muted);
  text-decoration: line-through;
}
.nl-pcard__now-row {
  display: flex;
  align-items: center;
  gap: 0.375rem;                /* gap-1.5 */
}
.nl-pcard__now {
  display: block;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--nl-urgency);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nl-pcard__pct {
  border-radius: 0.375rem;      /* rounded-md */
  background: rgba(255, 87, 0, 0.10);
  padding: 0.05rem 0.375rem;    /* px-1.5 py-0.5 */
  font-size: 0.62rem;
  font-weight: 800;
  color: var(--nl-urgency);
  white-space: nowrap;
}

/* دکمه افزودن به سبد */
.nl-pcard__add {
  display: grid;
  place-items: center;
  height: 2rem; width: 2rem;    /* h-8 w-8 */
  flex: none;
  border: 0;
  border-radius: 0.75rem;       /* rounded-xl */
  background: var(--nl-secondary);
  color: #fff;
  cursor: pointer;
  padding: 0;
  transition: transform 0.2s ease;
}
.nl-pcard__add:hover { transform: scale(1.05); }
.nl-pcard__add svg { width: 1rem; height: 1rem; }
.nl-pcard__add .nl-ic-check { display: none; }
.nl-pcard__add.is-added .nl-ic-plus  { display: none; }
.nl-pcard__add.is-added .nl-ic-check { display: block; }

/* استپر تعداد */
.nl-pcard__stepper {
  display: flex;
  align-items: center;
  gap: 0.125rem;                /* gap-0.5 */
  height: 2rem;
  flex: none;
  border-radius: 0.75rem;
  background: var(--nl-secondary);
  padding: 0.125rem;            /* p-0.5 */
  color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10);
}
.nl-pcard__stepper[hidden] { display: none; }
.nl-pcard__stepper button {
  display: grid;
  place-items: center;
  height: 1.75rem; width: 1.75rem; /* h-7 w-7 */
  border: 0;
  border-radius: 0.5rem;        /* rounded-lg */
  background: transparent;
  color: #fff;
  cursor: pointer;
  padding: 0;
  transition: background-color 0.15s ease;
}
.nl-pcard__stepper button:hover { background: rgba(255, 255, 255, 0.16); }
.nl-pcard__stepper button svg { width: 0.875rem; height: 0.875rem; } /* h-3.5 w-3.5 */
.nl-pcard__qty {
  display: grid;
  place-items: center;
  min-width: 1.25rem;           /* min-w-5 */
  font-size: 0.75rem;
  font-weight: 700;
}

/* --- انتخابگر دسته‌بندی (تمام‌عرض) --- */
.nl-cats-wrap { padding-bottom: 3rem; }      /* pb-12 */
@media (min-width: 768px) { .nl-cats-wrap { padding-bottom: 4rem; } } /* md:pb-16 */

.nl-cats {
  position: relative;
  width: 100%;
  overflow: hidden;
  scroll-margin-top: 5rem;      /* scroll-mt-20 */
}

/* پس‌زمینه‌ی crossfade */
.nl-cats__bg { position: absolute; inset: 0; }
.nl-cats__bg-layer {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}
.nl-cats__bg-layer.is-active { opacity: 1; }
.nl-cats__bg-rest {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  opacity: 1;
  filter: blur(16px) saturate(0.9);
  transform: scale(1.1);
  transition: opacity 0.4s ease-in-out;
}
.nl-cats.has-active .nl-cats__bg-rest { opacity: 0; }
.nl-cats__bg-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.35); }

.nl-cats__inner {
  position: relative;
  z-index: 1;
  max-width: 72rem;
  margin-inline: auto;
  padding: 2rem 1rem;           /* py-8 px-4 */
}
@media (min-width: 768px) {
  .nl-cats__inner { padding: 5rem 1.5rem; } /* md:py-20 md:px-6 */
}

.nl-cats__head { text-align: center; margin-bottom: 1.25rem; } /* mb-5 */
@media (min-width: 768px) { .nl-cats__head { margin-bottom: 2.5rem; } } /* md:mb-10 */
.nl-cats__eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.80);
}
.nl-cats__title {
  margin: 0.5rem 0 0;           /* mt-2 */
  font-family: var(--nl-font-heading);
  font-weight: 700;
  font-size: 1.5rem;            /* text-2xl */
  letter-spacing: 0.02em;
  color: #fff;
}
@media (min-width: 768px) { .nl-cats__title { font-size: 1.875rem; } } /* md:text-3xl */

/* گرید دسته‌ها: 2 → 4 (md) */
.nl-cats__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-items: center;
  gap: 0.75rem;                 /* gap-3 */
}
@media (min-width: 768px) {
  .nl-cats__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; } /* md:grid-cols-4 md:gap-5 */
}

/* کارت دسته */
.nl-cat {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 8.75rem;           /* max-w-[8.75rem] */
  min-height: 0;
  overflow: hidden;
  border-radius: 1rem;          /* rounded-2xl */
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 0.5rem;              /* p-2 */
  text-align: center;
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
}
@media (min-width: 768px) {
  .nl-cat { max-width: 13rem; padding: 1rem; } /* md:max-w-[13rem] md:p-4 */
}
.nl-cat:hover { transform: scale(1.06); z-index: 10; }

/* لایه‌ی پیش‌فرض (عکس تار + گرادیان) */
.nl-cat__default {
  position: absolute;
  inset: 0;
  opacity: 1;
  transition: opacity 0.4s ease-in-out;
}
.nl-cat__img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  filter: blur(8px) saturate(0.85);
  transform: scale(1.1);
}
.nl-cat__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg, rgba(62,67,72,0.76) 0%, rgba(92,75,99,0.72) 100%);
}
/* لایه‌ی سفید (حالت باز) */
.nl-cat__white {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}
/* نوار نارنجی انتخاب */
.nl-cat__bar {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 0.25rem;              /* h-1 */
  background: var(--nl-urgency);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
}

/* محتوا */
.nl-cat__content { position: relative; z-index: 1; }
.nl-cat__title {
  margin: 0;
  font-family: var(--nl-font-heading);
  font-weight: 700;
  font-size: 0.875rem;          /* text-sm */
  color: #fff;
  transition: color 0.4s ease;
}
@media (min-width: 768px) { .nl-cat__title { font-size: 1.5rem; } } /* md:text-2xl */
.nl-cat__reveal {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.4s ease-in-out, opacity 0.4s ease-in-out;
}
.nl-cat__reveal > div { overflow: hidden; }
.nl-cat__desc {
  margin: 0.375rem auto 0;      /* mt-1.5 */
  max-width: 8rem;
  font-size: 10px;
  line-height: 1rem;
  color: #525252;               /* neutral-600 */
}
@media (min-width: 768px) {
  .nl-cat__desc { margin-top: 0.75rem; max-width: 15rem; font-size: 0.875rem; line-height: 1.5rem; }
}
.nl-cat__more {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.375rem;
  padding-bottom: 0.125rem;
  border-bottom: 1px solid var(--nl-primary);
  font-size: 10px;
  font-weight: 500;
  color: var(--nl-primary);
}
@media (min-width: 768px) {
  .nl-cat__more { margin-top: 1rem; gap: 0.375rem; font-size: 0.875rem; }
}
.nl-cat__more svg { width: 0.75rem; height: 0.75rem; }
@media (min-width: 768px) { .nl-cat__more svg { width: 1rem; height: 1rem; } }

/* حالت باز (hover یا انتخاب‌شده): سفید شدن، نمایش توضیح، سبز شدن عنوان */
.nl-cat:hover .nl-cat__default,
.nl-cat.is-selected .nl-cat__default { opacity: 0; }
.nl-cat:hover .nl-cat__white,
.nl-cat.is-selected .nl-cat__white { opacity: 1; }
.nl-cat:hover .nl-cat__title,
.nl-cat.is-selected .nl-cat__title { color: var(--nl-primary); }
.nl-cat:hover .nl-cat__reveal,
.nl-cat.is-selected .nl-cat__reveal { grid-template-rows: 1fr; opacity: 1; }
.nl-cat.is-selected .nl-cat__bar { opacity: 1; }

/* کاهش حرکت */
@media (prefers-reduced-motion: reduce) {
  .nl-deals__flame { animation: none; }
  .nl-divider.is-drawn .nl-divider__path { animation: none; stroke-dashoffset: 0; }
  .nl-pcard, .nl-pcard__img, .nl-cat { transition: none; }
}

/* ==========================================================================
   بخش ۷ — اعتمادسازی (TrustSection)
   کارت با قاب گرادیانی، تیتر با blur-reveal، و ۴ آیکون متحرک.
   ========================================================================== */
.nl-trust {
  max-width: 72rem;             /* max-w-6xl */
  margin-inline: auto;
  padding: 0 1rem 2rem;         /* px-4 pb-8 */
  font-family: var(--nl-font-body);
}
@media (min-width: 768px) {
  .nl-trust { padding: 0 1.5rem 3rem; } /* md:px-6 md:pb-12 */
}

/* قاب گرادیانی نازک (۳px) */
.nl-trust__frame {
  border-radius: 2rem;          /* rounded-[2rem] */
  padding: 3px;
  background: linear-gradient(90deg, rgba(0,109,61,0.34), rgba(150,20,106,0.34), rgba(0,109,61,0.28));
  box-shadow: 0 22px 55px -36px rgba(0, 0, 0, 0.28);
}
.nl-trust__inner {
  position: relative;
  overflow: hidden;
  border-radius: calc(2rem - 3px);
  background: #fff;
  padding: 1.5rem 1rem;         /* px-4 py-6 */
}
@media (min-width: 768px) {
  .nl-trust__inner { padding: 2.5rem; } /* md:px-10 md:py-10 */
}
.nl-trust__blob {
  position: absolute;
  left: -4rem; top: 1.5rem;     /* -left-16 top-6 */
  width: 9rem; height: 9rem;    /* h-36 w-36 */
  border-radius: 9999px;
  background: rgba(150, 20, 106, 0.10);
  filter: blur(64px);           /* blur-3xl */
  pointer-events: none;
}

/* تیتر با blur-reveal */
.nl-trust__head {
  position: relative;
  overflow: hidden;
  text-align: center;
  margin-bottom: 1.25rem;       /* mb-5 */
}
@media (min-width: 768px) { .nl-trust__head { margin-bottom: 2rem; } } /* md:mb-8 */
.nl-trust__title {
  margin: 0;
  font-family: var(--nl-font-heading);
  font-weight: 700;
  font-size: 1.25rem;           /* text-xl */
  color: var(--nl-primary);
  will-change: transform, filter, opacity;
  opacity: 0;
  transform: translateY(32px) scale(0.96);
  filter: blur(8px);
  transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.1s cubic-bezier(0.16, 1, 0.3, 1),
              filter 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (min-width: 768px) { .nl-trust__title { font-size: 1.5rem; } } /* md:text-2xl */
.nl-trust.is-revealed .nl-trust__title {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* گرید: ۲ ستون → ۴ ستون (lg) */
.nl-trust__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;                    /* gap-4 */
}
@media (min-width: 1024px) {
  .nl-trust__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; } /* lg:grid-cols-4 lg:gap-6 */
}
.nl-trust__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;                  /* gap-2 */
  text-align: center;
}
@media (min-width: 768px) { .nl-trust__item { gap: 0.75rem; } } /* md:gap-3 */

/* جعبه‌ی آیکون */
.nl-trust__ic {
  display: grid;
  place-items: center;
  height: 2.5rem; width: 2.5rem; /* h-10 w-10 */
  border-radius: 1rem;          /* rounded-2xl */
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}
@media (min-width: 768px) {
  .nl-trust__ic { height: 3rem; width: 3rem; } /* md:h-12 md:w-12 */
}
.nl-trust__ic-motion { display: grid; place-items: center; }
.nl-trust__ic-motion svg { width: 1.25rem; height: 1.25rem; } /* h-5 w-5 */
@media (min-width: 768px) {
  .nl-trust__ic-motion svg { width: 1.5rem; height: 1.5rem; } /* md:h-6 md:w-6 */
}

/* انیمیشن‌های آیکون (معادل framer-motion، با مکث repeatDelay) */
.nl-trust__ic-motion--0 { animation: nl-trust-ic0 2.25s ease-in-out infinite; }
.nl-trust__ic-motion--1 { animation: nl-trust-ic1 2.25s ease-in-out infinite; }
.nl-trust__ic-motion--2 { animation: nl-trust-ic2 1.70s ease-in-out infinite; }
.nl-trust__ic-motion--3 { animation: nl-trust-ic3 2.25s ease-in-out infinite; }
@keyframes nl-trust-ic0 {
  0%   { transform: scale(1) rotate(0deg); }
  30%  { transform: scale(1.2) rotate(-8deg); }
  60%  { transform: scale(1) rotate(0deg); }
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes nl-trust-ic1 {
  0%   { transform: rotate(0deg) translateY(0); }
  20%  { transform: rotate(-12deg) translateY(-2px); }
  40%  { transform: rotate(7deg) translateY(0); }
  60%  { transform: rotate(0deg) translateY(0); }
  100% { transform: rotate(0deg) translateY(0); }
}
@keyframes nl-trust-ic2 {
  0%   { transform: translate(0, 0); }
  31%  { transform: translate(6px, -3px); }
  62%  { transform: translate(0, 0); }
  100% { transform: translate(0, 0); }
}
@keyframes nl-trust-ic3 {
  0%   { transform: scaleY(1) translateY(0); }
  30%  { transform: scaleY(0.84) translateY(2px); }
  60%  { transform: scaleY(1) translateY(0); }
  100% { transform: scaleY(1) translateY(0); }
}

.nl-trust__item-title {
  margin: 0;
  font-size: 0.875rem;          /* text-sm */
  font-weight: 700;
  color: var(--nl-ink);
}
@media (min-width: 768px) { .nl-trust__item-title { font-size: 1rem; } } /* md:text-base */
.nl-trust__item-desc {
  margin: 0;
  font-size: 0.75rem;           /* text-xs */
  line-height: 1.25rem;         /* leading-5 */
  color: rgba(10, 10, 10, 0.65);
}
@media (min-width: 768px) { .nl-trust__item-desc { font-size: 0.875rem; } } /* md:text-sm */

/* ==========================================================================
   بخش ۸ — بنر برند منتخب کمپین (BrandSpotlight) — CTA دوم
   ========================================================================== */
.nl-spotlight {
  max-width: 72rem;             /* max-w-6xl */
  margin-inline: auto;
  padding-inline: 1rem;         /* px-4 */
  font-family: var(--nl-font-body);
}
@media (min-width: 768px) { .nl-spotlight { padding-inline: 1.5rem; } } /* md:px-6 */

.nl-spotlight__card {
  display: grid;
  align-items: center;
  gap: 1.5rem;                  /* gap-6 */
  overflow: hidden;
  border-radius: 1.5rem;        /* rounded-3xl */
  border: 1px solid rgba(0, 109, 61, 0.12);
  padding: 1.5rem;              /* p-6 */
  background: rgba(0, 109, 61, 0.06);
}
@media (min-width: 768px) {
  .nl-spotlight__card { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 2.5rem; } /* md:grid-cols-2 md:p-10 */
}

.nl-spotlight__copy { text-align: center; }
@media (min-width: 768px) { .nl-spotlight__copy { text-align: right; } }

.nl-spotlight__eyebrow {
  display: inline-flex;
  border-radius: 9999px;
  border: 1px solid rgba(150, 20, 106, 0.30);
  background: rgba(150, 20, 106, 0.08);
  padding: 0.25rem 0.75rem;     /* px-3 py-1 */
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--nl-identity);
}
.nl-spotlight__title {
  margin: 0.5rem 0 0;           /* mt-2 */
  font-family: var(--nl-font-heading);
  font-weight: 700;
  font-size: 1.5rem;            /* text-2xl */
  color: var(--nl-primary);
}
@media (min-width: 768px) { .nl-spotlight__title { font-size: 1.875rem; } } /* md:text-3xl */
/* در فیگما بدون کلاس اندازه/leading است → 1rem / 1.5 از base */
.nl-spotlight__lead {
  margin: 0.75rem auto 0;       /* mt-3 mx-auto */
  max-width: 28rem;             /* max-w-md */
  color: rgba(10, 10, 10, 0.70); /* text-foreground/70 */
  font-size: 1rem;
  line-height: 1.5;
}
@media (min-width: 768px) { .nl-spotlight__lead { margin-inline: 0; } } /* md:mx-0 */

/* CTA ثانویه — outline سبز */
.nl-spotlight__cta {
  margin-top: 1.25rem;          /* mt-5 */
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;                /* gap-1.5 */
  border-radius: 0.75rem;       /* rounded-xl */
  border: 2px solid var(--nl-primary);
  padding: 0.625rem 1rem;       /* py-2.5 px-4 */
  font-size: 0.875rem;          /* text-sm */
  color: var(--nl-primary);
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
@media (min-width: 768px) {
  .nl-spotlight__cta {
    margin-top: 1.5rem;         /* md:mt-6 */
    gap: 0.5rem;                /* md:gap-2 */
    border-radius: 1rem;        /* md:rounded-2xl */
    padding: 0.75rem 1.5rem;    /* md:py-3 md:px-6 */
    font-size: 1rem;            /* md:text-base */
  }
}
.nl-spotlight__cta:hover { background: var(--nl-primary); color: #fff; }
.nl-spotlight__cta span { font-weight: 700; }
.nl-spotlight__cta svg { width: 1rem; height: 1rem; }
@media (min-width: 768px) { .nl-spotlight__cta svg { width: 1.25rem; height: 1.25rem; } }

.nl-spotlight__media { position: relative; }
.nl-spotlight__img {
  display: block;
  height: 14rem;                /* h-56 */
  width: 100%;
  object-fit: cover;
  border-radius: 1rem;          /* rounded-2xl */
  background: #f5f5f5;          /* bg-neutral-100 */
  box-shadow: 0 28px 60px -24px rgba(0, 61, 36, 0.34);
}
@media (min-width: 768px) { .nl-spotlight__img { height: 18rem; } } /* md:h-72 */

/* کاهش حرکت */
@media (prefers-reduced-motion: reduce) {
  .nl-trust__title { opacity: 1; transform: none; filter: none; transition: none; }
  .nl-trust__ic-motion--0,
  .nl-trust__ic-motion--1,
  .nl-trust__ic-motion--2,
  .nl-trust__ic-motion--3 { animation: none; }
}

/* ==========================================================================
   بخش ۹ — سؤالات متداول (FAQ) — آکاردئون تک‌بازشو
   ========================================================================== */
.nl-faq {
  max-width: 48rem;             /* max-w-3xl */
  margin-inline: auto;
  padding: 3rem 1rem;           /* py-12 px-4 */
  font-family: var(--nl-font-body);
}
@media (min-width: 768px) { .nl-faq { padding-inline: 1.5rem; } } /* md:px-6 */

.nl-faq__head { text-align: center; margin-bottom: 2rem; } /* mb-8 */
.nl-faq__eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--nl-identity);
}
.nl-faq__title {
  margin: 0.5rem 0 0;           /* mt-2 */
  font-family: var(--nl-font-heading);
  font-weight: 700;
  font-size: 1.5rem;            /* text-2xl */
  color: var(--nl-primary);
}

.nl-faq__list {
  overflow: hidden;
  border-radius: 1rem;          /* rounded-2xl */
  border: 1px solid var(--nl-line);
  background: var(--nl-surface);
}
.nl-faq__item + .nl-faq__item { border-top: 1px solid var(--nl-line); } /* divide-y */

.nl-faq__q {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;                    /* gap-4 */
  padding: 1rem 1.25rem;        /* py-4 px-5 */
  text-align: right;
  border: 0;
  background: transparent;
  color: var(--nl-ink);
  cursor: pointer;
  font-family: var(--nl-font-body);
  transition: color 0.2s ease;
}
.nl-faq__q span { font-weight: 500; font-size: 1rem; }
.nl-faq__q:hover { color: var(--nl-identity); }
.nl-faq__item.is-open .nl-faq__q { color: var(--nl-identity); }

.nl-faq__q svg { width: 1.25rem; height: 1.25rem; flex: none; } /* h-5 w-5 */
.nl-faq__q .nl-ic-plus  { color: var(--nl-primary); }
.nl-faq__q:hover .nl-ic-plus { color: var(--nl-identity); }
.nl-faq__q .nl-ic-minus { display: none; color: var(--nl-identity); }
.nl-faq__item.is-open .nl-ic-plus  { display: none; }
.nl-faq__item.is-open .nl-ic-minus { display: block; }

/* پاسخ — باز/بسته‌شدن نرم */
.nl-faq__a-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.nl-faq__item.is-open .nl-faq__a-wrap { grid-template-rows: 1fr; }
.nl-faq__a-wrap > div { overflow: hidden; }
.nl-faq__a {
  margin: 0;
  padding: 0 1.25rem 1.25rem;   /* px-5 pb-5 */
  font-size: 0.875rem;          /* text-sm */
  line-height: 1.75rem;         /* leading-7 */
  color: rgba(10, 10, 10, 0.70);
}

/* ==========================================================================
   بخش ۱۰ — فوتر (Footer) — CTA سوم
   ========================================================================== */
.nl-footer {
  margin-top: 2rem;             /* mt-8 */
  border-top: 1px solid var(--nl-line);
  background: var(--nl-primary-tint);
  font-family: var(--nl-font-body);
}
.nl-footer__inner {
  max-width: 72rem;             /* max-w-6xl */
  margin-inline: auto;
  padding: 3rem 1rem;           /* py-12 px-4 */
}
@media (min-width: 768px) { .nl-footer__inner { padding-inline: 1.5rem; } } /* md:px-6 */

.nl-footer__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;                  /* gap-6 */
  border-bottom: 1px solid var(--nl-line);
  padding-bottom: 2.5rem;       /* pb-10 */
  text-align: center;
}
.nl-footer__logo { height: 2.5rem; width: auto; object-fit: contain; display: block; } /* h-10 */
.nl-footer__about {
  margin: 0;
  max-width: 28rem;             /* max-w-md */
  font-size: 0.875rem;          /* text-sm */
  line-height: 1.25rem;         /* leading پیش‌فرض text-sm */
  color: rgba(10, 10, 10, 0.70); /* text-foreground/70 */
}
/* CTA سوم — outline بنفش، کم‌ترین تأکید */
.nl-footer__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.75rem;       /* rounded-xl */
  border: 1px solid rgba(150, 20, 106, 0.30);
  padding: 0.75rem 1.5rem;      /* py-3 px-6 */
  color: var(--nl-identity);
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.nl-footer__cta:hover { background: var(--nl-identity); color: #fff; }

.nl-footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;                    /* gap-4 */
  padding-top: 1.5rem;          /* pt-6 */
}
@media (min-width: 768px) { .nl-footer__bottom { flex-direction: row; } } /* md:flex-row */
.nl-footer__copy {
  font-size: 0.75rem;
  color: rgba(10, 10, 10, 0.55);
}
.nl-footer__social { display: flex; align-items: center; gap: 0.75rem; } /* gap-3 */
.nl-footer__soc {
  display: grid;
  place-items: center;
  height: 2.25rem; width: 2.25rem; /* h-9 w-9 */
  border-radius: 0.75rem;       /* rounded-xl */
  border: 1px solid var(--nl-line);
  color: var(--nl-primary);
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.nl-footer__soc:hover {
  border-color: rgba(150, 20, 106, 0.30);
  background: #fff;
  color: var(--nl-identity);
}
.nl-footer__soc svg { width: 1rem; height: 1rem; }

/* ==========================================================================
   بخش ۱۱ — نوار چسبان پایین موبایل (MobileBar)
   تکرار CTA اصلی + شمارش معکوس؛ فقط زیر lg (۱۰۲۴px) نمایش داده می‌شود.
   ========================================================================== */
.nl-mbar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 50;
  border-top: 1px solid var(--nl-line);
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding: 0.75rem 1rem;        /* py-3 px-4 */
  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
  font-family: var(--nl-font-body);
}
@media (min-width: 1024px) {
  .nl-mbar { display: none; }   /* lg:hidden */
}
.nl-mbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;                 /* gap-3 */
}
.nl-mbar__timer { display: flex; flex-direction: column; }
.nl-mbar__timer-label {
  font-size: 0.7rem;
  color: rgba(10, 10, 10, 0.60);
}
.nl-mbar__timer-val {
  font-weight: 700;
  color: var(--nl-urgency);
  font-variant-numeric: tabular-nums;
}

/* دکمه با حاشیه‌ی گرادیانی متحرک */
.nl-mbar__cta-wrap {
  position: relative;
  flex: 1;
  max-width: 60%;
}
.nl-mbar__border {
  position: absolute;
  top: -0.25rem;
  left: -0.25rem;
  width: calc(100% + 0.5rem);
  height: calc(100% + 0.5rem);
  pointer-events: none;
}
.nl-mbar__border-anim {
  stroke-dasharray: 52 132;
  animation: nl-mbar-border 8s linear infinite;
}
/* strokeDashoffset 0 → -184 در ۷.۲s سپس ۰.۸s مکث (repeatDelay) — چون ۱۸۴=۵۲+۱۳۲، بازگشت بی‌درز است */
@keyframes nl-mbar-border {
  0%   { stroke-dashoffset: 0; }
  90%  { stroke-dashoffset: -184; }
  100% { stroke-dashoffset: -184; }
}
.nl-mbar__cta {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  border-radius: 0.75rem;       /* rounded-xl */
  padding: 0.75rem 1.25rem;     /* py-3 px-5 */
  background: var(--nl-urgency);
  color: #fff;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

/* فضای پایین صفحه تا نوار چسبان محتوای فوتر را نپوشاند (فقط موبایل) */
@media (max-width: 1023.98px) {
  body { padding-bottom: 5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .nl-mbar__border-anim { animation: none; }
}