<?php
/**
 * STB Copy Trading — full division page (EN/FA, RTL-aware)
 * Mirrors pamm.php conventions: shared ip- scaffolding + scoped ct- styles.
 */
$lang = stb_lang(); $B = '/NewSite'; $fa = $lang === 'fa';
$register_url = $fa ? 'https://crm.stbbrokers.com/fa/register' : 'https://crm.stbbrokers.com/register/';
$login_url    = $fa ? 'https://crm.stbbrokers.com/fa'          : 'https://crm.stbbrokers.com/';

// ── Verified strategy providers (illustrative live-style data) ──
$providers = $fa ? [
  ['name'=>'Helios FX',      'style'=>'روند بلندمدت · فارکس', 'ret'=>'+142%', 'dd'=>'8.4%',  'win'=>'71%', 'cop'=>'1,284', 'risk'=>'متوسط',  'curve'=>'18,32,28,46,40,62,58,80'],
  ['name'=>'Northwind',      'style'=>'بازگشت به میانگین · طلا','ret'=>'+96%','dd'=>'5.1%',  'win'=>'68%', 'cop'=>'942',   'risk'=>'پایین',  'curve'=>'20,28,24,38,44,52,60,72'],
  ['name'=>'Atlas Macro',    'style'=>'کلان · شاخص‌ها',      'ret'=>'+118%','dd'=>'11.2%', 'win'=>'63%', 'cop'=>'670',   'risk'=>'بالا',   'curve'=>'16,30,22,44,36,58,70,68'],
  ['name'=>'Meridian',       'style'=>'اسکالپ · فارکس',      'ret'=>'+74%', 'dd'=>'4.3%',  'win'=>'74%', 'cop'=>'1,510', 'risk'=>'پایین',  'curve'=>'22,30,34,42,48,55,63,70'],
] : [
  ['name'=>'Helios FX',      'style'=>'Trend · Forex',          'ret'=>'+142%', 'dd'=>'8.4%',  'win'=>'71%', 'cop'=>'1,284', 'risk'=>'Medium', 'curve'=>'18,32,28,46,40,62,58,80'],
  ['name'=>'Northwind',      'style'=>'Mean Reversion · Gold',   'ret'=>'+96%',  'dd'=>'5.1%',  'win'=>'68%', 'cop'=>'942',   'risk'=>'Low',    'curve'=>'20,28,24,38,44,52,60,72'],
  ['name'=>'Atlas Macro',    'style'=>'Macro · Indices',        'ret'=>'+118%', 'dd'=>'11.2%', 'win'=>'63%', 'cop'=>'670',   'risk'=>'High',   'curve'=>'16,30,22,44,36,58,70,68'],
  ['name'=>'Meridian',       'style'=>'Scalp · Forex',          'ret'=>'+74%',  'dd'=>'4.3%',  'win'=>'74%', 'cop'=>'1,510', 'risk'=>'Low',    'curve'=>'22,30,34,42,48,55,63,70'],
];

// ── How it works steps ──
$steps = $fa ? [
  ['n'=>'۰۱','t'=>'مرور ارائه‌دهندگان تأیید شده','d'=>'سابقه عملکرد، تاریخچه افت سرمایه، ابزارهای معاملاتی و سبک هر ارائه‌دهنده استراتژی پیش از تخصیص سرمایه شفاف است.'],
  ['n'=>'۰۲','t'=>'انتخاب و تخصیص','d'=>'یک یا چند ارائه‌دهنده را انتخاب کنید و مبلغ تخصیص را تعیین کنید. حد ریسک خود را مشخص کنید — کنترل با شماست.'],
  ['n'=>'۰۳','t'=>'کپی خودکار معاملات','d'=>'تمام معاملات ارائه‌دهنده به‌صورت متناسب روی حساب شما اجرا می‌شود. هر معامله در لحظه قابل مشاهده است.'],
  ['n'=>'۰۴','t'=>'پایش، توقف، خروج','d'=>'هر زمان که بخواهید تخصیص را تنظیم، کپی را متوقف یا کاملاً خارج شوید. بدون دوره حداقلی. سرمایه شما، تصمیم شما.'],
] : [
  ['n'=>'01','t'=>'Browse verified providers','d'=>'Track record, drawdown history, instruments and trading style are transparent for every strategy provider before you allocate.'],
  ['n'=>'02','t'=>'Select & allocate','d'=>'Choose one or more providers and set your allocation amount. Define your own risk limit — control stays with you.'],
  ['n'=>'03','t'=>'Trades copy automatically','d'=>'Every trade the provider makes is mirrored proportionally on your account. Each position is visible in real time.'],
  ['n'=>'04','t'=>'Monitor, pause, exit','d'=>'Adjust allocation, pause copying, or exit completely whenever you choose. No minimum period. Your capital, your decision.'],
];

// ── Investor protections ──
$prots = $fa ? [
  ['t'=>'ارائه‌دهندگان تأیید شده','d'=>'هر ارائه‌دهنده استراتژی تأیید می‌شود — سابقه واقعی، نه وعده.'],
  ['t'=>'شفافیت کامل','d'=>'هر معامله کپی‌شده در لحظه روی حساب شما قابل مشاهده است.'],
  ['t'=>'کنترل ریسک','d'=>'حداکثر تخصیص و حد ضرر را در سطح استراتژی تعیین کنید.'],
  ['t'=>'بدون قفل سرمایه','d'=>'در هر لحظه کپی را متوقف کنید — بدون دوره حداقلی.'],
  ['t'=>'کارمزد فقط بر سود','d'=>'کارمزد عملکرد فقط در دوره‌های سودده، بر مبنای high-watermark.'],
  ['t'=>'تنوع‌بخشی','d'=>'هم‌زمان از چند ارائه‌دهنده کپی کنید و ریسک را توزیع کنید.'],
] : [
  ['t'=>'Verified providers','d'=>'Every strategy provider is verified — a real track record, not a promise.'],
  ['t'=>'Full transparency','d'=>'Every copied trade is visible in real time on your account.'],
  ['t'=>'Risk controls','d'=>'Set maximum allocation and a stop-loss at the strategy level.'],
  ['t'=>'No lock-in','d'=>'Stop copying at any moment — no minimum period.'],
  ['t'=>'Fees on profit only','d'=>'Performance fee on profitable periods only, high-watermark basis.'],
  ['t'=>'Diversification','d'=>'Copy multiple providers at once and spread your risk.'],
];
?>
<style>
/* ════════════════════════ COPY TRADING — full page ════════════════════════ */
.ct-wrap{background:#04060a;color:#fff;overflow:hidden}

/* ── HERO ── */
.ct-hero{position:relative;padding:130px 0 90px;background:#04060a;overflow:hidden}
.ct-hero-inner{max-width:1200px;margin:0 auto;padding:0 24px;position:relative;z-index:5}
.ct-hero-grid{position:absolute;inset:0;background-image:
  linear-gradient(rgba(20,224,163,.04) 1px,transparent 1px),
  linear-gradient(90deg,rgba(20,224,163,.04) 1px,transparent 1px);
  background-size:54px 54px;
  mask-image:radial-gradient(ellipse 60% 60% at 70% 30%,#000 20%,transparent 75%);
  animation:ctgrid 24s linear infinite;pointer-events:none}
@keyframes ctgrid{to{transform:translate(54px,54px)}}
.ct-hero-glow{position:absolute;top:-10%;right:-5%;width:560px;height:560px;border-radius:50%;
  background:radial-gradient(circle,rgba(20,224,163,.10),transparent 65%);filter:blur(20px);pointer-events:none;
  animation:ctglow 9s ease-in-out infinite}
.ct-hero-glow.b{top:auto;bottom:-15%;right:auto;left:-8%;width:480px;height:480px;
  background:radial-gradient(circle,rgba(200,16,46,.08),transparent 65%);animation-delay:3s}
@keyframes ctglow{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.15);opacity:1}}

.ct-grid2{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
@media(max-width:900px){.ct-grid2{grid-template-columns:1fr;gap:40px}}
.ct-kicker{display:inline-flex;align-items:center;gap:9px;font-size:11px;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(20,224,163,.9);margin-bottom:22px}
.ct-kicker-dot{width:7px;height:7px;border-radius:50%;background:#14e0a3;
  box-shadow:0 0 10px rgba(20,224,163,.8);animation:ctdot 2s infinite}
@keyframes ctdot{0%,100%{opacity:1}50%{opacity:.35}}
.ct-h1{font-size:clamp(38px,5.4vw,64px);font-weight:900;line-height:1.04;letter-spacing:-.03em;margin-bottom:20px}
.ct-h1 em{font-style:normal;background:linear-gradient(120deg,#14e0a3,#9affd9);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.ct-lead{font-size:clamp(15px,1.7vw,18px);color:rgba(255,255,255,.5);line-height:1.7;margin-bottom:32px;max-width:520px}
body.rtl .ct-lead{margin-left:auto}
.ct-stats{display:flex;gap:34px;flex-wrap:wrap;margin-bottom:34px}
.ct-stat-v{font-size:30px;font-weight:800;color:#fff;line-height:1;font-variant-numeric:tabular-nums}
.ct-stat-v em{font-style:normal;color:#14e0a3}
.ct-stat-l{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.32);margin-top:7px}
.ct-cta{display:flex;gap:13px;flex-wrap:wrap}
.ct-btn{display:inline-flex;align-items:center;gap:9px;padding:14px 26px;border-radius:11px;
  font-size:14px;font-weight:700;text-decoration:none;transition:transform .18s,box-shadow .18s}
.ct-btn svg{width:17px;height:17px;fill:none;stroke:currentColor}
body.rtl .ct-btn svg{transform:scaleX(-1)}
.ct-btn-teal{background:#14e0a3;color:#04120e;box-shadow:0 6px 26px rgba(20,224,163,.3)}
.ct-btn-teal:hover{transform:translateY(-2px);box-shadow:0 10px 34px rgba(20,224,163,.42)}
.ct-btn-ghost{background:rgba(255,255,255,.04);color:#fff;border:1px solid rgba(255,255,255,.12)}
.ct-btn-ghost:hover{border-color:rgba(20,224,163,.4);transform:translateY(-2px)}

/* Hero visual — live mirror panel */
.ct-mirror{position:relative;background:linear-gradient(160deg,rgba(20,224,163,.06),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:22px;backdrop-filter:blur(8px);
  box-shadow:0 30px 80px rgba(0,0,0,.5)}
.ct-mirror-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.ct-mirror-tag{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.4)}
.ct-live{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:700;color:#14e0a3}
.ct-live::before{content:'';width:6px;height:6px;border-radius:50%;background:#14e0a3;animation:ctdot 1.4s infinite}
.ct-mrow{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.ct-mrow:last-child{border-bottom:0}
.ct-mav{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:13px;color:#04120e;background:linear-gradient(135deg,#14e0a3,#0fa97a);flex:0 0 auto}
.ct-mname{font-size:13px;font-weight:600;color:#fff}
.ct-mstyle{font-size:10px;color:rgba(255,255,255,.4);margin-top:2px}
.ct-mret{font-size:14px;font-weight:800;color:#14e0a3;font-variant-numeric:tabular-nums;margin-inline-start:auto}
.ct-mspark{display:flex;align-items:flex-end;gap:2px;height:26px}
.ct-mspark span{width:3px;border-radius:2px;background:linear-gradient(180deg,#14e0a3,rgba(20,224,163,.2))}

/* ── SECTION base ── */
.ct-sec{padding:84px 0;position:relative}
.ct-sec.alt{background:#06080c}
.ct-c{max-width:1200px;margin:0 auto;padding:0 24px}
.ct-eyebrow{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:rgba(20,224,163,.85);margin-bottom:14px}
.ct-h2{font-size:clamp(26px,3.4vw,40px);font-weight:800;line-height:1.12;letter-spacing:-.02em;margin-bottom:14px}
.ct-h2 em{font-style:normal;color:#C8102E}
.ct-desc{font-size:15px;color:rgba(255,255,255,.46);line-height:1.75;max-width:580px;margin-bottom:46px}
body.rtl .ct-desc{margin-left:auto}

/* reveal on scroll */
.js-anim .ct-rev{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.ct-rev.in{opacity:1;transform:none}
.ct-rev.d1{transition-delay:.08s}.ct-rev.d2{transition-delay:.16s}.ct-rev.d3{transition-delay:.24s}.ct-rev.d4{transition-delay:.32s}

/* HOW IT WORKS — connected steps */
.ct-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;position:relative}
@media(max-width:860px){.ct-steps{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.ct-steps{grid-template-columns:1fr}}
.ct-step{position:relative;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.07);
  border-radius:16px;padding:26px 22px;transition:border-color .25s,transform .25s,background .25s}
.ct-step:hover{border-color:rgba(20,224,163,.35);transform:translateY(-4px);background:rgba(20,224,163,.04)}
.ct-step-n{font-size:13px;font-weight:800;color:#14e0a3;letter-spacing:.1em;margin-bottom:14px;
  font-variant-numeric:tabular-nums}
.ct-step-t{font-size:16px;font-weight:700;color:#fff;margin-bottom:9px;line-height:1.3}
.ct-step-d{font-size:13px;color:rgba(255,255,255,.46);line-height:1.65}

/* PROVIDERS TABLE / CARDS */
.ct-tbl-wrap{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.08);border-radius:18px;overflow:hidden}
.ct-tbl-head{padding:16px 22px;background:rgba(20,224,163,.05);border-bottom:1px solid rgba(255,255,255,.07);
  font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.ct-tbl{width:100%;border-collapse:collapse}
.ct-tbl th{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.35);
  padding:14px 18px;text-align:start;border-bottom:1px solid rgba(255,255,255,.06)}
.ct-tbl td{padding:16px 18px;border-bottom:1px solid rgba(255,255,255,.04);font-size:14px;vertical-align:middle}
.ct-tbl tr:last-child td{border-bottom:0}
.ct-tbl tr:hover td{background:rgba(20,224,163,.03)}
.ct-pname{display:flex;align-items:center;gap:11px}
.ct-pav{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:12px;color:#04120e;background:linear-gradient(135deg,#14e0a3,#0fa97a);flex:0 0 auto}
.ct-pn{font-weight:600;color:#fff}.ct-ps{font-size:11px;color:rgba(255,255,255,.4);margin-top:2px}
.ct-ret{font-weight:800;color:#14e0a3;font-variant-numeric:tabular-nums}
.ct-dd{font-variant-numeric:tabular-nums;color:rgba(255,255,255,.7)}
.ct-pill{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700}
.ct-pill.low{background:rgba(20,224,163,.12);color:#14e0a3}
.ct-pill.med{background:rgba(255,191,73,.12);color:#ffbf49}
.ct-pill.high{background:rgba(200,16,46,.14);color:#ff5a73}
.ct-spark{display:flex;align-items:flex-end;gap:3px;height:30px}
.ct-spark span{width:4px;border-radius:2px;background:linear-gradient(180deg,#14e0a3,rgba(20,224,163,.15))}
.ct-copy-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:9px;
  background:#14e0a3;color:#04120e;font-size:12px;font-weight:700;text-decoration:none;white-space:nowrap;transition:transform .15s}
.ct-copy-btn:hover{transform:scale(1.05)}
.ct-tbl-hide{}@media(max-width:760px){.ct-tbl-hide{display:none}}
.ct-disclaimer{font-size:12px;color:rgba(255,255,255,.34);margin-top:16px;line-height:1.6}

/* PROTECTIONS grid */
.ct-prots{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:780px){.ct-prots{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.ct-prots{grid-template-columns:1fr}}
.ct-prot{background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.07);border-radius:14px;
  padding:24px 22px;transition:border-color .25s,transform .25s}
.ct-prot:hover{border-color:rgba(20,224,163,.3);transform:translateY(-3px)}
.ct-prot-ico{width:40px;height:40px;border-radius:11px;background:rgba(20,224,163,.1);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.ct-prot-ico svg{width:20px;height:20px;stroke:#14e0a3;fill:none;stroke-width:1.8}
.ct-prot-t{font-size:15px;font-weight:700;color:#fff;margin-bottom:8px}
.ct-prot-d{font-size:13px;color:rgba(255,255,255,.46);line-height:1.6}

/* INTERACTIVE SIMULATOR */
.ct-sim{background:linear-gradient(160deg,rgba(20,224,163,.06),rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.09);border-radius:22px;padding:clamp(24px,4vw,44px);
  display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
@media(max-width:840px){.ct-sim{grid-template-columns:1fr;gap:30px}}
.ct-sim-kick{font-size:11px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:#14e0a3;margin-bottom:12px}
.ct-sim-t{font-size:clamp(22px,3vw,32px);font-weight:800;line-height:1.15;margin-bottom:10px}
.ct-sim-t em{font-style:normal;color:#14e0a3}
.ct-sim-sub{font-size:14px;color:rgba(255,255,255,.46);line-height:1.6;margin-bottom:26px}
.ct-sim-field{margin-bottom:22px}
.ct-sim-lbl{display:flex;justify-content:space-between;font-size:12px;font-weight:600;color:rgba(255,255,255,.6);margin-bottom:10px}
.ct-sim-lbl b{color:#14e0a3;font-weight:800;font-variant-numeric:tabular-nums}
.ct-range{-webkit-appearance:none;appearance:none;width:100%;height:5px;border-radius:5px;
  background:rgba(255,255,255,.1);outline:none}
.ct-range::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;
  background:#14e0a3;cursor:pointer;box-shadow:0 0 0 4px rgba(20,224,163,.18),0 2px 8px rgba(0,0,0,.4)}
.ct-range::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#14e0a3;cursor:pointer;border:0;
  box-shadow:0 0 0 4px rgba(20,224,163,.18)}
.ct-sim-out{background:#04060a;border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:30px 28px;text-align:center}
.ct-sim-out-lbl{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:10px}
.ct-sim-out-val{font-size:clamp(34px,5vw,50px);font-weight:900;color:#14e0a3;line-height:1;
  font-variant-numeric:tabular-nums;margin-bottom:8px}
.ct-sim-out-sub{font-size:12px;color:rgba(255,255,255,.4)}
.ct-sim-bars{display:flex;align-items:flex-end;justify-content:center;gap:5px;height:64px;margin-top:24px}
.ct-sim-bars span{flex:1;max-width:18px;border-radius:3px 3px 0 0;background:linear-gradient(180deg,#14e0a3,rgba(20,224,163,.2));
  transition:height .5s cubic-bezier(.2,.7,.2,1)}
.ct-sim-note{font-size:11px;color:rgba(255,255,255,.3);margin-top:18px;line-height:1.5}

/* PROVIDER CTA split */
.ct-split{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:780px){.ct-split{grid-template-columns:1fr}}
.ct-side{background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:34px 30px}
.ct-side.prov{background:linear-gradient(160deg,rgba(200,16,46,.07),rgba(255,255,255,.015));border-color:rgba(200,16,46,.18)}
.ct-side-tag{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px}
.ct-side.inv .ct-side-tag{color:#14e0a3}.ct-side.prov .ct-side-tag{color:#ff5a73}
.ct-side-t{font-size:22px;font-weight:800;color:#fff;margin-bottom:12px;line-height:1.2}
.ct-side-d{font-size:14px;color:rgba(255,255,255,.5);line-height:1.65;margin-bottom:22px}
.ct-side-list{list-style:none;padding:0;margin:0 0 26px}
.ct-side-list li{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:rgba(255,255,255,.66);
  padding:7px 0;line-height:1.5}
.ct-side-list li::before{content:'';width:16px;height:16px;flex:0 0 auto;margin-top:1px;border-radius:50%;
  background:rgba(20,224,163,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314e0a3' stroke-width='3'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat}
.ct-side.prov .ct-side-list li::before{background:rgba(200,16,46,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff5a73' stroke-width='3'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat}
.ct-side .ct-btn{width:100%;justify-content:center}
.ct-side.prov .ct-btn-teal{background:#C8102E;color:#fff;box-shadow:0 6px 26px rgba(200,16,46,.3)}

/* FAQ */
.ct-faq{max-width:780px;margin:0 auto}
.ct-q{background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.07);border-radius:13px;
  margin-bottom:12px;overflow:hidden;transition:border-color .2s}
.ct-q.open{border-color:rgba(20,224,163,.3)}
.ct-q-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;cursor:pointer}
.ct-q-q{font-size:15px;font-weight:600;color:#fff}
.ct-q-ico{width:22px;height:22px;flex:0 0 auto;position:relative;transition:transform .25s}
.ct-q.open .ct-q-ico{transform:rotate(45deg)}
.ct-q-ico::before,.ct-q-ico::after{content:'';position:absolute;background:#14e0a3;border-radius:2px}
.ct-q-ico::before{top:50%;left:3px;right:3px;height:2px;transform:translateY(-50%)}
.ct-q-ico::after{left:50%;top:3px;bottom:3px;width:2px;transform:translateX(-50%)}
.ct-q-body{max-height:0;overflow:hidden;transition:max-height .3s ease}
.ct-q-body p{padding:0 24px 22px;font-size:14px;color:rgba(255,255,255,.5);line-height:1.7;margin:0}

/* Final CTA */
.ct-final{position:relative;text-align:center;padding:90px 24px;background:#06080c;overflow:hidden}
.ct-final-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:600px;height:300px;
  background:radial-gradient(ellipse,rgba(20,224,163,.1),transparent 70%);pointer-events:none}
.ct-final h2{font-size:clamp(28px,4vw,46px);font-weight:900;line-height:1.1;margin-bottom:16px;position:relative}
.ct-final p{font-size:16px;color:rgba(255,255,255,.5);max-width:520px;margin:0 auto 32px;position:relative}
.ct-final .ct-cta{justify-content:center;position:relative}
</style>

<div class="ct-wrap">

  <!-- ═══ HERO ═══ -->
  <section class="ct-hero">
    <div class="ct-hero-grid"></div>
    <div class="ct-hero-glow"></div>
    <div class="ct-hero-glow b"></div>
    <div class="ct-hero-inner">
      <nav class="ip-breadcrumb" style="margin-bottom:26px;font-size:13px">
        <a href="<?php echo stb_url($B.'/'); ?>"><?php echo $fa?'خانه':'Home'; ?></a>
        <span class="ip-breadcrumb-sep">/</span>
        <span style="color:rgba(255,255,255,.6)"><?php echo $fa?'کپی تریدینگ':'Copy Trading'; ?></span>
      </nav>
      <div class="ct-grid2">
        <div>
          <div class="ct-kicker"><span class="ct-kicker-dot"></span><?php echo $fa?'STB سرمایه‌گذاری · کپی تریدینگ':'STB INVESTMENT · COPY TRADING'; ?></div>
          <h1 class="ct-h1"><?php echo $fa?'به استراتژی‌های حرفه‌ای دسترسی پیدا کنید. <em>بدون ساعت‌های حرفه‌ای</em>':'Access Professional Strategies. <em>Without Professional Hours</em>'; ?></h1>
          <p class="ct-lead"><?php echo $fa?'کپی تریدینگ STB به شما اجازه می‌دهد معاملات ارائه‌دهندگان استراتژی تأیید شده را به‌صورت خودکار روی حساب خود کپی کنید — با شفافیت کامل، کنترل ریسک و امکان توقف در هر لحظه.':'STB Copy Trading lets you select verified strategy providers and automatically mirror their trades on your account — with full visibility, risk controls, and the ability to stop at any time.'; ?></p>
          <div class="ct-stats">
            <div><div class="ct-stat-v"><em>4</em></div><div class="ct-stat-l"><?php echo $fa?'ارائه‌دهنده تأیید شده':'Verified Providers'; ?></div></div>
            <div><div class="ct-stat-v"><?php echo $fa?'در لحظه':'Real-Time'; ?></div><div class="ct-stat-l"><?php echo $fa?'کپی معاملات':'Trade Mirroring'; ?></div></div>
            <div><div class="ct-stat-v">0<em>%</em></div><div class="ct-stat-l"><?php echo $fa?'کارمزد مدیریت':'Management Fee'; ?></div></div>
            <div><div class="ct-stat-v"><?php echo $fa?'بدون':'No'; ?></div><div class="ct-stat-l"><?php echo $fa?'قفل سرمایه':'Lock-In'; ?></div></div>
          </div>
          <div class="ct-cta">
            <a href="<?php echo esc_url($register_url); ?>" class="ct-btn ct-btn-teal"><?php echo $fa?'شروع کپی تریدینگ':'Start Copy Trading'; ?>
              <svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
            <a href="#ct-providers" class="ct-btn ct-btn-ghost"><?php echo $fa?'مشاهده ارائه‌دهندگان':'View Providers'; ?></a>
          </div>
        </div>
        <!-- live mirror panel -->
        <div class="ct-mirror ct-rev d1">
          <div class="ct-mirror-head">
            <span class="ct-mirror-tag"><?php echo $fa?'آینه معاملات زنده':'LIVE MIRROR'; ?></span>
            <span class="ct-live"><?php echo $fa?'زنده':'LIVE'; ?></span>
          </div>
          <?php foreach($providers as $p): ?>
          <div class="ct-mrow">
            <div class="ct-mav"><?php echo mb_substr($p['name'],0,1); ?></div>
            <div><div class="ct-mname"><?php echo esc_html($p['name']); ?></div><div class="ct-mstyle"><?php echo esc_html($p['style']); ?></div></div>
            <div class="ct-mret"><?php echo esc_html($p['ret']); ?></div>
            <div class="ct-mspark" aria-hidden="true">
              <?php foreach(explode(',',$p['curve']) as $h): ?><span style="height:<?php echo (int)$h; ?>%"></span><?php endforeach; ?>
            </div>
          </div>
          <?php endforeach; ?>
        </div>
      </div>
    </div>
  </section>

  <!-- ═══ HOW IT WORKS ═══ -->
  <section class="ct-sec alt">
    <div class="ct-c">
      <div class="ct-eyebrow ct-rev"><?php echo $fa?'فرآیند':'PROCESS'; ?></div>
      <h2 class="ct-h2 ct-rev d1"><?php echo $fa?'چگونه <em>کار می‌کند</em>':'How It <em>Works</em>'; ?></h2>
      <p class="ct-desc ct-rev d2"><?php echo $fa?'فرآیندی شفاف و چهارمرحله‌ای — شما انتخاب می‌کنید، کنترل می‌کنید و در هر لحظه می‌توانید خارج شوید.':'A transparent four-step process — you choose, you control, and you can exit at any moment.'; ?></p>
      <div class="ct-steps">
        <?php foreach($steps as $i=>$s): ?>
        <div class="ct-step ct-rev d<?php echo $i+1; ?>">
          <div class="ct-step-n"><?php echo esc_html($s['n']); ?></div>
          <div class="ct-step-t"><?php echo esc_html($s['t']); ?></div>
          <div class="ct-step-d"><?php echo esc_html($s['d']); ?></div>
        </div>
        <?php endforeach; ?>
      </div>
    </div>
  </section>

  <!-- ═══ VERIFIED PROVIDERS ═══ -->
  <section class="ct-sec" id="ct-providers">
    <div class="ct-c">
      <div class="ct-eyebrow ct-rev"><?php echo $fa?'بازار ارائه‌دهندگان':'PROVIDER MARKETPLACE'; ?></div>
      <h2 class="ct-h2 ct-rev d1"><?php echo $fa?'ارائه‌دهندگان <em>تأیید شده</em>':'Verified <em>Strategy Providers</em>'; ?></h2>
      <p class="ct-desc ct-rev d2"><?php echo $fa?'پیش از تخصیص، همه‌چیز را می‌بینید: سابقه عملکرد، افت سرمایه، نرخ برد و سبک معاملاتی. بدون جعبه‌سیاه.':'You see everything before you allocate: track record, drawdown, win rate, and trading style. No black boxes.'; ?></p>
      <div class="ct-tbl-wrap ct-rev d2">
        <div class="ct-tbl-head"><?php echo $fa?'ارائه‌دهندگان برتر کپی تریدینگ':'TOP COPY TRADING PROVIDERS'; ?></div>
        <table class="ct-tbl">
          <thead><tr>
            <th><?php echo $fa?'ارائه‌دهنده':'Provider'; ?></th>
            <th><?php echo $fa?'بازده':'Return'; ?></th>
            <th><?php echo $fa?'افت':'Drawdown'; ?></th>
            <th class="ct-tbl-hide"><?php echo $fa?'نرخ برد':'Win Rate'; ?></th>
            <th class="ct-tbl-hide"><?php echo $fa?'کپی‌کننده':'Copiers'; ?></th>
            <th><?php echo $fa?'ریسک':'Risk'; ?></th>
            <th class="ct-tbl-hide"><?php echo $fa?'منحنی':'Curve'; ?></th>
            <th><?php echo $fa?'عملیات':'Action'; ?></th>
          </tr></thead>
          <tbody>
          <?php foreach($providers as $p):
            $rl = strtolower($p['risk']);
            $rc = (in_array($p['risk'],['Low','پایین'])?'low':(in_array($p['risk'],['High','بالا'])?'high':'med')); ?>
            <tr>
              <td><div class="ct-pname"><div class="ct-pav"><?php echo mb_substr($p['name'],0,1); ?></div>
                <div><div class="ct-pn"><?php echo esc_html($p['name']); ?></div><div class="ct-ps"><?php echo esc_html($p['style']); ?></div></div></div></td>
              <td><span class="ct-ret"><?php echo esc_html($p['ret']); ?></span></td>
              <td><span class="ct-dd"><?php echo esc_html($p['dd']); ?></span></td>
              <td class="ct-tbl-hide"><?php echo esc_html($p['win']); ?></td>
              <td class="ct-tbl-hide"><?php echo esc_html($p['cop']); ?></td>
              <td><span class="ct-pill <?php echo $rc; ?>"><?php echo esc_html($p['risk']); ?></span></td>
              <td class="ct-tbl-hide"><div class="ct-spark" aria-hidden="true">
                <?php foreach(explode(',',$p['curve']) as $h): ?><span style="height:<?php echo (int)$h; ?>%"></span><?php endforeach; ?>
              </div></td>
              <td><a href="<?php echo esc_url($register_url); ?>" class="ct-copy-btn"><?php echo $fa?'کپی':'Copy'; ?></a></td>
            </tr>
          <?php endforeach; ?>
          </tbody>
        </table>
      </div>
      <p class="ct-disclaimer"><?php echo $fa?'داده‌های نمایش‌داده‌شده برای نمونه است. عملکرد گذشته تضمینی برای نتایج آینده نیست. معاملات CFD ریسک بالایی دارد.':'Figures shown are illustrative. Past performance does not guarantee future results. CFD trading carries a high level of risk.'; ?></p>
    </div>
  </section>

  <!-- ═══ INVESTOR PROTECTIONS ═══ -->
  <section class="ct-sec alt">
    <div class="ct-c">
      <div class="ct-eyebrow ct-rev"><?php echo $fa?'کنترل و حفاظت':'CONTROL & PROTECTION'; ?></div>
      <h2 class="ct-h2 ct-rev d1"><?php echo $fa?'همیشه <em>در کنترل</em> شماست':'You\'re Always <em>In Control</em>'; ?></h2>
      <p class="ct-desc ct-rev d2"><?php echo $fa?'کپی تریدینگ STB بر پایه شفافیت ساخته شده — هر معامله قابل مشاهده، هر ارائه‌دهنده تأیید شده، و خروج همیشه ممکن.':'STB Copy Trading is built on transparency — every trade visible, every provider verified, and exit always possible.'; ?></p>
      <div class="ct-prots">
        <?php
        $prot_icons = [
          '<path d="M12 2l8 4v6c0 5-3.5 8-8 10-4.5-2-8-5-8-10V6z"/>',
          '<circle cx="12" cy="12" r="3"/><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z"/>',
          '<path d="M4 14a8 8 0 0116 0"/><path d="M12 14l3-3"/>',
          '<path d="M18 6L6 18M6 6l12 12"/>',
          '<path d="M12 1v22M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6"/>',
          '<rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/>',
        ];
        foreach($prots as $i=>$pr): ?>
        <div class="ct-prot ct-rev d<?php echo ($i%3)+1; ?>">
          <div class="ct-prot-ico"><svg viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round"><?php echo $prot_icons[$i]; ?></svg></div>
          <div class="ct-prot-t"><?php echo esc_html($pr['t']); ?></div>
          <div class="ct-prot-d"><?php echo esc_html($pr['d']); ?></div>
        </div>
        <?php endforeach; ?>
      </div>
    </div>
  </section>

  <!-- ═══ INTERACTIVE SIMULATOR ═══ -->
  <section class="ct-sec">
    <div class="ct-c">
      <div class="ct-sim ct-rev d1">
        <div>
          <div class="ct-sim-kick"><?php echo $fa?'شبیه‌ساز تعاملی':'INTERACTIVE SIMULATOR'; ?></div>
          <div class="ct-sim-t"><?php echo $fa?'اگر <em>کپی می‌کردید</em> چه می‌شد؟':'What If You <em>Copied</em>?'; ?></div>
          <div class="ct-sim-sub"><?php echo $fa?'ببینید سرمایه شما در ۱۲ ماه با عملکرد یک ارائه‌دهنده چگونه می‌توانست رشد کند.':'See how your capital could have grown over 12 months following a provider.'; ?></div>
          <div class="ct-sim-field">
            <div class="ct-sim-lbl"><span><?php echo $fa?'مبلغ تخصیص':'Allocation Amount'; ?></span><b id="ctAmtL">$5,000</b></div>
            <input type="range" class="ct-range" id="ctAmt" min="500" max="50000" step="500" value="5000">
          </div>
          <div class="ct-sim-field">
            <div class="ct-sim-lbl"><span><?php echo $fa?'بازده ماهانه (%)':'Monthly Return (%)'; ?></span><b id="ctRetL">6%</b></div>
            <input type="range" class="ct-range" id="ctRet" min="1" max="15" step="1" value="6">
          </div>
          <div class="ct-sim-field">
            <div class="ct-sim-lbl"><span><?php echo $fa?'کارمزد عملکرد (%)':'Performance Fee (%)'; ?></span><b id="ctFeeL">20%</b></div>
            <input type="range" class="ct-range" id="ctFee" min="0" max="30" step="5" value="20">
          </div>
        </div>
        <div class="ct-sim-out">
          <div class="ct-sim-out-lbl"><?php echo $fa?'ارزش تخمینی پس از ۱۲ ماه':'Est. Value After 12 Months'; ?></div>
          <div class="ct-sim-out-val" id="ctOut">$10,061</div>
          <div class="ct-sim-out-sub" id="ctNet"><?php echo $fa?'سود خالص شما':'Your net gain'; ?>: <span id="ctGain">$5,061</span></div>
          <div class="ct-sim-bars" id="ctBars" aria-hidden="true"></div>
          <div class="ct-sim-note"><?php echo $fa?'فقط برای نمایش. کارمزد عملکرد بر مبنای high-watermark از سود محاسبه می‌شود. نتایج واقعی متفاوت خواهد بود.':'Illustration only. Performance fee is calculated on profit, high-watermark basis. Actual results will vary.'; ?></div>
        </div>
      </div>
    </div>
  </section>

  <!-- ═══ INVESTOR / PROVIDER SPLIT ═══ -->
  <section class="ct-sec alt">
    <div class="ct-c">
      <div class="ct-eyebrow ct-rev"><?php echo $fa?'دو مسیر':'TWO PATHS'; ?></div>
      <h2 class="ct-h2 ct-rev d1"><?php echo $fa?'کپی کنید یا <em>ارائه دهید</em>':'Copy or <em>Provide</em>'; ?></h2>
      <p class="ct-desc ct-rev d2"><?php echo $fa?'چه بخواهید از استراتژی‌های حرفه‌ای بهره ببرید و چه استراتژی خود را به بازار عرضه کنید — هر دو روی همان حساب STB.':'Whether you want to follow professional strategies or bring your own to the marketplace — both on the same STB account.'; ?></p>
      <div class="ct-split">
        <div class="ct-side inv ct-rev d1">
          <div class="ct-side-tag"><?php echo $fa?'برای سرمایه‌گذاران':'FOR INVESTORS'; ?></div>
          <div class="ct-side-t"><?php echo $fa?'استراتژی‌های تأیید شده را کپی کنید':'Copy verified strategies'; ?></div>
          <div class="ct-side-d"><?php echo $fa?'ارائه‌دهنده را انتخاب کنید، تخصیص و حد ریسک را تعیین کنید و در هر لحظه خارج شوید.':'Pick a provider, set your allocation and risk limit, and exit at any moment.'; ?></div>
          <ul class="ct-side-list">
            <li><?php echo $fa?'سابقه و افت سرمایه شفاف پیش از تخصیص':'Transparent track record & drawdown before you allocate'; ?></li>
            <li><?php echo $fa?'کپی متناسب در لحظه روی حساب شما':'Proportional real-time copying on your account'; ?></li>
            <li><?php echo $fa?'توقف یا تنظیم در هر زمان — بدون قفل':'Pause or adjust any time — no lock-in'; ?></li>
            <li><?php echo $fa?'کارمزد فقط بر دوره‌های سودده':'Fees only on profitable periods'; ?></li>
          </ul>
          <a href="<?php echo esc_url($register_url); ?>" class="ct-btn ct-btn-teal"><?php echo $fa?'شروع به کپی':'Start Copying'; ?>
            <svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
        </div>
        <div class="ct-side prov ct-rev d2">
          <div class="ct-side-tag"><?php echo $fa?'برای ارائه‌دهندگان':'FOR PROVIDERS'; ?></div>
          <div class="ct-side-t"><?php echo $fa?'سابقه شما، محصول شماست':'Your track record is your product'; ?></div>
          <div class="ct-side-d"><?php echo $fa?'ارائه‌دهنده تأیید شده شوید. تاریخچه معاملاتی شما منتشر می‌شود، دیگران کپی می‌کنند و شما کارمزد عملکرد دریافت می‌کنید.':'Become a verified provider. Your trading history is published, others copy you, and you earn a performance fee.'; ?></div>
          <ul class="ct-side-list">
            <li><?php echo $fa?'نشان «ارائه‌دهنده تأیید شده» روی پروفایل':'"Verified Provider" badge on your profile'; ?></li>
            <li><?php echo $fa?'داشبورد عملکرد برای کپی‌کنندگان شما':'Performance dashboard for your copiers'; ?></li>
            <li><?php echo $fa?'یکپارچگی با فروشگاه انجمن STB':'Integration with the STB Society Community Shop'; ?></li>
            <li><?php echo $fa?'کارمزد عملکرد بر مبنای high-watermark':'Performance fee on a high-watermark basis'; ?></li>
          </ul>
          <a href="<?php echo esc_url($register_url); ?>" class="ct-btn ct-btn-teal"><?php echo $fa?'ارائه‌دهنده شوید':'Become a Provider'; ?>
            <svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
        </div>
      </div>
    </div>
  </section>

  <!-- ═══ FAQ ═══ -->
  <section class="ct-sec">
    <div class="ct-c">
      <div class="ct-eyebrow ct-rev" style="text-align:center"><?php echo $fa?'پرسش‌های متداول':'FAQ'; ?></div>
      <h2 class="ct-h2 ct-rev d1" style="text-align:center"><?php echo $fa?'سؤالات <em>رایج</em>':'Common <em>Questions</em>'; ?></h2>
      <div class="ct-faq" style="margin-top:40px">
        <?php
        $faqs = $fa ? [
          ['q'=>'کپی تریدینگ با PAMM چه تفاوتی دارد؟','a'=>'در کپی تریدینگ شما خودتان ارائه‌دهنده را انتخاب می‌کنید و معاملات او روی حساب خودتان کپی می‌شود؛ کنترل و سرمایه نزد شماست. در PAMM، مدیر سرمایه شما را در یک حساب مستر مدیریت می‌کند. کپی تریدینگ برای سرمایه‌گذار نیمه‌غیرفعال مناسب‌تر است.'],
          ['q'=>'آیا می‌توانم در هر زمان کپی را متوقف کنم؟','a'=>'بله. هیچ دوره حداقلی وجود ندارد. می‌توانید تخصیص را تنظیم، کپی را موقتاً متوقف یا کاملاً خارج شوید — به‌صورت آنی.'],
          ['q'=>'ارائه‌دهندگان چگونه تأیید می‌شوند؟','a'=>'هر ارائه‌دهنده استراتژی پیش از انتشار بررسی می‌شود و سابقه عملکرد، تاریخچه افت سرمایه، ابزارها و سبک معاملاتی او به‌صورت شفاف نمایش داده می‌شود.'],
          ['q'=>'کارمزد چگونه محاسبه می‌شود؟','a'=>'کارمزد عملکرد فقط بر دوره‌های سودده و بر مبنای high-watermark محاسبه می‌شود. کارمزد مدیریت ثابتی وجود ندارد — اگر سودی نباشد، کارمزد عملکردی هم نیست.'],
          ['q'=>'آیا به حساب جداگانه نیاز دارم؟','a'=>'خیر. کپی تریدینگ بومی پلتفرم STB است و روی همان حساب کارگزاری شما کار می‌کند — بدون ادغام شخص ثالث.'],
        ] : [
          ['q'=>'How is Copy Trading different from PAMM?','a'=>'With Copy Trading you choose the provider yourself and their trades copy onto your own account — control and capital stay with you. With PAMM, a manager runs your capital inside a master account. Copy Trading suits a more semi-passive investor.'],
          ['q'=>'Can I stop copying at any time?','a'=>'Yes. There is no minimum period. You can adjust allocation, pause copying, or exit completely — instantly.'],
          ['q'=>'How are providers verified?','a'=>'Every strategy provider is reviewed before being published, and their track record, drawdown history, instruments and trading style are displayed transparently.'],
          ['q'=>'How are fees calculated?','a'=>'A performance fee applies to profitable periods only, on a high-watermark basis. There is no fixed management fee — no profit means no performance fee.'],
          ['q'=>'Do I need a separate account?','a'=>'No. Copy Trading is native to the STB platform and runs on the same brokerage account — no third-party integration.'],
        ];
        foreach($faqs as $f): ?>
        <div class="ct-q">
          <div class="ct-q-head"><div class="ct-q-q"><?php echo esc_html($f['q']); ?></div><div class="ct-q-ico"></div></div>
          <div class="ct-q-body"><p><?php echo esc_html($f['a']); ?></p></div>
        </div>
        <?php endforeach; ?>
      </div>
    </div>
  </section>

  <!-- ═══ FINAL CTA ═══ -->
  <section class="ct-final">
    <div class="ct-final-glow"></div>
    <h2><?php echo $fa?'استراتژی‌های حرفه‌ای، در دسترس شما':'Professional strategies, within reach'; ?></h2>
    <p><?php echo $fa?'ارائه‌دهنده تأیید شده انتخاب کنید، با کنترل کامل کپی کنید و هر زمان که خواستید خارج شوید.':'Choose a verified provider, copy with full control, and exit whenever you choose.'; ?></p>
    <div class="ct-cta">
      <a href="<?php echo esc_url($register_url); ?>" class="ct-btn ct-btn-teal"><?php echo $fa?'افتتاح حساب':'Open an Account'; ?>
        <svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
      <a href="<?php echo esc_url($login_url); ?>" class="ct-btn ct-btn-ghost"><?php echo $fa?'ورود':'Log In'; ?></a>
    </div>
  </section>

</div>

<script>
(function(){
  // Scroll reveal
  var io=new IntersectionObserver(function(es){es.forEach(function(e){if(e.isIntersecting){e.target.classList.add('in');io.unobserve(e.target);}});},{threshold:.12});
  document.querySelectorAll('.ct-rev').forEach(function(el){io.observe(el);});

  // FAQ accordion
  document.querySelectorAll('.ct-q-head').forEach(function(h){
    h.addEventListener('click',function(){
      var q=h.closest('.ct-q'), body=q.querySelector('.ct-q-body');
      var open=q.classList.contains('open');
      document.querySelectorAll('.ct-q').forEach(function(o){o.classList.remove('open');o.querySelector('.ct-q-body').style.maxHeight=null;});
      if(!open){q.classList.add('open');body.style.maxHeight=body.scrollHeight+'px';}
    });
  });

  // Simulator
  var isFa=<?php echo $fa?'true':'false'; ?>;
  var amt=document.getElementById('ctAmt'),ret=document.getElementById('ctRet'),fee=document.getElementById('ctFee');
  var amtL=document.getElementById('ctAmtL'),retL=document.getElementById('ctRetL'),feeL=document.getElementById('ctFeeL');
  var out=document.getElementById('ctOut'),gain=document.getElementById('ctGain'),bars=document.getElementById('ctBars');
  function money(n){return '$'+Math.round(n).toLocaleString('en-US');}
  function calc(){
    var a=+amt.value,r=+ret.value/100,f=+fee.value/100;
    amtL.textContent=money(a);retL.textContent=ret.value+'%';feeL.textContent=fee.value+'%';
    var bal=a,series=[];
    for(var m=0;m<12;m++){var profit=bal*r;profit=profit*(1-f);bal+=profit;series.push(bal);}
    out.textContent=money(bal);gain.textContent=money(bal-a);
    var max=series[series.length-1],min=a;
    bars.innerHTML=series.map(function(v){var h=12+((v-min)/(max-min||1))*52;return '<span style="height:'+h+'px"></span>';}).join('');
  }
  [amt,ret,fee].forEach(function(el){el.addEventListener('input',calc);});
  calc();
})();
</script>
