<?php $lang = stb_lang();
$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/';
?>
<section class="hero-wrap" id="hero" aria-label="STB Hero">
<style>
/* ═══════════════════════════════════════════════════
   STB HERO — 5-Slide Futuristic Slider
   Colors: #C8102E red, #14e0a3 green, #060809 bg
═══════════════════════════════════════════════════ */
:root{
  --hs-red:#C8102E;--hs-green:#14e0a3;
  --hs-bg:#060809;--hs-dur:.8s;
}
.hero-wrap{
  position:relative;
  width:100%;height:100vh;min-height:720px;max-height:960px;
  overflow:hidden;background:var(--hs-bg);
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M 80 0 L 0 0 0 80' fill='none' stroke='rgba(255, 255, 255, 0.015)' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 80px 80px;
}
.hero-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='2' cy='2' r='0.75' fill='rgba(255, 255, 255, 0.02)'/%3E%3C/svg%3E");
  background-size: 20px 20px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 50%, black 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 50%, black 20%, transparent 75%);
  z-index: 1;
  pointer-events: none;
}
@media(min-width:961px){
  .hero-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(to bottom, rgba(6,8,9,0.15) 0%, rgba(6,8,9,0.85) 100%), url('<?php echo esc_url(get_template_directory_uri() . '/assets/images/hero.webp'); ?>');
    background-size: cover;
    background-position: center;
    opacity: 0.22;
    z-index: 0;
    pointer-events: none;
  }
  body.rtl .hero-wrap::before {
    transform: scaleX(-1);
  }
}

/* ── Canvas layers ── */
.hero-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}

/* ── Slides container ── */
.hero-slides{position:absolute;inset:0;z-index:2}
.hero-slide{
  position:absolute;inset:0;
  display:flex;align-items:center;
  opacity:0;pointer-events:none;
  transition:opacity var(--hs-dur) cubic-bezier(.4,0,.2,1);
}
.hero-slide.active{opacity:1;pointer-events:auto}

/* ── Slide bg glow ── */
.hero-slide-glow{
  position:absolute;inset:0;pointer-events:none;
  transition:opacity var(--hs-dur);
  display: none;
}

/* ── Inner layout ── */
.hero-inner{
  max-width:1280px;margin:0 auto;padding:0 48px;
  width:100%;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;align-items:center;
  position:relative;z-index:1;
  /* Centre vertically accounting for nav dots at bottom */
  padding-bottom:80px;
}
@media(min-width:961px){
  .hero-inner{
    grid-template-columns: 45% 55%;
  }
}
@media(max-width:960px){
  .hero-inner{grid-template-columns:1fr;gap:24px;padding:80px 24px 130px;text-align:center;align-content:center}
  .hero-right{display:flex;justify-content:center}
}

/* ── Left: text content ── */
.hero-left{display:flex;flex-direction:column;gap:0}

/* Division tag */
.hero-div-tag{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 14px;border-radius:20px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sc,#C8102E);
  width:fit-content;margin-bottom:24px;
  transition:color var(--hs-dur),border-color var(--hs-dur);
}
.hero-div-tag-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--sc,#C8102E);
  animation:hero-blink 1.6s ease-in-out infinite;
}
@keyframes hero-blink{0%,100%{opacity:1;box-shadow:0 0 6px var(--sc,#C8102E)}50%{opacity:.3;box-shadow:none}}

/* Main headline */
.hero-headline{
  font-family:'Bebas Neue','IBM Plex Sans',sans-serif;
  font-size:clamp(52px,7vw,96px);
  line-height:.95;letter-spacing:.02em;
  color:#fff;margin-bottom:8px;
}
body.lang-fa .hero-headline,body.lang-ar .hero-headline{
  font-family:'Vazirmatn','IBM Plex Sans',sans-serif;
  font-size:clamp(38px,5.5vw,72px);letter-spacing:0;line-height:1.1;
}
.hero-headline-accent{
  display:block;
  color:var(--sc,#C8102E);
  transition:color var(--hs-dur);
}

/* Sub headline */
.hero-sub{
  font-size:clamp(16px,1.8vw,20px);font-weight:400;
  color:rgba(255,255,255,.5);margin-bottom:28px;
  line-height:1.5;max-width:480px;
}
@media(max-width:960px){.hero-sub{margin:0 auto 28px}}

/* Description */
.hero-desc{
  font-size:15px;line-height:1.75;
  color:rgba(255,255,255,.42);
  max-width:480px;margin-bottom:36px;
}
@media(max-width:960px){.hero-desc{margin:0 auto 36px}}

/* Stats strip */
.hero-stats{
  display:flex;gap:32px;flex-wrap:wrap;
  margin-bottom:36px;
}
@media(max-width:960px){.hero-stats{justify-content:center}}
.hero-stat-val{
  font-size:26px;font-weight:700;color:#fff;
  letter-spacing:-.02em;line-height:1;margin-bottom:3px;
  font-variant-numeric:tabular-nums;
}
.hero-stat-val em{font-style:normal;color:var(--sc,#C8102E);font-size:18px}
.hero-stat-label{font-size:11px;color:rgba(255,255,255,.35);text-transform:uppercase;letter-spacing:.08em}

/* CTA buttons */
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
@media(max-width:960px){.hero-ctas{justify-content:center}}
.hero-cta-primary{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 32px;border-radius:50px;
  font-size:15px;font-weight:700;
  background:var(--sc,#C8102E);color:#fff;
  text-decoration:none;border:none;cursor:pointer;
  box-shadow:0 4px 20px rgba(0,0,0,.3),0 0 15px var(--sc);
  transition:filter .25s,transform .2s var(--ease),background var(--hs-dur),box-shadow .25s;
}
.hero-cta-primary:hover{filter:brightness(1.12);transform:translateY(-2px);color:#fff;
  box-shadow:0 8px 30px rgba(0,0,0,.4),0 0 25px var(--sc);}
.hero-cta-primary svg{stroke:#fff;fill:none;width:16px;height:16px}
.hero-cta-ghost{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 28px;border-radius:50px;font-size:15px;font-weight:600;
  color:rgba(255,255,255,.7);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  text-decoration:none;transition:all .25s var(--ease);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.hero-cta-ghost:hover{color:#fff;border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.1);transform:translateY(-2px)}

/* ── RIGHT: visual panel ── */
.hero-right{
  display:flex;align-items:center;justify-content:flex-end;
  position:relative;
}
@media(min-width:961px){
  .hero-right{
    align-self:end;
    width:100%;
    max-width:680px;
  }
}
.hero-panel{
  width:100%;max-width:460px;
  background:rgba(13,15,17,.65);
  border:1px solid rgba(255,255,255,.08);
  border-radius:28px;
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  overflow:hidden;
  box-shadow:0 40px 80px rgba(0,0,0,.7), 0 0 30px rgba(255,255,255,.02);
  position:relative;
}
@media(min-width:961px){
  .hero-panel{
    max-width:680px;
  }
  .broker-panel-layout {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 24px;
    align-items: center;
  }
  .broker-prices-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 24px;
  }
  .inv-panel-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 24px;
  }
  .acd-panel-layout {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 24px;
    align-items: center;
  }
  .soc-panel-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
}ns: 1fr 1fr;
    gap: 0 24px;
  }
  .acd-panel-layout {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 24px;
    align-items: center;
  }
  .soc-panel-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
}
/* Panel top accent */
.hero-panel::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--sc,#C8102E),transparent);
  transition:background var(--hs-dur);
}
.hero-panel-bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 20px;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.02);
}
.hero-panel-title{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.3)}
.hero-panel-live{
  display:flex;align-items:center;gap:5px;
  font-size:10.5px;font-weight:700;color:var(--sc,#C8102E);
  transition:color var(--hs-dur);
}
.hero-panel-live::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--sc,#C8102E);animation:hero-blink 1.6s infinite;transition:background var(--hs-dur)}
.hero-panel-body{
  padding:20px;
  position:relative;
  z-index:1;
}
.hero-panel-body::before, .hero-panel-body::after {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  border-color: rgba(255, 255, 255, 0.08);
  border-style: solid;
  pointer-events: none;
  transition: border-color var(--hs-dur) var(--ease);
}
.hero-panel-body::before {
  top: 10px; left: 10px;
  border-width: 1.5px 0 0 1.5px;
}
.hero-panel-body::after {
  bottom: 10px; right: 10px;
  border-width: 0 1.5px 1.5px 0;
}
.hero-slide.active .hero-panel-body::before,
.hero-slide.active .hero-panel-body::after {
  border-color: var(--sc);
}
body.rtl .hero-panel-body::before {
  left: auto; right: 10px;
  border-width: 1.5px 1.5px 0 0;
}
body.rtl .hero-panel-body::after {
  right: auto; left: 10px;
  border-width: 0 0 1.5px 1.5px;
}

/* ── NAVIGATION ── */
.hero-nav{
  position:absolute;bottom:24px;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:12px;z-index:10;
}
@media(max-width:960px){.hero-nav{bottom:14px;gap:6px;background:rgba(4,6,10,.75);padding:10px 16px;border-radius:40px;backdrop-filter:blur(12px);box-shadow:0 2px 20px rgba(0,0,0,.5)}}
/* Slide dots */
.hero-dots{display:flex;gap:8px;align-items:center}
.hero-dot{
  width:28px;height:3px;border-radius:2px;
  background:rgba(255,255,255,.15);border:none;cursor:pointer;padding:0;
  transition:background .3s,width .3s,transform .2s;
  position:relative;overflow:hidden;
}
.hero-dot.active{width:56px;background:rgba(255,255,255,.25)}
.hero-dot.active::after{
  content:'';position:absolute;top:0;left:0;height:100%;width:0;
  background:var(--sc-active,#C8102E);
  animation:hero-progress var(--slide-dur,6s) linear forwards;
}
@keyframes hero-progress{to{width:100%}}

/* Prev/Next arrows */
.hero-arrow{
  width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background .15s,border-color .15s;
}
.hero-arrow:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25)}
.hero-arrow svg{stroke:rgba(255,255,255,.6);fill:none;width:16px;height:16px}

/* Slide counter */
.hero-counter{
  font-size:12px;font-weight:600;color:rgba(255,255,255,.3);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}

/* ── Scroll hint ── */
.hero-scroll{
  position:absolute;bottom:36px;right:48px;
  display:flex;align-items:center;gap:8px;
  font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.2);z-index:10;
  animation:hero-scroll-hint 2.5s ease-in-out infinite;
}
@keyframes hero-scroll-hint{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
.hero-scroll svg{stroke:currentColor;fill:none;width:16px;height:16px}
@media(max-width:960px){.hero-scroll{display:none}}

/* ── Slide-specific visual elements ── */

/* BROKER — chart bars */
.broker-chart{display:flex;gap:6px;align-items:flex-end;height:100px;padding:12px 0}
.broker-bar{
  flex:1;border-radius:4px 4px 0 0;
  background:linear-gradient(180deg,rgba(200,16,46,.8),rgba(200,16,46,.2));
  animation:broker-bar-grow 1s var(--d,0s) cubic-bezier(.16,1,.3,1) both;
  position:relative;
}
@keyframes broker-bar-grow{from{transform:scaleY(0);transform-origin:bottom}to{transform:scaleY(1);transform-origin:bottom}}
.broker-price-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 0;border-bottom:1px solid rgba(255,255,255,.05);
}
.broker-price-row:last-child{border-bottom:none}
.broker-pair{font-size:13px;font-weight:600;color:#fff}
.broker-price{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
.broker-chg{font-size:12px;font-weight:600}
.broker-chg.up{color:#14e0a3}.broker-chg.dn{color:#ff5a72}

/* INVESTMENT — PAMM table */
.inv-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 0;border-bottom:1px solid rgba(255,255,255,.05);gap:8px;
}
.inv-row:last-child{border-bottom:none}
.inv-rank{
  width:22px;height:22px;border-radius:6px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;
}
.inv-rank.g{background:rgba(20,224,163,.12);color:#14e0a3;border:1px solid rgba(20,224,163,.25)}
.inv-rank.r{background:rgba(200,16,46,.1);color:#C8102E;border:1px solid rgba(200,16,46,.2)}
.inv-rank.m{background:rgba(255,255,255,.06);color:rgba(255,255,255,.4)}
.inv-name{font-size:12.5px;font-weight:600;color:#fff;flex:1}
.inv-ret{font-size:13.5px;font-weight:700;color:#14e0a3}
.inv-dd{font-size:12px;color:rgba(255,255,255,.35);text-align:right;width:40px}
.inv-btn{font-size:10.5px;font-weight:700;padding:4px 10px;border-radius:5px;background:rgba(20,224,163,.1);color:#14e0a3;border:1px solid rgba(20,224,163,.2);cursor:pointer;white-space:nowrap}

/* VENTURE — challenge meter */
.ven-model-tabs{display:flex;gap:4px;margin-bottom:16px}
.ven-mtab{
  flex:1;padding:7px 8px;border-radius:7px;text-align:center;
  font-size:11px;font-weight:700;cursor:pointer;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);
  color:rgba(255,255,255,.4);transition:all .15s;
}
.ven-mtab.active{background:rgba(20,224,163,.12);border-color:rgba(20,224,163,.3);color:#14e0a3}
.ven-phase{margin-bottom:14px}
.ven-phase-label{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.3);margin-bottom:6px}
.ven-phase-target{font-size:28px;font-weight:700;color:#14e0a3;line-height:1;margin-bottom:4px}
.ven-phase-sub{font-size:11.5px;color:rgba(255,255,255,.35)}
.ven-bar-wrap{height:4px;background:rgba(255,255,255,.06);border-radius:2px;overflow:hidden;margin-bottom:16px}
.ven-bar-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,#14e0a3,rgba(20,224,163,.3));width:0;transition:width 1.2s cubic-bezier(.16,1,.3,1);box-shadow:0 0 8px #14e0a3}
.ven-split-big{text-align:center;padding:14px;background:rgba(20,224,163,.06);border-radius:10px;border:1px solid rgba(20,224,163,.15)}
.ven-split-num{font-size:36px;font-weight:700;color:#14e0a3;letter-spacing:-.03em}
.ven-split-lbl{font-size:10.5px;color:rgba(20,224,163,.6);text-transform:uppercase;letter-spacing:.1em}

/* ACADEMY — course cards */
.acd-feat{margin-bottom:14px}
.acd-feat-badge{font-size:10px;font-weight:700;padding:3px 8px;border-radius:4px;background:rgba(20,224,163,.1);color:#14e0a3;border:1px solid rgba(20,224,163,.2);text-transform:uppercase;display:inline-block;margin-bottom:8px}
.acd-feat-title{font-size:15px;font-weight:700;color:#fff;margin-bottom:4px;line-height:1.3}
.acd-feat-meta{font-size:12px;color:rgba(255,255,255,.35)}
.acd-items{display:flex;flex-direction:column;gap:8px}
.acd-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:9px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);
  cursor:pointer;transition:background .15s;
}
.acd-item:hover{background:rgba(255,255,255,.06)}
.acd-item-badge{font-size:9.5px;font-weight:700;padding:2px 7px;border-radius:3px;text-transform:uppercase;flex-shrink:0}
.acd-item-badge.c{background:rgba(200,16,46,.1);color:#C8102E;border:1px solid rgba(200,16,46,.18)}
.acd-item-badge.w{background:rgba(20,224,163,.08);color:#14e0a3;border:1px solid rgba(20,224,163,.18)}
.acd-item-badge.a{background:rgba(255,255,255,.05);color:rgba(255,255,255,.4);border:1px solid rgba(255,255,255,.09)}
.acd-item-title{font-size:12.5px;color:rgba(255,255,255,.65);flex:1;line-height:1.3}
.acd-item:hover .acd-item-title{color:#fff}

/* SOCIETY — partner cards */
.soc-channels{display:flex;flex-direction:column;gap:8px}
.soc-card{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;border-radius:10px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);
  transition:border-color .15s,background .15s;
}
.soc-card:hover{border-color:rgba(200,16,46,.25);background:rgba(200,16,46,.04)}
.soc-icon{
  width:34px;height:34px;border-radius:9px;flex-shrink:0;
  background:rgba(200,16,46,.08);border:1px solid rgba(200,16,46,.15);
  display:flex;align-items:center;justify-content:center;
}
.soc-icon svg{stroke:#C8102E;fill:none;width:16px;height:16px}
.soc-name{font-size:13px;font-weight:600;color:#fff}
.soc-earn{font-size:11.5px;color:rgba(255,255,255,.35);margin-top:1px}
body.rtl .soc-arrow{
  margin-right:auto; margin-left:0;
}
.soc-arrow{margin-left:auto;color:rgba(255,255,255,.2)}
.soc-arrow svg{stroke:currentColor;fill:none;width:14px;height:14px}

/* ── Particle canvas ── */
@keyframes hero-fade-slide-in{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
.hero-slide.active .hero-left>*{animation:hero-fade-slide-in .6s cubic-bezier(.16,1,.3,1) both}
.hero-slide.active .hero-div-tag{animation-delay:.05s}
.hero-slide.active .hero-headline{animation-delay:.12s}
.hero-slide.active .hero-sub{animation-delay:.18s}
.hero-slide.active .hero-desc{animation-delay:.22s}
.hero-slide.active .hero-stats{animation-delay:.28s}
.hero-slide.active .hero-ctas{animation-delay:.34s}
@media(max-width:960px){
  .hero-slide.active .hero-left>*{animation-name:hero-fade-slide-up}
}
@keyframes hero-fade-slide-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* Panel slide in from right */
.hero-slide.active .hero-panel{animation:hero-panel-in .7s .2s cubic-bezier(.16,1,.3,1) both}
@keyframes hero-panel-in{from{opacity:0;transform:translateX(32px)}to{opacity:1;transform:none}}

/* Slide background transitions */
.hero-slide:nth-child(1) .hero-slide-glow{background:radial-gradient(ellipse 70% 70% at 80% 40%,rgba(200,16,46,.12),transparent 70%),radial-gradient(ellipse 50% 50% at 10% 80%,rgba(200,16,46,.06),transparent 65%)}
.hero-slide:nth-child(2) .hero-slide-glow{background:radial-gradient(ellipse 70% 70% at 75% 45%,rgba(200,16,46,.1),transparent 70%),radial-gradient(ellipse 40% 60% at 15% 70%,rgba(200,16,46,.05),transparent 65%)}
.hero-slide:nth-child(3) .hero-slide-glow{background:radial-gradient(ellipse 60% 70% at 80% 40%,rgba(200,16,46,.1),transparent 70%),radial-gradient(ellipse 50% 40% at 20% 75%,rgba(200,16,46,.06),transparent 65%)}
.hero-slide:nth-child(4) .hero-slide-glow{background:radial-gradient(ellipse 70% 60% at 75% 50%,rgba(200,16,46,.09),transparent 70%),radial-gradient(ellipse 40% 50% at 10% 60%,rgba(200,16,46,.05),transparent 65%)}
.hero-slide:nth-child(5) .hero-slide-glow{background:radial-gradient(ellipse 65% 70% at 78% 42%,rgba(200,16,46,.11),transparent 70%),radial-gradient(ellipse 45% 50% at 12% 72%,rgba(200,16,46,.06),transparent 65%)}

/* Hero RTL */
/* ── Hero RTL — all text right-aligned ── */
body.rtl .hero-inner{direction:rtl}
/* Desktop: left column becomes right-aligned */
body.rtl .hero-left{align-items:flex-start;text-align:right}
/* Division tag: right side */
body.rtl .hero-div-tag{flex-direction:row;margin-right:0;margin-left:auto}
/* Headline: right-aligned */
body.rtl .hero-headline{text-align:right}
/* Sub + desc: right edge, max-width */
body.rtl .hero-sub{text-align:right;margin-right:0;margin-left:auto}
body.rtl .hero-desc{text-align:right;margin-right:0;margin-left:auto}
/* Stats: right-aligned row */
body.rtl .hero-stats{justify-content:flex-end;flex-direction:row}
body.rtl .hero-stats>div{text-align:right}
/* CTAs: right side, primary btn arrow flips */
body.rtl .hero-ctas{justify-content:flex-start;flex-direction:row-reverse}
body.rtl .hero-cta-primary{flex-direction:row-reverse}
body.rtl .hero-cta-primary svg{transform:scaleX(-1)}
/* Scroll hint */
body.rtl .hero-scroll{flex-direction:row-reverse;left:auto;right:48px}
/* Nav dots: centered */
body.rtl .hero-nav{left:50%;right:auto;transform:translateX(-50%);flex-direction:row; direction:rtl;}
body.rtl .hero-arrow svg{transform:scaleX(-1)}
/* Slide counter */
body.rtl .hero-counter{flex-direction:row-reverse}

/* Mobile: center everything */
@media(max-width:960px){
  body.rtl .hero-left{align-items:center;text-align:center}
  body.rtl .hero-div-tag{margin:0 auto}
  body.rtl .hero-headline{text-align:center}
  body.rtl .hero-sub{text-align:center;margin:0 auto 28px}
  body.rtl .hero-desc{text-align:center;margin:0 auto 36px}
  body.rtl .hero-stats{justify-content:center;flex-direction:row}
  body.rtl .hero-ctas{justify-content:center;flex-direction:row}
}
@media (max-width: 960px){
  .hero-slide{
    align-items: flex-start;
  }

  .hero-inner{
    align-content: start;
    gap: 20px;
    padding-top: 22px;
    padding-bottom: 32px;
  }

.hero-headline{
  font-size: clamp(30px, 11.1vw, 42px);
  line-height: 1.16;
  margin-bottom: 10px;
}

  .hero-sub{
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 10px;
  }

  .hero-desc{
    font-size: 13px;
    line-height: 1.75;
    margin-bottom: 14px;
    max-width: 100%;
  }

  .hero-stats{
    gap: 10px;
    margin-bottom: 14px;
  }

  .hero-ctas{
    gap: 10px;
    margin-bottom: 16px;
  }

  .hero-right{
    margin-top: 24px;
    justify-content: center;
    width: 100%;
  }
  .hero-panel{
    margin: 0 auto;
  }

body.rtl .hero-nav{
  flex-direction:row;
  bottom:0;
}

body.lang-fa .hero-headline,
body.lang-ar .hero-headline{
  font-size: clamp(28px, 9.1vw, 40px);
  line-height: 1.18;
}
}
</style>

<!-- Particle canvas -->
<canvas class="hero-canvas" id="hero-canvas" aria-hidden="true"></canvas>

<?php
$slides = [
  // ── 1. BROKER ────────────────────────────────────────────────────────────
  [
    'id'      => 'broker',
    'color'   => '#C8102E',
    'tag'     => $lang==='fa' ? 'STB بروکر' : 'STB BROKER',
    'h1'      => $lang==='fa' ? 'زیرساختی که<br><span class="hero-headline-accent">حرفه‌ای‌ها</span>' : 'INFRASTRUCTURE<br><span class="hero-headline-accent">PROFESSIONALS</span>',
    'h1b'     => $lang==='fa' ? 'انتخاب می‌کنند' : 'CHOOSE',
    'sub'     => $lang==='fa' ? 'کارگزاری مورد اعتماد فلزات، کریپتو، فارکس و CFD' : 'Trusted Forex & CFD Brokerage',
    'desc'    => $lang==='fa' ? 'متصل به بهترین نهادهای مالی، اجرای سریع در ۰.۱۲۵ ثانیه و 350+ ابزار روی MetaTrader 5. بدون دخل و تصرف در قیمت و اجرای معاملات.' : 'Institutional liquidity, 0.125s execution and 350+ instruments on MetaTrader 5. No dealing desk. No price manipulation.',
    'stats'   => [['350<em>+</em>',$lang==='fa' ? 'ابزار معاملاتی' : 'Instruments'],['0.0',$lang==='fa' ? 'اسپرد خام' : 'Raw Spread'],['1:400',$lang==='fa' ? 'اهرم مالی' : 'Leverage']],
    'cta1'    => [$lang==='fa' ? 'افتتاح حساب لایو' : 'Open Live Account','https://crm.stbbrokers.com/register'],
    'cta2'    => [$lang==='fa' ? 'مشاهده حساب ها' : ' View Accounts','/NewSite/trading-accounts/'],
    'panel_title' => 'MT5 — LIVE SPREADS',
    'panel_live'  => $lang==='fa' ? 'لایو' : 'Live',
  ],
  // ── 2. INVESTMENT ────────────────────────────────────────────────────────
  [
    'id'      => 'investment',
    'color'   => '#C8102E',
    'tag'     => $lang==='fa' ? 'STB سرمایه‌گذاری' : 'STB INVESTMENT',
    'h1'      => $lang==='fa' ? 'بگذارید حرفه‌ای‌ها<br><span class="hero-headline-accent">سرمایه شما را</span>' : 'LET PROFESSIONALS<br><span class="hero-headline-accent">GROW YOUR</span>',
    'h1b'     => $lang==='fa' ? 'مدیریت کنند' : 'CAPITAL',
    'sub'     => $lang==='fa' ? 'مدیریت سرمایه PAMM' : 'PAMM Managed Investment',
    'desc'    => $lang==='fa' ? 'سرمایه خود را به مدیران PAMM تأیید‌شده بسپارید. عملکرد را لحظه‌ای رصد کنید و سود متناسب دریافت کنید، بدون نگرانی با شفافیت کامل.' : 'Allocate capital to verified PAMM managers. Track performance in real time and earn proportionally — with full transparency.',
    'stats'   => [['184<em>%</em>',$lang==='fa' ? 'بالاترین بازده' : 'Top Return'],['4',$lang==='fa' ? 'مدیران تأیید‌شده' : 'Verified Mgrs'],['0<em>%</em>',$lang==='fa' ? 'کارمزد پنهان' : 'Hidden Fees']],
    'cta1'    => [$lang==='fa' ? 'سرمایه‌گذاری در PAMM' : 'Invest in PAMM','/NewSite/pamm/'],
    'cta2'    => [$lang==='fa' ? 'مدیر صندوق شوید' : 'Become a Manager','/NewSite/pamm/'],
    'panel_title' => 'TOP PAMM MANAGERS',
    'panel_live'  => $lang==='fa' ? 'لایو' : 'Live',
  ],
  // ── 3. VENTURE ───────────────────────────────────────────────────────────
  // [
  //   'id'      => 'venture',
  //   'color'   => '#14e0a3',
  //   'tag'     => $lang==='fa' ? 'STB ونچر' : 'STB VENTURE',
  //   'h1'      => $lang==='fa' ? 'با سرمایه ما معامله کنید<br><span class="hero-headline-accent" style="color:#14e0a3">سودش رو تقسیم کنیم</span>' : 'TRADE OUR CAPITAL<br><span class="hero-headline-accent" style="color:#14e0a3">KEEP THE PROFIT</span>',
  //   'h1b'     => '',
  //   'sub'     => $lang==='fa' ? 'ریسکش رو ما بر می‌داریم' : 'Proprietary Trading Programme',
  //   'desc'    => $lang==='fa' ? 'مراحل ارزیابی را پشت سر بگذارید، سرمایه دریافت کنید و تا ۹۰٪ سود را برای خودتان نگه دارید. بدون ریسک سرمایه شخصی. هزینه ارزیابی در صورت قبولی بازگردانده می‌شود.' : 'Pass the evaluation, get funded, keep up to 90% of profits. No personal capital at risk. Fee refunded on passing.',
  //   'stats'   => [['90<em>%</em>',$lang==='fa' ? 'تقسیم سود' : 'Profit Split'],['$4M',$lang==='fa' ? 'حداکثر مقیاس' : 'Max Scale'],['0',$lang==='fa' ? 'محدودیت زمانی' : 'Time Limit']],
  //   'cta1'    => [$lang==='fa' ? 'شروع چالش' : 'Start Challenge','/NewSite/venture/'],
  //   'cta2'    => [$lang==='fa' ? 'مشاهده شرایط' : 'View Conditions','/NewSite/venture/'],
  //   'panel_title' => 'CHALLENGE CONDITIONS',
  //   'panel_live'  => 'JUNE 2026',
  // ],
  // ── 4. ACADEMY ───────────────────────────────────────────────────────────
[
  'id'      => 'academy',
  'color'   => '#14e0a3',
  'tag'     => $lang==='fa' ? 'STB آکادمی' : 'STB ACADEMY',
  'h1'      => $lang==='fa'
    ? 'یاد بگیرید، پیشرفت کنید<br><span class="hero-headline-accent" style="color:#14e0a3">با اعتماد به نفس</span>'
    : 'LEARN. IMPROVE.<br><span class="hero-headline-accent" style="color:#14e0a3">TRADE WITH</span>',
  'h1b'     => $lang==='fa' ? 'ترید کنید' : 'CONFIDENCE',
  'sub'     => $lang==='fa' ? 'آموزش ترید — کاملاً رایگان' : 'Trading Education — Completely Free',
  'desc'    => $lang==='fa' ? 'دوره‌های آموزشی ساختار یافته، وبینارهای زنده، دایره‌المعارف با بیش از ۴۵۰ واژه به همراه مقالات بازار — رایگان برای مشتریان STB' : 'Structured courses, live webinars, 450+ term encyclopedia and market articles — completely free for STB clients.',
  'stats'   => [['5',$lang==='fa' ? 'دوره' : 'Courses'],['450<em>+</em>',$lang==='fa' ? 'اصطلاح' : 'Terms'],[$lang==='fa' ? 'رایگان' : 'FREE',$lang==='fa' ? 'برای مشتریان' : 'For Clients']],
  'cta1'    => [$lang==='fa' ? 'ورود به آکادمی' : 'Enter Academy','/NewSite/academy/'],
  'cta2'    => [$lang==='fa' ? 'وبینار بعدی' : 'Next Webinar','/NewSite/webinar/'],
  'panel_title' => 'STB ACADEMY',
  'panel_live'  => $lang==='fa' ? 'رایگان' : 'Free',
],
  // ── 5. SOCIETY ───────────────────────────────────────────────────────────
  [
    'id'      => 'society',
    'color'   => '#C8102E',
    'tag'     => $lang==='fa' ? 'STB جامعه' : 'STB SOCIETY',
    'h1'      => $lang==='fa' ? 'درآمد خود را<br><span class="hero-headline-accent">با STB رشد دهید</span>' : 'GROW YOUR<br><span class="hero-headline-accent">REVENUE</span>',
    'h1b'     => $lang==='fa' ? '' : 'WITH STB',
    'sub'     => $lang==='fa' ? 'انجمن معامله‌گران و برنامه مشارکت حرفه‌ای' : 'Trader Community & Partnership Programme',
    'desc'    => $lang==='fa' ? 'معرف بروکر، همکاری در فروش یا سفیر برند — ساختارهای حرفه‌ای برای هر کسی با شبکه‌ای از معامله‌گران.' : 'Introducing broker, affiliate or brand ambassador — professional structures for anyone with a network of traders.',
    'stats'   => [[$lang==='fa' ? 'مادام‌العمر' : 'Lifetime',$lang==='fa' ? 'کمیسیون IB' : 'IB Commission'],['CPA',$lang==='fa' ? 'و RevShare' : '& RevShare'],[$lang==='fa' ? 'در لحظه' : 'Real-Time',$lang==='fa' ? 'پایش' : 'Tracking']],
    'cta1'    => [$lang==='fa' ? 'شریک تجاری شوید' : 'Become a Partner','/NewSite/ib/'],
    'cta2'    => [$lang==='fa' ? 'برنامه همکاری در فروش' : 'Affiliate Program','/NewSite/affiliate/'],
    'panel_title' => 'PARTNER CHANNELS',
    'panel_live'  => $lang==='fa' ? 'لایو' : 'Live',
  ],
];
?>

<!-- ══════════════ SLIDES ══════════════ -->
<div class="hero-slides" id="hero-slides">
<?php foreach($slides as $si => $sl):
  $sc = $sl['color'];
  $is_green = ($sc === '#14e0a3');
?>
<div class="hero-slide<?php echo $si===0?' active':''; ?>"
     data-slide="<?php echo $si; ?>"
     data-color="<?php echo esc_attr($sc); ?>"
     id="hero-slide-<?php echo $si; ?>">

  <!-- Slide bg glow -->
  <div class="hero-slide-glow" aria-hidden="true"></div>

  <div class="hero-inner">
    <!-- LEFT -->
    <div class="hero-left">
      <div class="hero-div-tag" style="--sc:<?php echo $sc; ?>;border-color:<?php echo $sc; ?>22">
        <span class="hero-div-tag-dot" style="--sc:<?php echo $sc; ?>"></span>
        <?php echo esc_html($sl['tag']); ?>
      </div>
      <h1 class="hero-headline" id="<?php echo $si===0?'hero-heading':''; ?>">
        <?php echo $sl['h1']; ?>
        <?php if($sl['h1b']): ?><span style="display:block"><?php echo esc_html($sl['h1b']); ?></span><?php endif; ?>
      </h1>
      <p class="hero-sub"><?php echo esc_html($sl['sub']); ?></p>
      <p class="hero-desc"><?php echo esc_html($sl['desc']); ?></p>
      <div class="hero-stats">
        <?php foreach($sl['stats'] as $st): ?>
        <div>
          <div class="hero-stat-val" style="--sc:<?php echo $sc; ?>"><?php echo $st[0]; ?></div>
          <div class="hero-stat-label"><?php echo esc_html($st[1]); ?></div>
        </div>
        <?php endforeach; ?>
      </div>
      <div class="hero-ctas">
        <a href="<?php echo esc_url($sl['cta1'][1]); ?>"
           class="hero-cta-primary"
           style="--sc:<?php echo $sc; ?>;background:<?php echo $sc; ?>;box-shadow:0 4px 24px <?php echo $sc; ?>44">
          <?php echo esc_html($sl['cta1'][0]); ?>
          <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($sl['cta2'][1]); ?>" class="hero-cta-ghost">
          <?php echo esc_html($sl['cta2'][0]); ?>
        </a>
      </div>
    </div>

    <!-- RIGHT: panel — unique per slide -->
    <div class="hero-right">
      <div class="hero-panel" style="--sc:<?php echo $sc; ?>">
        <div class="hero-panel-bar">
          <span class="hero-panel-title"><?php echo esc_html($sl['panel_title']); ?></span>
          <span class="hero-panel-live" style="--sc:<?php echo $sc; ?>;color:<?php echo $sc; ?>"><?php echo esc_html($sl['panel_live']); ?></span>
        </div>
        <div class="hero-panel-body">

          <?php if($sl['id']==='broker'): ?>
          <!-- BROKER: live price rows + mini chart -->
          <div class="broker-panel-layout">
            <div class="broker-chart" id="broker-chart">
              <?php $heights=[45,62,38,75,55,80,65,90,72,85];
              foreach($heights as $hi=>$h): ?>
              <div class="broker-bar" style="height:<?php echo $h; ?>%;--d:<?php echo $hi*.06; ?>s"></div>
              <?php endforeach; ?>
            </div>
            <div class="broker-prices-grid">
              <?php $brows=[
                ['EUR/USD','1.1452','▲ +0.12%','up'],
                ['XAU/USD','2,318.4','▲ +0.34%','up'],
                ['BTC/USD','66,612','▼ -0.20%','dn'],
                ['NAS100','22,918','▼ -0.65%','dn'],
              ];
              foreach($brows as $br): ?>
              <div class="broker-price-row">
                <span class="broker-pair"><?php echo $br[0]; ?></span>
                <span class="broker-price" id="hp-<?php echo strtolower(str_replace(['/','#','.',' '],'',$br[0])); ?>"><?php echo $br[1]; ?></span>
                <span class="broker-chg <?php echo $br[3]; ?>"><?php echo $br[2]; ?></span>
              </div>
              <?php endforeach; ?>
            </div>
          </div>

          <?php elseif($sl['id']==='investment'): ?>
          <!-- INVESTMENT: PAMM manager rows -->
          <div class="inv-panel-layout">
            <?php $mgrs=[
              ['1','g','AlphaFX Pro','+184.3%','12.4%'],
              ['2','r','Meridian Cap','+97.6%','18.1%'],
              ['3','m','Quantum Edge','+ 61.2%','9.8%'],
              ['4','m','DeltaSwing FX','+312.8%','29.3%'],
            ];
            foreach($mgrs as $mg): ?>
            <div class="inv-row">
              <div class="inv-rank <?php echo $mg[1]; ?>"><?php echo $mg[0]; ?></div>
              <div class="inv-name"><?php echo $mg[2]; ?></div>
              <div style="display:flex; flex-direction:column; align-items:flex-end;">
                <div class="inv-ret"><?php echo $mg[3]; ?></div>
                <div class="inv-dd" style="width:auto; text-align:right; font-size:10px;"><?php echo $mg[4]; ?></div>
              </div>
              <button class="inv-btn"><?php echo $lang==='fa' ? 'سرمایه‌گذاری' : 'Invest'; ?></button>
            </div>
            <?php endforeach; ?>
          </div>

          <?php elseif($sl['id']==='venture'): ?>
          <!-- VENTURE: challenge conditions -->
          <div class="ven-model-tabs">
            <div class="ven-mtab active"><?php echo $lang==='fa' ? 'دو مرحله‌ای' : '2-Step'; ?></div>
            <div class="ven-mtab"><?php echo $lang==='fa' ? 'یک مرحله‌ای' : '1-Step'; ?></div>
            <div class="ven-mtab"><?php echo $lang==='fa' ? 'فوری' : 'Instant'; ?></div>
          </div>
          <div class="ven-phase">
            <div class="ven-phase-label"><?php echo $lang==='fa' ? 'هدف فاز ۱' : 'PHASE 1 TARGET'; ?></div>
            <div class="ven-phase-target">8%</div>
            <div class="ven-phase-sub"><?php echo $lang==='fa' ? 'بدون محدودیت زمانی · سقف زیان روزانه ۵٪' : 'No time limit · 5% daily loss limit'; ?></div>
          </div>
          <div class="ven-bar-wrap"><div class="ven-bar-fill" id="ven-bar" style="width:0"></div></div>
          <div class="ven-split-big">
            <div class="ven-split-num">90%</div>
            <div class="ven-split-lbl"><?php echo $lang==='fa' ? 'تقسیم سود به معامله‌گر' : 'Profit Split to Trader'; ?></div>
          </div>

          <?php elseif($sl['id']==='academy'): ?>
          <!-- ACADEMY: course + content list -->
          <div class="acd-panel-layout">
            <div class="acd-feat" style="margin-bottom:0;">
              <span class="acd-feat-badge"><?php echo $lang==='fa' ? 'ویژه' : 'FEATURED'; ?></span>
              <div class="acd-feat-title"><?php echo $lang==='fa' ? 'آموزش تحلیل تکنیکال مقدماتی بروکر' : 'Beginner Technical Analysis (Broker)'; ?></div>
              <div class="acd-feat-meta"><?php echo $lang==='fa' ? 'سطح ۱ · مقدماتی' : 'Level 1 · Beginner'; ?></div>
            </div>
            <div class="acd-items">
              <div class="acd-item"><span class="acd-item-badge w"><?php echo $lang==='fa' ? 'وبینار' : 'WEBINAR'; ?></span><span class="acd-item-title"><?php echo $lang==='fa' ? 'بررسی عمیق پلتفرم MT5' : 'MT5 Platform Deep Dive'; ?></span></div>
              <div class="acd-item"><span class="acd-item-badge c"><?php echo $lang==='fa' ? 'دوره' : 'COURSE'; ?></span><span class="acd-item-title"><?php echo $lang==='fa' ? 'دوره عرضه و تقاضا — S&D' : 'Supply & Demand — S&D'; ?></span></div>
              <div class="acd-item"><span class="acd-item-badge c"><?php echo $lang==='fa' ? 'دوره' : 'COURSE'; ?></span><span class="acd-item-title"><?php echo $lang==='fa' ? 'دوره آموزشی والیوم تریدینگ' : 'Volume Trading'; ?></span></div>
            </div>
          </div>

          <?php else: // SOCIETY ?>
          <!-- SOCIETY: partner channels -->
          <div class="soc-panel-layout">
            <?php $channels = $lang==='fa' ? [
              ['<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"/>','معرفی بروکر (IB)','کمیسیون مادام‌العمر بر اساس حجم'],
              ['<path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z" stroke-width="1.5"/>','برنامه همکاری','CPA، RevShare، ترکیبی'],
              ['<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" stroke-width="1.5"/>','سفیر برند','برنامه سفیر STB'],
              ['<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="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"/>','Introducing Broker','Lifetime commissions on volume'],
              ['<path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z" stroke-width="1.5"/>','Affiliate Program','CPA, RevShare & Hybrid'],
              ['<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" stroke-width="1.5"/>','Brand Ambassador','STB Ambassador programme'],
              ['<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"/>','Community Shop','Tier-based access'],
            ];
            foreach($channels as $ch): ?>
            <div class="soc-card" style="margin-bottom:0;">
              <div class="soc-icon"><svg viewBox="0 0 24 24" stroke="currentColor" fill="none"><?php echo $ch[0]; ?></svg></div>
              <div><div class="soc-name"><?php echo esc_html($ch[1]); ?></div><div class="soc-earn"><?php echo esc_html($ch[2]); ?></div></div>
              <div class="soc-arrow"><svg viewBox="0 0 24 24"><path d="M9 18l6-6-6-6" stroke-width="1.5" stroke-linecap="round"/></svg></div>
            </div>
            <?php endforeach; ?>
          </div>
          <?php endif; ?>

        </div><!-- /panel-body -->
      </div><!-- /panel -->
    </div><!-- /hero-right -->
  </div><!-- /hero-inner -->
</div><!-- /hero-slide -->
<?php endforeach; ?>
</div><!-- /hero-slides -->

<!-- Navigation -->
<nav class="hero-nav" aria-label="Slide navigation">
  <button class="hero-arrow" id="hero-prev" aria-label="Previous">
    <svg viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
  </button>
  <div class="hero-dots" id="hero-dots" role="tablist">
    <?php foreach($slides as $si=>$sl): ?>
    <button class="hero-dot<?php echo $si===0?' active':''; ?>"
            data-slide="<?php echo $si; ?>"
            style="<?php echo $si===0?'--sc-active:'.$sl['color'].';--sc:'.$sl['color']:''; ?>"
            aria-label="<?php echo esc_attr($sl['tag']); ?>"
            role="tab"
            aria-selected="<?php echo $si===0?'true':'false'; ?>">
    </button>
    <?php endforeach; ?>
  </div>
  <button class="hero-arrow" id="hero-next" aria-label="Next">
    <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
  </button>
  <span class="hero-counter" id="hero-counter">01 / <?php echo count($slides); ?></span>
</nav>

<!-- Scroll hint -->
<div class="hero-scroll" aria-hidden="true">
  <svg viewBox="0 0 24 24"><path d="M12 5v14M5 12l7 7 7-7" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
  <?php echo $lang==='fa' ? 'اسکرول' : 'Scroll'; ?>
</div>

<script>
(function(){
'use strict';

var SLIDES     = document.querySelectorAll('.hero-slide');
var DOTS       = document.querySelectorAll('.hero-dot');
var COUNTER    = document.getElementById('hero-counter');
var TOTAL      = SLIDES.length;
var current    = 0;
var timer      = null;
var SLIDE_DUR  = 6000;
var COLORS     = [];

// Collect slide colors
SLIDES.forEach(function(s){ COLORS.push(s.getAttribute('data-color')); });

/* ── Go to slide ── */
function goTo(idx, dir) {
  if(idx === current) return;
  var prev = current;
  current  = ((idx % TOTAL) + TOTAL) % TOTAL;

  SLIDES[prev].classList.remove('active');
  SLIDES[current].classList.add('active');

  // Update dots
  DOTS.forEach(function(d, i){
    var isAct = i === current;
    d.classList.toggle('active', isAct);
    d.setAttribute('aria-selected', isAct ? 'true' : 'false');
    if(isAct){
      d.style.setProperty('--sc-active', COLORS[i]);
      d.style.setProperty('--sc', COLORS[i]);
      // Reset & restart progress animation
      d.classList.remove('active');
      void d.offsetWidth;
      d.classList.add('active');
    } else {
      d.style.removeProperty('--sc-active');
    }
  });

  // Update counter
  if(COUNTER){
    var cur = String(current+1).padStart(2,'0');
    var tot = String(TOTAL).padStart(2,'0');
    var isRtl = document.body.classList.contains('rtl');
    COUNTER.textContent = isRtl ? tot + ' / ' + cur : cur + ' / ' + tot;
  }

  // Trigger slide-specific animations
  triggerSlideAnims(current);

  resetTimer();
}

/* ── Timer ── */
function resetTimer(){
  clearInterval(timer);
  timer = setInterval(function(){ goTo(current + 1); }, SLIDE_DUR);
}

/* ── Slide-specific animations ── */
function triggerSlideAnims(idx){
  var slide = SLIDES[idx];
  if(!slide) return;
  var id = slide.id.replace('hero-slide-','');

  // Venture: animate bar fill
  if(idx === 2){ // venture
    var bar = document.getElementById('ven-bar');
    if(bar){ bar.style.width='0'; setTimeout(function(){ bar.style.width='85%'; },300); }
  }

  // Broker: re-trigger bar grow
  if(idx === 0){
    var bars = document.querySelectorAll('.broker-bar');
    bars.forEach(function(b){
      b.style.animation='none'; void b.offsetWidth;
      b.style.animation='';
    });
  }
}

/* ── Arrow nav ── */
var prev = document.getElementById('hero-prev');
var next = document.getElementById('hero-next');
if(prev) prev.addEventListener('click', function(){ goTo(current - 1); });
if(next) next.addEventListener('click', function(){ goTo(current + 1); });

/* ── Dot nav ── */
DOTS.forEach(function(dot){
  dot.addEventListener('click', function(){
    goTo(parseInt(dot.getAttribute('data-slide')));
  });
});

/* ── Keyboard ── */
document.addEventListener('keydown', function(e){
  if(e.key==='ArrowLeft'||e.key==='ArrowUp')    goTo(current-1);
  if(e.key==='ArrowRight'||e.key==='ArrowDown') goTo(current+1);
});

/* ── Touch swipe ── */
var touchX = 0;
var wrap = document.getElementById('hero-slides');
if(wrap){
  wrap.addEventListener('touchstart', function(e){ touchX = e.changedTouches[0].clientX; },{passive:true});
  wrap.addEventListener('touchend',   function(e){
    var dx = e.changedTouches[0].clientX - touchX;
    if(Math.abs(dx) > 40) goTo(current + (dx < 0 ? 1 : -1));
  },{passive:true});
}

/* ── Pause on hover ── */
var heroEl = document.querySelector('.hero-wrap');
if(heroEl){
  heroEl.addEventListener('mouseenter', function(){ clearInterval(timer); });
  heroEl.addEventListener('mouseleave', resetTimer);
}

/* ══════════════════════════════════════
   PARTICLE CANVAS — network + comets
══════════════════════════════════════ */
var canvas = document.getElementById('hero-canvas');
var ctx, W, H, particles=[], comets=[];
var animId = null;
var isVisible = false;

var observer = new IntersectionObserver(function(entries){
  entries.forEach(function(entry){
    isVisible = entry.isIntersecting;
    if(isVisible){
      if(!animId) animId = requestAnimationFrame(rafLoop);
    } else {
      if(animId) {
        cancelAnimationFrame(animId);
        animId = null;
      }
    }
  });
}, {threshold:0.01});

function initCanvas(){
  if(!canvas) return;
  ctx = canvas.getContext('2d');
  resize();
  createParticles();
  createComets();
  observer.observe(canvas);
  window.addEventListener('resize', resize);
}

function resize(){
  if(!canvas) return;
  W = canvas.width  = canvas.offsetWidth;
  H = canvas.height = canvas.offsetHeight;
}

function rand(a,b){ return Math.random()*(b-a)+a; }

function createParticles(){
  particles = [];
  var isMobile = window.innerWidth <= 768;
  var maxParticles = isMobile ? 12 : 60;
  var n = Math.min(maxParticles, Math.floor(W * H / 14000));
  for(var i=0;i<n;i++){
    particles.push({
      x:rand(0,W), y:rand(0,H),
      vx:rand(-.2,.2), vy:rand(-.2,.2),
      r:rand(.5,1.5),
      alpha:rand(.15,.45),
    });
  }
}

function createComets(){
  comets = [];
  for(var i=0;i<4;i++){
    comets.push(newComet());
  }
}

function newComet(){
  return {
    x: rand(0,W), y: rand(-20, H*.3),
    vx: rand(.8,2.5)*(Math.random()>.5?1:-1),
    vy: rand(.4,1.2),
    len: rand(60,140),
    alpha: rand(.3,.7),
    color: '200,16,46',
    w: rand(.8,1.8),
    life:0, maxLife:rand(120,260),
  };
}

function rafLoop(){
  if(!isVisible) {
    animId = null;
    return;
  }
  animId = requestAnimationFrame(rafLoop);
  if(!ctx) return;
  ctx.clearRect(0,0,W,H);

  // Particles + connections
  var col = '200,16,46';
  particles.forEach(function(p){
    p.x += p.vx; p.y += p.vy;
    if(p.x<0||p.x>W) p.vx*=-1;
    if(p.y<0||p.y>H) p.vy*=-1;
    ctx.beginPath();
    ctx.arc(p.x,p.y,p.r,0,Math.PI*2);
    ctx.fillStyle='rgba(255,255,255,'+p.alpha+')';
    ctx.fill();
  });

  // Connections
  for(var i=0;i<particles.length;i++){
    for(var j=i+1;j<particles.length;j++){
      var dx=particles[i].x-particles[j].x,dy=particles[i].y-particles[j].y;
      var d=Math.sqrt(dx*dx+dy*dy);
      if(d<120){
        ctx.beginPath();
        ctx.moveTo(particles[i].x,particles[i].y);
        ctx.lineTo(particles[j].x,particles[j].y);
        ctx.strokeStyle='rgba('+col+','+((1-d/120)*.12)+')';
        ctx.lineWidth=.5;
        ctx.stroke();
      }
    }
  }

  // Comets
  comets.forEach(function(c,ci){
    c.x+=c.vx; c.y+=c.vy; c.life++;
    if(c.life>c.maxLife||c.x<-200||c.x>W+200||c.y>H+100){
      comets[ci]=newComet();
      return;
    }
    var a = c.alpha * (1 - c.life/c.maxLife);
    // Draw comet trail
    ctx.save();
    var angle = Math.atan2(c.vy,c.vx);
    ctx.translate(c.x,c.y);
    ctx.rotate(angle);
    var g = ctx.createLinearGradient(-c.len,0,0,0);
    g.addColorStop(0,'rgba('+c.color+',0)');
    g.addColorStop(1,'rgba('+c.color+','+a+')');
    ctx.beginPath();
    ctx.moveTo(-c.len,0);ctx.lineTo(0,0);
    ctx.strokeStyle=g;ctx.lineWidth=c.w;ctx.stroke();
    // Bright head
    ctx.beginPath();
    ctx.arc(0,0,c.w+.5,0,Math.PI*2);
    ctx.fillStyle='rgba('+c.color+','+Math.min(a*2,1)+')';
    ctx.fill();
    ctx.restore();
  });
}

/* ══════════════════════════════════════
   LIVE PRICE UPDATES from STB API
══════════════════════════════════════ */
var apiUrl = (window.stbPricesConfig && window.stbPricesConfig.apiUrl)||'/NewSite/wp-json/stb/v1/prices';
var priceMap = {};

function fetchAndUpdate(){
  fetch(apiUrl).then(function(r){return r.json();}).then(function(d){
    if(!d.ok||!d.prices) return;
    d.prices.forEach(function(p){ priceMap[p.symbol]=p; });
    updateBrokerPanel();
  }).catch(function(){});
}

function updateBrokerPanel(){
  var map={
    'eurusd':'FX:EURUSD','xauusd':'CAPITALCOM:XAUUSD',
    'btcusd':'BINANCE:BTCUSDT','nas100':'CAPITALCOM:US100'
  };
  Object.keys(map).forEach(function(key){
    var el=document.getElementById('hp-'+key);
    var p=priceMap[map[key]];
    if(el&&p){
      el.textContent=p.price_fmt;
      el.style.color=p.direction==='up'?'#14e0a3':'#ff5a72';
    }
  });
}

/* ══════════════════════════════════════
   BOOT
══════════════════════════════════════ */
document.addEventListener('DOMContentLoaded', function(){
  // Init slide 0
  DOTS[0] && (DOTS[0].style.setProperty('--sc-active', COLORS[0]));
  triggerSlideAnims(0);
  resetTimer();
  initCanvas();
  fetchAndUpdate();
  setInterval(fetchAndUpdate, 30000);
});

})();
</script>
</section>
