<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TFNEXUS Pty Ltd</title>
<style>
  *{margin:0;padding:0;box-sizing:border-box}
  body{font-family:'Segoe UI',system-ui,sans-serif;color:#1a1a2e;background:#f8f9fc}
  :root{--blue:#1A73E8;--blue-dark:#1558B0;--blue-light:#E8F0FD;--gray:#6b7280;--border:#e2e8f0;--white:#fff}

  nav{background:var(--white);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100}
  .nav-inner{max-width:1100px;margin:0 auto;padding:0 2rem;display:flex;align-items:center;justify-content:space-between;height:64px}
  .logo{display:flex;align-items:center;gap:10px;text-decoration:none;cursor:pointer}
  .logo-mark{width:36px;height:36px;background:var(--blue);border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:14px;letter-spacing:1px}
  .logo-text{font-size:18px;font-weight:700;color:#1a1a2e;letter-spacing:1px}
  .logo-sub{font-size:10px;color:var(--gray);letter-spacing:2px;text-transform:uppercase;display:block;line-height:1}
  .nav-links{display:flex;gap:0}
  .nav-btn{background:none;border:none;padding:0 1.25rem;height:64px;font-size:14px;font-weight:500;color:var(--gray);cursor:pointer;border-bottom:2px solid transparent;transition:all .2s}
  .nav-btn:hover{color:var(--blue)}
  .nav-btn.active{color:var(--blue);border-bottom-color:var(--blue)}
  .nav-cta{background:var(--blue);color:#fff;border:none;padding:8px 20px;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:background .2s}
  .nav-cta:hover{background:var(--blue-dark)}

  .page{display:none}
  .page.active{display:block}

  .hero{background:linear-gradient(135deg,#1a1a2e 0%,#16213e 60%,#0f3460 100%);color:#fff;padding:80px 2rem}
  .hero-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
  .hero-badge{display:inline-block;background:rgba(26,115,232,.25);color:#7eb8f7;font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;padding:5px 14px;border-radius:20px;margin-bottom:1.25rem;border:1px solid rgba(126,184,247,.3)}
  .hero h1{font-size:2.6rem;font-weight:700;line-height:1.2;margin-bottom:1rem}
  .hero h1 span{color:#7eb8f7}
  .hero p{font-size:1.05rem;color:rgba(255,255,255,.7);line-height:1.8;margin-bottom:2rem}
  .hero-btns{display:flex;gap:12px;flex-wrap:wrap}
  .btn-primary{background:var(--blue);color:#fff;border:none;padding:12px 28px;border-radius:6px;font-size:15px;font-weight:500;cursor:pointer;transition:background .2s}
  .btn-primary:hover{background:var(--blue-dark)}
  .btn-outline{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.4);padding:12px 28px;border-radius:6px;font-size:15px;font-weight:500;cursor:pointer;transition:all .2s}
  .btn-outline:hover{border-color:#fff;background:rgba(255,255,255,.08)}
  .hero-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .hero-card{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:20px 16px;cursor:pointer;transition:background .2s}
  .hero-card:hover{background:rgba(255,255,255,.12)}
  .hero-card-icon{font-size:20px;margin-bottom:8px}
  .hero-card h4{font-size:13px;font-weight:600;margin-bottom:4px}
  .hero-card p{font-size:12px;color:rgba(255,255,255,.55);line-height:1.5}

  .page-hero{background:linear-gradient(135deg,#1a1a2e,#0f3460);color:#fff;padding:56px 2rem}
  .page-hero-inner{max-width:1100px;margin:0 auto}
  .page-hero-tag{display:inline-block;background:rgba(26,115,232,.3);color:#7eb8f7;font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;padding:5px 14px;border-radius:20px;margin-bottom:1rem;border:1px solid rgba(126,184,247,.25)}
  .page-hero h1{font-size:2.2rem;font-weight:700;margin-bottom:.75rem}
  .page-hero p{font-size:1rem;color:rgba(255,255,255,.7);max-width:600px;line-height:1.8}

  .content{max-width:1100px;margin:0 auto;padding:3rem 2rem 5rem}

  .section-head{text-align:center;margin-bottom:3rem}
  .section-tag{display:inline-block;background:var(--blue-light);color:var(--blue);font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;padding:5px 14px;border-radius:20px;margin-bottom:1rem}
  .section-head h2{font-size:2rem;font-weight:700;margin-bottom:.75rem}
  .section-head p{font-size:1rem;color:var(--gray);max-width:560px;margin:0 auto;line-height:1.8}

  .cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-bottom:3rem}
  .cards-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;margin-bottom:3rem}
  .card{background:var(--white);border:1px solid var(--border);border-radius:12px;padding:1.75rem;transition:border-color .2s,box-shadow .2s}
  .card:hover{border-color:var(--blue);box-shadow:0 4px 20px rgba(26,115,232,.1)}
  .card-icon{width:44px;height:44px;background:var(--blue-light);border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:1rem}
  .card-icon svg{width:22px;height:22px;stroke:var(--blue);fill:none;stroke-width:1.8}
  .card h3{font-size:15px;font-weight:600;margin-bottom:.5rem}
  .card p{font-size:13.5px;color:var(--gray);line-height:1.7}

  .home-services{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-bottom:4rem}
  .svc-card{background:var(--white);border:1px solid var(--border);border-radius:14px;padding:2rem;cursor:pointer;transition:border-color .2s,box-shadow .2s,transform .2s}
  .svc-card:hover{border-color:var(--blue);box-shadow:0 8px 30px rgba(26,115,232,.12);transform:translateY(-3px)}
  .svc-card-emoji{font-size:2rem;margin-bottom:1rem}
  .svc-card h3{font-size:17px;font-weight:700;margin-bottom:.5rem}
  .svc-card p{font-size:13.5px;color:var(--gray);line-height:1.7;margin-bottom:1.25rem}
  .svc-card-link{font-size:13px;font-weight:600;color:var(--blue)}

  .pricing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;margin-bottom:3rem}
  .pricing-grid-2{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-bottom:3rem}
  .price-card{background:var(--white);border:1px solid var(--border);border-radius:12px;padding:1.75rem;position:relative}
  .price-card.featured{border-color:var(--blue);border-width:2px}
  .featured-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--blue);color:#fff;font-size:11px;font-weight:600;letter-spacing:1px;padding:4px 16px;border-radius:20px;white-space:nowrap}
  .price-card h3{font-size:15px;font-weight:600;margin-bottom:.3rem}
  .price{font-size:2rem;font-weight:700;color:var(--blue);margin:.65rem 0}
  .price span{font-size:14px;font-weight:400;color:var(--gray)}
  .price-features{list-style:none;margin:1rem 0 0}
  .price-features li{font-size:13px;color:var(--gray);padding:5px 0;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--border)}
  .price-features li::before{content:"";width:6px;height:6px;background:var(--blue);border-radius:50%;flex-shrink:0}

  .trust-bar{background:var(--blue-light);border-radius:12px;padding:1.5rem 2rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:3rem;flex-wrap:wrap}
  .trust-item{display:flex;align-items:center;gap:10px}
  .trust-icon{width:36px;height:36px;background:var(--white);border-radius:8px;display:flex;align-items:center;justify-content:center}
  .trust-icon svg{width:18px;height:18px;stroke:var(--blue);fill:none;stroke-width:2}
  .trust-item p{font-size:13px;font-weight:500}
  .trust-item span{font-size:12px;color:var(--gray)}

  .skill-block{background:var(--white);border:1px solid var(--border);border-radius:12px;padding:1.75rem;margin-bottom:3rem}
  .skill-block h3{font-size:15px;font-weight:600;margin-bottom:1rem}
  .skill-tag{display:inline-block;background:var(--blue-light);color:var(--blue);font-size:12px;font-weight:500;padding:4px 12px;border-radius:20px;margin:3px}

  .event-types{display:flex;flex-wrap:wrap;gap:8px;margin-top:1rem}
  .event-tag{background:#f1f5f9;color:#475569;font-size:12px;padding:4px 12px;border-radius:20px}

  .bundle-wrap{max-width:520px;margin:0 auto 3rem}

  .cta-block{background:linear-gradient(135deg,#1a1a2e,#0f3460);border-radius:14px;padding:3rem;text-align:center;color:#fff}
  .cta-block h2{font-size:1.75rem;font-weight:700;margin-bottom:.75rem}
  .cta-block p{color:rgba(255,255,255,.7);margin-bottom:1.5rem;font-size:1rem;line-height:1.8}
  .cta-email{display:inline-block;color:#fff;font-size:1.1rem;font-weight:600;text-decoration:none;border-bottom:2px solid rgba(255,255,255,.4);padding-bottom:3px;transition:border-color .2s}
  .cta-email:hover{border-bottom-color:#fff}

  footer{background:#1a1a2e;color:rgba(255,255,255,.6);text-align:center;padding:2rem;font-size:13px}
  .footer-inner{max-width:1100px;margin:0 auto}
  .footer-links{display:flex;justify-content:center;gap:2rem;margin-bottom:1rem;flex-wrap:wrap}
  .footer-links a{color:rgba(255,255,255,.6);text-decoration:none;cursor:pointer}
  .footer-links a:hover{color:#fff}

  @media(max-width:768px){
    .hero-inner,.cards-grid,.cards-grid-2,.home-services,.pricing-grid,.pricing-grid-2{grid-template-columns:1fr}
    .hero-cards{grid-template-columns:1fr 1fr}
    .nav-links{display:none}
    .hero h1,.page-hero h1{font-size:1.8rem}
    .trust-bar{flex-direction:column;align-items:flex-start}
  }
</style>
</head>
<body>

<nav>
  <div class="nav-inner">
    <div class="logo" onclick="showPage('home')">
      <div class="logo-mark">TF</div>
      <div>
        <div class="logo-text">TFNEXUS</div>
        <span class="logo-sub">Pty Ltd · Technology Solutions</span>
      </div>
    </div>
    <div class="nav-links">
      <button class="nav-btn active" id="nav-home" onclick="showPage('home')">Home</button>
      <button class="nav-btn" id="nav-hosting" onclick="showPage('hosting')">Web & Hosting</button>
      <button class="nav-btn" id="nav-itsupport" onclick="showPage('itsupport')">IT Support</button>
      <button class="nav-btn" id="nav-sound" onclick="showPage('sound')">Sound & Events</button>
    </div>
    <button class="nav-cta" onclick="showPage('hosting')">Get in Touch</button>
  </div>
</nav>

<!-- ========== HOME ========== -->
<div id="page-home" class="page active">
  <section class="hero">
    <div class="hero-inner">
      <div>
        <div class="hero-badge">Cape Town · South Africa</div>
        <h1>Smart tech solutions for <span>real business</span> needs</h1>
        <p>TFNEXUS delivers professional website hosting, hands-on IT support, and front-of-house sound for small events — all from one trusted local provider.</p>
        <div class="hero-btns">
          <button class="btn-primary" onclick="showPage('hosting')">Our Services</button>
          <button class="btn-outline" onclick="showPage('itsupport')">IT Support</button>
        </div>
      </div>
      <div class="hero-cards">
        <div class="hero-card" onclick="showPage('hosting')">
          <div class="hero-card-icon">🌐</div>
          <h4>Web & Hosting</h4>
          <p>Websites and managed hosting for local businesses</p>
        </div>
        <div class="hero-card" onclick="showPage('itsupport')">
          <div class="hero-card-icon">🖥️</div>
          <h4>IT Support</h4>
          <p>Remote and on-site technical support</p>
        </div>
        <div class="hero-card" onclick="showPage('sound')">
          <div class="hero-card-icon">🔊</div>
          <h4>Sound & Events</h4>
          <p>Front-of-house sound for small events</p>
        </div>
        <div class="hero-card">
          <div class="hero-card-icon">📍</div>
          <h4>Based in Cape Town</h4>
          <p>Local service, professional standards</p>
        </div>
      </div>
    </div>
  </section>
  <div class="content">
    <div class="section-head">
      <div class="section-tag">What We Do</div>
      <h2>Three services, one provider</h2>
      <p>Everything your small business needs — online presence, technical support, and event audio — handled locally in Cape Town.</p>
    </div>
    <div class="home-services">
      <div class="svc-card" onclick="showPage('hosting')">
        <div class="svc-card-emoji">🌐</div>
        <h3>Web & Hosting</h3>
        <p>Professional websites, domain registration, and managed hosting — from R20/month. Powered by trusted platforms with local support.</p>
        <div class="svc-card-link">View packages →</div>
      </div>
      <div class="svc-card" onclick="showPage('itsupport')">
        <div class="svc-card-emoji">🖥️</div>
        <h3>IT Support</h3>
        <p>Remote and on-site support for networks, servers, hardware, and software. Experienced with MikroTik, UniFi, Windows Server, and Linux.</p>
        <div class="svc-card-link">View support options →</div>
      </div>
      <div class="svc-card" onclick="showPage('sound')">
        <div class="svc-card-emoji">🔊</div>
        <h3>Sound & Events</h3>
        <p>Front-of-house PA setup and operation for small events. Clean audio, on-site technician, and full setup/teardown included.</p>
        <div class="svc-card-link">Book your event →</div>
      </div>
    </div>
    <div class="cta-block">
      <h2>Not sure where to start?</h2>
      <p>Reach out and we'll point you in the right direction.</p>
      <a class="cta-email" href="mailto:info@tfnexus.co.za">info@tfnexus.co.za</a>
    </div>
  </div>
</div>

<!-- ========== HOSTING ========== -->
<div id="page-hosting" class="page">
  <div class="page-hero">
    <div class="page-hero-inner">
      <div class="page-hero-tag">Web & Hosting</div>
      <h1>Your online presence, sorted</h1>
      <p>From design to managed hosting, we handle the technical side so you can focus on running your business.</p>
    </div>
  </div>
  <div class="content">
    <div class="cards-grid">
      <div class="card">
        <div class="card-icon"><svg viewBox="0 0 24 24"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg></div>
        <h3>Website Design</h3>
        <p>Clean, mobile-friendly websites built to represent your brand. WordPress-based for easy content management.</p>
      </div>
      <div class="card">
        <div class="card-icon"><svg viewBox="0 0 24 24"><path d="M22 12H2M22 12a10 10 0 1 1-20 0 10 10 0 0 1 20 0z"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg></div>
        <h3>Domain Registration</h3>
        <p>Register and manage your .co.za or .com domain with full DNS control and email forwarding setup.</p>
      </div>
      <div class="card">
        <div class="card-icon"><svg viewBox="0 0 24 24"><rect x="2" y="2" width="20" height="8" rx="2"/><rect x="2" y="14" width="20" height="8" rx="2"/><path d="M6 6h.01M6 18h.01"/></svg></div>
        <h3>Managed Hosting</h3>
        <p>Worry-free hosting with uptime monitoring, SSL certificates, backups, and ongoing maintenance included.</p>
      </div>
    </div>

    <div class="trust-bar">
      <div class="trust-item">
        <div class="trust-icon"><svg viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg></div>
        <div><p>SSL on every site</p><span>Free HTTPS included</span></div>
      </div>
      <div class="trust-item">
        <div class="trust-icon"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg></div>
        <div><p>99.9% uptime SLA</p><span>Reliable infrastructure</span></div>
      </div>
      <div class="trust-item">
        <div class="trust-icon"><svg viewBox="0 0 24 24"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg></div>
        <div><p>Local support</p><span>Real person, Cape Town</span></div>
      </div>
      <div class="trust-item">
        <div class="trust-icon"><svg viewBox="0 0 24 24"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/></svg></div>
        <div><p>Daily backups</p><span>Your data is safe</span></div>
      </div>
    </div>

    <div class="section-head">
      <div class="section-tag">Pricing</div>
      <h2>Simple, transparent pricing</h2>
      <p>No hidden fees. All plans include 24/7 help desk support, unlimited bandwidth, and a free SSL certificate.</p>
    </div>
    <div class="pricing-grid">
      <div class="price-card">
        <h3>Student</h3>
        <p style="font-size:12px;color:var(--gray)">Personal projects</p>
        <div class="price">R20 <span>/ mo</span></div>
        <ul class="price-features">
          <li>1 email account</li>
          <li>MySQL database</li>
          <li>Basic storage</li>
          <li>Free SSL</li>
          <li>Limited bandwidth</li>
          <li>Daily backups</li>
          <li>WordPress compatible</li>
        </ul>
      </div>
      <div class="price-card">
        <h3>Package 1</h3>
        <p style="font-size:12px;color:var(--gray)">Individuals & small sites</p>
        <div class="price">R40 <span>/ mo</span></div>
        <ul class="price-features">
          <li>24/7 help desk</li>
          <li>Unlimited bandwidth</li>
          <li>Free SSL</li>
          <li>5 email accounts</li>
          <li>MySQL database</li>
          <li>Daily backups</li>
          <li>SSD storage</li>
          <li>WordPress ready</li>
        </ul>
      </div>
      <div class="price-card featured">
        <div class="featured-badge">Most Popular</div>
        <h3>Package 2</h3>
        <p style="font-size:12px;color:var(--gray)">Growing businesses</p>
        <div class="price">R60 <span>/ mo</span></div>
        <ul class="price-features">
          <li>24/7 help desk</li>
          <li>Unlimited bandwidth</li>
          <li>Free SSL</li>
          <li>10 email accounts</li>
          <li>MySQL database</li>
          <li>Daily backups</li>
          <li>SSD storage</li>
          <li>Free onboarding</li>
          <li>Regular updates</li>
        </ul>
      </div>
      <div class="price-card">
        <h3>Package 3</h3>
        <p style="font-size:12px;color:var(--gray)">Established organisations</p>
        <div class="price">R100 <span>/ mo</span></div>
        <ul class="price-features">
          <li>24/7 help desk</li>
          <li>Unlimited bandwidth</li>
          <li>Free SSL</li>
          <li>20 email accounts</li>
          <li>MySQL database</li>
          <li>Daily backups</li>
          <li>SSD storage</li>
          <li>Free onboarding</li>
          <li>Regular updates</li>
          <li>Full site migration</li>
        </ul>
      </div>
    </div>

    <div class="section-head" style="margin-top:3.5rem">
      <div class="section-tag">Bundle</div>
      <h2>Business Hosting + IT Support</h2>
      <p>Hosting and hands-on IT support in one affordable monthly package.</p>
    </div>
    <div class="bundle-wrap">
      <div class="price-card featured" style="text-align:center">
        <div class="featured-badge">Best Value Bundle</div>
        <h3 style="font-size:17px;margin-top:.5rem">Hosting + IT Support</h3>
        <p style="font-size:12px;color:var(--gray);margin-top:.25rem">Everything managed, one monthly fee</p>
        <div class="price" style="font-size:2.4rem">R250 <span>/ month</span></div>
        <ul class="price-features" style="text-align:left">
          <li>Everything in Package 2</li>
          <li>10 professional email accounts</li>
          <li>Free SSL + daily backups</li>
          <li>2 hrs remote IT support / month</li>
          <li>Network & connectivity support</li>
          <li>Software & OS troubleshooting</li>
          <li>Priority email & WhatsApp response</li>
          <li>Monthly system health check</li>
        </ul>
      </div>
    </div>

    <div class="cta-block">
      <h2>Ready to get your business online?</h2>
      <p>Get in touch and we'll discuss your website needs.</p>
      <a class="cta-email" href="mailto:info@tfnexus.co.za">info@tfnexus.co.za</a>
    </div>
  </div>
</div>

<!-- ========== IT SUPPORT ========== -->
<div id="page-itsupport" class="page">
  <div class="page-hero">
    <div class="page-hero-inner">
      <div class="page-hero-tag">IT Support</div>
      <h1>Hands-on IT support you can rely on</h1>
      <p>Remote and on-site technical support from an experienced IT professional. Networks, servers, hardware, security — we keep your systems running.</p>
    </div>
  </div>
  <div class="content">
    <div class="cards-grid">
      <div class="card">
        <div class="card-icon"><svg viewBox="0 0 24 24"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg></div>
        <h3>Remote Support</h3>
        <p>Fast, secure remote troubleshooting for software issues, configurations, and system errors — no travel needed.</p>
      </div>
      <div class="card">
        <div class="card-icon"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14M4.93 4.93a10 10 0 0 0 0 14.14"/></svg></div>
        <h3>Network Setup & Support</h3>
        <p>Router configuration, VLAN setup, wireless networks, and ongoing maintenance for home or office environments.</p>
      </div>
      <div class="card">
        <div class="card-icon"><svg viewBox="0 0 24 24"><rect x="2" y="2" width="20" height="8" rx="2"/><rect x="2" y="14" width="20" height="8" rx="2"/><path d="M6 6h.01M6 18h.01"/></svg></div>
        <h3>Server & Infrastructure</h3>
        <p>Windows Server, Active Directory, DNS, Group Policy, and Linux server administration for small business environments.</p>
      </div>
      <div class="card">
        <div class="card-icon"><svg viewBox="0 0 24 24"><path d="M5 12H19M12 5l7 7-7 7"/></svg></div>
        <h3>Hardware & Diagnostics</h3>
        <p>Component testing, fault diagnosis, RAM/storage upgrades, and PC builds. Hands-on technical work done right.</p>
      </div>
      <div class="card">
        <div class="card-icon"><svg viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg></div>
        <h3>Security & Monitoring</h3>
        <p>Firewall configuration, IDS/IPS setup, VLAN segmentation, and basic SIEM monitoring for small environments.</p>
      </div>
      <div class="card">
        <div class="card-icon"><svg viewBox="0 0 24 24"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg></div>
        <h3>IT Consulting</h3>
        <p>Advice on hardware purchasing, software selection, and IT strategy — practical guidance for small businesses.</p>
      </div>
    </div>

    <div class="skill-block">
      <h3>Technical skills</h3>
      <div>
        <span class="skill-tag">MikroTik RouterOS</span>
        <span class="skill-tag">UniFi / Ubiquiti</span>
        <span class="skill-tag">Windows Server 2022</span>
        <span class="skill-tag">Active Directory</span>
        <span class="skill-tag">Ubuntu Linux</span>
        <span class="skill-tag">Docker / Portainer</span>
        <span class="skill-tag">Network Security</span>
        <span class="skill-tag">VLAN & Firewall</span>
        <span class="skill-tag">DNS & DHCP</span>
        <span class="skill-tag">Hardware Repair</span>
        <span class="skill-tag">KVM Virtualisation</span>
        <span class="skill-tag">Remote Access / VPN</span>
      </div>
    </div>

    <div class="section-head">
      <div class="section-tag">Pricing</div>
      <h2>Flexible support options</h2>
      <p>Pay as you go or lock in a monthly retainer for priority access and better rates.</p>
    </div>
    <div class="pricing-grid-2">
      <div class="price-card">
        <h3>Ad-hoc Support</h3>
        <p style="font-size:13px;color:var(--gray)">Pay as you go</p>
        <div class="price">R100</div>
        <ul class="price-features">
          <li>Remote or on-site</li>
          <li>Any technical issue</li>
          <li>Same-day if available</li>
        </ul>
      </div>
      <div class="price-card featured">
        <div class="featured-badge">Best Value</div>
        <h3>Monthly Retainer</h3>
        <p style="font-size:13px;color:var(--gray)">For small businesses</p>
        <div class="price">R800 <span>/ month</span></div>
        <ul class="price-features">
          <li>4 hours support / month</li>
          <li>Priority response</li>
          <li>Remote & on-site</li>
          <li>Monthly health check</li>
        </ul>
      </div>
      <div class="price-card">
        <h3>Project-based</h3>
        <p style="font-size:13px;color:var(--gray)">One-time setup or build</p>
        <div class="price">Custom <span>quote</span></div>
        <ul class="price-features">
          <li>Network infrastructure</li>
          <li>Server deployment</li>
          <li>Security hardening</li>
          <li>Scoped & quoted upfront</li>
        </ul>
      </div>
    </div>

    <div class="cta-block">
      <h2>Having a technical issue?</h2>
      <p>Get in touch and describe your problem — we'll respond quickly.</p>
      <a class="cta-email" href="mailto:info@tfnexus.co.za">info@tfnexus.co.za</a>
    </div>
  </div>
</div>

<!-- ========== SOUND ========== -->
<div id="page-sound" class="page">
  <div class="page-hero">
    <div class="page-hero-inner">
      <div class="page-hero-tag">Sound & Events</div>
      <h1>Professional sound for your small event</h1>
      <p>Front-of-house audio setup, operation, and support for intimate events across Cape Town. Clean sound, minimal fuss, on-site technician.</p>
    </div>
  </div>
  <div class="content">
    <div class="cards-grid-2">
      <div class="card">
        <h3>What's included</h3>
        <p>Full PA system setup and takedown, mixing desk operation, microphone setup, and on-site technical support throughout your event.</p>
        <div class="event-types">
          <span class="event-tag">PA Setup & Teardown</span>
          <span class="event-tag">Live Mixing</span>
          <span class="event-tag">Microphone Setup</span>
          <span class="event-tag">Monitor Feeds</span>
          <span class="event-tag">On-site Technician</span>
        </div>
      </div>
      <div class="card">
        <h3>Ideal for</h3>
        <p>Small gatherings where good audio makes the difference — from speeches to live performances, we keep things sounding clear.</p>
        <div class="event-types">
          <span class="event-tag">Corporate functions</span>
          <span class="event-tag">Church services</span>
          <span class="event-tag">School events</span>
          <span class="event-tag">Community gatherings</span>
          <span class="event-tag">Birthdays & celebrations</span>
          <span class="event-tag">Live acoustic sets</span>
        </div>
      </div>
      <div class="card">
        <h3>How it works</h3>
        <p>Tell us about your event — venue size, audience count, and what you need. We confirm availability, arrive early, set up, run the show, and pack down after.</p>
      </div>
      <div class="card">
        <h3>Coverage area</h3>
        <p>Based in Cape Town, covering the Northern Suburbs, Southern Suburbs, Cape Flats, and Atlantic Seaboard. Travel surcharges may apply for distant venues.</p>
      </div>
    </div>

    <div class="section-head">
      <div class="section-tag">Pricing</div>
      <h2>One simple package</h2>
      <p>Everything you need for your small event at one flat rate.</p>
    </div>
    <div style="max-width:360px;margin:0 auto 3rem">
      <div class="price-card featured" style="text-align:center">
        <div class="featured-badge">All inclusive</div>
        <h3 style="margin-top:.5rem">Small Event Package</h3>
        <p style="font-size:13px;color:var(--gray);margin-top:.25rem">Everything you need for your event</p>
        <div class="price" style="font-size:2.4rem">R650 <span>/ event</span></div>
        <ul class="price-features" style="text-align:left">
          <li>PA system & cabling</li>
          <li>Microphone setup</li>
          <li>Mixing desk operation</li>
          <li>Setup & teardown</li>
          <li>On-site technician</li>
          <li>Cape Town coverage</li>
        </ul>
      </div>
    </div>

    <div class="cta-block">
      <h2>Book sound for your event</h2>
      <p>Tell us your event date, venue, and guest count — we'll confirm availability and get back to you.</p>
      <a class="cta-email" href="mailto:info@tfnexus.co.za">info@tfnexus.co.za</a>
    </div>
  </div>
</div>

<footer>
  <div class="footer-inner">
    <div class="footer-links">
      <a onclick="showPage('home')">Home</a>
      <a onclick="showPage('hosting')">Web & Hosting</a>
      <a onclick="showPage('itsupport')">IT Support</a>
      <a onclick="showPage('sound')">Sound & Events</a>
      <a href="mailto:info@tfnexus.co.za">info@tfnexus.co.za</a>
    </div>
    <p>© 2026 TFNEXUS Pty Ltd · Cape Town, South Africa · tfnexus.co.za</p>
  </div>
</footer>

<script>
function showPage(id) {
  document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
  document.querySelectorAll('.nav-btn').forEach(b => b.classList.remove('active'));
  document.getElementById('page-' + id).classList.add('active');
  const nb = document.getElementById('nav-' + id);
  if (nb) nb.classList.add('active');
  window.scrollTo({top:0,behavior:'smooth'});
}
</script>
</body>
</html>