1093 lines
38 KiB
HTML
1093 lines
38 KiB
HTML
<!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>
|
||
<meta name="description" content="Stackless builds websites, installs AI agents, and automates the workflows small and medium businesses keep putting off. Ship in days, not quarters." />
|
||
<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–14 working days
|
||
</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–14 day builds</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–Fri, 08:00–17:00 SAST</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>
|
||
|
||
</body>
|
||
</html>
|