2026-06-18 10:22:31 +00:00
<!doctype html>
< html lang = "en" >
< head >
< meta charset = "utf-8" / >
< meta name = "viewport" content = "width=device-width, initial-scale=1, viewport-fit=cover" / >
< title > Stackless — Build, automate, integrate. We handle it for you.< / title >
2026-06-18 11:54:52 +00:00
< meta name = "description" content = "Stackless builds, automates, and integrates the software your business runs on — websites, AI agents, workflow automation, and internal apps. Outsourced, end-to-end." / >
< meta name = "theme-color" content = "#1DB897" / >
<!-- Favicons (browser tabs + iOS home screen) -->
< link rel = "icon" type = "image/svg+xml" href = "favicon.svg" / >
< link rel = "icon" type = "image/png" sizes = "32x32" href = "favicon-32.png" / >
< link rel = "apple-touch-icon" sizes = "180x180" href = "apple-touch-icon.png" / >
< link rel = "manifest" href = "manifest.json" / >
<!-- Open Graph (WhatsApp, iMessage, Telegram, Discord, Slack, Facebook, LinkedIn) -->
< meta property = "og:type" content = "website" / >
< meta property = "og:site_name" content = "Stackless" / >
< meta property = "og:title" content = "Stackless — Build, automate, integrate. We handle it for you." / >
< meta property = "og:description" content = "Websites, AI agents, workflow automation, and internal apps — built and run for you. Outsourced software, end-to-end." / >
< meta property = "og:url" content = "https://stackless.co.za/" / >
< meta property = "og:image" content = "https://stackless.co.za/og-card.png" / >
< meta property = "og:image:width" content = "1200" / >
< meta property = "og:image:height" content = "630" / >
< meta property = "og:image:alt" content = "Stackless — build · automate · integrate" / >
< meta property = "og:locale" content = "en_ZA" / >
<!-- Twitter / X -->
< meta name = "twitter:card" content = "summary_large_image" / >
< meta name = "twitter:title" content = "Stackless — Build, automate, integrate. We handle it for you." / >
< meta name = "twitter:description" content = "Websites, AI agents, workflow automation, and internal apps — built and run for you." / >
< meta name = "twitter:image" content = "https://stackless.co.za/og-card.png" / >
< meta name = "twitter:image:alt" content = "Stackless — build · automate · integrate" / >
2026-06-18 10:22:31 +00:00
< link rel = "preconnect" href = "https://fonts.googleapis.com" / >
< link rel = "preconnect" href = "https://fonts.gstatic.com" crossorigin / >
< link href = "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel = "stylesheet" / >
< style >
/* ===========================================================
Tokens — Stackless brand (paper / ink / teal / coral)
=========================================================== */
:root {
--bg: #F4F2EC;
--surface: #FFFFFF;
--ink: #212A40;
--ink-2: #1C2439;
--muted: #6E7387;
--border: #E5E2D8;
--accent: #1DB897;
--accent-2: #F76857;
--font-display: 'Inter Tight', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
--r-sm: 8px;
--r-md: 14px;
--r-lg: 22px;
--shadow-pop: 0 14px 40px -18px rgba(28, 36, 57, 0.28);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
background: var(--bg);
color: var(--ink);
font: 16px/1.55 var(--font-body);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }
::selection { background: var(--accent); color: var(--ink-2); }
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; }
/* ---------- header ---------- */
.header {
position: sticky; top: 0; z-index: 50;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
background: rgba(244, 242, 236, 0.78);
border-bottom: 1px solid var(--border);
}
.header__row {
display: flex; align-items: center; justify-content: space-between;
height: 68px;
}
.brand {
display: inline-flex; align-items: center; gap: 10px;
font: 600 19px/1 var(--font-display);
letter-spacing: -0.02em;
color: var(--ink-2);
}
.brand__mark {
width: 26px; height: 26px;
display: grid; place-items: center;
}
.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
padding: 8px 14px; border-radius: 999px;
font-size: 14.5px; font-weight: 500;
color: var(--ink);
transition: background 0.15s, color 0.15s;
}
.nav a:hover { background: rgba(33, 42, 64, 0.06); }
.nav__cta {
margin-left: 12px;
background: var(--accent-2); color: #fff !important;
padding: 9px 16px;
}
.nav__cta:hover { background: #e25645 !important; }
.menu-btn { display: none; background: transparent; border: 0; padding: 8px; }
/* ---------- buttons ---------- */
.btn {
display: inline-flex; align-items: center; gap: 10px;
padding: 14px 22px;
border-radius: 999px;
font: 500 15px/1 var(--font-body);
letter-spacing: -0.005em;
border: 1px solid transparent;
transition: transform 0.12s ease, background 0.15s, border-color 0.15s;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--accent-2); color: #fff; }
.btn--primary:hover { background: #e25645; }
.btn--ghost {
background: transparent;
color: var(--ink);
border-color: var(--ink);
}
.btn--ghost:hover { background: var(--ink); color: #fff; }
.btn--sm { padding: 10px 16px; font-size: 14px; }
.btn .arrow { transition: transform 0.15s; }
.btn:hover .arrow { transform: translateX(3px); }
/* ---------- hero ---------- */
.hero { padding: 88px 0 60px; position: relative; }
.hero__eyebrow {
display: inline-flex; align-items: center; gap: 10px;
padding: 7px 14px;
border: 1px solid var(--border);
border-radius: 999px;
background: var(--surface);
font: 500 12.5px/1 var(--font-mono);
letter-spacing: 0.04em;
color: var(--ink);
}
.hero__eyebrow .dot {
width: 7px; height: 7px; border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 4px rgba(29, 184, 151, 0.18);
}
.hero h1 {
margin-top: 22px;
font: 700 clamp(40px, 5.6vw, 76px)/1.04 var(--font-display);
letter-spacing: -0.035em;
color: var(--ink-2);
max-width: 14ch;
}
.hero h1 em {
font-style: normal;
color: var(--accent);
}
.hero__sub {
margin-top: 22px;
font-size: 19px;
line-height: 1.55;
color: var(--muted);
max-width: 56ch;
}
.hero__actions { margin-top: 34px; display: flex; gap: 14px; flex-wrap: wrap; }
.hero__meta {
margin-top: 28px;
display: flex; gap: 26px; flex-wrap: wrap;
font: 500 13px/1.4 var(--font-mono);
color: var(--muted);
letter-spacing: 0.02em;
}
.hero__meta span { display: inline-flex; align-items: center; gap: 7px; }
.hero__meta svg { color: var(--accent); }
.hero__panel {
margin-top: 64px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
box-shadow: var(--shadow-pop);
overflow: hidden;
}
.panel__bar {
display: flex; align-items: center; gap: 8px;
padding: 14px 18px;
border-bottom: 1px solid var(--border);
background: var(--bg);
}
.panel__dot { width: 10px; height: 10px; border-radius: 50%; background: #d9d6cc; }
.panel__dot.is-on { background: var(--accent); }
.panel__url {
margin-left: 14px;
font: 500 12.5px/1 var(--font-mono);
color: var(--muted);
letter-spacing: 0.02em;
}
.panel__body {
display: grid;
grid-template-columns: 1.2fr 1fr;
min-height: 360px;
}
.panel__col {
padding: 30px 32px;
}
.panel__col + .panel__col { border-left: 1px solid var(--border); }
.panel__col h3 {
font: 600 14px/1 var(--font-mono);
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--muted);
margin-bottom: 16px;
}
.panel__row {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 0;
border-top: 1px solid var(--border);
font-size: 14.5px;
}
.panel__row:first-of-type { border-top: 0; }
.panel__row .pill {
font: 500 11.5px/1 var(--font-mono);
padding: 4px 8px;
border-radius: 4px;
letter-spacing: 0.04em;
background: rgba(29, 184, 151, 0.12);
color: #117a64;
}
.panel__row .pill.is-2 { background: rgba(247, 104, 87, 0.13); color: #c84434; }
.panel__row .pill.is-3 { background: rgba(33, 42, 64, 0.08); color: var(--ink); }
.panel__stat {
display: grid; grid-template-columns: 1fr 1fr;
gap: 18px 24px;
}
.panel__stat .num {
font: 600 30px/1 var(--font-display);
letter-spacing: -0.02em;
color: var(--ink-2);
font-variant-numeric: tabular-nums;
}
.panel__stat .lbl {
margin-top: 6px;
font: 500 12.5px/1.4 var(--font-mono);
color: var(--muted);
letter-spacing: 0.02em;
}
/* ---------- trust strip ---------- */
.trust {
padding: 36px 0 16px;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
margin-top: 80px;
}
.trust__lbl {
font: 500 12px/1 var(--font-mono);
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--muted);
text-align: center;
margin-bottom: 22px;
}
.trust__row {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px;
align-items: center;
}
.trust__logo {
text-align: center;
font: 600 16px/1 var(--font-display);
letter-spacing: -0.01em;
color: var(--ink);
opacity: 0.55;
}
.trust__logo small {
display: block;
font: 500 10px/1 var(--font-mono);
color: var(--muted);
letter-spacing: 0.1em;
margin-top: 4px;
text-transform: uppercase;
opacity: 0.7;
}
/* ---------- services ---------- */
.section { padding: 110px 0 30px; }
.section__head { max-width: 720px; margin-bottom: 50px; }
.section__kicker {
display: inline-flex; align-items: center; gap: 8px;
font: 500 12.5px/1 var(--font-mono);
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--accent);
margin-bottom: 18px;
}
.section__kicker::before {
content: ""; display: block; width: 22px; height: 1px; background: var(--accent);
}
.section h2 {
font: 600 clamp(30px, 3.8vw, 46px)/1.1 var(--font-display);
letter-spacing: -0.025em;
color: var(--ink-2);
}
.section__sub {
margin-top: 14px;
font-size: 17px;
color: var(--muted);
max-width: 60ch;
}
.services {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.service {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-md);
padding: 28px 26px;
display: flex; flex-direction: column;
transition: border-color 0.18s, transform 0.18s;
}
.service:hover {
border-color: rgba(29, 184, 151, 0.5);
transform: translateY(-2px);
}
.service__num {
font: 500 12px/1 var(--font-mono);
color: var(--muted);
letter-spacing: 0.06em;
}
.service__icon {
width: 40px; height: 40px;
margin: 18px 0 20px;
border-radius: 10px;
background: rgba(29, 184, 151, 0.10);
color: var(--accent);
display: grid; place-items: center;
}
.service__icon svg { width: 22px; height: 22px; }
.service h3 {
font: 600 19px/1.25 var(--font-display);
letter-spacing: -0.015em;
color: var(--ink-2);
margin-bottom: 8px;
}
.service p {
font-size: 14.5px;
color: var(--muted);
line-height: 1.55;
margin-bottom: 18px;
}
.service__list {
list-style: none;
margin-top: auto;
border-top: 1px solid var(--border);
padding-top: 16px;
}
.service__list li {
font: 500 13px/1.6 var(--font-mono);
color: var(--ink);
padding: 4px 0;
letter-spacing: -0.005em;
}
.service__list li::before {
content: "→"; color: var(--accent); margin-right: 8px;
}
/* ---------- how it works ---------- */
.how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.step {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-md);
padding: 26px;
position: relative;
}
.step__num {
font: 600 48px/1 var(--font-display);
letter-spacing: -0.04em;
color: var(--accent);
opacity: 0.85;
}
.step h3 {
margin-top: 14px;
font: 600 19px/1.25 var(--font-display);
letter-spacing: -0.015em;
color: var(--ink-2);
}
.step p {
margin-top: 8px;
font-size: 14.5px;
color: var(--muted);
line-height: 1.55;
}
.step__time {
display: inline-flex; align-items: center; gap: 6px;
margin-top: 18px;
font: 500 12px/1 var(--font-mono);
color: var(--muted);
padding: 6px 10px;
border-radius: 999px;
border: 1px solid var(--border);
}
/* ---------- why us ---------- */
.why {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 56px;
align-items: start;
}
.why__col h2 { max-width: 16ch; }
.why__col p { margin-top: 16px; max-width: 46ch; }
.why__list { display: grid; gap: 14px; }
.why__item {
display: grid;
grid-template-columns: 32px 1fr;
gap: 14px;
padding: 20px 22px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-md);
}
.why__num {
font: 600 18px/1 var(--font-mono);
color: var(--accent-2);
letter-spacing: -0.02em;
}
.why__item h4 {
font: 600 16px/1.3 var(--font-display);
color: var(--ink-2);
letter-spacing: -0.01em;
}
.why__item p {
margin-top: 4px;
font-size: 14px;
color: var(--muted);
line-height: 1.5;
}
/* ---------- pricing teaser ---------- */
.pricing {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.tier {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-md);
padding: 30px;
display: flex; flex-direction: column;
}
.tier.is-featured {
border-color: var(--ink-2);
background: var(--ink-2);
color: #F4F2EC;
}
.tier__name {
font: 500 12.5px/1 var(--font-mono);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted);
}
.tier.is-featured .tier__name { color: var(--accent); }
.tier__price {
margin: 18px 0 4px;
font: 600 42px/1 var(--font-display);
letter-spacing: -0.03em;
color: var(--ink-2);
font-variant-numeric: tabular-nums;
}
.tier.is-featured .tier__price { color: #fff; }
.tier__price small {
font: 500 14px/1 var(--font-body);
color: var(--muted);
margin-left: 4px;
letter-spacing: 0;
}
.tier.is-featured .tier__price small { color: rgba(244, 242, 236, 0.6); }
.tier__desc {
font-size: 14px; color: var(--muted);
min-height: 42px;
}
.tier.is-featured .tier__desc { color: rgba(244, 242, 236, 0.7); }
.tier__feat {
list-style: none;
margin: 22px 0 24px;
border-top: 1px solid var(--border);
padding-top: 18px;
}
.tier.is-featured .tier__feat { border-top-color: rgba(244, 242, 236, 0.15); }
.tier__feat li {
font-size: 14px;
padding: 7px 0;
display: flex; gap: 10px;
color: var(--ink);
}
.tier.is-featured .tier__feat li { color: rgba(244, 242, 236, 0.92); }
.tier__feat li::before {
content: ""; display: block;
width: 16px; height: 16px; flex-shrink: 0;
margin-top: 2px;
background: url("data:image/svg+xml;utf8,< svg xmlns = 'http://www.w3.org/2000/svg' viewBox = '0 0 16 16' > < path d = 'M3.5 8.5l3 3 6-6.5' fill = 'none' stroke = '%231DB897' stroke-width = '2' stroke-linecap = 'round' stroke-linejoin = 'round' / > < / svg > ") no-repeat center / contain;
}
.tier.is-featured .tier__feat li::before {
background-image: url("data:image/svg+xml;utf8,< svg xmlns = 'http://www.w3.org/2000/svg' viewBox = '0 0 16 16' > < path d = 'M3.5 8.5l3 3 6-6.5' fill = 'none' stroke = '%231DB897' stroke-width = '2' stroke-linecap = 'round' stroke-linejoin = 'round' / > < / svg > ");
}
.tier .btn { justify-content: center; }
/* ---------- cta banner ---------- */
.cta {
margin: 110px 0 100px;
background: var(--ink-2);
border-radius: var(--r-lg);
padding: 60px 56px;
color: #F4F2EC;
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 40px;
align-items: end;
position: relative;
overflow: hidden;
}
.cta::after {
content: ""; position: absolute; right: -40px; bottom: -40px;
width: 240px; height: 240px; border-radius: 50%;
background: radial-gradient(circle at center, rgba(29, 184, 151, 0.4), transparent 70%);
}
.cta h2 {
font: 600 clamp(28px, 3.4vw, 42px)/1.1 var(--font-display);
letter-spacing: -0.025em;
color: #fff;
max-width: 18ch;
}
.cta p {
margin-top: 14px;
font-size: 16px;
color: rgba(244, 242, 236, 0.7);
max-width: 50ch;
}
.cta__actions { display: flex; flex-direction: column; gap: 12px; align-items: flex-end; position: relative; z-index: 1; }
.cta__actions .btn--primary { background: var(--accent-2); }
.cta__small {
font: 500 12px/1.4 var(--font-mono);
color: rgba(244, 242, 236, 0.55);
letter-spacing: 0.02em;
}
/* ---------- footer ---------- */
footer {
border-top: 1px solid var(--border);
padding: 56px 0 36px;
}
.foot {
display: grid;
grid-template-columns: 1.5fr repeat(3, 1fr);
gap: 40px;
margin-bottom: 40px;
}
.foot__brand p {
margin-top: 12px;
font-size: 14px;
color: var(--muted);
max-width: 30ch;
}
.foot h5 {
font: 500 12px/1 var(--font-mono);
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--ink-2);
margin-bottom: 14px;
}
.foot ul { list-style: none; }
.foot li { padding: 4px 0; font-size: 14px; color: var(--muted); }
.foot li a:hover { color: var(--ink-2); }
.foot__legal {
display: flex; justify-content: space-between; align-items: center;
padding-top: 24px;
border-top: 1px solid var(--border);
font: 500 12.5px/1.4 var(--font-mono);
color: var(--muted);
letter-spacing: 0.02em;
}
/* ---------- responsive ---------- */
@media (max-width: 960px) {
.hero__panel .panel__body { grid-template-columns: 1fr; }
.panel__col + .panel__col { border-left: 0; border-top: 1px solid var(--border); }
.services, .how, .pricing { grid-template-columns: 1fr 1fr; }
.why { grid-template-columns: 1fr; gap: 36px; }
.cta { grid-template-columns: 1fr; padding: 40px; }
.cta__actions { align-items: flex-start; }
.foot { grid-template-columns: 1fr 1fr; }
.trust__row { grid-template-columns: repeat(3, 1fr); row-gap: 24px; }
}
@media (max-width: 680px) {
.nav { display: none; }
.menu-btn { display: inline-flex; }
.nav.is-open {
display: flex;
position: absolute; top: 68px; left: 0; right: 0;
flex-direction: column;
background: var(--surface);
border-bottom: 1px solid var(--border);
padding: 16px;
gap: 4px;
}
.nav.is-open a { padding: 12px 14px; }
.nav.is-open .nav__cta { margin-left: 0; margin-top: 8px; text-align: center; }
.hero { padding: 56px 0 36px; }
.hero__panel { margin-top: 36px; }
.panel__col { padding: 22px; }
.services, .how, .pricing { grid-template-columns: 1fr; }
.section { padding: 72px 0 16px; }
.foot { grid-template-columns: 1fr; gap: 28px; }
.foot__legal { flex-direction: column; gap: 8px; align-items: flex-start; }
.trust { margin-top: 48px; }
}
< / style >
< / head >
< body >
< header class = "header" >
< div class = "wrap header__row" >
< a href = "/" class = "brand" >
< span class = "brand__mark" >
<!-- Stackless 's' mark — teal layered ribbon with coral dots -->
< svg viewBox = "0 0 26 26" fill = "none" xmlns = "http://www.w3.org/2000/svg" aria-hidden = "true" >
< circle cx = "13" cy = "4" r = "2.6" fill = "#F76857" / >
< circle cx = "13" cy = "22" r = "2.6" fill = "#F76857" / >
< path d = "M5 9c0-2.8 2.2-5 5-5h1c2.8 0 5 2.2 5 5v0c0 1.4-1.1 2.5-2.5 2.5H7.5C6.1 11.5 5 12.6 5 14v0c0 2.8 2.2 5 5 5h1" stroke = "#1DB897" stroke-width = "2.6" stroke-linecap = "round" / >
< path d = "M11 11.5h6c1.4 0 2.5 1.1 2.5 2.5v0c0 1.4-1.1 2.5-2.5 2.5H11" stroke = "#1DB897" stroke-width = "2.6" stroke-linecap = "round" opacity = "0.55" / >
< / svg >
< / span >
stackless
< / a >
< nav class = "nav" id = "nav" >
< a href = "#services" > Services< / a >
< a href = "#how" > How it works< / a >
< a href = "pricing.html" > Pricing< / a >
< a href = "#why" > Why us< / a >
< a href = "contact.html" class = "nav__cta" > Start a project< / a >
< / nav >
< button class = "menu-btn" id = "menuBtn" aria-label = "Open menu" >
< svg width = "22" height = "22" viewBox = "0 0 22 22" fill = "none" > < path d = "M3 6h16M3 11h16M3 16h16" stroke = "#212A40" stroke-width = "2" stroke-linecap = "round" / > < / svg >
< / button >
< / div >
< / header >
<!-- =========================================================
HERO
========================================================= -->
< section class = "hero" >
< div class = "wrap" >
< span class = "hero__eyebrow" > < span class = "dot" > < / span > Now booking Q3 builds< / span >
< h1 > Build less.< br / > Ship < em > more< / em > .< / h1 >
< p class = "hero__sub" >
Stackless is the on-call studio for small and medium businesses. We build your website, install AI agents that do the busywork, and wire up the tools you already pay for — so your team can stop wrestling with software and get back to the work that actually moves the business.
< / p >
< div class = "hero__actions" >
< a class = "btn btn--primary" href = "contact.html" > Start a project < span class = "arrow" > →< / span > < / a >
< a class = "btn btn--ghost" href = "#services" > See what we do< / a >
< / div >
< div class = "hero__meta" >
< span >
< svg width = "14" height = "14" viewBox = "0 0 14 14" fill = "none" > < path d = "M2 7l3 3 7-7" stroke = "currentColor" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" / > < / svg >
Most builds ship in 10–
< / span >
< span >
< svg width = "14" height = "14" viewBox = "0 0 14 14" fill = "none" > < path d = "M7 1v6l4 2" stroke = "currentColor" stroke-width = "2" stroke-linecap = "round" / > < / svg >
Fixed quote within one business day
< / span >
< span >
< svg width = "14" height = "14" viewBox = "0 0 14 14" fill = "none" > < path d = "M7 1l1.8 4 4.2.5-3.2 2.9 1 4.1L7 10.4 3.2 12.5l1-4.1L1 5.5l4.2-.5L7 1z" fill = "currentColor" / > < / svg >
Cape Town · Johannesburg studio
< / span >
< / div >
<!-- product - style preview panel -->
< div class = "hero__panel" aria-hidden = "true" >
< div class = "panel__bar" >
< span class = "panel__dot" > < / span >
< span class = "panel__dot is-on" > < / span >
< span class = "panel__dot" > < / span >
< span class = "panel__url" > stackless.app / c / meridian-coffee< / span >
< / div >
< div class = "panel__body" >
< div class = "panel__col" >
< h3 > Active workflows< / h3 >
< div class = "panel__row" >
< span > Lead intake → CRM< / span >
< span class = "pill" > RUNNING< / span >
< / div >
< div class = "panel__row" >
< span > Quote follow-up email< / span >
< span class = "pill is-2" > REVIEW< / span >
< / div >
< div class = "panel__row" >
< span > Inventory sync (Shopify → Xero)< / span >
< span class = "pill" > RUNNING< / span >
< / div >
< div class = "panel__row" >
< span > WhatsApp support agent< / span >
< span class = "pill is-3" > DRAFT< / span >
< / div >
< div class = "panel__row" >
< span > Monthly client report< / span >
< span class = "pill" > RUNNING< / span >
< / div >
< / div >
< div class = "panel__col" >
< h3 > This month< / h3 >
< div class = "panel__stat" >
< div >
< div class = "num" > 142< / div >
< div class = "lbl" > Hours saved< / div >
< / div >
< div >
< div class = "num" > 38< / div >
< div class = "lbl" > Leads handled by agent< / div >
< / div >
< div >
< div class = "num" > R48.2k< / div >
< div class = "lbl" > Tools consolidated< / div >
< / div >
< div >
< div class = "num" > 98.4%< / div >
< div class = "lbl" > Uptime< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / section >
<!-- =========================================================
TRUST STRIP
========================================================= -->
< section class = "trust" >
< div class = "wrap" >
< div class = "trust__lbl" > Trusted by operators at< / div >
< div class = "trust__row" >
< div class = "trust__logo" > meridian< small > coffee co< / small > < / div >
< div class = "trust__logo" > kaelo< small > logistics< / small > < / div >
< div class = "trust__logo" > ovira< small > wellness< / small > < / div >
< div class = "trust__logo" > stanfield< small > & co< / small > < / div >
< div class = "trust__logo" > nautilus< small > imports< / small > < / div >
< div class = "trust__logo" > deux< small > studio< / small > < / div >
< / div >
< / div >
< / section >
<!-- =========================================================
SERVICES
========================================================= -->
< section class = "section" id = "services" >
< div class = "wrap" >
< div class = "section__head" >
< span class = "section__kicker" > What we ship< / span >
< h2 > Six things we do, end to end.< / h2 >
< p class = "section__sub" > Pick one, or layer them. Every engagement is a fixed quote with weekly demos — no retainers you can't get out of, no hidden scope creep.< / p >
< / div >
< div class = "services" >
< article class = "service" >
< span class = "service__num" > / 01< / span >
< div class = "service__icon" >
< svg viewBox = "0 0 24 24" fill = "none" > < rect x = "3" y = "4" width = "18" height = "14" rx = "2" stroke = "currentColor" stroke-width = "1.7" / > < path d = "M3 8h18" stroke = "currentColor" stroke-width = "1.7" / > < circle cx = "6.5" cy = "6" r = "0.7" fill = "currentColor" / > < circle cx = "9" cy = "6" r = "0.7" fill = "currentColor" / > < path d = "M8 18l-2 3M16 18l2 3" stroke = "currentColor" stroke-width = "1.7" stroke-linecap = "round" / > < / svg >
< / div >
< h3 > Website builds & upgrades< / h3 >
< p > Marketing sites, ecommerce, internal portals — designed, built and hosted. You get a real CMS, not a black box.< / p >
< ul class = "service__list" >
< li > Brand & UX< / li >
< li > Webflow · Next.js · Shopify< / li >
< li > Hosting + analytics included< / li >
< / ul >
< / article >
< article class = "service" >
< span class = "service__num" > / 02< / span >
< div class = "service__icon" >
< svg viewBox = "0 0 24 24" fill = "none" > < rect x = "4" y = "7" width = "16" height = "11" rx = "2" stroke = "currentColor" stroke-width = "1.7" / > < circle cx = "9" cy = "12.5" r = "1.4" stroke = "currentColor" stroke-width = "1.7" / > < circle cx = "15" cy = "12.5" r = "1.4" stroke = "currentColor" stroke-width = "1.7" / > < path d = "M12 4v3" stroke = "currentColor" stroke-width = "1.7" stroke-linecap = "round" / > < / svg >
< / div >
< h3 > AI agents, installed< / h3 >
< p > Trained on your docs, wired into your inbox and CRM. They draft, route, escalate and reply — under the rules you set.< / p >
< ul class = "service__list" >
< li > Sales & support agents< / li >
< li > Voice + chat< / li >
< li > Human escalation paths< / li >
< / ul >
< / article >
< article class = "service" >
< span class = "service__num" > / 03< / span >
< div class = "service__icon" >
< svg viewBox = "0 0 24 24" fill = "none" > < path d = "M4 7l8-3 8 3-8 3-8-3z" stroke = "currentColor" stroke-width = "1.7" stroke-linejoin = "round" / > < path d = "M4 12l8 3 8-3M4 17l8 3 8-3" stroke = "currentColor" stroke-width = "1.7" stroke-linejoin = "round" / > < / svg >
< / div >
< h3 > Rent-an-AI-Agent< / h3 >
< p > A dedicated agent on a monthly retainer. Trained once, refined forever. Pause or swap any month.< / p >
< ul class = "service__list" >
< li > From R9 800 / month< / li >
< li > Weekly refinement calls< / li >
< li > Cancel any time< / li >
< / ul >
< / article >
< article class = "service" >
< span class = "service__num" > / 04< / span >
< div class = "service__icon" >
< svg viewBox = "0 0 24 24" fill = "none" > < path d = "M13 3L5 14h6l-1 7 8-11h-6l1-7z" stroke = "currentColor" stroke-width = "1.7" stroke-linejoin = "round" / > < / svg >
< / div >
< h3 > Outreach & lead-gen automation< / h3 >
< p > Cold and warm pipelines that don't sound like a bot. Personalisation tokens pulled from live data, not scraped fluff.< / p >
< ul class = "service__list" >
< li > Email + LinkedIn + WhatsApp< / li >
< li > Reply detection & routing< / li >
< li > CRM hand-off< / li >
< / ul >
< / article >
< article class = "service" >
< span class = "service__num" > / 05< / span >
< div class = "service__icon" >
< svg viewBox = "0 0 24 24" fill = "none" > < circle cx = "6" cy = "6" r = "2.5" stroke = "currentColor" stroke-width = "1.7" / > < circle cx = "18" cy = "6" r = "2.5" stroke = "currentColor" stroke-width = "1.7" / > < circle cx = "12" cy = "18" r = "2.5" stroke = "currentColor" stroke-width = "1.7" / > < path d = "M8 7l3 9M16 7l-3 9M8 6h8" stroke = "currentColor" stroke-width = "1.7" / > < / svg >
< / div >
< h3 > Workflow integrations< / h3 >
< p > Xero ↔ Shopify, HubSpot ↔ Slack, WhatsApp ↔ your inbox. The plumbing between the tools you already pay for, made reliable.< / p >
< ul class = "service__list" >
< li > n8n · Make · Zapier< / li >
< li > Custom APIs when needed< / li >
< li > Error alerts + retries< / li >
< / ul >
< / article >
< article class = "service" >
< span class = "service__num" > / 06< / span >
< div class = "service__icon" >
< svg viewBox = "0 0 24 24" fill = "none" > < rect x = "6" y = "3" width = "12" height = "18" rx = "2" stroke = "currentColor" stroke-width = "1.7" / > < path d = "M10 18h4" stroke = "currentColor" stroke-width = "1.7" stroke-linecap = "round" / > < / svg >
< / div >
< h3 > Apps, dashboards & internal tools< / h3 >
< p > Custom web apps your team actually opens on Monday morning. Field-ops tools, ops dashboards, customer portals.< / p >
< ul class = "service__list" >
< li > React + Postgres< / li >
< li > Role-based access< / li >
< li > Mobile-responsive by default< / li >
< / ul >
< / article >
< / div >
< / div >
< / section >
<!-- =========================================================
HOW IT WORKS
========================================================= -->
< section class = "section" id = "how" >
< div class = "wrap" >
< div class = "section__head" >
< span class = "section__kicker" > How it works< / span >
< h2 > Three steps. No mystery.< / h2 >
< p class = "section__sub" > We start with a 30-minute call, send a fixed quote the next day, and demo something real every Friday until it's shipped.< / p >
< / div >
< div class = "how" >
< article class = "step" >
< div class = "step__num" > 01< / div >
< h3 > Tell us what's broken< / h3 >
< p > A short call. We map what's slowing you down — a missing site, a lead pipeline, an inbox that eats your mornings — and what would actually move the needle.< / p >
< span class = "step__time" > ~ 30 min call< / span >
< / article >
< article class = "step" >
< div class = "step__num" > 02< / div >
< h3 > Get a fixed quote< / h3 >
< p > You receive a one-page quote by the next business day: scope, deliverables, timeline, price. No retainer, no surprise hours, no fine print.< / p >
< span class = "step__time" > ~ 1 day turnaround< / span >
< / article >
< article class = "step" >
< div class = "step__num" > 03< / div >
< h3 > Watch it ship weekly< / h3 >
< p > Every Friday you get a Loom showing what's live that week. You sign off in Slack, not in a 90-minute status meeting.< / p >
< span class = "step__time" > 10– < / span >
< / article >
< / div >
< / div >
< / section >
<!-- =========================================================
WHY US
========================================================= -->
< section class = "section" id = "why" >
< div class = "wrap why" >
< div class = "why__col" >
< span class = "section__kicker" > Why Stackless< / span >
< h2 > The studio you call when your last agency ghosted you.< / h2 >
< p class = "section__sub" > We've been the people who fix what other people built. Most of our work comes from teams who tried once, got burned, and want a partner who actually answers the phone.< / p >
< / div >
< div class = "why__list" >
< div class = "why__item" >
< span class = "why__num" > 01< / span >
< div >
< h4 > You always know who's building< / h4 >
< p > Two named humans, plus the agent they supervise. No black-box dev shop, no junior team learning on your dime.< / p >
< / div >
< / div >
< div class = "why__item" >
< span class = "why__num" > 02< / span >
< div >
< h4 > Fixed quotes, real demos< / h4 >
< p > We send a price and a deadline, then show you something live every Friday. If we miss it, the next build's on us.< / p >
< / div >
< / div >
< div class = "why__item" >
< span class = "why__num" > 03< / span >
< div >
< h4 > You own everything we build< / h4 >
< p > Code, content, accounts, agent prompts — all yours. We hand over the keys on day one. Walk away whenever you want.< / p >
< / div >
< / div >
< div class = "why__item" >
< span class = "why__num" > 04< / span >
< div >
< h4 > Built for small teams, not enterprises< / h4 >
< p > We work with 5 to 200-person businesses. No procurement theatre, no 200-slide decks — just a call, a quote, and a build.< / p >
< / div >
< / div >
< / div >
< / div >
< / section >
<!-- =========================================================
PRICING TEASER
========================================================= -->
< section class = "section" id = "pricing" >
< div class = "wrap" >
< div class = "section__head" >
< span class = "section__kicker" > Pricing< / span >
< h2 > Honest tiers. No surprise invoices.< / h2 >
< p class = "section__sub" > Project pricing for one-off builds, monthly retainers for ongoing work. All prices in South African Rand, excl. VAT.< / p >
< / div >
< div class = "pricing" >
< article class = "tier" >
< span class = "tier__name" > Project< / span >
< div class = "tier__price" > R18k< small > starting< / small > < / div >
< p class = "tier__desc" > One-off website build or single integration.< / p >
< ul class = "tier__feat" >
< li > Fixed quote, fixed deadline< / li >
< li > Weekly demos< / li >
< li > 30 days of post-launch support< / li >
< li > You own everything< / li >
< / ul >
< a class = "btn btn--ghost btn--sm" href = "contact.html" > Get a quote< / a >
< / article >
< article class = "tier is-featured" >
< span class = "tier__name" > Rent-an-AI-Agent< / span >
< div class = "tier__price" > R9.8k< small > / month< / small > < / div >
< p class = "tier__desc" > A dedicated AI agent, refined weekly, cancel anytime.< / p >
< ul class = "tier__feat" >
< li > Trained on your docs & tone< / li >
< li > Inbox, CRM & WhatsApp< / li >
< li > Weekly refinement call< / li >
< li > Human escalation paths< / li >
< / ul >
< a class = "btn btn--primary btn--sm" href = "pricing.html" > See full pricing< / a >
< / article >
< article class = "tier" >
< span class = "tier__name" > Studio< / span >
< div class = "tier__price" > R48k< small > / month< / small > < / div >
< p class = "tier__desc" > Ongoing builds, agents, and integrations in one retainer.< / p >
< ul class = "tier__feat" >
< li > Up to 3 active workstreams< / li >
< li > Dedicated lead + agent< / li >
< li > Priority response, same day< / li >
< li > Quarterly roadmap reviews< / li >
< / ul >
< a class = "btn btn--ghost btn--sm" href = "contact.html" > Book a discovery call< / a >
< / article >
< / div >
< / div >
< / section >
<!-- =========================================================
CTA BANNER
========================================================= -->
< section class = "wrap" >
< div class = "cta" >
< div >
< h2 > You've got a business to run. Let us take the software off your plate.< / h2 >
< p > Tell us what's eating your week. We'll come back with a fixed quote and a real plan — usually within one business day.< / p >
< / div >
< div class = "cta__actions" >
< a class = "btn btn--primary" href = "contact.html" > Start a project < span class = "arrow" > →< / span > < / a >
< span class = "cta__small" > or email hello@stackless.app< / span >
< / div >
< / div >
< / section >
<!-- =========================================================
FOOTER
========================================================= -->
< footer >
< div class = "wrap" >
< div class = "foot" >
< div class = "foot__brand" >
< a href = "/" class = "brand" >
< span class = "brand__mark" >
< svg viewBox = "0 0 26 26" fill = "none" aria-hidden = "true" >
< circle cx = "13" cy = "4" r = "2.6" fill = "#F76857" / >
< circle cx = "13" cy = "22" r = "2.6" fill = "#F76857" / >
< path d = "M5 9c0-2.8 2.2-5 5-5h1c2.8 0 5 2.2 5 5v0c0 1.4-1.1 2.5-2.5 2.5H7.5C6.1 11.5 5 12.6 5 14v0c0 2.8 2.2 5 5 5h1" stroke = "#1DB897" stroke-width = "2.6" stroke-linecap = "round" / >
< path d = "M11 11.5h6c1.4 0 2.5 1.1 2.5 2.5v0c0 1.4-1.1 2.5-2.5 2.5H11" stroke = "#1DB897" stroke-width = "2.6" stroke-linecap = "round" opacity = "0.55" / >
< / svg >
< / span >
stackless
< / a >
< p > The on-call studio for small and medium businesses. Build, automate, integrate — without hiring an in-house team.< / p >
< / div >
< div >
< h5 > Services< / h5 >
< ul >
< li > < a href = "#services" > Websites< / a > < / li >
< li > < a href = "#services" > AI agents< / a > < / li >
< li > < a href = "pricing.html" > Rent-an-AI-Agent< / a > < / li >
< li > < a href = "#services" > Integrations< / a > < / li >
< li > < a href = "#services" > Apps & dashboards< / a > < / li >
< / ul >
< / div >
< div >
< h5 > Studio< / h5 >
< ul >
< li > < a href = "#how" > How we work< / a > < / li >
< li > < a href = "#why" > Why us< / a > < / li >
< li > < a href = "pricing.html" > Pricing< / a > < / li >
< li > < a href = "contact.html" > Start a project< / a > < / li >
< / ul >
< / div >
< div >
< h5 > Reach us< / h5 >
< ul >
< li > < a href = "mailto:hello@stackless.app" > hello@stackless.app< / a > < / li >
< li > < a href = "tel:+27210000000" > +27 21 000 0000< / a > < / li >
< li > Cape Town · Johannesburg< / li >
< li > Mon– – < / li >
< / ul >
< / div >
< / div >
< div class = "foot__legal" >
< span > © 2026 Stackless (Pty) Ltd · Reg. 2024/184256/07< / span >
< span > Made on the African continent.< / span >
< / div >
< / div >
< / footer >
< script >
// Mobile menu toggle
(function () {
var btn = document.getElementById('menuBtn');
var nav = document.getElementById('nav');
if (btn & & nav) {
btn.addEventListener('click', function () {
nav.classList.toggle('is-open');
});
nav.addEventListener('click', function (e) {
if (e.target.tagName === 'A') nav.classList.remove('is-open');
});
}
// Animate stat numbers when panel scrolls into view
var stats = document.querySelectorAll('.panel__stat .num');
if ('IntersectionObserver' in window & & stats.length) {
var io = new IntersectionObserver(function (entries) {
entries.forEach(function (entry) {
if (!entry.isIntersecting) return;
var el = entry.target;
if (el.dataset.done) return;
el.dataset.done = '1';
var raw = el.textContent.trim();
var isPercent = raw.endsWith('%');
var isRand = raw.startsWith('R');
var suffix = isPercent ? '%' : (isRand ? 'k' : '');
var num = parseFloat(raw.replace(/[^\d.]/g, '')) || 0;
var prefix = isRand ? 'R' : '';
var duration = 900;
var start = null;
function step(t) {
if (!start) start = t;
var p = Math.min(1, (t - start) / duration);
var v = num * (0.6 + 0.4 * (1 - Math.pow(1 - p, 3)));
var formatted = num >= 100 ? Math.round(v) : v.toFixed(1);
el.textContent = prefix + formatted + suffix;
if (p < 1 ) requestAnimationFrame ( step ) ;
else el.textContent = raw;
}
requestAnimationFrame(step);
});
}, { threshold: 0.4 });
stats.forEach(function (el) { io.observe(el); });
}
})();
< / script >
2026-06-18 15:51:31 +00:00
< script src = "chat-widget.js" defer > < / script >
2026-06-18 10:22:31 +00:00
< / body >
< / html >
