<?php get_header(); 
$lang = function_exists('stb_lang') ? stb_lang() : 'en';
$B = '/NewSite';
$fa = $lang === 'fa';

$home_url = $fa ? stb_url($B . '/fa/') : stb_url($B . '/');
$login_label_url = $fa ? 'https://crm.stbbrokers.com/fa' : 'https://crm.stbbrokers.com/';
$register_label_url = $fa ? 'https://crm.stbbrokers.com/fa/register' : 'https://crm.stbbrokers.com/register/';
?>

<style>
.nf-page{
  position:relative;
  min-height:100vh;
  background:#060809;
  color:#fff;
  overflow:hidden;
}

.nf-hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:#060809;
  padding:120px 20px 90px;
}

.nf-grid-bg{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(200,16,46,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(200,16,46,.025) 1px,transparent 1px);
  background-size:45px 45px;
  mask-image:radial-gradient(ellipse 65% 60% at 50% 48%,black 20%,transparent 72%);
  animation:nf-drift 18s linear infinite;
  pointer-events:none;
}

@keyframes nf-drift{
  0%{transform:translate(0,0)}
  100%{transform:translate(45px,45px)}
}

.nf-glow{
  position:absolute;
  top:46%;
  left:50%;
  transform:translate(-50%,-50%);
  width:280px;
  height:280px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(200,16,46,.12),transparent 68%);
  animation:nf-breathe 5s ease-in-out infinite;
  pointer-events:none;
}

.nf-glow-2{
  width:520px;
  height:520px;
  background:radial-gradient(circle,rgba(200,16,46,.055),transparent 70%);
  animation-delay:2.4s;
}

@keyframes nf-breathe{
  0%,100%{
    transform:translate(-50%,-50%) scale(1);
    opacity:.55;
  }
  50%{
    transform:translate(-50%,-50%) scale(1.22);
    opacity:1;
  }
}

.nf-market-bars{
  position:absolute;
  top:16%;
  left:50%;
  transform:translateX(-50%);
  width:420px;
  height:260px;
  opacity:.25;
  pointer-events:none;
}

.nf-bar{
  position:absolute;
  bottom:0;
  width:14px;
  border-radius:3px;
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.02));
  animation:nf-bar 4s ease-in-out infinite;
}

.nf-bar::before{
  content:'';
  position:absolute;
  left:50%;
  top:-28px;
  width:1px;
  height:calc(100% + 56px);
  background:rgba(255,255,255,.12);
  transform:translateX(-50%);
}

.nf-bar:nth-child(1){left:34px;height:70px;animation-delay:-.4s}
.nf-bar:nth-child(2){left:78px;height:130px;animation-delay:-1.1s}
.nf-bar:nth-child(3){left:122px;height:95px;animation-delay:-.8s}
.nf-bar:nth-child(4){left:176px;height:178px;animation-delay:-1.7s}
.nf-bar:nth-child(5){left:226px;height:122px;animation-delay:-.2s}
.nf-bar:nth-child(6){left:282px;height:86px;animation-delay:-1.4s}
.nf-bar:nth-child(7){left:332px;height:162px;animation-delay:-.9s}
.nf-bar:nth-child(8){left:382px;height:104px;animation-delay:-2s}

@keyframes nf-bar{
  0%,100%{transform:translateY(0);opacity:.55}
  50%{transform:translateY(-12px);opacity:1}
}

.nf-dots{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.8;
}

.nf-dots::before,
.nf-dots::after{
  content:'';
  position:absolute;
  top:34%;
  width:38vw;
  height:34vw;
  max-height:460px;
  background-image:radial-gradient(circle,rgba(200,16,46,.8) 1px,transparent 1.5px);
  background-size:15px 15px;
  filter:drop-shadow(0 0 8px rgba(200,16,46,.35));
  mask-image:radial-gradient(ellipse at center,black 8%,transparent 68%);
  animation:nf-dots-wave 8s ease-in-out infinite;
}

.nf-dots::before{
  left:-10vw;
  transform:perspective(700px) rotateY(42deg) rotateZ(-8deg);
}

.nf-dots::after{
  right:-10vw;
  transform:perspective(700px) rotateY(-42deg) rotateZ(8deg);
  animation-delay:-4s;
}

@keyframes nf-dots-wave{
  0%,100%{opacity:.35}
  50%{opacity:.75}
}

.nf-shapes{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.nf-shape{
  position:absolute;
  border:1px solid rgba(200,16,46,.16);
  border-radius:4px;
  opacity:.12;
  animation:nf-shape-float ease-in-out infinite;
}

@keyframes nf-shape-float{
  0%,100%{transform:translate(0,0) rotate(0)}
  50%{transform:translate(var(--dx,10px),var(--dy,-15px)) rotate(var(--rot,5deg))}
}

.nf-center{
  position:relative;
  z-index:10;
  width:100%;
  max-width:760px;
  text-align:center;
  margin:auto;
}

.nf-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 18px;
  border-radius:30px;
  background:rgba(200,16,46,.07);
  border:1px solid rgba(200,16,46,.25);
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#C8102E;
  margin-bottom:24px;
  animation:nf-badge-glow 3s ease-in-out infinite;
}

.nf-badge::before{
  content:'';
  width:7px;
  height:7px;
  border-radius:50%;
  background:#C8102E;
  box-shadow:0 0 10px rgba(200,16,46,.8);
}

@keyframes nf-badge-glow{
  0%,100%{box-shadow:none}
  50%{box-shadow:0 0 24px rgba(200,16,46,.14)}
}

.nf-code{
  font-size:clamp(96px,18vw,230px);
  font-weight:950;
  line-height:.82;
  letter-spacing:-.08em;
  color:#C8102E;
  margin:0 0 32px;
  text-shadow:
    0 0 20px rgba(200,16,46,.28),
    0 0 70px rgba(200,16,46,.18);
  animation:nf-code-pulse 4s ease-in-out infinite;
}

@keyframes nf-code-pulse{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.18)}
}

.nf-title{
  font-size:clamp(28px,4.5vw,46px);
  font-weight:900;
  color:#fff;
  line-height:1.18;
  margin:0 0 16px;
  letter-spacing:-.03em;
}

.nf-title em{
  font-style:normal;
  color:#C8102E;
}

.nf-sub{
  font-size:clamp(15px,1.8vw,18px);
  color:rgba(255,255,255,.42);
  line-height:1.75;
  max-width:560px;
  margin:0 auto 36px;
}

.nf-actions{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:12px;
}

.nf-btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:52px;
  padding:14px 34px;
  border-radius:12px;
  background:#C8102E;
  color:#fff;
  font-size:14px;
  font-weight:800;
  line-height:1;
  text-decoration:none;
  box-shadow:0 8px 34px rgba(200,16,46,.28);
  transition:all .25s ease;
  position:relative;
  overflow:hidden;
}

.nf-btn-primary::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
  transform:translateX(-100%);
  transition:transform .65s ease;
}

.nf-btn-primary:hover::before{
  transform:translateX(100%);
}

.nf-btn-primary:hover{
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 12px 42px rgba(200,16,46,.38);
}

.nf-btn-primary svg{
  width:18px;
  height:18px;
  stroke:currentColor;
  fill:none;
  stroke-width:1.8;
  transition:transform .2s ease;
}

.nf-btn-primary:hover svg{
  transform:translateX(-3px);
}

html[dir="ltr"] .nf-btn-primary:hover svg,
body:not(.rtl) .nf-btn-primary:hover svg{
  transform:translateX(3px);
}

.nf-btn-ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:14px 28px;
  border-radius:12px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.68);
  font-size:14px;
  font-weight:700;
  text-decoration:none;
  transition:all .25s ease;
}

.nf-btn-ghost:hover{
  color:#fff;
  border-color:rgba(255,255,255,.28);
  background:rgba(255,255,255,.055);
}

.nf-help{
  position:relative;
  z-index:5;
  background:#060809;
  padding:0 20px 80px;
}

.nf-help-inner{
  max-width:1100px;
  margin:0 auto;
  padding-top:64px;
  border-top:1px solid rgba(255,255,255,.07);
}

.nf-help-title{
  text-align:center;
  font-size:clamp(24px,3vw,34px);
  font-weight:900;
  color:#fff;
  margin:0 0 12px;
  letter-spacing:-.02em;
}

.nf-help-title em{
  font-style:normal;
  color:#C8102E;
}

.nf-help-sub{
  max-width:540px;
  margin:0 auto 34px;
  text-align:center;
  color:rgba(255,255,255,.34);
  font-size:14px;
  line-height:1.75;
}

.nf-card-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}

.nf-card{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  padding:30px 24px;
  background:#0a0c0d;
  border:1px solid rgba(255,255,255,.06);
  transition:all .35s cubic-bezier(.16,1,.3,1);
}

.nf-card::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:2px;
  background:#C8102E;
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .35s cubic-bezier(.16,1,.3,1);
}

.nf-card:hover{
  transform:translateY(-5px);
  border-color:rgba(255,255,255,.12);
  box-shadow:0 20px 50px rgba(0,0,0,.45);
}

.nf-card:hover::before{
  transform:scaleX(1);
}

.nf-card-icon{
  width:56px;
  height:56px;
  border-radius:14px;
  margin:0 0 18px;
  background:rgba(200,16,46,.06);
  border:1px solid rgba(200,16,46,.16);
  display:flex;
  align-items:center;
  justify-content:center;
}

.nf-card-icon svg{
  width:26px;
  height:26px;
  stroke:#C8102E;
  fill:none;
  stroke-width:1.5;
}

.nf-card-title{
  font-size:17px;
  font-weight:850;
  color:#fff;
  margin-bottom:8px;
}

.nf-card-desc{
  font-size:13px;
  color:rgba(255,255,255,.38);
  line-height:1.7;
  margin-bottom:16px;
}

.nf-card-link{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:#C8102E;
  font-size:12px;
  font-weight:800;
  text-decoration:none;
}

.nf-card-link:hover{
  color:#e72a47;
}

.nf-rev{
  opacity:0;
  transform:translateY(24px);
  transition:
    opacity .7s cubic-bezier(.16,1,.3,1),
    transform .7s cubic-bezier(.16,1,.3,1);
}

.nf-rev.vis{
  opacity:1;
  transform:none;
}

.nf-rev.d1{transition-delay:.12s}
.nf-rev.d2{transition-delay:.24s}
.nf-rev.d3{transition-delay:.36s}

@media(max-width:900px){
  .nf-card-grid{
    grid-template-columns:1fr;
  }

  .nf-card{
    text-align:center;
  }

  .nf-card-icon{
    margin-left:auto;
    margin-right:auto;
  }
}

@media(max-width:640px){
  .nf-hero{
    padding:100px 16px 70px;
  }

  .nf-code{
    margin-bottom:24px;
  }

  .nf-actions{
    flex-direction:column;
  }

  .nf-btn-primary,
  .nf-btn-ghost{
    width:100%;
    max-width:310px;
  }

  .nf-dots::before,
  .nf-dots::after{
    width:70vw;
    height:70vw;
    top:40%;
  }

  .nf-market-bars{
    width:320px;
    opacity:.18;
  }
}
</style>

<article class="nf-page" dir="<?php echo $fa ? 'rtl' : 'ltr'; ?>">
  <section class="nf-hero">
    <div class="nf-grid-bg"></div>
    <div class="nf-glow"></div>
    <div class="nf-glow nf-glow-2"></div>
    <div class="nf-dots"></div>

    <div class="nf-market-bars" aria-hidden="true">
      <span class="nf-bar"></span>
      <span class="nf-bar"></span>
      <span class="nf-bar"></span>
      <span class="nf-bar"></span>
      <span class="nf-bar"></span>
      <span class="nf-bar"></span>
      <span class="nf-bar"></span>
      <span class="nf-bar"></span>
    </div>

    <div class="nf-shapes" id="nf-shapes"></div>

    <div class="nf-center">
      <div class="nf-badge nf-rev">
        <?php echo $fa ? 'صفحه پیدا نشد' : 'PAGE NOT FOUND'; ?>
      </div>

      <h1 class="nf-code nf-rev d1" style="text-align:center;">404</h1>

      <h2 class="nf-title nf-rev d2" style="text-align:center;">
  <?php echo $fa ? 'مسیر مورد نظر <em>پیدا نشد</em>' : 'The requested path was <em>not found</em>'; ?>
</h2>

      <p class="nf-sub nf-rev d3">
        <?php echo $fa
          ? 'صفحه‌ای که دنبالش هستید وجود ندارد، حذف شده یا آدرس آن تغییر کرده است. می‌توانید به صفحه اصلی برگردید یا از بخش‌های اصلی سایت ادامه دهید.'
          : 'The page you are looking for does not exist, has been moved, or the URL has changed. You can return home or continue through the main STB sections.'; ?>
      </p>

      <div class="nf-actions nf-rev d3">
        <a href="<?php echo esc_url($home_url); ?>" class="nf-btn-primary">
          <?php echo $fa ? 'بازگشت به صفحه اصلی' : 'Back to Homepage'; ?>
          <svg viewBox="0 0 24 24" aria-hidden="true">
            <?php if($fa): ?>
              <path d="M15 18l-6-6 6-6" stroke-linecap="round" stroke-linejoin="round"/>
            <?php else: ?>
              <path d="M9 18l6-6-6-6" stroke-linecap="round" stroke-linejoin="round"/>
            <?php endif; ?>
          </svg>
        </a>

        <a href="<?php echo esc_url($register_label_url); ?>" class="nf-btn-ghost">
          <?php echo $fa ? 'افتتاح حساب' : 'Open Account'; ?>
        </a>
      </div>
    </div>
  </section>

  <section class="nf-help">
    <div class="nf-help-inner">
      <h3 class="nf-help-title nf-rev" style="text-align:center;">
        <?php echo $fa ? 'مسیرهای <em>پیشنهادی</em>' : 'Suggested <em>Routes</em>'; ?>
      </h3>

      <p class="nf-help-sub nf-rev d1">
        <?php echo $fa
          ? 'اگر مطمئن نیستید از کجا ادامه دهید، یکی از بخش‌های زیر می‌تواند شما را سریع‌تر به مقصد برساند.'
          : 'Not sure where to go next? These sections can help you get back on track faster.'; ?>
      </p>

      <div class="nf-card-grid">
        <?php
        $cards = $fa ? [
          [
            stb_url($B . '/markets/'),
            '<path d="M3 3v18h18"/><path d="M7 15l4-4 3 3 5-7" stroke-linecap="round" stroke-linejoin="round"/>',
            'بازارها',
            'مشاهده نمادها، دارایی‌ها و بازارهای قابل معامله در STB.',
            'مشاهده بازارها'
          ],
          [
            stb_url($B . '/platforms/'),
            '<rect x="3" y="4" width="18" height="14" rx="2"/><path d="M8 20h8M12 18v2" stroke-linecap="round"/>',
            'پلتفرم‌ها',
            'دسترسی به MetaTrader، WebTrader و ابزارهای معاملاتی.',
            'مشاهده پلتفرم‌ها'
          ],
          [
            stb_url($B . '/contact-us/'),
            '<path d="M21 15a4 4 0 01-4 4H7l-4 3V7a4 4 0 014-4h10a4 4 0 014 4z" stroke-linejoin="round"/>',
            'پشتیبانی',
            'اگر فکر می‌کنید این صفحه باید وجود داشته باشد، با تیم پشتیبانی در تماس باشید.',
            'تماس با ما'
          ],
        ] : [
          [
            stb_url($B . '/markets/'),
            '<path d="M3 3v18h18"/><path d="M7 15l4-4 3 3 5-7" stroke-linecap="round" stroke-linejoin="round"/>',
            'Markets',
            'Explore instruments, assets, and tradable markets available at STB.',
            'View Markets'
          ],
          [
            stb_url($B . '/platforms/'),
            '<rect x="3" y="4" width="18" height="14" rx="2"/><path d="M8 20h8M12 18v2" stroke-linecap="round"/>',
            'Platforms',
            'Access MetaTrader, WebTrader, and professional trading tools.',
            'View Platforms'
          ],
          [
            stb_url($B . '/contact-us/'),
            '<path d="M21 15a4 4 0 01-4 4H7l-4 3V7a4 4 0 014-4h10a4 4 0 014 4z" stroke-linejoin="round"/>',
            'Support',
            'If you believe this page should exist, contact the STB support team.',
            'Contact Us'
          ],
        ];

        foreach($cards as $i => $card):
        ?>
          <div class="nf-card nf-rev d<?php echo $i + 1; ?>">
            <div class="nf-card-icon">
              <svg viewBox="0 0 24 24"><?php echo $card[1]; ?></svg>
            </div>

            <div class="nf-card-title"><?php echo esc_html($card[2]); ?></div>
            <div class="nf-card-desc"><?php echo esc_html($card[3]); ?></div>

            <a href="<?php echo esc_url($card[0]); ?>" class="nf-card-link">
              <?php echo esc_html($card[4]); ?>
            </a>
          </div>
        <?php endforeach; ?>
      </div>
    </div>
  </section>
</article>

<script>
(function(){
  var nd = document.getElementById('nf-shapes');

  if(nd){
    for(var i = 0; i < 9; i++){
      var s = document.createElement('div');
      var sz = 18 + Math.random() * 44;

      s.className = 'nf-shape';
      s.style.cssText =
        'left:' + Math.random() * 92 + '%;' +
        'top:' + Math.random() * 88 + '%;' +
        'width:' + sz + 'px;' +
        'height:' + sz + 'px;' +
        '--dx:' + (Math.random() * 22 - 11) + 'px;' +
        '--dy:' + (Math.random() * 22 - 11) + 'px;' +
        '--rot:' + (Math.random() * 12 - 6) + 'deg;' +
        'animation-duration:' + (5 + Math.random() * 8) + 's;' +
        'animation-delay:' + (-Math.random() * 5) + 's;';

      nd.appendChild(s);
    }
  }

  if('IntersectionObserver' in window){
    var obs = new IntersectionObserver(function(entries){
      entries.forEach(function(entry){
        if(entry.isIntersecting){
          entry.target.classList.add('vis');
          obs.unobserve(entry.target);
        }
      });
    }, {threshold:.1});

    document.querySelectorAll('.nf-rev').forEach(function(el){
      obs.observe(el);
    });
  } else {
    document.querySelectorAll('.nf-rev').forEach(function(el){
      el.classList.add('vis');
    });
  }
})();
</script>
<?php get_footer(); ?>