@charset "UTF-8";
/* nazari.group — استایل مشترک
   جایگزین Tailwind CDN و FontAwesome شده است. */

@font-face {
  font-family: 'Anjoman';
  src: url('/fonts/Anjoman-VF.woff2') format('woff2-variations'),
       url('/fonts/Anjoman-VF.woff2') format('woff2'),
       url('/fonts/Anjoman-VF.woff')  format('woff');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  --green:      #8CC63F;
  --green-700:  #6FA32C;
  --green-900:  #4C7318;
  --green-50:   #F2F9E8;
  --green-100:  #E2F2CC;

  --ink:        #15181A;
  --ink-2:      #3D454B;
  --ink-3:      #5C666E;
  --ink-4:      #858F97;

  --line:       #E6E9EB;
  --line-2:     #F1F3F4;
  --surface:    #FFFFFF;
  --canvas:     #F4F6F4;

  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 26px;

  --shadow-sm: 0 1px 2px rgba(21,24,26,.05);
  --shadow-md: 0 6px 18px -6px rgba(21,24,26,.12);
  --shadow-lg: 0 24px 60px -20px rgba(21,24,26,.22);
  --shadow-green: 0 10px 26px -10px rgba(140,198,63,.65);
}

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

/* استایل‌های نویسنده بر [hidden] پیش‌فرض مرورگر غلبه می‌کنند،
   پس صریح می‌نویسیم تا hidden همیشه کار کند. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  min-height: 100vh;
  background: var(--canvas);
  color: var(--ink);
  font-family: 'Anjoman', system-ui, 'Segoe UI', Tahoma, sans-serif;
  font-feature-settings: "ss05";
  font-variation-settings: "slnt" 0;
  font-size: 15px;
  line-height: 1.75;
  text-rendering: optimizeLegibility;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 14px 28px;
}

/* پترن پس‌زمینه */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(var(--green) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: .055;
}
body::after {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 280px;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(140,198,63,.10), transparent);
}

a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }

/* روی موبایل hover وجود ندارد، پس همان بازخورد را به لمس می‌دهیم */
@media (hover: none) {
  .card:active, .hero-card:active, .btn:active, .tile:active,
  .alt-btn:active, .branch:active, .filecard:active, .big-call:active {
    transform: scale(.975);
    transition: transform .09s ease;
  }
  .card:active { border-color: var(--green); box-shadow: var(--shadow-md); }
  .card:active .card-ic { background: var(--green); color: #fff; }
  .card:active .card-go { color: var(--green); opacity: 1; }
  .card-wa:active { border-color: #25D366; }
  .card-wa:active .card-ic { background: #25D366; color: #fff; }
  .btn:active { border-color: var(--green); color: var(--green-700); }
  .btn-wa:active { border-color: #25D366; color: #17894A; background: #F3FCF6; }
  .tile:active { background: #fff; border-color: var(--green); color: var(--green-700); }
  .tile:active svg { color: var(--green); }
  .tile-ig:active { border-color: #C13584; color: #C13584; }
  .tile-ig:active svg { color: #C13584; }
  .alt-tg:active { border-color: #2AABEE; color: #1F8BC4; }
  .alt-wa:active { border-color: #25D366; color: #17894A; }
  .branch:active { border-color: var(--green); box-shadow: var(--shadow-md); }
  .fbtn:active { background: var(--green-50); }
}
p  { margin: 0; }
h1, h2, h3 { margin: 0; line-height: 1.5; font-weight: 800; }

.ic { width: 20px; height: 20px; flex: 0 0 auto; }
.ic-lg { width: 24px; height: 24px; flex: 0 0 auto; }
.ic-sm { width: 17px; height: 17px; flex: 0 0 auto; }

/* ---------- پیش‌بارگذار ---------- */
/* زمینه عمداً روشن و هم‌رنگ خود صفحه است. نسخه قبلی مشکی بود و لحظه
   محو شدن، پرش کنتراست می‌داد. حالا انتقال عملاً دیده نمی‌شود.
   محو شدن با انیمیشن CSS است، پس اگر جاوااسکریپت اجرا نشود هم صفحه قفل نمی‌ماند. */
#pre {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--canvas);
  display: grid;
  place-items: center;
  animation: preOut .45s cubic-bezier(.4,0,.2,1) 2.2s forwards;
}
#pre.done { animation: preOut .4s cubic-bezier(.4,0,.2,1) forwards; }

@keyframes preOut {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

#pre::before {
  content: "";
  position: absolute;
  width: 460px; height: 460px;
  background: radial-gradient(circle, rgba(140,198,63,.16), transparent 68%);
  pointer-events: none;
}

.pre-box { display: flex; flex-direction: column; align-items: center; gap: 20px; position: relative; }

.pre-box .logo {
  width: 160px; height: auto;
  animation: preLogo .8s cubic-bezier(.2,.8,.2,1) both;
}

@keyframes preLogo {
  from { opacity: 0; transform: translateY(8px) scale(.95); }
  to   { opacity: 1; transform: none; }
}

.pre-rail {
  width: 120px; height: 3px;
  background: var(--line);
  border-radius: 99px;
  overflow: hidden;
  position: relative;
  animation: preLogo .8s cubic-bezier(.2,.8,.2,1) .08s both;
}
.pre-rail::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, var(--green), transparent);
  transform: translateX(-100%);
  animation: preSweep 1.05s ease-in-out infinite;
}
@keyframes preSweep { to { transform: translateX(100%); } }

@media (prefers-reduced-motion: reduce) {
  #pre { animation: preOut .2s linear forwards; }
  .pre-box .logo, .pre-rail, .pre-rail::after { animation: none; }
}

/* ---------- نشان تاریخ به‌روزرسانی ---------- */
.updated {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: var(--green-50);
  border: 1px solid var(--green-100);
  border-radius: var(--r-md);
  padding: 11px 14px;
  margin-bottom: 2px;
}
.updated svg { color: var(--green-700); }
.updated .u-k { font-size: 11.5px; color: var(--green-900); font-weight: 700; opacity: .85; }
.updated .u-v { font-size: 13px; color: var(--green-900); font-weight: 800; }

/* نسخه هشداردهنده وقتی فایل قدیمی شده */
.updated.stale { background: #FFF7ED; border-color: #FED7AA; }
.updated.stale svg { color: #C2651A; }
.updated.stale .u-k, .updated.stale .u-v { color: #9A4A14; }

/* ---------- قاب اصلی ---------- */
.shell {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 460px;
  background: var(--surface);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  overflow: clip;
  border: 1px solid rgba(255,255,255,.7);
}

/* ---------- هدر برند ---------- */
.brand {
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  padding: 30px 24px 26px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.brand::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: linear-gradient(90deg, var(--green-900), var(--green), var(--green-900));
}
.brand-glow {
  position: absolute;
  width: 240px; height: 240px;
  top: -140px; left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(140,198,63,.30), transparent 68%);
  pointer-events: none;
}
.brand svg.logo { width: 156px; height: auto; display: block; margin: 0 auto 16px; }
.brand svg.logo path[fill="#1A1A1A"] { fill: #FFFFFF; }
/* فقط برای صفحه‌خوان و گوگل، نه برای چشم.
   از display:none استفاده نمی‌کنیم چون صفحه‌خوان آن را هم نادیده می‌گیرد. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.brand-h1 {
  color: #fff;
  font-size: 23px;
  font-weight: 800;
  margin-bottom: 9px;
}
.brand-tag {
  color: #C8CFD4;
  font-size: 13.5px;
  line-height: 1.95;
  max-width: 300px;
  margin: 0 auto;
}
.brand-en {
  display: block;
  margin-top: 8px;
  color: var(--green);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  direction: ltr;
}

/* ---------- سر چسبان ---------- */
/* نوار بالا و ناوبری با هم یک بلوک چسبان‌اند، تا لازم نباشد
   ارتفاع یکی را دستی در top دیگری بنویسیم. */
.stickyhead {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(12px);
}
.stickyhead .topbar,
.stickyhead .mainnav { position: static; background: transparent; backdrop-filter: none; }
.stickyhead .topbar { border-bottom: 1px solid var(--line-2); }

/* ---------- هدر صفحات داخلی ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
}
.topbar-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ink-3);
  font-size: 13px;
  font-weight: 700;
  padding: 6px 10px 6px 6px;
  border-radius: 999px;
  transition: background .18s, color .18s;
}
.topbar-back:hover { background: var(--green-50); color: var(--green-700); }
.topbar svg.logo { width: 112px; height: auto; display: block; }

/* ---------- ناوبری اصلی ---------- */
/* زیر هدر می‌چسبد و همیشه دیده می‌شود. پنج بخش است، پس پنهان کردنش
   پشت یک دکمه همبرگر فقط یک کلیک اضافه می‌کرد بدون هیچ سودی. */
.mainnav {
  position: sticky;
  top: 0;
  z-index: 18;
  display: flex;
  gap: 4px;
  padding: 9px 12px;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.mainnav::-webkit-scrollbar { display: none; }

.nav-i {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 10px 9px;
  border-radius: 13px;
  color: var(--ink-4);
  font-size: 11.5px;
  font-weight: 800;
  white-space: nowrap;
  position: relative;
  transition: color .2s ease, background .2s ease;
  /* ورود پلکانی، تأخیر هر آیتم در HTML با --i تعیین می‌شود */
  animation: navIn .45s cubic-bezier(.2,.8,.2,1) both;
  animation-delay: calc(var(--i, 0) * 55ms + 60ms);
}
@keyframes navIn {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}

.nav-i svg {
  width: 19px; height: 19px;
  transition: transform .25s cubic-bezier(.2,.9,.3,1.4);
}
.nav-i:hover { color: var(--green-700); background: var(--green-50); }
.nav-i:hover svg { transform: translateY(-2px) scale(1.06); }

.nav-i.on { color: var(--green-900); background: var(--green-50); }
.nav-i.on svg { transform: translateY(-1px); }

/* شاخص صفحه فعال، از وسط باز می‌شود */
.nav-i::after {
  content: "";
  position: absolute;
  bottom: 3px; left: 50%;
  height: 2.5px;
  width: 0;
  background: var(--green);
  border-radius: 99px;
  transform: translateX(-50%);
  transition: width .28s cubic-bezier(.2,.9,.3,1.2);
}
.nav-i.on::after {
  width: 18px;
  animation: navBar .5s cubic-bezier(.2,.9,.3,1.2) both;
  animation-delay: calc(var(--i, 0) * 55ms + 240ms);
}
@keyframes navBar {
  from { width: 0; }
  to   { width: 18px; }
}
.nav-i:not(.on):hover::after { width: 12px; background: var(--green-100); }

@media (prefers-reduced-motion: reduce) {
  .nav-i, .nav-i.on::after { animation: none; }
  .nav-i svg { transition: none; }
}
@media (hover: none) {
  .nav-i:active { background: var(--green-50); color: var(--green-700); }
}
@media (max-width: 380px) {
  .nav-i { font-size: 10.5px; padding: 7px 7px 6px; }
  .nav-i svg { width: 18px; height: 18px; }
}

/* ---------- بدنه ---------- */
.body { padding: 22px 18px 26px; display: flex; flex-direction: column; gap: 14px; }
.body-tight { gap: 12px; }

.section-label {
  display: flex;
  align-items: center;
  gap: 9px;
  /* بالای عنوان فاصله بیشتر تا بخش‌ها از هم جدا دیده شوند،
     پایینش کمتر تا عنوان به محتوای خودش بچسبد */
  margin: 14px 2px -2px;
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 800;
}
.section-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* ---------- کارت اصلی سبز ---------- */
.hero-card {
  display: block;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--green) 0%, var(--green-700) 100%);
  color: #fff;
  border-radius: var(--r-lg);
  padding: 19px 19px 17px;
  box-shadow: var(--shadow-green);
  transition: transform .2s ease, box-shadow .2s ease;
}
.hero-card:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -12px rgba(140,198,63,.78); }
.hero-card::before {
  content: "";
  position: absolute;
  width: 190px; height: 190px;
  top: -96px; left: -46px;
  background: rgba(255,255,255,.14);
  border-radius: 50%;
}
.hero-head { display: flex; align-items: center; gap: 13px; position: relative; }
.hero-ic {
  width: 46px; height: 46px;
  flex: 0 0 auto;
  border-radius: 14px;
  background: rgba(255,255,255,.22);
  display: grid;
  place-items: center;
}
.hero-ic svg { width: 24px; height: 24px; }
.hero-head > span:last-child { min-width: 0; }
.hero-title { display: block; font-size: 17px; font-weight: 800; }
.hero-sub { display: block; font-size: 12.5px; color: rgba(255,255,255,.86); line-height: 1.7; margin-top: 1px; }
/* فلش کارت فشرده صفحه اصلی، وقتی ردیف چیپ‌ها را ندارد */
.hero-go {
  margin-inline-start: auto;
  flex: 0 0 auto;
  color: rgba(255,255,255,.7);
  display: grid;
  place-items: center;
  transition: color .18s, transform .18s;
}
.hero-card:hover .hero-go { color: #fff; transform: translateX(3px); }

.hero-chips {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid rgba(255,255,255,.25);
}
.chip {
  font-size: 11.5px;
  font-weight: 700;
  background: rgba(255,255,255,.18);
  border-radius: 999px;
  padding: 3px 11px;
}

/* ---------- کارت‌های معمولی ---------- */
.card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px 16px;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.card:hover {
  border-color: var(--green);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.card-main { display: flex; align-items: center; gap: 13px; min-width: 0; }
.card-ic {
  width: 42px; height: 42px;
  flex: 0 0 auto;
  border-radius: 13px;
  background: var(--green-50);
  color: var(--green-700);
  display: grid;
  place-items: center;
  transition: background .18s, color .18s;
}
.card:hover .card-ic { background: var(--green); color: #fff; }
.card-txt { min-width: 0; }
.card-title { font-size: 14.5px; font-weight: 800; display: block; }
.card-desc {
  font-size: 11.5px;
  color: var(--ink-3);
  line-height: 1.7;
  display: block;
  margin-top: 1px;
}
/* نشانی دامنه داخل کارت، همیشه چپ‌به‌راست تا نقطه‌ها جابه‌جا نشوند */
.card-desc.dom {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: right;
  font-weight: 700;
  letter-spacing: 0;
}
.card-go { color: var(--ink-4); opacity: .55; transition: color .18s, opacity .18s; }
.card:hover .card-go { color: var(--green); opacity: 1; }
.card-side { font-size: 13px; font-weight: 800; color: var(--ink-4); direction: ltr; }
.card:hover .card-side { color: var(--green-700); }

/* کارت اینستاگرام.
   گرادیان کامل برند اینستاگرام روی تمام کارت، در کنار پالت سبز سایت
   زیادی بلند بود. حالا کارت مثل بقیه سفید است و گرادیان فقط روی آیکون
   نشسته؛ هم برند خوانده می‌شود هم با صفحه هم‌خوان است. همین کاری است
   که برای کارت واتساپ هم کرده‌ایم. */
.card-ig .card-ic {
  background: linear-gradient(135deg, #FEDA75 0%, #D62976 52%, #962FBF 100%);
  color: #fff;
}
.card-ig:hover { border-color: #D62976; }
.card-ig:hover .card-ic {
  background: linear-gradient(135deg, #FEDA75 0%, #D62976 52%, #962FBF 100%);
  color: #fff;
  filter: saturate(1.1);
}
.card-ig:hover .card-go { color: #D62976; }
.card-ig .card-side,
.card-ig:hover .card-side { color: #D62976; }
@media (hover: none) {
  .card-ig:active { border-color: #D62976; }
}

/* کارت درخواست نمایندگی، کمی متمایز از بقیه کارت‌ها */
.card-lead {
  background: linear-gradient(135deg, #FBFDF7 0%, #F2F9E8 100%);
  border-color: var(--green-100);
}
.card-lead .card-ic { background: #fff; }
.card-lead:hover { border-color: var(--green); }

/* حالت واتساپ */
.card-wa .card-ic { background: #E8F7EC; color: #1EA955; }
.card-wa:hover { border-color: #25D366; }
.card-wa:hover .card-ic { background: #25D366; color: #fff; }
.card-wa:hover .card-go { color: #25D366; }

/* حالت تلگرام */
.card-tg {
  background: linear-gradient(135deg, #2AABEE 0%, #1F8BC4 100%);
  border-color: transparent;
  color: #fff;
  align-items: flex-start;
  box-shadow: 0 10px 26px -12px rgba(42,171,238,.75);
}
.card-tg:hover { border-color: transparent; box-shadow: 0 14px 30px -12px rgba(42,171,238,.85); }
.card-tg .card-ic { background: rgba(255,255,255,.2); color: #fff; }
.card-tg:hover .card-ic { background: rgba(255,255,255,.3); color: #fff; }
.card-tg .card-desc { color: rgba(255,255,255,.88); }
.card-tg .card-go { color: rgba(255,255,255,.6); }
.card-tg:hover .card-go { color: #fff; }
.card-tg .card-main { align-items: flex-start; }
.card-tg .card-ic { margin-top: 2px; }

/* ---------- حالت در حال آماده‌سازی دانلود ---------- */
.card.is-busy, .hero-card.is-busy { pointer-events: none; }
.card.is-busy .card-go > svg,
.hero-card.is-busy .hero-ic > svg { display: none; }

/* span آیکون ذاتاً عرض ندارد، پس برای اسپینر جعبه می‌سازیم */
.card.is-busy .card-go {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  opacity: 1;
}

.spin {
  width: 19px; height: 19px;
  flex: 0 0 auto;
  border: 2.5px solid var(--green-100);
  border-top-color: var(--green);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
.hero-card .spin { border-color: rgba(255,255,255,.35); border-top-color: #fff; }
@keyframes spin { to { transform: rotate(360deg); } }

.dl-state {
  display: block;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--green-700);
  margin-top: 3px;
}
.hero-card .dl-state { color: rgba(255,255,255,.95); }

/* ---------- نشان‌ها ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 7px;
  background: var(--green-50);
  color: var(--green-900);
  border: 1px solid var(--green-100);
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 11.5px;
  font-weight: 800;
}
.badge-live { background: #fff; color: var(--green-900); }
.badge-size {
  background: var(--canvas);
  color: var(--ink-3);
  border-color: var(--line);
  font-weight: 700;
}
.dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #E5484D;
  position: relative;
  flex: 0 0 auto;
}
.dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #E5484D;
  animation: ping 2.4s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes ping { 75%, 100% { transform: scale(2.4); opacity: 0; } }

.pill-online {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #E8F7EC;
  color: #17894A;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 800;
  flex: 0 0 auto;
}
.pill-online .dot { background: #25D366; }
.pill-online .dot::after { background: #25D366; }

/* ---------- نوار اطلاع ---------- */
.note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border-radius: var(--r-sm);
  padding: 11px 13px;
  font-size: 11.5px;
  line-height: 1.9;
}
.note svg { margin-top: 3px; }
.note-info  { background: var(--canvas); border: 1px solid var(--line); color: var(--ink-2); }
.note-info  svg { color: var(--green-700); }
.note-alert { background: #FEF2F2; border: 1px solid #FBD5D5; color: #9B2C2C; }
.note-alert svg { color: #DC2626; }

/* ---------- راه‌های جایگزین دریافت فایل ---------- */
.alt {
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  background: var(--canvas);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.alt-head { font-size: 12.5px; font-weight: 800; color: var(--ink); line-height: 1.8; }
.alt-head span { display: block; font-weight: 500; color: var(--ink-3); font-size: 11.5px; margin-top: 2px; }
.alt-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  padding: 11px 13px;
  font-size: 12.5px;
  font-weight: 800;
  transition: border-color .18s, color .18s;
}
.alt-btn svg { flex: 0 0 auto; }
.alt-tg svg { color: #2AABEE; }
.alt-tg:hover { border-color: #2AABEE; color: #1F8BC4; }
.alt-wa svg { color: #25D366; }
.alt-wa:hover { border-color: #25D366; color: #17894A; }

/* ---------- گرید دوتایی ---------- */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 2px; }
.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: var(--canvas);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  padding: 15px 10px;
  font-size: 12px;
  font-weight: 800;
  color: var(--ink-2);
  transition: border-color .18s, background .18s, color .18s;
}
.tile svg { color: var(--ink-4); transition: color .18s; }
.tile:hover { background: #fff; border-color: var(--green); color: var(--green-700); }
.tile:hover svg { color: var(--green); }
.tile-ig:hover { border-color: #C13584; color: #C13584; }
.tile-ig:hover svg { color: #C13584; }

/* ---------- بلوک ارتباط ---------- */
/* قبلاً پنج دکمه تمام‌عرض پشت سر هم بود که دیوار یکنواخت می‌ساخت.
   حالا یک کنش اصلی و چهار کنش فرعی در شبکه، با سلسله‌مراتب روشن. */
.contact {
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.contact-wa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #fff;
  border: 1.5px solid #BDEBCC;
  border-radius: var(--r-md);
  padding: 13px 15px;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.contact-wa:hover { border-color: #25D366; box-shadow: var(--shadow-md); transform: translateY(-1px); }
.contact-wa .wa-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.contact-wa .wa-ic {
  width: 40px; height: 40px; flex: 0 0 auto;
  background: #E8F7EC; color: #1EA955;
  border-radius: 13px; display: grid; place-items: center;
  transition: background .18s, color .18s;
}
.contact-wa:hover .wa-ic { background: #25D366; color: #fff; }
.contact-wa .wa-t { font-size: 14px; font-weight: 800; display: block; }
.contact-wa .wa-s { font-size: 11.5px; color: var(--ink-3); display: block; margin-top: 1px; }

.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.ctile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px 8px;
  text-align: center;
  transition: border-color .18s, color .18s, transform .18s;
}
.ctile:hover { border-color: var(--green); color: var(--green-700); transform: translateY(-1px); }
.ctile svg { color: var(--ink-4); transition: color .18s; }
.ctile:hover svg { color: var(--green); }
.ctile b { font-size: 12.5px; font-weight: 800; display: block; }
.ctile i {
  font-style: normal; font-size: 11.5px; color: var(--ink-4);
  direction: ltr; unicode-bidi: isolate; display: block; margin-top: -3px;
}
.ctile:hover i { color: var(--green-700); }
.ctile-ig:hover { border-color: #C13584; color: #C13584; }
.ctile-ig:hover svg { color: #C13584; }

@media (hover: none) {
  .contact-wa:active { transform: scale(.975); border-color: #25D366; }
  .contact-wa:active .wa-ic { background: #25D366; color: #fff; }
  .ctile:active { transform: scale(.975); border-color: var(--green); color: var(--green-700); }
  .ctile:active svg { color: var(--green); }
  .ctile-ig:active { border-color: #C13584; color: #C13584; }
  .ctile-ig:active svg { color: #C13584; }
}

/* ---------- جعبه اطلاعات ---------- */
.info {
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px;
  margin-top: 2px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.info-row { display: flex; gap: 12px; align-items: flex-start; }
.info-row svg { color: var(--green-700); margin-top: 4px; }
.info-k { display: block; font-weight: 800; font-size: 12.5px; margin-bottom: 2px; }
.info-v { font-size: 12.5px; color: var(--ink-3); line-height: 1.95; }
.info-sep { height: 1px; background: var(--line); }

/* ---------- عنوان صفحه ---------- */
.page-head { text-align: center; padding: 4px 4px 2px; }
.page-head h1 { font-size: 20px; margin-bottom: 7px; }
.page-head p  { font-size: 13px; color: var(--ink-3); line-height: 1.95; }
.tagpill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--green-50);
  border: 1px solid var(--green-100);
  color: var(--green-900);
  border-radius: 999px;
  padding: 5px 13px;
  font-size: 11.5px;
  font-weight: 800;
  margin-bottom: 13px;
}

/* ---------- دکمه‌های فایل ---------- */
.filecard {
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color .18s, box-shadow .18s;
}
.filecard:hover { border-color: var(--green); box-shadow: var(--shadow-md); }
.filecard-top {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 15px 12px;
}
.filecard-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line-2);
}
.fa-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 8px;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--ink-2);
  background: #fff;
  transition: background .16s, color .16s;
}
.fa-btn:first-child { border-left: 1px solid var(--line-2); }
.fa-btn:hover { background: var(--green-50); color: var(--green-900); }
.fa-btn svg { width: 17px; height: 17px; }

/* ---------- دکمه تمام‌عرض ---------- */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px 16px;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--ink-2);
  background: #fff;
  transition: border-color .18s, color .18s, background .18s;
}
.btn + .btn { margin-top: 1px; }
.btn:hover { border-color: var(--green); color: var(--green-700); }
.btn-wa:hover { border-color: #25D366; color: #17894A; background: #F3FCF6; }

.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* ---------- فوتر ---------- */
.foot {
  border-radius: 0 0 var(--r-xl) var(--r-xl);
  text-align: center;
  padding: 16px 14px;
  border-top: 1px solid var(--line-2);
  background: #FBFCFB;
}
.foot-up {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 11.5px;
  color: var(--ink-3);
  margin-bottom: 9px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line-2);
}
.foot-up svg { color: var(--green-700); }
.foot-up b { color: var(--ink-2); font-weight: 800; }

.foot a { font-size: 11.5px; color: var(--ink-4); transition: color .18s; }
.foot a:hover { color: var(--green-700); }
.foot b { font-weight: 800; }

.muted-note {
  font-size: 11.5px;
  color: var(--ink-4);
  text-align: center;
  line-height: 1.9;
  padding: 0 6px;
}

/* ---------- جلوگیری از زوم خودکار موبایل ----------
   سافاری iOS هر وقت روی فیلدی با اندازه فونت کمتر از ۱۶ پیکسل کلیک شود
   صفحه را زوم می‌کند و دیگر هم خودش برنمی‌گرداند. راه درستش این است که
   اندازه فونت فیلدها روی موبایل ۱۶ باشد، نه این‌که با user-scalable=no
   زوم دستی کاربر را هم بگیریم؛ آن کار دسترس‌پذیری را خراب می‌کند.

   اینجا یک قانون سراسری گذاشته‌ایم تا هر فرمی که بعداً اضافه شود هم
   خودکار پوشش داده شود. important لازم است چون اغلب فیلدها اندازه را با
   خلاصه‌نویسی font تعریف کرده‌اند. */
@media (max-width: 900px) {
  input:not([type=checkbox]):not([type=radio]):not([type=file]),
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* ---------- واکنش‌گرایی ---------- */
@media (max-width: 380px) {
  body { padding: 12px 10px 22px; }
  .body { padding: 18px 14px 20px; }
  .card { padding: 13px 13px; }
  .card-ic { width: 38px; height: 38px; border-radius: 11px; }
  .brand { padding: 26px 18px 22px; }
  .brand svg.logo { width: 134px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .card:hover, .hero-card:hover { transform: none; }
}