<?php $lang=stb_lang(); $B='/NewSite'; $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>
.cs-hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#04060a}
.cs-grid-bg{position:absolute;inset:0;
  background-image:linear-gradient(rgba(20,224,163,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(20,224,163,.02) 1px,transparent 1px);
  background-size:45px 45px;mask-image:radial-gradient(ellipse 60% 60% at 50% 50%,black 20%,transparent 70%);
  animation:cs-drift 18s linear infinite;pointer-events:none}
@keyframes cs-drift{0%{transform:translate(0,0)}100%{transform:translate(45px,45px)}}
.cs-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:200px;height:200px;border-radius:50%;
  background:radial-gradient(circle,rgba(20,224,163,.08),transparent 65%);animation:cs-breathe 5s ease-in-out infinite;pointer-events:none}
@keyframes cs-breathe{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.5}50%{transform:translate(-50%,-50%) scale(1.4);opacity:1}}
.cs-glow-2{background:radial-gradient(circle,rgba(200,16,46,.06),transparent 65%);animation-delay:2.5s;width:160px;height:160px}
/* Floating product shapes */
.cs-shapes{position:absolute;inset:0;pointer-events:none}
.cs-shape{position:absolute;border:1px solid;border-radius:4px;animation:cs-shape-float ease-in-out infinite;opacity:.08}
@keyframes cs-shape-float{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(var(--dx,10px),var(--dy,-15px)) rotate(var(--rot,5deg))}}
.cs-center{position:relative;z-index:10;text-align:center;max-width:680px;padding:0 24px}
.cs-icon{width:80px;height:80px;border-radius:50%;margin:0 auto 24px;
  background:rgba(20,224,163,.06);border:2px solid rgba(20,224,163,.2);
  display:flex;align-items:center;justify-content:center;animation:cs-icon-glow 3s ease-in-out infinite;position:relative}
@keyframes cs-icon-glow{0%,100%{box-shadow:0 0 0 0 rgba(20,224,163,.15)}50%{box-shadow:0 0 40px rgba(20,224,163,.12)}}
.cs-icon svg{stroke:#14e0a3;fill:none;width:36px;height:36px}
.cs-icon::before,.cs-icon::after{content:'';position:absolute;width:8px;height:8px;border-radius:50%;animation:cs-orbit 5s linear infinite}
.cs-icon::before{background:#C8102E;box-shadow:0 0 8px rgba(200,16,46,.6);top:-4px}
.cs-icon::after{background:#14e0a3;box-shadow:0 0 8px rgba(20,224,163,.6);bottom:-4px;animation-delay:-2.5s}
@keyframes cs-orbit{0%{transform:rotate(0) translateX(48px) rotate(0)}100%{transform:rotate(360deg) translateX(48px) rotate(-360deg)}}
.cs-badge{display:inline-flex;align-items:center;gap:8px;padding:7px 18px;border-radius:30px;
  background:rgba(20,224,163,.06);border:1px solid rgba(20,224,163,.2);
  font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#14e0a3;
  margin-bottom:24px;animation:cs-badge-glow 3s ease-in-out infinite}
@keyframes cs-badge-glow{0%,100%{box-shadow:none}50%{box-shadow:0 0 24px rgba(20,224,163,.1)}}
.cs-badge::before{content:'';width:7px;height:7px;border-radius:50%;background:#14e0a3;animation:cs-bdot 2s infinite}
@keyframes cs-bdot{0%,100%{box-shadow:0 0 4px #14e0a3}50%{box-shadow:0 0 12px rgba(20,224,163,.8)}}
.cs-title{font-size:clamp(32px,5.5vw,58px);font-weight:900;color:#fff;line-height:1.08;margin-bottom:16px;letter-spacing:-.03em}
.cs-title em{font-style:normal;color:#14e0a3}
.cs-sub{font-size:clamp(15px,1.8vw,18px);color:rgba(255,255,255,.38);line-height:1.65;margin-bottom:36px;max-width:520px;margin-left:auto;margin-right:auto}
.cs-features{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:36px}
.cs-feat{padding:14px 20px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);
  min-width:160px;text-align:center;transition:all .25s}
.cs-feat:hover{border-color:rgba(20,224,163,.25);transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.4)}
.cs-feat-icon{margin-bottom:8px}
.cs-feat-icon svg{stroke:var(--fc,#14e0a3);fill:none;width:24px;height:24px}
.cs-feat-title{font-size:13px;font-weight:700;color:#fff;margin-bottom:3px}
.cs-feat-desc{font-size:11px;color:rgba(255,255,255,.3)}
.cs-ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.cs-btn-primary{padding:13px 32px;border-radius:12px;font-size:14px;font-weight:700;
  background:linear-gradient(135deg,#14e0a3,#0fb88a);color:#04120e;text-decoration:none;
  box-shadow:0 4px 24px rgba(20,224,163,.25);transition:all .25s;position:relative;overflow:hidden}
.cs-btn-primary::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);
  transform:translateX(-100%);transition:transform .6s}
.cs-btn-primary:hover::before{transform:translateX(100%)}
.cs-btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(20,224,163,.35);color:#04120e}
.cs-btn-ghost{padding:13px 28px;border-radius:12px;font-size:14px;font-weight:600;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.65);text-decoration:none;transition:all .2s}
.cs-btn-ghost:hover{color:#fff;border-color:rgba(255,255,255,.3)}
.cs-rev{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.cs-rev.vis{opacity:1;transform:none}
.cs-rev.d1{transition-delay:.15s}.cs-rev.d2{transition-delay:.3s}
/* Preview section */
.cs-preview{background:#06080c;padding:80px 0;position:relative;overflow:hidden}
.cs-preview::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(20,224,163,.3),transparent)}
.cs-preview-inner{max-width:1100px;margin:0 auto;padding:0 40px}
@media(max-width:768px){.cs-preview-inner{padding:0 20px}}
.cs-prev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:700px){.cs-prev-grid{grid-template-columns:1fr}}
.cs-prev-card{background:#0a0c10;border:1px solid rgba(255,255,255,.06);border-radius:18px;padding:32px 26px;
  text-align:center;transition:all .35s;position:relative;overflow:hidden}
.cs-prev-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--pc,#14e0a3);
  transform:scaleX(0);transform-origin:center;transition:transform .4s cubic-bezier(.16,1,.3,1)}
.cs-prev-card:hover{border-color:rgba(255,255,255,.12);transform:translateY(-5px);box-shadow:0 20px 50px rgba(0,0,0,.5)}
.cs-prev-card:hover::before{transform:scaleX(1)}
.cs-prev-icon{width:56px;height:56px;border-radius:14px;margin:0 auto 18px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);
  display:flex;align-items:center;justify-content:center}
.cs-prev-icon svg{stroke:var(--pc,#14e0a3);fill:none;width:26px;height:26px}
.cs-prev-title{font-size:17px;font-weight:800;color:#fff;margin-bottom:8px}
.cs-prev-desc{font-size:13px;color:rgba(255,255,255,.38);line-height:1.65}
.cs-prev-tag{display:inline-block;margin-top:14px;padding:3px 10px;border-radius:5px;
  font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  background:rgba(20,224,163,.06);border:1px solid rgba(20,224,163,.15);color:#14e0a3}
</style>
<article class="ip-page" style="background:#04060a">
<div class="cs-hero">
  <div class="cs-grid-bg"></div>
  <div class="cs-glow"></div><div class="cs-glow cs-glow-2"></div>
  <div class="cs-shapes" id="cs-shapes"></div>
  <div class="cs-center">
    <div class="cs-icon"><svg viewBox="0 0 24 24"><path d="M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z" stroke-width="1.5"/><line x1="3" y1="6" x2="21" y2="6" stroke-width="1.5"/><path d="M16 10a4 4 0 01-8 0" stroke-width="1.5"/></svg></div>
    <div class="cs-badge"><?php echo $fa?'به زودی':'COMING SOON';?></div>
    <h1 class="cs-title"><?php echo $fa?'بازار <em>جامعه</em> STB':'STB Community <em>Marketplace</em>';?></h1>
    <p class="cs-sub"><?php echo $fa?'بازار اختصاصی انجمن STB. اکسپرتها،اندیکاتورها، سیگنال‌ها و ابزارهای معاملاتی — خرید و فروش بین اعضا':'The exclusive STB community marketplace. Expert advisors, indicators, signals, and trading tools — buy and sell between members.';?></p>
    <div class="cs-features">
      <?php $feats = $fa ? [
        ['#14e0a3','<path d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" stroke-width="1.5" stroke-linecap="round"/>','اکسپرت‌ها (EA)','ربات‌های معاملاتی MQL5'],
        ['#C8102E','<path d="M22 12h-4l-3 9L9 3l-3 9H2" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>','اندیکاتورها','ابزارهای تحلیل تکنیکال'],
        ['#14e0a3','<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" stroke-width="1.5"/>','سیگنال‌ها','سیگنال معاملاتی حرفه‌ای'],
      ] : [
        ['#14e0a3','<path d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" stroke-width="1.5" stroke-linecap="round"/>','Expert Advisors','MQL5 trading bots'],
        ['#C8102E','<path d="M22 12h-4l-3 9L9 3l-3 9H2" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>','Indicators','Technical analysis tools'],
        ['#14e0a3','<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" stroke-width="1.5"/>','Signals','Professional trading signals'],
      ];
      foreach($feats as $f): ?>
      <div class="cs-feat" style="--fc:<?php echo $f[0]; ?>">
        <div class="cs-feat-icon"><svg viewBox="0 0 24 24"><?php echo $f[1]; ?></svg></div>
        <div class="cs-feat-title"><?php echo $f[2]; ?></div>
        <div class="cs-feat-desc"><?php echo $f[3]; ?></div>
      </div>
      <?php endforeach; ?>
    </div>
    <div class="cs-ctas">
      <a href="<?php echo esc_html($register_label_url);?>" class="cs-btn-primary"><?php echo $fa?'ثبت‌نام و اطلاع‌رسانی':'Register & Get Notified';?></a>
      <a href="<?php echo stb_url($B.'/ambassador/'); ?>" class="cs-btn-ghost"><?php echo $fa?'سفیر برند شوید':'Become Ambassador';?></a>
    </div>
  </div>
</div>
<!-- Preview -->
<div class="cs-preview">
  <div class="cs-preview-inner">
    <div class="ip-section-title cs-rev" style="text-align:center"><?php echo $fa?'چه چیزی در <em>راه است</em>':'What\'s <em>Coming</em>';?></div>
    <p style="font-size:14px;color:rgba(255,255,255,.3);text-align:center;margin-bottom:40px;line-height:1.6" class="cs-rev d1"><?php echo $fa?'ویژگی‌هایی که تیم ما در حال ساخت آن‌هاست.':'Features our team is building for you.';?></p>
    <div class="cs-prev-grid">
      <?php $prev = $fa ? [
        ['#14e0a3','<path d="M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z" stroke-width="1.5"/><line x1="3" y1="6" x2="21" y2="6" stroke-width="1.5"/><path d="M16 10a4 4 0 01-8 0" stroke-width="1.5"/>',
         'بازار P2P','اعضای انجمن می‌توانند اکسپرتها،اندیکاتورها و استراتژی‌ها را خرید و فروش کنند.'],
        ['#C8102E','<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" stroke-width="1.5"/>',
         'تأیید کیفیت','همه محصولات قبل از انتشار توسط تیم STB بررسی و تأیید می‌شوند.'],
        ['#14e0a3','<path d="M12 2v20M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6" stroke-width="1.5" stroke-linecap="round"/>',
         'پرداخت امن','سیستم پرداخت یکپارچه با محافظت از خریدار و فروشنده.'],
      ] : [
        ['#14e0a3','<path d="M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z" stroke-width="1.5"/><line x1="3" y1="6" x2="21" y2="6" stroke-width="1.5"/><path d="M16 10a4 4 0 01-8 0" stroke-width="1.5"/>',
         'P2P Marketplace','Community members can sell or buy expert advisors, indicators, and strategies.'],
        ['#C8102E','<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" stroke-width="1.5"/>',
         'Quality Verified','All products reviewed and approved by the STB team before listing.'],
        ['#14e0a3','<path d="M12 2v20M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6" stroke-width="1.5" stroke-linecap="round"/>',
         'Secure Payments','Integrated payment system with buyer and seller protection.'],
      ];
      foreach($prev as $i=>$p): ?>
      <div class="cs-prev-card cs-rev d<?php echo $i+1; ?>" style="--pc:<?php echo $p[0]; ?>">
        <div class="cs-prev-icon"><svg viewBox="0 0 24 24"><?php echo $p[1]; ?></svg></div>
        <div class="cs-prev-title"><?php echo $p[2]; ?></div>
        <div class="cs-prev-desc"><?php echo $p[3]; ?></div>
        <div class="cs-prev-tag"><?php echo $fa?'در حال توسعه':'IN DEVELOPMENT';?></div>
      </div>
      <?php endforeach; ?>
    </div>
  </div>
</div>
</article>
<script>
(function(){
  var nd=document.getElementById('cs-shapes');
  if(nd){for(var i=0;i<8;i++){var s=document.createElement('div');s.className='cs-shape';
    var sz=20+Math.random()*40;s.style.cssText='left:'+Math.random()*90+'%;top:'+Math.random()*90+'%;width:'+sz+'px;height:'+sz+'px;border-color:rgba('+(Math.random()>.5?'20,224,163':'200,16,46')+',0.15);--dx:'+(Math.random()*20-10)+'px;--dy:'+(Math.random()*20-10)+'px;--rot:'+(Math.random()*10-5)+'deg;animation-duration:'+(5+Math.random()*8)+'s;animation-delay:'+(-Math.random()*5)+'s';
    nd.appendChild(s)}}
  var obs=new IntersectionObserver(function(e){e.forEach(function(en){if(en.isIntersecting){en.target.classList.add('vis');obs.unobserve(en.target)}})},{threshold:.1});
  document.querySelectorAll('.cs-rev').forEach(function(el){obs.observe(el)});
})();
</script>
