/* ==========================================================================
   PETRO EVRIN PARS — Corporate Trading Template
   شرکت بازرگانی پترو اورین پارس — قالب شرکتی دوزبانه
   Palette: Navy + Gold / سرمه‌ای و طلایی
   Fonts:   Estedad (FA/AR) + Manrope (EN) — self-hosted, SIL OFL
   Version: 3.0
   ========================================================================== */

/* ---------- 0. Self-hosted fonts / فونت‌های محلی ---------- */
/* استدد — فونت فارسی، وزن متغیر ۱۰۰ تا ۹۰۰ */
@font-face {
  font-family: "Estedad";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/estedad-arabic.woff2") format("woff2-variations");
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200E, U+2010-2011,
                 U+FB50-FDFF, U+FE70-FEFC;
}
@font-face {
  font-family: "Estedad";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/estedad-latin.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F,
                 U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
/* Manrope — Latin UI face */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("../fonts/manrope-latin.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F,
                 U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

/* ---------- 1. Design Tokens ---------- */
:root {
  /* سرمه‌ای / Navy — رنگ اصلی برند */
  --navy-950: #040B18;
  --navy-900: #081428;
  --navy-800: #0C1E3C;
  --navy-700: #122B52;
  --navy-600: #1A3A6B;
  --navy-500: #244C87;

  /* طلایی / Gold — رنگ تأکیدی */
  --gold-700: #8A6A18;   /* متن روی پس‌زمینه روشن (کنتراست AA) */
  --gold-600: #A8842A;
  --gold-500: #C9A227;   /* طلایی اصلی، پر کردن دکمه‌ها */
  --gold-400: #DDBB4E;   /* تأکید روی پس‌زمینه تیره */
  --gold-300: #EBD48C;
  --gold-100: #FAF2DC;   /* ته‌رنگ ملایم */

  /* رنگ‌های برداشته‌شده از خود لوگو / Sampled from the logo artwork */
  --logo-blue: #5A45D0;  /* آبی-بنفش ستون و گاو لوگو — کنتراست ۶٫۶ با متن سفید */
  --logo-blue-700: #4832B4;
  --logo-red:  #FE0000;  /* قرمز شعله لوگو — رنگ برند، فعلاً روی دکمه‌ها استفاده نمی‌شود */

  /* نقره‌ای — در خود لوگو وجود ندارد و انتخاب شده است. طیف ملایم به‌جای یک
     خاکستری تخت، تا حس فلزی بدهد. متن روی آن سرمه‌ای می‌ماند (کنتراست ~۱۰). */
  --silver-100: #EDEFF2;
  --silver-300: #D5D8DC;
  --silver-500: #BCC1C8;

  /* خنثی گرم / Warm neutrals */
  --sand-500: #857E6E;
  --sand-400: #ADA593;
  --sand-300: #D3CBB6;
  --sand-200: #E7E1D1;
  --sand-100: #F4F0E5;
  --sand-050: #FBF9F3;

  --white: #FFFFFF;
  --ink: #141821;
  --muted: #5B6070;

  --ok: #127A5E;
  --warn: #9A5B23;

  /* Layout */
  --container: 1240px;
  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 20px;

  /* Elevation */
  --shadow-xs: 0 1px 2px rgba(8, 20, 40, .06);
  --shadow-sm: 0 2px 8px rgba(8, 20, 40, .08);
  --shadow-md: 0 8px 26px rgba(8, 20, 40, .12);
  --shadow-lg: 0 22px 60px rgba(8, 20, 40, .20);

  --t-fast: .18s cubic-bezier(.4, 0, .2, 1);
  --t: .3s cubic-bezier(.4, 0, .2, 1);

  --header-h: 76px;
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  /* Lenis وقتی فعال شود این را با کلاس خودش خنثی می‌کند؛ برای مرورگرهایی
     که جاواسکریپت ندارند یا حرکت کم خواسته‌اند، همین رفتار بومی می‌ماند. */
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 20px);
  -webkit-text-size-adjust: 100%;
  /* منوی کشویی موبایل بیرون از کادر است؛ clip از اسکرول افقی جلوگیری می‌کند
     بدون آنکه position:sticky هدر را از کار بیندازد */
  overflow-x: clip;
  overflow-y: visible;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.9;
  font-family: "Estedad", "Vazirmatn", "IRANSansX", "Segoe UI", Tahoma, sans-serif;
  font-feature-settings: "kern";
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

html[dir="ltr"] body {
  font-family: "Manrope", "Inter", "Segoe UI", Arial, sans-serif;
  line-height: 1.72;
  font-feature-settings: "kern";
}

/* عربی: همان استدد (محدوده یونیکد عربی را پوشش می‌دهد) با فاصله خطوط بازتر */
html[lang="ar"] body {
  font-family: "Estedad", "Noto Naskh Arabic", "Segoe UI", Tahoma, sans-serif;
  line-height: 1.95;
}
/* روسی: Manrope حروف سیریلیک ندارد، پس به فونت سیستمی سیریلیک می‌سپاریم */
html[lang="ru"] body {
  font-family: "Segoe UI", "Noto Sans", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.75;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4, h5 {
  margin: 0;
  line-height: 1.4;
  font-weight: 800;
  color: var(--navy-900);
  letter-spacing: -.01em;
}
html[dir="ltr"] h1, html[dir="ltr"] h2, html[dir="ltr"] h3 { line-height: 1.22; }

p { margin: 0 0 1rem; }

/* اعداد لاتین همیشه چپ‌چین بمانند / Latin numerals stay LTR inside Persian text */
.num, .ltr, [data-count] { direction: ltr; unicode-bidi: isolate; display: inline-block; }
/* روی خانه جدول نباید display عوض شود، وگرنه سلول از چیدمان جدول بیرون می‌زند
   و متن بلند سرریز می‌کند. جهت و ایزوله‌سازی سر جای خودش می‌ماند. */
th.ltr, td.ltr { display: table-cell; }

::selection { background: var(--gold-300); color: var(--navy-900); }

/* ---------- 3. Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}

.section { padding-block: 96px; }
.section--tight { padding-block: 64px; }
.section--silver { background: var(--sand-050); }
.section--navy { background: var(--navy-900); color: var(--sand-200); }
.section--navy h2, .section--navy h3 { color: #fff; }

.grid { display: grid; gap: 24px; }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-side { grid-template-columns: 1.35fr .9fr; }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- 4. Section heading ---------- */
.sec-head { max-width: 760px; margin-bottom: 52px; }
.sec-head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-700);
  margin-bottom: 16px;
}
.eyebrow::before {
  content: "";
  width: var(--eyebrow-w, 28px);
  height: 2px;
  background: linear-gradient(90deg, var(--gold-500), transparent);
  border-radius: 2px;
}
.sec-head--center .eyebrow::before { display: none; }
.section--navy .eyebrow { color: var(--gold-400); }

.sec-head h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); margin-bottom: 14px; }
.sec-head p { color: var(--muted); font-size: 1.02rem; margin: 0; }
.section--navy .sec-head p { color: var(--sand-400); }

/* ---------- 5. Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: .95rem;
  cursor: pointer;
  transition: var(--t-fast);
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; flex: none; }
html[dir="rtl"] .btn svg.arrow { transform: scaleX(-1); }

.btn--primary {
  background: linear-gradient(135deg, var(--gold-500), var(--gold-400));
  color: var(--navy-900);
  box-shadow: 0 8px 20px rgba(201, 162, 39, .34);
}
/* هاور دکمه طلایی: نقره‌ای. متن سرمه‌ای می‌ماند — روی نقره‌ای روشن،
   متن تیره خوانا است و متن سفید نیست. */
.btn--primary:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, var(--silver-300), var(--silver-500));
  border-color: var(--silver-500);
  color: var(--navy-900);
  box-shadow: 0 14px 30px rgba(120, 130, 145, .34);
}

.btn--ghost { background: transparent; color: var(--navy-800); border-color: var(--sand-300); }
/* هاور دکمه‌های روشن: آبی لوگو با متن سفید (کنتراست ۶٫۶) */
.btn--ghost:hover {
  background: var(--logo-blue);
  border-color: var(--logo-blue);
  color: #fff;
}

.btn--light { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .3); backdrop-filter: blur(6px); }
.btn--light:hover {
  background: var(--logo-blue);
  color: #fff;
  border-color: var(--logo-blue);
}

.btn--white { background: #fff; color: var(--navy-800); }
.btn--white:hover {
  transform: translateY(-2px);
  background: var(--logo-blue);
  color: #fff;
  box-shadow: 0 14px 30px rgba(90, 69, 208, .38);
}

/* از دو دکمه روشنِ کنار هم، آنی که فایل دانلود می‌کند (پروفایل شرکت) به‌جای
   آبی، طلایی می‌شود؛ اینطور هر دو یک‌رنگ نمی‌شوند. شناسایی از روی خود صفت
   download انجام می‌شود، پس هر دکمه دانلودی در هر صفحه خودکار همین رفتار
   را می‌گیرد و نیازی به کلاس اضافه نیست. */
.btn[download]:hover {
  background: linear-gradient(135deg, var(--gold-500), var(--gold-400));
  border-color: var(--gold-500);
  color: var(--navy-900);
  box-shadow: 0 14px 30px rgba(201, 162, 39, .34);
}

.btn--block { width: 100%; }
.btn--lg { padding: 17px 38px; font-size: 1rem; }

/* ---------- ردیف دکمه‌ها / Button rows ----------
   قبلاً هر ردیف با style درون‌خطی و flex ساخته می‌شد؛ نتیجه این بود که عرض هر
   دکمه به اندازه متنش می‌شد و وقتی ردیف می‌شکست، دکمه آخر تنها و ناهماهنگ
   زیر بقیه می‌افتاد. با grid، ستون‌ها همیشه هم‌عرض‌اند و در عرض کم، همه با هم
   زیر هم می‌روند.
   Buttons in a row share one grid track size, so they are always equal in
   width and height, and they stack together instead of orphaning the last one.
   ------------------------------------------------------------------------ */
.btn-row {
  display: grid;
  /* ۲۸۰ پیکسل حداقلی است که برچسب‌های بلند (فارسی و انگلیسی) در یک خط جا
     شوند. با ۲۴۰ پیکسل، در عرض تبلت سه ستون تنگ ساخته می‌شد و متن دکمه‌ها
     دو خطی می‌شد. min(100%…) یعنی در کادر باریک به یک ستون برسد. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 12px;
  align-items: stretch;
  /* اگر ردیف بشکند، ردیف دوم هم‌ارتفاع ردیف اول می‌ماند؛ وگرنه دکمه‌ای که
     برچسبش دو خطی شده بلندتر از بقیه دیده می‌شود و ناهماهنگ به نظر می‌رسد. */
  grid-auto-rows: 1fr;
  width: 100%;            /* داخل والد flex جمع نشود */
  max-width: 620px;
}
.btn-row > .btn {
  width: 100%;
  white-space: normal;      /* برچسب بلند به خط دوم برود، نه اینکه از کادر بزند بیرون */
  text-align: center;
  line-height: 1.5;
}
.btn-row--wide { max-width: 760px; }
.btn-row--center { margin-inline: auto; justify-items: stretch; }

@media (max-width: 540px) {
  .btn-row { grid-template-columns: 1fr; max-width: none; }
}

/* ---------- 6. Header ---------- */
.topbar {
  background: var(--navy-950);
  color: var(--sand-400);
  font-size: .82rem;
  padding-block: 9px;
}
.topbar__in { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.topbar__list { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.topbar__item { display: inline-flex; align-items: center; gap: 8px; }
.topbar__item svg { width: 14px; height: 14px; color: var(--gold-400); flex: none; }
.topbar a:hover { color: #fff; }

.lang-switch {
  display: inline-flex;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 100px;
  overflow: hidden;
}
.lang-switch button {
  background: none;
  border: 0;
  color: var(--sand-400);
  padding: 4px 14px;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--t-fast);
}
.lang-switch button.is-active { background: var(--gold-500); color: var(--navy-950); }
.lang-switch button + button { border-inline-start: 1px solid rgba(255, 255, 255, .14); }
@media (max-width: 560px) {
  /* چهار دکمه زبان در موبایل جا نمی‌شوند؛ فشرده‌ترشان می‌کنیم */
  .lang-switch button { padding: 4px 9px; font-size: .72rem; }
}

.header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--sand-200);
  transition: var(--t-fast);
}
.header.is-stuck { box-shadow: var(--shadow-sm); }

.header__in {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.brand { display: flex; align-items: center; gap: 13px; }
/* لوگوی افقی کامل — مشعل، ستون، نقش گاو و نام دوزبانه در یک تصویر */
.brand__logo { width: auto; height: 52px; flex: none; object-fit: contain; }
.footer .brand__logo { height: 58px; }
/* نشان تنها (بدون نام) — برای جاهایی که فضا کم است */
.brand__mark { width: auto; height: 50px; flex: none; object-fit: contain; }
.brand__txt { display: flex; flex-direction: column; line-height: 1.25; }
.brand__name { font-weight: 800; font-size: 1.06rem; color: var(--navy-900); }
.brand__sub { font-size: .7rem; color: var(--sand-500); letter-spacing: .06em; font-weight: 600; }

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  position: relative;
  padding: 10px 15px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: .94rem;
  color: var(--navy-800);
  transition: var(--t-fast);
}
.nav a:hover { color: var(--navy-600); background: var(--sand-100); }
.nav a.is-active { color: var(--gold-700); }
.nav a.is-active::after {
  content: "";
  position: absolute;
  inset-inline: 15px;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--gold-500);
}

.header__cta { display: flex; align-items: center; gap: 12px; }

.burger {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--sand-300);
  background: #fff;
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: 12px;
}
.burger span { display: block; height: 2px; background: var(--navy-800); border-radius: 2px; margin-bottom: 4px; transition: var(--t-fast); }
.burger span:last-child { margin-bottom: 0; width: 70%; }
html[dir="rtl"] .burger span:last-child { margin-inline-start: auto; }

/* ---------- 7. Hero ---------- */
.hero {
  position: relative;
  background:
    radial-gradient(880px 520px at 78% 8%, rgba(201, 162, 39, .20), transparent 62%),
    radial-gradient(700px 460px at 12% 92%, rgba(36, 76, 135, .45), transparent 64%),
    linear-gradient(140deg, var(--navy-950) 0%, var(--navy-900) 46%, var(--navy-700) 100%);
  color: #fff;
  overflow: hidden;
  padding-block: 110px 120px;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at 70% 30%, #000, transparent 72%);
  pointer-events: none;
}
.hero__in { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr .95fr; gap: 60px; align-items: center; }

.hero .badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(221, 187, 78, .12);
  border: 1px solid rgba(221, 187, 78, .34);
  color: var(--gold-300);
  padding: 7px 16px;
  border-radius: 100px;
  font-size: .8rem;
  font-weight: 700;
  margin-bottom: 26px;
}
.hero .badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold-400); box-shadow: 0 0 0 4px rgba(221, 187, 78, .22); }

.hero h1 {
  color: #fff;
  font-size: clamp(2rem, 4.4vw, 3.35rem);
  margin-bottom: 22px;
}
.hero h1 span { color: var(--gold-400); }
.hero__lead { color: var(--sand-300); font-size: 1.08rem; max-width: 560px; margin-bottom: 34px; }
.hero__actions { margin-bottom: 44px; }   /* چیدمان از .btn-row می‌آید */

.hero__facts { display: flex; gap: 40px; flex-wrap: wrap; }
.hero__fact b { display: block; font-size: 1.75rem; color: #fff; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; }
/* فقط برچسب زیر عدد — بدون >، این قانون به <span data-count> داخل <b> هم می‌خورد
   و عدد اصلی در اندازه برچسب رندر می‌شود. */
.hero__fact > span { font-size: .84rem; color: var(--sand-400); }

/* Hero card */
.hero__panel {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius-lg);
  padding: 30px;
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-lg);
}
.hero__panel h3 { color: #fff; font-size: 1.1rem; margin-bottom: 6px; }
.hero__panel > p { color: var(--sand-400); font-size: .88rem; margin-bottom: 22px; }
.mini-list { display: grid; gap: 10px; }
.mini-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: var(--radius-sm);
  padding: 12px 15px;
  font-size: .9rem;
  color: var(--sand-200);
  transition: var(--t-fast);
}
.mini-list li:hover { background: rgba(221, 187, 78, .12); border-color: rgba(221, 187, 78, .32); }
.mini-list li svg { width: 19px; height: 19px; color: var(--gold-400); flex: none; }

/* ---------- 8. Page banner (inner pages) ---------- */
.page-head {
  position: relative;
  background:
    radial-gradient(700px 400px at 82% 0%, rgba(201, 162, 39, .18), transparent 64%),
    linear-gradient(135deg, var(--navy-950), var(--navy-700));
  color: #fff;
  padding-block: 74px 66px;
  overflow: hidden;
}
.page-head::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(circle at 75% 20%, #000, transparent 70%);
}
.page-head__in { position: relative; z-index: 2; }
.page-head h1 { color: #fff; font-size: clamp(1.8rem, 3.6vw, 2.7rem); margin-bottom: 12px; }
.page-head p { color: var(--sand-300); max-width: 640px; margin: 0; }

.crumbs { display: flex; align-items: center; gap: 10px; font-size: .84rem; color: var(--sand-400); margin-bottom: 18px; }
.crumbs a:hover { color: var(--gold-400); }
.crumbs span.sep { opacity: .5; }

/* ---------- 9. Cards ---------- */
.card {
  background: #fff;
  border: 1px solid var(--sand-200);
  border-radius: var(--radius);
  padding: 30px;
  transition: var(--t);
  height: 100%;
}
.card:hover { border-color: var(--gold-500); box-shadow: var(--shadow-md); transform: translateY(-4px); }
.card__icon {
  width: 56px; height: 56px;
  border-radius: var(--radius-sm);
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--navy-800), var(--navy-600));
  color: var(--gold-400);
  margin-bottom: 20px;
}
.card__icon svg { width: 26px; height: 26px; }
.card h3 { font-size: 1.12rem; margin-bottom: 10px; }
.card p { color: var(--muted); font-size: .93rem; margin: 0; }

/* Category card */
.cat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--sand-200);
  border-radius: var(--radius);
  padding: 28px;
  overflow: hidden;
  transition: var(--t);
  height: 100%;
}
.cat-card::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--gold-400), var(--gold-600));
  transform: scaleY(0);
  transform-origin: top;
  transition: var(--t);
}
.cat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-5px); border-color: var(--sand-300); }
.cat-card:hover::before { transform: scaleY(1); }

.cat-card__no {
  font-size: .74rem;
  font-weight: 800;
  color: var(--sand-400);
  letter-spacing: .1em;
  margin-bottom: 14px;
}
.cat-card__icon {
  width: 52px; height: 52px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--gold-100);
  color: var(--gold-700);
  margin-bottom: 18px;
  transition: var(--t);
}
.cat-card:hover .cat-card__icon { background: var(--navy-800); color: var(--gold-400); }
.cat-card__icon svg { width: 25px; height: 25px; }
.cat-card h3 { font-size: 1.08rem; margin-bottom: 10px; }
.cat-card p { color: var(--muted); font-size: .9rem; flex: 1; margin-bottom: 16px; }
.cat-card__link { font-size: .87rem; font-weight: 700; color: var(--gold-700); display: inline-flex; align-items: center; gap: 7px; }
.cat-card__link svg { width: 15px; height: 15px; transition: var(--t-fast); }
html[dir="rtl"] .cat-card__link svg { transform: scaleX(-1); }
.cat-card:hover .cat-card__link svg { transform: translateX(4px); }
html[dir="rtl"] .cat-card:hover .cat-card__link svg { transform: scaleX(-1) translateX(4px); }

/* ---------- 10. Stats strip ---------- */
.stats { background: var(--navy-900); color: #fff; }
.stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { padding: 40px 26px; text-align: center; border-inline-end: 1px solid rgba(255, 255, 255, .08); }
.stat:last-child { border: 0; }
.stat b {
  display: block;
  font-size: 2.3rem;
  font-weight: 800;
  color: var(--gold-400);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
/* فقط برچسبِ زیر عدد. اگر > نباشد، این قانون به <span data-count> داخل <b> هم
   می‌خورد و عدد شمارنده ریز می‌شود در حالی که عددهای ساده بزرگ می‌مانند. */
.stat > span { font-size: .88rem; color: var(--sand-400); }

/* شناسه‌های ثبتی (شماره ثبت، شناسه ملی) عدد آماری نیستند؛ ۱۱ رقم در اندازه
   تیتر، کل نوار را می‌بلعد. کوچک‌تر و آرام‌تر نمایش داده می‌شوند. */
.stat--ref b {
  font-size: 1.32rem;
  font-weight: 700;
  color: var(--sand-200);
  letter-spacing: .02em;
  padding-block: 9px;      /* هم‌تراز ماندن با عددهای بزرگ کنارش */
}

/* ---------- 11. Feature / why-us ---------- */
.feature { display: flex; gap: 18px; }
.feature__ic {
  width: 46px; height: 46px; flex: none;
  border-radius: var(--radius-sm);
  display: grid; place-items: center;
  background: var(--gold-100);
  color: var(--gold-700);
}
.section--navy .feature__ic { background: rgba(221, 187, 78, .12); color: var(--gold-400); }
.feature__ic svg { width: 22px; height: 22px; }
.feature h4 { font-size: 1.02rem; margin-bottom: 6px; }
.section--navy .feature h4 { color: #fff; }
.feature p { font-size: .91rem; color: var(--muted); margin: 0; }
.section--navy .feature p { color: var(--sand-400); }

/* ---------- 12. Process steps ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.step { position: relative; padding: 30px 24px; text-align: center; }
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 56px;
  inset-inline-start: 60%;
  width: 80%;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--sand-300) 0 8px, transparent 8px 16px);
}
.step__no {
  width: 62px; height: 62px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: #fff;
  border: 2px solid var(--gold-500);
  color: var(--navy-800);
  font-weight: 800;
  font-size: 1.15rem;
  position: relative;
  z-index: 2;
  box-shadow: 0 0 0 8px var(--sand-050);
}
.step h4 { font-size: 1.02rem; margin-bottom: 8px; }
.step p { font-size: .88rem; color: var(--muted); margin: 0; }

/* ---------- 13. Products page ---------- */
.prod-layout { display: grid; grid-template-columns: 268px 1fr; gap: 40px; align-items: start; }

.side {
  position: sticky;
  top: calc(var(--header-h) + 20px);
  background: #fff;
  border: 1px solid var(--sand-200);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-xs);
}
.side h4 { font-size: .95rem; margin-bottom: 16px; color: var(--navy-800); }
.side__list { display: grid; gap: 4px; }
.side__list button {
  width: 100%;
  text-align: start;
  background: none;
  border: 0;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  font-size: .9rem;
  font-weight: 600;
  color: var(--navy-800);
  cursor: pointer;
  transition: var(--t-fast);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.side__list button:hover { background: var(--sand-100); }
.side__list button.is-active { background: var(--navy-800); color: #fff; }
.side__list button i {
  font-style: normal;
  font-size: .74rem;
  background: var(--sand-200);
  color: var(--muted);
  padding: 1px 8px;
  border-radius: 100px;
  font-weight: 700;
}
.side__list button.is-active i { background: rgba(221, 187, 78, .22); color: var(--gold-300); }

.search-box { position: relative; margin-bottom: 26px; }
.search-box input {
  width: 100%;
  padding: 15px 50px 15px 18px;
  border: 1px solid var(--sand-300);
  border-radius: var(--radius-sm);
  background: #fff;
  outline: none;
  transition: var(--t-fast);
}
html[dir="ltr"] .search-box input { padding: 15px 18px 15px 50px; }
.search-box input:focus { border-color: var(--gold-500); box-shadow: 0 0 0 4px rgba(201, 162, 39, .18); }
.search-box svg {
  position: absolute;
  inset-inline-end: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 19px; height: 19px;
  color: var(--sand-500);
  pointer-events: none;
}
html[dir="ltr"] .search-box svg { inset-inline-end: auto; inset-inline-start: 18px; }

.cat-block { margin-bottom: 52px; scroll-margin-top: calc(var(--header-h) + 24px); }
.cat-block__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 14px;
  margin-bottom: 22px;
  border-bottom: 2px solid var(--sand-200);
}
.cat-block__head .ic {
  width: 42px; height: 42px; flex: none;
  border-radius: var(--radius-sm);
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--navy-800), var(--navy-600));
  color: var(--gold-400);
}
.cat-block__head .ic svg { width: 21px; height: 21px; }
.cat-block__head h3 { font-size: 1.22rem; margin: 0; }
.cat-block__head .count { margin-inline-start: auto; font-size: .8rem; color: var(--muted); font-weight: 700; }

.prod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

.prod {
  border: 1px solid var(--sand-200);
  border-radius: var(--radius);
  background: #fff;
  transition: var(--t-fast);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.prod:hover { border-color: var(--gold-500); box-shadow: var(--shadow-md); transform: translateY(-3px); }

/* --- تصویر کالا / product photo --- */
.prod__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--navy-800);
  overflow: hidden;
  flex: none;
}
.prod__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.2, .8, .3, 1);
}
.prod:hover .prod__img { transform: scale(1.05); }
/* تصویر پیش‌فرض گروه کالایی — بزرگ‌نمایی نمی‌شود */
.prod__img.is-placeholder { object-fit: cover; }
.prod:hover .prod__img.is-placeholder { transform: none; }

.prod__body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.prod:hover .prod__body { background: var(--sand-050); }
.prod h4 { font-size: .98rem; margin: 0; }
.prod .spec { font-size: .82rem; color: var(--muted); line-height: 1.7; }
.prod__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 10px; }

/* --- دکمه‌های آنالیز و MSDS / COA & MSDS document buttons --- */
.prod__docs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--sand-300);
}
.doc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 10px;
  border: 1px solid var(--gold-300);
  border-radius: var(--radius-sm);
  background: var(--gold-100);
  font-size: .8rem;
  font-weight: 700;
  color: var(--gold-700);
  cursor: pointer;
  transition: var(--t-fast);
  white-space: nowrap;
}
.doc-btn svg { width: 15px; height: 15px; flex: none; color: var(--gold-600); transition: var(--t-fast); }
.doc-btn:hover { background: var(--gold-500); border-color: var(--gold-500); color: var(--navy-900); }
.doc-btn:hover svg { color: var(--navy-900); }
.doc-btn:focus-visible { outline: 3px solid rgba(201, 162, 39, .5); outline-offset: 2px; }

/* MSDS — سرمه‌ای، تا از دکمه آنالیز کاملاً جدا دیده شود */
.doc-btn--msds { background: #fff; border-color: var(--navy-700); color: var(--navy-800); }
.doc-btn--msds svg { color: var(--navy-600); }
.doc-btn--msds:hover { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }
.doc-btn--msds:hover svg { color: var(--gold-400); }

/* ---------- 14a. پنجره جزئیات محصول / Product detail modal ---------- */
/* نشان «جزئیات» روی تصویر کارت */
.prod__more {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-start: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 100px;
  background: rgba(4, 11, 24, .62);
  border: 1px solid rgba(221, 187, 78, .42);
  color: var(--gold-300);
  font-size: .72rem;
  font-weight: 700;
  backdrop-filter: blur(4px);
  transition: var(--t-fast);
  pointer-events: none;
}
.prod__more svg { width: 13px; height: 13px; }
.prod:hover .prod__more { background: var(--gold-500); border-color: var(--gold-500); color: var(--navy-900); }
.prod { cursor: pointer; }
.prod a, .prod button { cursor: pointer; }

.prod-modal {
  position: fixed;
  inset: 0;
  z-index: 118;
  display: none;
  padding: 24px;
  background: rgba(4, 11, 24, .74);
  backdrop-filter: blur(5px);
  align-items: center;
  justify-content: center;
}
.prod-modal.is-open { display: flex; }

.prod-modal__box {
  position: relative;
  width: min(880px, 100%);
  max-height: min(92dvh, 780px);
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  display: grid;
  grid-template-columns: 44% 1fr;
  /* ردیف باید دقیقاً به قد کادر باشد، نه به قد محتوا. بدون این، ردیف
     max-content می‌شود و ستون متن از کف کادر بیرون می‌زند. */
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
  animation: docIn .28s cubic-bezier(.2, .9, .3, 1);
}

.prod-modal__x {
  position: absolute;
  inset-block-start: 14px;
  inset-inline-end: 14px;
  z-index: 3;
  width: 36px; height: 36px;
  border: 1px solid var(--sand-300);
  background: rgba(255, 255, 255, .92);
  border-radius: var(--radius-sm);
  display: grid; place-items: center;
  cursor: pointer;
  color: var(--muted);
  transition: var(--t-fast);
}
.prod-modal__x:hover { background: var(--navy-800); border-color: var(--navy-800); color: var(--gold-400); }
.prod-modal__x svg { width: 17px; height: 17px; }

.prod-modal__media { background: var(--navy-800); overflow: hidden; }
.prod-modal__media img { width: 100%; height: 100%; object-fit: cover; }

/* min-height:0 حیاتی است: فرزند grid به‌صورت پیش‌فرض min-height:auto دارد و
   کوچک‌تر از محتوایش نمی‌شود، پس overflow-y:auto هیچ‌وقت فعال نمی‌شد و متن از
   کادر بیرون می‌زد و با overflow:hidden والد بریده می‌شد — دکمه‌های پایین
   پنجره روی نمایشگرهای کوتاه اصلاً دیده نمی‌شدند.
   Without min-height:0 a grid child never shrinks below its content, so the
   scroll never engaged and the action buttons were clipped away. */
.prod-modal__body {
  padding: 30px 32px 0;
  overflow-y: auto;
  min-height: 0;
  overscroll-behavior: contain;
}

.prod-modal__cat {
  display: inline-block;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-700);
  margin-bottom: 10px;
}
.prod-modal__body h3 { font-size: 1.4rem; margin-bottom: 8px; }
.prod-modal__spec { color: var(--muted); font-size: .92rem; margin-bottom: 18px; }

.prod-modal__desc {
  border-block: 1px solid var(--sand-200);
  padding-block: 16px;
  margin-bottom: 18px;
}
.prod-modal__desc p { font-size: .95rem; line-height: 2.05; margin: 0; color: var(--ink); }
html[dir="ltr"] .prod-modal__desc p { line-height: 1.8; }

.prod-modal__sech {
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-700);
  margin-bottom: 10px;
}
.prod-modal__specwrap { margin-bottom: 20px; }
/* چیدمان ثابت لازم است: با چیدمان خودکار، یک مقدار بلند (مثل ظاهر کالا)
   جدول را پهن‌تر از پنجره می‌کند و ستون از کادر بیرون می‌زند. */
.prod-modal__spectbl { width: 100%; max-width: 100%; border-collapse: collapse; table-layout: fixed; }
.prod-modal__spectbl th,
.prod-modal__spectbl td {
  padding: 7px 10px;
  font-size: .86rem;
  border-bottom: 1px solid var(--sand-200);
  text-align: start;
  vertical-align: top;
  overflow-wrap: anywhere;
}
.prod-modal__spectbl th { color: var(--muted); font-weight: 600; width: 44%; }
.prod-modal__spectbl td { color: var(--navy-900); font-weight: 600; }
.prod-modal__spectbl tr:last-child th,
.prod-modal__spectbl tr:last-child td { border-bottom: 0; }

.prod-modal__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-block: 8px;
  border-bottom: 1px dashed var(--sand-200);
}
.prod-modal__label { font-size: .86rem; color: var(--muted); font-weight: 600; }

/* سه دکمه پایین پنجره محصول: استعلام، آنالیز، MSDS — هم‌عرض و هم‌ارتفاع.
   قبلاً flex بود و هر سه عرض متفاوتی می‌گرفتند (۱۳۸ / ۸۶ / ۹۷ پیکسل). */
.prod-modal__acts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 10px;
  margin-top: 22px;
  /* به کف پنجره می‌چسبد تا روی هر ارتفاع صفحه‌ای در دید بماند */
  position: sticky;
  inset-block-end: 0;
  z-index: 2;
  padding-block: 14px;
  background: #fff;
  box-shadow: 0 -14px 18px -12px rgba(8, 20, 40, .18);
}
.prod-modal__acts > * { width: 100%; }
.prod-modal__acts .btn { padding: 12px 18px; font-size: .9rem; white-space: nowrap; }

@media (max-width: 620px) {
  /* در عرض کم، دکمه اصلی یک ردیف کامل و دو سند زیر آن کنار هم */
  .prod-modal__acts { grid-template-columns: 1fr 1fr; }
  .prod-modal__acts > .btn { grid-column: 1 / -1; }
}
.prod-modal__acts .doc-btn { padding: 11px 18px; }

.prod-modal__note {
  padding-block-end: 26px;
  font-size: .78rem;
  color: var(--sand-500);
  line-height: 1.9;
  margin: 18px 0 0;
}

@media (max-width: 860px) {
  .prod-modal { padding: 0; }
  .prod-modal__box {
    grid-template-columns: 1fr;
    grid-template-rows: 210px minmax(0, 1fr);
    max-height: 100dvh;
    height: 100dvh;
    border-radius: 0;
    width: 100%;
  }
  .prod-modal__body { padding: 24px 20px 30px; }
}

.tag {
  font-size: .72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 100px;
  background: var(--sand-100);
  color: var(--navy-700);
  border: 1px solid var(--sand-200);
}
.prod__rfq { font-size: .8rem; font-weight: 700; color: var(--gold-700); display: inline-flex; align-items: center; gap: 5px; }
.prod__rfq:hover { text-decoration: underline; }

.no-result { display: none; text-align: center; padding: 60px 20px; color: var(--muted); }
.no-result svg { width: 54px; height: 54px; margin: 0 auto 16px; color: var(--sand-400); }

/* ---------- 14. Forms ---------- */
.form-wrap {
  background: #fff;
  border: 1px solid var(--sand-200);
  border-radius: var(--radius);
  padding: 40px;
  box-shadow: var(--shadow-sm);
}
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: .88rem; font-weight: 700; color: var(--navy-800); }
.field label .req { color: #C0392B; }
.field .hint { font-size: .78rem; color: var(--sand-500); font-weight: 500; }

.field input, .field select, .field textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--sand-300);
  border-radius: var(--radius-sm);
  background: var(--sand-050);
  outline: none;
  transition: var(--t-fast);
}
.field textarea { min-height: 120px; resize: vertical; line-height: 1.8; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--gold-500);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(201, 162, 39, .18);
}
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2356697A' stroke-width='2.4' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-size: 18px;
  background-position: left 15px center;
  padding-inline-end: 15px;
  padding-inline-start: 44px;
}
html[dir="ltr"] .field select { background-position: right 15px center; padding-inline-start: 15px; padding-inline-end: 44px; }

.input-group { display: flex; }
.input-group input { border-start-end-radius: 0; border-end-end-radius: 0; }
.input-group .unit {
  display: grid; place-items: center;
  padding-inline: 18px;
  background: var(--navy-800);
  color: var(--gold-400);
  font-size: .85rem;
  font-weight: 700;
  border: 1px solid var(--navy-800);
  border-start-end-radius: var(--radius-sm);
  border-end-end-radius: var(--radius-sm);
  white-space: nowrap;
}

.notice {
  display: flex;
  gap: 14px;
  padding: 18px 20px;
  border-radius: var(--radius-sm);
  background: #FCF0E9;
  border: 1px solid #EBC9B4;
  margin-bottom: 30px;
}
.notice svg { width: 22px; height: 22px; flex: none; color: #B4551F; margin-top: 2px; }
.notice b { display: block; margin-bottom: 4px; color: #8A3D14; font-size: .92rem; }
/* تأکید درون‌خطی داخل متن نوتیس نباید به خط بعد برود */
.notice p b { display: inline; margin: 0; font-size: inherit; }
.notice p { margin: 0; font-size: .87rem; color: #7A4A2A; }

/* نوتیس MSDS — سرمه‌ای، هم‌رنگ دکمه MSDS */
.notice--msds { background: var(--navy-800); border-color: var(--navy-700); }
.notice--msds svg { color: var(--gold-400); }
.notice--msds b { color: #fff; }
.notice--msds p { color: var(--sand-300); }
.notice--msds p b { color: var(--gold-300); }

.notice--info { background: var(--gold-100); border-color: #E4D08F; }
.notice--info svg { color: var(--gold-700); }
.notice--info b { color: var(--navy-800); }
.notice--info p { color: #6B5A24; }

/* فیلد تله ضد اسپم — برای کاربر و صفحه‌خوان نامرئی، ولی ربات آن را پر می‌کند.
   عمداً display:none نیست: بعضی ربات‌ها فیلدهای مخفی‌شده با display را رد می‌کنند.
   جابه‌جایی با left منفی هم استفاده نشده چون در حالت راست‌چین صفحه را افقی
   کِش می‌آورد؛ این روش عنصر را سر جایش نگه می‌دارد و فقط پنهانش می‌کند. */
.hp-field {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}

/* پیام خطای ارسال فرم */
.notice--err {
  background: #FCEDEA;
  border-color: #E8C4BB;
  color: #8A2B18;
}
.notice--err b { color: #8A2B18; }
.notice--err a { color: #8A2B18; text-decoration: underline; font-weight: 700; }

/* ---------- گریدهای قابل تأمین / Supplier grade index ---------- */
.grades { display: none; margin-top: 22px; }
.grades__group { margin-bottom: 14px; }
.grades__group b {
  display: block;
  font-size: .8rem;
  font-weight: 700;
  color: var(--gold-700);
  margin-bottom: 8px;
}
.grades__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.grade {
  display: inline-block;
  direction: ltr;
  unicode-bidi: isolate;
  font-size: .78rem;
  font-weight: 700;
  padding: 4px 10px;
  border: 1px solid var(--sand-200);
  border-radius: 100px;
  background: var(--sand-050);
  color: var(--navy-800);
  white-space: nowrap;
}
.grade[title] { cursor: help; border-style: dashed; border-color: var(--sand-300); }
.grade:hover { border-color: var(--gold-500); background: var(--gold-100); }
.grades__note { font-size: .78rem; color: var(--sand-500); margin: 10px 0 0; line-height: 1.8; }

/* ---------- نقشه دفتر مرکزی / Head-office map ---------- */
.map-card { padding: 0; overflow: hidden; }
.map-card__ph {
  min-height: 260px;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  gap: 4px;
  padding: 30px 24px;
  background: linear-gradient(135deg, var(--sand-100), var(--sand-200));
}
.map-card__ph svg { width: 42px; height: 42px; margin-bottom: 8px; }
.map-card__ph b { font-size: 1rem; color: var(--navy-900); }
.map-card__ph p { font-size: .87rem; color: var(--muted); margin: 0 0 6px; max-width: 380px; }
.map-card__acts { margin-top: 10px; justify-items: center; }
.map-card__acts .btn { background: #fff; }

.map-card iframe {
  display: block;
  width: 100%;
  height: 320px;
  border: 0;
}

.info-tile__map {
  display: inline-block;
  margin-top: 8px;
  font-size: .85rem;
  font-weight: 700;
  color: var(--gold-700);
  border-bottom: 1px solid currentColor;
}
.info-tile__map:hover { color: var(--navy-800); }

.checkline { display: flex; align-items: flex-start; gap: 10px; font-size: .87rem; color: var(--muted); cursor: pointer; }
.checkline input { width: 18px; height: 18px; margin-top: 4px; flex: none; accent-color: var(--gold-700); }
.checkline .req { color: #C0392B; font-weight: 800; margin-inline-end: 3px; }

/* تیک‌های اجباری — با کادر روشن مشخص می‌شوند */
.checkline--req {
  background: var(--sand-050);
  border: 1px solid var(--sand-200);
  border-inline-start: 3px solid #C0392B;
  border-radius: var(--radius-sm);
  padding: 13px 15px;
  color: var(--navy-900);
  line-height: 1.85;
}
.checkline--req input:checked ~ span { color: var(--muted); }

/* گروه «اسناد درخواستی» */
.docs-req { margin-bottom: 20px; }
.docs-req__opts {
  display: grid;
  gap: 12px;
  padding: 15px 16px;
  border: 1px solid var(--sand-200);
  border-radius: var(--radius-sm);
  background: #fff;
}

.form-ok {
  display: none;
  text-align: center;
  padding: 40px 20px;
  background: #EFF8F4;
  border: 1px solid #B4DCCB;
  border-radius: var(--radius);
}
.form-ok svg { width: 58px; height: 58px; color: var(--ok); margin: 0 auto 16px; }
.form-ok h3 { color: var(--ok); margin-bottom: 8px; }
.form-ok p { color: var(--muted); margin: 0; }

/* ---------- 15. Info / contact tiles ---------- */
.info-tile {
  background: #fff;
  border: 1px solid var(--sand-200);
  border-radius: var(--radius);
  padding: 28px;
  transition: var(--t);
  height: 100%;
}
.info-tile:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.info-tile .ic {
  width: 50px; height: 50px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--gold-100);
  color: var(--gold-700);
  margin-bottom: 18px;
}
.info-tile .ic svg { width: 23px; height: 23px; }
.info-tile h4 { font-size: 1rem; margin-bottom: 8px; }
.info-tile p, .info-tile a { display: block; font-size: .9rem; color: var(--muted); margin: 0 0 4px; }
.info-tile a:hover { color: var(--gold-700); }

/* ---------- 15a-1. بازارهای صادراتی / Export markets ---------- */
.markets { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }

.market {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--radius);
  padding: 20px 18px;
  transition: var(--t);
}
.market:hover { background: rgba(221, 187, 78, .1); border-color: rgba(221, 187, 78, .32); }
.market b { display: block; color: var(--gold-400); font-size: .95rem; margin-bottom: 14px; }
.market__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.market__chips span {
  font-size: .78rem;
  padding: 4px 11px;
  border-radius: 100px;
  background: rgba(255, 255, 255, .07);
  color: var(--sand-300);
}

.ports {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 30px;
  padding: 20px 24px;
  border: 1px dashed rgba(221, 187, 78, .3);
  border-radius: var(--radius);
}
.ports__label { font-size: .82rem; font-weight: 700; color: var(--gold-400); flex: none; }
.ports__list { display: flex; flex-wrap: wrap; gap: 8px; }
.ports__list span {
  font-size: .8rem;
  padding: 5px 13px;
  border-radius: 100px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  color: var(--sand-200);
}

@media (max-width: 1080px) { .markets { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .markets { grid-template-columns: 1fr; } .ports { flex-direction: column; align-items: flex-start; } }

/* ---------- 15a-2. لوگوی تأمین‌کنندگان و اعتبارها / Partners & credentials ---------- */
/* فلکس به‌جای گرید: وقتی تعداد لوگوها کمتر از یک ردیف کامل است، وسط‌چین می‌مانند */
.logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.logos__slot { flex: 0 1 calc((100% - 5 * 14px) / 6); min-width: 132px; }
.logos__slot {
  aspect-ratio: 3 / 2;
  display: grid;
  place-items: center;
  padding: 12px;
  border: 1px dashed var(--sand-300);
  border-radius: var(--radius-sm);
  background: #fff;
  text-align: center;
  transition: var(--t-fast);
}
.logos__slot span { font-size: .72rem; color: var(--sand-400); line-height: 1.6; }
.logos__slot img { max-width: 100%; max-height: 100%; object-fit: contain; filter: grayscale(1); opacity: .78; transition: var(--t-fast); }
.logos__slot:hover { border-style: solid; border-color: var(--gold-500); }
.logos__slot:hover img { filter: none; opacity: 1; }

.cred {
  background: #fff;
  border: 1px solid var(--sand-200);
  border-radius: var(--radius);
  padding: 24px 22px;
  height: 100%;
  transition: var(--t);
}
.cred:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.cred__ic {
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  display: grid; place-items: center;
  background: var(--gold-100);
  color: var(--gold-700);
  margin-bottom: 16px;
}
.cred__ic svg { width: 22px; height: 22px; }
.cred b { display: block; font-size: .98rem; color: var(--navy-900); margin-bottom: 6px; }
.cred > span { font-size: .85rem; color: var(--muted); line-height: 1.9; }

@media (max-width: 1080px) { .logos__slot { flex-basis: calc((100% - 2 * 14px) / 3); } }
@media (max-width: 620px)  { .logos__slot { flex-basis: calc((100% - 14px) / 2); } }

/* ---------- 15a-3. سؤالات متداول / FAQ accordion ---------- */
.faq-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 52px; align-items: start; }

.faq { display: grid; gap: 10px; }

.faq__item {
  border: 1px solid var(--sand-200);
  border-radius: var(--radius-sm);
  background: #fff;
  overflow: hidden;
  transition: var(--t-fast);
}
.faq__item[open] { border-color: var(--gold-500); box-shadow: var(--shadow-sm); }

.faq__item summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  font-weight: 700;
  font-size: .95rem;
  color: var(--navy-900);
  cursor: pointer;
  list-style: none;
  transition: var(--t-fast);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { background: var(--sand-050); }

/* علامت + که هنگام باز شدن به − تبدیل می‌شود */
.faq__item summary::after {
  content: "";
  width: 22px; height: 22px;
  flex: none;
  margin-inline-start: auto;
  border-radius: 50%;
  background:
    linear-gradient(var(--gold-700), var(--gold-700)) center / 10px 2px no-repeat,
    linear-gradient(var(--gold-700), var(--gold-700)) center / 2px 10px no-repeat,
    var(--gold-100);
  transition: var(--t);
}
.faq__item[open] summary::after {
  background:
    linear-gradient(var(--navy-900), var(--navy-900)) center / 10px 2px no-repeat,
    var(--gold-500);
  transform: rotate(180deg);
}

.faq__item > div {
  padding: 0 20px 18px;
  font-size: .91rem;
  line-height: 2.05;
  color: var(--muted);
}
html[dir="ltr"] .faq__item > div { line-height: 1.8; }
.faq__item > div b { color: var(--navy-800); }

@media (max-width: 900px) { .faq-layout { grid-template-columns: 1fr; gap: 34px; } }

/* ---------- 15b. دکمه‌های ارتباط مستقیم / Direct reach buttons ---------- */
.reach { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }

.reach__btn {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  border: 1px solid var(--sand-200);
  border-radius: var(--radius);
  background: #fff;
  transition: var(--t);
}
.reach__btn:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

.reach__ic {
  width: 48px; height: 48px; flex: none;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #fff;
  transition: var(--t-fast);
}
.reach__ic svg { width: 24px; height: 24px; }
.reach__btn--wa .reach__ic { background: #25D366; }
.reach__btn--li .reach__ic { background: #0A66C2; }
.reach__btn--wa:hover { border-color: #25D366; }
.reach__btn--li:hover { border-color: #0A66C2; }

.reach__txt { flex: 1; min-width: 0; line-height: 1.7; }
.reach__txt b { display: block; font-size: .98rem; color: var(--navy-900); }
.reach__txt span { font-size: .85rem; color: var(--muted); }

.reach__go { width: 20px; height: 20px; flex: none; color: var(--sand-400); transition: var(--t-fast); }
html[dir="rtl"] .reach__go { transform: scaleX(-1); }
.reach__btn:hover .reach__go { color: var(--gold-600); }

@media (max-width: 720px) { .reach { grid-template-columns: 1fr; } }

/* ---------- 15c. دکمه شناور واتس‌اپ / Floating WhatsApp button ---------- */
.wa-fab {
  position: fixed;
  inset-block-end: 26px;
  inset-inline-start: 26px;
  z-index: 85;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 18px 12px 14px;
  border-radius: 100px;
  background: #25D366;
  color: #fff;
  font-size: .88rem;
  font-weight: 700;
  box-shadow: 0 10px 26px rgba(37, 211, 102, .40);
  transition: var(--t);
}
html[dir="rtl"] .wa-fab { padding: 12px 14px 12px 18px; }
.wa-fab svg { width: 24px; height: 24px; flex: none; }
.wa-fab:hover { background: #1FB855; transform: translateY(-3px); box-shadow: 0 16px 34px rgba(37, 211, 102, .50); }

/* نبض ملایم برای جلب توجه — با احترام به تنظیم کاهش حرکت */
.wa-fab::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 100px;
  background: #25D366;
  z-index: -1;
  animation: waPulse 2.6s ease-out infinite;
}
@keyframes waPulse {
  0%   { transform: scale(1);    opacity: .55; }
  70%  { transform: scale(1.22); opacity: 0; }
  100% { transform: scale(1.22); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .wa-fab::before { animation: none; } }

@media (max-width: 620px) {
  .wa-fab { inset-block-end: 20px; inset-inline-start: 16px; padding: 12px; }
  .wa-fab span { display: none; }
}

/* دکمه بازگشت به بالا کنار دکمه واتس‌اپ قرار نگیرد */
.to-top { inset-inline-end: 26px; }

/* ---------- 16. CTA band ---------- */
.cta {
  position: relative;
  background:
    radial-gradient(620px 360px at 88% -12%, rgba(201, 162, 39, .42), transparent 64%),
    linear-gradient(120deg, var(--navy-900), var(--navy-600));
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 52px 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 34px;
  flex-wrap: wrap;
  overflow: hidden;
}
.cta::after {
  content: "";
  position: absolute;
  inset-inline-end: -80px;
  top: -80px;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: rgba(221, 187, 78, .08);
}
.cta > * { position: relative; z-index: 2; }
.cta h2 { color: #fff; font-size: clamp(1.4rem, 2.6vw, 2rem); margin-bottom: 10px; }
.cta p { color: rgba(231, 225, 209, .86); margin: 0; max-width: 560px; }

/* ---------- 17. Footer ---------- */
.footer { background: var(--navy-950); color: var(--sand-400); padding-block: 68px 0; font-size: .9rem; }
.footer__grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.4fr; gap: 40px; padding-bottom: 48px; }
.footer h5 { color: #fff; font-size: .97rem; margin-bottom: 20px; font-weight: 700; }
.footer p { color: var(--sand-500); line-height: 2; }
.footer a { color: var(--sand-400); transition: var(--t-fast); }
.footer a:hover { color: var(--gold-400); }
.footer__links { display: grid; gap: 11px; }
.footer__links a { display: inline-flex; align-items: center; gap: 8px; }
.footer__links a::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--gold-500); flex: none; }

.footer .brand__name { color: #fff; }
.footer .brand__sub { color: var(--sand-500); }
.footer .brand { margin-bottom: 20px; }

.footer__contact li { display: flex; gap: 12px; margin-bottom: 14px; line-height: 1.8; }
.footer__contact svg { width: 17px; height: 17px; color: var(--gold-400); flex: none; margin-top: 5px; }

.socials { display: flex; gap: 10px; margin-top: 22px; }
.socials a {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
}
.socials a:hover { background: var(--gold-500); border-color: var(--gold-500); color: var(--navy-950); }
.socials svg { width: 17px; height: 17px; }

.footer__bar {
  border-top: 1px solid rgba(255, 255, 255, .08);
  /* فاصله پایین عمداً زیاد است: دکمه‌های شناور واتس‌اپ و «بازگشت به بالا»
     در پایین کادر دید ثابت‌اند و وقتی بازدیدکننده به انتهای صفحه می‌رسد،
     دقیقاً روی سطر کپی‌رایت می‌افتادند و آن را می‌پوشاندند.
     The floating WhatsApp and back-to-top buttons are fixed to the bottom of
     the viewport and were covering the copyright line at the end of the page. */
  padding-block: 22px 96px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: .83rem;
  color: var(--sand-500);
}
.footer__legal { display: flex; gap: 22px; flex-wrap: wrap; }

/* ---------- 18. Misc ---------- */
.to-top {
  position: fixed;
  inset-block-end: 26px;
  inset-inline-end: 26px;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--navy-800);
  color: var(--gold-400);
  border: 1px solid var(--gold-600);
  cursor: pointer;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: var(--t);
  z-index: 80;
}
.to-top.is-on { opacity: 1; visibility: visible; transform: none; }
.to-top svg { width: 20px; height: 20px; }

/* انیمیشن ورود — فقط وقتی جاوااسکریپت فعال است اعمال می‌شود
   Reveal-on-scroll — applied only when JavaScript is available */
html.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
html.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1 !important; transform: none !important; }
  html { scroll-behavior: auto; }
}

.divider { height: 1px; background: var(--sand-200); border: 0; margin-block: 40px; }

.table-wrap { overflow-x: auto; border: 1px solid var(--sand-200); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; }
/* حداقل عرض فقط برای جدول‌های داده‌ای که داخل کادر اسکرول‌دار هستند.
   اگر روی همه جدول‌ها اعمال شود، جدول مشخصات داخل پنجره محصول از کادر بیرون می‌زند. */
.table-wrap > table { min-width: 620px; }
th, td { padding: 14px 18px; text-align: start; font-size: .9rem; border-bottom: 1px solid var(--sand-200); }
th { background: var(--sand-100); font-weight: 700; color: var(--navy-800); }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--sand-050); }

/* ---------- 19. Responsive ---------- */
@media (max-width: 1080px) {
  .hero__in { grid-template-columns: 1fr; gap: 44px; }
  .prod-layout { grid-template-columns: 1fr; }
  .side { position: static; }
  .side__list { grid-template-columns: repeat(2, 1fr); display: grid; }
  .prod-grid { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .g-side { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .nav {
    position: fixed;
    inset-block-start: 0;
    inset-inline-end: 0;
    height: 100dvh;
    width: min(84vw, 330px);
    background: #fff;
    flex-direction: column;
    align-items: stretch;
    padding: 90px 22px 30px;
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .3s cubic-bezier(.4, 0, .2, 1), visibility .3s;
    z-index: 95;
    gap: 6px;
  }
  html[dir="rtl"] .nav { transform: translateX(-100%); }
  .nav.is-open { transform: none !important; visibility: visible; }
  .nav a { padding: 14px 16px; border-bottom: 1px solid var(--sand-100); border-radius: 0; }
  .nav a.is-active::after { display: none; }
  .burger { display: block; }
  .header__cta .btn { display: none; }
  .g-3, .g-4, .stats__grid, .steps { grid-template-columns: repeat(2, 1fr); }
  .step::after { display: none; }
  .section { padding-block: 68px; }
  .cta { padding: 38px 30px; }
  .form-wrap { padding: 26px; }
  .topbar__list .hide-sm { display: none; }
}

@media (max-width: 620px) {
  .g-2, .g-3, .g-4, .stats__grid, .steps, .form-grid, .prod-grid, .footer__grid, .side__list { grid-template-columns: 1fr; }
  .hero { padding-block: 66px 74px; }
  .hero__facts { gap: 26px; }
  .container { padding-inline: 18px; }
  .stat { border-inline-end: 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
  .topbar__in { justify-content: center; }
}

/* ---------- 20. Print ---------- */
@media print {
  .header, .topbar, .footer, .to-top, .cta, .btn { display: none !important; }
  body { color: #000; }
}


/* ==========================================================================
   لایه حرکت / Motion layer  (GSAP + Lenis)
   وقتی motion.js فعال است کلاس motion-on روی <html> می‌نشیند و کنترل
   نمایان‌شدن عناصر به GSAP سپرده می‌شود. اگر جاواسکریپت خطا بدهد یا کاربر
   «حرکت کمتر» را فعال کرده باشد، کلاس motion-off می‌آید و همه‌چیز بدون
   انیمیشن نمایش داده می‌شود — محتوا هیچ‌وقت پنهان نمی‌ماند.
   ========================================================================== */
html.motion-on .reveal { opacity: 1; transform: none; transition: none; }
html.motion-off .reveal { opacity: 1 !important; transform: none !important; }

/* نوار پیشرفت اسکرول */
.scroll-bar {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 2px;
  z-index: 200;
  background: linear-gradient(90deg, var(--gold-500), var(--gold-300));
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}
html[dir="rtl"] .scroll-bar { transform-origin: right center; }

/* اسکرول نرم Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .scroll-bar { display: none; }
}

/* ==========================================================================
   پرداخت بصری / Visual refinement
   ========================================================================== */

/* تیترها کمی جمع‌تر و باوقارتر */
h1, h2 { letter-spacing: -.022em; }
html[dir="ltr"] h1, html[dir="ltr"] h2 { letter-spacing: -.03em; }
.sec-head h2 { font-size: clamp(1.8rem, 3.4vw, 2.7rem); }

/* ریتم بخش‌ها بازتر — فضای خالی بیشتر، حس لوکس‌تر */
.section { padding-block: 110px; }
.section--tight { padding-block: 72px; }
@media (max-width: 780px) {
  .section { padding-block: 72px; }
  .section--tight { padding-block: 52px; }
}

/* کارت محصول: بالا آمدن نرم‌تر و یک خط موی طلایی در هاور */
.prod { transition: transform var(--t), box-shadow var(--t), border-color var(--t); }
.prod:hover {
  transform: translateY(-6px);
  border-color: var(--gold-300);
  box-shadow: 0 18px 44px rgba(8, 20, 40, .13);
}

/* کارت‌های مزیت و گواهی هم همان رفتار */
.feature, .cred { transition: transform var(--t), box-shadow var(--t), border-color var(--t); }
.cred:hover { border-color: var(--gold-300); }

/* جداکننده مویی با ته‌رنگ طلایی به‌جای خط خاکستری تخت */
.divider {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--sand-300) 18%,
                              var(--gold-300) 50%, var(--sand-300) 82%, transparent);
}

/* حالت فوکوس واضح برای کیبورد — پیش‌تر فقط حاشیه پیش‌فرض مرورگر بود */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 3px;
  border-radius: 4px;
}


/* ==========================================================================
   لایه بصری هیرو — شبکه، هاله و مدار
   Hero visual layer: grid, glow and orbit ring.
   با CSS خالص ساخته شده‌اند (بدون تصویر و بدون کتابخانه) پس وزنی اضافه
   نمی‌کنند. همه با inset-inline چیده شده‌اند تا در راست‌چین هم درست بنشینند.
   ========================================================================== */
.hero { position: relative; overflow: hidden; }
.hero__in { position: relative; z-index: 3; }

.hero__grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 82px 82px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 88%);
          mask-image: linear-gradient(to bottom, #000, transparent 88%);
}

.hero__glow {
  position: absolute;
  z-index: 1;
  width: min(680px, 72vw);
  aspect-ratio: 1;
  border-radius: 50%;
  inset-inline-end: -18%;
  inset-block-start: 50%;
  translate: 0 -50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(201, 162, 39, .16), transparent 68%);
  animation: heroGlow 9s ease-in-out infinite;
}
@keyframes heroGlow {
  0%, 100% { scale: 1; opacity: .9; }
  50%      { scale: 1.13; opacity: 1; }
}

.hero__orbit {
  position: absolute;
  z-index: 1;
  width: min(660px, 70vw);
  aspect-ratio: 1;
  inset-inline-end: -14%;
  inset-block-start: 50%;
  margin-block-start: calc(min(660px, 70vw) / -2);
  border: 1px solid rgba(201, 162, 39, .22);
  border-radius: 50%;
  pointer-events: none;
  animation: heroOrbit 34s linear infinite;
}
.hero__orbit::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px dashed rgba(255, 255, 255, .07);
  border-radius: 50%;
  scale: .78;
  rotate: 60deg;
}
.hero__orbit::after {
  content: "";
  position: absolute;
  width: 9px; height: 9px;
  border-radius: 50%;
  inset-inline-start: 11%;
  inset-block-start: 14%;
  background: var(--gold-400);
  box-shadow: 0 0 14px var(--gold-400), 0 0 38px rgba(221, 187, 78, .55);
}
@keyframes heroOrbit { to { rotate: 360deg; } }

/* نوار بازارها زیر هیرو */
.market-bar {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 44px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .10);
}
.market-bar span {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--sand-500);
  transition: var(--t-fast);
}
.market-bar span:hover { color: var(--gold-400); }
@media (max-width: 620px) {
  .market-bar { justify-content: flex-start; gap: 8px 18px; }
  .market-bar span { font-size: .66rem; letter-spacing: .12em; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__glow, .hero__orbit { animation: none; }
}

/* ==========================================================================
   شبکه گروه‌های کالایی — خطوط چسبیده، بدون فاصله
   Bordered, gap-less category grid — the "engineering" look.
   ========================================================================== */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-block-start: 1px solid var(--sand-200);
  border-inline-start: 1px solid var(--sand-200);
}
.section--navy .cat-grid,
.cat-grid--dark { border-color: rgba(255, 255, 255, .10); }

.cat-grid > .cat-card {
  position: relative;
  overflow: hidden;
  border: 0;
  border-inline-end: 1px solid var(--sand-200);
  border-block-end: 1px solid var(--sand-200);
  border-radius: 0;
  padding: 30px 26px 34px;
  transition: var(--t);
}
.cat-grid > .cat-card::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 0;
  background: linear-gradient(to top, var(--gold-100), transparent);
  transition: height var(--t);
  z-index: 0;
}
.cat-grid > .cat-card:hover::before { height: 100%; }
.cat-grid > .cat-card:hover {
  transform: translateY(-6px);
  border-color: var(--gold-300);
  box-shadow: none;
}
.cat-grid > .cat-card > * { position: relative; z-index: 1; }

/* خانه پایانی: ده گروه در شبکه چهارستونی دو خانه خالی می‌گذارد و آن حفره
   در شبکه بی‌فاصله زشت دیده می‌شود. این خانه هم آن را پر می‌کند و هم
   بازدیدکننده را به فهرست کامل می‌رساند.
   The 10 groups leave two holes in a 4-column gap-less grid; this cell fills
   them and doubles as the route into the full catalogue. */
.cat-grid > .cat-cta {
  /* دهانه از build.py می‌آید، چون به شمار گروه‌ها بستگی دارد */
  grid-column: span var(--cta-span-4, 2);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 14px;
  padding: 34px 30px;
  border-inline-end: 1px solid var(--sand-200);
  border-block-end: 1px solid var(--sand-200);
  background:
    linear-gradient(135deg, var(--gold-100), transparent 62%),
    var(--sand-050);
}
.cat-cta__k {
  font-variant-numeric: tabular-nums;
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
  color: var(--navy-800);
  letter-spacing: -.02em;
}
.cat-cta__k small {
  font-size: .95rem;
  font-weight: 700;
  color: var(--gold-700);
  margin-inline-start: 8px;
  letter-spacing: 0;
}
.cat-cta p { color: var(--muted); font-size: .92rem; max-width: 46ch; }

@media (max-width: 1080px) {
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .cat-grid > .cat-cta { grid-column: span var(--cta-span-2, 2); }
}
@media (max-width: 560px)  {
  .cat-grid { grid-template-columns: 1fr; }
  .cat-grid > .cat-cta { grid-column: span 1; }
}

/* ==========================================================================
   نقشه شبکه بازارها
   Trade-network map. جهت آن عمداً همیشه چپ‌به‌راست است: جغرافیا با
   راست‌چین شدن صفحه آینه نمی‌شود، وگرنه چین سمت غرب ایران می‌افتد.
   The map keeps LTR on purpose — geography must not mirror in RTL.
   ========================================================================== */
.netmap {
  position: relative;
  direction: ltr;
  height: 380px;
  margin-top: 56px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: var(--radius);
  overflow: hidden;
  background: radial-gradient(circle at center, rgba(201, 162, 39, .07), transparent 58%);
}
.netmap::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
  background-size: 52px 52px;
}
.netmap__routes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.netmap__base line { stroke-dasharray: none; animation: none; }
.netmap__routes g:not(.netmap__base) line {
  stroke-dasharray: 14 86;
  animation: routeFlow 5.5s linear infinite;
}
/* هر خط با کمی تأخیر حرکت کند تا همه با هم نبض نزنند */
.netmap__routes g:not(.netmap__base) line:nth-child(2n)   { animation-delay: -1.1s; }
.netmap__routes g:not(.netmap__base) line:nth-child(3n)   { animation-delay: -2.4s; }
.netmap__routes g:not(.netmap__base) line:nth-child(5n)   { animation-delay: -3.6s; }
@keyframes routeFlow { to { stroke-dashoffset: -100; } }

.netmap__node { position: absolute; translate: -50% -50%; text-align: center; }
.netmap__dot {
  width: 11px; height: 11px;
  margin-inline: auto;
  border-radius: 50%;
  background: var(--gold-400);
  box-shadow: 0 0 0 6px rgba(201, 162, 39, .08), 0 0 22px var(--gold-400);
  animation: dotPulse 2.4s ease-in-out infinite;
}
.netmap__node--origin .netmap__dot {
  width: 15px; height: 15px;
  background: #fff;
  box-shadow: 0 0 0 8px rgba(255, 255, 255, .10), 0 0 26px rgba(255, 255, 255, .8);
}
@keyframes dotPulse {
  0%, 100% { box-shadow: 0 0 0 5px rgba(201, 162, 39, .08), 0 0 14px var(--gold-400); }
  50%      { box-shadow: 0 0 0 13px rgba(201, 162, 39, .02), 0 0 30px var(--gold-400); }
}
.netmap__node b {
  display: block;
  margin-top: 9px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--sand-300);
  white-space: nowrap;
}
.netmap__node--origin b { color: #fff; }

/* روی گوشی نقشه بیش از حد فشرده می‌شود و برچسب‌ها روی هم می‌افتند؛
   کارت‌های منطقه‌ای درست پایین همین بخش همان اطلاعات را خواناتر می‌دهند،
   پس نقشه فقط پنهان می‌شود و چیزی تکرار نمی‌گردد.
   On phones the labels collide, and the region cards just below already carry
   the same information more legibly — so the map simply steps aside. */
@media (max-width: 700px) { .netmap { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .netmap__routes line, .netmap__dot { animation: none; }
  .netmap__routes line { stroke-dasharray: none; opacity: .5; }
}