<!doctype html>

<head>

<title>MobiWiki — Software & Services</title>

<style>

:root{

--bg:#0b1220;

--panel:#0f1a32;

--card:#101c36;

--text:#e8eefc;

--muted:#b6c2e3;

--line:rgba(232,238,252,.12);

--brand:#6ea8ff;

--brand2:#7cf0d1;

--shadow: 0 10px 30px rgba(0,0,0,.35);

--radius: 18px;

--max: 1100px;

--font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";

}

*{box-sizing:border-box}

html,body{height:100%}

body{

margin:0;

font-family:var(--font);

color:var(--text);

background:

radial-gradient(900px 600px at 10% 0%, rgba(110,168,255,.18), transparent 60%),

radial-gradient(800px 500px at 90% 10%, rgba(124,240,209,.14), transparent 60%),

radial-gradient(700px 500px at 50% 95%, rgba(110,168,255,.10), transparent 60%),

var(--bg);

line-height:1.5;

}

a{color:inherit; text-decoration:none}

.wrap{max-width:var(--max); margin:0 auto; padding:0 20px}

.topbar{

position:sticky; top:0; z-index:50;

backdrop-filter: blur(10px);

background: rgba(11,18,32,.65);

border-bottom: 1px solid var(--line);

}

.nav{

display:flex; align-items:center; justify-content:space-between;

padding:14px 0;

gap:16px;

}

.brand{

display:flex; align-items:center; gap:10px; font-weight:800;

letter-spacing:.2px;

}

.logo{

width:34px; height:34px; border-radius:10px;

background: linear-gradient(135deg, var(--brand), var(--brand2));

box-shadow: 0 8px 20px rgba(110,168,255,.18);

display:grid; place-items:center;

color:#081020; font-weight:900;

}

.navlinks{

display:flex; gap:18px; align-items:center;

color:var(--muted);

font-weight:600;

flex-wrap:wrap;

}

.navlinks a{padding:8px 10px; border-radius:10px}

.navlinks a:hover{background: rgba(232,238,252,.06); color: var(--text)}

.cta{

display:flex; align-items:center; gap:10px;

}

.btn{

border:1px solid var(--line);

background: rgba(232,238,252,.06);

padding:10px 14px;

border-radius: 12px;

font-weight:700;

color:var(--text);

cursor:pointer;

transition: transform .12s ease, background .12s ease, border-color .12s ease;

display:inline-flex; align-items:center; gap:8px;

white-space:nowrap;

}

.btn:hover{transform: translateY(-1px); background: rgba(232,238,252,.09); border-color: rgba(232,238,252,.18)}

.btn.primary{

background: linear-gradient(135deg, rgba(110,168,255,.95), rgba(124,240,209,.75));

color:#061023;

border: none;

}

.btn.primary:hover{filter:brightness(1.02)}

.hero{

padding:54px 0 20px;

}

.hero-grid{

display:grid;

grid-template-columns: 1.2fr .8fr;

gap: 22px;

align-items:stretch;

}

@media (max-width: 920px){

.hero-grid{grid-template-columns: 1fr; }

}

.h-card{

border:1px solid var(--line);

background: linear-gradient(180deg, rgba(16,28,54,.88), rgba(16,28,54,.62));

border-radius: var(--radius);

box-shadow: var(--shadow);

padding: 26px;

}

h1{

margin:0 0 10px;

font-size: clamp(30px, 4.3vw, 48px);

line-height: 1.08;

letter-spacing: -0.8px;

}

.sub{

margin:0 0 18px;

color: var(--muted);

font-size: 16.5px;

max-width: 62ch;

}

.badges{

display:flex; flex-wrap:wrap; gap:10px;

margin: 18px 0 0;

}

.badge{

border:1px solid var(--line);

background: rgba(232,238,252,.05);

padding:8px 10px;

border-radius: 999px;

font-weight:700;

color: var(--muted);

font-size: 13px;

}

.kpis{

display:grid; grid-template-columns: 1fr 1fr;

gap: 12px; margin-top:16px;

}

.kpi{

border:1px solid var(--line);

background: rgba(232,238,252,.04);

border-radius: 14px;

padding: 14px 14px;

}

.kpi strong{display:block; font-size:18px}

.kpi span{color:var(--muted); font-weight:600; font-size:13.5px}

.mini{

display:flex; flex-direction:column; gap:12px;

}

.mini .tile{

border:1px solid var(--line);

background: rgba(232,238,252,.04);

border-radius: var(--radius);

padding: 18px;

box-shadow: 0 10px 22px rgba(0,0,0,.22);

}

.tile h3{margin:0 0 6px; font-size:16px}

.tile p{margin:0; color:var(--muted); font-weight:600; font-size:14px}

.section{

padding: 34px 0;

}

.section h2{

margin: 0 0 10px;

font-size: 24px;

letter-spacing: -0.3px;

}

.section .lead{

margin:0 0 18px;

color: var(--muted);

max-width: 75ch;

font-weight:600;

}

.grid3{

display:grid;

grid-template-columns: repeat(3, 1fr);

gap: 14px;

}

@media (max-width: 920px){

.grid3{grid-template-columns: 1fr}

}

.card{

border:1px solid var(--line);

background: rgba(16,28,54,.58);

border-radius: var(--radius);

padding: 18px;

}

.card h3{margin: 0 0 6px; font-size:16px}

.card p{margin:0; color:var(--muted); font-weight:600; font-size:14px}

.list{

margin: 10px 0 0; padding-left: 18px;

color: var(--muted);

font-weight:600;

font-size: 14px;

}

.split{

display:grid;

grid-template-columns: 1fr 1fr;

gap: 14px;

align-items:stretch;

}

@media (max-width: 920px){

.split{grid-template-columns: 1fr}

}

.work{

display:grid;

grid-template-columns: 1.2fr .8fr;

gap: 14px;

}

@media (max-width: 920px){

.work{grid-template-columns: 1fr}

}

.pill{

display:inline-flex;

align-items:center;

gap:8px;

padding:8px 10px;

border-radius:999px;

border:1px solid var(--line);

background: rgba(232,238,252,.05);

color: var(--muted);

font-weight:800;

font-size:12.5px;

margin-right: 8px;

margin-bottom: 8px;

}

.contact{

display:grid;

grid-template-columns: 1fr 1fr;

gap: 14px;

}

@media (max-width: 920px){

.contact{grid-template-columns: 1fr}

}

label{display:block; font-weight:800; font-size:13px; margin:10px 0 6px}

input, textarea{

width:100%;

padding: 12px 12px;

border-radius: 12px;

border:1px solid var(--line);

background: rgba(11,18,32,.55);

color: var(--text);

outline: none;

font: inherit;

}

textarea{min-height: 120px; resize: vertical}

input:focus, textarea:focus{border-color: rgba(110,168,255,.55)}

.muted{color: var(--muted); font-weight:600}

.foot{

border-top: 1px solid var(--line);

padding: 20px 0;

color: var(--muted);

font-weight:600;

font-size: 13.5px;

}

.foot a{color: var(--text)}

.toast{

position: fixed;

left: 50%;

bottom: 18px;

transform: translateX(-50%);

background: rgba(16,28,54,.92);

border: 1px solid rgba(232,238,252,.18);

border-radius: 14px;

padding: 10px 12px;

box-shadow: var(--shadow);

color: var(--text);

font-weight:700;

display:none;

max-width: min(520px, calc(100vw - 24px));

}

.toast small{display:block; color: var(--muted); font-weight:600; margin-top:2px}

</style>

</head>

<body>

<div>MobiWiki</div>

</a>

<a href="#services">Services</a>

<a href="#about">About</a>

<a href="#contact">Contact</a>

</nav>

<a class="btn" href="mailto:hello@mobiwiki.ca?subject=Project%20Inquiry%20(MobiWiki)">Email</a>

<a class="btn primary" href="#contact">Get a Quote</a>

</div>

</header>

<h1>We build software that ships — and stays reliable.</h1>

MobiWiki is a Canada-based software/services studio. We deliver mobile apps, web platforms,

backend APIs, and cloud infrastructure with a focus on clean architecture, security, and speed.

</p>

<a class="btn primary" href="#contact">Start a project</a>

<a class="btn" href="#services">View services</a>

</div>

<div class="badge">Mobile: iOS • Android</div>

<div class="badge">Web: Next.js • React</div>

<div class="badge">Backend: FastAPI • Node</div>

<div class="badge">Cloud: GCP • AWS</div>

<div class="badge">CI/CD • Monitoring</div>

</div>

<strong>Speed</strong>

<span>From idea → MVP in weeks</span>

</div>

<strong>Quality</strong>

<span>Testing, reviews, observability</span>

</div>

<strong>Security</strong>

<span>Auth, data protection, best practices</span>

</div>

<strong>Ownership</strong>

<span>Clear docs & handoff</span>

</div>

<p>End-to-end product delivery: UI/UX → build → launch → iterate.</p>

</div>

<h3>Engagements</h3>

<p>Fixed-scope projects, monthly retainers, or embedded team support.</p>

</div>

<h3>Communication</h3>

<p>Weekly updates, transparent estimates, clear milestones.</p>

</div>

</section>

<h2>Services</h2>

<p class="lead">Pick a lane or combine them. Most clients start with a discovery sprint, then execution.</p>

<h3>Mobile Apps</h3>

<p>Production-grade iOS and Android apps with performance and polish.</p>

<li>SwiftUI / UIKit, Jetpack Compose</li>

<li>Auth, payments, push notifications</li>

<li>Analytics, crash reporting, releases</li>

</ul>

</div>

<h3>Web Platforms</h3>

<p>Modern, SEO-friendly web apps and marketing sites that convert.</p>

<li>Next.js / React</li>

<li>CMS integration (optional)</li>

<li>Accessibility and performance</li>

</ul>

</div>

<h3>Backend & APIs</h3>

<p>Secure, scalable services with clean interfaces and great docs.</p>

<li>REST/GraphQL, webhooks</li>

<li>Databases, caching, queues</li>

<li>Observability: logs/metrics/traces</li>

</ul>

</div>

<h3>Cloud & DevOps</h3>

<p>Infrastructure you can operate confidently.</p>

<li>CI/CD pipelines</li>

<li>Docker, Kubernetes (as needed)</li>

<li>Infrastructure as Code</li>

</ul>

</div>

<h3>Product Delivery</h3>

<p>Scope, milestones, and execution that keep you on track.</p>

<li>Discovery & technical planning</li>

<li>Architecture & code standards</li>

<li>Release readiness</li>

</ul>

</div>

<h3>Maintenance & Support</h3>

<p>Keep things stable, monitored, and improving.</p>

<li>Bug fixes and enhancements</li>

<li>Performance tuning</li>

<li>Security updates</li>

</ul>

</div>

</section>

<p class="lead">A simple pattern: build something useful, ship fast, measure, iterate.</p>

<h3>How we deliver</h3>

<p class="muted">A lightweight process that keeps momentum.</p>

<span class="pill">1) Discovery</span>

<span class="pill">2) Prototype</span>

<span class="pill">3) Build</span>

<span class="pill">5) Launch</span>

<span class="pill">6) Iterate</span>

</div>

You get weekly updates, a clear backlog, and predictable milestones.

</p>

</div>

<h3>Example engagements</h3>

<p class="muted">Replace these with your actual case studies later.</p>

<li>Mobile MVP + backend API + admin dashboard</li>

<li>Migration: legacy app → modern architecture</li>

<li>Auth + payments + subscriptions integration</li>

<li>Performance and stability hardening</li>

</ul>

</div>

</section>

<h2>About</h2>

<p>

MobiWiki is a software/services company focused on building dependable products.

We prefer pragmatic engineering: clean code, clear communication, and measurable outcomes.

</p>

</div>

<h3>What you can expect</h3>

<li>Clear scope, transparent estimates</li>

<li>Code quality and documentation</li>

<li>Security-first mindset</li>

<li>Long-term maintainability</li>

</ul>

</div>

</section>

<h2>Contact</h2>

<p class="lead">Tell us what you’re building. We’ll reply with next steps and a timeline.</p>

<h3>Send a message</h3>

<p class="muted">This form opens your email client (no backend needed).</p>

<label for="email">Email</label>

<label for="message">Project details</label>

<button class="btn primary" type="submit">Compose Email</button>

<button class="btn" type="button" id="copyBtn">Copy message</button>

</div>

</form>

</div>

<h3>Direct</h3>

Prefer email? Reach us here:

<br />

<a href="mailto:hello@mobiwiki.ca?subject=Project%20Inquiry%20(MobiWiki)"><strong>hello@mobiwiki.ca</strong></a>

</p>

<h3 style="margin:0 0 8px; font-size:16px;">What to include</h3>

<li>What you’re building</li>

<li>Target platforms (iOS/Android/Web)</li>

<li>Timeline and constraints</li>

<li>Links/wireframes (if any)</li>

</ul>

</div>

<h3 style="margin:0 0 8px; font-size:16px;">Location</h3>

<p class="muted">Canada (remote-friendly)</p>

</div>

</section>

<div>

<a href="mailto:hello@mobiwiki.ca?subject=Project%20Inquiry%20(MobiWiki)">Contact</a>

</div>

</footer>

</main>

const toast = (title, detail) => {

const t = document.getElementById('toast');

t.innerHTML = `${title}${detail ? `<small>${detail}</small>` : ''}`;

t.style.display = 'block';

clearTimeout(window.__toastTimer);

window.__toastTimer = setTimeout(() => t.style.display = 'none', 2400);

};

document.getElementById('year').textContent = new Date().getFullYear();

// Mailto form (no backend)

document.getElementById('contactForm').addEventListener('submit', (e) => {

e.preventDefault();

const name = document.getElementById('name').value.trim();

const email = document.getElementById('email').value.trim();

const message = document.getElementById('message').value.trim();

const subject = encodeURIComponent(`Project Inquiry (MobiWiki) — ${name}`);

const body = encodeURIComponent(

`Name: ${name}

Email: ${email}

Project Details:

${message}

---

Sent from mobiwiki.ca`

);

// Opens user's email client

window.location.href = `mailto:hello@mobiwiki.ca?subject=${subject}&body=${body}`;

toast("Opening your email client…", "If nothing happens, check default mail app settings.");

});

// Copy message to clipboard

document.getElementById('copyBtn').addEventListener('click', async () => {

const name = document.getElementById('name').value.trim();

const email = document.getElementById('email').value.trim();

const message = document.getElementById('message').value.trim();

const text =

`Name: ${name}

Email: ${email}

Project Details:

${message}`;

try{

await navigator.clipboard.writeText(text);

toast("Copied to clipboard", "You can paste it into any email or chat.");

} catch {

toast("Copy failed", "Your browser may block clipboard access.");

}

});

</script>

</body>

</html>