<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>Mantsoe Software Solutions | Premium Digital Innovation</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600;14..32,700;14..32,800&family=Playfair+Display:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  :root {
    --navy-deep: #0a1a2f;
    --navy-mid: #0f2a4a;
    --ocean: #1e4a76;
    --blue-bright: #2c7be5;
    --blue-light: #5a9cf0;
    --gold: #f5a623;
    --cream-bg: #f8fafd;
    --pure-white: #ffffff;
    --slate: #5a6e7c;
    --shadow-xl: 0 25px 45px -12px rgba(10, 26, 47, 0.25);
    --shadow-md: 0 12px 28px -8px rgba(0, 0, 0, 0.08);
    --gradient-hero: linear-gradient(135deg, #0a1a2f 0%, #0f2a4a 50%, #1e4a76 100%);
  }

  body {
    font-family: 'Inter', sans-serif;
    background: var(--cream-bg);
    color: #1a2c3e;
    scroll-behavior: smooth;
  }

  h1, h2, h3, .nav-logo-text, .stat-num, .service-name, .pricing-name {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    letter-spacing: -0.3px;
  }

  /* Premium Navigation */
  nav {
    background: rgba(10, 26, 47, 0.98);
    backdrop-filter: blur(12px);
    padding: 0 3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid rgba(44, 123, 229, 0.3);
  }

  .nav-logo {
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    text-decoration: none;
  }

  .nav-logo-badge {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--blue-bright), var(--blue-light));
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Playfair Display', serif;
    font-size: 20px;
    font-weight: 800;
    color: white;
    box-shadow: 0 6px 14px rgba(44, 123, 229, 0.3);
  }

  .nav-logo-text strong {
    display: block;
    font-size: 18px;
    font-weight: 800;
    color: white;
    line-height: 1.2;
  }

  .nav-logo-text span {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 1.5px;
    text-transform: uppercase;
  }

  .nav-links {
    display: flex;
    gap: 8px;
    align-items: center;
  }

  .nav-link {
    padding: 8px 20px;
    border-radius: 40px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.25s ease;
    text-decoration: none;
  }

  .nav-link.active, .nav-link:hover {
    background: rgba(44, 123, 229, 0.2);
    color: var(--blue-light);
  }

  .nav-cta {
    padding: 8px 24px;
    border-radius: 40px;
    background: var(--blue-bright);
    color: white;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.25s;
    text-decoration: none;
    margin-left: 8px;
    box-shadow: 0 4px 12px rgba(44, 123, 229, 0.3);
  }

  .nav-cta:hover {
    background: var(--blue-light);
    transform: translateY(-2px);
  }

  /* Hero Section with Floating Icons */
  .hero {
    min-height: 92vh;
    background: var(--gradient-hero);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 5rem 2rem;
    position: relative;
    overflow: hidden;
  }

  .hero-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
  }

  /* Floating Tech Icons */
  .floating-icons {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
  }

  .float-icon {
    position: absolute;
    font-size: 3rem;
    opacity: 0.12;
    animation: float 6s ease-in-out infinite;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.2));
    transition: opacity 0.3s ease;
  }

  .float-icon:hover {
    opacity: 0.25;
  }

  @keyframes float {
    0% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(5deg); }
    100% { transform: translateY(0px) rotate(0deg); }
  }

  .float-icon:nth-child(1) { top: 12%; left: 5%; animation-delay: 0s; animation-duration: 7s; font-size: 3.5rem; }
  .float-icon:nth-child(2) { top: 18%; right: 8%; animation-delay: 1s; animation-duration: 8s; }
  .float-icon:nth-child(3) { bottom: 20%; left: 10%; animation-delay: 2s; animation-duration: 6s; }
  .float-icon:nth-child(4) { bottom: 15%; right: 12%; animation-delay: 0.5s; animation-duration: 7.5s; }
  .float-icon:nth-child(5) { top: 45%; left: 3%; animation-delay: 1.5s; animation-duration: 9s; font-size: 2.8rem; }
  .float-icon:nth-child(6) { top: 60%; right: 5%; animation-delay: 2.5s; animation-duration: 6.5s; }
  .float-icon:nth-child(7) { top: 30%; right: 20%; animation-delay: 3s; animation-duration: 8.5s; }

  @media (max-width: 768px) {
    .float-icon { font-size: 2rem !important; opacity: 0.08; }
  }

  .hero-content {
    max-width: 800px;
    position: relative;
    z-index: 10;
  }

  .hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(44, 123, 229, 0.2);
    border: 1px solid rgba(90, 156, 240, 0.4);
    color: #a0c4ff;
    padding: 8px 20px;
    border-radius: 60px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 2rem;
  }

  .hero-badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2c7be5;
    animation: pulse 2s infinite;
  }

  @keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
  }

  .hero h1 {
    font-size: 64px;
    line-height: 1.1;
    margin-bottom: 1.25rem;
    font-weight: 800;
  }

  .hero h1 span {
    color: var(--gold);
  }

  .hero p {
    font-size: 18px;
    opacity: 0.85;
    line-height: 1.8;
    margin-bottom: 2.5rem;
    max-width: 580px;
    margin-left: auto;
    margin-right: auto;
  }

  .hero-btns {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 4rem;
  }

  .btn-hero-primary {
    padding: 14px 36px;
    border-radius: 60px;
    background: var(--blue-bright);
    border: none;
    color: white;
    font-weight: 800;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.25s;
    box-shadow: 0 8px 20px rgba(44, 123, 229, 0.3);
  }

  .btn-hero-primary:hover {
    background: var(--blue-light);
    transform: translateY(-3px);
  }

  .btn-hero-secondary {
    padding: 14px 36px;
    border-radius: 60px;
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    font-weight: 800;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.25s;
  }

  .btn-hero-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: white;
  }

  .hero-stats {
    display: flex;
    gap: 3rem;
    justify-content: center;
    flex-wrap: wrap;
  }

  .hero-stat-num {
    font-size: 38px;
    font-weight: 800;
    color: var(--gold);
  }

  .hero-stat-label {
    font-size: 13px;
    opacity: 0.6;
    margin-top: 4px;
  }

  /* Section Styles */
  .section {
    padding: 5rem 2rem;
    scroll-margin-top: 80px;
  }

  .section-center {
    text-align: center;
    margin-bottom: 3rem;
  }

  .section-tag {
    display: inline-block;
    padding: 5px 18px;
    border-radius: 60px;
    background: rgba(44, 123, 229, 0.1);
    color: var(--blue-bright);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 16px;
  }

  .section-center h2 {
    font-size: 42px;
    color: var(--navy-deep);
    margin-bottom: 12px;
  }

  .section-center p {
    font-size: 16px;
    color: var(--slate);
    max-width: 560px;
    margin: 0 auto;
  }

  /* Services Grid */
  .services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 2rem;
  }

  .service-card {
    background: var(--pure-white);
    border-radius: 28px;
    padding: 2rem;
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.35s;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
  }

  .service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--blue-bright);
  }

  .service-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-xl);
    border-color: var(--blue-light);
  }

  .service-icon {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin-bottom: 1.2rem;
  }

  .service-name {
    font-size: 22px;
    color: var(--navy-deep);
    margin-bottom: 8px;
  }

  .service-desc {
    font-size: 14px;
    color: var(--slate);
    line-height: 1.7;
    margin-bottom: 1rem;
  }

  .service-price {
    margin-bottom: 1rem;
  }

  .service-price-num {
    font-size: 28px;
    font-weight: 800;
    color: var(--blue-bright);
  }

  .service-price-per {
    font-size: 12px;
    color: var(--slate);
  }

  .service-features {
    list-style: none;
    margin: 1rem 0;
  }

  .service-features li {
    font-size: 13px;
    color: var(--slate);
    padding: 4px 0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
  }

  .service-features li::before {
    content: "βœ“";
    color: var(--blue-bright);
    font-weight: 800;
  }

  .service-cta {
    width: 100%;
    padding: 12px;
    border-radius: 60px;
    background: transparent;
    border: 2px solid var(--blue-bright);
    color: var(--blue-bright);
    font-weight: 800;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 1rem;
  }

  .service-cta:hover {
    background: var(--blue-bright);
    color: white;
  }

  /* Why Us Grid */
  .why-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
  }

  .why-card {
    background: var(--pure-white);
    border-radius: 24px;
    padding: 1.8rem;
    text-align: center;
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s;
  }

  .why-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
  }

  .why-icon {
    font-size: 44px;
    margin-bottom: 1rem;
  }

  .why-title {
    font-weight: 800;
    font-size: 16px;
    color: var(--navy-deep);
    margin-bottom: 8px;
  }

  .why-text {
    font-size: 13px;
    color: var(--slate);
    line-height: 1.6;
  }

  /* Portfolio Grid */
  .portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.8rem;
  }

  .portfolio-card {
    background: var(--pure-white);
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s;
  }

  .portfolio-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
  }

  .portfolio-img {
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 60px;
    position: relative;
  }

  .portfolio-category {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 800;
  }

  .portfolio-body {
    padding: 1.2rem;
  }

  .portfolio-name {
    font-weight: 800;
    font-size: 16px;
    color: var(--navy-deep);
    margin-bottom: 6px;
  }

  .portfolio-desc {
    font-size: 12px;
    color: var(--slate);
    margin-bottom: 10px;
  }

  .portfolio-tech {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .tech-tag {
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    background: rgba(44, 123, 229, 0.1);
    color: var(--blue-bright);
  }

  /* Pricing Grid - Updated Professional Rates */
  .pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    max-width: 1100px;
    margin: 0 auto;
  }

  .pricing-card {
    background: var(--pure-white);
    border-radius: 28px;
    padding: 2rem;
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s;
    position: relative;
  }

  .pricing-card.featured {
    border: 2px solid var(--blue-bright);
    box-shadow: 0 8px 24px rgba(44, 123, 229, 0.15);
    transform: scale(1.02);
  }

  .pricing-card.featured::before {
    content: "Most Popular";
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--blue-bright);
    color: white;
    padding: 4px 18px;
    border-radius: 40px;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
  }

  .pricing-name {
    font-size: 22px;
    font-weight: 800;
    color: var(--navy-deep);
    margin-bottom: 6px;
  }

  .pricing-price {
    font-size: 44px;
    font-weight: 800;
    color: var(--navy-deep);
    margin: 1rem 0;
  }

  .pricing-price span {
    font-size: 14px;
    font-weight: 500;
    color: var(--slate);
  }

  .pricing-desc {
    font-size: 13px;
    color: var(--slate);
    margin-bottom: 1.5rem;
    line-height: 1.6;
  }

  .pricing-features {
    list-style: none;
    margin: 1.5rem 0;
  }

  .pricing-features li {
    font-size: 13px;
    color: var(--slate);
    padding: 8px 0;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .pricing-features li::before {
    content: "βœ“";
    color: var(--blue-bright);
    font-weight: 800;
  }

  .pricing-btn {
    width: 100%;
    padding: 14px;
    border-radius: 60px;
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
  }

  .pricing-btn.primary {
    background: var(--blue-bright);
    color: white;
    border: none;
  }

  .pricing-btn.primary:hover {
    background: var(--blue-light);
    transform: translateY(-2px);
  }

  .pricing-btn.outline {
    background: transparent;
    border: 2px solid var(--blue-bright);
    color: var(--blue-bright);
  }

  .pricing-btn.outline:hover {
    background: var(--blue-bright);
    color: white;
  }

  .price-note {
    text-align: center;
    margin-top: 2rem;
    font-size: 13px;
    color: var(--slate);
    background: rgba(44, 123, 229, 0.08);
    padding: 1rem;
    border-radius: 60px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Process Steps */
  .process-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
  }

  .process-step {
    text-align: center;
    padding: 1rem;
  }

  .step-num {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blue-bright), var(--blue-light));
    color: white;
    font-size: 24px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    box-shadow: 0 6px 14px rgba(44, 123, 229, 0.3);
  }

  .step-title {
    font-weight: 800;
    font-size: 15px;
    color: var(--navy-deep);
    margin-bottom: 6px;
  }

  .step-desc {
    font-size: 13px;
    color: var(--slate);
    line-height: 1.6;
  }

  /* Contact Section */
  .contact-section {
    background: var(--gradient-hero);
    padding: 5rem 2rem;
  }

  .contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    max-width: 1000px;
    margin: 0 auto;
  }

  .contact-info h2 {
    font-size: 42px;
    color: white;
    margin-bottom: 1rem;
  }

  .contact-info p {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.8;
    margin-bottom: 2rem;
  }

  .contact-items {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
  }

  .contact-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
  }

  .contact-item-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: rgba(44, 123, 229, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
  }

  .contact-item-text strong {
    display: block;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
  }

  .contact-item-text span {
    font-size: 15px;
    color: white;
    font-weight: 600;
  }

  .contact-form {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 32px;
    padding: 2rem;
  }

  .contact-form h3 {
    font-size: 26px;
    color: white;
    margin-bottom: 1.5rem;
  }

  .cf-group {
    margin-bottom: 1rem;
  }

  .cf-group label {
    display: block;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 600;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .cf-group input, .cf-group select, .cf-group textarea {
    width: 100%;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    color: white;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    transition: all 0.2s;
  }

  .cf-group input:focus, .cf-group select:focus, .cf-group textarea:focus {
    outline: none;
    border-color: var(--blue-bright);
    background: rgba(44, 123, 229, 0.1);
  }

  .cf-group select option {
    background: var(--navy-deep);
    color: white;
  }

  .cf-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }

  .send-btn {
    width: 100%;
    padding: 14px;
    border-radius: 60px;
    background: var(--blue-bright);
    border: none;
    color: white;
    font-weight: 800;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 0.5rem;
  }

  .send-btn:hover {
    background: var(--blue-light);
    transform: translateY(-2px);
  }

  .success-box {
    background: rgba(22, 163, 74, 0.2);
    border: 1px solid rgba(34, 197, 94, 0.4);
    border-radius: 12px;
    padding: 1rem;
    text-align: center;
    color: #4ade80;
    font-weight: 600;
    font-size: 13px;
    margin-top: 1rem;
    display: none;
  }

  /* Footer */
  footer {
    background: #071826;
    color: rgba(255, 255, 255, 0.5);
    padding: 2rem;
    text-align: center;
    font-size: 13px;
  }

  footer strong {
    color: rgba(255, 255, 255, 0.8);
  }

  .alt-bg {
    background: var(--pure-white);
    border-top: 1px solid #eef2f6;
    border-bottom: 1px solid #eef2f6;
  }

  @media (max-width: 768px) {
    nav { padding: 0 1rem; flex-direction: column; height: auto; padding: 12px; gap: 10px; }
    .hero h1 { font-size: 36px; }
    .contact-grid { grid-template-columns: 1fr; gap: 2rem; }
    .cf-row { grid-template-columns: 1fr; }
    .section-center h2 { font-size: 32px; }
    .hero { min-height: auto; padding: 4rem 1.5rem; }
    .pricing-card.featured { transform: scale(1); }
  }
</style>
</head>
<body>

<nav>
  <a class="nav-logo" href="#" onclick="scrollToSection('home'); return false;">
    <div class="nav-logo-badge">M</div>
    <div class="nav-logo-text">
      <strong>Mantsoe Software Solutions</strong>
      <span>MSS Β· DIGITAL INNOVATION</span>
    </div>
  </a>
  <div class="nav-links">
    <a class="nav-link" href="#" onclick="scrollToSection('home'); setActiveNav(this); return false;">Home</a>
    <a class="nav-link" href="#" onclick="scrollToSection('services'); setActiveNav(this); return false;">Services</a>
    <a class="nav-link" href="#" onclick="scrollToSection('portfolio'); setActiveNav(this); return false;">Portfolio</a>
    <a class="nav-link" href="#" onclick="scrollToSection('pricing'); setActiveNav(this); return false;">Pricing</a>
    <a class="nav-link" href="#" onclick="scrollToSection('process'); setActiveNav(this); return false;">Process</a>
    <a class="nav-cta" href="#" onclick="scrollToSection('contact'); setActiveNav(this); return false;">Get a Quote</a>
  </div>
</nav>

<!-- HERO SECTION WITH FLOATING ICONS -->
<section class="hero" id="home">
  <div class="hero-grid"></div>
 
  <div class="floating-icons">
    <div class="float-icon"><i class="fab fa-react"></i></div>
    <div class="float-icon"><i class="fab fa-js"></i></div>
    <div class="float-icon"><i class="fab fa-css3-alt"></i></div>
    <div class="float-icon"><i class="fab fa-html5"></i></div>
    <div class="float-icon"><i class="fab fa-node-js"></i></div>
    <div class="float-icon"><i class="fab fa-java"></i></div>
    <div class="float-icon"><i class="fas fa-database"></i></div>
  </div>

  <div class="hero-content">
    <div class="hero-badge"><div class="hero-badge-dot"></div>Available for New Projects</div>
    <h1>Turning Ideas into<br><span>Powerful Software</span></h1>
    <p>We build custom web apps, Android apps, desktop software and business management systems β€” tailored to your exact needs. Based in Virginia, Free State β€” serving clients across South Africa.</p>
    <div class="hero-btns">
      <button class="btn-hero-primary" onclick="scrollToSection('contact')">Start Your Project</button>
      <button class="btn-hero-secondary" onclick="scrollToSection('services')">Explore Services</button>
    </div>
    <div class="hero-stats">
      <div><div class="hero-stat-num">8+</div><div class="hero-stat-label">App Types</div></div>
      <div><div class="hero-stat-num">100%</div><div class="hero-stat-label">Custom Built</div></div>
      <div><div class="hero-stat-num">SA Based</div><div class="hero-stat-label">Trusted & Local</div></div>
      <div><div class="hero-stat-num">24h</div><div class="hero-stat-label">Response Time</div></div>
    </div>
  </div>
</section>

<!-- SERVICES SECTION -->
<section class="section" id="services">
  <div class="section-center">
    <div class="section-tag">What We Build</div>
    <h2>Our Services</h2>
    <p>From simple business websites to full-stack web applications β€” we build the right solution at the right price</p>
  </div>
  <div class="services-grid">
    <div class="service-card"><div class="service-icon" style="background:#e8f0fe;">🌐</div><div class="service-name">Web Applications</div><div class="service-desc">Custom web apps with dashboards, user logins, real-time features for real estate, clinics, loan managers, dealerships and more.</div><div class="service-price"><span class="service-price-num">R12,500+</span> <span class="service-price-per">once-off</span></div><ul class="service-features"><li>Custom dashboard & admin panel</li><li>User authentication & roles</li><li>Database design & management</li><li>Photo & file uploads</li><li>Mobile responsive design</li></ul><button class="service-cta" onclick="scrollToSection('contact')">Get a Quote</button></div>
    <div class="service-card"><div class="service-icon" style="background:#e0f2fe;">πŸ“±</div><div class="service-name">Android Apps</div><div class="service-desc">Native Android applications for your business β€” from simple tools to complex multi-user apps with backend integration.</div><div class="service-price"><span class="service-price-num">R25,000+</span> <span class="service-price-per">once-off</span></div><ul class="service-features"><li>Native Android development</li><li>Google Play Store publishing</li><li>API & backend integration</li><li>Push notifications</li><li>Offline functionality</li></ul><button class="service-cta" onclick="scrollToSection('contact')">Get a Quote</button></div>
    <div class="service-card"><div class="service-icon" style="background:#ede9fe;">πŸ–₯️</div><div class="service-name">Desktop Applications</div><div class="service-desc">Windows and cross-platform desktop apps for POS systems, inventory managers, payroll tools β€” all offline-capable.</div><div class="service-price"><span class="service-price-num">R18,000+</span> <span class="service-price-per">once-off</span></div><ul class="service-features"><li>Windows / cross-platform</li><li>Offline-first, no internet needed</li><li>Database integration</li><li>Print & report generation</li><li>Easy installer & deployment</li></ul><button class="service-cta" onclick="scrollToSection('contact')">Get a Quote</button></div>
    <div class="service-card"><div class="service-icon" style="background:#fef3e8;">🏒</div><div class="service-name">Business Management Systems</div><div class="service-desc">All-in-one systems for managing clients, stock, employees, invoices, payments β€” built for your industry.</div><div class="service-price"><span class="service-price-num">R35,000+</span> <span class="service-price-per">once-off</span></div><ul class="service-features"><li>Client & staff management</li><li>Invoicing & payment tracking</li><li>Stock & inventory control</li><li>Reports & analytics</li><li>Industry-specific features</li></ul><button class="service-cta" onclick="scrollToSection('contact')">Get a Quote</button></div>
    <div class="service-card"><div class="service-icon" style="background:#d1fae5;">πŸ”§</div><div class="service-name">Website Revival</div><div class="service-desc">Fix, modernise and revive existing websites β€” better design, faster performance, new features added.</div><div class="service-price"><span class="service-price-num">R4,500+</span> <span class="service-price-per">once-off</span></div><ul class="service-features"><li>Bug fixes & error resolution</li><li>Modern redesign & UI refresh</li><li>Speed & performance optimisation</li><li>Add new pages or features</li><li>Mobile-friendly makeover</li></ul><button class="service-cta" onclick="scrollToSection('contact')">Get a Quote</button></div>
    <div class="service-card"><div class="service-icon" style="background:#fee2e2;">πŸ›’</div><div class="service-name">E-Commerce & Online Shops</div><div class="service-desc">Sell your products online with a fully functional shop β€” product listings, cart, payment gateways and order management.</div><div class="service-price"><span class="service-price-num">R15,000+</span> <span class="service-price-per">once-off</span></div><ul class="service-features"><li>Product catalogue & cart</li><li>PayFast / Yoco / EFT integration</li><li>Order & inventory management</li><li>Customer accounts & history</li><li>Discount codes & promotions</li></ul><button class="service-cta" onclick="scrollToSection('contact')">Get a Quote</button></div>
    <div class="service-card"><div class="service-icon" style="background:#cffafe;">πŸ“Š</div><div class="service-name">Industry-Specific Templates</div><div class="service-desc">Ready-made, fully functional web apps for real estate, car dealerships, funeral homes, clinics, job agencies, pet shops.</div><div class="service-price"><span class="service-price-num">R8,500+</span> <span class="service-price-per">once-off</span></div><ul class="service-features"><li>Real estate listing management</li><li>Car dealership showrooms</li><li>Funeral cover & member tracking</li><li>Private clinic & patient management</li><li>Loan management systems</li></ul><button class="service-cta" onclick="scrollToSection('contact')">Get a Quote</button></div>
    <div class="service-card"><div class="service-icon" style="background:#f3e8ff;">πŸ”—</div><div class="service-name">API & System Integration</div><div class="service-desc">Connect your existing systems to payment gateways, SMS providers, WhatsApp APIs and third-party services.</div><div class="service-price"><span class="service-price-num">R7,500+</span> <span class="service-price-per">once-off</span></div><ul class="service-features"><li>Payment gateway setup</li><li>SMS & WhatsApp API</li><li>Third-party API connection</li><li>Data migration & sync</li><li>Webhook & automation setup</li></ul><button class="service-cta" onclick="scrollToSection('contact')">Get a Quote</button></div>
  </div>
</section>

<!-- WHY US -->
<section class="section alt-bg" id="why">
  <div class="section-center">
    <div class="section-tag">Why Choose MSS</div>
    <h2>Built Different</h2>
    <p>We don't just write code β€” we solve real business problems with software that works</p>
  </div>
  <div class="why-grid">
    <div class="why-card"><div class="why-icon">🎯</div><div class="why-title">Custom-Built for You</div><div class="why-text">No templates, no cookie-cutter solutions. Every project is designed around your specific business needs.</div></div>
    <div class="why-card"><div class="why-icon">πŸ’°</div><div class="why-title">Fair & Transparent</div><div class="why-text">Quality software at fair market rates. 50% deposit, 50% on completion β€” no hidden fees or surprises.</div></div>
    <div class="why-card"><div class="why-icon">⚑</div><div class="why-title">Fast Delivery</div><div class="why-text">Most projects delivered within 2–6 weeks with regular progress updates and transparent communication.</div></div>
    <div class="why-card"><div class="why-icon">πŸ‡ΏπŸ‡¦</div><div class="why-title">Local & Reliable</div><div class="why-text">Based in Virginia, Free State. In your timezone, speak your language, understand your market.</div></div>
    <div class="why-card"><div class="why-icon">πŸ”§</div><div class="why-title">Ongoing Support</div><div class="why-text">We don't disappear after delivery. Post-launch support, bug fixes and updates included.</div></div>
    <div class="why-card"><div class="why-icon">πŸ”’</div><div class="why-title">Secure & Scalable</div><div class="why-text">Built with security best practices, designed to scale as your business grows.</div></div>
  </div>
</section>

<!-- PORTFOLIO -->
<section class="section" id="portfolio">
  <div class="section-center">
    <div class="section-tag">Our Work</div>
    <h2>What We've Built</h2>
    <p>A selection of industry-specific applications we've designed and delivered</p>
  </div>
  <div class="portfolio-grid">
    <div class="portfolio-card"><div class="portfolio-img" style="background:#e8f0e8;"><span>🏑</span><span class="portfolio-category" style="background:#dcfce7;color:#15803d;">Web App</span></div><div class="portfolio-body"><div class="portfolio-name">Real Estate Management System</div><div class="portfolio-desc">Full property listing platform with owner dashboard, photo galleries, status tracking.</div><div class="portfolio-tech"><span class="tech-tag">React</span><span class="tech-tag">Node.js</span><span class="tech-tag">MongoDB</span></div></div></div>
    <div class="portfolio-card"><div class="portfolio-img" style="background:#1a1a2e;"><span>πŸš—</span><span class="portfolio-category" style="background:#e2e8f0;color:#334155;">Web App</span></div><div class="portfolio-body"><div class="portfolio-name">Car Dealership Showroom</div><div class="portfolio-desc">Vehicle inventory management with public showroom, photo uploads, stock tracking.</div><div class="portfolio-tech"><span class="tech-tag">HTML/CSS</span><span class="tech-tag">JavaScript</span><span class="tech-tag">SQL</span></div></div></div>
    <div class="portfolio-card"><div class="portfolio-img" style="background:#f0e6d8;"><span>⚰️</span><span class="portfolio-category" style="background:#e0e7ff;color:#3730a3;">Web App</span></div><div class="portfolio-body"><div class="portfolio-name">Funeral Cover Management</div><div class="portfolio-desc">Member tracking, payment records, arrears alerts and cover plan management.</div><div class="portfolio-tech"><span class="tech-tag">PHP</span><span class="tech-tag">MySQL</span><span class="tech-tag">Bootstrap</span></div></div></div>
    <div class="portfolio-card"><div class="portfolio-img" style="background:#dbeafe;"><span>πŸ₯</span><span class="portfolio-category" style="background:#dbeafe;color:#1d4ed8;">Web App</span></div><div class="portfolio-body"><div class="portfolio-name">Private Clinic System</div><div class="portfolio-desc">Patient management, appointment booking, doctor profiles, staff dashboard.</div><div class="portfolio-tech"><span class="tech-tag">React</span><span class="tech-tag">Node.js</span><span class="tech-tag">PostgreSQL</span></div></div></div>
    <div class="portfolio-card"><div class="portfolio-img" style="background:#d1fae5;"><span>πŸ’°</span><span class="portfolio-category" style="background:#dcfce7;color:#15803d;">Web App</span></div><div class="portfolio-body"><div class="portfolio-name">Loan Management System</div><div class="portfolio-desc">Client loan records, interest calculation, repayment schedules, overdue alerts.</div><div class="portfolio-tech"><span class="tech-tag">Java</span><span class="tech-tag">Spring Boot</span><span class="tech-tag">MySQL</span></div></div></div>
    <div class="portfolio-card"><div class="portfolio-img" style="background:#fef3c7;"><span>🐾</span><span class="portfolio-category" style="background:#fef3c7;color:#92400e;">Web App</span></div><div class="portfolio-body"><div class="portfolio-name">Pet Shop & SPCA System</div><div class="portfolio-desc">Adoption listings, lost & found, pet shop e-commerce with shopping cart.</div><div class="portfolio-tech"><span class="tech-tag">HTML/CSS</span><span class="tech-tag">JS</span><span class="tech-tag">LocalStorage</span></div></div></div>
    <div class="portfolio-card"><div class="portfolio-img" style="background:#ede9fe;"><span>πŸ’Ό</span><span class="portfolio-category" style="background:#ede9fe;color:#6d28d9;">Web App</span></div><div class="portfolio-body"><div class="portfolio-name">Job Agency Platform</div><div class="portfolio-desc">Job listings, candidate profiles, placement tracking, public job board.</div><div class="portfolio-tech"><span class="tech-tag">Python</span><span class="tech-tag">Django</span><span class="tech-tag">SQLite</span></div></div></div>
    <div class="portfolio-card"><div class="portfolio-img" style="background:#0a1a2f;"><span>πŸ“±</span><span class="portfolio-category" style="background:#dcfce7;color:#15803d;">Android</span></div><div class="portfolio-body"><div class="portfolio-name">Android Business Apps</div><div class="portfolio-desc">Custom Android applications for invoicing, stock management, client tracking.</div><div class="portfolio-tech"><span class="tech-tag">Android</span><span class="tech-tag">Java/Kotlin</span><span class="tech-tag">Firebase</span></div></div></div>
  </div>
</section>

<!-- PRICING - Updated Professional Rates -->
<section class="section alt-bg" id="pricing">
  <div class="section-center">
    <div class="section-tag">Transparent Pricing</div>
    <h2>Simple, Honest Pricing</h2>
    <p>All prices are once-off payments β€” no monthly fees unless you choose hosting or maintenance</p>
  </div>
  <div class="pricing-grid">
    <div class="pricing-card">
      <div class="pricing-name">Quick Start</div>
      <div class="pricing-price">R4,500<span>+</span></div>
      <div class="pricing-desc">Perfect for small businesses needing a professional online presence</div>
      <ul class="pricing-features">
        <li>Professional brochure website</li>
        <li>Mobile responsive design</li>
        <li>Contact form & Google Maps</li>
        <li>Basic SEO setup</li>
        <li>Website revival / bug fixes</li>
      </ul>
      <button class="pricing-btn outline" onclick="scrollToSection('contact')">Get Started</button>
    </div>
    <div class="pricing-card featured">
      <div class="pricing-name">Professional</div>
      <div class="pricing-price">R18,500<span>+</span></div>
      <div class="pricing-desc">Full-featured web application for managing your business operations</div>
      <ul class="pricing-features">
        <li>Custom web application</li>
        <li>Admin dashboard & management</li>
        <li>Database design & setup</li>
        <li>User login & role management</li>
        <li>Photo / file uploads</li>
        <li>Industry-specific features</li>
        <li>30 days post-launch support</li>
      </ul>
      <button class="pricing-btn primary" onclick="scrollToSection('contact')">Start Project</button>
    </div>
    <div class="pricing-card">
      <div class="pricing-name">Enterprise</div>
      <div class="pricing-price">R55,000<span>+</span></div>
      <div class="pricing-desc">Complete digital solution with web, mobile and desktop apps</div>
      <ul class="pricing-features">
        <li>Everything in Professional</li>
        <li>Android mobile app</li>
        <li>Desktop application</li>
        <li>API & system integration</li>
        <li>Payment gateway setup</li>
        <li>Advanced reporting & analytics</li>
        <li>3 months post-launch support</li>
        <li>Staff training included</li>
      </ul>
      <button class="pricing-btn outline" onclick="scrollToSection('contact')">Custom Quote</button>
    </div>
  </div>
  <div class="price-note">
    πŸ’‘ Not sure which solution fits? <strong>Contact us for a free consultation</strong> β€” we'll recommend the right solution for your budget and requirements. Payment plans available for qualifying projects.
  </div>
</section>

<!-- PROCESS -->
<section class="section" id="process">
  <div class="section-center">
    <div class="section-tag">How We Work</div>
    <h2>Our Process</h2>
    <p>Simple, transparent and collaborative β€” from idea to live product</p>
  </div>
  <div class="process-steps">
    <div class="process-step"><div class="step-num">1</div><div class="step-title">Discovery Call</div><div class="step-desc">Free consultation to discuss your requirements, goals and budget.</div></div>
    <div class="process-step"><div class="step-num">2</div><div class="step-title">Proposal & Quote</div><div class="step-desc">We provide a detailed proposal with timeline and fixed price quote.</div></div>
    <div class="process-step"><div class="step-num">3</div><div class="step-title">Design & Plan</div><div class="step-desc">We sketch the design and architecture. You approve before coding.</div></div>
    <div class="process-step"><div class="step-num">4</div><div class="step-title">Development</div><div class="step-desc">Regular progress updates. You can request changes along the way.</div></div>
    <div class="process-step"><div class="step-num">5</div><div class="step-title">Testing & Launch</div><div class="step-desc">You test thoroughly. We fix any issues until you're satisfied.</div></div>
    <div class="process-step"><div class="step-num">6</div><div class="step-title">Support & Growth</div><div class="step-desc">We stay available for questions, fixes and future enhancements.</div></div>
  </div>
</section>

<!-- CONTACT -->
<section class="contact-section" id="contact">
  <div class="contact-grid">
    <div class="contact-info">
      <h2>Let's Build<br>Something Great</h2>
      <p>Ready to start your project? Have a question? We'd love to hear from you. Fill in the form or reach out directly β€” we respond within 24 hours.</p>
      <div class="contact-items">
        <div class="contact-item"><div class="contact-item-icon">πŸ“ž</div><div class="contact-item-text"><strong>Phone / WhatsApp</strong><span>065 179 3678</span></div></div>
        <div class="contact-item"><div class="contact-item-icon">πŸ“§</div><div class="contact-item-text"><strong>Email</strong><span>mantsoess@gmail.com</span></div></div>
        <div class="contact-item"><div class="contact-item-icon">πŸ“</div><div class="contact-item-text"><strong>Address</strong><span>74 Lois Street, Riebeeckstad, Welkom, 9459</span></div></div>
        <div class="contact-item"><div class="contact-item-icon">πŸ•</div><div class="contact-item-text"><strong>Office Hours</strong><span>Mon–Fri: 08:00–17:00<br>Sat: 09:00–13:00</span></div></div>
      </div>
    </div>
    <div class="contact-form">
      <h3>Get a Free Quote</h3>
      <div class="cf-row"><div class="cf-group"><label>Your Name</label><input type="text" id="cfName" placeholder="Full name"></div><div class="cf-group"><label>Phone / WhatsApp</label><input type="text" id="cfPhone" placeholder="071 234 5678"></div></div>
      <div class="cf-group"><label>Email</label><input type="text" id="cfEmail" placeholder="your@email.com"></div>
      <div class="cf-group"><label>Service Needed</label><select id="cfService"><option value="">-- Select a service --</option><option>Web Application</option><option>Android App</option><option>Desktop Application</option><option>Business Management System</option><option>Website Revival</option><option>E-Commerce Shop</option></select></div>
      <div class="cf-group"><label>Budget Range</label><select id="cfBudget"><option value="">-- Select budget --</option><option>Under R8,000</option><option>R8,000 – R15,000</option><option>R15,000 – R30,000</option><option>R30,000 – R60,000</option><option>R60,000+</option></select></div>
      <div class="cf-group"><label>Project Description</label><textarea id="cfMsg" rows="3" placeholder="Tell us about your project..."></textarea></div>
      <button class="send-btn" onclick="sendEnquiry()">Send Enquiry β†’</button>
      <div class="success-box" id="successBox">βœ“ Thank you! We'll be in touch within 24 hours.</div>
    </div>
  </div>
</section>

<footer>
  <strong>Mantsoe Software Solutions (MSS)</strong><br>
  74 Lois Street, Riebeeckstad, Welkom, Free State 9459<br>
  πŸ“ž 065 179 3678 Β· πŸ“§ mantsoess@gmail.com<br><br>
  <span>Β© 2026 MSS Β· All Rights Reserved Β· Turning Ideas into Powerful Software</span>
</footer>

<script>
  function scrollToSection(sectionId) {
    const element = document.getElementById(sectionId);
    if (element) {
      element.scrollIntoView({ behavior: 'smooth' });
    }
  }

  function setActiveNav(el) {
    document.querySelectorAll('.nav-link').forEach(link => link.classList.remove('active'));
    if (el && el.classList) el.classList.add('active');
  }

  function sendEnquiry() {
    const name = document.getElementById('cfName').value.trim();
    const phone = document.getElementById('cfPhone').value.trim();
    if (!name || !phone) {
      alert('Please fill in your name and phone number.');
      return;
    }
    const email = document.getElementById('cfEmail').value.trim();
    const service = document.getElementById('cfService').value;
    const budget = document.getElementById('cfBudget').value;
    const msg = document.getElementById('cfMsg').value.trim();
    const waMsg = `Hello MSS! πŸ‘‹\n\nName: ${name}\nPhone: ${phone}\nEmail: ${email || 'Not provided'}\nService: ${service || 'Not specified'}\nBudget: ${budget || 'Not specified'}\n\nProject:\n${msg || 'No description provided'}`;
    const waUrl = `https://wa.me/27651793678?text=${encodeURIComponent(waMsg)}`;
    window.open(waUrl, '_blank');
    document.getElementById('cfName').value = '';
    document.getElementById('cfPhone').value = '';
    document.getElementById('cfEmail').value = '';
    document.getElementById('cfService').value = '';
    document.getElementById('cfBudget').value = '';
    document.getElementById('cfMsg').value = '';
    const box = document.getElementById('successBox');
    box.style.display = 'block';
    setTimeout(() => box.style.display = 'none', 5000);
  }

  // Scroll spy
  const sections = ['home', 'services', 'portfolio', 'pricing', 'process', 'contact'];
  window.addEventListener('scroll', () => {
    const scrollY = window.scrollY + 100;
    let activeId = 'home';
    for (const id of sections) {
      const el = document.getElementById(id);
      if (el && el.offsetTop <= scrollY) {
        activeId = id;
      }
    }
    document.querySelectorAll('.nav-link').forEach(link => {
      const href = link.getAttribute('onclick') || '';
      if (href.includes(activeId)) {
        link.classList.add('active');
      } else {
        link.classList.remove('active');
      }
    });
  });
</script>
</body>
</html>