<?php
//Developer: CORE TECH WEB DESIGN
$page_title = "Page Not Found - SoftBillsHub - Virtual Numbers, Social Media Growth, Airtime, Data & Bill Payments";
$page_description = "Your one-stop platform for virtual number verification, social media growth (followers, likes, comments), airtime & data top-up, cable TV subscriptions, and electricity bill payments. Fast, secure, and affordable.";
include('../include/header.php');
$svg_ico = '<svg width="48" height="48" fill="none" stroke="var(--g)" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>';
$c1='rgba(31,208,112,.08)'; $c2='rgba(31,208,112,.22)'; $grad='linear-gradient(135deg,var(--g),#13a855)';
$url=$site_data['web_url'];
?>
<style>
.err-section{min-height:80vh;display:flex;align-items:center;padding:5rem 2rem;}
.err-wrap{max-width:800px;margin:0 auto;text-align:center;}
.err-ico-ring{width:110px;height:110px;margin:0 auto 2rem;border-radius:50%;background:<?php echo $c1;?>;border:2px solid <?php echo $c2;?>;display:flex;align-items:center;justify-content:center;animation:float 3.5s ease-in-out infinite;}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.err-code{font-size:clamp(5rem,14vw,10rem);font-weight:900;background:<?php echo $grad;?>;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;margin-bottom:1rem;}
.err-title{font-size:clamp(1.75rem,4vw,2.75rem);font-weight:800;letter-spacing:-.04em;color:var(--text);margin-bottom:1rem;}
.err-msg{font-size:1rem;line-height:1.8;color:var(--text2);max-width:560px;margin:0 auto 2.5rem;}
.err-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:3rem;}
.eb-p{display:inline-flex;align-items:center;gap:8px;padding:13px 30px;background:var(--g);color:#000;border-radius:12px;font-size:.875rem;font-weight:700;transition:all .25s;box-shadow:0 4px 20px var(--g-glow);}
.eb-p:hover{background:var(--g2);transform:translateY(-2px);}
.eb-o{display:inline-flex;align-items:center;gap:8px;padding:12px 26px;background:var(--surface);color:var(--text);border:1.5px solid var(--border2);border-radius:12px;font-size:.875rem;font-weight:600;transition:all .25s;cursor:pointer;font-family:inherit;border:1.5px solid var(--border2);}
.eb-o:hover{border-color:var(--g);color:var(--g);transform:translateY(-2px);}
.quick{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;max-width:560px;margin:0 auto 3rem;}
.q-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:1.25rem;text-align:center;transition:all .3s;}
.q-card:hover{transform:translateY(-4px);border-color:rgba(31,208,112,.25);box-shadow:0 10px 30px var(--shadow);}
.q-card i{font-size:28px;color:var(--g);margin-bottom:.625rem;}
.q-card h4{font-size:.85rem;font-weight:700;color:var(--text);}
.help-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.25rem;max-width:700px;margin:0 auto;}
.hc{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:1.5rem;text-align:center;transition:all .3s;}
.hc:hover{transform:translateY(-4px);border-color:rgba(31,208,112,.2);box-shadow:0 12px 35px var(--shadow);}
.hc-ico{width:44px;height:44px;background:rgba(31,208,112,.08);border:1px solid rgba(31,208,112,.15);border-radius:11px;display:flex;align-items:center;justify-content:center;margin:0 auto .75rem;}
.hc h4{font-size:.875rem;font-weight:700;color:var(--text);margin-bottom:.375rem;}
.hc p{font-size:.775rem;color:var(--text3);margin-bottom:.75rem;line-height:1.6;}
.hc a{font-size:.775rem;color:var(--g);font-weight:700;}
@media(max-width:480px){.err-btns{flex-direction:column;align-items:stretch;}.eb-p,.eb-o{justify-content:center;}}
</style>
<div class="err-section">
  <div class="err-wrap">
    <div class="err-ico-ring"><?php echo $svg_ico;?></div>
    <div class="err-code">404</div>
    <h1 class="err-title">Page Not Found</h1>
    <p class="err-msg">Oops! The page you're looking for doesn't exist or has been moved. Let's get you back on track!</p>
    <div class="err-btns">
      <a href="<?php echo $url;?>/" class="eb-p"><svg width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></svg> Go to Homepage</a>
      <button onclick="history.back()" class="eb-o"><svg width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg> Go Back</button>
    </div>
    <p style="font-size:.8rem;color:var(--text3);margin-bottom:1rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;">You might be looking for:</p>
    <div class="quick">
      <a href="<?php echo $url;?>/services" class="q-card"><i class="fas fa-list"></i><h4>Services</h4></a>
      <a href="<?php echo $url;?>/signin" class="q-card"><i class="fas fa-sign-in-alt"></i><h4>Sign In</h4></a>
      <a href="<?php echo $url;?>/signup" class="q-card"><i class="fas fa-user-plus"></i><h4>Sign Up</h4></a>
    </div>
    <div class="help-grid">
      <div class="hc"><div class="hc-ico"><svg width="20" height="20" fill="none" stroke="var(--g)" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg></div><h4>Email Support</h4><p>Send us a message and we'll respond quickly</p><a href="<?php echo $url;?>/contact">Contact Us →</a></div>
      <div class="hc"><div class="hc-ico"><svg width="20" height="20" fill="none" stroke="var(--g)" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><h4>FAQ</h4><p>Find answers to commonly asked questions</p><a href="<?php echo $url;?>/faq">View FAQs →</a></div>
      <div class="hc"><div class="hc-ico"><svg width="20" height="20" fill="none" stroke="var(--g)" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"/></svg></div><h4>Blog</h4><p>Learn more about our services and tips</p><a href="<?php echo $url;?>/blog">Read Blog →</a></div>
    </div>
  </div>
</div>
<?php include('../include/footer.php'); ?>
