<div class="tline-stage">
<div class="tline-track">
<div class="tline-events">
<div class="tline-event">
<div class="tline-label">Seed Round</div>
<div class="tline-dot"></div>
<div class="tline-year">2018</div>
<div class="tline-card">
<div class="tline-card-top"><div class="tline-card-year">Q3 · 2018</div><div class="tline-card-title">Seed Funding Closed</div><span class="tline-badge tline-badge-mile">Milestone</span></div>
<div class="tline-body">$2.4M raised from 12 angel investors. The round was led by two former founders from the enterprise SaaS sector, providing both capital and key industry connections.</div>
<div class="tline-impact"><span class="tline-impact-label">Runway</span><span class="tline-impact-val">18 months secured</span></div>
</div>
</div>
<div class="tline-event">
<div class="tline-label">Public Beta</div>
<div class="tline-dot"></div>
<div class="tline-year">2019</div>
<div class="tline-card">
<div class="tline-card-top"><div class="tline-card-year">Q1 · 2019</div><div class="tline-card-title">Public Beta Launch</div><span class="tline-badge tline-badge-prod">Product</span></div>
<div class="tline-body">First 1,000 paying customers acquired within 90 days. Net Promoter Score of 72 in initial surveys. Product-market fit validated across legal, healthcare, fintech.</div>
<div class="tline-impact"><span class="tline-impact-label">ARR at launch</span><span class="tline-impact-val">$480K</span></div>
</div>
</div>
<div class="tline-event">
<div class="tline-label">Series A</div>
<div class="tline-dot"></div>
<div class="tline-year">2020</div>
<div class="tline-card">
<div class="tline-card-top"><div class="tline-card-year">Q2 · 2020</div><div class="tline-card-title">Series A — $12M</div><span class="tline-badge tline-badge-mile">Milestone</span></div>
<div class="tline-body">$12M Series A led by Sequoia Capital. Round closed despite pandemic uncertainty, reflecting strong retention. Funds used to double engineering headcount.</div>
<div class="tline-impact"><span class="tline-impact-label">Post-money</span><span class="tline-impact-val">$68M</span></div>
</div>
</div>
<div class="tline-event">
<div class="tline-label">EU Expansion</div>
<div class="tline-dot"></div>
<div class="tline-year">2021</div>
<div class="tline-card">
<div class="tline-card-top"><div class="tline-card-year">Q3 · 2021</div><div class="tline-card-title">100K Users · EU Launch</div><span class="tline-badge tline-badge-prod">Growth</span></div>
<div class="tline-body">Crossed 100,000 active users and launched GDPR-compliant EU data centres in Frankfurt and Dublin. Opened London office with 24 hires. MRR surpassed $1M.</div>
<div class="tline-impact"><span class="tline-impact-label">EU share</span><span class="tline-impact-val">31% of new ARR</span></div>
</div>
</div>
<div class="tline-event">
<div class="tline-label">Series B</div>
<div class="tline-dot"></div>
<div class="tline-year">2022</div>
<div class="tline-card">
<div class="tline-card-top"><div class="tline-card-year">Q1 · 2022</div><div class="tline-card-title">Series B — $45M · Profitable</div><span class="tline-badge tline-badge-mile">Milestone</span></div>
<div class="tline-body">$45M Series B led by Andreessen Horowitz. Achieved first profitable quarter ahead of schedule. Capital allocated to enterprise sales infrastructure.</div>
<div class="tline-impact"><span class="tline-impact-label">Valuation</span><span class="tline-impact-val">$320M post-money</span></div>
</div>
</div>
<div class="tline-event">
<div class="tline-label">Acquisition</div>
<div class="tline-dot"></div>
<div class="tline-year">2023</div>
<div class="tline-card">
<div class="tline-card-top"><div class="tline-card-year">Q2 · 2023</div><div class="tline-card-title">Acquired Synapse Labs</div><span class="tline-badge tline-badge-acq">M&A</span></div>
<div class="tline-body">Acquired Synapse Labs, a 22-person AI workflow automation startup, for $280M. The deal added Synapse's LLM orchestration layer, accelerating the roadmap.</div>
<div class="tline-impact"><span class="tline-impact-label">ARR added</span><span class="tline-impact-val">$8.4M</span></div>
</div>
</div>
<div class="tline-event">
<div class="tline-label">IPO Filed</div>
<div class="tline-dot"></div>
<div class="tline-year">2024</div>
<div class="tline-card">
<div class="tline-card-top"><div class="tline-card-year">Q3 · 2024</div><div class="tline-card-title">S-1 Filed · NASDAQ</div><span class="tline-badge tline-badge-ipo">Public Markets</span></div>
<div class="tline-body">Filed S-1 registration with the SEC. IPO priced at $18/share, valuing the company at $1.2B. Shares began trading on NASDAQ under the ticker SNYP, closing up 38% on day one.</div>
<div class="tline-impact"><span class="tline-impact-label">Market cap</span><span class="tline-impact-val">$1.65B (day 1)</span></div>
</div>
</div>
</div>
</div>
</div> .tline-stage {
background: #0e0c14;
/* Top + bottom room — event cards alternate above and below the
track. Odd events flip column-reverse so the label lands above
the dot and the card pops up. Cards are ~220px tall. */
padding: 240px 24px;
font-family: 'Inter', system-ui, sans-serif;
position: relative;
overflow: hidden;
}
.tline-stage::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(80, 40, 120, 0.08) 0%, transparent 70%);
pointer-events: none;
}
.tline-track {
max-width: 760px;
margin: 0 auto;
position: relative;
padding: 40px 0;
}
.tline-track::before {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(to right, transparent, rgba(120, 80, 200, 0.3) 10%, rgba(120, 80, 200, 0.3) 90%, transparent);
transform: translateY(-50%);
}
.tline-events {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
}
.tline-event {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
cursor: help;
}
.tline-event:nth-child(odd) {
flex-direction: column-reverse;
}
.tline-label {
font-size: 9px;
color: rgba(180, 140, 240, 0.5);
text-align: center;
margin: 11px 0;
letter-spacing: 0.08em;
font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.tline-year {
font-size: 11px;
font-weight: 700;
color: rgba(180, 140, 240, 0.7);
text-align: center;
margin: 11px 0;
font-family: 'JetBrains Mono', ui-monospace, monospace;
letter-spacing: 0.04em;
}
.tline-dot {
width: 11px;
height: 11px;
border-radius: 50%;
background: rgba(120, 80, 200, 0.6);
border: 2px solid rgba(120, 80, 200, 0.3);
transition: background .15s, box-shadow .15s, transform .15s;
position: relative;
z-index: 2;
flex-shrink: 0;
}
.tline-event:hover .tline-dot {
background: rgba(160, 110, 240, 0.9);
box-shadow: 0 0 14px 4px rgba(120, 80, 200, 0.25);
transform: scale(1.3);
}
.tline-card {
position: absolute;
left: 50%;
transform: translateX(-50%) translateY(-6px);
z-index: 200;
width: 250px;
background: rgba(14, 12, 22, 0.97);
border: 1px solid rgba(120, 80, 200, 0.2);
border-radius: 10px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity .2s,
transform .2s cubic-bezier(0.22, 1, 0.36, 1),
visibility 0s linear .2s;
box-shadow:
0 16px 44px rgba(0, 0, 0, 0.9),
0 0 0 1px rgba(120, 80, 200, 0.08);
overflow: hidden;
text-align: left;
}
.tline-event:nth-child(odd) .tline-card {
bottom: calc(100% + 10px);
top: auto;
}
.tline-event:nth-child(even) .tline-card {
top: calc(100% + 10px);
bottom: auto;
}
.tline-event:hover .tline-card {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
transition-delay: 0s;
}
.tline-card-top {
padding: 12px 13px 10px;
border-bottom: 1px solid rgba(120, 80, 200, 0.1);
}
.tline-card-year {
font-size: 8.5px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
color: rgba(160, 110, 240, 0.5);
letter-spacing: 0.1em;
margin-bottom: 4px;
}
.tline-card-title {
font-size: 13px;
color: rgba(255, 255, 255, 0.88);
line-height: 1.3;
font-family: Georgia, serif;
}
.tline-badge {
display: inline-block;
font-size: 7.5px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
padding: 2px 7px;
border-radius: 3px;
margin-top: 7px;
letter-spacing: 0.07em;
text-transform: uppercase;
}
.tline-badge-mile { background: rgba(80, 160, 80, 0.15); color: rgba(120, 200, 120, 0.8); border: 1px solid rgba(80, 160, 80, 0.2); }
.tline-badge-prod { background: rgba(80, 120, 200, 0.15); color: rgba(120, 160, 240, 0.8); border: 1px solid rgba(80, 120, 200, 0.2); }
.tline-badge-acq { background: rgba(200, 120, 40, 0.15); color: rgba(240, 160, 80, 0.8); border: 1px solid rgba(200, 120, 40, 0.2); }
.tline-badge-ipo { background: rgba(160, 80, 200, 0.15); color: rgba(200, 120, 240, 0.8); border: 1px solid rgba(160, 80, 200, 0.2); }
.tline-body {
padding: 9px 13px;
font-size: 11px;
color: rgba(255, 255, 255, 0.5);
line-height: 1.55;
border-bottom: 1px solid rgba(120, 80, 200, 0.06);
font-style: italic;
font-family: Georgia, serif;
}
.tline-impact {
padding: 9px 13px;
display: flex;
justify-content: space-between;
font-size: 9.5px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.tline-impact-label {
color: rgba(120, 80, 200, 0.5);
}
.tline-impact-val {
color: rgba(200, 160, 255, 0.7);
}