/* ==========================================================================
   OptionAi — لندینگ پیج (صفحهٔ معرفی، پیش از ورود)
   بر خلاف تب‌های برنامه که یک قاب ثابت و بدون اسکرول دارند، این صفحه یک سند
   بلندِ معمولی است: theme.css روی body overflow:hidden می‌گذارد، اینجا آزادش
   می‌کنیم. همهٔ رنگ‌ها از توکن‌های theme.css می‌آیند تا با تم سیستم عوض شوند.
   ========================================================================== */

html{ overflow-x:clip; scroll-behavior:smooth; scroll-padding-top:84px }
html, body{ height:auto; min-height:100% }
/* این صفحه Tailwind (و ریستِ آن) را بار نمی‌کند */
body{ margin:0; overflow:visible }
/* روی موبایل/تبلت هالهٔ صحنه‌ها چند پیکسل از کادر بیرون می‌زند و کروم موبایل با
   همان چند پیکسل پهنای صفحه را زیاد می‌کند؛ روی دسکتاپ کارت‌ها عمداً از قاب
   بیرون می‌زنند و نباید بریده شوند */
@media (max-width:1024px){ main{ overflow-x:clip } }
h1,h2,h3,h4,p,ul,ol,figure{ margin:0 }
a{ color:inherit }
button{ font:inherit; color:inherit; background:none; border:0; padding:0 }
img{ max-width:100% }

:root{
  --ld-max:1180px;
  --ld-nav-h:76px;
  /* تیک: به‌صورت mask کشیده می‌شود تا رنگش از توکن بیاید و در RTL آینه نشود
     (بوردرِ inline-start در RTL بوردرِ راست است و به‌جای تیک یک «›» می‌داد) */
  --ld-tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E");
  /* متن گرادیانی طلایی؛ در تم روشن طلاییِ تیره‌تر تا روی سفید خوانا بماند */
  --ld-grad-a:#FFE08A;
  --ld-grad-b:#FFC531;
  --ld-grad-c:#E9A80B;
  --ld-glass:rgba(11,11,12,.72);
  --ld-glass-line:rgba(255,255,255,.06);
  --ld-window-bg:#0d0d10;
  --ld-shot-shadow:0 60px 120px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.04);
  --ld-grid-line:rgba(255,255,255,.045);
}
:root[data-theme="light"]{
  --ld-grad-a:#D9960E;
  --ld-grad-b:#B07A08;
  --ld-grad-c:#8C5F04;
  --ld-glass:rgba(255,255,255,.78);
  --ld-glass-line:rgba(24,28,36,.08);
  --ld-window-bg:#FFFFFF;
  --ld-shot-shadow:0 50px 100px -40px rgba(24,28,36,.45), 0 0 0 1px rgba(24,28,36,.06);
  --ld-grid-line:rgba(24,28,36,.06);
}

.ld-wrap{ width:min(100% - 2.5rem, var(--ld-max)); margin-inline:auto }
@media (max-width:640px){ .ld-wrap{ width:min(100% - 2rem, var(--ld-max)) } }

/* ------------------------------ نوار پیشرفت ------------------------------ */
.ld-progress{
  position:fixed; top:0; inset-inline-start:0; z-index:120;
  height:2px; width:0;
  background-image:linear-gradient(90deg, var(--gold-2), var(--gold));
  box-shadow:0 0 12px rgba(255,197,49,.7);
  pointer-events:none;
}

/* ------------------------------- دکمه‌ها ---------------------------------- */
.ld-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  border-radius:12px; font-weight:800; white-space:nowrap; text-decoration:none;
  line-height:1;
}
.ld-btn svg{ width:1.05em; height:1.05em; flex:none }
.ld-btn-sm{ padding:.6rem .95rem; font-size:12.5px }
.ld-btn-lg{ padding:.95rem 1.5rem; font-size:15px; border-radius:14px }
.ld-btn-xl{ padding:1.1rem 2.1rem; font-size:16.5px; border-radius:16px }
.btn-ghost.ld-btn{ color:var(--txt) }

/* دکمهٔ باشگاه: پیکان با هاور به سمت چپ (جهت رفتن در RTL) می‌لغزد */
.ld-club-btn svg{ transition:transform .3s var(--ease-out) }
.ld-club-btn:hover svg{ transform:translateX(-4px) }

/* ------------------------------- نوار بالا -------------------------------- */
.ld-nav{
  position:sticky; top:0; z-index:100;
  height:var(--ld-nav-h);
  background-color:transparent;
  border-bottom:1px solid transparent;
  transition:background-color .35s var(--ease-soft), border-color .35s var(--ease-soft), box-shadow .35s var(--ease-soft);
}
.ld-nav.scrolled{
  background-color:var(--ld-glass);
  border-bottom-color:var(--ld-glass-line);
  backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:0 10px 40px -30px rgba(0,0,0,.6);
}
.ld-nav-in{ height:100%; display:flex; align-items:center; gap:1.5rem }
.ld-brand{ display:flex; align-items:center; flex:none }
.ld-logo{ --brand-logo-h:60px }
.ld-footer .ld-logo{ --brand-logo-h:66px }

.ld-links{ display:flex; align-items:center; gap:.25rem; margin-inline-start:.5rem }
.ld-links a{
  padding:.5rem .8rem; border-radius:10px;
  font-size:13.5px; font-weight:600; color:var(--txt-dim); text-decoration:none;
  transition:color .2s var(--ease-soft), background-color .2s var(--ease-soft);
}
.ld-links a:hover{ color:var(--txt); background-color:var(--surface-3) }
.ld-links a.active{ color:var(--gold-ink) }

.ld-nav-cta{ margin-inline-start:auto; display:flex; align-items:center; gap:.5rem }

@media (max-width:900px){
  .ld-links{ display:none }
}
/* روی موبایل لوگو (نسبت ۳٫۵:۱) با دکمه در ۳۶۸px جا نمی‌شود؛ سرریزِ نوار، پهنای
   صفحه را در کروم موبایل ۴۲۰px می‌کرد و کل صفحه از راست بریده می‌شد */
@media (max-width:640px){
  .ld-nav .ld-logo{ --brand-logo-h:46px }
}
@media (max-width:420px){
  .ld-nav .ld-logo{ --brand-logo-h:40px }
  .ld-nav-cta .ld-club-btn span{ font-size:12px }
}

/* ------------------------------- تایپوگرافی ------------------------------- */
.ld-eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.38rem .85rem; border-radius:999px;
  font-size:12px; font-weight:700; color:var(--txt-dim);
  background-color:var(--surface-3); border:1px solid var(--line);
}
.ld-eyebrow svg{ width:14px; height:14px }
.ld-eyebrow-gold{ color:var(--gold-ink); background-color:var(--gold-soft); border-color:var(--gold-ring) }
.ld-pulse{
  width:8px; height:8px; border-radius:99px; background-color:var(--up);
  box-shadow:0 0 0 0 rgba(34,197,94,.55);
  animation:ldPulse 1.8s ease-out infinite;
}
@keyframes ldPulse{ 0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)} 100%{box-shadow:0 0 0 9px rgba(34,197,94,0)} }

.ld-grad{
  background-image:linear-gradient(92deg, var(--ld-grad-a), var(--ld-grad-b) 55%, var(--ld-grad-c));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.ld-h1{
  font-size:clamp(32px, 3.75vw, 56px);
  line-height:1.32; font-weight:900; color:var(--txt-strong); letter-spacing:-.01em;
  margin:1.1rem 0 1rem;
}
@media (max-width:1200px){ .ld-h1{ font-size:clamp(30px, 3.5vw, 46px) } }
@media (max-width:1024px){ .ld-h1{ font-size:clamp(30px, 6vw, 50px) } }
.ld-h2{
  font-size:clamp(24px, 3vw, 38px);
  line-height:1.4; font-weight:900; color:var(--txt-strong); letter-spacing:-.005em;
  margin:.9rem 0 .6rem;
}
.ld-lead{ font-size:clamp(15px, 1.25vw, 17.5px); line-height:2; color:var(--txt-dim); max-width:36rem; margin:0 0 1.6rem }
.ld-sub{ font-size:15px; line-height:1.95; color:var(--txt-dim); max-width:40rem; margin:0 }

.ld-section{ padding-block:5.5rem }
.ld-section-alt{ background-color:var(--surface-2); border-block:1px solid var(--line-soft) }
.ld-sec-head{ margin-bottom:3rem }
.ld-sec-head .ld-eyebrow{ margin-bottom:.2rem }
@media (max-width:640px){ .ld-section{ padding-block:3.75rem } .ld-sec-head{ margin-bottom:2rem } }

/* --------------------------------- هیرو ---------------------------------- */
.ld-hero{ position:relative; padding:3.5rem 0 4rem; overflow:clip }
.ld-hero-bg{ position:absolute; inset:0; z-index:-1; pointer-events:none }
.ld-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--ld-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--ld-grid-line) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%, #000 20%, transparent 75%);
          mask-image:radial-gradient(ellipse 70% 60% at 50% 30%, #000 20%, transparent 75%);
}
.ld-orb{ position:absolute; border-radius:50%; filter:blur(80px); opacity:.55 }
.ld-orb-a{ width:520px; height:520px; inset-inline-start:-140px; top:-120px; background:radial-gradient(circle, rgba(255,197,49,.34), transparent 65%) }
.ld-orb-b{ width:460px; height:460px; inset-inline-end:-120px; bottom:-160px; background:radial-gradient(circle, rgba(139,92,246,.22), transparent 65%) }

.ld-hero-in{
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.12fr);
  align-items:center; gap:3rem;
  min-height:calc(100vh - var(--ld-nav-h) - 2rem);
}
.ld-hero-copy{ padding-block:1rem }
.ld-hero-cta{ display:flex; flex-wrap:wrap; gap:.75rem; margin-bottom:1.6rem }
.ld-trust{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.4rem 1.4rem; font-size:12.5px; color:var(--txt-mute) }
.ld-trust li{ display:inline-flex; align-items:center; gap:.45rem }
.ld-check{
  width:16px; height:16px; border-radius:99px; flex:none;
  background-color:var(--gold-soft); border:1px solid var(--gold-ring);
  position:relative;
}
.ld-check::after{
  content:''; position:absolute; inset:0;
  background-color:var(--gold-ink);
  -webkit-mask:var(--ld-tick) center / 9px 9px no-repeat; mask:var(--ld-tick) center / 9px 9px no-repeat;
}

/* ---- صحنه: اسکرین‌شات مایل + کارت‌های شناور (هیرو و هر چهار ویژگی) ----
   .ld-stage قاب را با --rx/--ry می‌چرخاند و app.js با حرکت ماوس روی
   [data-stage-area] این دو متغیر و --px/--py هر لایهٔ [data-depth] را جابه‌جا
   می‌کند. قابِ سمت چپ صفحه رو به مرکز (راست) می‌چرخد و قابِ سمت راست رو به چپ. */
.ld-stage{
  position:relative; perspective:1600px;
  --rx:4deg; --ry:-9deg;   /* زاویهٔ پایه؛ app.js با حرکت ماوس کمی می‌چرخاندش */
  --px:0px; --py:0px;
}
.ld-hero-stage{ padding:1.5rem 0 2.5rem 1rem }
.ld-feat-stage{ padding:1.25rem .5rem 1.5rem }   /* جا برای کارت‌هایی که از قاب بیرون می‌زنند */
.ld-feat-rev .ld-feat-stage{ --ry:9deg }
.ld-stage-glow{
  position:absolute; inset:8% -4% 4% -6%; z-index:-1; border-radius:40px;
  background:radial-gradient(ellipse at 60% 50%, rgba(255,197,49,.22), transparent 62%);
  filter:blur(30px);
}
.ld-stage .ld-window{
  transform:rotateX(var(--rx)) rotateY(var(--ry)) translate3d(var(--px), var(--py), 0);
  transform-style:preserve-3d;
  transition:transform .9s var(--ease-out), opacity .7s ease;
  will-change:transform;
}
/* تا ماوس روی صحنه است گذار کوتاه می‌شود تا قاب پشت اشاره‌گر نماند */
.ld-stage.live .ld-window{ transition:transform .12s linear }
/* ورود سه‌بعدی با اسکرول: قاب از زاویهٔ بازتر و پایین‌تر به جای خودش می‌نشیند */
.ld-feat.rv:not(.in) .ld-stage .ld-window{
  transform:rotateX(16deg) rotateY(calc(var(--ry) * 2.6)) translate3d(0, 48px, -80px);
  opacity:0;
}

/* قاب مرورگر برای اسکرین‌شات‌ها */
.ld-window{
  margin:0; border-radius:16px; overflow:hidden;
  background-color:var(--ld-window-bg); border:1px solid var(--line);
  box-shadow:var(--ld-shot-shadow);
}
.ld-win-bar{
  display:flex; align-items:center; gap:.7rem;
  height:32px; padding-inline:.8rem;
  background-color:var(--surface-3); border-bottom:1px solid var(--line-soft);
}
.ld-dots{ display:inline-flex; gap:5px }
.ld-dots i{ width:9px; height:9px; border-radius:99px; background-color:var(--line-strong) }
.ld-dots i:nth-child(1){ background-color:#FF5F57 } .ld-dots i:nth-child(2){ background-color:#FEBC2E } .ld-dots i:nth-child(3){ background-color:#28C840 }
.ld-url{
  flex:1; max-width:340px; margin-inline:auto;
  font-size:10.5px; color:var(--txt-mute); text-align:center;
  padding:.18rem .7rem; border-radius:6px; background-color:var(--surface); border:1px solid var(--line-soft);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ld-shot{ display:block; width:100%; height:auto; aspect-ratio:1600 / 1000; object-fit:cover; background-color:var(--ld-window-bg) }
.ld-shot[src=""]{ visibility:hidden }

/* کارت‌های شناور */
.ld-float{
  position:absolute; z-index:2;
  border-radius:14px; padding:.8rem .9rem;
  background-color:var(--ld-glass); border:1px solid var(--line);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.03) inset;
  transform:translate3d(var(--px), var(--py), 0);
  transition:transform .9s var(--ease-out);
  /* اول با تأخیر --d بیرون می‌پرد (backwards = تا آن لحظه نامرئی)، بعد آرام شناور می‌ماند */
  animation:ldPopIn .7s var(--ease-out) var(--d, 0s) backwards,
            ldFloat 6s ease-in-out calc(var(--d, 0s) + .7s) infinite;
}
.ld-stage.live .ld-float{ transition:transform .12s linear }
/* کارت‌های ویژگی‌ها تا رسیدن اسکرول متوقف‌اند (تأخیرشان هم می‌ایستد)، پس با
   آشکار شدن ردیف از اول شروع می‌کنند؛ همین برای حلقه‌ها و میله‌های داخلشان */
.ld-feat.rv:not(.in) .ld-float,
.ld-feat.rv:not(.in) .ld-float *{ animation-play-state:paused }
@keyframes ldPopIn{ from{ opacity:0; transform:translate3d(var(--px), calc(var(--py) + 18px), 0) scale(.9) } }
@keyframes ldFloat{ 0%,100%{ margin-top:0 } 50%{ margin-top:-8px } }

.ld-float-payoff{ width:236px; inset-inline-start:-1.5rem; bottom:.9rem }
.ld-float-head{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.35rem }
.ld-float-title{ font-size:12.5px; font-weight:800; color:var(--txt) }
.ld-float-payoff svg{ width:100%; height:78px; display:block }
.ld-zero{ stroke:var(--line-strong); stroke-width:1; stroke-dasharray:3 3 }
.ld-fill-up{ fill:var(--up); opacity:.2 } .ld-fill-dn{ fill:var(--down); opacity:.2 }
.ld-line-up{ fill:none; stroke:var(--up); stroke-width:2; stroke-linejoin:round }
.ld-line-dn{ fill:none; stroke:var(--down); stroke-width:2; stroke-linejoin:round }
.ld-spot{ fill:var(--gold); stroke:var(--chart-bg); stroke-width:1.5 }
.ld-float-foot{ display:flex; justify-content:space-between; align-items:baseline; margin-top:.3rem; font-size:11px; color:var(--txt-mute) }
.ld-float-foot b{ font-size:13px }

.ld-float-kpi{ inset-inline-end:-1.25rem; top:1.5rem; min-width:170px; display:flex; flex-direction:column; gap:.15rem }
.ld-kpi-label{ font-size:11px; color:var(--txt-mute) }
.ld-kpi-num{ font-size:27px; font-weight:900; letter-spacing:-.01em; line-height:1.2 }
.ld-kpi-sub{ font-size:10.5px; color:var(--txt-mute) }

.ld-float-ai{
  inset-inline-end:2.5rem; bottom:-1.1rem; max-width:300px;
  display:flex; align-items:flex-start; gap:.55rem;
  border-color:var(--gold-ring);
}
.ld-ai-ico{ display:grid; place-items:center; width:26px; height:26px; border-radius:8px; flex:none; color:var(--on-gold); background-image:linear-gradient(180deg,#FFD65A,#F5B60F) }
.ld-ai-ico svg{ width:15px; height:15px }
.ld-ai-text{ font-size:12px; line-height:1.8; color:var(--txt); min-height:1.8em }
.ld-ai-text::after{ content:'▍'; color:var(--gold-ink); animation:ldBlink 1s steps(2) infinite; margin-inline-start:1px }
.ld-ai-text.done::after{ display:none }
@keyframes ldBlink{ to{ opacity:0 } }

/* رنگ مثبت/منفی — همان توکن‌های برنامه */
.t-up{ color:var(--up) } .t-down{ color:var(--down) }

/* ---- کارت‌های شناور ویژگی‌ها ---- */
.ld-badge{
  display:inline-grid; place-items:center; min-width:20px; height:20px; padding-inline:.35rem;
  border-radius:999px; font-size:11px; font-weight:800; color:var(--on-gold);
  background-image:linear-gradient(180deg,#FFD65A,#F5B60F);
}
.ld-kv{ list-style:none; margin:0; padding:0; display:grid; gap:.32rem }
.ld-kv li{ display:flex; justify-content:space-between; gap:.8rem; font-size:11.5px; color:var(--txt-dim) }
.ld-kv b{ color:var(--txt); font-weight:700; direction:ltr }

/* ۰۱ دیدبان: فیلتر + حلقهٔ زنده */
.ld-f-filter{ width:232px; top:-1.25rem; inset-inline-start:-1.5rem }
.ld-f-live{ bottom:-.9rem; inset-inline-end:-1rem; display:flex; align-items:center; gap:.7rem; padding:.65rem .85rem }
.ld-ring{ width:44px; height:44px; transform:rotate(-90deg); flex:none }
.ld-ring-track{ fill:none; stroke:var(--track); stroke-width:4 }
.ld-ring-fill{
  fill:none; stroke:var(--gold); stroke-width:4; stroke-linecap:round;
  stroke-dasharray:113.1; stroke-dashoffset:113.1;
  animation:ldRing 3s linear infinite;          /* همان REFRESH_MS دیدبان */
}
@keyframes ldRing{ to{ stroke-dashoffset:0 } }
.ld-live-txt{ display:flex; flex-direction:column; gap:.1rem }
.ld-live-txt b{ display:inline-flex; align-items:center; gap:.4rem; font-size:12.5px; color:var(--txt) }
.ld-live-txt span{ font-size:10.5px; color:var(--txt-mute) }

/* ۰۲ مدیریت سبد: ارزش سبد + دونات ترکیب + تشخیص استراتژی */
.ld-f-value{ top:-1.2rem; inset-inline-end:-1.25rem; display:flex; flex-direction:column; gap:.15rem; min-width:220px }
.ld-f-value .ld-kpi-num{ font-size:21px; color:var(--txt-strong) }
.ld-f-value .ld-kpi-num small{ font-size:11px; font-weight:600; color:var(--txt-mute) }
.ld-f-donut{ bottom:-1rem; inset-inline-start:-1.25rem; display:flex; align-items:center; gap:.8rem }
.ld-donut{ width:64px; height:64px; transform:rotate(-90deg); flex:none }
.ld-donut-track{ fill:none; stroke:var(--donut-track); stroke-width:8 }
.ld-arc{
  fill:none; stroke:var(--c); stroke-width:8;
  stroke-dasharray:var(--len) 163.4; stroke-dashoffset:var(--off);
  animation:ldArc 1.2s var(--ease-out) calc(var(--d, 0s) + .5s) both;
}
@keyframes ldArc{ from{ stroke-dasharray:0 163.4 } }
.ld-legend-mini{ list-style:none; margin:0; padding:0; display:grid; gap:.22rem; font-size:10.5px; color:var(--txt-dim) }
.ld-legend-mini li{ display:flex; align-items:center; gap:.4rem }
.ld-legend-mini i{ width:7px; height:7px; border-radius:99px; flex:none }
.ld-legend-mini b{ margin-inline-start:auto; padding-inline-start:.8rem; color:var(--txt); font-weight:700 }
.ld-f-detect{
  top:46%; inset-inline-end:-2rem;
  display:flex; align-items:center; gap:.5rem; padding:.55rem .75rem;
  font-size:11.5px; border-color:var(--gold-ring);
}
.ld-detect-legs{ display:inline-flex; align-items:center; gap:.3rem; color:var(--txt) }
.ld-detect-legs i{ font-style:normal; color:var(--txt-mute) }
.ld-detect-arrow{ color:var(--txt-mute) }
.ld-detect-tick{
  width:16px; height:16px; border-radius:99px; background-color:var(--up); position:relative; flex:none;
  animation:ldTick .5s cubic-bezier(.34,1.56,.64,1) calc(var(--d, 0s) + 1.1s) backwards;
}
.ld-detect-tick::after{
  content:''; position:absolute; inset:0; background-color:#fff;
  -webkit-mask:var(--ld-tick) center / 10px 10px no-repeat; mask:var(--ld-tick) center / 10px 10px no-repeat;
}
@keyframes ldTick{ from{ transform:scale(0) } }

/* ۰۳ ساخت استراتژی: نقطهٔ متحرک روی نمودار + یونانی‌ها */
.ld-f-walk{ width:240px; bottom:-1.2rem; inset-inline-start:-1.5rem }
.ld-f-walk svg{ width:100%; height:78px; display:block }
.ld-float-mini{ font-size:11.5px; font-weight:700; color:var(--gold-ink) }
.ld-guide{ stroke:var(--gold); stroke-width:1; stroke-dasharray:2 3; opacity:.7 }
.ld-f-greeks{ top:-1rem; inset-inline-end:-1.25rem; width:214px }
.ld-bars{ list-style:none; margin:.45rem 0 0; padding:0; display:grid; gap:.42rem }
.ld-bars li{ display:grid; grid-template-columns:32px 1fr 44px; align-items:center; gap:.5rem; font-size:11px; color:var(--txt-dim) }
.ld-bars em{ font-style:normal; font-weight:700; color:var(--txt); direction:ltr; text-align:end }
.ld-bar{ display:block; height:6px; border-radius:99px; background-color:var(--track); overflow:hidden }
.ld-bar b{
  display:block; height:100%; width:var(--w); border-radius:99px;
  background-image:linear-gradient(90deg, var(--gold-2), var(--gold));
  animation:ldBar 1s var(--ease-out) calc(var(--d, 0s) + .5s) both;
}
.ld-bar-dn b{ background-image:linear-gradient(90deg, #DC2626, var(--down)) }
@keyframes ldBar{ from{ width:0 } }

/* ۰۴ هوش مصنوعی: ابزارهای پشت صحنه + گفت‌وگو */
.ld-f-tools{ top:-1rem; inset-inline-end:-1.25rem; width:204px }
.ld-tools{ list-style:none; margin:.45rem 0 0; padding:0; display:grid; gap:.4rem }
.ld-tools li{ display:flex; align-items:center; gap:.5rem; font-size:11.5px; color:var(--txt-mute); transition:color .3s }
.ld-tools li i{
  width:16px; height:16px; border-radius:99px; flex:none; position:relative;
  border:1.5px solid var(--line-strong);
  transition:background-color .3s, border-color .3s;
}
.ld-tools li.run, .ld-tools li.done{ color:var(--txt) }
.ld-tools li.run i{ border-color:var(--gold); border-top-color:transparent; animation:ldSpin .8s linear infinite }
.ld-tools li.done i{ background-color:var(--up); border-color:var(--up) }
.ld-tools li.done i::after{
  content:''; position:absolute; inset:0; background-color:#fff;
  -webkit-mask:var(--ld-tick) center / 9px 9px no-repeat; mask:var(--ld-tick) center / 9px 9px no-repeat;
}
@keyframes ldSpin{ to{ transform:rotate(360deg) } }
.ld-f-chat{ bottom:-1.2rem; inset-inline-start:-1.5rem; width:min(300px, 90%); display:grid; gap:.5rem; border-color:var(--gold-ring) }
.ld-chat-q{
  justify-self:start; max-width:88%; padding:.4rem .7rem;
  border-radius:11px 3px 11px 11px; font-size:11.5px; color:var(--txt);
  background-color:var(--surface-3); border:1px solid var(--line);
}
.ld-chat-a{ display:flex; align-items:flex-start; gap:.5rem }

@media (max-width:1200px){
  .ld-hero-in{ grid-template-columns:1fr 1fr }
}
@media (max-width:1024px){
  .ld-hero-in{ grid-template-columns:1fr; gap:2.5rem; min-height:0 }
  .ld-hero-stage{ padding:1rem 1.5rem 3rem; max-width:720px; margin-inline:auto; width:100% }
  .ld-stage, .ld-feat-rev .ld-feat-stage{ --ry:0deg; --rx:0deg }
  .ld-float-payoff{ inset-inline-start:0 }
  .ld-float-kpi{ inset-inline-end:0 }
}
@media (max-width:640px){
  .ld-hero{ padding-top:2rem }
  .ld-hero-stage{ padding:.5rem 0 3.25rem }
  .ld-float-kpi{ top:-1rem; min-width:0 }
  .ld-kpi-num{ font-size:21px }
  .ld-float-payoff{ width:190px; bottom:.5rem }
  .ld-float-payoff svg{ height:60px }
  .ld-float-ai{ max-width:min(260px, 80%); inset-inline-end:.25rem; bottom:-.75rem }
  .ld-feat-stage{ padding:1rem 0 1.75rem }
  .ld-feat-stage .ld-float{ zoom:.82 }   /* روی موبایل قاب کوچک است؛ کارت‌ها نباید آن را بپوشانند */
  .ld-f-filter, .ld-f-walk, .ld-f-chat, .ld-f-donut{ inset-inline-start:0 }
  .ld-f-live, .ld-f-value, .ld-f-greeks, .ld-f-tools, .ld-f-detect{ inset-inline-end:0 }
  .ld-f-filter, .ld-f-walk{ width:200px }
  .ld-f-greeks, .ld-f-tools{ width:180px }
  .ld-f-value{ min-width:0 }
  .ld-f-detect{ top:auto; bottom:3.6rem; font-size:11px }
}

/* --------------------------------- آمار ---------------------------------- */
.ld-stats{
  display:grid; grid-template-columns:repeat(4, 1fr);
  border:1px solid var(--line); border-radius:18px; overflow:hidden;
  background-color:var(--surface);
  background-image:linear-gradient(180deg, var(--card-sheen), transparent);
}
.ld-stat{
  display:flex; flex-direction:column; align-items:center; gap:.3rem; text-align:center;
  padding:1.6rem 1rem; border-inline-start:1px solid var(--line-soft);
}
.ld-stat:last-child{ border-inline-start:none }
.ld-stat b{ font-size:clamp(28px, 3vw, 38px); font-weight:900; color:var(--txt-strong); line-height:1.1 }
.ld-stat b small{ font-size:.42em; font-weight:700; color:var(--txt-dim) }
.ld-stat > span{ font-size:12.5px; color:var(--txt-mute) }
@media (max-width:720px){
  .ld-stats{ grid-template-columns:repeat(2, 1fr) }
  .ld-stat:nth-child(2){ border-inline-start:none }
  .ld-stat:nth-child(1), .ld-stat:nth-child(2){ border-bottom:1px solid var(--line-soft) }
}

/* -------------------------------- ویژگی‌ها -------------------------------- */
.ld-feat{
  display:grid; grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr);
  align-items:center; gap:3.5rem;
  padding-block:3rem;
}
.ld-feat + .ld-feat{ border-top:1px solid var(--line-soft) }
.ld-feat-rev .ld-feat-copy{ order:2 }
.ld-feat-rev .ld-feat-stage{ order:1 }

.ld-num{
  display:block; font-size:clamp(40px, 4vw, 56px); font-weight:900; line-height:1;
  letter-spacing:.02em; margin-bottom:.6rem;
  background-image:linear-gradient(92deg, var(--ld-grad-a), var(--ld-grad-b) 55%, var(--ld-grad-c));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.ld-feat h3{ font-size:clamp(21px, 2.2vw, 28px); font-weight:900; color:var(--txt-strong); margin:0 0 .35rem; line-height:1.4 }
.ld-feat-lead{ font-size:16px; font-weight:700; color:var(--txt); margin:0 0 .6rem }
.ld-feat-copy > p:not(.ld-feat-lead){ font-size:14.5px; line-height:1.95; color:var(--txt-dim); margin:0 0 1.1rem }
.ld-bullets{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem }
.ld-bullets li{
  position:relative; padding-inline-start:1.7rem;
  font-size:13.5px; line-height:1.8; color:var(--txt-dim);
}
/* دایره و تیک هر دو ۱۶px و هم‌مرکز، وسطِ خط اولِ متن (نیمهٔ ارتفاع خط = .9em) */
.ld-bullets li::before{
  content:''; position:absolute; inset-inline-start:0; top:calc(.9em - 8px);
  width:16px; height:16px; border-radius:99px; box-sizing:border-box;
  background-color:var(--gold-soft); border:1px solid var(--gold-ring);
}
.ld-bullets li::after{
  content:''; position:absolute; inset-inline-start:0; top:calc(.9em - 8px);
  width:16px; height:16px; background-color:var(--gold-ink);
  -webkit-mask:var(--ld-tick) center / 9px 9px no-repeat; mask:var(--ld-tick) center / 9px 9px no-repeat;
}

@media (max-width:900px){
  .ld-feat{ grid-template-columns:1fr; gap:1.75rem; padding-block:2.5rem }
  .ld-feat-rev .ld-feat-copy{ order:1 }
  .ld-feat-rev .ld-feat-stage{ order:2 }
}

/* ---- ۰۵: دو قاب روی هم — تقویم پشت و کوچک‌تر، زنجیره جلو ---- */
.ld-win-front{ position:relative; z-index:1 }
.ld-win-back{
  position:absolute; z-index:0; width:52%;
  top:-1.9rem; inset-inline-end:-1.6rem;
  opacity:.92;
}
.ld-win-back .ld-win-bar{ height:22px; padding-inline:.5rem }
.ld-win-back .ld-dots i{ width:6px; height:6px }
.ld-win-back .ld-url{ font-size:8px; padding:.05rem .4rem; max-width:200px }

/* نردبان اعمال: خرید راست، اعمال وسط، فروش چپ — مثل خودِ تب */
.ld-f-ladder{ width:236px; bottom:-1.2rem; inset-inline-start:-1.5rem }
.ld-ladder{ list-style:none; margin:0; padding:0; position:relative; display:grid; gap:2px }
.ld-ladder li{
  display:grid; grid-template-columns:1fr 64px 1fr; align-items:center; gap:.3rem;
  font-size:10.5px; color:var(--txt-mute); line-height:1.6;
}
.ld-ladder li b{ text-align:center; color:var(--txt); font-weight:700; background-color:var(--surface-3); border-radius:5px; padding:.1rem 0 }
.ld-ladder li .c{ text-align:start; padding-inline-start:.3rem; border-radius:5px; transition:background-color .35s, color .35s }
.ld-ladder li .p{ text-align:end; padding-inline-end:.3rem; border-radius:5px; transition:background-color .35s, color .35s }
.ld-ladder li .itm{ background-color:var(--gold-soft); color:var(--gold-ink) }
.ld-ladder-spot{
  position:absolute; inset-inline:.9rem; top:var(--y, 60%); height:0;
  border-top:1.5px dashed var(--gold); pointer-events:none;
  transition:top .6s var(--ease-out);
}
.ld-ladder-spot span{
  position:absolute; inset-inline-end:0; top:-9px;
  font-size:9.5px; color:var(--on-gold); background-color:var(--gold); border-radius:5px; padding:.05rem .4rem; line-height:1.5;
}
.ld-ladder-spot b{ font-weight:800 }
.ld-f-ladder .ld-float-head{ margin-bottom:.5rem }
.ld-f-ladder .ld-ladder{ margin-bottom:.35rem }
.ld-f-expiry{ bottom:-1rem; inset-inline-end:-1rem; width:214px }

/* ---- ۰۶: ورود پول، موقعیت باز، دو بازار ---- */
.ld-f-flow{ width:236px; top:-1.2rem; inset-inline-end:-1.25rem }
.ld-cols{ display:flex; align-items:flex-end; gap:5px; height:58px; margin:.3rem 0 .2rem }
.ld-cols i{
  flex:1; height:var(--h); border-radius:3px 3px 0 0;
  background-image:linear-gradient(180deg, var(--up), rgba(34,197,94,.45));
  animation:ldGrow .9s var(--ease-out) calc(var(--d, 0s) + .4s + var(--i, 0) * .07s) both;
}
.ld-cols i.dn{ background-image:linear-gradient(180deg, var(--down), rgba(239,68,68,.45)) }
@keyframes ldGrow{ from{ height:0 } }
.ld-f-oi{ bottom:-1rem; inset-inline-start:-1.25rem; width:190px }
.ld-oi{ margin-top:.45rem }
.ld-oi li span{ color:var(--txt) }
.ld-f-seg{ top:46%; inset-inline-end:-1.75rem; padding:.45rem .5rem }
.ld-seg{ position:relative; display:inline-flex; gap:2px; padding:3px; border-radius:999px; background-color:var(--surface-3); border:1px solid var(--line) }
.ld-seg b{ position:relative; z-index:1; padding:.3rem .7rem; border-radius:999px; font-size:11px; font-weight:700; color:var(--txt-mute); white-space:nowrap; transition:color .35s }
.ld-seg b.on{ color:var(--on-gold) }
.ld-seg-ink{
  position:absolute; top:3px; bottom:3px; inset-inline-start:var(--x, 3px); width:var(--w, 0px);
  border-radius:999px; background-image:linear-gradient(180deg,#FFD65A,#F5B60F);
  box-shadow:0 6px 16px -6px rgba(255,197,49,.7);
  transition:inset-inline-start .45s var(--ease-out), width .45s var(--ease-out);
}
/* موبایل — باید بعد از قواعد بالا بیاید تا در آبشار برنده شود */
@media (max-width:640px){
  .ld-win-back{ width:46%; top:-1rem; inset-inline-end:0 }
  .ld-f-ladder{ width:190px; inset-inline-start:0 }
  .ld-f-expiry{ width:150px; top:-1rem; bottom:auto; inset-inline-start:0; inset-inline-end:auto }
  .ld-f-flow{ width:190px; inset-inline-end:0 }
  .ld-f-oi{ width:160px; inset-inline-start:0 }
  .ld-f-seg{ top:auto; bottom:3.6rem; inset-inline-end:0 }
}

/* ------------------------------- استراتژی‌ها ------------------------------ */
.ld-marquee{
  position:relative; overflow:hidden; padding-block:.45rem;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.ld-track{
  display:flex; gap:.6rem; width:max-content;
  animation:ldMarquee 70s linear infinite;
}
.ld-marquee-rev .ld-track{ animation-direction:reverse; animation-duration:84s }
.ld-marquee:hover .ld-track{ animation-play-state:paused }
/* محتوا دو بار تکرار شده؛ نصف عرض که برود، دقیقاً همان‌جای شروع است */
@keyframes ldMarquee{ from{ transform:translateX(0) } to{ transform:translateX(50%) } }

.ld-strat{
  display:inline-flex; align-items:center; gap:.6rem; flex:none;
  padding:.55rem .9rem; border-radius:12px;
  background-color:var(--surface); border:1px solid var(--line);
  font-size:13px; font-weight:700; color:var(--txt);
  transition:border-color .25s, transform .25s var(--ease-out);
}
.ld-strat:hover{ border-color:var(--line-strong); transform:translateY(-2px) }
.ld-strat small{ font-size:10.5px; font-weight:500; color:var(--txt-mute); direction:ltr }

/* چیپ دید بازار — همان رنگ‌بندی کارت افزودن استراتژی در دیدبان */
.ld-tag{ font-size:10.5px; padding:.15rem .5rem }
.tag-bull { color:#4ADE80; background-color:rgba(34,197,94,.12);   border-color:rgba(34,197,94,.28)   }
.tag-bear { color:#F87171; background-color:rgba(239,68,68,.12);   border-color:rgba(239,68,68,.28)   }
.tag-vol  { color:#F9A8D4; background-color:rgba(244,114,182,.13); border-color:rgba(244,114,182,.3)  }
.tag-range{ color:#67E8F9; background-color:rgba(34,211,238,.12);  border-color:rgba(34,211,238,.28)  }
.tag-flat { color:var(--txt-dim); background-color:var(--surface-4); border-color:var(--line-strong) }
:root[data-theme="light"] .tag-bull { color:#15803D }
:root[data-theme="light"] .tag-bear { color:#B91C1C }
:root[data-theme="light"] .tag-vol  { color:#BE185D }
:root[data-theme="light"] .tag-range{ color:#0E7490 }

.ld-legend{
  list-style:none; margin:2rem 0 0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem 1.6rem;
}
.ld-legend li{ display:inline-flex; align-items:center; gap:.5rem; font-size:12.5px; color:var(--txt-mute) }

/* --------------------------------- سه قدم -------------------------------- */
.ld-steps{
  list-style:none; margin:0; padding:0; counter-reset:none;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1.25rem;
  position:relative;
}
.ld-step{ position:relative; padding:1.6rem 1.4rem 1.5rem; overflow:hidden }
.ld-step-n{
  position:absolute; top:.75rem; inset-inline-end:1.1rem;
  font-size:56px; font-weight:900; line-height:1; pointer-events:none;
  background-image:linear-gradient(180deg, var(--ld-grad-a), var(--ld-grad-c));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.ld-step-ico{
  display:grid; place-items:center; width:46px; height:46px; border-radius:13px;
  color:var(--gold-ink); background-color:var(--gold-soft); border:1px solid var(--gold-ring);
  margin-bottom:1rem;
}
.ld-step-ico svg{ width:22px; height:22px }
.ld-step h3{ font-size:17px; font-weight:800; color:var(--txt-strong); margin:0 0 .4rem }
.ld-step p{ font-size:13.5px; line-height:1.9; color:var(--txt-dim); margin:0 }
@media (max-width:900px){ .ld-steps{ grid-template-columns:1fr; max-width:520px; margin-inline:auto } }

/* --------------------------------- باشگاه -------------------------------- */
.ld-club{ padding-block:3rem 5.5rem }
.ld-club-box{
  position:relative; overflow:hidden;
  padding:3.25rem 2.5rem 2.75rem;
  border-radius:28px; border:1px solid var(--gold-ring);
  background-color:var(--surface);
  background-image:
    radial-gradient(900px 400px at 50% -10%, var(--gold-soft), transparent 60%),
    linear-gradient(180deg, var(--card-sheen), transparent);
  box-shadow:0 40px 100px -50px rgba(255,197,49,.35), var(--card-shadow);
  text-align:center;
}
.ld-club-glow{
  position:absolute; inset:-40% -20% auto; height:70%; pointer-events:none;
  background:radial-gradient(ellipse at 50% 100%, rgba(255,197,49,.14), transparent 60%);
}
.ld-club-box .ld-sec-head{ margin-bottom:2.25rem; position:relative }
.ld-club-box .ld-sub{ margin-inline:auto }

.ld-plans{ display:grid; grid-template-columns:repeat(4, 1fr); gap:1rem; text-align:start; position:relative }
.ld-plan{ position:relative; padding:1.4rem 1.3rem 1.3rem }
.ld-plan h3{ font-size:17px; font-weight:900; color:var(--txt-strong); margin:0 0 .15rem }
.ld-plan-sub{ display:block; font-size:12px; color:var(--txt-mute); margin-bottom:1rem }
.ld-plan ul{ list-style:none; margin:0; padding:0; display:grid; gap:.45rem }
.ld-plan li{ position:relative; padding-inline-start:1.3rem; font-size:13px; color:var(--txt-dim); line-height:1.7 }
.ld-plan li::before{
  content:''; position:absolute; inset-inline-start:2px; top:.62em;
  width:6px; height:6px; border-radius:99px; background-color:var(--gold);
}
/* قیمت: عدد درشت، قیمت پیش از تخفیف خط‌خورده، نشان تخفیف سبز */
.ld-plan-price{ margin:-.35rem 0 1rem }
.ld-plan-price b{ font-size:21px; font-weight:900; color:var(--txt-strong) }
.ld-plan-price small{ font-size:11.5px; color:var(--txt-mute) }
.ld-plan-price s{ display:block; font-size:12px; color:var(--txt-mute) }
.ld-plan-off{
  display:table; margin-top:.4rem;
  padding:.15rem .6rem; border-radius:999px;
  font-size:11px; font-weight:800; color:var(--up);
  background-color:color-mix(in srgb, var(--up) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--up) 35%, transparent);
}
.ld-plan li.is-off{ color:var(--txt-mute); text-decoration:line-through; text-decoration-color:var(--line-strong) }
.ld-plan li.is-off::before{ background-color:var(--line-strong) }
.ld-plan-renew{ position:relative; margin:1rem 0 0; text-align:center; font-size:12.5px; color:var(--txt-mute) }
.ld-plan-hot{ border-color:var(--gold-ring); background-color:var(--gold-soft) }
.ld-plan-hot h3{ color:var(--gold-ink) }
.ld-plan-hot li{ color:var(--txt) }
.ld-plan-badge{
  position:absolute; top:-.7rem; inset-inline-end:1rem;
  padding:.22rem .7rem; border-radius:999px;
  font-size:11px; font-weight:800; color:var(--on-gold);
  background-image:linear-gradient(180deg,#FFD65A,#F5B60F);
  box-shadow:0 6px 16px -6px rgba(255,197,49,.8);
}

.ld-club-cta{ position:relative; display:flex; flex-direction:column; align-items:center; gap:.9rem; margin-top:2.25rem }
.ld-club-note{ font-size:12.5px; color:var(--txt-mute) }
.ld-club-note a{ color:var(--gold-ink); font-weight:700; text-decoration:none }
.ld-club-note a:hover{ text-decoration:underline }

@media (max-width:1200px){
  .ld-plans{ grid-template-columns:repeat(2, 1fr) }
}
@media (max-width:900px){
  .ld-club-box{ padding:2.5rem 1.25rem 2rem; border-radius:22px }
  .ld-plans{ grid-template-columns:1fr; max-width:460px; margin-inline:auto }
  .ld-plan-hot{ order:-1 }
}

/* --------------------------------- سوالات -------------------------------- */
.ld-faq-wrap{ max-width:820px }
.ld-faq{ display:grid; gap:.6rem }
.ld-q{
  border:1px solid var(--line); border-radius:14px; background-color:var(--surface);
  transition:border-color .25s var(--ease-soft);
}
.ld-q[open]{ border-color:var(--line-strong) }
.ld-q summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem 1.15rem; font-size:15px; font-weight:800; color:var(--txt);
}
.ld-q summary::-webkit-details-marker{ display:none }
.ld-q summary::after{
  content:''; flex:none; width:22px; height:22px; border-radius:99px;
  border:1px solid var(--line); background-color:var(--surface-3);
  background-image:linear-gradient(var(--txt-dim), var(--txt-dim)), linear-gradient(var(--txt-dim), var(--txt-dim));
  background-size:10px 1.5px, 1.5px 10px; background-position:center; background-repeat:no-repeat;
  transition:transform .35s var(--ease-out), background-color .25s;
}
.ld-q[open] summary::after{ transform:rotate(45deg); background-color:var(--gold-soft); border-color:var(--gold-ring) }
.ld-a{ padding:0 1.15rem 1.1rem }
.ld-a p{ margin:0; font-size:14px; line-height:1.95; color:var(--txt-dim) }

/* ---------------------------------- پابرگ -------------------------------- */
.ld-footer{ border-top:1px solid var(--line-soft); background-color:var(--surface-2); padding-block:2.25rem }
.ld-footer-in{ display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap }
.ld-footer-brand{ display:flex; align-items:center; gap:.6rem }
.ld-footer-tag{ font-size:11px; color:var(--txt-mute); letter-spacing:.14em; text-transform:uppercase; direction:ltr }
.ld-footer-links{ display:flex; flex-wrap:wrap; gap:.15rem 1.1rem; margin-inline:auto }
.ld-footer-links a{ font-size:12.5px; color:var(--txt-dim); text-decoration:none; transition:color .2s }
.ld-footer-links a:hover{ color:var(--gold-ink) }
.ld-copy{ margin:0; font-size:12px; color:var(--txt-mute) }
@media (max-width:720px){ .ld-footer-in{ flex-direction:column; text-align:center } .ld-footer-links{ justify-content:center } }

/* --------------------------- آشکار شدن با اسکرول -------------------------- */
.rv{
  opacity:0; transform:translateY(26px);
  transition:opacity .75s var(--ease-out) var(--d, 0s), transform .75s var(--ease-out) var(--d, 0s);
}
.rv.in{ opacity:1; transform:none }
/* کارت‌های .card گذار transform خودشان را دارند؛ بعد از ورود همان بماند */
.rv.in.card{ transition:border-color .3s var(--ease-soft), transform .4s var(--ease-out), box-shadow .4s var(--ease-out), background .35s var(--ease-soft) }

@media (prefers-reduced-motion: reduce){
  .rv{ opacity:1; transform:none }
  .ld-track{ animation:none }
  .ld-float{ animation:none }
  .ld-feat.rv:not(.in) .ld-stage .ld-window{ transform:none; opacity:1 }
}

/* بنر بالای بخش اول — متنش از پنل مدیریت (/api/landing) */
.ld-banner{
  display:inline-flex; align-items:center; gap:.4rem; margin-bottom:.9rem; padding:.4rem .9rem; border-radius:999px;
  font-size:12.5px; font-weight:800; color:var(--on-gold);
  background-image:linear-gradient(180deg, #FFD65A, #F5B60F); box-shadow:0 8px 24px -12px rgba(255,197,49,.9);
}