/* TraderFa DS v3.1 — HOME page sections (loaded only by Views/Home/Index.cshtml via PageStyles).
   Pine Script® showcase: Views/Home/_PineShowcase.cshtml + js/pine-showcase.js. */
.tf-pine { padding-block: clamp(2rem, 1rem + 3vw, 3.5rem); }
.tf-pine__card { padding: clamp(1.5rem, .8rem + 3vw, 3.5rem); }
.tf-pine__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(1.5rem, 1rem + 3vw, 3.5rem); align-items: center; }
.tf-pine__copy { display: grid; justify-items: start; gap: 18px; }
.tf-pine__title { margin: 0; font-size: clamp(1.5rem, 1.05rem + 1.7vw, 2.4rem); line-height: 1.45; font-weight: var(--ds-fw-black); color: #fff; letter-spacing: 0; text-wrap: balance; }
.tf-pine__brand { display: inline-block; background: linear-gradient(90deg, hsl(199 95% 70%), hsl(217 95% 75%) 55%, hsl(45 100% 70%));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.tf-pine__lead { margin: 0; max-width: 34rem; font-size: var(--ds-fs-body); line-height: 2; color: hsl(215 25% 78%); text-wrap: pretty; }
.tf-pine__feats { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; width: 100%; max-width: 36rem; }
.tf-pine__feats li { display: flex; gap: 10px; align-items: flex-start; }
.tf-pine__fi { flex: none; width: 36px; height: 36px; border-radius: var(--ds-r-md); display: grid; place-items: center; color: hsl(199 95% 72%);
  background: hsl(199 89% 60% / .10); box-shadow: inset 0 0 0 1px hsl(199 89% 60% / .22); }
.tf-pine__feats b { display: block; font-size: var(--ds-fs-sm); color: #fff; font-weight: var(--ds-fw-black); }
.tf-pine__feats small { display: block; margin-top: 2px; font-size: var(--ds-fs-xs); color: hsl(215 20% 68%); line-height: 1.7; }
.tf-pine__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.tf-pine__cta .ds-btn svg { flex: none; }

/* demo: editor window + chart, LTR */
.tf-pine { --tf-mono: ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Code", "Roboto Mono", Menlo, Consolas, "Liberation Mono", monospace; }
/* the site reset gives every element IRANYekanX + "ss02" (Farsi digits); code must stay Latin + monospace */
.tf-pine__demo * { font-family: inherit; font-feature-settings: "ss02" 0; }
.tf-pine__demo { font-family: var(--tf-mono); position: relative; display: grid; gap: 12px; text-align: left; }
.tf-pine__win, .tf-pine__chart { border-radius: var(--ds-r-lg); background: hsl(225 35% 8% / .82); backdrop-filter: blur(6px);
  box-shadow: 0 0 0 1px hsl(215 40% 70% / .12), 0 24px 60px -30px #000; }
.tf-pine__win { overflow: hidden; }
.tf-pine__bar { display: flex; align-items: center; gap: 10px; height: 38px; padding-inline: 12px; border-bottom: 1px solid hsl(215 40% 70% / .10);
  font: 600 12px/1 var(--tf-mono); color: hsl(215 20% 70%); }
.tf-pine__dots { display: inline-flex; gap: 6px; } .tf-pine__dots i { width: 9px; height: 9px; border-radius: 50%; background: hsl(215 20% 30%); }
.tf-pine__tab { color: #e6edf7; }
.tf-pine__ver { padding: 3px 6px; border-radius: 5px; background: hsl(45 95% 58% / .14); color: hsl(45 100% 70%); }
.tf-pine__run { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding-inline: 10px; border-radius: var(--ds-r-xs);
  color: #fff; background: hsl(217 91% 55%); transition: transform .15s, box-shadow .3s, background-color .3s; }
.tf-pine__code { margin: 0; padding: 14px 0 12px; min-height: 0; overflow: hidden; counter-reset: ln;
  font: 500 12.5px/1.75 var(--tf-mono); color: #c9d4e5; white-space: normal; tab-size: 4; direction: ltr; }
.tf-pine__code code { font: inherit; display: block; }
.tf-pine__code .l { display: block; white-space: pre; position: relative; padding-left: 46px; padding-right: 12px; min-height: 1.75em; }
.tf-pine__code .l::before { counter-increment: ln; content: counter(ln); position: absolute; left: 0; width: 30px; text-align: right; color: hsl(215 15% 40%); }
.tf-pine__code i { font-style: normal; color: hsl(215 15% 52%); }
.tf-pine__code b.f { font-weight: 500; color: hsl(199 95% 70%); }
.tf-pine__code s { text-decoration: none; color: hsl(95 60% 66%); }
.tf-pine__code u { text-decoration: none; color: hsl(25 95% 68%); }
.tf-pine__code em { font-style: normal; }
.tf-pine__code .k1, .tf-pine__legend .k1 { color: hsl(217 95% 72%); }
.tf-pine__code .k2, .tf-pine__legend .k2 { color: hsl(32 98% 62%); }
.tf-pine__code .k3 { color: hsl(152 70% 55%); }
.tf-pine__status { display: flex; justify-content: space-between; align-items: center; height: 30px; padding-inline: 12px; border-top: 1px solid hsl(215 40% 70% / .10);
  font: 500 11.5px/1 var(--tf-mono); color: hsl(215 15% 55%); }
.tf-pine__ok { display: inline-flex; align-items: center; gap: 6px; color: hsl(152 70% 55%); }
.tf-pine__chart { position: relative; height: 230px; padding: 10px 62px 8px 8px; }
.tf-pine__legend { position: absolute; top: 10px; left: 12px; z-index: 1; display: flex; gap: 12px; font: 600 11.5px/1 var(--tf-mono); color: hsl(215 20% 75%); }
.tf-pine__svg { display: block; width: 100%; height: 100%; overflow: visible; }
.tf-pine__svg .g line { stroke: hsl(215 40% 70% / .07); stroke-width: 1; }
.tf-pine__svg .cd line { stroke-width: 1; vector-effect: non-scaling-stroke; }
.tf-pine__svg .u line { stroke: hsl(158 64% 46%); } .tf-pine__svg .u rect { fill: hsl(158 64% 46%); }
.tf-pine__svg .d line { stroke: hsl(0 78% 62%); }  .tf-pine__svg .d rect { fill: hsl(0 78% 62%); }
.tf-pine__svg .ema { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.tf-pine__svg .ema.k1 { stroke: hsl(217 95% 66%); } .tf-pine__svg .ema.k2 { stroke: hsl(32 98% 58%); }
.tf-pine__svg .mk .up { fill: hsl(152 70% 52%); } .tf-pine__svg .mk .dn { fill: hsl(0 85% 66%); }
.tf-pine__svg .lp { stroke: hsl(158 64% 46% / .6); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.tf-pine__price { position: absolute; right: 8px; translate: 0 -50%; padding: 3px 6px; border-radius: 4px;
  font: 700 11px/1 var(--tf-mono); color: #fff; background: hsl(158 64% 40%); }

/* animation states (set by js/pine-showcase.js; without JS the final frame is shown) */
.tf-pine.is-anim .tf-pine__code .l { clip-path: inset(0 100% 0 0); }
.tf-pine.is-anim .tf-pine__code .l.on { clip-path: inset(0 0 0 0); transition: clip-path .26s steps(18, end); }
.tf-pine.is-anim .tf-pine__ok { opacity: 0; transition: opacity .3s; }
.tf-pine.is-anim.is-run .tf-pine__ok { opacity: 1; }
.tf-pine.is-anim.is-typed:not(.is-run) .tf-pine__run { transform: scale(.94); box-shadow: 0 0 0 4px hsl(217 91% 60% / .35); }
.tf-pine.is-anim .tf-pine__svg .ema { stroke-dasharray: 1; stroke-dashoffset: 1; }
.tf-pine.is-anim.is-drawn .tf-pine__svg .ema { stroke-dashoffset: 0; transition: stroke-dashoffset 1.8s cubic-bezier(.4, .1, .2, 1); }
.tf-pine.is-anim.is-drawn .tf-pine__svg .ema.k2 { transition-delay: .25s; }
.tf-pine.is-anim .tf-pine__svg .mk path { opacity: 0; }
.tf-pine.is-anim.is-drawn .tf-pine__svg .mk path { opacity: 1; transition: opacity .3s; transition-delay: calc(var(--t) * 1.8s + .2s); }
.tf-pine.is-anim .tf-pine__legend .k1, .tf-pine.is-anim .tf-pine__legend .k2 { opacity: 0; transition: opacity .4s; }
.tf-pine.is-anim.is-drawn .tf-pine__legend .k1, .tf-pine.is-anim.is-drawn .tf-pine__legend .k2 { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .tf-pine * { transition: none !important; } }

@media (max-width: 1023px) {
  .tf-pine__grid { grid-template-columns: 1fr; }
  .tf-pine__demo { order: 2; }
}
@media (max-width: 639px) {
  .tf-pine__card { border-radius: var(--ds-r-lg); padding: 1.5rem 1rem; }
  .tf-pine__feats { grid-template-columns: 1fr; }
  .tf-pine__cta, .tf-pine__cta .ds-btn { width: 100%; }
  .tf-pine__code { font-size: 11px; overflow-x: auto; scrollbar-width: none; }
  .tf-pine__code .l { padding-left: 34px; } .tf-pine__code .l::before { width: 22px; }
  .tf-pine__chart { height: 190px; padding-right: 54px; }
  .tf-pine__run { display: none; }
}

/* light theme «روز / طلوع» copy colours for the orbit scene (the editor/chart demo stays a dark device) */
html:not(.dark-theme) .tf-pine__title, html:not(.dark-theme) .tf-pine__feats b { color: hsl(224 60% 12%); }
html:not(.dark-theme) .tf-pine__brand { background-image: linear-gradient(90deg, hsl(222 85% 38%), hsl(255 65% 46%) 55%, hsl(20 95% 44%)); }
html:not(.dark-theme) .tf-pine__lead { color: hsl(222 40% 22%); }
html:not(.dark-theme) .tf-pine__feats small { color: hsl(222 28% 30%); }
html:not(.dark-theme) .tf-pine__fi { color: hsl(222 80% 40%); background: hsl(0 0% 100% / .65); box-shadow: inset 0 0 0 1px hsl(0 0% 100% / .8); }
html:not(.dark-theme) .tf-pine__win, html:not(.dark-theme) .tf-pine__chart { box-shadow: 0 0 0 1px hsl(215 50% 20% / .25), 0 24px 50px -24px hsl(222 60% 15% / .7); }

/* =========================================================================================
   HERO (Views/Home/_HeroModern.cshtml; base .ds-hero in components.css) — phase 22 «بوم بازار»
   market canvas (Views/Shared/_MarketArt.cshtml, Art = "hero"); replaced the canvas planet.
   ========================================================================================= */
.tf-hero { padding-top: calc(72px + clamp(2.5rem, 1rem + 5vw, 6rem)); padding-bottom: clamp(9rem, 6rem + 10vw, 15rem);
  min-height: min(100svh, 56rem); }
.tf-hero .ds-hero__in { gap: clamp(14px, 10px + .8vw, 22px); }
.tf-hero__chip { display: inline-flex; align-items: center; gap: 8px; min-height: 30px; padding: 4px 14px; border-radius: var(--ds-r-pill);
  font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-bold); color: #fff; background: hsl(0 0% 100% / .08);
  box-shadow: inset 0 0 0 1px hsl(0 0% 100% / .16); backdrop-filter: blur(6px); }
.tf-hero .ds-hero__title { display: grid; justify-items: center; gap: .1em; }
.tf-hero__l1 { display: block; }
.tf-hero__type { display: flex; align-items: center; justify-content: center; min-height: 1.3em; contain: layout style; font-size: .82em; }
.tf-hero .accent-gradient-text { background: linear-gradient(90deg, hsl(199 95% 62%), hsl(190 90% 70%) 55%, hsl(45 100% 70%));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.tf-hero .hero-caret { background: hsl(199 95% 66%); }
.tf-hero .ds-btn .icon { width: 1em; height: 1em; }

/* live strip */
.tf-hero__live { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.tf-hero__live li { display: grid; justify-items: center; gap: 6px; min-width: 10.5rem; padding: 10px 14px 12px; border-radius: var(--ds-r-lg);
  background: hsl(225 40% 10% / .45); box-shadow: inset 0 0 0 1px hsl(0 0% 100% / .12); backdrop-filter: blur(8px); }
.tf-hero__lbl { font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-bold); color: hsl(215 25% 82%); }
.tf-hero__lbl small { font-weight: var(--ds-fw-regular); opacity: .75; }
.tf-hero__live .ds-odo { font-size: clamp(1.05rem, .9rem + .6vw, 1.35rem); gap: 2px; }
.tf-hero__live .ds-odo__d { width: .95em; border-radius: var(--ds-r-xs); }
.tf-hero__chg { font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-black); direction: ltr; min-height: 1.2em; }
.tf-hero__chg.is-up { color: hsl(152 70% 58%); } .tf-hero__chg.is-down { color: hsl(0 85% 70%); }
@media (max-width: 639px) {
  .tf-hero { padding-bottom: clamp(7rem, 30svh, 15rem); min-height: 100svh; align-content: center; }
  .tf-hero__live { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; gap: 6px; }
  .tf-hero__live li { min-width: 0; padding: 8px 4px 10px; }
  .tf-hero__live .ds-odo { font-size: .86rem; gap: 1px; }
  .tf-hero__live .ds-odo__d { width: .8em; border-radius: 4px; }
}

@media (max-width: 639px) and (max-height: 760px) {
  .tf-hero { padding-top: calc(64px + 1.25rem); padding-bottom: 5.5rem; }
  .tf-hero .ds-hero__in { gap: 12px; }
  .tf-hero .ds-hero__title { font-size: 1.75rem; }
  .tf-hero .ds-lead { font-size: .86rem; line-height: 1.75; }
  .tf-hero .ds-btn { min-height: 42px; }
}
/* phase 22 «بوم بازار»: the hero is a .mc-host (tokens in scenes.css) — same composition in both themes,
   only the ink changes. The old daylight sky / clouds / sun globe are gone. */
.tf-hero.mc-host { background: var(--mc-bg); }
.tf-hero.mc-host::after { background: linear-gradient(to bottom, transparent, var(--ds-bg) 94%); height: 24%; z-index: -1; }
html:not(.dark-theme) .tf-hero { color: hsl(224 60% 12%); }
html:not(.dark-theme) .tf-hero .ds-hero__title { background: linear-gradient(180deg, hsl(224 62% 12%) 40%, hsl(222 50% 26%)); -webkit-background-clip: text; background-clip: text; }
html:not(.dark-theme) .tf-hero .accent-gradient-text { background-image: linear-gradient(90deg, hsl(201 92% 38%), hsl(222 85% 45%) 55%, hsl(258 70% 50%)); }
html:not(.dark-theme) .tf-hero .hero-caret { background: hsl(201 92% 40%); }
html:not(.dark-theme) .tf-hero .ds-lead { color: hsl(222 30% 28%); }
html:not(.dark-theme) .tf-hero__chip { color: hsl(201 85% 28%); background: #fff; box-shadow: inset 0 0 0 1px hsl(205 60% 86%), 0 6px 18px -12px hsl(201 80% 35% / .45); }
html:not(.dark-theme) .tf-hero .ds-btn--secondary { background: #fff; color: hsl(224 60% 14%); border-color: hsl(214 40% 84%); box-shadow: 0 8px 20px -14px hsl(215 60% 30% / .4); }
html:not(.dark-theme) .tf-hero .ds-btn--secondary:hover { background: hsl(210 60% 98%); }
html:not(.dark-theme) .tf-hero__live li { background: hsl(0 0% 100% / .82); box-shadow: inset 0 0 0 1px hsl(214 45% 88%), 0 12px 28px -18px hsl(215 60% 30% / .45); }
html:not(.dark-theme) .tf-hero__lbl { color: hsl(222 30% 30%); }
html:not(.dark-theme) .tf-hero .ds-odo { color: hsl(224 62% 12%); }
html:not(.dark-theme) .tf-hero .ds-odo__d { background: linear-gradient(180deg, #fff, hsl(210 50% 96%)); box-shadow: inset 0 0 0 1px hsl(214 40% 86%); }
html:not(.dark-theme) .tf-hero__chg.is-up { color: hsl(158 80% 28%); } html:not(.dark-theme) .tf-hero__chg.is-down { color: hsl(0 72% 42%); }

/* =========================================================================================
   Phase 3 — FEATURE SHOWCASE (Views/Shared/_FeatureTabs.cshtml + js/ds/feature-tabs.js)
   ========================================================================================= */
.tf-feat { padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.tf-feat__head { display: grid; justify-items: center; text-align: center; gap: 10px; max-width: 44rem; margin: 0 auto clamp(1.25rem, 1rem + 1vw, 2rem); }
.tf-feat__over { font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-black); color: var(--ds-primary-ink); letter-spacing: .02em; }
.tf-feat__title { margin: 0; font-size: var(--ds-fs-h2); line-height: 1.45; font-weight: var(--ds-fw-black); color: var(--ds-text); text-wrap: balance; }
.tf-feat__lead { margin: 0; color: var(--ds-text-2); font-size: var(--ds-fs-body); line-height: 1.9; text-wrap: pretty; }
.tf-feat__tabs { justify-content: center; scroll-snap-type: x mandatory; }
@media (max-width: 899px) { .tf-feat__tabs { justify-content: flex-start; margin-inline: calc(var(--ds-sp-5) * -1); padding-inline: var(--ds-sp-5); } }
.tf-feat .ds-itab .icon { width: 20px; height: 20px; }
.tf-feat__body { margin-top: clamp(1rem, .5rem + 1.5vw, 2rem); }
.tf-feat__panel { display: grid; gap: 14px; justify-items: start; }
.tf-feat__panel:focus-visible { outline: none; box-shadow: var(--ds-focus); border-radius: var(--ds-r-md); }
.tf-feat__panel[hidden] { display: none; }
.tf-feat__h3 { margin: 0; font-size: var(--ds-fs-h3); line-height: 1.5; font-weight: var(--ds-fw-black); color: var(--ds-text); text-wrap: balance; }
.tf-feat__p { margin: 0; color: var(--ds-text-2); line-height: 1.95; text-wrap: pretty; }
.tf-feat .ds-check .icon { width: 16px; height: 16px; flex: none; color: var(--ds-up-ink); margin-top: 4px; }
@media (prefers-reduced-motion: no-preference) { .tf-feat__panel:not([hidden]) { animation: tf-feat-in .35s var(--ds-ease-out, ease-out) both; } }
@keyframes tf-feat-in { from { opacity: 0; transform: translateY(6px); } }
.tf-feat__shot { box-shadow: var(--ds-shadow-2); background: var(--ds-surface-1); }
@media (max-width: 899px) { .tf-feat__shot { order: -1; } }

/* illustration (token-coloured, follows the theme) */
.tf-fx { display: block; width: 100%; height: 100%; font-family: inherit; direction: ltr; } /* text-anchor is physical: keep the SVG LTR, Persian runs still shape RTL */
.tf-fx text { font-size: 11px; font-weight: 700; fill: var(--ds-text-2); }
.tf-fx .fx-bg { fill: var(--ds-surface-1); } .tf-fx .fx-bar { fill: var(--ds-surface-2); }
.tf-fx .fx-sep { stroke: var(--ds-line); } .tf-fx .fx-grid { stroke: var(--ds-line-soft); stroke-dasharray: 2 4; }
.tf-fx .fx-ax { font-size: 10px; font-weight: 500; fill: var(--ds-text-3); }
.tf-fx .fx-sym { font-size: 12px; font-weight: 900; fill: var(--ds-text); }
.tf-fx .fx-tb rect { fill: transparent; } .tf-fx .fx-tb text { text-anchor: middle; font-size: 11px; }
.tf-fx .fx-tb.is-on rect { fill: var(--ds-primary); } .tf-fx .fx-tb.is-on text { fill: var(--ds-text-on-primary); }
.tf-fx .fx-u line { stroke: var(--ds-up-fill); stroke-width: 1.3; } .tf-fx .fx-u rect { fill: var(--ds-up-fill); }
.tf-fx .fx-d line { stroke: var(--ds-down-fill); stroke-width: 1.3; } .tf-fx .fx-d rect { fill: var(--ds-down-fill); }
.tf-fx .fx-card rect { fill: var(--ds-surface-1); stroke: var(--ds-line); filter: drop-shadow(0 8px 14px hsl(222 40% 10% / .14)); }
.tf-fx .fx-ct { font-size: 12.5px; font-weight: 900; fill: var(--ds-text); } .tf-fx .fx-cs { font-size: 11px; font-weight: 500; fill: var(--ds-text-2); }
.tf-fx .fx-last { stroke: var(--ds-up-fill); stroke-dasharray: 3 3; } .tf-fx .fx-pl { fill: var(--ds-up-fill); }
.tf-fx .fx-plt { fill: #fff; font-size: 10.5px; } .tf-fx .fx-pulse { fill: var(--ds-up-fill); }
.tf-fx .fx-dd rect { fill: transparent; } .tf-fx .fx-dd text { font-size: 12px; fill: var(--ds-text); }
.tf-fx .fx-dd.is-on rect { fill: var(--ds-primary-soft); } .tf-fx .fx-dd.is-on text { fill: var(--ds-primary-ink); font-weight: 900; }
.tf-fx .fx-veil { fill: var(--ds-surface-1); opacity: .78; } .tf-fx .fx-rl { stroke: var(--ds-primary); stroke-width: 2; }
.tf-fx .fx-ctl path, .tf-fx .fx-ctl rect { fill: var(--ds-text); }
.tf-fx .fx-al { stroke: var(--ds-gold); stroke-width: 1.5; stroke-dasharray: 6 4; } .tf-fx .fx-alp { fill: var(--ds-gold); }
.tf-fx .fx-tg { fill: hsl(200 80% 50%); } .tf-fx .fx-tgp { fill: #fff; }
.tf-fx .fx-ml { stroke: var(--ds-imp-high); stroke-dasharray: 2 3; opacity: .55; }
.tf-fx .fx-mk { stroke: var(--ds-surface-1); stroke-width: 2; } .tf-fx .fx-mk--h { fill: var(--ds-imp-high); }
.tf-fx .fx-mk--m { fill: var(--ds-imp-mid); } .tf-fx .fx-mk--l { fill: var(--ds-imp-low); } .tf-fx .fx-imp { fill: var(--ds-imp-high); }
.tf-fx .fx-e1, .tf-fx .fx-e2, .tf-fx .fx-e3 { fill: none; stroke-width: 2; stroke-linejoin: round; }
.tf-fx .fx-e1 { stroke: hsl(217 91% 60%); } .tf-fx .fx-e2 { stroke: hsl(32 98% 56%); } .tf-fx .fx-e3 { stroke: hsl(262 83% 64%); stroke-width: 1.6; }
.tf-fx .fx-k1 { fill: hsl(217 91% 55%); } .tf-fx .fx-k2 { fill: hsl(32 98% 48%); }
.tf-fx .fx-dim rect { fill: var(--ds-surface-1); opacity: .55; }
.tf-fx .fx-ok { fill: var(--ds-up-soft); } .tf-fx .fx-okp { fill: none; stroke: var(--ds-up-ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.tf-fx .fx-ov { opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }
.tf-feat__shot[data-ft-shot="sec"] .fx-ov[data-ov="sec"], .tf-feat__shot[data-ft-shot="tf"] .fx-ov[data-ov="tf"],
.tf-feat__shot[data-ft-shot="replay"] .fx-ov[data-ov="replay"], .tf-feat__shot[data-ft-shot="alert"] .fx-ov[data-ov="alert"],
.tf-feat__shot[data-ft-shot="cal"] .fx-ov[data-ov="cal"], .tf-feat__shot[data-ft-shot="ind"] .fx-ov[data-ov="ind"],
.tf-feat__shot[data-ft-shot="vpn"] .fx-ov[data-ov="vpn"] { opacity: 1; visibility: visible; transition: opacity .3s; }
@media (prefers-reduced-motion: no-preference) {
  .tf-fx .fx-pulse { transform-box: fill-box; transform-origin: center; animation: tf-fx-pulse 1.4s ease-out infinite; }
}
@keyframes tf-fx-pulse { 0% { opacity: .9; transform: scale(.8); } 100% { opacity: 0; transform: scale(2.6); } }

/* ===== Premium services — bento showcase (phase 17 #8) ===================================== */
.tf-svc { --svc-a: 199 95% 55%; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; margin-top: 8px; }
.tf-svc__card { --svc-a: 199 95% 55%; position: relative; isolation: isolate; display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  grid-column: span 2; border-radius: var(--ds-r-xl); color: inherit; text-decoration: none;
  background: linear-gradient(180deg, hsl(var(--svc-a) / .07), transparent 46%), var(--ds-surface-1, hsl(var(--card)));
  border: 1px solid var(--ds-line-soft, hsl(var(--border)));
  box-shadow: 0 1px 2px rgb(2 6 23 / .05), 0 18px 40px -30px rgb(2 6 23 / .35);
  transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s, border-color .3s; }
.tf-svc__card::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(70% 55% at 50% 0%, hsl(var(--svc-a) / .22), transparent 70%); transition: opacity .45s; }
.tf-svc__card:hover, .tf-svc__card:focus-visible { transform: translateY(-4px); border-color: hsl(var(--svc-a) / .45);
  box-shadow: 0 2px 4px rgb(2 6 23 / .06), 0 26px 50px -28px hsl(var(--svc-a) / .55); }
.tf-svc__card:hover::before, .tf-svc__card:focus-visible::before { opacity: 1; }
.tf-svc__card:focus-visible { outline: 2px solid hsl(var(--svc-a)); outline-offset: 3px; }
.tf-svc--strat, .tf-svc--ind { grid-column: span 3; }
.tf-svc--vip { grid-column: span 6; flex-direction: row; align-items: stretch; }
.tf-svc--vip .tf-svc__vis { flex: 0 0 46%; height: auto; min-height: 190px; padding-bottom: 6px; -webkit-mask: none; mask: none; }
.tf-svc--vip .tf-svc__body { align-content: center; padding: 26px 30px; }
.tf-svc--vip .tf-svc__ic { margin-top: 0; }
.tf-svc--vip .tf-svc__chat { padding: 4px 0 10px; }
.tf-svc--strat { --svc-a: 152 70% 45%; } .tf-svc--ind { --svc-a: 221 83% 58%; } .tf-svc--acc { --svc-a: 38 95% 52%; }
.tf-svc--rep { --svc-a: 268 75% 62%; } .tf-svc--bot { --svc-a: 190 90% 45%; } .tf-svc--vip { --svc-a: 340 80% 58%; }

.tf-svc__vis { position: relative; height: 190px; padding: 20px 20px 0; display: grid; align-items: end; overflow: hidden;
  -webkit-mask: linear-gradient(#000 90%, transparent); mask: linear-gradient(#000 90%, transparent); }
.tf-svc--strat .tf-svc__vis, .tf-svc--ind .tf-svc__vis { height: 220px; }
.tf-svc__win { position: relative; direction: ltr; text-align: left; border-radius: var(--ds-r-lg) var(--ds-r-lg) 0 0; overflow: hidden; height: 100%;
  background: hsl(225 35% 9%); border: 1px solid hsl(215 40% 70% / .14); border-bottom: 0; color: #e6edf7;
  box-shadow: 0 -12px 30px -18px hsl(var(--svc-a) / .6); transform: translateY(10px); transition: transform .5s cubic-bezier(.22,1,.36,1); }
.tf-svc__card:hover .tf-svc__win { transform: translateY(0); }
.tf-svc__bar { display: flex; align-items: center; gap: 10px; height: 32px; padding-inline: 12px; border-bottom: 1px solid hsl(215 40% 70% / .1);
  font: 600 11px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: hsl(215 25% 75%); font-feature-settings: "ss02" 0; }
.tf-svc__bar b { font-weight: 700; color: #e6edf7; }
.tf-svc__bar em { margin-left: auto; font-style: normal; padding: 3px 7px; border-radius: var(--ds-r-xs); background: hsl(var(--svc-a) / .16); color: hsl(var(--svc-a)); }
.tf-svc__bar em.is-up { background: hsl(152 70% 45% / .16); color: hsl(152 70% 60%); font-family: inherit; }
.tf-svc__dots { display: inline-flex; gap: 5px; } .tf-svc__dots i { width: 8px; height: 8px; border-radius: 50%; background: hsl(215 20% 30%); }
.tf-svc__dots i:nth-child(1) { background: hsl(0 75% 60%); } .tf-svc__dots i:nth-child(2) { background: hsl(42 95% 58%); } .tf-svc__dots i:nth-child(3) { background: hsl(140 60% 50%); }
.tf-svc__grid path { stroke: hsl(215 40% 70% / .09); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }

/* strategy: equity curve draws in */
.tf-svc__eq { display: block; width: 100%; height: calc(100% - 32px - 46px); }
.tf-svc__line { fill: none; stroke: hsl(152 70% 55%); stroke-width: 2.4; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.tf-svc__stats { display: flex; gap: 0; border-top: 1px solid hsl(215 40% 70% / .1); font-feature-settings: "ss02" 1; }
.tf-svc__stats span { flex: 1; padding: 7px 12px; display: grid; gap: 2px; }
.tf-svc__stats span + span { border-left: 1px solid hsl(215 40% 70% / .1); }
.tf-svc__stats small { font: 600 10px/1 ui-monospace, Menlo, monospace; color: hsl(215 20% 62%); }
.tf-svc__stats b { font-size: 14px; font-weight: 900; color: #fff; } .tf-svc__stats b.is-dn { color: hsl(350 80% 66%); }

/* indicator: candles + MA + signals */
.tf-svc__cdl { display: block; width: 100%; height: calc(100% - 32px); padding: 6px 10px 0; overflow: visible; }
.tf-svc__cdl .c path, .tf-svc__ma { vector-effect: non-scaling-stroke; } .tf-svc__cdl .c path { stroke-width: 1.4; } .tf-svc__cdl .c rect { rx: 1.5; }
.tf-svc__cdl .up path { stroke: hsl(152 65% 50%); } .tf-svc__cdl .up rect { fill: hsl(152 65% 48%); }
.tf-svc__cdl .dn path { stroke: hsl(350 75% 60%); } .tf-svc__cdl .dn rect { fill: hsl(350 75% 58%); }
.tf-svc__ma { fill: none; stroke: hsl(45 100% 62%); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 0; }
.tf-svc__sig path { fill: hsl(152 70% 50%); } .tf-svc__sig.sell path { fill: hsl(350 80% 60%); }
.tf-svc__sig text { font: 800 8px/1 ui-monospace, Menlo, monospace; fill: hsl(152 70% 60%); }
.tf-svc__sig { transform-box: fill-box; transform-origin: 50% 50%; }

/* accounts: stacked cards fan out */
.tf-svc__stack { position: relative; height: 100%; display: grid; place-items: end center; padding-bottom: 6px; }
.tf-svc__acct { position: absolute; bottom: 14px; width: min(60%, 230px); aspect-ratio: 1.7; border-radius: var(--ds-r-lg); padding: 14px 16px; display: grid; align-content: space-between;
  justify-items: start; color: #fff; box-shadow: 0 16px 30px -16px rgb(2 6 23 / .6); transition: transform .55s cubic-bezier(.34,1.3,.64,1); }
.tf-svc__acct b { font-size: 15px; font-weight: 900; } .tf-svc__acct small { font-size: 11px; font-weight: 700; opacity: .85; }
.tf-svc__acct.a1 { z-index: 3; background: linear-gradient(135deg, hsl(45 100% 60%), hsl(30 95% 50%) 60%, hsl(18 90% 46%)); color: hsl(28 60% 12%); }
.tf-svc__acct.a2 { z-index: 2; background: linear-gradient(135deg, hsl(221 83% 55%), hsl(255 70% 52%)); transform: translate(-22px, -16px) rotate(-6deg); }
.tf-svc__acct.a3 { z-index: 1; background: linear-gradient(135deg, hsl(215 30% 22%), hsl(225 35% 12%)); transform: translate(22px, -30px) rotate(6deg); }
.tf-svc__card:hover .tf-svc__acct.a2 { transform: translate(-58px, -24px) rotate(-10deg); }
.tf-svc__card:hover .tf-svc__acct.a3 { transform: translate(58px, -40px) rotate(10deg); }
.tf-svc__card:hover .tf-svc__acct.a1 { transform: translateY(-6px); }
.tf-svc__chip { width: 30px; height: 22px; border-radius: 5px; background: linear-gradient(135deg, hsl(48 60% 85%), hsl(40 40% 62%)); box-shadow: inset 0 0 0 1px hsl(40 40% 40% / .4); }
.tf-svc__ok { position: absolute; top: 12px; left: 14px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 900; font-size: 13px;
  background: hsl(152 70% 40%); color: #fff; box-shadow: 0 0 0 3px hsl(0 0% 100% / .35); }

/* replay: candles revealed by a sweeping cursor */
.tf-svc__rp { position: relative; height: calc(100% - 32px - 40px); margin: 0 12px; overflow: hidden;
  background: repeating-linear-gradient(90deg, transparent 0 13px, hsl(215 40% 70% / .05) 13px 14px); }
.tf-svc__rpc { position: absolute; inset: 10px 0 8px; clip-path: inset(0 38% 0 0); transition: clip-path 1.6s cubic-bezier(.4,0,.2,1);
  background:
   linear-gradient(hsl(152 65% 48%) 0 0) 6% 62% / 7px 26% no-repeat, linear-gradient(hsl(350 75% 58%) 0 0) 14% 52% / 7px 22% no-repeat,
   linear-gradient(hsl(152 65% 48%) 0 0) 22% 46% / 7px 30% no-repeat, linear-gradient(hsl(152 65% 48%) 0 0) 30% 38% / 7px 26% no-repeat,
   linear-gradient(hsl(350 75% 58%) 0 0) 38% 44% / 7px 18% no-repeat, linear-gradient(hsl(152 65% 48%) 0 0) 46% 30% / 7px 30% no-repeat,
   linear-gradient(hsl(152 65% 48%) 0 0) 54% 22% / 7px 26% no-repeat, linear-gradient(hsl(350 75% 58%) 0 0) 62% 30% / 7px 20% no-repeat,
   linear-gradient(hsl(152 65% 48%) 0 0) 70% 16% / 7px 30% no-repeat, linear-gradient(hsl(152 65% 48%) 0 0) 78% 10% / 7px 24% no-repeat,
   linear-gradient(hsl(350 75% 58%) 0 0) 86% 18% / 7px 20% no-repeat, linear-gradient(hsl(152 65% 48%) 0 0) 94% 8% / 7px 26% no-repeat; }
.tf-svc__rpcur { position: absolute; top: 0; bottom: 0; left: 62%; width: 2px; background: hsl(268 85% 70%); box-shadow: 0 0 12px hsl(268 85% 65%);
  transition: left 1.6s cubic-bezier(.4,0,.2,1); }
.tf-svc__card:hover .tf-svc__rpc { clip-path: inset(0 0 0 0); } .tf-svc__card:hover .tf-svc__rpcur { left: 99%; }
.tf-svc__ctrl { height: 40px; display: flex; align-items: center; gap: 8px; padding-inline: 12px; border-top: 1px solid hsl(215 40% 70% / .1); }
.tf-svc__ctrl svg.p { width: 14px; height: 14px; fill: hsl(215 25% 75%); stroke: hsl(215 25% 75%); stroke-width: 2; stroke-linejoin: round; }
.tf-svc__ctrl i { font-style: normal; } .tf-svc__ctrl i svg { width: 11px; height: 11px; fill: #fff; margin-left: 1px; }
.tf-svc__ctrl i.pl { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: hsl(268 75% 60%); color: #fff; font-size: 10px; }
.tf-svc__prog { flex: 1; height: 4px; border-radius: 4px; background: hsl(215 40% 70% / .14); overflow: hidden; }
.tf-svc__prog span { display: block; height: 100%; width: 62%; background: linear-gradient(90deg, hsl(268 75% 62%), hsl(199 95% 60%)); transition: width 1.6s cubic-bezier(.4,0,.2,1); }
.tf-svc__card:hover .tf-svc__prog span { width: 99%; }

/* bot: code window */
.tf-svc__code pre { margin: 0; padding: 12px 14px; font: 500 11.5px/1.75 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: hsl(215 25% 82%);
  white-space: pre; overflow: hidden; font-feature-settings: "ss02" 0; }
.tf-svc__code code { font: inherit; }
.tf-svc__code .k { color: hsl(199 95% 70%); } .tf-svc__code .s { color: hsl(95 60% 65%); } .tf-svc__code .n { color: hsl(30 95% 66%); }
.tf-svc__caret { display: inline-block; width: 7px; height: 1.1em; margin-left: 2px; vertical-align: -2px; background: hsl(190 90% 60%); }

/* VIP: chat bubbles */
.tf-svc__chat { display: grid; gap: 8px; align-content: end; height: 100%; padding-bottom: 14px; }
.tf-svc__chat p { margin: 0; max-width: 86%; padding: 9px 13px; border-radius: var(--ds-r-lg); font-size: 12.5px; line-height: 1.75; font-weight: 600;
  transition: transform .5s cubic-bezier(.34,1.4,.64,1), opacity .4s; }
.tf-svc__chat .me { justify-self: start; background: var(--ds-surface-2, hsl(var(--muted))); color: var(--ds-text, hsl(var(--foreground))); border-end-start-radius: 4px; }
.tf-svc__chat .them { justify-self: end; color: #fff; background: linear-gradient(135deg, hsl(340 80% 58%), hsl(285 70% 56%)); border-end-end-radius: 4px; }
.tf-svc__chat .them b { display: block; font-size: 10.5px; opacity: .85; font-weight: 800; }
.tf-svc__chat .typing { justify-self: end; display: inline-flex; gap: 4px; padding: 10px 12px; background: var(--ds-surface-2, hsl(var(--muted))); }
.tf-svc__chat .typing i { width: 6px; height: 6px; border-radius: 50%; background: hsl(var(--muted-foreground)); }

/* copy */
.tf-svc__body { position: relative; display: grid; justify-items: start; gap: 8px; padding: 6px 22px 22px; flex: 1; align-content: start; }
.tf-svc__ic { width: 42px; height: 42px; margin-top: -26px; border-radius: var(--ds-r-md); display: grid; place-items: center; font-size: 1.1rem; color: #fff;
  background: linear-gradient(140deg, hsl(var(--svc-a)), hsl(var(--svc-a) / .7)); box-shadow: 0 8px 20px -8px hsl(var(--svc-a) / .8), 0 0 0 4px var(--ds-surface-1, hsl(var(--card))); }
.tf-svc__t { margin: 6px 0 0; font-size: 1.12rem; font-weight: 900; line-height: 1.5; color: var(--ds-text, hsl(var(--foreground))); letter-spacing: 0; }
.tf-svc__d { margin: 0; font-size: .875rem; line-height: 1.9; color: var(--ds-text-2, hsl(var(--muted-foreground))); text-wrap: pretty; }
.tf-svc__cta { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 6px; font-size: .86rem; font-weight: 900; color: hsl(var(--svc-a)); }
html:not(.dark-theme) .tf-svc__cta { filter: brightness(.82) saturate(1.2); }
.tf-svc__cta svg { transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.tf-svc__card:hover .tf-svc__cta svg { transform: translateX(-5px); }

/* motion (only when the card is hovered / in view and the device can afford it) */
@media (prefers-reduced-motion: no-preference) {
  html:not(.tf-low) .tf-svc__card:hover .tf-svc__line, html:not(.tf-low) .tf-svc__card:hover .tf-svc__ma { animation: tf-svc-draw 1.4s cubic-bezier(.4,0,.2,1) both; }
  html:not(.tf-low) .tf-svc__card:hover .tf-svc__sig { animation: tf-svc-pop .6s .9s cubic-bezier(.34,1.56,.64,1) both; }
  html:not(.tf-low) .tf-svc__caret { animation: tf-svc-blink 1s steps(2) infinite; }
  html:not(.tf-low) .tf-svc__card:not(:hover) .tf-svc__caret, .is-offscreen .tf-svc__caret { animation-play-state: paused; }
  html:not(.tf-low) .tf-svc__card:hover .tf-svc__chat .typing i { animation: tf-svc-dot 1s ease-in-out infinite; }
  html:not(.tf-low) .tf-svc__card:hover .tf-svc__chat .typing i:nth-child(2) { animation-delay: .15s; }
  html:not(.tf-low) .tf-svc__card:hover .tf-svc__chat .typing i:nth-child(3) { animation-delay: .3s; }
  .tf-svc__card:hover .tf-svc__chat .me { transform: translateY(-4px); }
}
@keyframes tf-svc-draw { from { stroke-dashoffset: 1; } }
@keyframes tf-svc-pop { from { opacity: 0; transform: scale(.3); } }
@keyframes tf-svc-blink { 50% { opacity: 0; } }
@keyframes tf-svc-dot { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-4px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tf-svc * { transition: none !important; } }

@media (max-width: 1023.98px) {
  .tf-svc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tf-svc__card, .tf-svc--strat, .tf-svc--ind { grid-column: span 1; }
  .tf-svc--vip { grid-column: span 2; }
}
@media (max-width: 639.98px) {
  .tf-svc { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -1rem; padding: 4px 1rem 14px; scrollbar-width: none; overscroll-behavior-x: contain; }
  .tf-svc::-webkit-scrollbar { display: none; }
  .tf-svc__card { flex: 0 0 84%; scroll-snap-align: center; }
  .tf-svc--vip { flex-direction: column; } .tf-svc--vip .tf-svc__vis { flex: none; height: 176px; min-height: 0; }
  .tf-svc--vip .tf-svc__body { padding: 6px 22px 22px; } .tf-svc--vip .tf-svc__ic { margin-top: -26px; }
  .tf-svc__vis, .tf-svc--strat .tf-svc__vis, .tf-svc--ind .tf-svc__vis { height: 176px; }
  .tf-svc__card:hover { transform: none; }
}
html.dark-theme .tf-svc__card { background: linear-gradient(180deg, hsl(var(--svc-a) / .09), transparent 46%), hsl(225 30% 8%); border-color: hsl(0 0% 100% / .07); }
html.dark-theme .tf-svc__chat .me, html.dark-theme .tf-svc__chat .typing { background: hsl(225 25% 15%); }
.tf-svc--strat .tf-svc__win { transform: none; }
.tf-svc--strat .tf-svc__vis { -webkit-mask: linear-gradient(#000 96%, transparent); mask: linear-gradient(#000 96%, transparent); }
.tf-svc--strat .tf-svc__stats { padding-bottom: 14px; }
/* phase 22: the Pine card hosts the «بوم بازار» band art — keep it low and quiet so it never runs
   through the feature list (the editor demo is the hero of this card) */
.tf-pine__card .mc { --mc-h: 30%; }
.tf-pine__card .mc__chart { opacity: .55; }