Founder-Centric
100% Founder-First
Every decision starts with one question: how does this serve the
founder? We provide structure and expertise while founders retain
ownership and full control of their vision.
Speed to Launch
1–3 Months
Time is a startup's most valuable asset. Our proven frameworks,
experienced teams, and networks enable founders to move from idea to
market in months, not years.
Hands-On Experience
24/7 Execution Support
We don't invest and exit. We work alongside founders across product,
hiring, operations, and growth — treating your venture success as our
own mission.
MENA Expertise
10+ Years Regional
Local market knowledge is essential. We understand the regulatory
landscape, cultural nuances, and market dynamics — and build
strategies accordingly.
/* *,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
overflow-x: hidden;
} */
/* ── HERO ── */
@import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
.hero {
width: 100%;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 4rem 2rem;
border-bottom: 1px solid #eee;
}
.hero h1 {
font-size: clamp(2.2rem, 5vw, 4rem);
font-weight: 700;
color: #0a0a0a;
margin-bottom: 1.2rem;
letter-spacing: -0.03em;
line-height: 1.15;
}
.hero p {
font-size: clamp(1rem, 1.8vw, 1.2rem);
color: #666;
max-width: 480px;
line-height: 1.7;
margin-bottom: 2.5rem;
}
.scroll-hint {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
color: #bbb;
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
animation: bob 2.2s ease-in-out infinite;
}
@keyframes bob {
0%,
100% {
transform: translateY(0);
opacity: 0.6;
}
50% {
transform: translateY(8px);
opacity: 1;
}
}
/* ── JOURNEY SECTION ── */
.journey-section {
width: 100%;
padding: 2rem 0 3rem;
position: relative;
}
.section-eyebrow {
text-align: center;
font-size: clamp(1.5rem, -0.375rem + 6vw, 3rem);
font-weight: 700;
color: #0a0a0a;
}
.section-heading {
text-align: center;
font-size: clamp(0.875rem, 0.4063rem + 1.5vw, 1.25rem);
font-weight: 275;
color: #0a0a0a;
margin-bottom: 48px;
}
/* ── JOURNEY WRAP: TRUE FULL WIDTH ── */
.journey-wrap {
position: relative;
width: 100%;
padding: 0;
}
.svg-canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
pointer-events: none;
overflow: visible;
z-index: 0;
}
/* ── STEPS ── */
.step {
display: flex;
align-items: flex-start;
position: relative;
z-index: 2;
margin-bottom: 120px;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
padding-left: 6vw;
padding-right: 50%;
}
.step:last-child {
margin-bottom: 0;
}
.step.right {
flex-direction: row-reverse;
padding-left: 50%;
padding-right: 6vw;
text-align: right;
}
.step.visible {
opacity: 1;
transform: translateY(1);
}
/* ── NUMBER BUBBLE — matches image: large circle with gradient ring ── */
.step-bubble-wrap {
flex-shrink: 0;
margin-right: 24px;
position: relative;
width: 72px;
height: 72px;
}
.step.right .step-bubble-wrap {
margin-right: 0;
margin-left: 24px;
}
/* Outer gradient ring via SVG */
.bubble-ring {
position: absolute;
inset: 0;
width: 72px;
height: 72px;
transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
opacity 0.45s ease;
}
/* Inner white circle */
.step-bubble {
position: absolute;
inset: 9px;
border-radius: 50%;
background: #f0f4ff;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-weight: 800;
color: #010616;
transition: background 0.45s ease, color 0.45s ease,
transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.45s ease;
}
.step.active .step-bubble-wrap {
transform: scale(1.1);
}
.step.active .step-bubble {
background: #fff;
box-shadow: 0 4px 24px rgba(21, 71, 232, 0.18);
color: #010616;
}
/* ── CARD BODY ── */
.step-body {
font-family: "Josefin Sans", sans-serif;
flex: 1;
background: #f8f9fd;
border-radius: 32px;
padding: 28px 28px 24px;
text-align: start;
}
.step.active .step-body {
border-color: rgba(21, 71, 232, 0.18);
/*box-shadow: 0 6px 32px rgba(21, 71, 232, 0.1);*/
}
.step-pill {
display: inline-block;
font-family: "Poppins", sans-serif;
font-size: clamp(0.875rem, 0.5625rem + 1vw, 1.125rem);
font-weight: 400;
color: #0e1127;
}
.step-title {
font-size: clamp(1rem, -0.25rem + 4vw, 2rem);
font-weight: 600;
color: #0e1127;
display: flex;
margin: 0;
/* gap: 8px; */
}
.step-desc {
font-size: clamp(0.875rem, 0.5625rem + 1vw, 1.125rem);
font-family: "Poppins", sans-serif;
font-weight: 275;
color: #5a5a5a;
max-width: 480px;
margin: 0;
}
/* ══════════════════════════════════════
MOBILE: centered vertical line, bubble + card stacked
══════════════════════════════════════ */
@media (max-width: 768px) {
.journey-section {
padding: 3rem 0 5rem;
}
.section-heading {
margin-bottom: 2.5rem;
padding: 0 1.2rem;
}
/* Steps: column layout, bubble on top centered, card below */
.step,
.step.right {
flex-direction: column;
align-items: center;
padding-left: 20px;
padding-right: 20px;
text-align: left;
margin-bottom: 48px;
}
/* Bubble centered */
.step-bubble-wrap,
.step.right .step-bubble-wrap {
margin-right: 0;
margin-left: 0;
margin-bottom: 16px;
width: 60px;
height: 60px;
flex-shrink: 0;
position: relative;
z-index: 3;
}
.bubble-ring {
width: 60px;
height: 60px;
}
.step-bubble {
/*font-size: 18px;*/
}
/* Card full width below bubble */
.step-body {
width: 100%;
border-radius: 16px;
padding: 20px 18px;
}
/* Titles left-aligned */
.step-title,
.step.right .step-title {
justify-content: flex-start;
/*font-size: 1.1rem;*/
}
.step-desc,
.step.right .step-desc {
/*font-size: 13.5px;*/
max-width: 100%;
margin-left: 0;
}
/* Keep SVG visible for scroll-driven line draw */
.svg-canvas {
display: block;
}
/* Center the wrap so bubbles land at page center */
.journey-wrap {
padding-left: 0;
display: flex;
flex-direction: column;
align-items: center;
}
}
const nodeIds = ["n1", "n2", "n3", "n4"];
const stepIds = ["s1", "s2", "s3", "s4"];
const thresholds = [0.05, 0.35, 0.62, 0.86];
let totalLen = 0;
function center(id) {
const jw = document.getElementById("jw");
const el = document.getElementById(id);
if (!el || !jw) return null;
const jr = jw.getBoundingClientRect();
const er = el.getBoundingClientRect();
return {
x: er.left - jr.left + er.width / 2,
y: er.top - jr.top + er.height / 2,
};
}
function buildD(pts) {
if (!pts || pts.length < 2) return "";
let d = `M ${pts[0].x} ${pts[0].y}`;
for (let i = 0; i < pts.length - 1; i++) {
const a = pts[i],
b = pts[i + 1];
let cx1 = a.x + (b.x - a.x) * 0.0;
let cy1 = a.y + (b.y - a.y) * 0.95;
let cx2 = b.x - (b.x - a.x) * 0.0;
let cy2 = b.y - (b.y - a.y) * 0.95;
if (i === 0 && a.x !== b.x) {
cx1 = a.x + (b.x - a.x) * 0.12;
cy1 = a.y;
}
d += ` C ${cx1} ${cy1}, ${cx2} ${cy2}, ${b.x} ${b.y}`;
}
return d;
}
function setup() {
const jw = document.getElementById("jw");
const svg = document.getElementById("svgcanvas");
if (!jw || !svg) return;
const h = jw.offsetHeight + 10;
const w = jw.offsetWidth;
svg.setAttribute("viewBox", `0 0 ${w} ${h}`);
svg.style.height = h + "px";
const isMobile = w center(id)).filter(Boolean);
if (isMobile) {
// Straight vertical line: all points share the same X (page center)
const cx = w / 2;
pts = pts.map((p) => ({ x: cx, y: p.y }));
// Extend tail straight down
if (pts.length > 0) {
const last = pts[pts.length - 1];
pts.push({ x: cx, y: last.y + 60 });
}
} else {
// Desktop S-curve: extend tail toward center
if (pts.length > 0) {
const last = pts[pts.length - 1];
pts.push({ x: w * 0.5, y: last.y + h * 0.18 });
}
}
const d = buildD(pts);
["track", "shadow", "line"].forEach((id) => {
const el = document.getElementById(id);
if (el) el.setAttribute("d", d);
});
const lineEl = document.getElementById("line");
if (lineEl) {
totalLen = lineEl.getTotalLength ? lineEl.getTotalLength() : 4000;
lineEl.style.strokeDasharray = String(totalLen);
lineEl.style.strokeDashoffset = String(totalLen);
}
const shadowEl = document.getElementById("shadow");
if (shadowEl) {
const sl = shadowEl.getTotalLength ? shadowEl.getTotalLength() : 4000;
shadowEl.style.strokeDasharray = String(sl);
shadowEl.style.strokeDashoffset = String(sl);
}
tick();
}
function tick() {
const jw = document.getElementById("jw");
const lineEl = document.getElementById("line");
const shadowEl = document.getElementById("shadow");
if (!jw || !lineEl) return;
const rect = jw.getBoundingClientRect();
const winH = window.innerHeight;
const scrolled = winH * 0.75 - rect.top;
const progress = Math.min(
1,
Math.max(0, scrolled / (rect.height + winH * 0.25))
);
const drawn = totalLen * progress;
lineEl.style.strokeDashoffset = String(totalLen - drawn);
if (shadowEl) {
const sl = parseFloat(shadowEl.style.strokeDasharray) || totalLen;
shadowEl.style.strokeDashoffset = String(sl - sl * progress);
}
stepIds.forEach((sid, i) => {
const step = document.getElementById(sid);
if (!step) return;
if (progress >= thresholds[i]) step.classList.add("visible", "active");
else step.classList.remove("visible", "active");
});
}
window.addEventListener("scroll", tick, { passive: true });
window.addEventListener("resize", setup);
window.addEventListener("load", () => setTimeout(setup, 60));