/* صفحه‌ی حمایت مالی — روایت تولد اوپن‌توب: یک رشته‌ی نور که از بالا کشیده می‌شود و کارت‌ها روی آن می‌نشینند */
.dn{ --gold:#ff4a4a; --gold2:#d61a22; position:relative; isolation:isolate; direction:rtl; padding:0 var(--pad) 120px; overflow:hidden; }
/* پس‌زمینه مثل بقیه‌ی صفحه‌های سایت (--bg)؛ بدون گرادینت */
.dn-sky{ display:none; }
.dn-intro{ min-height:min(62vh,520px); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:34px; padding-top:40px; }
.dn-birth{ margin:0; font-size:clamp(34px,6.4vw,78px); font-weight:800; line-height:1.25; letter-spacing:-.01em;
  background:linear-gradient(180deg,#fff 30%,#ffb4b4); -webkit-background-clip:text; background-clip:text; color:transparent; }
.dn-dots i{ font-style:normal; display:inline-block; color:var(--gold); -webkit-text-fill-color:var(--gold); opacity:.15; animation:dnDot 2.4s ease-in-out infinite; }
.dn-dots i:nth-child(2){ animation-delay:.35s } .dn-dots i:nth-child(3){ animation-delay:.7s }
@keyframes dnDot{ 0%,100%{opacity:.15} 45%{opacity:1} }
.dn-scroll{ width:1px; height:64px; background:linear-gradient(var(--gold),transparent); opacity:.7; animation:dnSc 2.6s ease-in-out infinite; transform-origin:top; }
@keyframes dnSc{ 0%{transform:scaleY(0);opacity:0} 40%{opacity:.8} 100%{transform:scaleY(1);opacity:0} }
.dn.js .dn-birth,.dn.js .dn-scroll{ opacity:0; transform:translateY(14px); transition:opacity 1.6s var(--ease),transform 1.6s var(--ease); }
.dn.js.go .dn-birth{ opacity:1; transform:none; } .dn.js.go .dn-scroll{ opacity:1; transform:none; transition-delay:1.2s; }

/* رشته */
.dn-flow{ position:relative; max-width:980px; margin:0 auto; display:flex; flex-direction:column; gap:clamp(48px,9vh,96px); padding-top:10px; }
.dn-thread{ position:absolute; top:-70px; bottom:auto; height:calc(100% + 70px); inset-inline-start:50%; width:2px; margin-inline-start:-1px; background:rgba(255,255,255,.08); border-radius:2px; }
.dn-thread b{ position:absolute; inset:0; background:linear-gradient(var(--gold),var(--gold2)); transform-origin:top; transform:scaleY(0); border-radius:2px; box-shadow:0 0 14px rgba(255,60,50,.55); }

/* کارت‌ها: متناوب دو طرف رشته */
.dn-card{ container-type:inline-size; position:relative; width:calc(50% - 40px); padding:26px 28px 24px; border-radius:20px; background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.015)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.09), 0 24px 50px -30px #000; }
.dn-card:nth-of-type(odd){ align-self:flex-start; }   /* RTL: شروع = راست */
.dn-card:nth-of-type(even){ align-self:flex-end; }
.dn-node{ position:absolute; top:34px; width:14px; height:14px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 5px rgba(255,56,56,.16),0 0 18px rgba(255,60,50,.8); }
.dn-card:nth-of-type(odd) .dn-node{ inset-inline-end:-54px; }   /* سمت رشته */
.dn-card:nth-of-type(even) .dn-node{ inset-inline-start:-54px; }
.dn-card:nth-of-type(odd)::after,.dn-card:nth-of-type(even)::after{ content:""; position:absolute; top:40px; width:40px; height:1px; background:linear-gradient(90deg,rgba(255,56,56,.7),transparent); }
.dn-card:nth-of-type(odd)::after{ inset-inline-end:-40px; transform:scaleX(-1); }
.dn-card:nth-of-type(even)::after{ inset-inline-start:-40px; }
.dn-k{ margin:0 0 12px; font-size:13.5px; font-weight:700; color:var(--gold); letter-spacing:.02em; }
.dn-b{ white-space:nowrap; margin:0 0 12px; font-size:clamp(12px,3.4vw,22px); font-size:min(25px,5.3cqw); font-weight:700; line-height:1.7; color:#fff; }
.dn-b em,.dn-e em,.dn-fp em{ font-style:normal; font-weight:800; color:#fff; }
.dn-e{ margin:0; font-size:14.5px; line-height:1.9; color:#b9b9c2; }
.dn-e em{ color:#fff; font-weight:700; }

/* ظاهر شدن آرام */
.dn.js .dn-card{ opacity:0; transform:translateY(34px); transition:opacity 1.3s var(--ease),transform 1.3s var(--ease); }
.dn.js .dn-card.in{ opacity:1; transform:none; }
.dn.js .dn-card .dn-b,.dn.js .dn-card .dn-e,.dn.js .dn-card .dn-fp,.dn.js .dn-card .dn-btn{ opacity:0; transition:opacity 1.2s ease; }
.dn.js .dn-card.in .dn-b{ opacity:1; transition-delay:.45s } .dn.js .dn-card.in .dn-e,.dn.js .dn-card.in .dn-fp{ opacity:1; transition-delay:.95s } .dn.js .dn-card.in .dn-btn{ opacity:1; transition-delay:1.5s }

/* کارت پایانی: همه‌چیز در یک نقطه جمع می‌شود */
.dn-final{ align-self:center !important; width:min(100%,680px); text-align:center; margin-top:clamp(8px,3vh,28px); padding:40px clamp(22px,5vw,52px) 26px;
  background:radial-gradient(90% 70% at 50% 0%,rgba(255,60,50,.16),rgba(255,255,255,.02) 70%); box-shadow:inset 0 0 0 1px rgba(255,56,56,.35), 0 0 80px -30px rgba(255,50,40,.55), 0 30px 60px -30px #000; }
.dn-final::before,.dn-final::after{ display:none !important; }
.dn-final .dn-node{ top:-8px !important; inset-inline-start:50% !important; inset-inline-end:auto !important; margin-inline-start:-7px; width:16px; height:16px; animation:dnPulse 2.8s ease-in-out infinite; }
@keyframes dnPulse{ 0%,100%{ box-shadow:0 0 0 5px rgba(255,56,56,.16),0 0 18px rgba(255,60,50,.8) } 50%{ box-shadow:0 0 0 13px rgba(255,56,56,.05),0 0 34px rgba(255,60,50,1) } }
.dn-fh{ text-wrap:balance; margin:6px 0 16px; font-size:clamp(24px,3.6vw,38px); font-weight:800; line-height:1.4; background:linear-gradient(180deg,#fff 30%,#ffb4b4); -webkit-background-clip:text; background-clip:text; color:transparent; }
.dn-fp{ margin:0; font-size:clamp(15px,1.7vw,17.5px); line-height:2.05; color:#d2d2da; }
.dn-fp em{ color:#fff; font-weight:700; }
.dn-btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; height:52px; padding:0 34px; border:0; border-radius:26px; cursor:pointer; font:inherit; font-size:16px; font-weight:800; color:#fff;
  background:linear-gradient(180deg,#ff5656,#d81a1f); box-shadow:0 10px 28px -10px rgba(255,60,50,.75),inset 0 1px 0 rgba(255,255,255,.4),inset 0 -3px 0 rgba(110,0,0,.35); transition:transform .25s var(--ease),filter .25s; }
.dn-btn:hover{ transform:translateY(-2px); filter:saturate(1.12); } .dn-btn:active{ transform:scale(.97); }
.dn-btn-ic{ width:22px; height:22px; display:grid; place-items:center; } .dn-btn-ic svg{ width:22px; height:22px; }

/* موبایل/تبلت: رشته به لبه‌ی راست می‌رود، کارت‌ها تمام‌عرض */
@media (max-width:820px){
  .dn{ padding:0 16px 110px; }
  .dn-thread{ inset-inline-start:11px; margin-inline-start:0; }
  .dn-card,.dn-card:nth-of-type(n){ width:auto; align-self:stretch; margin-inline-start:36px; padding:22px 20px 20px; }
  .dn-card:nth-of-type(n) .dn-node{ inset-inline-start:auto; inset-inline-end:auto; right:auto; top:30px; inset-inline-start:-32px; }
  .dn-card:nth-of-type(n)::after{ inset-inline-start:-22px; inset-inline-end:auto; width:18px; top:36px; transform:none; }
    .dn-final{ margin-inline-start:36px; text-align:center; }
  .dn-final .dn-node{ inset-inline-start:-32px !important; top:30px !important; margin:0; }
  .dn-intro{ min-height:46vh; gap:24px; }
}
@media (max-width:420px){ .dn-btn{ width:100%; } }

@media (prefers-reduced-motion:reduce){ .dn *{ animation:none !important; transition:none !important; } }

/* ——— باکس حمایت + کادر هدف ——— */
.dn-sup{ align-self:center !important; width:min(100%,760px); margin-top:clamp(18px,4vh,40px); padding:36px clamp(20px,4.5vw,48px) 34px; text-align:center;
  background:linear-gradient(170deg,rgba(255,255,255,.06),rgba(255,255,255,.015)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 30px 60px -30px #000; }
.dn-sup::before,.dn-sup::after,.dn-sup .dn-node{ display:none !important; }
.dn-sk{ margin:0 0 10px; font-size:14px; font-weight:800; color:var(--gold); letter-spacing:.04em; }
.dn-sp{ margin:0 0 30px; font-size:clamp(14px,1.6vw,16.5px); line-height:2.1; color:#cfcfd6; text-wrap:pretty; }
.dn-sp em{ font-style:normal; color:#fff; font-weight:800; }
.dn-goal{ position:relative; margin:0 0 28px; padding:20px clamp(16px,3vw,28px) 16px; border-radius:18px; text-align:start; overflow:hidden;
  background:linear-gradient(180deg,rgba(0,0,0,.34),rgba(0,0,0,.18)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
.dn-goal::before{ content:""; position:absolute; inset-inline-start:0; top:0; bottom:0; width:3px; background:linear-gradient(var(--gold),var(--gold2)); }
.dn-gh{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; font-size:12.5px; }
.dn-gt{ display:inline-flex; align-items:center; gap:8px; font-weight:800; color:#fff; } .dn-gt i{ width:8px; height:8px; border-radius:50%; background:var(--gold); animation:dnPulse 2.8s ease-in-out infinite; }
.dn-gm{ color:#9a9aa6; }
.dn-gb{ display:flex; align-items:baseline; gap:2px; margin:6px 0 4px; direction:rtl; }
.dn-gb b{ font-size:clamp(44px,8vw,68px); font-weight:800; line-height:1.1; color:#fff; font-variant-numeric:tabular-nums; }
.dn-gp{ font-size:clamp(18px,3vw,26px); font-weight:800; color:var(--gold); margin-inline-end:auto; }
.dn-gn{ text-align:end; display:flex; flex-direction:column; gap:2px; } .dn-gn strong{ font-size:clamp(17px,2.6vw,24px); color:#fff; } .dn-gn small{ font-size:12px; color:#9a9aa6; }
.dn-track{ position:relative; height:14px; margin:14px 0 8px; border-radius:8px; background:rgba(255,255,255,.07); box-shadow:inset 0 2px 4px rgba(0,0,0,.5); }
.dn-tf{ position:absolute; inset-block:0; inset-inline-start:0; width:calc(var(--p) * 100%); border-radius:8px; background:linear-gradient(90deg,#9e0f16,#ff3b3b); box-shadow:0 0 16px rgba(255,60,50,.6); transform:scaleX(0); transform-origin:right; transition:transform 2s var(--ease) .6s; }
.dn-sup.go2 .dn-tf{ transform:none; } .dn:not(.js) .dn-tf{ transform:none; }
.dn-tf u{ position:absolute; inset-inline-end:-6px; top:50%; width:22px; height:22px; margin-top:-11px; border-radius:50%; background:#fff; box-shadow:0 0 0 5px rgba(255,56,56,.3),0 0 20px rgba(255,60,50,.9); }
.dn-track s{ position:absolute; top:-3px; bottom:-3px; width:2px; right:calc(var(--x) * 100%); background:rgba(255,255,255,.22); border-radius:1px; }
.dn-ms{ position:relative; height:20px; font-size:11.5px; color:#8c8c98; }
.dn-ms span{ position:absolute; right:calc(var(--x) * 100%); transform:translateX(50%); white-space:nowrap; }
.dn-ms span:last-child{ transform:translateX(100%); right:100%; }
.dn-gf{ display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:10px; padding-top:12px; border-top:1px dashed rgba(255,255,255,.12); font-size:12.5px; color:#cfcfd6; }
.dn-ex{ color:#777; }
@media (max-width:820px){ .dn .dn-sup.dn-card:nth-of-type(n){ margin-inline-start:0; } .dn-ms span{ font-size:10.5px; } }
@media (max-width:820px){ .dn .dn-final.dn-card,.dn .dn-sup.dn-card{ width:auto !important; align-self:stretch !important; } }

/* دکمه‌ی حمایت (لینک به درگاه در زبانه‌ی جدید) و نشانگر زنده */
a.dn-btn,a.dn-btn:hover{ text-decoration:none; }
.dn-live{ display:inline-flex; align-items:center; gap:7px; color:#8c8c98; }
.dn-live i{ width:7px; height:7px; border-radius:50%; background:#3ecf6e; box-shadow:0 0 0 3px rgba(62,207,110,.18); animation:dnPulse 2.8s ease-in-out infinite; }
.dn-live.stale i{ background:#c9a227; box-shadow:0 0 0 3px rgba(201,162,39,.18); animation:none; }
.dn-live.new{ color:#fff; font-weight:700; } .dn-live.new i{ background:var(--gold); box-shadow:0 0 0 3px rgba(255,56,56,.3); }
.dn-goal.dn-pulse{ animation:dnGlow 1.6s ease-out 2; }
@keyframes dnGlow{ 0%{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 0 0 0 rgba(255,60,50,.55) } 100%{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 0 0 22px rgba(255,60,50,0) } }
.dn-goal[hidden]{ display:none; }

/* موبایل: دایره‌ی نوار هدف کوچک‌تر (باید بعد از قاعده‌ی پایه بیاید) */
@media (max-width:620px){
  .dn-tf u{ width:14px; height:14px; margin-top:-7px; inset-inline-end:-4px; box-shadow:0 0 0 3px rgba(255,56,56,.3),0 0 12px rgba(255,60,50,.85); }
  .dn-track{ height:10px; margin:12px 0 8px; }
}