/* ============================================================
   DISIPHEE — صفحه‌ی امکانات

   بعد از style.css و pages.css لود می‌شود.
   قوانین برند در این فایل: بدون box-shadow، بدون گرادیان، بدون
   افکت شیشه‌ای، فقط رنگ‌های پالت، فاصله‌ها مضرب ۸، دکمه‌ها Pill.

   حرکت هم طبق برند بوک ساختاریافته و آرام است: کشیده شدن خط،
   شمارش عدد، روشن شدن پی‌درپی. بدون bounce، ذره، درخشش و شناوری.
   ============================================================ */

.ft-hero, .ft-hero *, .ft-hero *::before, .ft-hero *::after,
.ft-sec,  .ft-sec  *, .ft-sec  *::before, .ft-sec  *::after{ box-sizing:border-box; }

/* تأکید زرد پشت کلمه — همان الگوی صفحه‌ی اصلی، برای یکدستی */
.ft-hero .hl, .ft-sec .hl{ position:relative; display:inline-block; z-index:1; }
.ft-hero .hl::after, .ft-sec .hl::after{
  content:""; position:absolute; right:0; left:0; bottom:.06em;
  height:.3em; background:var(--accent); opacity:.55;
  z-index:-1; border-radius:4px;
}

/* ============================================================
   ۰۱ — هرو
   ============================================================ */
.ft-hero{
  background:var(--white);
  /* پایین هرو روی XL (۴۸) است نه XXL (۷۲): بخش بعدی خودش ۷۲ پدینگ
     بالا دارد و جمعشان ۱۴۴ می‌شد — روی مقیاس هست ولی انتخاب‌شده نبود،
     فقط دو پدینگ روی هم افتاده بودند. حالا ۱۲۰ = XL + XXL. */
  padding:clamp(32px, 4.5vw, 60px) var(--dzf-gutter) clamp(32px, 4vw, 48px);
}
.ft-hero__inner{
  max-width:var(--dzf-container); margin:0 auto;
  display:grid; grid-template-columns:1fr .92fr;
  gap:clamp(24px, 4vw, 56px); align-items:center;
}
.ft-hero__txt h1{
  font-family:var(--dzf-font);
  font-size:clamp(1.6rem, 3.9vw, 2.75rem);
  font-weight:800; letter-spacing:-.02em; line-height:1.45;
  color:var(--primary); margin:14px 0 16px; text-wrap:balance;
}
.ft-hero__txt > p{
  font-size:clamp(.9rem, 1.4vw, 1.02rem);
  line-height:2.05; color:var(--dzf-muted); margin:0; max-width:56ch;
}
.ft-hero__btns{ display:flex; gap:12px; flex-wrap:wrap; margin-top:var(--dzf-space-md); }

/* ---------- تصویر سیستم ---------- */
.ft-hero__vis{ display:flex; justify-content:center; }
.ft-sys{ width:100%; max-width:440px; height:auto; overflow:visible; }

.ft-sys__mem{
  fill:none; stroke:var(--dzf-muted-3); stroke-width:1.5;
  stroke-dasharray:5 9;
  /* چرخش بسیار کند: «همیشه در جریان» را می‌گوید بدون اینکه چشم را بگیرد */
  transform-origin:260px 280px;
  animation:ft-turn 90s linear infinite;
}
.ft-sys__memlbl{
  font-family:var(--dzf-font); font-size:12px; font-weight:700;
  fill:var(--dzf-muted-2);
}

.ft-sys__line{
  stroke:var(--dzf-stroke); stroke-width:1.5;
  stroke-dasharray:170; stroke-dashoffset:170;
  animation:ft-draw .7s cubic-bezier(.22,.61,.36,1) forwards;
  animation-delay:.15s;
}
/* قطعه‌ی زردی که از هسته به سمت ماژول حرکت می‌کند */
.ft-sys__pulse{
  stroke:var(--accent); stroke-width:2.5; stroke-linecap:round;
  stroke-dasharray:12 320; stroke-dashoffset:0;
  opacity:0;
  animation:ft-pulse 4.6s linear infinite;
  animation-delay:calc(1s + var(--i) * .32s);
}

.ft-sys__node circle{
  fill:var(--white); stroke:var(--stroke); stroke-width:1.5;
}
.ft-sys__node--core circle{ fill:var(--primary); stroke:var(--primary); }
.ft-sys__node--core .ft-sys__en{ fill:var(--accent); font-size:14px; }
.ft-sys__node--core .ft-sys__fa{ fill:var(--bg); opacity:.8; }
.ft-sys__en{
  font-family:var(--dzf-font); font-size:11.5px; font-weight:700;
  fill:var(--primary); direction:ltr;
}
.ft-sys__fa{
  font-family:var(--dzf-font); font-size:11px; font-weight:600;
  fill:var(--dzf-muted-2);
}
/* ماژول‌ها یکی‌یکی وارد می‌شوند، بعد از اینکه خط رسید */
.ft-sys__node{
  opacity:0;
  animation:ft-pop .5s cubic-bezier(.22,.61,.36,1) forwards;
  animation-delay:calc(.35s + var(--i, 0) * .13s);
}

@keyframes ft-draw{ to{ stroke-dashoffset:0; } }
@keyframes ft-pop{ from{ opacity:0; } to{ opacity:1; } }
@keyframes ft-turn{ to{ transform:rotate(360deg); } }
@keyframes ft-pulse{
  0%   { stroke-dashoffset:0;    opacity:0; }
  6%   { opacity:1; }
  34%  { stroke-dashoffset:-165; opacity:1; }
  40%  { stroke-dashoffset:-165; opacity:0; }
  100% { stroke-dashoffset:-165; opacity:0; }
}

@media (max-width:900px){
  .ft-hero__inner{ grid-template-columns:1fr; }
  .ft-hero__vis{ order:-1; }
  .ft-sys{ max-width:380px; }
}

/* ============================================================
   بستر بخش‌ها و سرتیترها
   ============================================================ */
.ft-sec{ background:var(--bg); padding:var(--dzf-space-xxl) var(--dzf-gutter); }
.ft-sec--white{ background:var(--white); }
.ft-sec__inner{ max-width:var(--dzf-container); margin:0 auto; }
.ft-sec__inner--split{
  display:grid; grid-template-columns:1fr 1.05fr;
  gap:clamp(24px, 4vw, 56px); align-items:start;
}

.ft-head{ max-width:760px; margin:0 0 var(--dzf-space-lg); }
.ft-head h2{
  font-family:var(--dzf-font);
  font-size:clamp(1.3rem, 2.9vw, 1.95rem);
  font-weight:800; color:var(--primary);
  line-height:1.5; margin:12px 0 12px; text-wrap:balance;
}
.ft-head p{ font-size:.93rem; line-height:2.05; color:var(--dzf-muted); margin:0; }
.ft-head--side{ margin-bottom:0; position:sticky; top:100px; }

.ft-result{
  margin:16px 0 0 !important;
  padding-right:16px;
  border-right:2px solid var(--accent);
  font-size:.9rem; line-height:2; font-weight:600; color:var(--primary);
}
.ft-result--plain{ border-right:none; padding-right:0; font-weight:400; color:var(--dzf-muted); }

.ft-link{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:22px; padding:11px 24px;
  border-radius:999px; border:1px solid var(--stroke);
  font-size:14px; font-weight:600; color:var(--primary);
  transition:background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.ft-link svg{ width:15px; height:15px; transition:transform .25s ease; }
.ft-link:hover{ background:var(--primary); color:var(--bg); border-color:var(--primary); transform:translateY(-3px); }
.ft-link:hover svg{ transform:translateX(-4px); }

.ft-note{
  margin:var(--dzf-space-lg) 0 0;
  padding:20px 24px;
  background:var(--white); border:1px solid var(--stroke); border-radius:20px;
  font-size:.89rem; line-height:2.05; color:var(--dzf-muted);
}
.ft-sec--white .ft-note{ background:var(--bg); }
.ft-note strong{ color:var(--primary); }
.ft-note--center{ text-align:center; font-weight:600; color:var(--primary); }

.ft-quote{
  margin:var(--dzf-space-lg) 0 0;
  padding:26px 30px;
  background:var(--primary); border-radius:24px;
  font-size:1.02rem; font-weight:700; line-height:1.95;
  color:var(--bg); text-align:center; text-wrap:balance;
}

@media (max-width:900px){
  .ft-sec__inner--split{ grid-template-columns:1fr; }
  .ft-head--side{ position:static; margin-bottom:var(--dzf-space-md); }
}
@media (max-width:520px){
  .ft-sec{ padding:56px var(--dzf-gutter); }
}

/* ============================================================
   کارت‌های عمومی
   ============================================================ */
.ft-cards{ display:grid; gap:16px; }
.ft-cards--4{ grid-template-columns:repeat(4, 1fr); }
.ft-cards--3{ grid-template-columns:repeat(3, 1fr); }
.ft-card{
  background:var(--white); border:1px solid var(--stroke);
  border-radius:20px; padding:24px 22px;
  transition:border-color .25s ease, transform .25s ease;
}
.ft-sec--white .ft-card{ background:var(--bg); }
.ft-card:hover{ border-color:var(--primary); transform:translateY(-3px); }
.ft-card strong{ display:block; font-size:.98rem; font-weight:700; color:var(--primary); margin-bottom:8px; }
.ft-card p{ margin:0; font-size:.85rem; line-height:1.95; color:var(--dzf-muted); }
/* برچسب «اکنون / بعدی / بعد از آن» — سرمه‌ای، نه زرد.
   سه برچسب زرد کنار هم روی کارت‌های خاکستری، تأکید را بی‌معنا
   می‌کرد: وقتی همه‌چیز تأکید شود، هیچ‌چیز تأکید نیست. */
.ft-card__tag{
  display:inline-block; margin-bottom:12px;
  padding:5px 14px; border-radius:999px;
  background:var(--primary); color:var(--bg);
  font-size:.72rem; font-weight:700;
}

@media (max-width:1024px){ .ft-cards--4{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:860px){  .ft-cards--3{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:560px){
  .ft-cards--4, .ft-cards--3{ grid-template-columns:1fr; }
  .ft-card{ padding:20px 18px; border-radius:16px; }
}

/* ============================================================
   زنجیره‌ی مدل ذهنی
   ============================================================ */
.ft-chain{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:10px 6px;
  margin:0 0 var(--dzf-space-lg); padding:0; list-style:none;
}
.ft-chain__step{
  display:flex; align-items:center; gap:10px;
  padding:10px 18px;
  border:1px solid var(--stroke); border-radius:999px;
  background:var(--bg);
  font-size:.85rem; font-weight:600; color:var(--dzf-muted);
  transition:background-color .4s ease, color .4s ease, border-color .4s ease;
}
.ft-sec--white .ft-chain__step{ background:var(--white); }
.ft-chain__dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--dzf-muted-3); flex-shrink:0;
  transition:background-color .4s ease;
}
.ft-chain__step + .ft-chain__step{ position:relative; margin-right:16px; }
.ft-chain__step + .ft-chain__step::before{
  content:""; position:absolute; right:-16px; top:50%;
  width:16px; height:1px; background:var(--stroke);
}
/* روشن شدن پی‌درپی: کلاس is-on را features.js می‌گذارد */
.ft-chain.is-live .ft-chain__step{
  color:var(--primary); border-color:var(--primary);
  transition-delay:calc(var(--i) * .12s);
}
.ft-chain.is-live .ft-chain__dot{ background:var(--accent); transition-delay:calc(var(--i) * .12s); }

/* در عرض کم، قرص‌ها زیر هم می‌روند و خط افقیِ رابط بی‌معنا و آویزان
   می‌شود؛ اینجا به یک خط عمودی وسط‌چین تبدیلش می‌کنیم. */
@media (max-width:760px){
  .ft-chain{ flex-direction:column; align-items:stretch; gap:0; }
  .ft-chain__step{ justify-content:flex-start; }
  .ft-chain__step + .ft-chain__step{ margin-right:0; margin-top:22px; }
  .ft-chain__step + .ft-chain__step::before{
    right:22px; left:auto; top:-22px;
    width:1px; height:22px;
  }
}

/* ============================================================
   شش ماژول
   ============================================================ */
.ft-mods{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;
}
.ft-mod a{
  display:flex; flex-direction:column; height:100%;
  background:var(--white); border:1px solid var(--stroke);
  border-radius:22px; padding:26px 24px;
  position:relative; overflow:hidden;
  transition:border-color .25s ease, transform .25s ease;
}
.ft-sec--white .ft-mod a{ background:var(--bg); }
.ft-mod a::before{
  content:""; position:absolute; top:0; right:0; left:0; height:3px;
  background:var(--accent);
  transform:scaleX(0); transform-origin:right;
  transition:transform .32s cubic-bezier(.22,.61,.36,1);
}
.ft-mod a:hover{ border-color:var(--primary); transform:translateY(-4px); }
.ft-mod a:hover::before{ transform:scaleX(1); }
.ft-mod__num{
  font-family:var(--dzf-font); font-weight:800; font-size:.8rem;
  color:var(--primary); opacity:.3; direction:ltr; margin-bottom:10px;
}
.ft-mod__en{
  font-size:.78rem; font-weight:700; letter-spacing:.05em;
  color:var(--primary); opacity:.5; direction:ltr;
  unicode-bidi:plaintext; margin-bottom:6px;
}
.ft-mod__fa{ font-size:1.05rem; font-weight:700; color:var(--primary); margin-bottom:10px; }
.ft-mod__txt{ font-size:.85rem; line-height:1.95; color:var(--dzf-muted); margin-bottom:18px; }
.ft-mod__go{
  margin-top:auto; align-self:flex-start;
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:999px;
  border:1px solid var(--stroke); color:var(--primary);
  transition:background-color .25s ease, border-color .25s ease;
}
.ft-mod__go svg{ width:15px; height:15px; }
.ft-mod a:hover .ft-mod__go{ background:var(--accent); border-color:var(--accent); }

@media (max-width:960px){ .ft-mods{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:560px){ .ft-mods{ grid-template-columns:1fr; } }

/* ============================================================
   گروه‌های چیپ
   ============================================================ */
.ft-groups{ display:flex; flex-direction:column; gap:20px; }
.ft-group{
  background:var(--white); border:1px solid var(--stroke);
  border-radius:22px; padding:24px;
}
.ft-sec--white .ft-group{ background:var(--bg); }
.ft-group__t{
  display:block; font-size:.8rem; font-weight:700;
  color:var(--primary); margin-bottom:14px;
  padding-bottom:10px; border-bottom:1px solid var(--stroke);
}
.ft-chips{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0; }
.ft-chips li{
  padding:8px 15px; border-radius:999px;
  border:1px solid var(--stroke);
  font-size:.81rem; font-weight:600; line-height:1.6;
  color:var(--primary); unicode-bidi:plaintext;
  transition:background-color .22s ease, border-color .22s ease;
}
.ft-chips li:hover{ background:var(--accent); border-color:var(--accent); }

/* ============================================================
   انتشار تغییر (Propagation)
   ============================================================ */
.ft-prop{
  display:flex; align-items:stretch; flex-wrap:wrap; gap:0;
}
.ft-prop__node{
  flex:1 1 150px; min-width:0;
  display:flex; flex-direction:column; gap:6px; justify-content:center;
  padding:18px 16px;
  background:var(--white); border:1px solid var(--stroke); border-radius:18px;
  opacity:.45;
  transition:opacity .45s ease, border-color .45s ease, transform .45s ease;
}
.ft-sec--white .ft-prop__node{ background:var(--bg); }
.ft-prop__node strong{
  font-size:.87rem; font-weight:700; color:var(--primary);
  direction:ltr; unicode-bidi:plaintext;
}
.ft-prop--road .ft-prop__node strong{ direction:rtl; }
.ft-prop__node span{ font-size:.76rem; line-height:1.8; color:var(--dzf-muted-2); }
.ft-prop__node--trigger{ background:var(--primary) !important; border-color:var(--primary); }
.ft-prop__node--trigger strong{ color:var(--accent); direction:rtl; }
.ft-prop__node--trigger span{ color:var(--bg); opacity:.7; }

.ft-prop__arrow{
  flex:0 0 30px; align-self:center; position:relative; height:1px;
  background:var(--stroke);
  opacity:.45; transition:opacity .45s ease;
}
/* نوک پیکان با دو ضلعِ یک مربعِ چرخانده ساخته می‌شود. کدام دو ضلع،
   جهت را تعیین می‌کند — و جهت باید هم‌جهت جریان باشد:
   در چیدمان افقیِ راست‌به‌چپ، رو به چپ (bottom + left). */
.ft-prop__arrow::after{
  content:""; position:absolute; left:0; top:50%;
  width:7px; height:7px; margin-top:-3.5px;
  border-bottom:1.6px solid var(--dzf-muted-2);
  border-left:1.6px solid var(--dzf-muted-2);
  transform:rotate(45deg);
}
/* روشن شدن پی‌درپی با ورود به دید */
.ft-prop.is-live .ft-prop__node,
.ft-prop.is-live .ft-prop__arrow{
  opacity:1;
  transition-delay:calc(var(--i) * .16s);
}
.ft-prop.is-live .ft-prop__node{ border-color:var(--primary); }
.ft-prop.is-live .ft-prop__node--trigger{ border-color:var(--primary); }

.ft-prop--road{ margin-top:var(--dzf-space-lg); }

@media (max-width:820px){
  .ft-prop{ flex-direction:column; }
  .ft-prop__node{ flex:1 1 auto; }
  .ft-prop__arrow{
    flex:0 0 26px; width:1px; height:26px; align-self:center; background:var(--stroke);
  }
  /* در چیدمان عمودی جریان رو به پایین است، پس نوک هم رو به پایین:
     right + bottom با همان چرخش ۴۵ درجه. */
  .ft-prop__arrow::after{
    left:50%; top:auto; bottom:0; margin:0 0 0 -3.5px;
    border-bottom:1.6px solid var(--dzf-muted-2);
    border-right:1.6px solid var(--dzf-muted-2);
    border-left:none;
    transform:rotate(45deg);
  }
}

/* ============================================================
   پنل سلامت برند

   زرد اینجا رنگ «نوار» نیست، رنگ «هشدار» است. نسخه‌ی قبلی نوار
   ردیفِ ضعیف را زرد می‌کرد و روی کارت خاکستری هم کم‌کنتراست بود و
   هم شبیه تأکید مثبت دیده می‌شد — یعنی دقیقاً برعکس معنایش.
   حالا همه‌ی نوارها سرمه‌ای‌اند و ردیفِ نیازمند توجه با برچسب و
   نقطه‌ی زرد مشخص می‌شود، نه با رنگ کردن نوار.
   ============================================================ */
.ft-health{
    background:var(--white);                 /* همیشه سفید، در هر دو نوع بخش */
    border:1px solid var(--stroke);
    border-radius:24px; padding:26px;
}
.ft-sec--white .ft-health{ background:var(--white); }
.ft-health__top{
    display:flex; align-items:center; gap:20px;
    padding-bottom:22px; margin-bottom:22px;
    border-bottom:1px solid var(--stroke);
}
.ft-health__ring{ position:relative; width:104px; height:104px; flex-shrink:0; }
.ft-health__ring svg{ width:100%; height:100%; }
.ft-health__bg{ fill:none; stroke:var(--bg); stroke-width:9; }
.ft-health__fg{
    fill:none; stroke:var(--primary); stroke-width:9; stroke-linecap:round;
    stroke-dasharray:326.7; stroke-dashoffset:326.7;
    transition:stroke-dashoffset 1.4s cubic-bezier(.22,.61,.36,1);
}
.ft-health.is-live .ft-health__fg{ stroke-dashoffset:26.1; }
.ft-health__ring b{
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    font-family:var(--dzf-font); font-size:1.5rem; font-weight:800;
    color:var(--primary);
}
.ft-health__id strong{ display:block; font-size:1.05rem; font-weight:700; color:var(--primary); margin-bottom:6px; }
.ft-health__id span{ font-size:.8rem; color:var(--dzf-muted-2); }

.ft-health__rows{ list-style:none; margin:0 0 20px; padding:0; display:flex; flex-direction:column; gap:14px; }
.ft-health__rows li{ display:flex; align-items:center; gap:12px; }
.ft-health__lbl{
    flex:0 0 108px;
    display:flex; align-items:center; gap:7px;
    font-size:.84rem; font-weight:600; color:var(--primary);
}
/* برچسب «بررسی» — تنها جایی که زرد در این پنل ظاهر می‌شود */
.ft-health__lbl i{
    font-style:normal; flex-shrink:0;
    padding:3px 9px; border-radius:999px;
    background:var(--accent); color:var(--primary);
    font-size:.66rem; font-weight:700; line-height:1.4;
}
.ft-health__bar{
    flex:1; height:6px; border-radius:999px;
    background:var(--bg); overflow:hidden;
}
.ft-health__bar i{
    display:block; height:100%; width:0; border-radius:999px;
    background:var(--primary);
    transition:width 1.2s cubic-bezier(.22,.61,.36,1);
}
/* ردیف نیازمند توجه: نوار نیمه‌شفاف می‌شود، نه زرد */
.ft-health__rows .is-warn .ft-health__bar i{ opacity:.4; }
.ft-health.is-live .ft-health__bar i{ width:var(--v); }
.ft-health__val{ flex:0 0 44px; text-align:left; font-size:.8rem; font-weight:700; color:var(--dzf-muted); }

.ft-health__msg{
    display:flex; align-items:flex-start; gap:10px;
    margin:0; padding:14px 18px;
    background:var(--bg); border-radius:16px;
    font-size:.83rem; line-height:1.9; color:var(--primary);
}
.ft-health__msg::before{
    content:""; flex-shrink:0;
    width:8px; height:8px; margin-top:.55em;
    border-radius:50%; background:var(--accent);
}

@media (max-width:520px){
    .ft-health{ padding:20px 18px; border-radius:18px; }
    .ft-health__top{ gap:14px; }
    .ft-health__ring{ width:86px; height:86px; }
    .ft-health__lbl{ flex-basis:92px; font-size:.79rem; }
    .ft-health__lbl i{ display:none; }   /* در عرض کم، نقطه‌ی پیام کافی است */
}

/* ============================================================
   نوار «لایه‌ی مشترک» — حافظه‌ی برند

   حافظه ماژول نیست، پس نه کاشی می‌شود نه ردیف. یک نوار زیر مجموعه
   با آکولاد رو به بالا: خودِ شکل می‌گوید «این زیرِ همه‌ی آن‌هاست».
   خط‌چین هم عمدی است — مرزِ یک لایه، نه یک جعبه.
   ============================================================ */
.ft-layer{ margin-top:22px; }
.ft-layer__brace{
    display:block; height:16px;
    margin:0 6%;
    border:1.5px dashed var(--primary);
    border-bottom:none;
    border-radius:14px 14px 0 0;
    opacity:.45;
}
.ft-layer__box{
    padding:26px 28px;
    background:var(--white);
    /* خط‌چین سرمه‌ای، نه زرد: زرد رنگ تأکید است و روی یک قاب بلند
       شلوغ و کم‌دقت دیده می‌شد. مرزِ یک «لایه» باید آرام باشد. */
    border:1.5px dashed var(--primary);
    border-radius:22px;
}
.ft-sec--white .ft-layer__box{ background:var(--bg); }
.ft-layer__head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.ft-layer__tag{
    padding:5px 14px; border-radius:999px;
    background:var(--accent); color:var(--primary);
    font-size:.72rem; font-weight:700;
}
.ft-layer__en{
    font-size:.86rem; font-weight:700; letter-spacing:.04em;
    color:var(--primary); direction:ltr; unicode-bidi:plaintext;
}
.ft-layer__title{
    font-family:var(--dzf-font); font-weight:700;
    font-size:1.1rem; line-height:1.6; color:var(--primary);
    margin:0 0 12px;
}
.ft-layer__box p{ margin:0; font-size:.9rem; line-height:2; color:var(--dzf-muted); }
.ft-layer__box p + p{ margin-top:10px; }

@media (max-width:520px){
    .ft-layer__box{ padding:20px 18px; border-radius:18px; }
    .ft-layer__brace{ margin:0 12%; }
}

/* ============================================================
   «چه چیزی در اختیار شماست»
   ============================================================ */
.ft-gets{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;
}
.ft-get{
  display:flex; align-items:flex-start; gap:16px;
  background:var(--bg); border:1px solid var(--stroke);
  border-radius:20px; padding:24px 22px;
}
.ft-get__n{
  flex-shrink:0;
  font-family:var(--dzf-font); font-weight:800; font-size:1.35rem;
  color:var(--primary); opacity:.16; direction:ltr; line-height:1.2;
}
.ft-get strong{ display:block; font-size:.96rem; font-weight:700; color:var(--primary); margin-bottom:8px; }
.ft-get p{ margin:0; font-size:.84rem; line-height:1.95; color:var(--dzf-muted); }

@media (max-width:960px){ .ft-gets{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:560px){ .ft-gets{ grid-template-columns:1fr; } }

/* ============================================================
   مرزهای محصول
   ============================================================ */
.ft-out{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(5, 1fr); gap:14px;
}
.ft-out__item{
  position:relative;
  background:var(--bg); border:1px dashed var(--stroke);
  border-radius:18px; padding:22px 18px;
  transition:border-color .25s ease;
}
.ft-out__item strong{
  display:block; font-size:.95rem; font-weight:700; color:var(--primary);
  direction:ltr; unicode-bidi:plaintext; margin-bottom:8px;
  /* خط روی نام: مرز محصول را بی‌کلام می‌گوید */
  position:relative;
}
/* خط روی نام و برچسب «خارج از دیزیفی» با اسکرول اجرا می‌شوند، نه با
   هاور: روی موبایل هاور وجود ندارد و پیام این بخش اصلاً دیده نمی‌شد.
   هر کارت دقیقاً یک ثانیه سهم دارد — خط در ۵۰۰ms کشیده می‌شود و
   برچسب ۴۵۰ms بعد از شروع می‌آید. */
.ft-out__item strong::after{
  content:""; position:absolute; right:0; top:52%;
  height:1.5px; width:0; background:var(--dzf-muted-2);
}
.ft-out__item span{ display:block; font-size:.8rem; line-height:1.85; color:var(--dzf-muted-2); }
.ft-out__item em{
  display:block; margin-top:12px;
  font-size:.7rem; font-weight:700; font-style:normal;
  color:var(--dzf-muted-3);
  opacity:0; transform:translateY(-4px);
}
.ft-out.is-live .ft-out__item{
  animation:ft-out-on .5s ease forwards;
  animation-delay:calc(var(--i) * 1s);
}
.ft-out.is-live .ft-out__item strong::after{
  animation:ft-out-strike .5s cubic-bezier(.22,.61,.36,1) forwards;
  animation-delay:calc(var(--i) * 1s);
}
.ft-out.is-live .ft-out__item em{
  animation:ft-out-tag .4s ease forwards;
  animation-delay:calc(var(--i) * 1s + .45s);
}
@keyframes ft-out-strike{ to{ width:100%; } }
@keyframes ft-out-tag{ to{ opacity:1; transform:none; } }
@keyframes ft-out-on{ to{ border-color:var(--primary); } }

@media (max-width:1024px){ .ft-out{ grid-template-columns:repeat(3, 1fr); } }
@media (max-width:640px){  .ft-out{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:400px){  .ft-out{ grid-template-columns:1fr; } }

/* ============================================================
   ابروی بخش‌ها
   .dzf-eyebrow-dot فقط در legal.css تعریف شده بود و این صفحه آن را
   لود نمی‌کند؛ پس همان‌جا که استفاده می‌شود تعریف هم می‌شود.
   ============================================================ */
.ft-hero .dzf-eyebrow-dot,
.ft-sec .dzf-eyebrow-dot{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.86rem; font-weight:700; color:var(--primary);
}
.ft-hero .dzf-eyebrow-dot::before,
.ft-sec .dzf-eyebrow-dot::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:var(--accent); flex-shrink:0;
}

/* ============================================================
   CTA پایانی
   کلاس‌ها عمداً ft- هستند نه dzf-cta-final: نسخه‌ی dzf در دو فایل
   با دو ساختار متفاوت تعریف شده (pages.css و index.css) و این صفحه
   فقط اولی را لود می‌کند.
   ============================================================ */
.ft-final{ background:var(--bg); padding:var(--dzf-space-xxl) var(--dzf-gutter); }
.ft-final, .ft-final *, .ft-final *::before, .ft-final *::after{ box-sizing:border-box; }
.ft-final__box{
  max-width:var(--dzf-container); margin:0 auto;
  background:var(--primary); border:1px solid var(--primary);
  border-radius:32px;
  padding:clamp(44px, 7vw, 80px) clamp(24px, 6vw, 60px);
  text-align:center;
}
.ft-final__badge{
  display:inline-block; margin-bottom:22px;
  padding:6px 18px; border-radius:999px;
  background:var(--accent); color:var(--primary);
  font-size:.78rem; font-weight:700;
}
.ft-final__title{
  font-family:var(--dzf-font); font-weight:800;
  font-size:clamp(1.5rem, 3.4vw, 2.4rem); line-height:1.45;
  color:var(--white); margin:0 0 18px; text-wrap:balance;
}
.ft-final__title .hl::after{ opacity:.6; }
.ft-final__desc{
  max-width:660px; margin:0 auto 34px;
  font-size:.98rem; line-height:2; color:var(--bg); opacity:.78;
}
.ft-final__actions{
  display:flex; align-items:center; justify-content:center;
  gap:16px; flex-wrap:wrap;
}
.ft-final__btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 32px; border-radius:999px;
  font-size:15px; font-weight:600; line-height:1; white-space:nowrap;
  transition:background-color .25s ease, color .25s ease,
             border-color .25s ease, transform .25s ease;
}
.ft-final__btn--primary{ background:var(--accent); color:var(--primary); border:1px solid var(--accent); }
.ft-final__btn--primary:hover{ background:var(--white); border-color:var(--white); transform:translateY(-3px); }
.ft-final__btn--ghost{ background:transparent; color:var(--bg); border:1px solid rgba(226,227,231,.35); }
.ft-final__btn--ghost:hover{ border-color:var(--bg); transform:translateY(-3px); }
.ft-final__micro{
  margin:22px 0 0; font-size:.83rem; line-height:1.9;
  color:var(--bg); opacity:.6;
}
@media (max-width:640px){
  .ft-final{ padding:56px var(--dzf-gutter); }
  .ft-final__box{ border-radius:24px; }
  .ft-final__actions{ flex-direction:column; }
  .ft-final__btn{ width:100%; }
}

/* ============================================================
   هسته‌ی هوشمند — بخش هوشمندی

   داستان در سه حرکت: داده وارد هسته می‌شود، هسته کار می‌کند،
   پیشنهاد بیرون می‌آید. هیچ ذره، درخشش، گرادیان یا افکت شیشه‌ای —
   فقط جابه‌جایی، محو شدن و یک چرخش بسیار آرام.

   چیدمان HTML است نه SVG، چون در عرض کم باید از سه ستون به یک
   ستون عمودی تبدیل شود و جهت حرکت هم عوض شود.
   ============================================================ */
.ft-ai{
    background:var(--white);
    border:1px solid var(--stroke);
    border-radius:24px;
    overflow:hidden;
    margin-bottom:24px;
}
.ft-sec--white .ft-ai{ background:var(--bg); }

/* ---------- نوار وضعیت ---------- */
.ft-ai__bar{
    display:flex; align-items:center; gap:10px;
    padding:14px 20px;
    border-bottom:1px solid var(--stroke);
}
.ft-ai__dot{
    width:9px; height:9px; border-radius:50%; flex-shrink:0;
    background:var(--dzf-muted-3);
    transition:background-color .3s ease;
}
.ft-ai.is-busy .ft-ai__dot{ background:var(--accent); animation:ft-ai-beat 1s ease-in-out infinite; }
.ft-ai.is-ready .ft-ai__dot{ background:var(--primary); }
@keyframes ft-ai-beat{ 0%,100%{ opacity:.3; } 50%{ opacity:1; } }

.ft-ai__state{ flex:1; font-size:.82rem; font-weight:600; color:var(--primary); }
.ft-ai__badge{
    flex-shrink:0; padding:4px 12px; border-radius:999px;
    border:1px solid var(--stroke);
    font-size:.68rem; font-weight:700; color:var(--dzf-muted-2);
}
.ft-ai__replay{
    flex-shrink:0; padding:6px 16px; border-radius:999px;
    background:transparent; border:1px solid var(--stroke);
    font-family:var(--dzf-font); font-size:.74rem; font-weight:700;
    color:var(--primary); cursor:pointer;
    transition:background-color .22s ease, border-color .22s ease;
}
.ft-ai__replay:hover{ background:var(--accent); border-color:var(--accent); }
.ft-ai__replay:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }

/* ---------- صحنه ---------- */
.ft-ai__stage{
    display:grid; grid-template-columns:1fr auto 1fr;
    align-items:center; gap:clamp(16px, 3vw, 40px);
    padding:clamp(24px, 4vw, 44px) clamp(18px, 3vw, 36px);
}
.ft-ai__col{ min-width:0; }
.ft-ai__colt{
    display:block; margin-bottom:14px;
    font-size:.74rem; font-weight:700; color:var(--primary); opacity:.5;
}
.ft-ai__col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }

/* ---------- ورودی‌ها ---------- */
.ft-ai__chip{
    position:relative;
    display:flex; flex-direction:column; gap:2px;
    padding:12px 16px; border-radius:14px;
    background:var(--bg); border:1px solid var(--stroke);
    transition:transform .7s cubic-bezier(.4,0,.2,1),
               opacity .7s ease, border-color .4s ease;
}
.ft-sec--white .ft-ai__chip{ background:var(--white); }
.ft-ai__chip strong{ font-size:.85rem; font-weight:700; color:var(--primary); unicode-bidi:plaintext; }
.ft-ai__chip em{ font-style:normal; font-size:.74rem; color:var(--dzf-muted-2); }

/* نقطه‌ای که از هر ورودی به سمت هسته می‌رود.
   جهت منفیِ X یعنی «به سمت چپ» — هسته در چیدمان راست‌به‌چپ آنجاست. */
.ft-ai__chip::after{
    content:""; position:absolute; left:-10px; top:50%;
    width:7px; height:7px; margin-top:-3.5px;
    border-radius:50%; background:var(--accent);
    opacity:0;
}
.ft-ai.is-busy .ft-ai__chip{
    transform:translateX(-14px); opacity:.4;
    border-color:var(--stroke);
    transition-delay:calc(var(--i) * .16s);
}
.ft-ai.is-busy .ft-ai__chip::after{
    animation:ft-ai-travel .85s cubic-bezier(.4,0,.2,1) forwards;
    animation-delay:calc(var(--i) * .16s);
}
@keyframes ft-ai-travel{
    0%  { transform:translateX(0);    opacity:0; }
    15% { opacity:1; }
    85% { opacity:1; }
    100%{ transform:translateX(-46px); opacity:0; }
}
/* بعد از تحلیل، ورودی‌ها برمی‌گردند ولی آرام‌تر از قبل می‌مانند —
   تمرکز باید روی ستون خروجی باشد. */
.ft-ai.is-ready .ft-ai__chip{ transform:none; opacity:.72; }

/* ---------- هسته ---------- */
.ft-ai__core{
    position:relative;
    width:clamp(150px, 20vw, 196px);
    aspect-ratio:1;
    border-radius:50%;
    background:var(--primary);
    display:grid; place-items:center;
    flex-shrink:0;
    transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
.ft-ai.is-busy .ft-ai__core{ transform:scale(1.04); }

/* حلقه‌ها تا وقتی بخش دیده نشده اصلاً نمی‌چرخند.
   دو انیمیشن بی‌نهایتِ همیشه‌روشن، روی موبایل بی‌دلیل باتری
   می‌خورد — آن هم برای چیزی که کاربر هنوز ندیده است. */
.ft-ai__ring{
    position:absolute; inset:12px;
    border:1px dashed rgba(226,227,231,.3);
    border-radius:50%;
}
.ft-ai__ring--2{
    inset:30px;
    border-style:solid;
    border-color:rgba(226,227,231,.16);
}
.ft-ai.is-busy .ft-ai__ring,
.ft-ai.is-ready .ft-ai__ring{ animation:ft-ai-spin 40s linear infinite; }
.ft-ai.is-busy .ft-ai__ring--2,
.ft-ai.is-ready .ft-ai__ring--2{ animation-duration:28s; animation-direction:reverse; }
.ft-ai.is-busy .ft-ai__ring{ animation-duration:5s; border-color:rgba(252,193,1,.55); }
.ft-ai.is-busy .ft-ai__ring--2{ animation-duration:3.5s; }
@keyframes ft-ai-spin{ to{ transform:rotate(360deg); } }

/* هر گره یک دایره‌ی هم‌اندازه‌ی حلقه است که چرخانده شده و نقطه‌اش
   روی لبه‌ی بالایی می‌نشیند. این‌طور گره‌ها دقیقاً روی حلقه قرار
   می‌گیرند، مستقل از اینکه قطر هسته با clamp چقدر شده باشد. */
.ft-ai__nodes{ position:absolute; inset:0; }
.ft-ai__nodes i{
    position:absolute; inset:12px;
    border-radius:50%;
    transform:rotate(var(--a));
}
.ft-ai__nodes i::before{
    content:""; position:absolute;
    top:-3px; left:50%; margin-left:-3px;
    width:6px; height:6px; border-radius:50%;
    background:var(--accent); opacity:.22;
}
.ft-ai.is-busy .ft-ai__nodes i::before{
    animation:ft-ai-node 1.6s ease-in-out infinite;
    animation-delay:calc(var(--n) * .12s);
}
@keyframes ft-ai-node{ 0%,100%{ opacity:.22; } 50%{ opacity:1; } }

.ft-ai__label{ position:relative; z-index:1; text-align:center; }
.ft-ai__label strong{
    display:block; font-size:.95rem; font-weight:800;
    color:var(--accent); letter-spacing:.02em;
}
.ft-ai__label em{
    display:block; margin-top:3px;
    font-style:normal; font-size:.68rem; font-weight:600;
    color:var(--bg); opacity:.6; letter-spacing:.04em;
}

/* ---------- خروجی‌ها ---------- */
.ft-ai__out{
    display:flex; align-items:flex-start; gap:11px;
    padding:13px 15px; border-radius:14px;
    background:var(--bg); border:1px solid var(--stroke);
    opacity:0; transform:translateX(18px);
}
.ft-sec--white .ft-ai__out{ background:var(--white); }
.ft-ai.is-ready .ft-ai__out{
    animation:ft-ai-out .5s cubic-bezier(.22,.61,.36,1) forwards;
    animation-delay:calc(var(--i) * .14s);
}
@keyframes ft-ai-out{ to{ opacity:1; transform:none; } }

.ft-ai__tick{
    display:flex; align-items:center; justify-content:center;
    width:22px; height:22px; flex-shrink:0; margin-top:.05em;
    border-radius:50%;
    background:var(--accent); color:var(--primary);
}
.ft-ai__tick svg{ width:13px; height:13px; }
.ft-ai__otxt{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.ft-ai__otxt strong{
    display:flex; align-items:center; gap:8px; flex-wrap:wrap;
    font-size:.84rem; font-weight:700; color:var(--primary);
}
.ft-ai__otxt strong b{
    font-size:.72rem; font-weight:700;
    padding:3px 9px; border-radius:999px;
    background:var(--primary); color:var(--bg);
}
.ft-ai__otxt em{ font-style:normal; font-size:.74rem; line-height:1.7; color:var(--dzf-muted-2); }

.ft-ai__caption{
    margin:0; padding:16px 20px;
    border-top:1px solid var(--stroke);
    text-align:center;
    font-size:.86rem; font-weight:600; color:var(--primary);
}

/* ---------- عرض کم: صحنه عمودی می‌شود ---------- */
@media (max-width:860px){
    .ft-ai__stage{ grid-template-columns:1fr; justify-items:stretch; gap:22px; }
    .ft-ai__core{ justify-self:center; }
    /* حالا هسته پایینِ ورودی‌هاست، پس حرکت باید رو به پایین باشد */
    .ft-ai.is-busy .ft-ai__chip{ transform:translateY(10px); }
    .ft-ai__chip::after{ left:50%; top:auto; bottom:-10px; margin:0 0 0 -3.5px; }
    @keyframes ft-ai-travel{
        0%  { transform:translateY(0);   opacity:0; }
        15% { opacity:1; }
        85% { opacity:1; }
        100%{ transform:translateY(30px); opacity:0; }
    }
    .ft-ai__out{ transform:translateY(14px); }
    .ft-ai__bar{ flex-wrap:wrap; }
    .ft-ai__state{ flex:1 1 100%; order:-1; }
}
@media (max-width:520px){
    .ft-ai{ border-radius:18px; }
    .ft-ai__stage{ padding:22px 16px; }
}

/* ============================================================
   لنگر داخل صفحه
   هدر چسبان است؛ بدون این، بعد از پرش به #ft-map تیتر زیر هدر
   پنهان می‌شود و کاربر فکر می‌کند وسط بخش فرود آمده.
   ============================================================ */
.ft-sec[id], .ft-hero[id]{ scroll-margin-top:96px; }

/* ============================================================
   نوار CTA میانی
   عمداً سرمه‌ای است: بین دو بخش روشن و خاکستری، یک باند تیره
   مکث می‌سازد و چشم را روی اقدام نگه می‌دارد.
   ============================================================ */
.ft-mid{ background:var(--white); padding:0 var(--dzf-gutter); }
.ft-mid, .ft-mid *, .ft-mid *::before, .ft-mid *::after{ box-sizing:border-box; }
.ft-mid__inner{
  max-width:var(--dzf-container); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:24px;
  padding:clamp(26px, 3.4vw, 40px) clamp(24px, 3.4vw, 44px);
  background:var(--primary);
  border-radius:26px;
}
.ft-mid__txt strong{
  display:block; font-family:var(--dzf-font);
  font-size:clamp(1.05rem, 2vw, 1.3rem); font-weight:700;
  color:var(--white); line-height:1.6; margin-bottom:8px;
}
.ft-mid__txt span{ font-size:.88rem; line-height:1.85; color:var(--bg); opacity:.7; }
.ft-mid__btns{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.ft-mid__btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:13px 28px; border-radius:999px;
  font-size:14.5px; font-weight:600; line-height:1; white-space:nowrap;
  transition:background-color .25s ease, color .25s ease,
             border-color .25s ease, transform .25s ease;
}
.ft-mid__btn--primary{ background:var(--accent); color:var(--primary); border:1px solid var(--accent); }
.ft-mid__btn--primary:hover{ background:var(--white); border-color:var(--white); transform:translateY(-3px); }
.ft-mid__btn--ghost{ background:transparent; color:var(--bg); border:1px solid rgba(226,227,231,.35); }
.ft-mid__btn--ghost:hover{ border-color:var(--bg); transform:translateY(-3px); }

@media (max-width:760px){
  .ft-mid__inner{ flex-direction:column; align-items:stretch; text-align:center; border-radius:20px; }
  .ft-mid__btns{ flex-direction:column; }
  .ft-mid__btn{ width:100%; }
}

/* ============================================================
   کاهش انیمیشن
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .ft-sys__mem, .ft-sys__pulse{ animation:none !important; }
  .ft-sys__line{ stroke-dashoffset:0 !important; animation:none !important; }
  .ft-sys__node{ opacity:1 !important; animation:none !important; }
  .ft-health__fg{ transition:none !important; stroke-dashoffset:26.1 !important; }
  .ft-health__bar i{ transition:none !important; width:var(--v) !important; }
  .ft-prop__node, .ft-prop__arrow, .ft-chain__step{
    opacity:1 !important; transition:none !important;
  }
  .ft-ai__chip, .ft-ai__out{
    opacity:1 !important; transform:none !important; animation:none !important;
  }
  .ft-ai__chip::after{ animation:none !important; opacity:0 !important; }
  .ft-ai__dot, .ft-ai__ring, .ft-ai__nodes i::before{ animation:none !important; }
  .ft-ai__core{ transform:none !important; }
  .ft-out.is-live .ft-out__item,
  .ft-out.is-live .ft-out__item strong::after,
  .ft-out.is-live .ft-out__item em{ animation-delay:0s !important; animation-duration:.01ms !important; }
  .ft-card, .ft-mod a, .ft-link, .ft-final__btn, .ft-mid__btn,
  .ft-out__item strong::after{ transition:none !important; }
  .ft-card:hover, .ft-mod a:hover, .ft-link:hover,
  .ft-final__btn:hover, .ft-mid__btn:hover{ transform:none; }
}