<!-- ══════════════════════════════════════════
   FOOTER
══════════════════════════════════════════ -->
<footer style="background:var(--navy);padding:5rem 0 2rem;position:relative;overflow:hidden">

  <!-- Subtle teal glow at top of footer -->
  <div style="position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(0,139,145,.4),transparent)"></div>
  <div style="position:absolute;top:-120px;left:50%;transform:translateX(-50%);width:600px;height:200px;border-radius:50%;background:radial-gradient(ellipse,rgba(0,139,145,.07),transparent 70%);pointer-events:none"></div>

  <div class="container" style="position:relative;z-index:1">
    <div class="row g-5 mb-5">

      <!-- Brand -->
      <div class="col-lg-4">
        <a href="index.php" class="nav-brand d-inline-flex mb-3 text-decoration-none">
          <em class="logo-mark">🎓</em>
          <span style="color:#fff;font-weight:900;font-size:1.3rem;margin-left:.5rem">Edu<span style="color:var(--teal-light)">Track</span></span>
        </a>
        <p style="color:rgba(255,255,255,.4);font-size:.875rem;line-height:1.8;max-width:300px;margin-bottom:1.25rem">
          A complete school management platform built for Ghanaian institutions. Trusted by schools across the country.
        </p>
        <!-- Orange accent stripe -->
        <div style="width:40px;height:3px;background:var(--grad-orange);border-radius:2px;margin-bottom:1.25rem"></div>
        <div class="d-flex gap-3">
          <a href="https://wa.me/233537793106" target="_blank"
             style="width:38px;height:38px;border-radius:9px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.45);text-decoration:none;transition:all .25s"
             onmouseover="this.style.background='rgba(37,211,102,.15)';this.style.borderColor='rgba(37,211,102,.35)';this.style.color='#25d366'"
             onmouseout="this.style.background='rgba(255,255,255,.05)';this.style.borderColor='rgba(255,255,255,.09)';this.style.color='rgba(255,255,255,.45)'">
            <i class="fab fa-whatsapp"></i>
          </a>
          <a href="mailto:info@oricnetwork.com"
             style="width:38px;height:38px;border-radius:9px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.45);text-decoration:none;transition:all .25s"
             onmouseover="this.style.background='rgba(0,139,145,.2)';this.style.borderColor='rgba(0,139,145,.4)';this.style.color='var(--teal-light)'"
             onmouseout="this.style.background='rgba(255,255,255,.05)';this.style.borderColor='rgba(255,255,255,.09)';this.style.color='rgba(255,255,255,.45)'">
            <i class="fas fa-envelope"></i>
          </a>
          <a href="tel:+233537793106"
             style="width:38px;height:38px;border-radius:9px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.45);text-decoration:none;transition:all .25s"
             onmouseover="this.style.background='rgba(245,162,0,.15)';this.style.borderColor='rgba(245,162,0,.35)';this.style.color='var(--orange)'"
             onmouseout="this.style.background='rgba(255,255,255,.05)';this.style.borderColor='rgba(255,255,255,.09)';this.style.color='rgba(255,255,255,.45)'">
            <i class="fas fa-phone"></i>
          </a>
        </div>
      </div>

      <!-- Product links -->
      <div class="col-6 col-lg-2">
        <div style="color:rgba(255,255,255,.22);font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:1.25rem">Product</div>
        <?php
        $product_links = [
          'index.php#features'  => 'Features',
          'how-it-works.php'    => 'How It Works',
          'index.php#pricing'   => 'Pricing',
          'index.php#signup'    => 'Get Started',
          'faq.php'             => 'FAQ',
        ];
        foreach ($product_links as $href => $label): ?>
        <div class="mb-2">
          <a href="<?= $href ?>"
             style="color:rgba(255,255,255,.45);text-decoration:none;font-size:.875rem;font-weight:500;transition:all .2s;display:inline-flex;align-items:center;gap:.4rem"
             onmouseover="this.style.color='var(--teal-light)';this.style.paddingLeft='.25rem'"
             onmouseout="this.style.color='rgba(255,255,255,.45)';this.style.paddingLeft='0'"><?= $label ?></a>
        </div>
        <?php endforeach; ?>
      </div>

      <!-- Legal links -->
      <div class="col-6 col-lg-2">
        <div style="color:rgba(255,255,255,.22);font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:1.25rem">Legal</div>
        <?php
        $legal_links = [
          'privacy.php' => 'Privacy Policy',
          'terms.php'   => 'Terms of Use',
        ];
        foreach ($legal_links as $href => $label): ?>
        <div class="mb-2">
          <a href="<?= $href ?>"
             style="color:rgba(255,255,255,.45);text-decoration:none;font-size:.875rem;font-weight:500;transition:all .2s;display:inline-flex;align-items:center;gap:.4rem"
             onmouseover="this.style.color='var(--teal-light)';this.style.paddingLeft='.25rem'"
             onmouseout="this.style.color='rgba(255,255,255,.45)';this.style.paddingLeft='0'"><?= $label ?></a>
        </div>
        <?php endforeach; ?>
      </div>

      <!-- Contact -->
      <div class="col-lg-4">
        <div style="color:rgba(255,255,255,.22);font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:1.25rem">Contact Us</div>
        <div class="d-flex flex-column gap-3">
          <?php
          $contacts = [
            ['fab fa-whatsapp','#25d366',   'WhatsApp','0537 793 106','https://wa.me/233537793106?text=Hi%2C+I+want+to+know+more+about+EduTrack'],
            ['fas fa-phone',  'var(--orange)','Phone',  '0537 793 106','tel:+233537793106'],
            ['fas fa-envelope','var(--teal-light)','Email','info@oricnetwork.com','mailto:info@oricnetwork.com'],
          ];
          foreach ($contacts as [$icon,$color,$label,$val,$href]): ?>
          <a href="<?= $href ?>" target="_blank" style="display:flex;align-items:center;gap:.75rem;text-decoration:none;transition:transform .2s" onmouseover="this.style.transform='translateX(4px)'" onmouseout="this.style.transform='translateX(0)'">
            <div style="width:36px;height:36px;border-radius:9px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:border-color .2s">
              <i class="<?= $icon ?>" style="color:<?= $color ?>;font-size:.9rem"></i>
            </div>
            <div>
              <div style="color:rgba(255,255,255,.28);font-size:.68rem;text-transform:uppercase;letter-spacing:.08em"><?= $label ?></div>
              <div style="color:rgba(255,255,255,.75);font-size:.875rem;font-weight:600"><?= $val ?></div>
            </div>
          </a>
          <?php endforeach; ?>
        </div>
      </div>
    </div>

    <!-- Bottom bar -->
    <div style="border-top:1px solid rgba(255,255,255,.06);padding-top:2rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem">
      <div style="color:rgba(255,255,255,.28);font-size:.82rem">
        &copy; <?= date('Y') ?> Oric Network Limited. All rights reserved.
      </div>
      <div style="display:flex;gap:1.5rem;flex-wrap:wrap">
        <a href="privacy.php" style="color:rgba(255,255,255,.28);font-size:.82rem;text-decoration:none;transition:color .2s" onmouseover="this.style.color='var(--teal-light)'" onmouseout="this.style.color='rgba(255,255,255,.28)'">Privacy Policy</a>
        <a href="terms.php"   style="color:rgba(255,255,255,.28);font-size:.82rem;text-decoration:none;transition:color .2s" onmouseover="this.style.color='var(--teal-light)'" onmouseout="this.style.color='rgba(255,255,255,.28)'">Terms of Use</a>
      </div>
    </div>
  </div>
</footer>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
// Navbar scroll effect
const nav = document.getElementById('siteNav');
if (nav) {
  window.addEventListener('scroll', () => {
    nav.classList.toggle('scrolled', window.scrollY > 40);
  }, {passive: true});
}

// Mobile menu toggle
function toggleMenu() {
  const menu = document.getElementById('navMenu');
  const icon = document.getElementById('menuIcon');
  if (menu) {
    menu.classList.toggle('open');
    if (icon) icon.className = menu.classList.contains('open') ? 'fas fa-times' : 'fas fa-bars';
    document.body.style.overflow = menu.classList.contains('open') ? 'hidden' : '';
  }
}

// Scroll reveal
const observer = new IntersectionObserver(entries => {
  entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('visible'); observer.unobserve(e.target); } });
}, { threshold: 0.12 });
document.querySelectorAll('.reveal').forEach(el => observer.observe(el));

// Counter animation
function animateCounter(el, target, duration = 1600) {
  let start = 0, step = target / (duration / 16);
  const timer = setInterval(() => {
    start = Math.min(start + step, target);
    el.textContent = Math.floor(start).toLocaleString() + (el.dataset.suffix || '');
    if (start >= target) clearInterval(timer);
  }, 16);
}
const counterObs = new IntersectionObserver(entries => {
  entries.forEach(e => {
    if (e.isIntersecting) {
      const target = parseInt(e.target.dataset.target);
      if (!isNaN(target)) animateCounter(e.target, target);
      counterObs.unobserve(e.target);
    }
  });
}, { threshold: .5 });
document.querySelectorAll('[data-target]').forEach(el => counterObs.observe(el));
</script>
</body>
</html>
