<?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>
.mp-hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;
  overflow:hidden;background:#04060a}
.mp-grid-bg{position:absolute;inset:0;
  background-image:linear-gradient(rgba(200,16,46,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(200,16,46,.02) 1px,transparent 1px);
  background-size:50px 50px;mask-image:radial-gradient(ellipse 60% 60% at 50% 50%,black 20%,transparent 75%);
  animation:mp-drift 20s linear infinite;pointer-events:none}
@keyframes mp-drift{0%{transform:translate(0,0)}100%{transform:translate(50px,50px)}}
.mp-orb{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:200px;height:200px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(200,16,46,.08),transparent 65%);
  animation:mp-breathe 5s ease-in-out infinite}
@keyframes mp-breathe{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.5}50%{transform:translate(-50%,-50%) scale(1.4);opacity:1}}
.mp-orb-2{background:radial-gradient(circle,rgba(20,224,163,.06),transparent 65%);animation-delay:2.5s;width:160px;height:160px}
/* Floating shop items */
.mp-floats{position:absolute;inset:0;pointer-events:none}
.mp-float{position:absolute;font-size:20px;opacity:.08;animation:mp-float-move ease-in-out infinite}
@keyframes mp-float-move{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(var(--dx),var(--dy)) rotate(10deg)}}
/* Rings */
.mp-rings{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none}
.mp-ring{position:absolute;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%)}
.mp-ring-1{width:280px;height:280px;border:1px solid rgba(200,16,46,.06);animation:mp-spin 30s linear infinite}
.mp-ring-2{width:450px;height:450px;border:1px solid rgba(20,224,163,.04);animation:mp-spin 40s linear infinite reverse}
@keyframes mp-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.mp-ring::after{content:'';position:absolute;width:6px;height:6px;border-radius:50%;top:-3px;left:50%}
.mp-ring-1::after{background:#C8102E;box-shadow:0 0 10px rgba(200,16,46,.6)}
.mp-ring-2::after{background:#14e0a3;box-shadow:0 0 10px rgba(20,224,163,.6)}

.mp-center{position:relative;z-index:10;text-align:center;max-width:680px;padding:0 24px}
.mp-icon-wrap{width:80px;height:80px;border-radius:50%;margin:0 auto 24px;
  background:rgba(200,16,46,.06);border:2px solid rgba(200,16,46,.2);
  display:flex;align-items:center;justify-content:center;
  animation:mp-icon-glow 3s ease-in-out infinite;position:relative}
@keyframes mp-icon-glow{0%,100%{box-shadow:0 0 0 0 rgba(200,16,46,.15)}50%{box-shadow:0 0 40px rgba(200,16,46,.12)}}
.mp-icon-wrap svg{stroke:#C8102E;fill:none;width:36px;height:36px}
.mp-icon-wrap::before,.mp-icon-wrap::after{content:'';position:absolute;width:8px;height:8px;border-radius:50%;
  animation:mp-orbit 4s linear infinite}
.mp-icon-wrap::before{background:#14e0a3;box-shadow:0 0 8px rgba(20,224,163,.6)}
.mp-icon-wrap::after{background:#C8102E;box-shadow:0 0 8px rgba(200,16,46,.6);animation-delay:-2s}
@keyframes mp-orbit{0%{transform:rotate(0) translateX(48px) rotate(0)}100%{transform:rotate(360deg) translateX(48px) rotate(-360deg)}}

.mp-badge{display:inline-flex;align-items:center;gap:8px;padding:7px 18px;border-radius:30px;
  background:rgba(200,16,46,.06);border:1px solid rgba(200,16,46,.2);
  font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#C8102E;
  margin-bottom:24px;animation:mp-badge-glow 3s ease-in-out infinite}
@keyframes mp-badge-glow{0%,100%{box-shadow:none}50%{box-shadow:0 0 24px rgba(200,16,46,.1)}}
.mp-badge::before{content:'';width:7px;height:7px;border-radius:50%;background:#C8102E;animation:mp-bdot 2s infinite}
@keyframes mp-bdot{0%,100%{box-shadow:0 0 4px rgba(200,16,46,.4)}50%{box-shadow:0 0 12px rgba(200,16,46,.8)}}
.mp-title{font-size:clamp(32px,5.5vw,58px);font-weight:900;color:#fff;line-height:1.08;margin-bottom:16px;letter-spacing:-.03em}
.mp-title em{font-style:normal;background:linear-gradient(135deg,#C8102E,#14e0a3);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.mp-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}
.mp-features{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:36px}
.mp-feat{padding:12px 20px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);
  text-align:center;min-width:140px;transition:all .25s}
.mp-feat:hover{border-color:rgba(200,16,46,.25);transform:translateY(-2px)}
.mp-feat-icon{font-size:24px;margin-bottom:6px}
.mp-feat-title{font-size:12px;font-weight:700;color:rgba(255,255,255,.6)}
.mp-feat-sub{font-size:10px;color:rgba(255,255,255,.25)}
.mp-ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.mp-btn{padding:13px 32px;border-radius:12px;font-size:14px;font-weight:700;text-decoration:none;transition:all .25s;position:relative;overflow:hidden}
.mp-btn-primary{background:linear-gradient(135deg,#C8102E,#a00d24);color:#fff;box-shadow:0 4px 24px rgba(200,16,46,.25)}
.mp-btn-primary::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);transform:translateX(-100%);transition:transform .6s}
.mp-btn-primary:hover::before{transform:translateX(100%)}
.mp-btn-primary:hover{transform:translateY(-2px);color:#fff}
.mp-btn-ghost{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.65)}
.mp-btn-ghost:hover{color:#fff;border-color:rgba(255,255,255,.3)}
/* Scroll reveal */
.mp-rev{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.mp-rev.vis{opacity:1;transform:none}
.mp-rev.d1{transition-delay:.15s}.mp-rev.d2{transition-delay:.3s}
/* Preview section */
.mp-preview{background:#06080c;padding:80px 0;position:relative;overflow:hidden}
.mp-preview::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(200,16,46,.3),transparent)}
.mp-preview-inner{max-width:1000px;margin:0 auto;padding:0 40px}
@media(max-width:768px){.mp-preview-inner{padding:0 20px}}
.mp-prev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:700px){.mp-prev-grid{grid-template-columns:1fr}}
.mp-prev-card{background:#0a0c10;border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:28px;text-align:center;transition:all .3s}
.mp-prev-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--pc,#C8102E);transform:scaleX(0);transform-origin:center;transition:transform .4s}
.mp-prev-card:hover{border-color:rgba(255,255,255,.12);transform:translateY(-4px)}
.mp-prev-card:hover::before{transform:scaleX(1)}
.mp-prev-card{position:relative;overflow:hidden}
.mp-prev-icon{width:52px;height:52px;border-radius:13px;margin:0 auto 16px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center}
.mp-prev-icon svg{stroke:var(--pc,#C8102E);fill:none;width:24px;height:24px}
.mp-prev-title{font-size:16px;font-weight:700;color:#fff;margin-bottom:6px}
.mp-prev-desc{font-size:12.5px;color:rgba(255,255,255,.35);line-height:1.6}
.mp-prev-tag{display:inline-block;margin-top:12px;padding:3px 10px;border-radius:5px;font-size:9px;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="mp-hero">
  <div class="mp-grid-bg"></div>
  <div class="mp-orb"></div><div class="mp-orb mp-orb-2"></div>
  <div class="mp-rings"><div class="mp-ring mp-ring-1"></div><div class="mp-ring mp-ring-2"></div></div>
  <div class="mp-floats" id="mp-floats"></div>

  <div class="mp-center">
    <div class="mp-icon-wrap">
      <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="mp-badge"><?php echo $fa?'به زودی':'COMING SOON';?></div>
    <h1 class="mp-title"><?php echo $fa?'فروشگاه<br><em>جامعه STB</em>':'STB Society<br><em>Marketplace</em>';?></h1>
    <p class="mp-sub"><?php echo $fa?'یک بازار اختصاصی برای اعضای جامعه STB. اکسپرت‌ها، اندیکاتورها، سیگنال‌ها و خدمات معاملاتی — همه در یک پلتفرم امن.':'An exclusive marketplace for STB community members. Expert advisors, indicators, signals, and trading services — all on one secure platform.';?></p>

    <div class="mp-features">
      <?php $feats = $fa ? [
        ['🤖','اکسپرت ادوایزرها','EA و ربات‌های معاملاتی'],
        ['📊','اندیکاتورهای سفارشی','ابزارهای تحلیل تکنیکال'],
        ['📡','سیگنال‌های معاملاتی','اشتراک سیگنال زنده'],
        ['🎓','دوره‌های آموزشی','محتوای پریمیوم'],
      ] : [
        ['🤖','Expert Advisors','Trading bots & EAs'],
        ['📊','Custom Indicators','Technical analysis tools'],
        ['📡','Trading Signals','Live signal subscriptions'],
        ['🎓','Premium Courses','Educational content'],
      ];
      foreach($feats as $f): ?>
      <div class="mp-feat">
        <div class="mp-feat-icon"><?php echo $f[0]; ?></div>
        <div class="mp-feat-title"><?php echo $f[1]; ?></div>
        <div class="mp-feat-sub"><?php echo $f[2]; ?></div>
      </div>
      <?php endforeach; ?>
    </div>

    <div class="mp-ctas">
      <a href="<?php echo esc_html($register_label_url);?>" class="mp-btn mp-btn-primary"><?php echo $fa?'ثبت‌نام و اطلاع‌رسانی':'Register & Get Notified';?></a>
      <a href="<?php echo stb_url($B.'/ambassador/'); ?>" class="mp-btn mp-btn-ghost"><?php echo $fa?'سفیر برند شوید':'Become Ambassador';?></a>
    </div>
  </div>
</div>

<div class="mp-preview">
  <div class="mp-preview-inner">
    <div class="ip-section-title mp-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="mp-rev d1"><?php echo $fa?'ویژگی‌هایی که تیم ما در حال ساخت آنهاست.':'Features our team is building for you.';?></p>
    <div class="mp-prev-grid">
      <?php $prev = $fa ? [
        ['#C8102E','<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"/>',
         'فروشگاه محصولات','خرید و فروش اکسپرت‌ها، اندیکاتورها و ابزارهای معاملاتی با پرداخت امن.'],
        ['#14e0a3','<path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2" stroke-width="1.5"/><circle cx="9" cy="7" r="4" stroke-width="1.5"/><path d="M23 21v-2a4 4 0 00-3-3.87" stroke-width="1.5"/>',
         'پروفایل فروشندگان','فروشندگان با سابقه تأیید شده. امتیازدهی و نظرات خریداران.'],
        ['#C8102E','<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" stroke-width="1.5"/>',
         'پرداخت امن','تراکنش‌ها از طریق سیستم امن STB پردازش می‌شوند. ضمانت بازگشت وجه.'],
      ] : [
        ['#C8102E','<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"/>',
         'Product Store','Buy and sell EAs, indicators, and trading tools with secure payments.'],
        ['#14e0a3','<path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2" stroke-width="1.5"/><circle cx="9" cy="7" r="4" stroke-width="1.5"/><path d="M23 21v-2a4 4 0 00-3-3.87" stroke-width="1.5"/>',
         'Verified Sellers','Sellers with verified track records. Buyer ratings and reviews.'],
        ['#C8102E','<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" stroke-width="1.5"/>',
         'Secure Payments','Transactions processed through STB\'s secure system. Money-back guarantee.'],
      ];
      foreach($prev as $i=>$p): ?>
      <div class="mp-prev-card mp-rev d<?php echo $i+1; ?>" style="--pc:<?php echo $p[0]; ?>">
        <div class="mp-prev-icon"><svg viewBox="0 0 24 24"><?php echo $p[1]; ?></svg></div>
        <div class="mp-prev-title"><?php echo $p[2]; ?></div>
        <div class="mp-prev-desc"><?php echo $p[3]; ?></div>
        <div class="mp-prev-tag"><?php echo $fa?'در حال توسعه':'IN DEVELOPMENT';?></div>
      </div>
      <?php endforeach; ?>
    </div>
  </div>
</div>
</article>

<script>
(function(){
  /* Floating shop emojis */
  var fl=document.getElementById('mp-floats');
  if(fl){var items=['💎','📈','🔑','⚡','🛡️','💰','📊','🤖'];
    for(var i=0;i<8;i++){var d=document.createElement('div');d.className='mp-float';d.textContent=items[i];
      d.style.cssText='left:'+Math.random()*85+'%;top:'+Math.random()*85+'%;--dx:'+(Math.random()*30-15)+'px;--dy:'+(Math.random()*30-15)+'px;animation-duration:'+(5+Math.random()*8)+'s;animation-delay:'+(-Math.random()*5)+'s;font-size:'+(16+Math.random()*14)+'px';
      fl.appendChild(d);}}
  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('.mp-rev').forEach(function(el){obs.observe(el)});
})();
</script>
