<?php
//Developer: CORE TECH WEB DESIGN
$page_title = "Bad Gateway - 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');
$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:rgba(6,182,212,.08);border:2px solid rgba(6,182,212,.22);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:linear-gradient(135deg,#06b6d4,#0891b2);-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;}
.eb-o:hover{border-color:var(--g);color:var(--g);transform:translateY(-2px);}
.info-box{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:1.5rem 2rem;max-width:520px;margin:0 auto 2.5rem;text-align:left;}
.info-box h3{font-size:.9rem;font-weight:700;color:var(--text);margin-bottom:.75rem;}
.info-box p{font-size:.8rem;color:var(--text2);line-height:1.7;margin-bottom:.5rem;}
.info-box ul{list-style:none;display:flex;flex-direction:column;gap:.5rem;margin-top:.5rem;}
.info-box li{display:flex;align-items:flex-start;gap:8px;font-size:.8rem;color:var(--text2);line-height:1.6;}
.info-box li::before{content:'→';color:var(--g);flex-shrink:0;font-weight:700;}
.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"><svg width="48" height="48" fill="none" stroke="#06b6d4" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M8.111 16.404a5.5 5.5 0 017.778 0M12 20h.01m-7.08-7.071c3.904-3.905 10.236-3.905 14.141 0M1.394 9.393c5.857-5.857 15.355-5.857 21.213 0"/></svg></div>
    <div class="err-code">502</div>
    <h1 class="err-title">Bad Gateway</h1>
    <p class="err-msg">The server received an invalid response from the upstream server. This is usually a temporary issue. Please try again in a few moments.</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="location.reload()" 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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg> Refresh Page</button>
    </div>
    <div class="info-box"><h3>What does this mean?</h3><p>A 502 Bad Gateway error means one server received an invalid response from another. This is typically a temporary network issue or server overload.</p><ul><li>Try refreshing the page in a few seconds</li><li>Clear your browser cache and cookies</li><li>Check if the problem persists in a different browser</li><li>Contact support if the issue continues</li></ul></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 detailed message about the issue</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 common technical 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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/></svg></div><h4>Live Support</h4><p>Chat with our team on Telegram</p><a href="https://t.me/coretechwebdesign" target="_blank">Chat Now →</a></div>
    </div>
  </div>
</div>
<?php include('../include/footer.php'); ?>
