/* ============================================================
   DISIPHEE — صفحه‌ی راهکارها (/for-whom)

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

   زبان حرکتی این صفحه سه فعل بیشتر ندارد:
     Reveal — ورود محتوا
     Draw   — هر ارتباط و مسیر
     Morph  — تغییر وضعیت (انتخاب صنف، انتخاب مسئله)
   Pulse فقط روی چیزهای «زنده» است، نه همه‌جا.
   ============================================================ */

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

.fw-hero .hl, .fw-sec .hl, .fw-final .hl{ position:relative; display:inline-block; z-index:1; }
.fw-hero .hl::after, .fw-sec .hl::after, .fw-final .hl::after{
  content:""; position:absolute; right:0; left:0; bottom:.06em;
  height:.3em; background:var(--accent); opacity:.55; z-index:-1; border-radius:4px;
}

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

/* ============================================================
   ۰۱ — هرو
   ============================================================ */
.fw-hero{
  background:var(--white);
  padding:clamp(32px, 4.5vw, 60px) var(--dzf-gutter) clamp(40px, 5vw, 72px);
}
.fw-hero__inner{
  max-width:var(--dzf-container); margin:0 auto;
  display:grid; grid-template-columns:1fr .88fr;
  gap:clamp(24px, 4vw, 56px); align-items:center;
}
.fw-hero__txt h1{
  font-family:var(--dzf-font);
  font-size:clamp(1.6rem, 3.9vw, 2.7rem);
  font-weight:800; letter-spacing:-.02em; line-height:1.45;
  color:var(--primary); margin:14px 0 16px; text-wrap:balance;
}
.fw-hero__txt > p{
  font-size:clamp(.9rem, 1.4vw, 1.02rem);
  line-height:2.05; color:var(--dzf-muted); margin:0; max-width:54ch;
}

.fw-hero__states{
  list-style:none; margin:22px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:10px;
}
.fw-state{
  width:100%; height:100%; text-align:right;
  display:flex; flex-direction:column; gap:6px;
  padding:14px 16px; border-radius:16px;
  background:var(--bg); border:1px solid var(--stroke);
  cursor:pointer;
  transition:border-color .25s ease, background-color .25s ease, transform .25s ease;
}
.fw-state strong{ font-size:.87rem; font-weight:700; color:var(--primary); }
.fw-state span{ font-size:.76rem; line-height:1.75; color:var(--dzf-muted-2); }
.fw-state:hover, .fw-state.is-on{ border-color:var(--primary); transform:translateY(-3px); }
.fw-state:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.fw-hero__btns{ display:flex; gap:12px; flex-wrap:wrap; margin-top:var(--dzf-space-md); }

/* ---------- درخت سه‌مسیره ---------- */
.fw-hero__vis{ display:flex; justify-content:center; }
.fw-tree{ width:100%; max-width:440px; height:auto; overflow:visible; }

.fw-tree__line{
  fill:none; stroke:var(--stroke); stroke-width:1.6;
  stroke-dasharray:320; stroke-dashoffset:320;
  animation:fw-draw .8s cubic-bezier(.22,.61,.36,1) forwards .2s;
  transition:stroke .3s ease, stroke-width .3s ease;
}
.fw-tree__core rect{ fill:var(--primary); stroke:var(--primary); }
.fw-tree__core .fw-tree__en{ fill:var(--accent); }
.fw-tree__core .fw-tree__fa{ fill:var(--bg); opacity:.8; }
.fw-tree__leaf rect{
  fill:var(--white); stroke:var(--stroke); stroke-width:1.6;
  transition:stroke .3s ease, fill .3s ease;
}
.fw-tree__en{
  font-family:var(--dzf-font); font-size:12px; font-weight:700;
  fill:var(--primary); direction:ltr; letter-spacing:.04em;
}
.fw-tree__fa{
  font-family:var(--dzf-font); font-size:11.5px; font-weight:600;
  fill:var(--dzf-muted-2);
}
.fw-tree__leaf{
  opacity:0;
  animation:fw-in .5s cubic-bezier(.22,.61,.36,1) forwards;
  animation-delay:calc(.55s + var(--i) * .12s);
  transition:opacity .3s ease;
}
.fw-tree__pulse{
  fill:var(--accent);
  animation:fw-beat 3.2s ease-in-out infinite;
  animation-delay:calc(1.2s + var(--i) * .35s);
}

/* هاور روی هر شاخه: همان مسیر روشن، دو مسیر دیگر کم‌رنگ */
.fw-tree.is-focus .fw-tree__leaf{ opacity:.32; }
.fw-tree.is-focus .fw-tree__leaf.is-on{ opacity:1; }
.fw-tree.is-focus .fw-tree__leaf.is-on rect{ stroke:var(--primary); }
.fw-tree.is-focus .fw-tree__line{ stroke:var(--stroke); }
.fw-tree.is-focus .fw-tree__line.is-on{ stroke:var(--accent); stroke-width:2.4; }

@keyframes fw-draw{ to{ stroke-dashoffset:0; } }
@keyframes fw-in{ to{ opacity:1; } }
@keyframes fw-beat{
  0%,100%{ opacity:.25; }
  50%    { opacity:1; }
}

@media (max-width:960px){
  .fw-hero__inner{ grid-template-columns:1fr; }
  .fw-hero__vis{ order:-1; }
  .fw-tree{ max-width:360px; }
}
@media (max-width:560px){
  .fw-hero__states{ grid-template-columns:1fr; }
}

/* ============================================================
   بستر بخش‌ها
   ============================================================ */
.fw-sec{ background:var(--bg); padding:var(--dzf-space-xxl) var(--dzf-gutter); }
.fw-sec--white{ background:var(--white); }
.fw-sec__inner{ max-width:var(--dzf-container); margin:0 auto; }

.fw-head{ max-width:780px; margin:0 0 var(--dzf-space-lg); }
.fw-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;
}
.fw-head p{ font-size:.93rem; line-height:2.05; color:var(--dzf-muted); margin:0; }

.fw-note{
  margin:var(--dzf-space-lg) 0 0; padding:18px 24px;
  background:var(--white); border:1px solid var(--stroke); border-radius:18px;
  font-size:.85rem; line-height:2; color:var(--dzf-muted);
}
.fw-sec--white .fw-note{ background:var(--bg); }
.fw-note--center{ text-align:center; }

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

@media (max-width:520px){ .fw-sec{ padding:56px var(--dzf-gutter); } }

/* ============================================================
   ۰۲ — سه مرحله
   ============================================================ */
.fw-stages{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.fw-stage{
  display:flex; flex-direction:column;
  background:var(--bg); border:1px solid var(--stroke);
  border-radius:24px; padding:28px 26px;
  position:relative; overflow:hidden;
  transition:border-color .25s ease, transform .25s ease;
}
.fw-stage::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);
}
.fw-stage:hover, .fw-stage.is-on{ border-color:var(--primary); transform:translateY(-4px); }
.fw-stage:hover::before, .fw-stage.is-on::before{ transform:scaleX(1); }

.fw-stage__top{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.fw-stage__num{
  font-family:var(--dzf-font); font-weight:800; font-size:1.6rem;
  color:var(--primary); opacity:.14; direction:ltr; line-height:1;
}
.fw-stage__tag{
  padding:5px 14px; border-radius:999px;
  background:var(--accent); color:var(--primary);
  font-size:.72rem; font-weight:700;
}
.fw-stage__title{ font-size:1.06rem; font-weight:700; color:var(--primary); margin:0 0 10px; line-height:1.6; }
.fw-stage__text{ font-size:.86rem; line-height:1.95; color:var(--dzf-muted); margin:0 0 20px; }
.fw-stage__lbl{
  display:block; font-size:.76rem; font-weight:700;
  color:var(--primary); opacity:.5; margin-bottom:10px;
}
.fw-stage__signs{ list-style:none; margin:0 0 20px; padding:0; display:flex; flex-direction:column; gap:8px; }
.fw-stage__signs li{
  position:relative; padding-right:18px;
  font-size:.83rem; line-height:1.85; color:var(--dzf-muted);
}
.fw-stage__signs li::before{
  content:""; position:absolute; right:0; top:.68em;
  width:6px; height:6px; border-radius:50%; background:var(--dzf-muted-3);
}

/* مسیر داخل کارت — با ورود به دید یکی‌یکی روشن می‌شود */
.fw-flow{
  list-style:none; margin:0 0 18px; padding:0;
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 4px;
}
.fw-flow li{
  padding:7px 13px; border-radius:999px;
  background:var(--white); border:1px solid var(--stroke);
  font-size:.75rem; font-weight:700; color:var(--primary);
  direction:ltr; unicode-bidi:plaintext;
  opacity:.42;
  transition:opacity .4s ease, border-color .4s ease;
}
.fw-sec--white .fw-flow li{ background:var(--bg); }
.fw-flow li + li{ position:relative; margin-right:12px; }
.fw-flow li + li::before{
  content:""; position:absolute; right:-12px; top:50%;
  width:12px; height:1px; background:var(--stroke);
}
.fw-flow.is-live li{ opacity:1; border-color:var(--primary); transition-delay:calc(var(--i) * .1s); }

.fw-stage__gain{
  margin:auto 0 0; padding-top:16px;
  border-top:1px solid var(--stroke);
  font-size:.85rem; line-height:1.95; font-weight:600; color:var(--primary);
}

@media (max-width:1024px){ .fw-stages{ grid-template-columns:1fr; } }
@media (max-width:520px){ .fw-stage{ padding:22px 18px; border-radius:18px; } }

/* ============================================================
   ۰۳ — کنسول تشخیص
   ============================================================ */
.fw-diag{
  display:grid; grid-template-columns:1fr 1.05fr;
  gap:20px; align-items:start;
}
.fw-diag__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.fw-diag__q{
  width:100%; text-align:right;
  display:flex; align-items:center; gap:12px;
  padding:16px 20px; border-radius:18px;
  background:var(--white); border:1px solid var(--stroke);
  font-size:.9rem; font-weight:600; color:var(--dzf-muted);
  cursor:pointer;
  transition:border-color .25s ease, color .25s ease, transform .25s ease;
}
.fw-sec--white .fw-diag__q{ background:var(--bg); }
.fw-diag__dot{
  width:9px; height:9px; border-radius:50%; flex-shrink:0;
  background:var(--dzf-muted-3);
  transition:background-color .25s ease;
}
.fw-diag__q:hover{ border-color:var(--primary); color:var(--primary); transform:translateX(-4px); }
.fw-diag__q.is-on{ border-color:var(--primary); color:var(--primary); }
.fw-diag__q.is-on .fw-diag__dot{ background:var(--accent); }
.fw-diag__q:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.fw-diag__panels{
  background:var(--white); border:1px solid var(--stroke);
  border-radius:24px; padding:28px 26px;
  min-height:100%;
}
.fw-sec--white .fw-diag__panels{ background:var(--bg); }
.fw-diag__panel[hidden]{ display:none; }
.fw-diag__panel{ animation:fw-fade .35s cubic-bezier(.22,.61,.36,1); }
.fw-diag__mod{
  display:inline-block; margin-bottom:14px;
  padding:6px 16px; border-radius:999px;
  background:var(--accent); color:var(--primary);
  font-size:.74rem; font-weight:700;
}
.fw-diag__a{ margin:0 0 18px; font-size:.9rem; line-height:2; color:var(--dzf-muted); }
.fw-diag__ui{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.fw-diag__ui li{
  padding:8px 15px; border-radius:999px;
  border:1px solid var(--stroke);
  font-size:.79rem; font-weight:600; color:var(--primary);
  unicode-bidi:plaintext;
}
@keyframes fw-fade{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

@media (max-width:900px){ .fw-diag{ grid-template-columns:1fr; } }

/* ============================================================
   ۰۴+۰۵ — انتخاب صنف و پیش‌نمایش مسیر
   ============================================================ */
.fw-ind{ display:grid; grid-template-columns:1.2fr 1fr; gap:24px; align-items:start; }
.fw-ind__pick{ display:flex; flex-direction:column; gap:20px; }
.fw-ind__gt{
  display:block; margin-bottom:12px; padding-bottom:8px;
  border-bottom:1px solid var(--stroke);
  font-size:.78rem; font-weight:700; color:var(--primary); opacity:.55;
}
.fw-ind__group ul{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.fw-ind__btn{
  width:100%; height:100%; text-align:right;
  display:flex; flex-direction:column; gap:5px;
  padding:14px 16px; border-radius:16px;
  background:var(--bg); border:1px solid var(--stroke);
  cursor:pointer;
  transition:border-color .22s ease, background-color .22s ease, transform .22s ease;
}
.fw-sec--white .fw-ind__btn{ background:var(--bg); }
.fw-ind__btn strong{ font-size:.86rem; font-weight:700; color:var(--primary); }
.fw-ind__btn span{ font-size:.74rem; line-height:1.75; color:var(--dzf-muted-2); }
.fw-ind__btn:hover{ border-color:var(--primary); transform:translateY(-3px); }
.fw-ind__btn.is-on{ border-color:var(--primary); background:var(--primary); }
.fw-ind__btn.is-on strong{ color:var(--accent); }
.fw-ind__btn.is-on span{ color:var(--bg); opacity:.75; }
.fw-ind__btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* ---------- پیش‌نمایش ---------- */
.fw-prev{
  position:sticky; top:100px;
  background:var(--bg); border:1px solid var(--stroke);
  border-radius:24px; padding:26px 24px;
}
.fw-sec--white .fw-prev{ background:var(--bg); }
.fw-prev__empty{ text-align:center; padding:26px 8px; }
.fw-prev__hint{
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; margin-bottom:14px;
  border-radius:999px; border:1px solid var(--stroke); color:var(--primary);
}
.fw-prev__hint svg{ width:20px; height:20px; }
.fw-prev__empty strong{ display:block; font-size:.98rem; color:var(--primary); margin-bottom:8px; }
.fw-prev__empty p{ margin:0; font-size:.83rem; line-height:1.95; color:var(--dzf-muted-2); }

.fw-prev__head{ margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid var(--stroke); }
.fw-prev__eyebrow{ display:block; font-size:.74rem; font-weight:700; color:var(--primary); opacity:.5; margin-bottom:6px; }
.fw-prev__name{ font-size:1.08rem; font-weight:700; color:var(--primary); }

.fw-prev__path{ list-style:none; margin:0 0 20px; padding:0; display:flex; flex-direction:column; gap:0; }
.fw-prev__path li{
  position:relative; display:flex; align-items:center; gap:12px;
  padding:9px 0 9px 0;
  font-size:.83rem; font-weight:700; color:var(--primary);
  direction:ltr; unicode-bidi:plaintext;
  opacity:0; transform:translateY(8px);
  animation:fw-step .4s cubic-bezier(.22,.61,.36,1) forwards;
  animation-delay:calc(var(--i) * .07s);
}
.fw-prev__path li i{
  width:9px; height:9px; border-radius:50%; flex-shrink:0;
  background:var(--accent); position:relative; z-index:1;
}
/* خط عمودی که گام‌ها را به هم وصل می‌کند */
.fw-prev__path li:not(:last-child)::after{
  content:""; position:absolute; right:4px; top:26px; bottom:-8px;
  width:1px; background:var(--stroke);
}
@keyframes fw-step{ to{ opacity:1; transform:none; } }

.fw-prev__meta{ display:flex; flex-direction:column; gap:14px; margin-bottom:20px; }
.fw-prev__row span{ display:block; font-size:.73rem; font-weight:700; color:var(--primary); opacity:.5; margin-bottom:6px; }
.fw-prev__row strong{ font-size:.86rem; font-weight:700; color:var(--primary); }
.fw-prev__chips{ display:flex; flex-wrap:wrap; gap:6px; }
.fw-prev__chips i{
  font-style:normal; padding:6px 12px; border-radius:999px;
  border:1px solid var(--stroke);
  font-size:.75rem; font-weight:600; color:var(--primary);
  unicode-bidi:plaintext;
}
.fw-prev__cta{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:13px 24px; border-radius:999px;
  background:var(--primary); color:var(--bg); border:1px solid var(--primary);
  font-size:14px; font-weight:600;
  transition:background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.fw-prev__cta svg{ width:15px; height:15px; }
.fw-prev__cta:hover{ background:var(--accent); border-color:var(--accent); color:var(--primary); transform:translateY(-3px); }

@media (max-width:1024px){
  .fw-ind{ grid-template-columns:1fr; }
  .fw-prev{ position:static; }
}
@media (max-width:560px){
  .fw-ind__group ul{ grid-template-columns:1fr; }
}

/* ============================================================
   ۰۶ — سازنده‌ی مسیر
   ============================================================ */
.fw-build{ display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start; }
.fw-build__form,
.fw-build__out{
  background:var(--white); border:1px solid var(--stroke);
  border-radius:24px; padding:26px 24px;
}
.fw-sec--white .fw-build__form,
.fw-sec--white .fw-build__out{ background:var(--bg); }

.fw-build__row + .fw-build__row{ margin-top:20px; padding-top:20px; border-top:1px solid var(--stroke); }
.fw-build__lbl{ display:block; font-size:.78rem; font-weight:700; color:var(--primary); opacity:.55; margin-bottom:12px; }
.fw-build__val{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.fw-build__val em{ font-style:normal; font-size:.88rem; font-weight:700; color:var(--primary); }
.fw-build__val.is-set em{ color:var(--primary); }
.fw-build__jump{ font-size:.78rem; font-weight:600; color:var(--dzf-muted-2); border-bottom:1px solid var(--stroke); }
.fw-build__jump:hover{ color:var(--primary); border-color:var(--primary); }

.fw-build__opts{ display:flex; flex-wrap:wrap; gap:8px; }
.fw-opt{
  padding:9px 18px; border-radius:999px;
  background:transparent; border:1px solid var(--stroke);
  font-family:var(--dzf-font); font-size:.83rem; font-weight:600; color:var(--dzf-muted);
  cursor:pointer;
  transition:background-color .22s ease, color .22s ease, border-color .22s ease;
}
.fw-opt:hover{ border-color:var(--primary); color:var(--primary); }
.fw-opt.is-on{ background:var(--primary); border-color:var(--primary); color:var(--bg); }
.fw-opt:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.fw-build__go{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; margin-top:24px;
  padding:14px 28px; border-radius:999px;
  background:var(--accent); color:var(--primary); border:1px solid var(--accent);
  font-family:var(--dzf-font); font-size:15px; font-weight:700; cursor:pointer;
  transition:background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.fw-build__go svg{ width:15px; height:15px; transition:transform .25s ease; }
.fw-build__go:hover{ background:var(--primary); border-color:var(--primary); color:var(--bg); transform:translateY(-3px); }
.fw-build__go:hover svg{ transform:translateX(-4px); }

/* ---------- خروجی ---------- */
.fw-build__idle{ text-align:center; padding:30px 10px; }
.fw-build__idle strong{ display:block; font-size:.98rem; color:var(--primary); margin-bottom:8px; }
.fw-build__idle p{ margin:0; font-size:.84rem; line-height:1.95; color:var(--dzf-muted-2); }

/* مرحله‌ی «در حال محاسبه» — خطوط تحلیل یکی‌یکی تیک می‌خورند */
.fw-calc{ list-style:none; margin:0; padding:8px 0; display:flex; flex-direction:column; gap:12px; }
.fw-calc li{
  display:flex; align-items:center; gap:12px;
  font-size:.86rem; font-weight:600; color:var(--dzf-muted-2);
  opacity:0;
  animation:fw-fade .3s ease forwards;
  animation-delay:calc(var(--i) * .22s);
}
.fw-calc li::before{
  content:""; width:16px; height:16px; border-radius:50%;
  border:1.6px solid var(--dzf-muted-3); flex-shrink:0;
}
.fw-calc li.is-done{ color:var(--primary); }
.fw-calc li.is-done::before{ background:var(--accent); border-color:var(--accent); }

.fw-res__head{ margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid var(--stroke); }
.fw-res__head span{ display:block; font-size:.74rem; font-weight:700; color:var(--primary); opacity:.5; margin-bottom:6px; }
.fw-res__head strong{ font-size:1.05rem; font-weight:700; color:var(--primary); }
.fw-res__steps{ list-style:none; margin:0 0 18px; padding:0; display:flex; flex-direction:column; gap:8px; }
.fw-res__steps li{
  display:flex; align-items:center; gap:12px;
  padding:12px 16px; border-radius:16px;
  background:var(--bg); border:1px solid var(--stroke);
  opacity:0; transform:translateY(8px);
  animation:fw-step .38s cubic-bezier(.22,.61,.36,1) forwards;
  animation-delay:calc(var(--i) * .09s);
}
.fw-sec--white .fw-res__steps li{ background:var(--white); }
.fw-res__steps b{
  flex-shrink:0; font-size:.76rem; font-weight:800;
  color:var(--primary); opacity:.35; direction:ltr;
}
.fw-res__steps strong{ font-size:.87rem; font-weight:700; color:var(--primary); direction:ltr; unicode-bidi:plaintext; }
.fw-res__steps em{ font-style:normal; font-size:.78rem; color:var(--dzf-muted-2); margin-right:auto; }
.fw-res__sum{
  margin:0 0 18px; padding:14px 18px;
  border:1px solid var(--accent); border-radius:16px;
  font-size:.83rem; font-weight:600; line-height:1.9; color:var(--primary);
}
.fw-res__cta{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:13px 24px; border-radius:999px;
  background:var(--primary); color:var(--bg); border:1px solid var(--primary);
  font-size:14px; font-weight:600;
  transition:background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.fw-res__cta:hover{ background:var(--accent); border-color:var(--accent); color:var(--primary); transform:translateY(-3px); }

@media (max-width:900px){ .fw-build{ grid-template-columns:1fr; } }
@media (max-width:520px){
  .fw-build__form, .fw-build__out{ padding:20px 18px; border-radius:18px; }
}

/* ============================================================
   ۰۷ — نتیجه
   ============================================================ */
.fw-gets{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.fw-get{
  display:flex; align-items:flex-start; gap:16px;
  background:var(--bg); border:1px solid var(--stroke);
  border-radius:20px; padding:24px 22px;
  transition:border-color .25s ease, transform .25s ease;
}
.fw-get:hover{ border-color:var(--primary); transform:translateY(-3px); }
.fw-get__n{
  flex-shrink:0; font-family:var(--dzf-font);
  font-weight:800; font-size:1.3rem; line-height:1.2;
  color:var(--primary); opacity:.16; direction:ltr;
}
.fw-get strong{ display:block; font-size:.95rem; font-weight:700; color:var(--primary); margin-bottom:8px; }
.fw-get p{ margin:0; font-size:.83rem; line-height:1.95; color:var(--dzf-muted); }

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

/* ============================================================
   ۰۸ — مسیر سه‌مرحله‌ای
   ============================================================ */
.fw-track{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  position:relative;
}
.fw-track::before{
  content:""; position:absolute; top:11px; right:8%; left:8%;
  height:2px; background:var(--stroke);
}
.fw-track__step{
  position:relative; padding:0 20px;
  opacity:.45; transition:opacity .45s ease;
}
.fw-track.is-live .fw-track__step{ opacity:1; transition-delay:calc(var(--i) * .14s); }
.fw-track__dot{
  display:block; width:22px; height:22px; margin-bottom:20px;
  border-radius:50%; background:var(--bg);
  border:2px solid var(--stroke);
  position:relative; z-index:1;
  transition:background-color .45s ease, border-color .45s ease;
}
.fw-track.is-live .fw-track__dot{
  background:var(--accent); border-color:var(--accent);
  transition-delay:calc(var(--i) * .14s);
}
.fw-track__when{ display:block; font-size:.78rem; font-weight:600; color:var(--dzf-muted-2); margin-bottom:6px; }
.fw-track__verb{ display:block; font-size:1.25rem; font-weight:800; color:var(--primary); margin-bottom:10px; }
.fw-track__txt{ margin:0; font-size:.86rem; line-height:1.95; color:var(--dzf-muted); }

@media (max-width:760px){
  .fw-track{ grid-template-columns:1fr; gap:28px; }
  .fw-track::before{ top:8px; bottom:8px; right:10px; left:auto; width:2px; height:auto; }
  .fw-track__step{ padding:0 44px 0 0; }
  .fw-track__dot{ position:absolute; right:0; top:0; margin:0; }
}

/* ============================================================
   ۰۹ — مسیر اختصاصی
   ============================================================ */
.fw-custom{
  display:grid; grid-template-columns:1.1fr .9fr;
  gap:32px; align-items:center;
  background:var(--bg); border:1px solid var(--stroke);
  border-radius:28px; padding:clamp(28px, 4vw, 48px);
}
.fw-custom__txt h2{
  font-family:var(--dzf-font); font-size:clamp(1.2rem, 2.4vw, 1.7rem);
  font-weight:800; color:var(--primary); margin:12px 0 12px; line-height:1.5;
}
.fw-custom__txt p{ font-size:.9rem; line-height:2; color:var(--dzf-muted); margin:0 0 22px; }
.fw-custom__vis svg{ width:100%; height:auto; max-width:320px; margin:0 auto; display:block; overflow:visible; }
.fw-custom__grid circle{ fill:none; stroke:var(--stroke); stroke-width:1.5; }
.fw-custom__esc{
  fill:none; stroke:var(--accent); stroke-width:2; stroke-linecap:round;
  stroke-dasharray:140; stroke-dashoffset:140;
  animation:fw-draw 1s cubic-bezier(.22,.61,.36,1) forwards .3s;
}
.fw-custom__node{ fill:var(--accent); }
.fw-custom__lbl{ font-family:var(--dzf-font); font-size:14px; font-weight:800; fill:var(--primary); }

@media (max-width:820px){
  .fw-custom{ grid-template-columns:1fr; }
  .fw-custom__vis{ order:-1; }
}

/* ============================================================
   ۱۰ — CTA پایانی
   ============================================================ */
.fw-final{ background:var(--bg); padding:var(--dzf-space-xxl) var(--dzf-gutter); }
.fw-final__box{
  max-width:var(--dzf-container); margin:0 auto;
  background:var(--primary); border:1px solid var(--primary);
  border-radius:32px;
  padding:clamp(40px, 6vw, 72px) clamp(24px, 6vw, 60px);
  text-align:center;
}
.fw-final__conv{ width:100%; max-width:380px; height:auto; margin:0 auto 26px; display:block; }
.fw-final__line{
  fill:none; stroke:rgba(226,227,231,.35); stroke-width:1.6;
  stroke-dasharray:260; stroke-dashoffset:260;
  animation:fw-draw 1.1s cubic-bezier(.22,.61,.36,1) forwards .2s;
}
.fw-final__hub{ fill:var(--accent); }
.fw-final__t{ font-family:var(--dzf-font); font-size:12px; font-weight:700; fill:var(--bg); opacity:.65; }
.fw-final__t--hub{ fill:var(--accent); opacity:1; font-weight:800; }

.fw-final__title{
  font-family:var(--dzf-font); font-weight:800;
  font-size:clamp(1.45rem, 3.2vw, 2.3rem); line-height:1.45;
  color:var(--white); margin:0 0 16px; text-wrap:balance;
}
.fw-final__title .hl::after{ opacity:.6; }
.fw-final__desc{
  max-width:640px; margin:0 auto 32px;
  font-size:.96rem; line-height:2; color:var(--bg); opacity:.78;
}
.fw-final__actions{ display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; }
.fw-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;
}
.fw-final__btn--primary{ background:var(--accent); color:var(--primary); border:1px solid var(--accent); }
.fw-final__btn--primary:hover{ background:var(--white); border-color:var(--white); transform:translateY(-3px); }
.fw-final__btn--ghost{ background:transparent; color:var(--bg); border:1px solid rgba(226,227,231,.35); }
.fw-final__btn--ghost:hover{ border-color:var(--bg); transform:translateY(-3px); }

@media (max-width:640px){
  .fw-final{ padding:56px var(--dzf-gutter); }
  .fw-final__box{ border-radius:24px; }
  .fw-final__actions{ flex-direction:column; }
  .fw-final__btn{ width:100%; }
}

/* ============================================================
   کاهش انیمیشن
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .fw-tree__line, .fw-custom__esc, .fw-final__line{
    stroke-dashoffset:0 !important; animation:none !important;
  }
  .fw-tree__leaf{ opacity:1 !important; animation:none !important; }
  .fw-tree__pulse{ animation:none !important; opacity:1; }
  .fw-flow li, .fw-track__step, .fw-prev__path li,
  .fw-res__steps li, .fw-calc li, .fw-diag__panel{
    opacity:1 !important; transform:none !important; animation:none !important;
  }
  .fw-state, .fw-stage, .fw-ind__btn, .fw-opt, .fw-get,
  .fw-diag__q, .fw-build__go, .fw-prev__cta, .fw-res__cta,
  .fw-link, .fw-final__btn{ transition:none !important; }
  .fw-state:hover, .fw-stage:hover, .fw-ind__btn:hover, .fw-get:hover,
  .fw-diag__q:hover, .fw-build__go:hover, .fw-prev__cta:hover,
  .fw-res__cta:hover, .fw-link:hover, .fw-final__btn:hover{ transform:none; }
}


/* ============================================================
   سیستم رنگی صفحه — ریتم بخش‌ها

   قبلاً صفحه فقط دو حالت داشت: خاکستری و سفید، پشت سر هم.
   ده بخش با دو رنگ یعنی هیچ بخشی برجسته نمی‌شد و صفحه یکنواخت
   خوانده می‌شد. حالا سه سطح داریم:

     سفید (--white)    بخش‌های کاری: انتخاب صنف، نتیجه، مسیر اختصاصی
     خاکستری (--bg)    بخش‌های میانی: مرحله‌ی کسب‌وکار، سازنده‌ی مسیر
     تیره (--primary)  دو لحظه‌ی کلیدی: تشخیص مسئله، و سه فعلِ برند

   ترتیب نهایی: W · G · D · W · G · W · D · W · D
   دو بخش تیره عمداً از هم فاصله دارند تا صفحه نفس بکشد.

   پالت دست‌نخورده است: فقط #21242A، #FCC101، #E2E3E7، #FFFFFF.
   بدون سایه، بدون گرادیان — طبق برند بوک.
   ============================================================ */

.fw-sec--soft{ background:var(--bg); }

/* ---------- بخش تیره ---------- */
.fw-sec--dark{ background:var(--primary); }

.fw-sec--dark .fw-head h2{ color:var(--white); }
.fw-sec--dark .fw-head p{ color:var(--bg); opacity:.62; }
.fw-sec--dark .dzf-eyebrow-dot{ color:var(--bg); opacity:.7; }
/* هایلایت زیرِ کلمه روی تیره پررنگ‌تر می‌شود تا دیده شود */
.fw-sec--dark .hl::after{ opacity:.85; }

/* کنسول تشخیص روی تیره — حسِ یک پنل ابزار، نه یک کارت */
.fw-sec--dark .fw-diag__q{
  background:rgba(226,227,231,.05);
  border-color:rgba(226,227,231,.16);
  color:var(--bg);
}
.fw-sec--dark .fw-diag__q:hover{
  border-color:var(--accent); color:var(--white); transform:translateX(-4px);
}
.fw-sec--dark .fw-diag__q.is-on{
  background:rgba(252,193,1,.10); border-color:var(--accent); color:var(--white);
}
.fw-sec--dark .fw-diag__dot{ background:rgba(226,227,231,.3); }
.fw-sec--dark .fw-diag__q.is-on .fw-diag__dot{ background:var(--accent); }
.fw-sec--dark .fw-diag__panels{
  background:rgba(226,227,231,.05);
  border-color:rgba(226,227,231,.16);
}
.fw-sec--dark .fw-diag__a{ color:var(--bg); opacity:.72; }
.fw-sec--dark .fw-diag__ui li{
  border-color:rgba(226,227,231,.2); color:var(--bg);
}
.fw-sec--dark .fw-link{
  border-color:rgba(226,227,231,.24); color:var(--bg);
}
.fw-sec--dark .fw-link:hover{
  background:var(--accent); border-color:var(--accent); color:var(--primary);
}

/* سه فعل برند روی تیره */
.fw-sec--dark .fw-track::before{ background:rgba(226,227,231,.16); }
.fw-sec--dark .fw-track__dot{ background:var(--primary); border-color:rgba(226,227,231,.28); }
.fw-sec--dark .fw-track.is-live .fw-track__dot{ background:var(--accent); border-color:var(--accent); }
.fw-sec--dark .fw-track__when{ color:var(--bg); opacity:.55; }
.fw-sec--dark .fw-track__verb{ color:var(--white); }
.fw-sec--dark .fw-track__txt{ color:var(--bg); opacity:.68; }

/* ---------- گزینه‌ی غیرفعال در سازنده‌ی مسیر ----------
   ترکیب ناسازگار (مثلاً «در حال رشد» + «هنوز چیزی نساخته‌ام»)
   حذف نمی‌شود، خاموش می‌شود — کاربر می‌بیند که گزینه هست ولی
   با انتخاب فعلی‌اش جمع نمی‌شود. */
.fw-opt.is-off{
  opacity:.32; cursor:not-allowed;
  border-style:dashed;
}
.fw-opt.is-off:hover{ transform:none; border-color:var(--stroke); }

/* ---------- مسیر ناوبری ---------- */
.fw-crumb{
  background:var(--white);
  border-bottom:1px solid var(--stroke);
  padding:14px var(--dzf-gutter);
}
.fw-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);
}
.fw-crumb a{ color:var(--dzf-muted); }
.fw-crumb a:hover{ color:var(--primary); }
.fw-crumb b{ color:var(--primary); font-weight:600; }


/* ============================================================
   ۰۲ — کارت‌های مرحله: تم رنگی تازه

   قبلاً بخش سفید بود و کارت‌ها خاکستری. حالا که بخش خاکستری شده
   (تا پشت سر هرو دو سفیدِ چسبیده نداشته باشیم)، رابطه برعکس شد:
   کارتِ سفید روی زمینه‌ی خاکستری. بدون سایه — که برند بوک اجازه
   نمی‌دهد — تمایز از خودِ رنگ می‌آید، نه از عمق جعلی.
   ============================================================ */
.fw-sec .fw-stage{ background:var(--white); }

/* شماره‌ی مرحله: بزرگ‌تر، زرد کم‌رنگ به‌جای خاکستریِ محو.
   قبلاً opacity:.14 روی رنگ متن بود و عملاً دیده نمی‌شد. */
.fw-sec .fw-stage__num{
  font-size:2rem; color:var(--accent); opacity:1;
}

/* کارت که سفید شد، چیپ‌های مسیر باید خاکستری شوند تا دیده شوند */
.fw-sec .fw-flow li{ background:var(--bg); }

/* نوار زرد بالای کارت، برای کارت فعال ثابت می‌ماند */
.fw-sec .fw-stage.is-on{ border-color:var(--accent); }

/* برچسب صنف: به‌جای قرص توپُرِ زرد، حاشیه‌ی زرد با متن تیره.
   قرص زرد کنار شماره‌ی زرد، دو تأکید هم‌زمان می‌ساخت. */
.fw-sec .fw-stage__tag{
  background:transparent;
  border:1px solid var(--accent);
  color:var(--primary);
}
.fw-sec .fw-stage:hover .fw-stage__tag,
.fw-sec .fw-stage.is-on .fw-stage__tag{
  background:var(--accent);
}

/* خط جداکننده‌ی نتیجه کمی پررنگ‌تر، چون روی سفید کم‌رنگ می‌شد */
.fw-sec .fw-stage__gain{ border-top-color:rgba(33,36,42,.12); }