/* ============================================================
   DISIPHEE — Dashboard
   متغیرها از style.css می‌آیند.

   یادداشت برند: Glow روی دکمه و وضعیت، سایه‌ی بیشتر هنگام هاور،
   و پس‌زمینه‌ی گرید متحرک پیاده نشده‌اند — هر سه در برند بوک
   ممنوع‌اند. جایشان: بالا آمدن کارت، تغییر رنگ استروک، و نبض
   opacity. حس یکسان، بدون شکستن قانون.
   وضعیت «سالم» هم با نقطه‌ی زرد نشان داده می‌شود، نه سبز.
   ============================================================ */

.db-sec, .db-hero, .db-cta, .db-crumb{ box-sizing:border-box; }
.db-sec *, .db-hero *, .db-cta *{ box-sizing:border-box; }

.db-rise{
  opacity:0; transform:translateY(18px);
  transition:opacity .55s ease, transform .55s ease;
}
.db-rise.is-in{ opacity:1; transform:none; }

/* ---------- مسیر ناوبری ---------- */
.db-crumb{ background:var(--white); border-bottom:1px solid var(--stroke); padding:14px var(--dzf-gutter); }
.db-crumb__inner{
  max-width:var(--dzf-container); margin:0 auto;
  display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  font-size:13px; color:var(--dzf-muted-2);
}
.db-crumb a{ color:var(--dzf-muted); }
.db-crumb a:hover{ color:var(--primary); }
.db-crumb b{ color:var(--primary); font-weight:600; unicode-bidi:plaintext; }

/* ---------- چیپ ---------- */
.db-chip{
  display:inline-block; margin-bottom:12px;
  padding:7px 16px; border-radius:999px;
  border:1px solid var(--stroke);
  font-size:12px; font-weight:700; color:var(--primary);
  unicode-bidi:plaintext;
}
.db-chip--accent{ background:var(--accent); border-color:var(--accent); }

/* ============================================================
   هرو
   ============================================================ */
.db-hero{
  background:var(--white);
  padding:var(--dzf-space-xxl) var(--dzf-gutter);
  border-bottom:1px solid var(--stroke);
}
.db-hero__inner{
  max-width:var(--dzf-container); margin:0 auto;
  display:grid; grid-template-columns:1.1fr .9fr;
  gap:var(--dzf-space-xl); align-items:center;
}
.db-hero__t{ margin:0 0 var(--dzf-space-sm); font-weight:800; color:var(--primary); }
.db-hero__t b{ display:block; font-size:clamp(1.6rem,3.4vw,2.5rem); line-height:1.3; unicode-bidi:plaintext; }
.db-hero__t span{
  display:block; margin-top:6px;
  font-size:clamp(1rem,1.7vw,1.3rem); font-weight:600; line-height:1.6; color:var(--dzf-muted);
}
.db-hero__l{ margin:0 0 var(--dzf-space-md); max-width:58ch; font-size:15px; line-height:2; color:var(--dzf-muted); }
.db-hero__btns{ display:flex; flex-wrap:wrap; gap:12px; }

/* ---------- Brand Sync ---------- */
.db-sync{
  position:relative;
  background:var(--primary); border-radius:24px;
  padding:var(--dzf-space-md);
}
.db-sync__k{
  display:block; margin-bottom:var(--dzf-space-sm);
  font-size:12px; font-weight:700; color:var(--bg); opacity:.55;
  unicode-bidi:plaintext;
}
.db-sync__flow{
  position:relative;
  margin:0; padding:0 0 0 0; list-style:none;
  display:flex; flex-direction:column; gap:14px;
}
/* ریل عمودی که نقطه روی آن حرکت می‌کند */
.db-sync__flow::before{
  content:""; position:absolute; top:9px; bottom:9px;
  inset-inline-start:9px; width:2px;
  background:rgba(226,227,231,.14);
}
.db-sync__flow li{
  position:relative; z-index:2;
  display:flex; align-items:center; gap:14px;
  padding-inline-start:0;
}
.db-sync__dot{
  width:20px; height:20px; flex-shrink:0; border-radius:999px;
  background:var(--primary);
  border:2px solid rgba(226,227,231,.28);
  transition:background-color .3s ease, border-color .3s ease, transform .3s ease;
}
.db-sync__flow strong{
  display:block; font-size:14px; color:var(--bg); opacity:.6;
  transition:color .3s ease, opacity .3s ease;
  unicode-bidi:plaintext;
}
.db-sync__flow span:not(.db-sync__dot){ font-size:11.5px; color:var(--bg); opacity:.4; }
.db-sync__flow li.is-lit .db-sync__dot{
  background:var(--accent); border-color:var(--accent); transform:scale(1.15);
}
.db-sync__flow li.is-lit strong{ color:var(--white); opacity:1; }
.db-sync__flow li.is-target.is-lit strong{ color:var(--accent); }

.db-sync__done{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:var(--dzf-space-md);
  padding:9px 18px; border-radius:999px;
  background:var(--accent); color:var(--primary);
  font-size:13px; font-weight:700;
  opacity:0; transform:translateY(6px);
  transition:opacity .4s ease, transform .4s ease;
}
.db-sync__done span{ display:flex; }
.db-sync__done svg{ width:15px; height:15px; }
.db-sync.is-done .db-sync__done{ opacity:1; transform:none; }

/* ============================================================
   سکشن پایه
   ============================================================ */
.db-sec{ padding:var(--dzf-space-xxl) var(--dzf-gutter); }
.db-sec__inner{ max-width:var(--dzf-container); margin:0 auto; }
.db-sec__head{ max-width:72ch; margin-bottom:var(--dzf-space-xl); }
.db-sec__head h2{
  margin:0 0 12px; font-size:clamp(1.3rem,2.6vw,1.9rem);
  font-weight:800; line-height:1.5; color:var(--primary); text-wrap:balance;
}
.db-sec__head p{ margin:0; font-size:15px; line-height:2; color:var(--dzf-muted); }
.db-sec__head--light h2{ color:var(--white); }
.db-sec__head--light p{ color:var(--bg); opacity:.72; }

/* ============================================================
   داشبورد نمونه
   ============================================================ */
.db-glance-sec{ background:var(--white); }
.db-glance{
  display:grid; grid-template-columns:1.25fr .75fr;
  gap:var(--dzf-space-xl); align-items:center;
}
.db-glance__txt h2{
  margin:0 0 12px; font-size:clamp(1.25rem,2.4vw,1.75rem);
  font-weight:800; line-height:1.5; color:var(--primary);
}
.db-glance__txt p{ margin:0 0 var(--dzf-space-md); font-size:15px; line-height:2; color:var(--dzf-muted); }
.db-glance__list{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px; }
.db-glance__list li{ position:relative; padding-inline-start:20px; font-size:13.5px; line-height:1.85; color:var(--primary); }
.db-glance__list li::before{
  content:""; position:absolute; inset-inline-start:0; top:9px;
  width:8px; height:8px; border-radius:999px; background:var(--accent);
}

.db-panel{ background:var(--primary); border-radius:24px; padding:var(--dzf-space-md); }
.db-panel__bar{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:var(--dzf-space-sm);
  padding-bottom:var(--dzf-space-sm);
  border-bottom:1px solid rgba(226,227,231,.14);
}
.db-panel__lights{ display:flex; gap:6px; }
.db-panel__lights i{ width:8px; height:8px; border-radius:999px; background:rgba(226,227,231,.25); }
.db-panel__lights i:first-child{ background:var(--accent); }
.db-panel__live{
  display:inline-flex; align-items:center; gap:7px;
  font-size:11.5px; color:var(--bg); opacity:.6;
}
/* نبض مانیتورینگ — فقط opacity، بدون درخشش */
.db-panel__live i{
  width:8px; height:8px; border-radius:999px; background:var(--accent);
  animation:db-live 2.4s ease-in-out infinite;
}
@keyframes db-live{ 0%,100%{ opacity:1; } 50%{ opacity:.28; } }

/* ---------- توالی بوت ---------- */
.db-boot{ min-height:236px; display:flex; flex-direction:column; justify-content:center; }
.db-boot[hidden]{ display:none; }
.db-boot__k{
  display:block; margin-bottom:var(--dzf-space-sm);
  font-size:13px; color:var(--bg); opacity:.55; unicode-bidi:plaintext;
}
.db-boot ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px; }
.db-boot li{
  display:flex; align-items:center; gap:10px;
  font-size:13px; color:var(--bg); unicode-bidi:plaintext;
  opacity:0; transform:translateX(8px);
  transition:opacity .3s ease, transform .3s ease;
}
.db-boot li.is-in{ opacity:.85; transform:none; }
.db-boot li span{
  display:flex; align-items:center; justify-content:center;
  width:20px; height:20px; flex-shrink:0; border-radius:999px;
  background:var(--accent); color:var(--primary);
}
.db-boot li svg{ width:12px; height:12px; }

/* ---------- ویجت‌ها ---------- */
.db-grid{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:10px;
}
.db-grid[hidden]{ display:none; }
.db-w{
  background:rgba(226,227,231,.08);
  border:1px solid rgba(226,227,231,.14);
  border-radius:16px;
  padding:14px;
  opacity:0; transform:translateY(10px);
  transition:opacity .45s ease, transform .45s ease, border-color .22s ease;
}
.db-w.is-in{ opacity:1; transform:none; }
.db-w:hover{ border-color:var(--accent); }
.db-w__k{ display:block; font-size:10.5px; font-weight:700; color:var(--bg); opacity:.5; unicode-bidi:plaintext; }
.db-w__v{ display:block; margin-top:8px; font-size:1.7rem; font-weight:800; color:var(--white); }
.db-w__v i{ font-style:normal; }
.db-w__m{ display:block; margin-top:4px; font-size:11px; color:var(--bg); opacity:.5; }

.db-w--health{ grid-row:span 2; display:flex; flex-direction:column; align-items:center; }
.db-ring{ position:relative; width:100%; max-width:140px; margin:10px auto 6px; }
.db-ring svg{ width:100%; height:auto; display:block; transform:rotate(-90deg); }
.db-ring__bg{ fill:none; stroke:rgba(226,227,231,.14); stroke-width:12; }
.db-ring__fg{
  fill:none; stroke:var(--accent); stroke-width:12; stroke-linecap:round;
  stroke-dasharray:364.4; stroke-dashoffset:364.4;
  transition:stroke-dashoffset 1.5s cubic-bezier(.22,.8,.28,1);
}
.db-ring b{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; font-weight:800; color:var(--white);
}
.db-ring b i{ font-style:normal; }

.db-w__v--bell{ display:flex; align-items:center; gap:8px; }
.db-bell{ display:flex; color:var(--accent); }
.db-bell svg{ width:20px; height:20px; }
.db-bell.is-ring{ animation:db-bounce .6s ease; }
@keyframes db-bounce{
  0%,100%{ transform:translateY(0) rotate(0); }
  30%{ transform:translateY(-4px) rotate(-9deg); }
  60%{ transform:translateY(0) rotate(7deg); }
}

.db-w--next{ grid-column:span 2; background:var(--accent); border-color:var(--accent); }
.db-w--next .db-w__k{ color:var(--primary); opacity:.6; }
.db-w--next strong{ display:block; margin-top:8px; font-size:1.15rem; color:var(--primary); unicode-bidi:plaintext; }
.db-w--next .db-w__m{ color:var(--primary); opacity:.65; }
.db-w--next strong.is-pulse{ animation:db-soft 2.8s ease-in-out infinite; }
@keyframes db-soft{ 0%,100%{ opacity:1; } 50%{ opacity:.6; } }

.db-w--feed{ grid-column:span 3; }
.db-w--feed ul{ margin:8px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:7px; }
.db-w--feed li{ display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--bg); opacity:.7; }
.db-w--feed li i{ width:6px; height:6px; border-radius:999px; background:var(--accent); flex-shrink:0; }

/* ============================================================
   شش کارت
   ============================================================ */
.db-cards{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:var(--dzf-space-sm);
}
.db-card{
  display:block;
  background:var(--white); border:1px solid var(--stroke);
  border-radius:20px; padding:var(--dzf-space-md);
  transition:opacity .55s ease, transform .55s ease, border-color .22s ease;
}
/* بالا آمدن به‌جای سایه‌ی بیشتر */
.db-card.is-in:hover{ border-color:var(--primary); transform:translateY(-4px); }
.db-card__ico{
  display:flex; align-items:center; justify-content:center;
  width:46px; height:46px; margin-bottom:12px;
  border-radius:16px; background:var(--bg); color:var(--primary);
  transition:background-color .22s ease, transform .3s ease;
}
.db-card__ico svg{ width:22px; height:22px; }
.db-card:hover .db-card__ico{ background:var(--accent); transform:rotate(-8deg); }
.db-card strong{ display:block; font-size:15px; color:var(--primary); }
.db-card p{ margin:8px 0 0; font-size:13px; line-height:1.9; color:var(--dzf-muted-2); }
.db-card__go{
  display:inline-block; margin-top:12px;
  font-size:12.5px; font-weight:700; color:var(--primary);
  border-bottom:1.5px solid var(--accent);
}

/* ============================================================
   گام بعدی
   ============================================================ */
.db-next-sec{ background:var(--primary); }
.db-next{
  display:flex; align-items:stretch; flex-wrap:wrap; gap:12px;
  margin-bottom:var(--dzf-space-md);
}
.db-next__i{
  flex:1; min-width:180px;
  background:rgba(226,227,231,.08);
  border:1px solid rgba(226,227,231,.14);
  border-radius:20px; padding:var(--dzf-space-md);
}
.db-next__i span{ display:block; font-size:11.5px; color:var(--bg); opacity:.55; unicode-bidi:plaintext; }
.db-next__i b{ display:block; margin-top:8px; font-size:1.7rem; font-weight:800; color:var(--white); unicode-bidi:plaintext; }
.db-next__i b i{ font-style:normal; }
.db-next__i--pick{ background:var(--accent); border-color:var(--accent); }
.db-next__i--pick span{ color:var(--primary); opacity:.6; }
.db-next__i--pick b{ color:var(--primary); }
.db-next__i--gain b{ color:var(--accent); }
.db-next__arrow{ display:flex; align-items:center; color:rgba(226,227,231,.4); }
.db-next__arrow svg{ width:22px; height:22px; }

.db-ai{
  border:1px solid rgba(226,227,231,.14);
  border-radius:20px; padding:var(--dzf-space-md);
}
.db-ai__scan{ display:flex; align-items:center; gap:12px; font-size:14px; color:var(--bg); opacity:.8; }
.db-ai__dots{ display:flex; gap:6px; }
.db-ai__dots i{
  width:8px; height:8px; border-radius:999px; background:var(--accent);
  animation:db-dot 1.1s ease-in-out infinite;
}
.db-ai__dots i:nth-child(2){ animation-delay:.12s; }
.db-ai__dots i:nth-child(3){ animation-delay:.24s; }
@keyframes db-dot{
  0%,100%{ opacity:.25; transform:translateY(0); }
  50%{ opacity:1; transform:translateY(-4px); }
}
.db-ai__out{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:12px; }
.db-ai__out[hidden]{ display:none; }
.db-ai__out li{
  display:flex; align-items:flex-start; gap:14px;
  opacity:0; transform:translateY(8px);
  transition:opacity .45s ease, transform .45s ease;
}
.db-ai__out li.is-in{ opacity:1; transform:none; }
.db-ai__out b{
  display:flex; align-items:center; justify-content:center;
  width:28px; height:28px; flex-shrink:0; border-radius:999px;
  background:var(--accent); color:var(--primary); font-size:12px; font-weight:700;
}
.db-ai__out strong{ display:block; font-size:14px; color:var(--white); }
.db-ai__out span{ display:block; margin-top:4px; font-size:12.5px; color:var(--bg); opacity:.6; }

/* ============================================================
   فید فعالیت
   ============================================================ */
.db-feed-sec{ background:var(--white); }
.db-feed{ margin:0; padding:0; list-style:none; position:relative; }
.db-feed::before{
  content:""; position:absolute; top:10px; bottom:10px;
  inset-inline-start:6px; width:2px; background:var(--stroke);
}
.db-feed li{
  position:relative;
  display:flex; align-items:flex-start; gap:16px;
  padding:0 0 var(--dzf-space-md) var(--dzf-space-md);
  padding-inline-start:var(--dzf-space-md);
}
.db-feed li:last-child{ padding-bottom:0; }
.db-feed__dot{
  position:absolute; inset-inline-start:0; top:6px; z-index:2;
  width:14px; height:14px; border-radius:999px;
  background:var(--white); border:2px solid var(--dzf-muted-3);
}
.db-feed li:first-child .db-feed__dot{ background:var(--accent); border-color:var(--accent); }
.db-feed li > div{ flex:1; min-width:0; }
.db-feed strong{ display:block; font-size:15px; color:var(--primary); unicode-bidi:plaintext; }
.db-feed p{ margin:5px 0 0; font-size:13px; line-height:1.85; color:var(--dzf-muted-2); }
.db-feed time{ flex-shrink:0; font-size:12px; color:var(--dzf-muted-3); }

/* ============================================================
   هاب مرکزی
   ============================================================ */
.db-hub svg{ width:100%; height:auto; display:block; }
.db-hub__t{
  font-family:var(--dzf-font); font-size:14px; font-weight:700;
  fill:var(--primary); text-anchor:middle;
}
.db-hub__t--light{ fill:var(--white); }
.db-hub__lines path{
  stroke-dasharray:200; stroke-dashoffset:200;
  transition:stroke-dashoffset 1.1s cubic-bezier(.22,.8,.28,1), stroke .25s ease;
}
.db-hub.is-in .db-hub__lines path{ stroke-dashoffset:0; }
.db-hub.is-in .db-hub__lines path:nth-child(2){ transition-delay:.12s; }
.db-hub.is-in .db-hub__lines path:nth-child(3){ transition-delay:.24s; }
.db-hub.is-in .db-hub__lines path:nth-child(4){ transition-delay:.36s; }
.db-hub.is-in .db-hub__lines path:nth-child(5){ transition-delay:.48s; }
.db-hub__lines path.is-hot{ stroke:var(--accent); }
/* گره‌های نمودار حالا عنصر <a> داخل SVG هستند */
.db-hub__nodes a{ cursor:pointer; text-decoration:none; }
.db-hub__nodes a rect{ transition:stroke .25s ease, fill .25s ease; }
.db-hub__nodes a.is-hot rect{ fill:var(--accent); stroke:var(--accent); }
.db-hub__nodes a:focus{ outline:none; }
.db-hub__nodes a:focus-visible rect{ stroke:var(--primary); stroke-width:3; }

.db-hub__legend{
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center;
  margin:var(--dzf-space-md) 0 0; padding:0; list-style:none;
}
.db-hub__legend a{
  display:inline-block;
  padding:9px 18px; border-radius:999px;
  border:1px solid var(--stroke);
  font-size:13px; font-weight:600; color:var(--dzf-muted);
  unicode-bidi:plaintext;
  transition:background-color .22s ease, color .22s ease, border-color .22s ease;
}
.db-hub__legend a:hover{ background:var(--accent); border-color:var(--accent); color:var(--primary); }

/* ============================================================
   CTA
   ============================================================ */
.db-cta{ background:var(--primary); padding:var(--dzf-space-xxl) var(--dzf-gutter); text-align:center; }
.db-cta__inner{ max-width:760px; margin:0 auto; }
.db-cta h2{
  margin:0 0 var(--dzf-space-sm);
  font-size:clamp(1.4rem,2.8vw,2.1rem); font-weight:800; line-height:1.5;
  color:var(--white); text-wrap:balance;
}
.db-cta p{ margin:0 auto var(--dzf-space-md); max-width:60ch; font-size:15px; line-height:2; color:var(--bg); opacity:.72; }
.db-cta__btns{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.db-cta .dzf-hbtn--solid{
  background:var(--accent) !important; color:var(--primary) !important; border-color:var(--accent) !important;
}
.db-cta .dzf-hbtn--solid:hover{ background:var(--white) !important; border-color:var(--white) !important; }
.db-cta .dzf-hbtn--ghost{ color:var(--bg) !important; border-color:rgba(226,227,231,.35) !important; }
/* ویژگی عمداً دوکلاسه است تا از `.db-cta p` بالاتر بنشیند. قبلاً فقط
   margin با !important نجات پیدا کرده بود و font-size همچنان ۱۵px
   می‌ماند — یعنی خط پایانی هم‌اندازه‌ی متن اصلی دیده می‌شد. */
.db-cta .db-cta__sub{ margin:var(--dzf-space-md) 0 0; font-size:13.5px; opacity:.6; }
.db-cta .db-cta__sub a{ color:var(--accent); font-weight:600; }

/* ============================================================
   واکنش‌گرایی
   ============================================================ */
@media (max-width:1100px){
  .db-hero__inner, .db-glance{ grid-template-columns:1fr; gap:var(--dzf-space-lg); }
  .db-cards{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .db-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .db-w--health{ grid-row:auto; }
  .db-w--next, .db-w--feed{ grid-column:span 2; }
}
@media (max-width:860px){
  .db-sec, .db-hero, .db-cta{ padding-top:var(--dzf-space-xl); padding-bottom:var(--dzf-space-xl); }
  .db-next{ flex-direction:column; }
  .db-next__arrow{ justify-content:center; transform:rotate(-90deg); }
}
@media (max-width:560px){
  .db-cards{ grid-template-columns:1fr; }
  .db-grid{ grid-template-columns:1fr; }
  .db-w--next, .db-w--feed{ grid-column:auto; }
  .db-feed li{ flex-wrap:wrap; }
  .db-feed time{ width:100%; padding-inline-start:0; }
}

/* ============================================================
   احترام به prefers-reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .db-rise, .db-w, .db-ai__out li, .db-boot li{
    opacity:1 !important; transform:none !important; transition:none !important;
  }
  .db-panel__live i, .db-ai__dots i, .db-bell, .db-w--next strong{ animation:none !important; }
  .db-ring__fg, .db-hub__lines path, .db-sync__dot, .db-sync__done{ transition:none !important; }
  .db-card.is-in:hover{ transform:none; }
  .db-card:hover .db-card__ico{ transform:none; }
}