<?php $lang=stb_lang(); $B='/NewSite'; $is_fa=$lang==='fa'; 
$login_label_url = $lang==='fa' ? 'https://crm.stbbrokers.com/fa':'https://crm.stbbrokers.com/';
$register_label_url = $lang==='fa' ? 'https://crm.stbbrokers.com/fa/register':'https://crm.stbbrokers.com/register/';
?>
<style>
/* ══════════════════════════════════════════════════════════════
   TRADING ACCOUNTS — Enhanced Animated Version
══════════════════════════════════════════════════════════════ */

/* ── Hero Background ── */
.ta-hero-bg{position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 50% at 50% -10%,rgba(200,16,46,.18),transparent),
  repeating-linear-gradient(0deg,transparent,transparent 47px,rgba(200,16,46,.03) 48px),
  repeating-linear-gradient(90deg,transparent,transparent 47px,rgba(200,16,46,.03) 48px)}

/* ── Scroll reveal ── */
.ta-reveal{opacity:0;transform:translateY(30px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.ta-reveal.visible{opacity:1;transform:none}
.ta-reveal.d1{transition-delay:.1s}.ta-reveal.d2{transition-delay:.2s}.ta-reveal.d3{transition-delay:.3s}.ta-reveal.d4{transition-delay:.4s}

/* ── Account cards grid ── */
.ta-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-radius:20px;overflow:hidden;
  border:1px solid rgba(255,255,255,.08);margin-bottom:56px}
@media(max-width:1000px){.ta-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.ta-grid{grid-template-columns:1fr;border-radius:16px}}

.ta-card{background:#0a0c10;padding:28px 22px;border-right:1px solid rgba(255,255,255,.07);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='2' cy='2' r='0.75' fill='rgba(255, 255, 255, 0.03)'/%3E%3C/svg%3E");
  background-size: 24px 24px;
  position:relative;overflow:hidden;transition:background .35s,transform .3s,box-shadow .3s;
  z-index: 1;}
.ta-card::before, .ta-card::after {
  content: ''; position: absolute;
  width: 14px; height: 14px;
  border-color: rgba(255, 255, 255, 0.05);
  border-style: solid;
  transition: border-color .3s;
  pointer-events: none;
  z-index: 2;
}
.ta-card::before { top: 14px; left: 14px; border-width: 2px 0 0 2px; }
.ta-card::after { bottom: 14px; right: 14px; border-width: 0 2px 2px 0; }
body.rtl .ta-card::before { left: auto; right: 14px; border-width: 2px 2px 0 0; }
body.rtl .ta-card::after { right: auto; left: 14px; border-width: 0 0 2px 2px; }

.ta-card:last-child{border-right:none}
@media(max-width:1000px){.ta-card:nth-child(2n){border-right:none}.ta-card:nth-child(1),.ta-card:nth-child(2){border-bottom:1px solid rgba(255,255,255,.07)}}
@media(max-width:560px){.ta-card{border-right:none!important;border-bottom:1px solid rgba(255,255,255,.07)}.ta-card:last-child{border-bottom:none}}

/* Featured card */
.ta-card.featured{background:linear-gradient(160deg,rgba(200,16,46,.08),rgba(200,16,46,.02));
  border-top:2px solid #C8102E; z-index: 2; box-shadow: 0 10px 40px rgba(0,0,0,0.5)}
.ta-card.featured::before, .ta-card.featured::after { border-color: rgba(200,16,46,0.3); }

/* Hover glow */
.ta-card-bg-glow { content:'';position:absolute;top:-50%;right:-50%;width:120px;height:120px;
  background:radial-gradient(circle,rgba(200,16,46,.2),transparent 70%);
  border-radius:50%;opacity:0;transition:opacity .4s,transform .4s;pointer-events:none; z-index: -1; }
.ta-card:hover .ta-card-bg-glow{opacity:1;transform:translate(-20px,30px)}
.ta-card:hover{background-color:rgba(200,16,46,.04); z-index: 3;}
.ta-card:hover::before, .ta-card:hover::after { border-color: #C8102E; }

/* Animated border pulse on featured */
.ta-card.featured{
  animation:ta-border-pulse 3s ease-in-out infinite;
}
@keyframes ta-border-pulse{0%,100%{box-shadow:0 10px 40px rgba(0,0,0,0.5), inset 0 0 0 transparent}50%{box-shadow:0 10px 40px rgba(0,0,0,0.5), inset 0 2px 20px rgba(200,16,46,0.15)}}

.ta-card-tier{font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  padding:3px 10px;border-radius:20px;display:inline-block;margin-bottom:14px;
  animation:ta-badge-glow 4s ease-in-out infinite}
@keyframes ta-badge-glow{0%,100%{box-shadow:none}50%{box-shadow:0 0 12px rgba(200,16,46,.15)}}

.ta-card-name{font-size:22px;font-weight:800;color:#fff;margin-bottom:4px;letter-spacing:-.02em}
.ta-card-desc{font-size:12.5px;color:rgba(255,255,255,.4);margin-bottom:20px;line-height:1.5}

.ta-spec{display:flex;justify-content:space-between;align-items:center;
  padding:9px 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:13px;
  transition:padding-left .2s}
.ta-spec:last-of-type{border-bottom:none}
.ta-card:hover .ta-spec{padding-left:4px}
body.rtl .ta-card:hover .ta-spec{padding-left:0;padding-right:4px}
.ta-spec-label{color:rgba(255,255,255,.4)}
.ta-spec-val{font-weight:700;color:#fff}
.ta-spec-val.red{color:#C8102E}

.ta-card-cta{display:block;text-align:center;padding:12px;margin-top:18px;border-radius:10px;
  font-size:13.5px;font-weight:700;background:#C8102E;color:#fff;text-decoration:none;
  transition:all .25s;box-shadow:0 4px 20px rgba(200,16,46,.25);position:relative;overflow:hidden}
.ta-card-cta::before{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);
  transform:translateX(-100%);transition:transform .5s}
.ta-card-cta:hover::before{transform:translateX(100%)}
.ta-card-cta:hover{filter:brightness(1.1);transform:translateY(-2px);box-shadow:0 8px 30px rgba(200,16,46,.35);color:#fff}

/* ── Comparison table ── */
.ta-compare-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:56px;
  border-radius:16px;border:1px solid rgba(255,255,255,.07)}
.ta-compare{width:100%;border-collapse:collapse;background:#0a0c10;min-width:600px}
.ta-compare th{padding:14px 18px;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(255,255,255,.35);background:rgba(255,255,255,.03);border-bottom:1px solid rgba(255,255,255,.07);text-align:left;
  position:sticky;top:0}
.ta-compare th.ecn{background:rgba(200,16,46,.08);color:rgba(200,16,46,.8)}
.ta-compare td{padding:13px 18px;font-size:13.5px;color:rgba(255,255,255,.65);
  border-bottom:1px solid rgba(255,255,255,.04);transition:background .15s}
.ta-compare tr:last-child td{border-bottom:none}
.ta-compare tr:hover td{background:rgba(255,255,255,.025)}
.ta-compare td.ecn{background:rgba(200,16,46,.03)}
.ta-check{color:#14e0a3;font-weight:700}

/* ── Steps ── */
.ip-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;position:relative;margin-bottom:48px}
@media(max-width:700px){.ip-steps{grid-template-columns:1fr;gap:16px}}

/* ══════════════════════════════════════════════════════════════
   MASTERPIECE: Execution DNA Helix — Animated Spread Visualiser
══════════════════════════════════════════════════════════════ */
.ta-dna{margin-bottom:56px;border-radius:20px;overflow:hidden;
  background:linear-gradient(135deg,#06080c,#0c0e14);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Ccircle cx='1' cy='1' r='0.5' fill='rgba(255, 255, 255, 0.04)'/%3E%3C/svg%3E"), linear-gradient(135deg,#06080c,#0c0e14);
  border:1px solid rgba(255,255,255,.07);position:relative}
.ta-dna::before{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 40% at 80% 20%,rgba(200,16,46,.06),transparent),
  radial-gradient(ellipse 50% 50% at 20% 80%,rgba(20,224,163,.04),transparent);
  pointer-events:none; z-index: 0;}
.ta-dna-inner{display:grid;grid-template-columns:1fr 1fr;gap:0;position:relative;z-index:1}
@media(max-width:800px){.ta-dna-inner{grid-template-columns:1fr}}
.ta-dna-info{padding:48px 40px;display:flex;flex-direction:column;justify-content:center}
@media(max-width:800px){.ta-dna-info{padding:32px 24px}}
.ta-dna-kicker{font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(200,16,46,.7);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.ta-dna-kicker::before{content:'';width:6px;height:6px;border-radius:50%;background:#C8102E;
  box-shadow:0 0 8px #C8102E;animation:ta-dna-pulse 2s infinite}
@keyframes ta-dna-pulse{0%,100%{box-shadow:0 0 4px #C8102E}50%{box-shadow:0 0 16px rgba(200,16,46,.6)}}
.ta-dna-title{font-size:28px;font-weight:800;color:#fff;margin-bottom:12px;letter-spacing:-.02em;line-height:1.2}
@media(max-width:560px){.ta-dna-title{font-size:22px}}
.ta-dna-title em{font-style:normal;color:#14e0a3}
.ta-dna-desc{font-size:14px;color:rgba(255,255,255,.45);line-height:1.7;margin-bottom:28px}

/* Live spread bars */
.ta-dna-bars{display:flex;flex-direction:column;gap:14px}
.ta-dna-bar{position:relative}
.ta-dna-bar-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.ta-dna-bar-pair{font-size:13px;font-weight:700;color:rgba(255,255,255,.7)}
.ta-dna-bar-val{font-size:13px;font-weight:800;font-variant-numeric:tabular-nums}
.ta-dna-bar-val.std{color:rgba(255,255,255,.4)}
.ta-dna-bar-val.ecn{color:#14e0a3}
.ta-dna-bar-track{height:6px;border-radius:3px;background:rgba(255,255,255,.06);position:relative;overflow:hidden}
.ta-dna-bar-fill{position:absolute;top:0;left:0;height:100%;border-radius:3px;
  transition:width 1.5s cubic-bezier(.16,1,.3,1)}
.ta-dna-bar-fill.std{background:linear-gradient(90deg,rgba(200,16,46,.6),rgba(200,16,46,.3))}
.ta-dna-bar-fill.ecn{background:linear-gradient(90deg,#14e0a3,rgba(20,224,163,.4));
  box-shadow:0 0 12px rgba(20,224,163,.3)}
body.rtl .ta-dna-bar-fill{left:auto;right:0}

/* Canvas side */
.ta-dna-canvas-wrap{position:relative;min-height:380px;display:flex;align-items:center;justify-content:center;
  border-left:1px solid rgba(255,255,255,.06)}
@media(max-width:800px){.ta-dna-canvas-wrap{min-height:260px;border-left:none;border-top:1px solid rgba(255,255,255,.06)}}
#ta-dna-canvas{width:100%;height:100%;display:block}

/* Legend pills */
.ta-dna-legend{display:flex;gap:16px;margin-top:20px}
.ta-dna-legend-item{display:flex;align-items:center;gap:6px;font-size:11.5px;color:rgba(255,255,255,.45)}
.ta-dna-legend-dot{width:8px;height:8px;border-radius:50%}

/* ── Floating particles (hero) ── */
.ta-particles{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.ta-particle{position:absolute;width:2px;height:2px;background:rgba(200,16,46,.4);border-radius:50%;
  animation:ta-float linear infinite}
@keyframes ta-float{0%{transform:translateY(0) scale(1);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateY(-100vh) scale(0);opacity:0}}

/* ── Animated number counters ── */
.ta-counter{display:inline-block;font-variant-numeric:tabular-nums}

/* ── Feature cards enhanced hover ── */
.ip-card{transition:border-color .25s,transform .3s,box-shadow .3s!important}
.ip-card:hover{box-shadow:0 12px 40px rgba(0,0,0,.4)!important}

/* ── Table responsive scroll hint ── */
.ta-scroll-hint{display:none;text-align:center;font-size:11px;color:rgba(255,255,255,.25);
  padding:8px;animation:ta-hint-pulse 2s infinite}
@keyframes ta-hint-pulse{0%,100%{opacity:.4}50%{opacity:1}}
@media(max-width:700px){.ta-scroll-hint{display:block}}

/* ── Hero stats animated underline ── */
.ip-hero-stats>div{position:relative}
.ip-hero-stats>div::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:1px;
  background:#C8102E;transition:width .6s cubic-bezier(.16,1,.3,1)}
.ip-hero-stats>div:hover::after{width:100%}

/* ── Mobile tweaks ── */
@media(max-width:560px){
  .ip-hero-stats{gap:20px}
  .ip-hero-stats .ip-stat-val{font-size:24px}
  .ip-hero-ctas{flex-direction:column}
  .ip-hero-ctas a{text-align:center;justify-content:center}
  .ta-dna-legend{flex-wrap:wrap;gap:10px}
  .ip-cards{grid-template-columns:1fr!important}
  .ip-cta-strip{flex-direction:column!important;text-align:center!important}
  .ip-cta-strip-btns{justify-content:center!important}
}




/* ── Swap Notes Box (Under Comparison Table) ── */
.ta-note-box{
  margin-top:20px;
  background:#0a0c10;
  border:1px solid rgba(255,255,255,.07);
  border-radius:16px;
  padding:18px 22px;
  font-size:13.5px;
  line-height:1.9;
  color:rgba(255,255,255,.65);
}

.ta-note-box p{
  margin-bottom:10px;
}

.ta-note-box p:last-child{
  margin-bottom:0;
}

.ta-note-box strong{
  color:#fff;
}

.ta-note-box .note-title{
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(200,16,46,.85);
  margin-bottom:10px;
}

body.rtl .ta-note-box{
  text-align:right;
}
.ta-reveal.d2{
  margin-bottom:60px;
}

/* ── Dynamic Leverage Table ── */
.ta-dyn-lev-wrap {
  margin-bottom: 56px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.07);
  background: #0a0c10;
  padding: 28px 24px;
}
.ta-dyn-lev-title {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ta-dyn-lev-desc {
  font-size: 13.5px;
  color: rgba(255,255,255,.5);
  margin-bottom: 20px;
  line-height: 1.6;
}
body.rtl .ta-dyn-lev-title, body.rtl .ta-dyn-lev-desc {
  text-align: right;
}
.ta-dyn-lev-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media(max-width: 768px) {
  .ta-dyn-lev-grid {
    grid-template-columns: 1fr;
  }
}
.ta-dyn-lev-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
body.rtl .ta-dyn-lev-table {
  text-align: right;
}
.ta-dyn-lev-table th {
  padding: 10px 12px;
  font-size: 11px;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-weight: 700;
}
.ta-dyn-lev-table td {
  padding: 12px;
  font-size: 13px;
  color: rgba(255,255,255,.8);
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.ta-dyn-lev-table tr:last-child td {
  border-bottom: none;
}
.ta-dyn-lev-group-title {
  font-size: 14px;
  font-weight: 700;
  color: #C8102E;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
body.rtl .ta-dyn-lev-group-title {
  justify-content: flex-start;
}
.ta-dyn-lev-table td strong {
  color: #fff;
}
</style>

<article class="ip-page">
<!-- ═══ HERO ═══ -->
<div class="ip-hero" style="position:relative;overflow:hidden">
  <div class="ta-hero-bg"></div>
  <div class="ip-hero-glow"></div>
  <!-- Floating particles -->
  <div class="ta-particles" id="ta-particles"></div>
  <div class="ip-container" style="position:relative;z-index:1">
    <nav class="ip-breadcrumb">
      <a href="<?php echo stb_url($B.'/'); ?>"><?php echo $is_fa?'خانه':'Home';?></a>
      <span class="ip-breadcrumb-sep">›</span>
      <span><?php echo $is_fa?'حساب‌های معاملاتی':'Trading Accounts';?></span>
    </nav>
    <div class="ip-kicker"><span class="ip-kicker-dot"></span>STB BROKER</div>
    <h1 class="ip-h1"><?php echo $is_fa?'حساب مناسب برای <em>هر معامله‌گر</em>':'The Right Account for <em>Every Trader</em>';?></h1>
    <p class="ip-hero-desc"><?php echo $is_fa?'از مبتدی تا سازمانی — اسپرد خام، شرایط شفاف و اجرای حرفه‌ای روی MetaTrader 5.':'From beginner to institutional — raw spreads, transparent conditions, and professional-grade execution on MetaTrader 5.';?></p>
    <div class="ip-hero-stats">
      <div><div class="ip-stat-val"><span class="ta-counter" data-target="4">0</span></div><div class="ip-stat-lbl"><?php echo $is_fa?'نوع حساب':'Account Types';?></div></div>
      <div><div class="ip-stat-val"><span class="ta-counter" data-target="0.0" data-decimals="1">0</span><em>pip</em></div><div class="ip-stat-lbl"><?php echo $is_fa?'اسپرد خام':'Raw Spread';?></div></div>
      <div><div class="ip-stat-val">1:<span class="ta-counter" data-target="400">0</span></div><div class="ip-stat-lbl"><?php echo $is_fa?'حداکثر اهرم':'Max Leverage';?></div></div>
      <div><div class="ip-stat-val"><span class="ta-counter" data-target="0.125" data-decimals="3">0</span><em>s</em></div><div class="ip-stat-lbl"><?php echo $is_fa?'سرعت اجرا':'Execution';?></div></div>
    </div>
    <div class="ip-hero-ctas">
      <a href="<?php echo esc_html($register_label_url);?>" class="ip-btn-red"><?php echo $is_fa?'افتتاح حساب واقعی':'Open Live Account';?> <svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7" stroke-width="2" stroke-linecap="round"/></svg></a>
      <a href="<?php echo esc_html($register_label_url);?>" class="ip-btn-ghost"><?php echo $is_fa?'شبیه‌ساز رایگان':'Try Free Demo';?></a>
    </div>
  </div>
</div>

<!-- ═══ SECTION: Choose Your Account ═══ -->
<section class="ip-section">
  <div class="ip-container">
    <?php
    $accounts = $is_fa ? [
      ['استاندارد','شروع','معامله بدون کمیسیون برای تازه‌کاران',false,
        [['اسپرد','از ۰.۷ پیپ'],['کمیسیون','صفر'],['حداقل واریز','$20'],['اهرم','۱:۱۰۰ - ۱:۴۰۰'],['اجرا','فوری/مارکت'],['معاملات خودکار','✓'],['هجینگ','✓']]],
      ['ECN','محبوب','اسپرد خام، دسترسی مستقیم به بازار',true,
        [['اسپرد','از ۰.۲ پیپ'],['کمیسیون','$6 / لات RT'],['حداقل واریز','$50'],['اهرم','۱:۱۰۰ - ۱:۴۰۰'],['اجرا','فقط مارکت'],['معاملات خودکار','✓'],['هجینگ','✓']]],
      ['Prime','حرفه‌ای','شرایط سازمانی، کمیسیون پایین',false,
        [['اسپرد','از ۰.۰ پیپ'],['کمیسیون','$6 / لات RT'],['حداقل واریز','$2,000'],['اهرم','۱:۱۰۰- ۱:۳۰۰'],['اجرا','Market + DMA'],['معاملات خودکار','✓'],['هجینگ','✓']]],
      ['Zero','مینی','اسپرد صفر، مناسب معامله‌گران خرد',false,
        [['اسپرد','صفر'],['کمیسیون','شروع از ۵$ / هر طرف'],['حداقل واریز','$15'],['اهرم','پویا / تا ۱:۲۰۰'],['اجرا','فقط مارکت'],['معاملات خودکار','✗'],['هجینگ','۱۵۰٪']]],
      ] : [
      ['Standard','STARTER','Entry-level trading with zero commission',false,
        [['Spread','From 0.7 pips'],['Commission','Zero'],['Min Deposit','$20'],['Leverage','1:100 - 1:400'],['Execution','Instant/Market'],['EA Trading','✓'],['Hedging','✓']]],
      ['ECN','POPULAR','Raw spreads, direct market access',true,
        [['Spread','From 0.2 pips'],['Commission','$6 / lot RT'],['Min Deposit','$50'],['Leverage','1:100 - 1:400'],['Execution','Market only'],['EA Trading','✓'],['Hedging','✓']]],
      ['Prime','PRO','Institutional conditions, low commission',false,
        [['Spread','From 0.0 pips'],['Commission','$6 / lot RT'],['Min Deposit','$2,000'],['Leverage','1:100 - 1:300'],['Execution','Market + DMA'],['EA Trading','✓'],['Hedging','✓']]],
      ['Zero','Zero','Zero spreads, ideal for retail traders',false,
        [['Spread','Zero'],['Commission','From $5 / side'],['Min Deposit','$15'],['Leverage','Dynamic / Up to 1:200'],['Execution','Market only'],['EA Trading','✗'],['Hedging','150%']]],
       ];
    $cta_labels = $is_fa
      ? ['افتتاح استاندارد','افتتاح ECN','افتتاح Prime','افتتاح Zero']
      : ['Open Standard','Open ECN','Open Prime','Open Zero'];
    ?>
    <h2 class="ip-section-title ta-reveal"><?php echo $is_fa?'حساب خود را <em>انتخاب کنید.</em>':'Choose Your <em>Account</em>';?></h2>
    <p class="ip-section-desc ta-reveal d1"><?php echo $is_fa?'تمامی حساب‌ها شامل MT5، حفاظت از بالانس منفی، پشتیبانی ۲۴/۷ و دسترسی به بیش از ۳۵۰ ابزار معاملاتی هستند':'All accounts include MT5, negative balance protection, 24/7 support, and access to 350+ instruments.';?></p>
    <div class="ta-grid ta-reveal d2">
      <?php $i=0; foreach($accounts as $a): ?>
      <div class="ta-card<?php echo $a[3]?' featured':''; ?>">
        <div class="ta-card-tier" style="background:rgba(200,16,46,<?php echo $a[3]?'.2':'.08';?>);color:<?php echo $a[3]?'#C8102E':'rgba(200,16,46,.7)';?>;border:1px solid rgba(200,16,46,<?php echo $a[3]?'.35':'.15';?>)"><?php echo $a[1]; ?></div>
        <div class="ta-card-name"><?php echo $a[0]; ?></div>
        <div class="ta-card-desc"><?php echo $a[2]; ?></div>
        <div class="ta-card-bg-glow"></div>
        <?php foreach($a[4] as $spec): ?>
        <div class="ta-spec">
          <span class="ta-spec-label"><?php echo $spec[0]; ?></span>
          <span class="ta-spec-val<?php echo in_array($spec[1],['✓','✗'])?'':' red'; ?>"><?php echo $spec[1]; ?></span>
        </div>
        <?php endforeach; ?>
        <a href="<?php echo esc_html($register_label_url);?>" class="ta-card-cta"><?php echo $cta_labels[$i]; ?></a>
      </div>
      <?php $i++; endforeach; ?>
    </div>

    <!-- ═══ COMPARISON TABLE ═══ -->
    <!-- ═══ COMPARISON TABLE ═══ -->
<h2 class="ip-section-title ta-reveal">
<?php echo $is_fa?'مقایسه <em>کامل</em>':'Full <em>Comparison</em>';?>
</h2>

<div class="ta-scroll-hint">
<?php echo $is_fa?'← برای مشاهده بکشید →':'← Scroll to see more →';?>
</div>

<div class="ta-compare-wrap ta-reveal d1">

<table class="ta-compare">

<thead>
<tr>
<th><?php echo $is_fa?'ویژگی':'Feature';?></th>
<th>Standard</th>
<th class="ecn">ECN ★</th>
<th>Prime</th>
<th>Zero</th>
<th>PAMM</th>
<th><?php echo $is_fa?'کپی تریدینگ':'Copy Trading';?></th>
</tr>
</thead>

<tbody>

<?php

$rows = $is_fa ? [

['حداقل اسپرد','۰.۷ پیپ','۰.۲ پیپ','۰.۰ پیپ','۰.۰ پیپ','۰.۲ پیپ','۰.۲ پیپ'],

['کمیسیون فارکس','صفر','$6/لات RT','$6/لات RT','$10/لات RT','$6/لات RT','$6/لات RT'],

['کمیسیون کریپتو','۰.۱۰٪','۰.۰۸٪','۰.۰۵٪','۰.۰۷٪','۰.۰۸٪','۰.۰۸٪'],

['کمیسیون سهام','۰.۱۵٪','۰.۱۰٪','۰.۰۸٪','-','۰.۱۰٪','۰.۱۰٪'],

['حداقل واریز','$20','$50','$2,000','$15','$100','$100'],

['حداکثر اهرم','۱:۴۰۰','۱:۴۰۰','۱:۳۰۰','۱:۲۰۰','۱:۲۰۰','۱:۴۰۰'],

['تقسیم سود (سرمایه‌گذار/مدیر)','-','-','-','-','۷۰٪ / ۳۰٪','-'],

['سواپ *','✓','✓','✓','✓','✓','✓'],

['معاملات الگوریتمی','✓','✓','✓','✗','✓','✓'],

['محافظت موجودی منفی','✓','✓','✓','✓','✓','✓'],

['عمق بازار (DOM)','-','✓','✓','-','✓','-'],

['مدیر اختصاصی','-','-','✓','-','-','-'],

] : [

['Min Spread','0.7 pips','0.2 pips','0.0 pips','0.0 pips','0.2 pips','0.2 pips'],

['FX Commission','Zero','$6/lot RT','$6/lot RT','$10/lot RT','$6/lot RT','$6/lot RT'],

['Crypto Commission','0.10%','0.08%','0.05%','0.07%','0.08%','0.08%'],

['Stocks Commission','0.15%','0.10%','0.08%','-','0.10%','0.10%'],

['Min Deposit','$20','$50','$2,000','$15','$100','$100'],

['Max Leverage','1:400','1:400','1:300','1:200','1:200','1:400'],

['Profit Split (Investor/Manager)','-','-','-','-','70% / 30%','-'],

['Swap *','✓','✓','✓','✓','✓','✓'],

['Algorithmic Trading','✓','✓','✓','✗','✓','✓'],

['Neg. Balance Protection','✓','✓','✓','✓','✓','✓'],

['DOM (Depth of Market)','-','✓','✓','-','✓','-'],

['Dedicated Manager','-','-','✓','-','-','-'],

];

foreach($rows as $r):

?>

<tr>

<td><?php echo $r[0]; ?></td>

<td><?php echo $r[1]; ?></td>

<td class="ecn">
<strong style="color:<?php echo $r[2]==='✓'?'#14e0a3':'inherit'; ?>">
<?php echo $r[2]; ?>
</strong>
</td>

<td><?php echo $r[3]; ?></td>

<td><?php echo $r[4]; ?></td>

<td><?php echo $r[5]; ?></td>

<td><?php echo $r[6]; ?></td>

</tr>

<?php endforeach; ?>

</tbody>

</table>

</div>


<!-- ═══ Swap Notes Box (Under Table) ═══ -->

<div class="ta-note-box ta-reveal d2">

<div class="note-title">
<?php echo $is_fa?'توضیحات مهم':'Important Notes';?>
</div>

<p>
<?php echo $is_fa?
'* حساب استاندارد به مدت ۶ روز سواپ صفر و بعد از آن در صورتی که همچنان معامله باز داشته باشند، کل سواپ مدت زمان حساب خواهد شد. چنانچه تا قبل از موعد سر رسید عدم اعمال سواپ، پوزیشن معاملاتی بسته شود، هیچ موردی اعمال نخواهد شد. دوره تنفس (عدم اعمال سواپ) بر اساس هر نماد به این شکل می‌باشد:'
:
'* The Standard account offers zero swap for 6 days. After that, if positions remain open, the full swap for the holding period will be applied. If the position is closed before the swap-free expiration time, no swap will be charged. The grace period (swap-free duration) per symbol is as follows:';?>
</p>

<p>
<strong>
<?php echo $is_fa?
'فارکس: ۶ روز ، فلزات: ۶ روز ، شاخص: ۳ روز ، انرژی: ۳ روز ، کریپتو: ۱ روز'
:
'Forex: 6 days, Metals: 6 days, Indices: 3 days, Energy: 3 days, Crypto: 1 day';?>
</strong>
</p>

<p>
<?php echo $is_fa?
'** سهام و اوراق شامل عدم اعمال سواپ نمی‌شود.'
:
'** Stocks and equities are not included in the swap-free policy.';?>
</p>

<p>
<?php echo $is_fa?
'*** تنها حساب اسلامی، حساب استاندارد بوده و سایر حساب‌ها شامل این مورد نمی‌شوند.'
:
'*** Only the Islamic account applies to the Standard account, and other account types are not included.';?>
</p>

</div>

<!-- ═══ SECTION: Dynamic Leverage Table ═══ -->
<div class="ta-dyn-lev-wrap ta-reveal d1">
  <div class="ta-dyn-lev-title">
    <svg viewBox="0 0 24 24" width="20" height="20" stroke="#C8102E" stroke-width="2" fill="none"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" stroke-linecap="round" stroke-linejoin="round"/></svg>
    <?php echo $is_fa ? 'اهرم معاملاتی شناور (پویا)' : 'Dynamic Leverage System'; ?>
  </div>
  <p class="ta-dyn-lev-desc">
    <?php echo $is_fa 
      ? 'اهرم حساب‌های معاملاتی Zero بر اساس حجم پوزیشن معاملاتی (ارزش اسمی پوزیشن) به صورت خودکار تغییر می‌کند. این تغییر به ازای هر نماد اعمال می‌شود:' 
      : 'Leverage on Zero accounts dynamically updates based on the total position size (Notional Value). This is calculated per instrument:'; ?>
  </p>
  <div class="ta-dyn-lev-grid">
    
    <!-- Group 1: FX & Commodities -->
    <div>
      <div class="ta-dyn-lev-group-title">
        <svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" fill="none" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 8v4l3 3" stroke-linecap="round"/></svg>
        <?php echo $is_fa ? 'جفت‌ارزها، فلزات، شاخص‌ها و انرژی‌ها' : 'FX, Metals, Indices & Energies'; ?>
      </div>
      <table class="ta-dyn-lev-table">
        <thead>
          <tr>
            <th><?php echo $is_fa ? 'ارزش اسمی پوزیشن' : 'Position Notional'; ?></th>
            <th><?php echo $is_fa ? 'اهرم پویا' : 'Dynamic Leverage'; ?></th>
            <th><?php echo $is_fa ? 'حداکثر اهرم مجاز' : 'Max Allowed Leverage'; ?></th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><?php echo $is_fa ? 'تا $۹,۹۹۹' : 'From $0 To $9.99 K'; ?></td>
            <td><strong><?php echo $is_fa ? '۱۰۰٪ اهرم حساب' : '100% of account leverage'; ?></strong></td>
            <td><?php echo $is_fa ? 'تا ۱:۲۰۰' : 'up to 1:200'; ?></td>
          </tr>
          <tr>
            <td><?php echo $is_fa ? 'از $۱۰,۰۰۰ تا $۲۹,۹۹۹' : 'From $10 K To $29.99 K'; ?></td>
            <td><strong><?php echo $is_fa ? '۳۳٪ اهرم حساب' : '33% of account leverage'; ?></strong></td>
            <td>-</td>
          </tr>
          <tr>
            <td><?php echo $is_fa ? 'از $۳۰,۰۰۰ تا $۰.۹۹M' : 'From $30 K To $0.99 M'; ?></td>
            <td><strong><?php echo $is_fa ? '۵٪ اهرم حساب' : '5% of account leverage'; ?></strong></td>
            <td>-</td>
          </tr>
          <tr>
            <td><?php echo $is_fa ? 'بیشتر از $۱M' : 'More than $1 M'; ?></td>
            <td><strong><?php echo $is_fa ? '۱٪ اهرم حساب' : '1% of account leverage'; ?></strong></td>
            <td>-</td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- Group 2: Crypto -->
    <div>
      <div class="ta-dyn-lev-group-title" style="color: #14e0a3;">
        <svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" fill="none" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" stroke-linecap="round" stroke-linejoin="round"/></svg>
        <?php echo $is_fa ? 'ارزهای دیجیتال (کریپتو)' : 'Cryptocurrencies (Crypto)'; ?>
      </div>
      <table class="ta-dyn-lev-table">
        <thead>
          <tr>
            <th><?php echo $is_fa ? 'ارزش اسمی پوزیشن' : 'Position Notional'; ?></th>
            <th><?php echo $is_fa ? 'اهرم پویا' : 'Dynamic Leverage'; ?></th>
            <th><?php echo $is_fa ? 'حداکثر اهرم مجاز' : 'Max Allowed Leverage'; ?></th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><?php echo $is_fa ? 'تا $۹,۹۹۹' : 'From $0 To $9.99 K'; ?></td>
            <td><strong>۱:۷۵</strong></td>
            <td><?php echo $is_fa ? 'تا ۱:۷۵' : 'up to 1:75'; ?></td>
          </tr>
          <tr>
            <td><?php echo $is_fa ? 'از $۱۰,۰۰۰ تا $۲۹,۹۹۹' : 'From $10 K To $29.99 K'; ?></td>
            <td><strong>۱:۲۵</strong></td>
            <td>-</td>
          </tr>
          <tr>
            <td><?php echo $is_fa ? 'از $۳۰,۰۰۰ تا $۰.۹۹M' : 'From $30 K To $0.99 M'; ?></td>
            <td><strong>۱:۵</strong></td>
            <td>-</td>
          </tr>
          <tr>
            <td><?php echo $is_fa ? 'بیشتر از $۱M' : 'More than $1 M'; ?></td>
            <td><strong>۱:۱</strong></td>
            <td>-</td>
          </tr>
        </tbody>
      </table>
    </div>

  </div>
</div>

    <!-- ═══ MASTERPIECE: Execution DNA — Spread Visualiser ═══ -->
    <div class="ta-dna ta-reveal">
      <div class="ta-dna-inner">
        <div class="ta-dna-info">
          <div class="ta-dna-kicker"><?php echo $is_fa?'مقایسه زنده اسپرد':'LIVE SPREAD COMPARISON';?></div>
          <h3 class="ta-dna-title"><?php echo $is_fa?'چرا اسپرد <em>مهم است</em>':'Why Spreads <em>Matter</em>';?></h3>
          <p class="ta-dna-desc"><?php echo $is_fa?'هر ۰.۱ پیپ تفاوت در اسپرد، مستقیماً روی سود شما تأثیر می‌گذارد. حساب ECN ما با اسپرد از ۰.۰ پیپ، تا ۸۵٪ صرفه‌جویی نسبت به حساب استاندارد ارائه می‌دهد.':'Every 0.1 pip difference in spread directly impacts your profit. Our ECN account with spreads from 0.0 pips delivers up to 85% savings versus Standard.';?></p>
          <!-- Animated spread bars -->
          <div class="ta-dna-bars" id="ta-dna-bars">
            <?php
            $pairs = [
              ['EUR/USD', 1.2, 0.1, 92],
              ['GBP/USD', 1.5, 0.2, 87],
              ['USD/JPY', 1.3, 0.1, 92],
              ['XAU/USD', 3.5, 0.8, 77],
              ['NAS100',  2.0, 0.4, 80],
            ];
            foreach($pairs as $p): ?>
            <div class="ta-dna-bar">
              <div class="ta-dna-bar-head">
                <span class="ta-dna-bar-pair"><?php echo $p[0]; ?></span>
                <span><span class="ta-dna-bar-val std"><?php echo $p[1]; ?></span> <span style="color:rgba(255,255,255,.2);font-size:11px">vs</span> <span class="ta-dna-bar-val ecn"><?php echo $p[2]; ?></span></span>
              </div>
              <div class="ta-dna-bar-track">
                <div class="ta-dna-bar-fill std" data-width="<?php echo min($p[1]/4*100,100); ?>%" style="width:0"></div>
              </div>
              <div class="ta-dna-bar-track" style="margin-top:3px">
                <div class="ta-dna-bar-fill ecn" data-width="<?php echo min($p[2]/4*100,100); ?>%" style="width:0"></div>
              </div>
            </div>
            <?php endforeach; ?>
          </div>
          <div class="ta-dna-legend">
            <div class="ta-dna-legend-item"><div class="ta-dna-legend-dot" style="background:rgba(200,16,46,.6)"></div>Standard</div>
            <div class="ta-dna-legend-item"><div class="ta-dna-legend-dot" style="background:#14e0a3;box-shadow:0 0 6px rgba(20,224,163,.5)"></div>ECN</div>
            <div class="ta-dna-legend-item" style="margin-left:auto;font-size:10px;color:rgba(255,255,255,.25)"><?php echo $is_fa?'اسپرد به پیپ':'Spreads in pips';?></div>
          </div>
        </div>

        <!-- Canvas: animated waveform / DNA helix -->
        <div class="ta-dna-canvas-wrap">
          <canvas id="ta-dna-canvas"></canvas>
        </div>
      </div>
    </div>

    <!-- ═══ HOW TO OPEN ═══ -->
    <div class="ip-section-title ta-reveal"><?php echo $is_fa?'چگونه حساب باز کنیم':'How to <em>Open</em>';?></div>
    <div class="ip-steps ta-reveal d1">
      <?php $steps = $is_fa ? [
        ['۱','ثبت‌نام','پروفایل خود را به‌صورت آنلاین در کمتر از ۵ دقیقه تکمیل کنید.'],
        ['۲','احراز هویت KYC','مدرک شناسایی و آدرس خود را بارگذاری کنید. تایید در کمتر از ۲۴ ساعت.'],
        ['۳','واریز و شروع معامله','از طریق کارت، ارز دیجیتال یا بانک واریز کنید. فورا شروع به معامله کنید'],
      ] : [
        ['1','Register','Complete your STB profile online in under 5 minutes.'],
        ['2','Verify KYC','Upload your ID and proof of address. Approved within 24h.'],
        ['3','Fund & Trade','Deposit via card, crypto, or bank. Start trading instantly.'],
      ];
      foreach($steps as $s): ?>
      <div class="ip-step"><div class="ip-step-num"><?php echo $s[0];?></div><div class="ip-step-title"><?php echo $s[1];?></div><div class="ip-step-desc"><?php echo $s[2];?></div></div>
      <?php endforeach; ?>
    </div>

    <!-- ═══ FEATURE CARDS ═══ -->
    <div class="ip-cards ta-reveal" style="margin-bottom:0">
      <?php
      $features = $is_fa ? [
        ['<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" stroke-width="1.5"/>','محافظت از موجودی منفی','حساب شما هرگز به زیر صفر نمی‌رسد — حتی در نوسانات شدید.'],
        ['<path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" stroke-width="1.5" stroke-linecap="round"/>','۰.۱۲۵ ثانیه میانگین زمان اجرای سفارش','سریع‌ترین اجرای سفارش در تمامی انواع حساب‌ها و ابزارها'],
        ['<path d="M3 3v18h18" stroke-width="1.5"/><polyline points="7 16 11 10 15 14 19 7" stroke-width="1.5"/>','۳۵۰+ ابزار معاملاتی','فارکس، شاخص‌ها، کالاها، کریپتو و سهام از یک حساب.'],
        ['<path d="M22 12h-4l-3 9L9 3l-3 9H2" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>','اجرای NDD','بدون دخالت در قیمت. اجرای خالص بازار.'],
      ] : [
        ['<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" stroke-width="1.5"/>','Negative Balance Protection','Your account can never fall below zero — even in extreme volatility.'],
        ['<path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" stroke-width="1.5" stroke-linecap="round"/>','0.125s Avg Execution','Fastest execution across all account types and instruments.'],
        ['<path d="M3 3v18h18" stroke-width="1.5"/><polyline points="7 16 11 10 15 14 19 7" stroke-width="1.5"/>','500+ Instruments','Forex, indices, commodities, crypto, equities from one account.'],
        ['<path d="M22 12h-4l-3 9L9 3l-3 9H2" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>','NDD Execution','No dealing desk, no price manipulation. Pure market execution.'],
      ];
      foreach($features as $f): ?>
      <div class="ip-card ip-animate"><div class="ip-card-icon"><svg viewBox="0 0 24 24" stroke="currentColor" fill="none"><?php echo $f[0];?></svg></div><div class="ip-card-title"><?php echo $f[1];?></div><div class="ip-card-desc"><?php echo $f[2];?></div></div>
      <?php endforeach; ?>
    </div>

    <!-- ═══ CTA STRIP ═══ -->
    <div class="ip-cta-strip ta-reveal">
      <div class="ip-cta-strip-text">
        <h3><?php echo $is_fa?'آماده شروع معامله هستید؟':'Ready to start trading?';?></h3>
        <p><?php echo $is_fa?'حساب خود را در ۵ دقیقه باز کنید. بدون هزینه‌های پنهان. دمو فوری در دسترس است.':'Open your account in 5 minutes. No hidden fees. Instant demo available.';?></p>
      </div>
      <div class="ip-cta-strip-btns">
        <a href="<?php echo esc_html($register_label_url);?>" class="ip-btn-red"><?php echo $is_fa?'افتتاح حساب واقعی':'Open Live Account';?></a>
        <a href="<?php echo esc_html($register_label_url);?>" class="ip-btn-ghost"><?php echo $is_fa?'دمو رایگان':'Free Demo';?></a>
      </div>
    </div>
  </div>
</section>
</article>

<script>
(function(){
  /* ── Scroll Reveal ── */
  var obs = new IntersectionObserver(function(entries){
    entries.forEach(function(e){if(e.isIntersecting){e.target.classList.add('visible');obs.unobserve(e.target);}});
  },{threshold:0.12});
  document.querySelectorAll('.ta-reveal').forEach(function(el){obs.observe(el);});

  /* ── Counter Animation ── */
  document.querySelectorAll('.ta-counter').forEach(function(el){
    var target=parseFloat(el.dataset.target),decimals=parseInt(el.dataset.decimals)||0;
    var started=false;
    var cObs=new IntersectionObserver(function(entries){
      entries.forEach(function(e){
        if(e.isIntersecting&&!started){
          started=true;
          var start=0,duration=1200,startTime=null;
          function step(ts){
            if(!startTime)startTime=ts;
            var p=Math.min((ts-startTime)/duration,1);
            var eased=1-Math.pow(1-p,3);
            el.textContent=(eased*target).toFixed(decimals);
            if(p<1)requestAnimationFrame(step);
            else el.textContent=target.toFixed(decimals).replace(/\.0+$/,'');
          }
          requestAnimationFrame(step);
        }
      });
    },{threshold:0.5});
    cObs.observe(el);
  });

  /* ── Hero Particles ── */
  var pc=document.getElementById('ta-particles');
  if(pc){for(var i=0;i<20;i++){
    var p=document.createElement('div');p.className='ta-particle';
    p.style.left=Math.random()*100+'%';
    p.style.top=Math.random()*100+'%';
    p.style.animationDuration=(4+Math.random()*6)+'s';
    p.style.animationDelay=Math.random()*5+'s';
    p.style.width=p.style.height=(1+Math.random()*2)+'px';
    pc.appendChild(p);
  }}

  /* ── Spread Bars Animation ── */
  var barObs=new IntersectionObserver(function(entries){
    entries.forEach(function(e){
      if(e.isIntersecting){
        e.target.querySelectorAll('.ta-dna-bar-fill').forEach(function(bar){
          bar.style.width=bar.dataset.width;
        });
        barObs.unobserve(e.target);
      }
    });
  },{threshold:0.3});
  var barsEl=document.getElementById('ta-dna-bars');
  if(barsEl)barObs.observe(barsEl);

  /* ── DNA Helix Canvas Animation ── */
  var canvas=document.getElementById('ta-dna-canvas');
  if(canvas){
    var ctx=canvas.getContext('2d');
    var dpr=window.devicePixelRatio||1;
    var animId=null, isVisible=false;
    var observer = new IntersectionObserver(function(entries){
      entries.forEach(function(entry){
        isVisible = entry.isIntersecting;
        if(isVisible){
          if(!animId) animId = requestAnimationFrame(draw);
        } else {
          if(animId) {
            cancelAnimationFrame(animId);
            animId = null;
          }
        }
      });
    }, {threshold:0.01});
    function resize(){
      var rect=canvas.parentElement.getBoundingClientRect();
      canvas.width=rect.width*dpr;canvas.height=rect.height*dpr;
      canvas.style.width=rect.width+'px';canvas.style.height=rect.height+'px';
      ctx.setTransform(dpr,0,0,dpr,0,0);
    }
    resize();window.addEventListener('resize',resize);
    observer.observe(canvas);

    var t=0;
    function draw(){
      var w=canvas.width/dpr,h=canvas.height/dpr;
      ctx.clearRect(0,0,w,h);

      var cx=w/2,cy=h/2;
      var strands=2;
      var points=60;
      var radius=Math.min(w,h)*0.25;
      var vertSpread=h*0.7;

      // Draw connecting lines (rungs)
      for(var i=0;i<points;i++){
        var pct=i/points;
        var y=cy-vertSpread/2+pct*vertSpread;
        var angle=pct*Math.PI*4+t*0.02;
        var x1=cx+Math.sin(angle)*radius;
        var x2=cx+Math.sin(angle+Math.PI)*radius;
        var depth1=Math.cos(angle);
        var depth2=Math.cos(angle+Math.PI);

        // Rung
        ctx.beginPath();ctx.moveTo(x1,y);ctx.lineTo(x2,y);
        ctx.strokeStyle='rgba(200,16,46,'+(0.04+Math.abs(depth1)*0.06)+')';
        ctx.lineWidth=1;ctx.stroke();
      }

      // Draw the two helix strands
      for(var s=0;s<strands;s++){
        var offset=s*Math.PI;
        ctx.beginPath();
        for(var i=0;i<=points;i++){
          var pct=i/points;
          var y=cy-vertSpread/2+pct*vertSpread;
          var angle=pct*Math.PI*4+t*0.02+offset;
          var x=cx+Math.sin(angle)*radius;
          var depth=Math.cos(angle);
          if(i===0)ctx.moveTo(x,y);else ctx.lineTo(x,y);
        }
        var grad=ctx.createLinearGradient(0,cy-vertSpread/2,0,cy+vertSpread/2);
        if(s===0){
          grad.addColorStop(0,'rgba(200,16,46,.1)');
          grad.addColorStop(0.5,'rgba(200,16,46,.6)');
          grad.addColorStop(1,'rgba(200,16,46,.1)');
        }else{
          grad.addColorStop(0,'rgba(20,224,163,.1)');
          grad.addColorStop(0.5,'rgba(20,224,163,.5)');
          grad.addColorStop(1,'rgba(20,224,163,.1)');
        }
        ctx.strokeStyle=grad;ctx.lineWidth=2;ctx.stroke();

        // Draw nodes
        for(var i=0;i<points;i+=4){
          var pct=i/points;
          var y=cy-vertSpread/2+pct*vertSpread;
          var angle=pct*Math.PI*4+t*0.02+offset;
          var x=cx+Math.sin(angle)*radius;
          var depth=Math.cos(angle);
          var size=2+depth*1.5;
          if(size>0){
            ctx.beginPath();ctx.arc(x,y,size,0,Math.PI*2);
            ctx.fillStyle=s===0?'rgba(200,16,46,'+(0.3+depth*0.5)+')':'rgba(20,224,163,'+(0.3+depth*0.5)+')';
            ctx.fill();
          }
        }
      }

      // Central glow
      var grd=ctx.createRadialGradient(cx,cy,0,cx,cy,radius*1.5);
      grd.addColorStop(0,'rgba(200,16,46,.03)');grd.addColorStop(1,'transparent');
      ctx.fillStyle=grd;ctx.fillRect(0,0,w,h);

      t++;
      if(!isVisible){
        animId = null;
        return;
      }
      animId = requestAnimationFrame(draw);
    }
  }
})();
</script>
