<?php
// overview.php - Public About Page with Dark Universe Theme
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About Kaspatec - Financial Management Solutions</title>
    
    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="/Kaspatec_new_logo_2025.ico">
    <link rel="shortcut icon" type="image/x-icon" href="/Kaspatec_new_logo_2025.ico">
    <link rel="apple-touch-icon" href="/Kaspatec_new_logo_2025.ico">
    
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #1e2c3c;
            color: #ffffff;
            overflow-x: hidden;
            min-height: 100vh;
            position: relative;
        }

        /* Network data image overlay - right side with left fade */
        .network-bg-overlay {
            position: fixed;
            top: 0;
            left: 15%;
            width: 100%;
            height: 100%;
            background: url('https://i.ibb.co/G3Q7X8Nk/01-MSR-SIGCOMM-Data-Network-1400x788-1024x576.png') center center/cover no-repeat;
            opacity: 0.9;
            z-index: -2;
            mask: linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
            -webkit-mask: linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
        }

        /* Overlay to control image opacity */
        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(30, 44, 60, 0.9);
            z-index: -1;
        }

        /* Face Network image overlay - far left with fade */
        body::after {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 30%;
            height: 100%;
            background: url('https://i.ibb.co/v6JtrP6G/Face-Network-1.jpg') left center/cover no-repeat;
            opacity: 0.1;
            z-index: -1;
            mask: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
            -webkit-mask: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
        }

        /* Animated Background Elements */
        .universe-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            overflow: hidden;
        }

        .stars {
            position: absolute;
            width: 100%;
            height: 100%;
            background-image: 
                radial-gradient(1px 1px at 40px 60px, #eee, transparent),
                radial-gradient(1px 1px at 120px 140px, rgba(255,255,255,0.6), transparent),
                radial-gradient(1px 1px at 200px 80px, #fff, transparent);
            background-repeat: repeat;
            background-size: 300px 200px;
            animation: twinkle 20s linear infinite;
        }

        @keyframes twinkle {
            0% { transform: translateY(0px); }
            100% { transform: translateY(-100px); }
        }

        /* Moving Clouds */
        .cloud {
            position: absolute;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50px;
            filter: blur(3px);
            animation: float 15s ease-in-out infinite;
        }

        .cloud:before,
        .cloud:after {
            content: '';
            position: absolute;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50px;
        }

        .cloud:before {
            width: 50px;
            height: 50px;
            top: -20px;
            left: 10px;
        }

        .cloud:after {
            width: 30px;
            height: 30px;
            top: -10px;
            right: 10px;
        }

        .cloud1 {
            width: 100px;
            height: 40px;
            top: 20%;
            left: -100px;
            animation-delay: 0s;
        }

        .cloud2 {
            width: 80px;
            height: 35px;
            top: 40%;
            left: -80px;
            animation-delay: 5s;
        }

        .cloud3 {
            width: 120px;
            height: 45px;
            top: 60%;
            left: -120px;
            animation-delay: 10s;
        }

        @keyframes float {
            0% { transform: translateX(-100px) translateY(0px); }
            50% { transform: translateX(calc(100vw + 100px)) translateY(-20px); }
            100% { transform: translateX(calc(100vw + 100px)) translateY(0px); }
        }


        /* Additional Effects */
        .glow-effect {
            position: absolute;
            width: 200px;
            height: 200px;
            background: radial-gradient(circle, rgba(0, 168, 255, 0.1) 0%, transparent 70%);
            border-radius: 50%;
            filter: blur(20px);
            animation: pulse 4s ease-in-out infinite;
        }

        .glow1 {
            top: 20%;
            left: 10%;
            animation-delay: 0s;
        }

        .glow2 {
            top: 60%;
            right: 10%;
            animation-delay: 2s;
        }

        @keyframes pulse {
            0%, 100% { opacity: 0.3; transform: scale(1); }
            50% { opacity: 0.6; transform: scale(1.1); }
        }

        /* Header */
        .header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            background: rgba(26, 26, 46, 0.8);
            backdrop-filter: blur(20px);
            border-bottom: 1px solid rgba(0, 150, 255, 0.3);
            padding: 0.4rem 0;
        }

        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 2rem;
            gap: 2rem;
        }

        .logo {
            font-size: 1.3rem;
            font-weight: bold;
            color: #00a8ff;
            text-decoration: none;
            text-shadow: 0 0 20px rgba(0, 168, 255, 0.5);
            display: flex;
            align-items: center;
            gap: 0.4rem;
        }

        .logo:hover {
            color: #0097e6;
            text-shadow: 0 0 30px rgba(0, 168, 255, 0.8);
        }

        .logo img {
            height: 1.8rem;
            width: auto;
            filter: drop-shadow(0 0 10px rgba(0, 168, 255, 0.5));
        }

        .back-btn {
            background: rgba(0, 168, 255, 0.2);
            border: 1px solid rgba(0, 168, 255, 0.5);
            color: #00a8ff;
            padding: 0.4rem 1.2rem;
            border-radius: 20px;
            text-decoration: none;
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
            font-size: 0.9rem;
            white-space: nowrap;
        }

        .back-btn:hover {
            background: rgba(0, 168, 255, 0.3);
            border-color: rgba(0, 168, 255, 0.8);
            color: #ffffff;
            transform: translateY(-2px);
            box-shadow: 0 5px 20px rgba(0, 168, 255, 0.3);
        }

        .back-home-btn {
            position: absolute;
            top: 20px;
            left: 20px;
            background: rgba(0, 168, 255, 0.2);
            border: 1px solid rgba(0, 168, 255, 0.5);
            color: #00a8ff;
            padding: 0.5rem 1rem;
            border-radius: 20px;
            text-decoration: none;
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
            font-size: 14px;
            font-weight: 500;
            z-index: 10;
        }

        .back-home-btn:hover {
            background: rgba(0, 168, 255, 0.3);
            border-color: rgba(0, 168, 255, 0.8);
            color: #ffffff;
            transform: translateY(-2px);
            box-shadow: 0 5px 20px rgba(0, 168, 255, 0.3);
        }

        .back-home-btn i {
            margin-right: 0.5rem;
        }

        .team-image {
            width: 100%;
            max-width: auto;
            height: 151px;
            object-fit: cover;
            object-position: center;
            border-radius: 12px;
            margin: 25px 0;
            box-shadow: 0 4px 15px rgba(0,0,0,0.15);
        }
		
        /* Main Content */
        .main-content {
            min-height: 100vh;
            padding: 80px 2rem 2rem;
            position: relative;
        }

        .content-wrapper {
            max-width: 1000px;
            margin: 0 auto;
        }

        .container {
            background: rgba(26, 26, 46, 0.8);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(0, 150, 255, 0.3);
            border-radius: 20px;
            padding: 3rem;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
        }

        .page-title {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 2rem;
            background: linear-gradient(45deg, #ffffff, #00a8ff, #0097e6);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-shadow: 0 0 30px rgba(0, 168, 255, 0.3);
            text-align: center;
        }

        .section {
            margin-bottom: 2.5rem;
        }

        .section h2 {
            color: #00a8ff;
            font-size: 1.8rem;
            margin-bottom: 1rem;
            border-bottom: 2px solid rgba(0, 168, 255, 0.3);
            padding-bottom: 0.5rem;
        }

        .section p {
            font-size: 1.1rem;
            line-height: 1.8;
            color: rgba(255, 255, 255, 0.9);
            margin-bottom: 1rem;
        }

        .feature-list {
            list-style: none;
            padding: 0;
        }

        .feature-list li {
            background: rgba(0, 168, 255, 0.1);
            border: 1px solid rgba(0, 168, 255, 0.2);
            border-radius: 10px;
            padding: 1rem;
            margin-bottom: 1rem;
            transition: all 0.3s ease;
        }

        .feature-list li:hover {
            background: rgba(0, 168, 255, 0.15);
            border-color: rgba(0, 168, 255, 0.4);
            transform: translateX(5px);
        }

        .feature-list li i {
            color: #00a8ff;
            margin-right: 0.5rem;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .header-content {
                padding: 0 1rem;
                gap: 1rem;
            }

            .logo {
                font-size: 1.4rem;
            }

            .logo img {
                height: 2rem;
            }

            .back-btn {
                padding: 0.3rem 1rem;
                font-size: 0.8rem;
            }

            .container {
                padding: 2rem 1.5rem;
            }

            .page-title {
                font-size: 2rem;
            }
        }

        @media (max-width: 480px) {
            .header-content {
                padding: 0 0.5rem;
                gap: 0.5rem;
            }

            .logo {
                font-size: 1.2rem;
            }

            .logo img {
                height: 1.8rem;
            }

            .back-btn {
                padding: 0.25rem 0.8rem;
                font-size: 0.75rem;
            }
        }
    </style>
</head>
<body>
    <!-- Network Background Overlay -->
    <div class="network-bg-overlay"></div>

    <!-- Animated Background -->
    <div class="universe-bg">
        <div class="stars"></div>
        <div class="cloud cloud1"></div>
        <div class="cloud cloud2"></div>
        <div class="cloud cloud3"></div>
        <div class="glow-effect glow1"></div>
        <div class="glow-effect glow2"></div>
    </div>

    <!-- Header -->
    <header class="header">
        <div class="header-content">
            <a href="home" class="logo">
                <img src="https://i.ibb.co/wm6ydNr/Kaspa-Tech-New-Logo.png" alt="Kaspatec Logo">
                Kaspatec ZM
            </a>
            <a href="home" class="back-btn">
                <i class="fas fa-arrow-left"></i> Back to Home
            </a>
        </div>
    </header>

    <!-- Main Content -->
    <main class="main-content">
            <div class="content-wrapper">
        <div class="container">
        <img src="https://i.ibb.co/qFdDYQsS/Kaspa-Tech-Cover-Banner.png" alt="Kaspatec ZM Team" class="team-image">            
            <h1 class="page-title">About Kaspatec</h1>
                
                <div class="section">
                    <h2><i class="fas fa-rocket"></i> Our Mission</h2>
                    <p>
                        At Kaspatec, we are dedicated to revolutionizing financial management for businesses of all sizes. 
                        Our mission is to provide cutting-edge, multi-tenant accounting solutions that empower organizations 
                        to streamline their financial operations, gain valuable insights, and scale with confidence.
                    </p>
                </div>

                <div class="section">
                    <h2><i class="fas fa-lightbulb"></i> What We Do</h2>
                    <p>
                        We specialize in developing innovative financial management software that combines advanced technology 
                        with user-friendly interfaces. Our flagship product, Kaspatec Cashbook, offers comprehensive 
                        accounting capabilities designed specifically for modern business needs.
                    </p>
                </div>

                <div class="section">
                    <h2><i class="fas fa-star"></i> Key Features</h2>
                    <ul class="feature-list">
                        <li><i class="fas fa-database"></i> <strong>Multi-Tenant Architecture:</strong> Each user gets their own isolated database for complete data privacy and security</li>
                        <li><i class="fas fa-chart-line"></i> <strong>Real-time Financial Tracking:</strong> Monitor your financial health with live updates and comprehensive reporting</li>
                        <li><i class="fas fa-shield-alt"></i> <strong>Enterprise Security:</strong> Bank-level security protocols to protect your sensitive financial data</li>
                        <li><i class="fas fa-mobile-alt"></i> <strong>Cross-Platform Access:</strong> Access your financial data from anywhere, on any device</li>
                        <li><i class="fas fa-users"></i> <strong>Team Collaboration:</strong> Multiple user access with role-based permissions</li>
                        <li><i class="fas fa-download"></i> <strong>Automated Backups:</strong> Regular data backups and export capabilities for peace of mind</li>
                    </ul>
                </div>

                <div class="section">
                    <h2><i class="fas fa-users"></i> Who We Serve</h2>
                    <p>
                        Our solutions are designed for businesses, entrepreneurs, and financial professionals who demand 
                        reliability, accuracy, and efficiency in their financial operations. Whether you're a small business 
                        owner, a growing startup, or an established enterprise, Kaspatec has the tools you need to succeed.
                    </p>
                </div>

                <div class="section">
                    <h2><i class="fas fa-handshake"></i> Our Commitment</h2>
                    <p>
                        We are committed to continuous innovation and exceptional customer support. Our team of experienced 
                        developers and financial experts work tirelessly to ensure that our platform remains at the forefront 
                        of financial technology, providing you with the tools you need to make informed financial decisions 
                        and drive your business forward.
                    </p>
                </div>

                <div class="section">
                    <h2><i class="fas fa-envelope"></i> Get in Touch</h2>
                    <p>
                        Ready to transform your financial management? Contact us today to learn more about how Kaspatec 
                        can help your business thrive. We're here to answer your questions and guide you through the 
                        process of implementing our solutions.
                    </p>
                </div>

                <div class="section">
                    <h2><i class="fas fa-user-tie"></i> About the Founder</h2>
                    <p>
                        Founded by Mr. Paul Kasuba Mbulo, a visionary economist and the developer of this innovative web app, 
                        Kaspatec ZM was born out of a passion for simplifying financial management for small business owners, 
                        freelancers, and mobile money operators across Zambia and beyond.
                    </p>
                    <p>
                        Mr. Paul Kasuba Mbulo brings a wealth of expertise to Kaspatec ZM, with a robust background in 
                        financial and managerial accounting, public finance, and money and banking. His notable achievements include:
                    </p>
                    <ul class="feature-list">
                        <li><i class="fas fa-graduation-cap"></i> <strong>2014:</strong> Diploma in Social Work & Rehabilitation</li>
                        <li><i class="fas fa-chess"></i> <strong>2015:</strong> President of the Cavendish University Chess Club, Zambia</li>
                        <li><i class="fas fa-chalkboard-teacher"></i> <strong>2016:</strong> Diploma in Teaching Methodology</li>
                        <li><i class="fas fa-medal"></i> <strong>2019:</strong> Bachelor of Arts in Economics, Distinction</li>
                        <li><i class="fas fa-trophy"></i> <strong>2019:</strong> Certificate of Merit - Best Student in B.A. Economics</li>
                        <li><i class="fas fa-microscope"></i> <strong>2020:</strong> Certificate in Research Methods in the Social Sciences</li>
                    </ul>
                    <p>
                        With his dynamic leadership and deep understanding of economic principles, Mr. Mbulo has crafted 
                        Kaspatec ZM into a tool that transforms complex accounting tasks into intuitive, real-time solutions 
                        for businesses.
                    </p>
                </div>
            </div>
        </div>
    </main>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>