/* ============================================================
   DISIPHEE — Global Brand Stylesheet
   Flat Minimal / Creator+Caregiver / Dark-Yellow palette
   ============================================================ */

@font-face {
  font-family: 'Dana';
  src: url('../font/Dana-Thin.woff2') format('woff2');
  font-weight: 100;
  font-display: swap;
}
@font-face {
  font-family: 'Dana';
  src: url('../font/Dana-Light.woff2') format('woff2');
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'Dana';
  src: url('../font/Dana-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Dana';
  src: url('../font/Dana-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Dana';
  src: url('../font/Dana-DemiBold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Dana';
  src: url('../font/Dana-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Dana';
  src: url('../font/Dana-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-display: swap;
}

:root{
  /* --- رنگ‌های برند (منبع واحد حقیقت) --- */
  --dzf-dark:      #0a0a0a;
  --dzf-navy:      #21242A;
  --dzf-yellow:    #FCC101;
  --dzf-grey-bg:   #E2E3E7;
  --dzf-white:     #FFFFFF;
  --dzf-stroke:    #00000029;

  /* متن ثانویه — مشتق از Primary، پس از پالت خارج نمی‌شود */
  --dzf-muted:     rgba(33,36,42,.72);
  --dzf-muted-2:   rgba(33,36,42,.45);
  --dzf-muted-3:   rgba(33,36,42,.35);

  /* رنگ‌های وضعیت (فقط برای پیام موفقیت/خطای فرم) */
  --dzf-success:    #1f9d55;
  --dzf-success-bg: #e6f7ec;
  --dzf-error:      #c94a4a;
  --dzf-error-bg:   #fdeaea;

  /* --- نام‌های کوتاه: پل سازگاری با CSS صفحات --- */
  /* CSS صفحات از --primary/--accent/... استفاده می‌کند. حالا به‌جای اینکه
     هر سکشن دوباره تعریفشان کند، همه از همین‌جا ارث می‌برند. */
  --dark:    var(--dzf-dark);
  --primary: var(--dzf-navy);
  --accent:  var(--dzf-yellow);
  --bg:      var(--dzf-grey-bg);
  --white:   var(--dzf-white);
  --stroke:  var(--dzf-stroke);

  /* --- فاصله‌گذاری (پایه‌ی ۸px، دقیقاً مطابق برند بوک) --- */
  --dzf-space-xs:  8px;
  --dzf-space-sm:  16px;
  --dzf-space-md:  24px;
  --dzf-space-lg:  32px;
  --dzf-space-xl:  48px;
  --dzf-space-xxl: 72px;

  /* فاصله‌ی هرو از هدر (تصویر بیرون‌زده روی این حساب می‌شود) */
  --dzf-hero-gap:  32px;

  /* --- گردی --- */
  --dzf-radius-card: 25px;
  --dzf-radius-chip: 14px;
  --dzf-radius-btn:  999px;   /* Pill کامل، طبق برند بوک */

  /* گاتر افقی واحد کل سایت — هدر، سکشن‌ها و فوتر همه از همین می‌خوانند */
  --dzf-gutter: 20px;

  /* --- عرض کانتینر (برند بوک: ۱۳۰۰px) --- */
  --dzf-container: 1300px;   /* عرض واحد کل سایت: هدر، هرو، سکشن‌ها، فوتر */

  /* --- تایپ --- */
  --dzf-font: 'Dana', Tahoma, Arial, sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--dzf-font);
  color:var(--dzf-dark);
  background:var(--dzf-grey-bg);
  direction:rtl;
  text-align:right;
  -webkit-font-smoothing:antialiased;
}

/* --- Scrollbar (brand-matched) --- */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--dzf-grey-bg); border-radius:10px; }
::-webkit-scrollbar-thumb{
  background:var(--dzf-muted-3);
  border-radius:10px;
  border:2px solid var(--dzf-grey-bg);
  background-clip:padding-box;
}
::-webkit-scrollbar-thumb:hover{ background:var(--dzf-muted); }
html{ scrollbar-color:var(--dzf-muted-3) var(--dzf-grey-bg); scrollbar-width:thin; }
img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }

.dzf-container{
  /* عرض محتوا دقیقاً ۱۳۰۰ می‌شود: ۱۳۰۰ + دو گاتر ۲۰ پیکسلی.
     بدون این calc، به‌خاطر box-sizing:border-box محتوا ۱۲۵۲ می‌ماند
     و با سکشن‌های صفحات هم‌لبه نمی‌شود. */
  max-width:calc(var(--dzf-container) + (var(--dzf-gutter) * 2));
  margin:0 auto;
  padding:0 var(--dzf-gutter);
}
.dzf-section{
  padding:var(--dzf-space-xxl) 0;
}

/* --- Buttons --- */
.dzf-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:var(--dzf-navy);
  color:var(--dzf-grey-bg);
  border:none;
  border-radius:var(--dzf-radius-btn);
  padding:14px 32px;
  font-family:var(--dzf-font);
  font-weight:600;
  font-size:15px;
  transition:background .25s ease, color .25s ease, transform .25s ease;
}
.dzf-btn:hover{
  background:var(--dzf-yellow);
  color:var(--dzf-navy);
  transform:translateY(-3px);
}
.dzf-btn--outline{
  background:transparent;
  color:var(--dzf-navy);
  border:1.5px solid var(--dzf-stroke);
}
.dzf-btn--outline:hover{
  background:var(--dzf-yellow);
  color:var(--dzf-navy);
  border-color:var(--dzf-yellow);
}

/* --- Cards --- */
.dzf-card{
  background:var(--dzf-white);
  border:1.5px solid var(--dzf-stroke);
  border-radius:var(--dzf-radius-card);
  padding:var(--dzf-space-md);
  transition:border-color .25s ease, transform .25s ease;
}
.dzf-card:hover{
  border-color:var(--dzf-navy);
}

/* --- Icon chips (4 brand icon types) --- */
.dzf-icon{
  width:52px; height:52px;
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.dzf-icon--yellow-bg{ background:var(--dzf-yellow); color:var(--dzf-navy); }
.dzf-icon--navy-bg{ background:var(--dzf-navy); color:var(--dzf-yellow); }
.dzf-icon--light-bg{ background:var(--dzf-grey-bg); color:var(--dzf-navy); }
.dzf-icon--navy-light{ background:var(--dzf-navy); color:var(--dzf-white); }

/* --- Utility --- */
.dzf-eyebrow{
  display:inline-block;
  font-size:13px;
  font-weight:700;
  letter-spacing:.03em;
  color:var(--dzf-navy);
  background:var(--dzf-yellow);
  padding:6px 16px;
  border-radius:20px;
  margin-bottom:var(--dzf-space-sm);
}
.dzf-h2{
  font-size:clamp(26px,4vw,40px);
  font-weight:800;
  line-height:1.3;
  margin:0 0 var(--dzf-space-sm);
}
.dzf-lead{
  font-size:17px;
  line-height:1.9;
  color:var(--dzf-muted);
  margin:0 0 var(--dzf-space-lg);
  max-width:640px;
}

@media (max-width:768px){
  .dzf-section{ padding:var(--dzf-space-xl) 0; }
}

/* ============================================================
   DISIPHEE — Site Header + Mobile Drawer
   جایگزین کامل بخش «Site Header» در style.css
   ============================================================ */

/* --- Skip link (دسترسی‌پذیری) --- */
.dzf-skip{
  position:absolute; inset-inline-start:-9999px; top:0; z-index:1000;
  background:var(--dzf-navy); color:var(--dzf-grey-bg);
  padding:10px 20px; border-radius:0 0 12px 12px;
  font-size:14px; font-weight:600;
}
.dzf-skip:focus{ inset-inline-start:24px; }

/* ============================================================
   Header
   ============================================================ */
.dzf-header{
  position:sticky; top:0; z-index:200;
  background:var(--dzf-white);   /* هم‌رنگ باند هرو، تا مرز دیده نشود */
  border-bottom:1px solid transparent;
  transform:translateY(0);
  transition:transform .32s cubic-bezier(.4,0,.2,1),
             background-color .25s ease,
             border-color .25s ease;
  will-change:transform;
}
/* وقتی کاربر پایین می‌رود، هدر جمع می‌شود */
.dzf-header.is-hidden{ transform:translateY(-100%); }
/* بعد از کمی اسکرول، خط جداکننده ظاهر می‌شود */
.dzf-header.is-stuck{
  border-bottom-color:var(--dzf-stroke);
}
/* وقتی منوی موبایل باز است هدر هرگز مخفی نمی‌شود */
.dzf-header.is-locked{ transform:translateY(0) !important; }

.dzf-header__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--dzf-space-md);
  height:76px;
}
.dzf-header__logo{ display:flex; align-items:center; flex-shrink:0; }
.dzf-header__logo img{ height:34px; width:auto; display:block; }

/* ============================================================
   Desktop nav — هاور: زیرخط زرد که از وسط باز می‌شود
   ============================================================ */
.dzf-nav__list{ display:flex; align-items:center; gap:4px; }

.dzf-nav__link{
  position:relative;
  display:inline-flex; align-items:center;
  padding:10px 16px;
  font-size:16.5px; font-weight:500;
  color:var(--dzf-navy);
  border-radius:999px;
  transition:color .25s ease, background-color .25s ease;
}
.dzf-nav__icon{ display:none; }   /* آیکون فقط در منوی موبایل */

.dzf-nav__link::after{
  content:"";
  position:absolute; bottom:4px; left:50%;
  width:0; height:2px;
  background:var(--dzf-yellow);
  border-radius:2px;
  transform:translateX(-50%);
  transition:width .28s cubic-bezier(.4,0,.2,1);
}
.dzf-nav__link:hover{ color:var(--dzf-dark); }
.dzf-nav__link:hover::after{ width:calc(100% - 32px); }

.dzf-nav__link.is-active{ font-weight:700; color:var(--dzf-dark); }
.dzf-nav__link.is-active::after{ width:calc(100% - 32px); }

.dzf-nav__link:focus-visible{
  outline:2px solid var(--dzf-yellow);
  outline-offset:2px;
}

/* ============================================================
   دکمه‌های هدر
   ============================================================ */
.dzf-header__actions{ display:flex; align-items:center; gap:12px; }

.dzf-hbtn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 24px;
  border-radius:999px;
  font-family:var(--dzf-font);
  font-size:15px; font-weight:600;
  line-height:1;
  white-space:nowrap;
  border:1.5px solid transparent;
  transition:background-color .25s ease, color .25s ease,
             border-color .25s ease, transform .25s ease;
}
.dzf-hbtn svg{ width:17px; height:17px; flex-shrink:0; }

.dzf-hbtn--solid{
  background:var(--dzf-navy) !important;
  color:var(--dzf-grey-bg) !important;
  border-color:var(--dzf-navy) !important;
}
.dzf-hbtn--solid:hover{
  background:var(--dzf-yellow) !important;
  color:var(--dzf-navy) !important;
  border-color:var(--dzf-yellow) !important;
  transform:translateY(-3px);
}

.dzf-hbtn--ghost{
  background:transparent !important;
  color:var(--dzf-navy) !important;
  border-color:var(--dzf-stroke) !important;
}
.dzf-hbtn--ghost:hover{
  background:var(--dzf-yellow) !important;
  color:var(--dzf-navy) !important;
  border-color:var(--dzf-yellow) !important;
  transform:translateY(-3px);
}

.dzf-hbtn:focus-visible{ outline:2px solid var(--dzf-navy); outline-offset:2px; }
.dzf-hbtn--block{ width:100%; padding:14px 24px; font-size:15px; }

/* ============================================================
   Burger
   ============================================================ */
.dzf-burger{
  display:none;
  flex-direction:column; justify-content:center; align-items:center; gap:4px;
  width:38px; height:38px;
  background:var(--dzf-white); border:1px solid var(--dzf-stroke);
  border-radius:999px;
  padding:0;
  transition:border-color .25s ease, background-color .25s ease;
}
.dzf-burger span{
  display:block; width:16px; height:1.8px;
  background:var(--dzf-navy); border-radius:2px;
  transition:transform .3s cubic-bezier(.4,0,.2,1), opacity .2s ease;
}
.dzf-burger:hover{ border-color:var(--dzf-navy); background:var(--dzf-yellow); }
.dzf-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(5.8px) rotate(45deg); }
.dzf-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.dzf-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5.8px) rotate(-45deg); }
.dzf-burger:focus-visible{ outline:2px solid var(--dzf-navy); outline-offset:2px; }

/* ============================================================
   Overlay + Drawer (منوی موبایل)
   ============================================================ */
.dzf-overlay{
  position:fixed; inset:0; z-index:300;
  background:rgba(10,10,10,.45);
  opacity:0;
  transition:opacity .3s ease;
}
.dzf-overlay.is-visible{ opacity:1; }

/* مهم: چون .dzf-drawer دارای display:flex است، خودِ attribute hidden
   بی‌اثر می‌شود. این دو خط باید قبل از بقیه بیایند تا کشو و overlay
   قبل از اجرای JS (و روی دسکتاپ) هیچ‌وقت دیده نشوند. */
.dzf-drawer[hidden],
.dzf-overlay[hidden]{ display:none !important; }

.dzf-drawer{
  position:fixed; top:0; bottom:0;
  right:0; left:auto;          /* کشو از سمت راست باز می‌شود */
  z-index:301;
  width:min(86vw, 360px);
  display:flex; flex-direction:column;
  background:var(--dzf-white);
  border-left:1px solid var(--dzf-stroke);
  transform:translateX(100%);  /* مثبت، چون کشو سمت راست صفحه است */
  transition:transform .34s cubic-bezier(.4,0,.2,1);
  /* اسکرول روی خودِ کشو نیست — فقط روی ناوبری میانی. این‌طور سربرگ و
     نوار دکمه‌ها همیشه سر جایشان می‌مانند. */
  overflow:hidden;
  overscroll-behavior:contain;
}
.dzf-drawer.is-open{ transform:translateX(0); }

/* لایه‌ی محافظ: در عرض دسکتاپ کشو هرگز نباید رندر شود */
@media (min-width:901px){
  .dzf-drawer,
  .dzf-overlay{ display:none !important; }
}

/* ---------- سربرگ ثابت ---------- */
.dzf-drawer__top{
  flex-shrink:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--dzf-space-md);
  border-bottom:1px solid var(--dzf-stroke);
}
.dzf-drawer__top img{ height:30px; width:auto; }
.dzf-drawer__close{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; flex-shrink:0;
  background:transparent; border:1.5px solid var(--dzf-stroke);
  border-radius:999px; color:var(--dzf-navy); cursor:pointer;
  transition:background-color .25s ease, border-color .25s ease, transform .25s ease;
}
.dzf-drawer__close svg{ width:18px; height:18px; }
.dzf-drawer__close:hover{
  background:var(--dzf-yellow); border-color:var(--dzf-yellow); transform:rotate(90deg);
}
.dzf-drawer__close:focus-visible{ outline:2px solid var(--dzf-yellow); outline-offset:2px; }

/* ---------- ناحیه‌ی اسکرول ---------- */
.dzf-drawer__nav{
  flex:1 1 auto; min-height:0;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding:var(--dzf-space-sm) var(--dzf-space-md);
  /* نوار اسکرول باریک، تا در کشوی ۳۶۰ پیکسلی جا نگیرد */
  scrollbar-width:thin;
}
.dzf-drawer__nav::-webkit-scrollbar{ width:4px; }
.dzf-drawer__nav::-webkit-scrollbar-thumb{ background:var(--dzf-stroke); border-radius:999px; }
.dzf-drawer__list{ display:flex; flex-direction:column; gap:4px; }

/* ---------- ردیف سطح اول (هم لینک، هم summary) ---------- */
.dzf-drawer__row{
  display:flex; align-items:center; gap:14px;
  width:100%;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid transparent;
  color:var(--dzf-navy);
  font-family:var(--dzf-font);
  font-size:16px; font-weight:600;
  cursor:pointer; list-style:none;
  transition:background-color .22s ease, border-color .22s ease, color .22s ease;
}
.dzf-drawer__row::-webkit-details-marker{ display:none; }
.dzf-drawer__row::marker{ content:""; }
.dzf-drawer__ico{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; flex-shrink:0;
  border-radius:12px;
  background:var(--dzf-grey-bg);
  color:var(--dzf-navy);
  transition:background-color .22s ease, color .22s ease;
}
.dzf-drawer__ico svg{ width:19px; height:19px; }
.dzf-drawer__label{ flex:1; min-width:0; }

/* دو شکل برای دو رفتار: کارت رو به پایین یعنی «باز می‌شود»،
   فلش یعنی «به صفحه می‌رود». قبلاً هر دو یک شکل بودند. */
.dzf-drawer__caret,
.dzf-drawer__go{ width:17px; height:17px; flex-shrink:0; opacity:.45; }
.dzf-drawer__caret{ transition:transform .3s cubic-bezier(.4,0,.2,1); }
.dzf-drawer__group[open] > .dzf-drawer__row .dzf-drawer__caret{ transform:rotate(180deg); opacity:.8; }

.dzf-drawer__row:hover,
.dzf-drawer__row:focus-visible{
  background:var(--dzf-grey-bg);
  border-color:var(--dzf-stroke);
  outline:none;
}
.dzf-drawer__row:focus-visible{ outline:2px solid var(--dzf-yellow); outline-offset:2px; }
.dzf-drawer__row:hover .dzf-drawer__ico{ background:var(--dzf-yellow); color:var(--dzf-navy); }

/* حالت فعال — حالا برای summary هم هست، نه فقط لینک ساده */
.dzf-drawer__row.is-active{
  background:var(--dzf-navy); color:var(--dzf-white);
  border-color:var(--dzf-navy); font-weight:700;
}
.dzf-drawer__row.is-active .dzf-drawer__ico{ background:var(--dzf-yellow); color:var(--dzf-navy); }
.dzf-drawer__row.is-active .dzf-drawer__caret,
.dzf-drawer__row.is-active .dzf-drawer__go{ opacity:.75; }
.dzf-drawer__row.is-active:hover{ background:var(--dzf-navy); }

/* ---------- آکاردئون ---------- */
.dzf-drawer__group{ display:flex; flex-direction:column; }
/* ارتفاع را header.js متحرک می‌کند؛ بدون جاوااسکریپت، details
   خودش باز و بسته می‌شود و این عنصر ارتفاع طبیعی می‌گیرد. */
.dzf-drawer__wrap{ overflow:hidden; transition:height .32s cubic-bezier(.4,0,.2,1); }

/* پنل زیرمنو یک کارت تمام‌عرض است، نه فهرست تورفته.
   تورفتگی ۵۲ پیکسلی قبلی لبه‌ی راست را ناهموار می‌کرد و
   دکمه‌ی پایین را به چپ می‌چسباند. */
.dzf-drawer__sub{
  display:flex; flex-direction:column; gap:2px;
  margin:6px 0 6px;
  padding:8px;
  background:var(--dzf-grey-bg);
  border:1px solid var(--dzf-stroke);
  border-radius:18px;
}
/* ورود پلکانی سطرها — فقط وقتی گروه باز است */
.dzf-drawer__group[open] .dzf-drawer__sub > *{
  animation:dzf-drawer-in .34s cubic-bezier(.22,.61,.36,1) both;
  animation-delay:calc(var(--i, 0) * 28ms);
}
@keyframes dzf-drawer-in{
  from{ opacity:0; transform:translateX(10px); }
  to  { opacity:1; transform:none; }
}

.dzf-drawer__lead{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 14px; margin-bottom:4px;
  background:var(--dzf-white);
  border:1px solid var(--dzf-stroke);
  border-radius:12px;
  font-size:13.5px; font-weight:700; color:var(--dzf-navy);
  transition:background-color .2s ease, color .2s ease, border-color .2s ease;
}
.dzf-drawer__lead svg{ width:15px; height:15px; flex-shrink:0; opacity:.55; }
.dzf-drawer__lead:hover{ background:var(--dzf-yellow); border-color:var(--dzf-yellow); }
.dzf-drawer__lead:focus-visible{ outline:2px solid var(--dzf-navy); outline-offset:2px; }

.dzf-drawer__subt{
  padding:12px 12px 6px;
  font-size:11px; font-weight:700; letter-spacing:.02em;
  color:var(--dzf-muted-2);
}

.dzf-drawer__sublink{
  display:flex; align-items:center; gap:11px;
  padding:9px 11px; border-radius:12px;
  border:1px solid transparent;
  transition:background-color .18s ease, border-color .18s ease;
}
.dzf-drawer__subico{
  display:flex; align-items:center; justify-content:center;
  width:32px; height:32px; flex-shrink:0;
  border-radius:10px;
  background:var(--dzf-white);
  border:1px solid var(--dzf-stroke);
  color:var(--dzf-navy);
  transition:background-color .18s ease, border-color .18s ease;
}
.dzf-drawer__subico svg{ width:16px; height:16px; }
.dzf-drawer__subtxt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.dzf-drawer__subtxt strong{
  display:flex; align-items:center; gap:6px;
  font-size:14px; font-weight:600; color:var(--dzf-navy); line-height:1.5;
}
.dzf-drawer__subtxt em{
  font-style:normal; font-size:11.5px; line-height:1.6;
  color:var(--dzf-muted-2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.dzf-drawer__sublink .dzf-drawer__go{ width:14px; height:14px; opacity:.3; }

.dzf-drawer__sublink:hover{ background:var(--dzf-white); border-color:var(--dzf-stroke); }
.dzf-drawer__sublink:hover .dzf-drawer__subico{ background:var(--dzf-yellow); border-color:var(--dzf-yellow); }
.dzf-drawer__sublink:focus-visible{ outline:2px solid var(--dzf-navy); outline-offset:-1px; }

/* زیرلینک صفحه‌ی جاری — قبلاً هیچ نشانه‌ای نداشت */
.dzf-drawer__sublink.is-active{
  background:var(--dzf-white); border-color:var(--dzf-navy);
}
.dzf-drawer__sublink.is-active .dzf-drawer__subico{
  background:var(--dzf-navy); border-color:var(--dzf-navy); color:var(--dzf-yellow);
}
.dzf-drawer__sublink.is-active .dzf-drawer__subtxt strong{ font-weight:700; }

/* «به‌زودی» — بدون opacity، تا کنتراست متن پایین نیاید */
.dzf-drawer__sublink.is-soon{ cursor:default; }
.dzf-drawer__sublink.is-soon .dzf-drawer__subico{ color:var(--dzf-muted-2); }
.dzf-drawer__sublink.is-soon .dzf-drawer__subtxt strong{ color:var(--dzf-muted); font-weight:600; }
.dzf-drawer__soon{
  display:inline-block; flex-shrink:0; font-style:normal;
  font-size:10px; font-weight:700; line-height:1;
  color:var(--dzf-muted);
  background:var(--dzf-white);
  border:1px solid var(--dzf-stroke);
  border-radius:999px; padding:3px 8px;
}

/* ---------- پنل کناری و نوار شروع، داخل کشو ---------- */
.dzf-drawer__promo,
.dzf-drawer__start{
  margin-top:8px; padding:16px;
  background:var(--dzf-white);
  border:1px solid var(--dzf-stroke);
  border-radius:14px;
}
.dzf-drawer__promo strong,
.dzf-drawer__starth strong{ display:block; font-size:14px; font-weight:700; color:var(--dzf-navy); }
.dzf-drawer__promo p{ margin:6px 0 14px; font-size:12px; line-height:1.85; color:var(--dzf-muted-2); }

.dzf-drawer__starth{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom:12px;
}
.dzf-drawer__starth span{
  display:inline-flex; align-items:center; gap:5px; flex-shrink:0;
  font-size:11px; font-weight:600; color:var(--dzf-muted-2);
}
.dzf-drawer__starth span svg{ width:13px; height:13px; }
.dzf-drawer__steps{
  counter-reset:dzfstep;
  display:flex; flex-direction:column; gap:9px; margin-bottom:14px;
}
.dzf-drawer__steps li{ display:flex; align-items:center; gap:10px; }
.dzf-drawer__steps i{
  counter-increment:dzfstep;
  display:flex; align-items:center; justify-content:center;
  width:20px; height:20px; flex-shrink:0;
  border-radius:999px; background:var(--dzf-grey-bg);
  font-style:normal; font-size:10px; font-weight:800; color:var(--dzf-navy);
}
.dzf-drawer__steps i::before{ content:counter(dzfstep); }
.dzf-drawer__steps span{ font-size:12.5px; color:var(--dzf-muted); }

.dzf-drawer__promobtn{
  display:flex; align-items:center; justify-content:center;
  width:100%; padding:11px 18px;
  border:1px solid var(--dzf-stroke); border-radius:999px;
  background:transparent;
  font-family:var(--dzf-font); font-size:13px; font-weight:600;
  color:var(--dzf-navy); cursor:pointer;
  transition:background-color .2s ease, border-color .2s ease, color .2s ease;
}
.dzf-drawer__promobtn:hover{ background:var(--dzf-yellow); border-color:var(--dzf-yellow); }
.dzf-drawer__promobtn:focus-visible{ outline:2px solid var(--dzf-navy); outline-offset:2px; }
.dzf-drawer__promobtn--solid{
  background:var(--dzf-navy); border-color:var(--dzf-navy); color:var(--dzf-grey-bg);
}
.dzf-drawer__promobtn--solid:hover{
  background:var(--dzf-yellow); border-color:var(--dzf-yellow); color:var(--dzf-navy);
}

/* ---------- نوار ثابت پایین ---------- */
.dzf-drawer__actions{
  flex-shrink:0;
  display:flex; flex-direction:column; gap:10px;
  padding:var(--dzf-space-md);
  border-top:1px solid var(--dzf-stroke);
  background:var(--dzf-white);
  /* روی آیفون، نوار خانه‌ی سیستم روی دکمه‌ها نیفتد */
  padding-bottom:calc(var(--dzf-space-md) + env(safe-area-inset-bottom, 0px));
}
.dzf-drawer__foot{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding-top:4px; font-size:12.5px;
}
.dzf-drawer__foot a{ color:var(--dzf-navy); opacity:.75; }
.dzf-drawer__foot a:hover{ opacity:1; }

/* وقتی منو باز است، اسکرول صفحه قفل می‌شود.
   روی هر دو عنصر، چون سافاری iOS ویوپورت را اسکرول می‌کند نه body.
   حتی این هم در iOS کافی نیست؛ بخش دومِ قفل یک نگهبان touchmove در
   header.js است. راه رایج دیگر (position:fixed روی body) اینجا جواب
   نمی‌دهد: هدر sticky است و با جابه‌جا شدن body از بالای صفحه بیرون
   می‌پرد. */
html.dzf-noscroll,
body.dzf-noscroll{ overflow:hidden; }

/* ============================================================
   Breakpoints
   ============================================================ */
@media (max-width:1024px){
  .dzf-nav__link{ padding:10px 12px; font-size:15.5px; }
  .dzf-nav__link:hover::after,
  .dzf-nav__link.is-active::after{ width:calc(100% - 24px); }
  .dzf-hbtn{ padding:10px 18px; }
}

@media (max-width:900px){
  .dzf-header__inner{ height:64px; }
  .dzf-header__logo img{ height:29px; }
  .dzf-nav{ display:none; }
  .dzf-header__actions .dzf-hbtn{ display:none; }
  .dzf-burger{ display:flex; }
}

@media (max-width:480px){
  .dzf-header__logo img{ height:26px; }
  .dzf-drawer{ width:min(92vw, 320px); }
}

/* ============================================================
   احترام به تنظیم «کاهش انیمیشن» سیستم‌عامل
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .dzf-header,
  .dzf-drawer,
  .dzf-overlay,
  .dzf-nav__link::after,
  .dzf-burger span{ transition-duration:.01ms !important; }
  .dzf-hbtn:hover{ transform:none; }
}

@media (max-width:640px){
  :root{ --dzf-gutter: 16px; }
}


/* ============================================================
   Entrance animation — فقط بخش هرو
   کاملاً CSS خالص: به جاوااسکریپت وابسته نیست، پس هیچ‌وقت
   محتوایی مخفی نمی‌ماند. حالت پایانی همیشه نمایان است.
   ============================================================ */
@keyframes dzf-rise{
  from{ opacity:0; transform:translateY(22px); }
  to  { opacity:1; transform:none; }
}
@keyframes dzf-media{
  from{ opacity:0; transform:translateY(16px) scale(.985); }
  to  { opacity:1; transform:none; }
}
/* فقط شفافیت — چون فرم پشت تصویر با transform وسط‌چین شده
   و هر انیمیشنِ transform آن وسط‌چینی را از بین می‌برد. */
@keyframes dzf-fade{
  from{ opacity:0; }
  to  { opacity:1; }
}

@media (prefers-reduced-motion: no-preference){
  .hero-eyebrow,
  .hero-title,
  .hero-desc,
  .hero-btn{
    animation:dzf-rise .72s cubic-bezier(.22,.61,.36,1) both;
  }
  .hero-eyebrow{ animation-delay:.04s; }
  .hero-title  { animation-delay:.12s; }
  .hero-desc   { animation-delay:.20s; }
  .hero-btn    { animation-delay:.28s; }

  /* تصویر هرو معمولاً عنصر LCP است: بدون تأخیر و کوتاه‌تر */
  .hero-image{
    animation:dzf-media .62s cubic-bezier(.22,.61,.36,1) both;
  }
  .hero-box::before{
    animation:dzf-fade .9s cubic-bezier(.22,.61,.36,1) both;
    animation-delay:.06s;
  }
}


/* ============================================================
   مگامنو
   ============================================================ */
/* هر دو static می‌مانند: مگامنو باید نسبت به .dzf-header__inner جای بگیرد،
   نه نسبت به آیتم منو. اگر li موقعیت‌دار شود، پنل به عرض همان آیتم
   (حدود ۹۰ پیکسل) جمع می‌شود و ستون‌ها روی هم می‌افتند. */
.dzf-nav__list > li{ position:static; }

/* آیتم مگامنو تا کف هدر کشیده می‌شود.
   بدون این، بین پایین لینک و بالای پنل حدود ۱۷ پیکسل فضای خالی می‌ماند
   که جزو li نیست؛ ماوس که از آنجا رد می‌شود hover قطع و منو بسته می‌شود. */
/* عمداً display اینجا ست نمی‌شود: قانون .dzf-nav{display:none} در
   مدیا کوئری ۹۰۰px بالاتر از این خط است و چون تخصص یکسان است،
   هر display اینجا آن را خنثی می‌کرد و منو روی موبایل ظاهر می‌شد. */
.dzf-nav{ align-self:stretch; }
.dzf-nav__list{ height:100%; }
.dzf-nav__list > li.has-mega{
  position:static;
  align-self:stretch;
  display:flex; align-items:center;
}
.dzf-nav__caret{
  width:13px; height:13px; margin-inline-start:5px;
  transition:transform .25s ease;
}
.has-mega:hover .dzf-nav__caret,
.has-mega:focus-within .dzf-nav__caret{ transform:rotate(180deg); }

/* مگامنو نسبت به کل هدر جای می‌گیرد، نه نسبت به آیتم منو.
   وسط‌چین کردن با translateX در RTL باعث بیرون‌زدگی از لبه می‌شد. */
.dzf-header__inner{ position:relative; }

.dzf-mega{
  position:absolute; top:100%;
  right:0; left:0;
  z-index:210;
  padding-top:14px;
  max-height:calc(100vh - 100px);
  /* overflow-x صراحتاً بسته است: در CSS اگر یک محور غیر visible باشد،
     محور دیگر خودبه‌خود auto می‌شود و یک اسکرول افقی ناخواسته می‌سازد. */
  overflow-x:hidden;
  overflow-y:auto;
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(8px);
  transition:opacity .22s ease, transform .22s ease, visibility .22s;
}
.has-mega:hover .dzf-mega,
.has-mega:focus-within .dzf-mega{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateY(0);
}

.dzf-mega__inner{
  display:grid; grid-template-columns:repeat(3, 1fr) 1.05fr;
  gap:var(--dzf-space-md);
  background:var(--dzf-white);
  border:1px solid var(--dzf-stroke);
  border-radius:24px;
  padding:var(--dzf-space-md);
}
.dzf-mega__t{
  display:block; font-size:.72rem; font-weight:700;
  color:var(--dzf-muted-3); margin-bottom:10px;
  padding-bottom:8px; border-bottom:1px solid var(--dzf-stroke);
}
.dzf-mega__col ul{ display:flex; flex-direction:column; gap:2px; }
.dzf-mega__col a{
  display:block; padding:9px 11px; border-radius:12px;
  transition:background-color .18s ease;
}
.dzf-mega__col a:hover{ background:var(--dzf-grey-bg); }
.dzf-mega__col strong{
  display:block; font-size:.86rem; font-weight:600; color:var(--dzf-navy);
}
.dzf-mega__col em{
  display:block; font-style:normal; font-size:.74rem;
  color:var(--dzf-muted-2); margin-top:2px; line-height:1.6;
}

.dzf-mega__cta{
  background:var(--dzf-navy); border-radius:18px;
  padding:var(--dzf-space-sm); display:flex; flex-direction:column; gap:8px;
}
.dzf-mega__cta strong{ font-size:.88rem; color:var(--dzf-white); }
.dzf-mega__cta p{
  font-size:.76rem; line-height:1.85; color:var(--dzf-grey-bg);
  opacity:.72; margin:0 0 4px; flex:1;
}
.dzf-mega__cta .dzf-hbtn{ font-size:.8rem; padding:9px 16px; }

@media (max-width:1180px){
  .dzf-mega__inner{ grid-template-columns:repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce){
  .dzf-mega{ transition-duration:.01ms; }
}

/* ============================================================
   Site Footer (shared across all pages)
   ============================================================ */
.dzf-sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* تله‌ی ربات — همان تکنیک، ولی برای فیلدی که باید در DOM بماند.
   left:-9999px در صفحه‌ی RTL سرریز افقی و اسکرول ناخواسته می‌سازد. */
.dzf-hp{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; border:0;
  overflow:hidden; white-space:nowrap;
  clip:rect(0 0 0 0); clip-path:inset(50%);
}

.dzf-footer{
  background:var(--dzf-grey-bg);
  padding:var(--dzf-space-xxl) 0 var(--dzf-space-lg);
}
.dzf-footer__card{
  background:var(--dzf-white);
  border:1px solid var(--dzf-stroke);
  border-radius:32px;
  padding:var(--dzf-space-lg) var(--dzf-space-lg) var(--dzf-space-md);
  overflow:hidden;
}

/* ---------- نوار خبرنامه ---------- */
.dzf-footer__news{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--dzf-space-lg);
  flex-wrap:wrap;
  background:var(--dzf-navy);
  border-radius:var(--dzf-radius-card);
  padding:var(--dzf-space-lg);
  margin-bottom:var(--dzf-space-xl);
}
.dzf-footer__news-text{ flex:1 1 320px; min-width:0; }
.dzf-footer__news-text h3{
  margin:0 0 8px;
  font-size:clamp(1.05rem, 2vw, 1.3rem); font-weight:700;
  color:var(--dzf-white); line-height:1.6;
}
.dzf-footer__news-text p{
  margin:0; font-size:.88rem; line-height:1.85;
  color:var(--dzf-grey-bg); opacity:.75;
}
.dzf-footer__news-form{
  flex:0 1 380px; display:flex; align-items:center; gap:10px;
  background:var(--dzf-white);
  border-radius:999px;
  padding:6px 6px 6px 6px;
}
.dzf-footer__news-form input{
  flex:1; min-width:0;
  border:none; background:transparent; outline:none;
  font-family:var(--dzf-font); font-size:.88rem;
  color:var(--dzf-navy);
  padding:10px 16px;
}
.dzf-footer__news-form input::placeholder{ color:var(--dzf-muted-2); }
.dzf-footer__news-form input:focus-visible{ outline:none; }

/* تکمیل خودکار مرورگر پس‌زمینه‌ی آبی خودش را روی input می‌کشد و
   با background معمولی هم پاک نمی‌شود. راه رایجِ رفعش inset box-shadow
   است که برند بوک ممنوع کرده، پس دو مسیر دیگر:

   ۱) background-clip:text — پس‌زمینه‌ی مرورگر فقط پشت خودِ حروف
      کشیده می‌شود و text-fill-color رویش می‌نشیند، پس دیده نمی‌شود.
   ۲) transition طولانی روی background-color — انیمیشن رنگ عملاً
      هیچ‌وقت به مقصد نمی‌رسد. پشتیبان مرورگرهایی است که مورد اول
      را کامل پیاده نکرده‌اند. */
.dzf-footer__news-form input:-webkit-autofill,
.dzf-footer__news-form input:-webkit-autofill:hover,
.dzf-footer__news-form input:-webkit-autofill:focus,
.dzf-footer__news-form input:-webkit-autofill:active{
  -webkit-text-fill-color:var(--dzf-navy);
  -webkit-background-clip:text;
  background-clip:text;
  caret-color:var(--dzf-navy);
  transition:background-color 600000s 0s, color 600000s 0s;
}

.dzf-hbtn--accent{
  background:var(--dzf-yellow) !important;
  color:var(--dzf-navy) !important;
  border-color:var(--dzf-yellow) !important;
  padding:11px 22px;
}
.dzf-hbtn--accent:hover{
  background:var(--dzf-navy) !important;
  color:var(--dzf-grey-bg) !important;
  border-color:var(--dzf-navy) !important;
  transform:translateY(-3px);
}

/* ---------- ستون‌ها ---------- */
.dzf-footer__grid{
  display:grid;
  /* ستون برند + چهار ستون لینک. ستون ارتباط کمی پهن‌تر است چون
     ایمیل و شماره باید در یک خط جا شوند و شکسته نشوند. */
  grid-template-columns:1.75fr 1fr 1fr 1fr 1.15fr;
  gap:var(--dzf-space-lg);
  padding-bottom:var(--dzf-space-lg);
}
.dzf-footer__col h4{
  font-size:.95rem; font-weight:700; color:var(--dzf-navy);
  margin:0 0 var(--dzf-space-sm);
  position:relative; padding-bottom:10px;
}
.dzf-footer__col h4::after{
  content:""; position:absolute; bottom:0; right:0;
  width:26px; height:2px; border-radius:2px;
  background:var(--dzf-yellow);
}
.dzf-footer__col ul{ display:flex; flex-direction:column; gap:11px; }
.dzf-footer__col a{
  font-size:.87rem; color:var(--dzf-muted);
  transition:color .22s ease, padding-right .22s ease;
}
.dzf-footer__col a:hover{ color:var(--dzf-navy); }
.dzf-footer__col a:focus-visible{ outline:2px solid var(--dzf-yellow); outline-offset:3px; }

/* ستون «به‌زودی» — لینک نیست، پس نباید شبیه لینک هم باشد */
.dzf-footer__col--soon li span{
  font-size:.87rem; color:var(--dzf-muted-2);
  cursor:default;
}
.dzf-footer__soon{
  display:inline-block; vertical-align:middle;
  margin-right:8px; padding:3px 10px;
  border-radius:999px;
  background:var(--dzf-grey-bg); color:var(--dzf-muted-2);
  font-size:.66rem; font-weight:700; line-height:1.6;
}
.dzf-footer__col--soon h4{ color:var(--dzf-muted); }
.dzf-footer__col--soon h4::after{ background:var(--dzf-muted-3); }

/* ستون برند */
.dzf-footer__brand img{ height:34px; width:auto; display:block; }
.dzf-footer__about{
  margin:var(--dzf-space-sm) 0 14px;
  font-size:.86rem; line-height:2;
  color:var(--dzf-muted);
  text-align:justify; text-align-last:right;
  max-width:44ch;
}
.dzf-footer__tagline{
  margin:0 0 var(--dzf-space-md);
  font-size:.9rem; font-weight:700; color:var(--dzf-navy);
  display:inline-flex; align-items:center; gap:8px;
}
.dzf-footer__tagline::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:var(--dzf-yellow); flex-shrink:0;
}
.dzf-footer__social{ display:flex; flex-direction:row !important; gap:10px; }
.dzf-footer__social a{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:999px;
  border:1px solid var(--dzf-stroke);
  color:var(--dzf-navy);
  transition:background-color .22s ease, border-color .22s ease, transform .22s ease;
}
.dzf-footer__social svg{ width:17px; height:17px; }
.dzf-footer__social a:hover{
  background:var(--dzf-yellow); border-color:var(--dzf-yellow);
  transform:translateY(-3px);
}

/* ستون ارتباط */
.dzf-footer__contact ul{ gap:14px; }
.dzf-footer__contact li{
  display:flex; align-items:center; gap:10px;
  font-size:.87rem; color:var(--dzf-muted);
}
.dzf-footer__contact svg{ width:17px; height:17px; flex-shrink:0; color:var(--dzf-navy); }
.dzf-footer__cta-btn{ margin-top:var(--dzf-space-md); width:100%; }

/* ---------- اپلیکیشن دیزیفی (در حال توسعه) ---------- */
.dzf-footer__app{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--dzf-space-md); flex-wrap:wrap;
  padding:var(--dzf-space-md) 0;
  border-top:1px solid var(--dzf-stroke);
}
.dzf-footer__app-title{
  display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-size:.95rem; font-weight:700; color:var(--dzf-navy);
}
.dzf-footer__app-badge{
  font-size:.68rem; font-weight:600;
  color:var(--dzf-navy); background:var(--dzf-yellow);
  border-radius:999px; padding:4px 10px; line-height:1;
}
.dzf-footer__app-text p{
  margin:6px 0 0; font-size:.83rem; line-height:1.8; color:var(--dzf-muted-2);
}
.dzf-footer__app-btns{ display:flex; gap:10px; flex-wrap:wrap; }
.dzf-footer__app-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 20px;
  background:var(--dzf-grey-bg);
  border:1px solid var(--dzf-stroke);
  border-radius:999px;
  font-family:var(--dzf-font); font-size:.82rem; font-weight:600;
  color:var(--dzf-muted-2);
  cursor:not-allowed;
}
.dzf-footer__app-btn svg{ width:16px; height:16px; flex-shrink:0; }

/* ---------- نوار پایینی ---------- */
.dzf-footer__bottom{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--dzf-space-sm); flex-wrap:wrap;
  padding-top:var(--dzf-space-md);
  border-top:1px solid var(--dzf-stroke);
  font-size:.8rem; color:var(--dzf-muted-2);
}
.dzf-footer__legal{ display:flex; flex-direction:row !important; gap:var(--dzf-space-sm); }
.dzf-footer__legal a{ font-size:.8rem; color:var(--dzf-muted-2); }
.dzf-footer__legal a:hover{ color:var(--dzf-navy); }

/* ---------- بازگشت به بالا ---------- */
.dzf-totop{
  position:fixed; bottom:24px; left:24px; z-index:150;
  display:flex; align-items:center; justify-content:center;
  width:46px; height:46px;
  background:var(--dzf-navy); color:var(--dzf-grey-bg);
  border:1px solid var(--dzf-navy); border-radius:999px;
  opacity:0; transform:translateY(12px);
  transition:opacity .28s ease, transform .28s ease,
             background-color .25s ease, color .25s ease;
}
.dzf-totop[hidden]{ display:none; }
.dzf-totop.is-visible{ opacity:1; transform:translateY(0); }
.dzf-totop:hover{ background:var(--dzf-yellow); color:var(--dzf-navy); border-color:var(--dzf-yellow); }
.dzf-totop svg{ width:19px; height:19px; }
.dzf-totop:focus-visible{ outline:2px solid var(--dzf-navy); outline-offset:3px; }

/* ---------- Breakpoints ---------- */
@media (max-width:1024px){
  .dzf-footer__grid{ grid-template-columns:1.6fr 1fr 1fr 1fr; }
  .dzf-footer__contact{ grid-column:1 / -1; }
  .dzf-footer__contact ul{ flex-direction:row; flex-wrap:wrap; gap:var(--dzf-space-md); }
  .dzf-footer__cta-btn{ width:auto; }
}
@media (max-width:768px){
  .dzf-footer__grid{ grid-template-columns:1fr 1fr; }
  .dzf-footer__brand{ grid-column:1 / -1; }
  .dzf-footer__about{ max-width:none; }
}
@media (max-width:560px){
  .dzf-footer{ padding:var(--dzf-space-xl) 0 var(--dzf-space-md); }
  .dzf-footer__card{ padding:var(--dzf-space-md) var(--dzf-space-sm); border-radius:22px; }
  .dzf-footer__news{ padding:var(--dzf-space-md); border-radius:18px; }
  .dzf-footer__news-form{
    flex:1 1 100%;
    flex-direction:column; align-items:stretch;
    border-radius:20px; padding:8px; gap:8px;
  }
  .dzf-footer__news-form input{ text-align:center; padding:12px 14px; }
  .dzf-hbtn--accent{ width:100%; justify-content:center; }
  .dzf-footer__grid{ grid-template-columns:1fr; gap:var(--dzf-space-lg); }
  .dzf-footer__contact ul{ flex-direction:column; gap:14px; }
  .dzf-footer__cta-btn{ width:100%; }
  .dzf-footer__bottom{ justify-content:center; text-align:center; }
  .dzf-totop{ bottom:16px; left:16px; width:42px; height:42px; }
}


/* ============================================================
   FAQ component (shared: services.php + contact.php)
   ============================================================ */
/* ===================================================
   سوالات متداول
   =================================================== */
.dzf-faq{ font-family:inherit; background:var(--bg); padding:var(--dzf-space-xxl) 20px; }
.dzf-faq, .dzf-faq *, .dzf-faq *::before, .dzf-faq *::after{ box-sizing:border-box; }
.dzf-faq__head{ max-width:640px; margin:0 auto 48px; text-align:center; }
.dzf-faq__eyebrow{ display:inline-flex; align-items:center; gap:8px; color:var(--primary); font-size:.85rem; font-weight:600; margin-bottom:16px; }
.dzf-faq__dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); flex-shrink:0; }
.dzf-faq__title{ font-family:var(--dzf-font); font-weight:700; color:var(--primary); font-size:clamp(1.6rem, 3vw, 2.2rem); line-height:1.4; margin:0 0 14px; }
.dzf-faq__title .hl{ position:relative; display:inline-block; z-index:1; }
.dzf-faq__title .hl::after{ content:""; position:absolute; right:0; left:0; bottom:.08em; height:.28em; background:var(--accent); opacity:.6; z-index:-1; border-radius:3px; }
.dzf-faq__desc{ color:var(--primary); opacity:.65; font-size:.95rem; line-height:1.85; margin:0; }
.dzf-faq__panel{ max-width:var(--dzf-container); margin:0 auto; background:var(--white); border:1px solid var(--stroke); border-radius:24px; padding:0 40px; }
.dzf-faq__item{ border-bottom:1px solid var(--stroke); position:relative; }
.dzf-faq__item:last-child{ border-bottom:none; }
.dzf-faq__item summary{ display:flex; align-items:center; gap:16px; padding:22px 0; cursor:pointer; list-style:none; }
.dzf-faq__item summary::-webkit-details-marker{ display:none; }
.dzf-faq__item summary::marker{ content:""; }
.dzf-faq__q-icon{ display:flex; align-items:center; justify-content:center; width:40px; height:40px; flex-shrink:0; border-radius:50%; background:var(--bg); color:var(--primary); transition:background-color .25s ease, color .25s ease; }
.dzf-faq__q-icon svg{ width:18px; height:18px; }
.dzf-faq__item[open] .dzf-faq__q-icon{ background:var(--accent); color:var(--primary); }
.dzf-faq__q-text{ flex:1; min-width:0; font-family:var(--dzf-font); font-weight:600; font-size:.95rem; color:var(--primary); }
.dzf-faq__chevron{ display:flex; align-items:center; justify-content:center; width:34px; height:34px; flex-shrink:0; border-radius:50%; background:var(--bg); color:var(--primary); opacity:.7; transition:transform .3s ease, opacity .25s ease, background-color .25s ease, color .25s ease; }
.dzf-faq__chevron svg{ width:14px; height:14px; }
.dzf-faq__item[open] .dzf-faq__chevron{ transform:rotate(180deg); opacity:1; background:var(--accent); color:var(--primary); }
.dzf-faq__item:not([open]) summary:hover .dzf-faq__chevron{ opacity:.8; }
.dzf-faq__answer{ padding:0 0 24px 56px; }
.dzf-faq__answer p{ margin:0; font-size:.88rem; line-height:1.9; color:var(--primary); opacity:.68; max-width:640px; }
@media (max-width:560px){
    .dzf-faq{ padding:56px 16px; }
    .dzf-faq__panel{ padding:0 18px; border-radius:20px; }
    .dzf-faq__item summary{ gap:12px; padding:18px 0; }
    .dzf-faq__q-icon{ width:34px; height:34px; }
    .dzf-faq__q-icon svg{ width:16px; height:16px; }
    .dzf-faq__q-text{ font-size:.88rem; }
    .dzf-faq__answer{ padding-right:0; padding-left:0; }
}
@media (prefers-reduced-motion: reduce){ .dzf-faq__chevron{ transition:none; } }


/* ============================================================
   دکمه‌ی شناور دستیار
   عمداً اینجاست نه در chat.css: بقیه‌ی ویجت با اولین کلیک لود
   می‌شود، ولی خود دکمه از همان لحظه‌ی اول باید درست دیده شود.
   ============================================================ */
.dzf-chat-btn{
  position:fixed; bottom:27px; right:24px; z-index:160;   /* سمت راست فیزیکی */
  display:flex; align-items:center; justify-content:center;
  width:60px; height:60px; padding:0;
  /* تیره با آیکون روشن — طبق استاندارد دکمه‌ی برند */
  background:#21242A; color:#E2E3E7;
  border:none; border-radius:999px;
  cursor:pointer;
  transition:background-color .25s ease, color .25s ease, transform .25s ease;
}
/* هاور بدون تغییر رنگ: فقط کمی بالا می‌آید.
   دکمه‌ی شناور همیشه روی محتوای صفحه است و عوض شدن رنگش موقع
   رد شدن ماوس، بیشتر حواس‌پرتی بود تا بازخورد. */
.dzf-chat-btn:hover{ transform:translateY(-3px); }
.dzf-chat-btn:focus-visible{ outline:2px solid var(--dzf-navy); outline-offset:4px; }

.dzf-chat-btn__ico,
.dzf-chat-btn__x{
  width:26px; height:26px; position:relative; z-index:2;
  transition:opacity .2s ease, transform .28s ease;
}
.dzf-chat-btn__x{ position:absolute; opacity:0; transform:rotate(-90deg) scale(.6); }
.dzf-chat-btn.is-open .dzf-chat-btn__ico{ opacity:0; transform:rotate(90deg) scale(.6); }
.dzf-chat-btn.is-open .dzf-chat-btn__x{ opacity:1; transform:none; }

/* حلقه‌های تپنده دور آیکون */
.dzf-chat-btn__ring{
  position:absolute; inset:0; z-index:1;
  border-radius:999px;
  border:1px solid #21242A;
  animation:dzf-ring 2.6s cubic-bezier(.2,.6,.3,1) infinite;
  pointer-events:none;
}
.dzf-chat-btn__ring--2{ animation-delay:1.3s; }
.dzf-chat-btn.is-open .dzf-chat-btn__ring{ animation:none; opacity:0; }

@keyframes dzf-ring{
  0%   { transform:scale(1);    opacity:.55; }
  70%  { transform:scale(1.55); opacity:0; }
  100% { transform:scale(1.55); opacity:0; }
}

@media (max-width:560px){
  .dzf-chat-btn{ bottom:19px; right:16px; width:54px; height:54px; }
  .dzf-chat-btn__ico, .dzf-chat-btn__x{ width:23px; height:23px; }
}
@media (prefers-reduced-motion: reduce){
  .dzf-chat-btn{ transition-duration:.01ms; }
  .dzf-chat-btn__ring{ animation:none; opacity:0; }
  .dzf-chat-btn:hover{ transform:none; }
}