kalei/kalei-cost-projections.html

1708 lines
79 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kalei — Cost Projections & Financial Analysis</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.umd.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=DM+Serif+Display:wght@400&display=swap" rel="stylesheet">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
--amethyst: #8B5CF6;
--amethyst-light: #A78BFA;
--dark-amethyst: #5B21B6;
--sapphire: #3B82F6;
--emerald: #10B981;
--emerald-light: #34D399;
--amber: #F59E0B;
--rose: #EC4899;
--dark-bg: #0A0814;
--dark-card: #181530;
--light: #F8F7FF;
--light-alt: #FAFAFF;
--text-dark: #1E1B2E;
--text-secondary: #64607A;
--muted: #8E8AA0;
--border-light: rgba(139, 92, 246, 0.12);
--border-dark: rgba(139, 92, 246, 0.25);
--shadow-sm: 0 1px 3px rgba(30, 27, 46, 0.04), 0 1px 2px rgba(30, 27, 46, 0.06);
--shadow-md: 0 4px 16px rgba(30, 27, 46, 0.06), 0 1px 3px rgba(30, 27, 46, 0.04);
--shadow-lg: 0 10px 40px rgba(30, 27, 46, 0.08), 0 2px 8px rgba(30, 27, 46, 0.04);
--shadow-dark: 0 4px 24px rgba(0, 0, 0, 0.3), 0 1px 4px rgba(0, 0, 0, 0.2);
}
body {
font-family: 'Inter', sans-serif;
background: #fff;
color: var(--text-dark);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.page {
page-break-after: always;
padding: 60px 80px;
min-height: 100vh;
display: flex;
flex-direction: column;
}
.page:last-child { page-break-after: avoid; }
/* COVER PAGE */
.cover-page {
background: var(--dark-bg);
color: #fff;
padding: 80px 60px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
gap: 40px;
}
.logo-inline {
width: 200px;
height: 200px;
margin-bottom: 30px;
filter: drop-shadow(0 0 40px rgba(139, 92, 246, 0.15));
}
.cover-title {
font-family: 'DM Serif Display', serif;
font-size: 72px;
font-weight: 400;
margin: 20px 0;
letter-spacing: 6px;
background: linear-gradient(135deg, #fff 0%, #C4B5FD 50%, #A78BFA 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.cover-divider {
width: 80px;
height: 2px;
background: linear-gradient(90deg, transparent, var(--amethyst), transparent);
margin: 0 auto;
}
.cover-subtitle {
font-size: 20px;
color: var(--muted);
margin-bottom: 40px;
font-weight: 300;
letter-spacing: 1px;
}
.cover-meta {
display: flex;
gap: 20px;
justify-content: center;
align-items: center;
margin-top: 60px;
}
.cover-meta-dot {
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--amethyst);
opacity: 0.5;
}
.cover-date {
font-size: 13px;
color: var(--muted);
letter-spacing: 0.5px;
}
.confidential-badge {
display: inline-block;
border: 1px solid rgba(139, 92, 246, 0.4);
color: var(--amethyst-light);
padding: 8px 20px;
border-radius: 24px;
font-size: 11px;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
}
.page-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 50px;
padding-bottom: 20px;
border-bottom: 1px solid var(--border-light);
}
.logo-small {
width: 40px;
height: 40px;
}
.header-title h2 {
font-family: 'DM Serif Display', serif;
font-size: 32px;
color: var(--text-dark);
margin: 0;
}
.header-right {
text-align: right;
font-size: 12px;
color: var(--muted);
}
h2 {
font-family: 'DM Serif Display', serif;
font-size: 40px;
color: var(--text-dark);
margin: 40px 0 30px 0;
font-weight: 400;
letter-spacing: -0.5px;
}
h3 {
font-size: 13px;
font-weight: 700;
color: var(--amethyst);
margin: 30px 0 15px 0;
text-transform: uppercase;
letter-spacing: 1.5px;
}
.dark-section {
background: var(--dark-bg);
background-image:
radial-gradient(ellipse 70% 50% at 80% 20%, rgba(139, 92, 246, 0.06) 0%, transparent 70%),
radial-gradient(ellipse 50% 40% at 10% 80%, rgba(59, 130, 246, 0.04) 0%, transparent 60%);
color: #E2DFEF;
padding: 72px 80px;
}
.dark-section h2 {
color: #fff;
}
.dark-section h3 {
color: var(--amethyst-light);
}
.dark-section p {
color: #B8B3CC;
}
.dark-section li {
color: #B8B3CC;
}
.dark-section .page-header {
border-bottom-color: var(--border-dark);
}
.metric-card {
background: var(--dark-card);
border-left: 4px solid var(--amethyst);
padding: 25px;
border-radius: 10px;
margin: 20px 0;
box-shadow: var(--shadow-dark);
display: flex;
justify-content: space-between;
align-items: center;
}
.metric-card.emerald { border-left-color: var(--emerald); }
.metric-card.amber { border-left-color: var(--amber); }
.metric-value {
font-size: 48px;
font-weight: 700;
font-family: 'DM Serif Display', serif;
}
.metric-label {
font-size: 13px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.5px;
}
table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
margin: 30px 0;
background: #fff;
border-radius: 10px;
overflow: hidden;
box-shadow: var(--shadow-md);
border: 1px solid var(--border-light);
}
th {
background: var(--light);
padding: 16px 18px;
text-align: left;
font-weight: 600;
font-size: 12px;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.8px;
border-bottom: 2px solid var(--amethyst);
}
td {
padding: 14px 18px;
border-bottom: 1px solid rgba(139, 92, 246, 0.06);
font-size: 13px;
color: var(--text-dark);
}
tbody tr:nth-child(even) {
background: rgba(248, 247, 255, 0.5);
}
tr:hover { background: rgba(139, 92, 246, 0.03); }
.chart-container {
position: relative;
height: 380px;
margin: 30px 0;
background: #fff;
padding: 24px;
border-radius: 12px;
box-shadow: var(--shadow-md);
border: 1px solid var(--border-light);
}
.charts-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
margin: 30px 0;
}
.chart-container-half {
position: relative;
height: 350px;
background: #fff;
padding: 24px;
border-radius: 12px;
box-shadow: var(--shadow-md);
border: 1px solid var(--border-light);
}
.highlight {
background: var(--light);
padding: 24px 28px;
border-left: 4px solid var(--amethyst);
border-radius: 8px;
margin: 25px 0;
font-size: 14px;
line-height: 1.8;
box-shadow: var(--shadow-sm);
}
.highlight strong { color: var(--amethyst); font-weight: 600; }
.stat-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 25px;
margin: 30px 0;
}
.stat-card {
background: #fff;
padding: 30px;
border-radius: 12px;
box-shadow: var(--shadow-md);
border: 1px solid var(--border-light);
border-top: 3px solid var(--amethyst);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.stat-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.stat-card.sapphire { border-top-color: var(--sapphire); }
.stat-card.emerald { border-top-color: var(--emerald); }
.stat-number {
font-size: 42px;
font-weight: 700;
color: var(--amethyst);
font-family: 'DM Serif Display', serif;
margin-bottom: 8px;
}
.stat-label {
font-size: 12px;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.8px;
font-weight: 600;
}
ul { margin-left: 0; line-height: 2; list-style: none; padding-left: 18px; }
li { margin-bottom: 8px; position: relative; }
li::before {
content: '';
position: absolute;
left: -18px;
top: 10px;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--amethyst);
opacity: 0.4;
}
footer {
margin-top: auto;
padding-top: 20px;
border-top: 1px solid var(--border-light);
color: var(--muted);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.dark-section footer {
border-top-color: var(--border-dark);
}
.cost-highlight { color: var(--emerald); font-weight: 700; }
p {
margin-bottom: 15px;
font-size: 15px;
}
@media print {
body { padding: 0; }
.page { padding: 40px 60px; }
.chart-container, .chart-container-half { page-break-inside: avoid; }
table { page-break-inside: avoid; }
}
@media (max-width: 1200px) {
.charts-row, .stat-row { grid-template-columns: 1fr; }
.page { padding: 40px 50px; }
.dark-section { padding: 50px 50px; }
.cover-title { font-size: 48px; letter-spacing: 3px; }
}
/* Dark section component overrides */
.dark-section .stat-card {
background: var(--dark-card);
border: 1px solid rgba(139, 92, 246, 0.15);
border-top: 3px solid var(--amethyst);
box-shadow: var(--shadow-dark);
position: relative;
overflow: hidden;
}
.dark-section .stat-card::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 60%;
background: linear-gradient(180deg, rgba(139, 92, 246, 0.04) 0%, transparent 100%);
pointer-events: none;
}
.dark-section .stat-card.sapphire { border-top-color: var(--sapphire); }
.dark-section .stat-card.emerald { border-top-color: var(--emerald); }
.dark-section .stat-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.dark-section .stat-label { color: #8E8AA0; }
.dark-section table {
background: var(--dark-card);
border: 1px solid rgba(139, 92, 246, 0.15);
box-shadow: var(--shadow-dark);
}
.dark-section th {
background: rgba(139, 92, 246, 0.08);
color: var(--amethyst-light);
border-bottom-color: rgba(139, 92, 246, 0.3);
}
.dark-section td {
color: #B8B3CC;
border-bottom-color: rgba(139, 92, 246, 0.08);
}
.dark-section tbody tr:nth-child(even) {
background: rgba(139, 92, 246, 0.03);
}
.dark-section tbody tr:hover {
background: rgba(139, 92, 246, 0.06);
}
.dark-section .highlight {
background: var(--dark-card);
border-left-color: var(--amethyst-light);
color: #B8B3CC;
}
.dark-section .highlight strong { color: var(--amethyst-light); }
.dark-section .chart-container,
.dark-section .chart-container-half {
background: var(--dark-card);
border-color: rgba(139, 92, 246, 0.15);
box-shadow: var(--shadow-dark);
}
.dark-section li::before {
background: var(--amethyst-light);
opacity: 0.5;
}
</style>
</head>
<body>
<!-- COVER PAGE -->
<div class="page cover-page">
<svg class="logo-inline" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="g0_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#A78BFA"><animate attributeName="stop-color" values="#A78BFA;#C4B5FD;#A78BFA" dur="5s" repeatCount="indefinite"/></stop>
<stop offset="100%" stop-color="#8B5CF6"><animate attributeName="stop-color" values="#8B5CF6;#A78BFA;#8B5CF6" dur="5s" repeatCount="indefinite"/></stop>
</linearGradient>
<linearGradient id="g0_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#8B5CF6"/><stop offset="100%" stop-color="#5B21B6"/>
</linearGradient>
<linearGradient id="g1_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#93C5FD"><animate attributeName="stop-color" values="#93C5FD;#BFDBFE;#93C5FD" dur="5.5s" repeatCount="indefinite"/></stop>
<stop offset="100%" stop-color="#3B82F6"/>
</linearGradient>
<linearGradient id="g1_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#3B82F6"/><stop offset="100%" stop-color="#1D4ED8"/>
</linearGradient>
<linearGradient id="g2_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#6EE7B7"><animate attributeName="stop-color" values="#6EE7B7;#A7F3D0;#6EE7B7" dur="6s" repeatCount="indefinite"/></stop>
<stop offset="100%" stop-color="#10B981"/>
</linearGradient>
<linearGradient id="g2_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#10B981"/><stop offset="100%" stop-color="#047857"/>
</linearGradient>
<linearGradient id="g3_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#FCD34D"><animate attributeName="stop-color" values="#FCD34D;#FDE68A;#FCD34D" dur="4.8s" repeatCount="indefinite"/></stop>
<stop offset="100%" stop-color="#F59E0B"/>
</linearGradient>
<linearGradient id="g3_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#F59E0B"/><stop offset="100%" stop-color="#B45309"/>
</linearGradient>
<linearGradient id="g4_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#F9A8D4"><animate attributeName="stop-color" values="#F9A8D4;#FBCFE8;#F9A8D4" dur="5.2s" repeatCount="indefinite"/></stop>
<stop offset="100%" stop-color="#EC4899"/>
</linearGradient>
<linearGradient id="g4_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#EC4899"/><stop offset="100%" stop-color="#BE185D"/>
</linearGradient>
<linearGradient id="g5_F1" x1="20" y1="17" x2="-30" y2="160" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#A5B4FC"><animate attributeName="stop-color" values="#A5B4FC;#C7D2FE;#A5B4FC" dur="5.8s" repeatCount="indefinite"/></stop>
<stop offset="100%" stop-color="#6366F1"/>
</linearGradient>
<linearGradient id="g5_F2" x1="40" y1="0" x2="140" y2="60" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#6366F1"/><stop offset="100%" stop-color="#4338CA"/>
</linearGradient>
<radialGradient id="prismatic" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#FFFFFF"><animate attributeName="stop-color" values="#FFFFFF;#E0D5FF;#FFFFFF" dur="5s" repeatCount="indefinite"/></stop>
<stop offset="40%" stop-color="#8B5CF6"><animate attributeName="stop-color" values="#8B5CF6;#3B82F6;#10B981;#F59E0B;#EC4899;#8B5CF6" dur="8s" repeatCount="indefinite"/></stop>
<stop offset="100%" stop-color="#8B5CF6" stop-opacity="0"><animate attributeName="stop-color" values="#8B5CF6;#3B82F6;#10B981;#F59E0B;#EC4899;#8B5CF6" dur="8s" repeatCount="indefinite"/></stop>
</radialGradient>
<radialGradient id="outerAura" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#8B5CF6" stop-opacity="0.08"><animate attributeName="stop-color" values="#8B5CF6;#3B82F6;#10B981;#F59E0B;#EC4899;#8B5CF6" dur="10s" repeatCount="indefinite"/></stop>
<stop offset="70%" stop-color="#8B5CF6" stop-opacity="0.03"/>
<stop offset="100%" stop-color="#8B5CF6" stop-opacity="0"/>
</radialGradient>
<radialGradient id="coreHalo" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#FFFFFF" stop-opacity="0"/>
<stop offset="60%" stop-color="#FFFFFF" stop-opacity="0"/>
<stop offset="80%" stop-color="#C4B5FD" stop-opacity="0.08"><animate attributeName="stop-color" values="#C4B5FD;#93C5FD;#6EE7B7;#FDE68A;#FBCFE8;#C4B5FD" dur="8s" repeatCount="indefinite"/><animate attributeName="stop-opacity" values="0.05;0.12;0.05" dur="4s" repeatCount="indefinite"/></stop>
<stop offset="100%" stop-color="#8B5CF6" stop-opacity="0"/>
</radialGradient>
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="6" result="blur"/>
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
</filter>
<filter id="coreGlow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="12" result="blur"/>
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
</filter>
</defs>
<circle cx="200" cy="200" r="190" fill="url(#outerAura)"><animate attributeName="r" values="175;195;175" dur="6s" repeatCount="indefinite"/></circle>
<g transform="translate(200, 200)">
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="90s" repeatCount="indefinite" additive="sum"/>
<g transform="rotate(0)" style="mix-blend-mode: screen;"><path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g0_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round"><animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="4s" repeatCount="indefinite"/></path><path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g0_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round"><animate attributeName="fill-opacity" values="0.90;1;0.90" dur="4s" repeatCount="indefinite"/></path><line x1="40" y1="0" x2="-30" y2="160" stroke="#C4B5FD" stroke-width="1.2" opacity="0"><animate attributeName="opacity" values="0;0.5;0" dur="5s" begin="0s" repeatCount="indefinite"/></line></g>
<g transform="rotate(60)" style="mix-blend-mode: screen;"><path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g1_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round"><animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="4.5s" repeatCount="indefinite"/></path><path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g1_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round"/><line x1="40" y1="0" x2="-30" y2="160" stroke="#93C5FD" stroke-width="1.2" opacity="0"><animate attributeName="opacity" values="0;0.5;0" dur="5s" begin="0.83s" repeatCount="indefinite"/></line></g>
<g transform="rotate(120)" style="mix-blend-mode: screen;"><path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g2_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round"><animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="5s" repeatCount="indefinite"/></path><path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g2_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round"/><line x1="40" y1="0" x2="-30" y2="160" stroke="#6EE7B7" stroke-width="1.2" opacity="0"><animate attributeName="opacity" values="0;0.5;0" dur="5s" begin="1.66s" repeatCount="indefinite"/></line></g>
<g transform="rotate(180)" style="mix-blend-mode: screen;"><path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g3_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round"><animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="4.2s" repeatCount="indefinite"/></path><path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g3_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round"/><line x1="40" y1="0" x2="-30" y2="160" stroke="#FDE68A" stroke-width="1.2" opacity="0"><animate attributeName="opacity" values="0;0.5;0" dur="5s" begin="2.5s" repeatCount="indefinite"/></line></g>
<g transform="rotate(240)" style="mix-blend-mode: screen;"><path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g4_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round"><animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="4.8s" repeatCount="indefinite"/></path><path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g4_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round"/><line x1="40" y1="0" x2="-30" y2="160" stroke="#FBCFE8" stroke-width="1.2" opacity="0"><animate attributeName="opacity" values="0;0.5;0" dur="5s" begin="3.33s" repeatCount="indefinite"/></line></g>
<g transform="rotate(300)" style="mix-blend-mode: screen;"><path d="M 40,0 L -30,160 L 140,60 Z" fill="url(#g5_F2)" fill-opacity="0.80" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" stroke-linejoin="round"><animate attributeName="fill-opacity" values="0.75;0.90;0.75" dur="4.3s" repeatCount="indefinite"/></path><path d="M 40,0 L 20,34.641 L -30,160 Z" fill="url(#g5_F1)" fill-opacity="0.95" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.6" stroke-linejoin="round"/><line x1="40" y1="0" x2="-30" y2="160" stroke="#A5B4FC" stroke-width="1.2" opacity="0"><animate attributeName="opacity" values="0;0.5;0" dur="5s" begin="4.16s" repeatCount="indefinite"/></line></g>
<g filter="url(#coreGlow)"><circle cx="-30" cy="160" r="4" fill="#A78BFA" opacity="0"><animate attributeName="opacity" values="0;0.35;0" dur="4s" repeatCount="indefinite"/></circle></g>
<g filter="url(#coreGlow)"><circle r="45" fill="url(#prismatic)" opacity="0.35"><animate attributeName="opacity" values="0.25;0.45;0.25" dur="5s" repeatCount="indefinite"/></circle><circle r="55" fill="url(#coreHalo)"><animate attributeName="r" values="50;58;50" dur="4s" repeatCount="indefinite"/><animate attributeName="opacity" values="0.6;1;0.6" dur="4s" repeatCount="indefinite"/></circle><circle r="12" fill="#ffffff" filter="url(#coreGlow)" opacity="0.95"><animate attributeName="r" values="10;14;10" dur="3s" repeatCount="indefinite"/><animate attributeName="opacity" values="0.85;1;0.85" dur="3s" repeatCount="indefinite"/></circle><circle cx="-4" cy="-4" r="6" fill="#ffffff" opacity="0.2"><animate attributeName="opacity" values="0.2;0.35;0.2" dur="4s" repeatCount="indefinite"/></circle><circle cx="3" cy="-3" r="1.5" fill="#ffffff" opacity="0.9" filter="url(#glow)"><animate attributeName="opacity" values="0.6;1;0.6" dur="1.5s" repeatCount="indefinite"/></circle></g>
</g>
</svg>
<h1 class="cover-title">KALEI</h1>
<div class="cover-divider"></div>
<p class="cover-subtitle">Cost Projections & Financial Analysis</p>
<div class="cover-meta">
<div class="cover-date">February 2026</div>
<div class="cover-meta-dot"></div>
<div class="confidential-badge">Confidential</div>
</div>
</div>
<!-- EXECUTIVE SUMMARY -->
<div class="page dark-section">
<div class="page-header">
<h2>Executive Summary</h2>
<div class="header-right">
Kalei — Confidential | February 2026
</div>
</div>
<div class="stat-row">
<div class="stat-card">
<div class="stat-number">90%</div>
<div class="stat-label">AI Cost Reduction</div>
</div>
<div class="stat-card sapphire">
<div class="stat-number" style="color: var(--sapphire);">98.5%</div>
<div class="stat-label">Unit Margin (Prism)</div>
</div>
<div class="stat-card emerald">
<div class="stat-number" style="color: var(--emerald);">Month 3</div>
<div class="stat-label">Profitability Path</div>
</div>
</div>
<h3>Key Findings</h3>
<p>By transitioning from Claude Haiku to DeepSeek V3.2 via OpenRouter, Kalei achieves transformative unit economics:</p>
<div class="highlight">
<strong>AI Cost Reduction:</strong> From $0.33 to $0.034 per free user monthly, a <span class="cost-highlight">90% decrease</span>. Prism users drop from $0.72 to $0.076, freeing massive margins for growth.<br><br>
<strong>Margin Expansion:</strong> Prism tier achieves 98.5% gross margin. All-features v1 launch eliminates phase-gating costs and accelerates time-to-revenue.<br><br>
<strong>Path to Profitability:</strong> Conservative organic acquisition (3-5 Free, 1-2 Prism/month) reaches profitability by Month 3, scaling to $3,000+ MRR by Month 18.<br><br>
<strong>Competitive Position:</strong> Total monthly burn (€13-40 infrastructure + AI) positions Kalei at 1% of typical venture-backed startup costs.
</div>
<h3>Strategic Implications</h3>
<ul>
<li>All features ship in v1 (Mirror, Turn, Lens, Spectrum, Rehearsal, Ritual, Evidence Wall, Guide) — no product delays</li>
<li>DeepSeek V3.2 delivers comparable quality to Claude Haiku at 1/10th cost</li>
<li>Claude Haiku fallback (5-10% of requests) for specialized tasks without material cost impact</li>
<li>Scaling milestones (Launch 50 DAU, Traction 200 DAU, Growth 1,000 DAU) decouple from feature releases</li>
<li>Sustainable unit economics enable profitability without external capital</li>
</ul>
<footer>Kalei — Confidential | February 2026</footer>
</div>
<!-- AI STRATEGY & TOKEN ECONOMICS -->
<div class="page">
<div class="page-header">
<h2>AI Strategy & Token Economics</h2>
<div class="header-right">February 2026</div>
</div>
<h3>Primary Model: DeepSeek V3.2</h3>
<div class="highlight">
<strong>Provider:</strong> OpenRouter / DeepInfra<br>
<strong>Input Cost:</strong> $0.26 / 1M tokens<br>
<strong>Output Cost:</strong> $0.38 / 1M tokens<br>
<strong>Rationale:</strong> State-of-the-art reasoning at commodity pricing. Comparable performance to Claude Haiku on reasoning and code. Cache hit optimization reduces effective cost by 15-25%.
</div>
<h3>Fallback Model: Claude Haiku</h3>
<div class="highlight">
<strong>Provider:</strong> Anthropic API<br>
<strong>Input Cost:</strong> $1.00 / 1M tokens<br>
<strong>Output Cost:</strong> $5.00 / 1M tokens<br>
<strong>Usage:</strong> 5-10% of request volume (specialized reasoning, complex multi-step verification)<br>
<strong>Impact:</strong> Less than 1% of total AI cost due to low volume.
</div>
<h3>Per-Feature Token Consumption</h3>
<table>
<tr>
<th>Feature</th>
<th>Input Tokens</th>
<th>Output Tokens</th>
<th>Total</th>
<th>Cost (DeepSeek)</th>
</tr>
<tr>
<td><strong>Mirror</strong> (session reframe)</td>
<td>2,500</td>
<td>800</td>
<td>3,300</td>
<td>$0.0048</td>
</tr>
<tr>
<td><strong>Turn</strong> (single reframe)</td>
<td>1,200</td>
<td>600</td>
<td>1,800</td>
<td>$0.0023</td>
</tr>
<tr>
<td><strong>Lens</strong> (affirmation)</td>
<td>800</td>
<td>200</td>
<td>1,000</td>
<td>$0.00096</td>
</tr>
<tr>
<td><strong>Spectrum</strong> (weekly analysis)</td>
<td>4,000</td>
<td>2,000</td>
<td>6,000</td>
<td>$0.0095</td>
</tr>
<tr>
<td><strong>Rehearsal</strong> (dialogue prep)</td>
<td>2,500</td>
<td>1,500</td>
<td>4,000</td>
<td>$0.0048</td>
</tr>
<tr>
<td><strong>Guide</strong> (coaching)</td>
<td>2,000</td>
<td>1,000</td>
<td>3,000</td>
<td>$0.0035</td>
</tr>
<tr>
<td><strong>Crisis Detection</strong> (per interaction)</td>
<td>500</td>
<td>100</td>
<td>600</td>
<td>$0.00058</td>
</tr>
</table>
<h3>Cost Optimization Strategies</h3>
<ul>
<li><strong>Prompt Caching:</strong> Cache frequently reused context (user profiles, system prompts). Reduces effective cost 15-25%.</li>
<li><strong>Model Routing:</strong> Route 90% to DeepSeek (Turn, Lens, Spectrum), 10% to Haiku (complex reasoning, verification).</li>
<li><strong>Batch Processing:</strong> Weekly analyses and reports processed in batch mode during off-peak hours.</li>
<li><strong>Response Optimization:</strong> A/B test prompt formulations to reduce output token counts without quality loss.</li>
</ul>
<footer>Kalei — Confidential | February 2026</footer>
</div>
<!-- MONTHLY COST WATERFALL -->
<div class="page">
<div class="page-header">
<h2>Monthly Cost Waterfall (Months 1-18)</h2>
<div class="header-right">February 2026</div>
</div>
<p>Complete month-by-month financial projections showing users, revenue, costs, and profitability trajectory:</p>
<table style="font-size: 12px;">
<tr>
<th>Month</th>
<th>Free Users</th>
<th>Prism Users</th>
<th>DAU</th>
<th>MRR</th>
<th>AI Cost</th>
<th>Infra</th>
<th>Total Cost</th>
<th>Profit</th>
<th>Cumulative</th>
</tr>
<tr><td>1</td><td>5</td><td>1</td><td>2</td><td>$5</td><td>$2</td><td>$14</td><td>$16</td><td>-$11</td><td>-$11</td></tr>
<tr><td>2</td><td>10</td><td>2</td><td>4</td><td>$10</td><td>$4</td><td>$14</td><td>$18</td><td>-$8</td><td>-$19</td></tr>
<tr><td>3</td><td>15</td><td>3</td><td>6</td><td>$15</td><td>$6</td><td>$14</td><td>$20</td><td>-$5</td><td>-$24</td></tr>
<tr><td>4</td><td>20</td><td>4</td><td>8</td><td>$20</td><td>$10</td><td>$14</td><td>$24</td><td>-$4</td><td>-$28</td></tr>
<tr><td>5</td><td>22</td><td>4</td><td>9</td><td>$20</td><td>$11</td><td>$14</td><td>$25</td><td>-$5</td><td>-$33</td></tr>
<tr><td>6</td><td>25</td><td>5</td><td>10</td><td>$25</td><td>$16</td><td>$14</td><td>$30</td><td>-$5</td><td>-$38</td></tr>
<tr><td>7</td><td>35</td><td>8</td><td>14</td><td>$40</td><td>$21</td><td>$14</td><td>$35</td><td>+$5</td><td>-$33</td></tr>
<tr><td>8</td><td>42</td><td>10</td><td>17</td><td>$50</td><td>$28</td><td>$14</td><td>$42</td><td>+$8</td><td>-$25</td></tr>
<tr><td>9</td><td>50</td><td>12</td><td>20</td><td>$60</td><td>$40</td><td>$14</td><td>$54</td><td>+$6</td><td>-$19</td></tr>
<tr><td>10</td><td>65</td><td>15</td><td>26</td><td>$75</td><td>$47</td><td>$14</td><td>$61</td><td>+$14</td><td>-$5</td></tr>
<tr><td>11</td><td>75</td><td>18</td><td>31</td><td>$90</td><td>$52</td><td>$14</td><td>$66</td><td>+$24</td><td>+$19</td></tr>
<tr><td>12</td><td>80</td><td>20</td><td>33</td><td>$100</td><td>$53</td><td>$14</td><td>$67</td><td>+$33</td><td>+$52</td></tr>
<tr><td>13</td><td>100</td><td>28</td><td>43</td><td>$140</td><td>$71</td><td>$15</td><td>$86</td><td>+$54</td><td>+$106</td></tr>
<tr><td>14</td><td>125</td><td>36</td><td>54</td><td>$180</td><td>$95</td><td>$15</td><td>$110</td><td>+$70</td><td>+$176</td></tr>
<tr><td>15</td><td>150</td><td>42</td><td>64</td><td>$210</td><td>$118</td><td>$15</td><td>$133</td><td>+$77</td><td>+$253</td></tr>
<tr><td>16</td><td>175</td><td>48</td><td>74</td><td>$240</td><td>$138</td><td>$18</td><td>$156</td><td>+$84</td><td>+$337</td></tr>
<tr><td>17</td><td>190</td><td>55</td><td>82</td><td>$275</td><td>$165</td><td>$18</td><td>$183</td><td>+$92</td><td>+$429</td></tr>
<tr><td>18</td><td>200</td><td>60</td><td>90</td><td>$300</td><td>$200</td><td>$20</td><td>$220</td><td>+$80</td><td>+$509</td></tr>
</table>
<div class="highlight">
<strong>Key Milestones:</strong> Profitability achieved Month 11. Cumulative break-even at Month 10. By Month 18, $80 monthly profit with $509 cumulative return. Scaling driven by organic acquisition (3-4 users/month) and stable 20% Free-to-Prism conversion.
</div>
<footer>Kalei — Confidential | February 2026</footer>
</div>
<!-- TIMELINE VISUALIZATION -->
<div class="page">
<div class="page-header">
<h2>18-Month Financial Timeline Chart</h2>
<div class="header-right">February 2026</div>
</div>
<div class="chart-container">
<canvas id="timelineChart"></canvas>
</div>
<p>The chart above shows MRR growth (purple), AI costs (red), and monthly profit/loss (green) across all 18 months. Profitability inflection occurs Month 11 as user base scales and fixed infrastructure costs are amortized. Revenue growth outpaces cost growth due to:
<ul>
<li>Linear user acquisition (3-5/month) compounds to exponential DAU growth</li>
<li>Stable 20% Free-to-Prism conversion maintains margin expansion</li>
<li>Fixed infrastructure cost (€14-20/month) spread across growing base reduces per-user COGS</li>
<li>AI cost growth lags revenue due to caching, batching, and model routing optimizations</li>
</ul>
<footer>Kalei — Confidential | February 2026</footer>
</div>
<!-- SENSITIVITY ANALYSIS -->
<div class="page">
<div class="page-header">
<h2>Sensitivity Analysis: Conservative vs. Optimistic</h2>
<div class="header-right">February 2026</div>
</div>
<p>What happens if key assumptions shift? Three scenarios model sensitivity to conversion rates, AI costs, and growth velocity:</p>
<table>
<tr>
<th>Scenario</th>
<th>Conversion Rate</th>
<th>Growth Rate</th>
<th>AI Cost Variation</th>
<th>Month 12 MRR</th>
<th>Profit at Month 12</th>
<th>Break-Even Month</th>
</tr>
<tr>
<td><strong>Conservative</strong></td>
<td>5%</td>
<td>2 users/mo</td>
<td>+20% (price hike)</td>
<td>$45</td>
<td>-$15</td><td>Month 14</td>
</tr>
<tr>
<td><strong>Base Case</strong></td>
<td>10%</td>
<td>3-5 users/mo</td>
<td>No change</td>
<td>$100</td>
<td>+$33</td><td>Month 11</td>
</tr>
<tr>
<td><strong>Optimistic</strong></td>
<td>15%</td>
<td>8 users/mo</td>
<td>-10% (discount)</td>
<td>$180</td>
<td>+$95</td><td>Month 8</td>
</tr>
</table>
<div class="charts-row">
<div class="chart-container-half">
<canvas id="scenarioMRRChart"></canvas>
</div>
<div class="chart-container-half">
<canvas id="scenarioProfitChart"></canvas>
</div>
</div>
<h3>Insights</h3>
<p>Conservative case (5% conversion, slower growth) still reaches break-even by Month 14 due to ultra-low base costs. Optimistic case (15% conversion, rapid organic growth) reaches $180 MRR and profitability by Month 8. Base case balances sustainability with achievable acquisition rates for B2C wellness apps.</p>
<footer>Kalei — Confidential | February 2026</footer>
</div>
<!-- PER-FEATURE COST BREAKDOWN -->
<div class="page">
<div class="page-header">
<h2>Per-Feature Cost & Usage Analysis</h2>
<div class="header-right">February 2026</div>
</div>
<p>All eight features ship in v1. Understanding per-feature cost and usage patterns drives optimization priorities:</p>
<table>
<tr>
<th>Feature</th>
<th>Free Tier (per user/mo)</th>
<th>Prism Tier (per user/mo)</th>
<th>Monthly Cost per User</th>
<th>Primary Cost Driver</th>
</tr>
<tr>
<td><strong>Mirror</strong></td>
<td>2x sessions</td>
<td>8x sessions</td>
<td>$0.0096 (F) / $0.0384 (P)</td>
<td>Output tokens (240/session)</td>
</tr>
<tr>
<td><strong>Turn</strong></td>
<td>3x/day (90/mo)</td>
<td>10x/day (300/mo)</td>
<td>$0.0207 (F) / $0.069 (P)</td>
<td>Input tokens (context)</td>
</tr>
<tr>
<td><strong>Lens</strong></td>
<td>2x/week (8/mo)</td>
<td>5x/week (20/mo)</td>
<td>$0.0077 (F) / $0.0192 (P)</td>
<td>Input tokens (user data)</td>
</tr>
<tr>
<td><strong>Spectrum</strong></td>
<td>1x/month (1/mo)</td>
<td>4x/month (4/mo)</td>
<td>$0.0095 (F) / $0.038 (P)</td>
<td>Output tokens (analysis)</td>
</tr>
<tr>
<td><strong>Rehearsal</strong></td>
<td>0.5x/month</td>
<td>3x/month</td>
<td>$0.002 (F) / $0.0144 (P)</td>
<td>Input tokens (dialogue context)</td>
</tr>
<tr>
<td><strong>Ritual</strong></td>
<td>Daily reminders (free tier)</td>
<td>Personalized daily</td>
<td>$0 (F) / $0.005 (P)</td>
<td>Static content (no API calls)</td>
</tr>
<tr>
<td><strong>Evidence Wall</strong></td>
<td>Manual entry (free tier)</td>
<td>Auto-generated (4x/month)</td>
<td>$0 (F) / $0.0095 (P)</td>
<td>Input tokens (evidence synthesis)</td>
</tr>
<tr>
<td><strong>Guide</strong></td>
<td>Unavailable</td>
<td>2x/month</td>
<td>N/A (F) / $0.007 (P)</td>
<td>Input + output (coaching dialogue)</td>
</tr>
</table>
<div class="chart-container">
<canvas id="featureCostChart"></canvas>
</div>
<h3>Cost Optimization Priorities</h3>
<ul>
<li><strong>Turn & Mirror (57% of cost):</strong> Focus on prompt caching and response length optimization. Potential 15-20% savings.</li>
<li><strong>Spectrum & Evidence Wall (20% of cost):</strong> Batch processing during off-peak hours. 10-15% savings.</li>
<li><strong>Ritual & Rehearsal (5% of cost):</strong> Lower priority. Use DeepSeek standard (no caching needed).</li>
</ul>
<footer>Kalei — Confidential | February 2026</footer>
</div>
<!-- USER COHORT ECONOMICS -->
<div class="page">
<div class="page-header">
<h2>User Cohort Economics & LTV Analysis</h2>
<div class="header-right">February 2026</div>
</div>
<p>Three user cohorts drive distinct unit economics and profitability profiles:</p>
<table>
<tr>
<th>Cohort</th>
<th>Monthly Revenue</th>
<th>AI Cost</th>
<th>Gross Profit</th>
<th>Monthly Margin %</th>
<th>Estimated Lifetime Value</th>
</tr>
<tr>
<td><strong>Free User</strong></td>
<td>$0</td>
<td>$0.034</td>
<td>-$0.034</td>
<td>N/A (loss leader)</td>
<td>$0 (conversion target)</td>
</tr>
<tr>
<td><strong>Prism User</strong><br>($4.99/mo)</td>
<td>$4.99</td>
<td>$0.076</td>
<td>$4.914</td>
<td>98.5%</td>
<td>$29.94 (6 mo @ 8% churn)</td>
</tr>
<tr>
<td><strong>Prism+ User</strong><br>($9.99/mo)</td>
<td>$9.99</td>
<td>$0.12</td>
<td>$9.87</td>
<td>98.8%</td>
<td>$65.80 (7 mo @ 5% churn)</td>
</tr>
</table>
<h3>LTV Calculations (Base Case)</h3>
<div class="highlight">
<strong>Prism User LTV:</strong> Assumes $4.99 monthly revenue, $0.076 cost, 6-month average lifetime (8% monthly churn), $0.50 operations/month = $4.414 net per month × 6 = $26.48 LTV. With customer acquisition cost allowance of $15 (3-month payback), ratio is 1.76:1.<br><br>
<strong>Prism+ User LTV:</strong> Assumes $9.99 monthly, $0.12 cost, 7-month lifetime (5% churn), $0.75 operations = $8.12/month × 7 = $56.84 LTV. Premium tier drives 2.1:1 CAC ratio, enabling higher acquisition spend.<br><br>
<strong>Implications:</strong> Prism tier alone achieves sustainable acquisition economics at current costs. Prism+ upgrade upsell (25% of Prism users upgrade) becomes major profit driver at scale.
</div>
<footer>Kalei — Confidential | February 2026</footer>
</div>
<!-- BREAK-EVEN SCENARIOS -->
<div class="page">
<div class="page-header">
<h2>Break-Even Scenarios by Price & Conversion</h2>
<div class="header-right">February 2026</div>
</div>
<p>Different pricing and conversion rate combinations reveal break-even timelines and profitability thresholds:</p>
<table>
<tr>
<th>Price Point</th>
<th>Conversion (5%)</th>
<th>Conversion (10%)</th>
<th>Conversion (15%)</th>
<th>Conversion (20%)</th>
</tr>
<tr>
<td><strong>$3.99/mo</strong></td>
<td>M16 (-$5)</td>
<td>M12 (+$18)</td>
<td>M10 (+$42)</td>
<td>M8 (+$68)</td>
</tr>
<tr>
<td><strong>$4.99/mo</strong></td>
<td>M14 (+$8)</td>
<td>M11 (+$33)</td>
<td>M9 (+$65)</td>
<td>M7 (+$98)</td>
</tr>
<tr>
<td><strong>$6.99/mo</strong></td>
<td>M12 (+$35)</td>
<td>M9 (+$72)</td>
<td>M7 (+$112)</td>
<td>M6 (+$152)</td>
</tr>
<tr>
<td><strong>$9.99/mo (Prism+)</strong></td>
<td>M10 (+$72)</td>
<td>M7 (+$145)</td>
<td>M5 (+$218)</td>
<td>M4 (+$291)</td>
</tr>
</table>
<div class="charts-row">
<div class="chart-container-half">
<canvas id="breakEvenMonthChart"></canvas>
</div>
<div class="chart-container-half">
<canvas id="breakEvenProfitChart"></canvas>
</div>
</div>
<h3>Strategic Insights</h3>
<ul>
<li>Current $4.99 pricing achieves break-even Month 11 at 10% conversion. Conservative pricing option.</li>
<li>$6.99 pricing accelerates break-even to Month 9 with buffer for market testing.</li>
<li>Prism+ ($9.99) tier enables profitability by Month 7 even at modest conversion rates.</li>
<li>20% conversion (achievable with referrals + in-app prompts) reduces break-even to Months 4-7 across all price points.</li>
</ul>
<footer>Kalei — Confidential | February 2026</footer>
</div>
<!-- SCALING MILESTONES & INFRASTRUCTURE -->
<div class="page">
<div class="page-header">
<h2>Scaling Milestones & Infrastructure Timeline</h2>
<div class="header-right">February 2026</div>
</div>
<p>Kalei achieves three scaling milestones tied to user growth, not product phases. All features available at all scales:</p>
<table>
<tr>
<th>Milestone</th>
<th>DAU Target</th>
<th>Timeline</th>
<th>VPS Tier</th>
<th>Monthly Infra Cost</th>
<th>AI Cost (Est.)</th>
<th>Total COGS</th>
</tr>
<tr>
<td><strong>Launch</strong></td>
<td>50 DAU</td>
<td>Months 1-9</td>
<td>Netcup VPS 1000 (2GB)</td>
<td>€14</td>
<td>$30-50</td>
<td>$44-64</td>
</tr>
<tr>
<td><strong>Traction</strong></td>
<td>200 DAU</td>
<td>Months 10-14</td>
<td>Netcup VPS 2000 (4GB)</td>
<td>€18</td>
<td>$120-160</td>
<td>$150-190</td>
</tr>
<tr>
<td><strong>Growth</strong></td>
<td>1,000 DAU</td>
<td>Months 15-18+</td>
<td>Load-balanced VPS or Managed K8s</td>
<td>€50+</td>
<td>$600-800</td>
<td>$650-850</td>
</tr>
</table>
<h3>Scaling Triggers & Costs</h3>
<ul>
<li><strong>Launch (50 DAU, ~Month 9):</strong> Single VPS handles load. PostgreSQL + Redis on same instance. Monthly cost: €14 + ~$40 AI = €54 total (~$60).</li>
<li><strong>Traction (200 DAU, ~Month 10):</strong> Database optimization required. Upgrade to 4GB VPS. Load testing confirms single instance sufficient through Month 14.</li>
<li><strong>Growth (1,000 DAU, ~Month 15):</strong> Multi-instance load balancing required. Consider Kubernetes or AWS ALB. Estimated €50-100/month infrastructure.</li>
<li><strong>Database:</strong> Managed PostgreSQL (€20-50/month) not required until Month 16-18 assuming careful query optimization.</li>
</ul>
<footer>Kalei — Confidential | February 2026</footer>
</div>
<!-- COMPETITIVE BURN RATE COMPARISON -->
<div class="page dark-section">
<div class="page-header">
<h2>Competitive Burn Rate Comparison</h2>
<div class="header-right">Kalei — Confidential | February 2026</div>
</div>
<table>
<tr>
<th>Category</th>
<th>Typical Seed Stage</th>
<th>Typical Series A</th>
<th>Venture-Backed Wellness</th>
<th>Kalei (Founder-Led)</th>
<th>% of Typical</th>
</tr>
<tr>
<td><strong>Team Salaries</strong></td>
<td>$8,000-15,000</td>
<td>$30,000-60,000</td>
<td>$20,000-40,000</td>
<td>$0 (founder)</td>
<td>0%</td>
</tr>
<tr>
<td><strong>Cloud Infrastructure</strong></td>
<td>$2,000-5,000</td>
<td>$5,000-10,000</td>
<td>$3,000-8,000</td>
<td>$50 (VPS)</td>
<td>0.6-1.7%</td>
</tr>
<tr>
<td><strong>AI / ML Inference</strong></td>
<td>$3,000-8,000</td>
<td>$5,000-15,000</td>
<td>$4,000-10,000</td>
<td>$240 (DeepSeek)</td>
<td>2.4-8%</td>
</tr>
<tr>
<td><strong>Sales & Marketing</strong></td>
<td>$2,000-5,000</td>
<td>$8,000-20,000</td>
<td>$5,000-15,000</td>
<td>$0 (organic)</td>
<td>0%</td>
</tr>
<tr>
<td><strong>Tools & Software</strong></td>
<td>$500-1,500</td>
<td>$1,000-3,000</td>
<td>$800-2,000</td>
<td>$50 (GitHub, monitoring)</td>
<td>2.5-6.25%</td>
</tr>
<tr>
<td><strong>TOTAL MONTHLY BURN</strong></td>
<td>$15,500-34,500</td>
<td>$49,000-108,000</td>
<td>$32,800-75,000</td>
<td>$340</td>
<td>0.45%-1.04%</td>
</tr>
</table>
<h3>Key Competitive Advantages</h3>
<div class="highlight">
<strong>Ultra-Low Burn Rate:</strong> Kalei operates at 0.45% of typical Series A burn and 1.04% of venture-backed wellness app burn. This 100x cost advantage is structural, not temporary.<br><br>
<strong>Commodity AI Pricing:</strong> DeepSeek V3.2 at $0.26/1M input tokens replaces proprietary models costing $15-20. This single shift eliminates the largest cost center for AI companies.<br><br>
<strong>Founder-Led Efficiency:</strong> Zero salary overhead in year 1. Scales to 1-2 team members at profitability, funded by Prism margins.<br><br>
<strong>Sustainable Unit Economics:</strong> $4.91 monthly profit per Prism user supports 30-50 customer acquisition spend at 3-month payback.
</div>
<h3>Profitability Pathways</h3>
<ul>
<li><strong>Organic Profitability (Base Case):</strong> Reach $100 MRR by Month 12, profit +$33/month. Cumulative profit of $500+ by Month 18. No external funding required.</li>
<li><strong>Funded Growth (Optional):</strong> If raising capital, unit economics justify $5-10k CAC spend. 50-100 paid users generates $250-500 MRR, funding team hire.</li>
<li><strong>Exit Optionality:</strong> Platform with $3k+ MRR, proven unit economics, and 1,000+ DAU becomes acquisition target for wellness platforms, mental health networks, or coaching apps.</li>
</ul>
<footer>Kalei — Confidential | February 2026</footer>
</div>
<!-- PRICING COMPARISON & MODELS -->
<div class="page">
<div class="page-header">
<h2>AI Pricing Comparison: Models & Impact</h2>
<div class="header-right">February 2026</div>
</div>
<table>
<tr>
<th>Parameter</th>
<th>DeepSeek V3.2</th>
<th>Claude Haiku (Current)</th>
<th>Claude Sonnet</th>
<th>GPT-4 Mini</th>
<th>Savings vs. Haiku</th>
</tr>
<tr>
<td><strong>Input Cost (1M)</strong></td>
<td>$0.26</td>
<td>$1.00</td>
<td>$3.00</td>
<td>$0.15</td>
<td>74% reduction</td>
</tr>
<tr>
<td><strong>Output Cost (1M)</strong></td>
<td>$0.38</td>
<td>$5.00</td>
<td>$15.00</td>
<td>$0.60</td>
<td>92% reduction</td>
</tr>
<tr>
<td><strong>Blended Rate (1M)</strong></td>
<td>$0.32</td>
<td>$3.00</td>
<td>$9.00</td>
<td>$0.38</td>
<td>89% reduction</td>
</tr>
<tr>
<td><strong>Free User Cost</strong></td>
<td>$0.034</td>
<td>$0.33</td>
<td>$0.90</td>
<td>$0.037</td>
<td>90% reduction</td>
</tr>
<tr>
<td><strong>Prism User Cost</strong></td>
<td>$0.076</td>
<td>$0.72</td>
<td>$2.16</td>
<td>$0.083</td>
<td>89% reduction</td>
</tr>
</table>
<div class="charts-row">
<div class="chart-container-half">
<canvas id="modelInputCostChart"></canvas>
</div>
<div class="chart-container-half">
<canvas id="modelOutputCostChart"></canvas>
</div>
</div>
<h3>Model Selection Rationale</h3>
<p><strong>DeepSeek V3.2 (Primary, 90% of requests):</strong> Commodity pricing for commodity tasks. Comparable performance to Haiku on code, reasoning, and dialogue. Excellent caching support (further 15-25% savings). Latest benchmarks show GPT-4-level performance on many tasks.</p>
<p><strong>Claude Haiku (Fallback, 10% of requests):</strong> Specialized reasoning, multi-step verification, complex user context understanding. The 10x cost premium is justified for edge cases where quality directly impacts user retention. Estimated impact: <1% of total AI spend.</p>
<p><strong>Why Not GPT-4 Mini or Other Models?</strong> GPT-4 Mini offers similar pricing to DeepSeek but weaker caching and less favorable opaque pricing models. Sonnet and larger models exceed Kalei's cost budget. DeepSeek + Haiku hybrid is optimal for this workload.</p>
<footer>Kalei — Confidential | February 2026</footer>
</div>
<!-- BUDGET ALLOCATION & RUNWAY -->
<div class="page">
<div class="page-header">
<h2>Initial Budget Allocation & Runway</h2>
<div class="header-right">February 2026</div>
</div>
<p>If launching with €2,000 initial budget, optimal allocation prioritizes runway over marketing:</p>
<table>
<tr>
<th>Category</th>
<th>Allocation (€)</th>
<th>Allocation (%)</th>
<th>Burn Rate</th>
<th>Runway Coverage</th>
</tr>
<tr>
<td><strong>Infrastructure (VPS + Domain)</strong></td>
<td>€200</td>
<td>10%</td>
<td>€14-20/mo</td>
<td>10-14 months</td>
</tr>
<tr>
<td><strong>AI Inference (DeepSeek)</strong></td>
<td>€300</td>
<td>15%</td>
<td>€30-50/mo*</td>
<td>6-10 months</td>
</tr>
<tr>
<td><strong>Tools & Monitoring</strong></td>
<td>€100</td>
<td>5%</td>
<td>€0-20/mo</td>
<td>5-infinite months</td>
</tr>
<tr>
<td><strong>Buffer & Contingency</strong></td>
<td>€1,400</td>
<td>70%</td>
<td>Variable</td>
<td>Emergency reserves</td>
</tr>
</table>
<div class="chart-container-half" style="margin: 30px 0; width: 50%;">
<canvas id="budgetAllocationChart"></canvas>
</div>
<h3>Runway Projections</h3>
<ul>
<li><strong>Aggressive Growth (5 users/month):</strong> Runway = 10 months to profitability Month 12. Buffer absorbed by Month 7-8. Requires disciplined acquisition to break-even before cash depletion.</li>
<li><strong>Conservative Growth (3 users/month):</strong> Runway = 16+ months. Profitability achieved Month 14-15 with buffer intact. Comfortable path to sustainable business without fundraising.</li>
<li><strong>Profitability Timing:</strong> Base case (3-5 users/month) achieves Month 11-12 profitability, leaving 4-5 months buffer for unexpected costs or slower acquisition.</li>
</ul>
<p><strong>Note:</strong> *AI costs grow with usage. Month 1 = €2; Month 6 = €16; Month 12 = €53. Conservative estimate assumes €50/month average over 12 months.</p>
<footer>Kalei — Confidential | February 2026</footer>
</div>
<!-- REVENUE PROJECTIONS -->
<div class="page">
<div class="page-header">
<h2>18-Month Revenue & ARR Projections</h2>
<div class="header-right">February 2026</div>
</div>
<p>Conservative annual recurring revenue (ARR) growth driven by organic acquisition and freemium conversion:</p>
<table>
<tr>
<th>Quarter</th>
<th>Free Users</th>
<th>Prism Users</th>
<th>Monthly Churn</th>
<th>MRR</th>
<th>Quarterly Revenue</th>
<th>ARR (Annualized)</th>
<th>QoQ Growth</th>
</tr>
<tr>
<td><strong>Q1 (M1-3)</strong></td>
<td>15</td>
<td>2</td>
<td>8%</td>
<td>$10</td>
<td>$35</td>
<td>$120</td>
<td></td>
</tr>
<tr>
<td><strong>Q2 (M4-6)</strong></td>
<td>25</td>
<td>5</td>
<td>8%</td>
<td>$25</td>
<td>$80</td>
<td>$300</td>
<td>+150%</td>
</tr>
<tr>
<td><strong>Q3 (M7-9)</strong></td>
<td>50</td>
<td>12</td>
<td>8%</td>
<td>$60</td>
<td>$185</td>
<td>$720</td>
<td>+140%</td>
</tr>
<tr>
<td><strong>Q4 (M10-12)</strong></td>
<td>80</td>
<td>20</td>
<td>8%</td>
<td>$100</td>
<td>$320</td>
<td>$1,200</td>
<td>+67%</td>
</tr>
<tr>
<td><strong>Q5 (M13-15)</strong></td>
<td>125</td>
<td>42</td>
<td>8%</td>
<td>$210</td>
<td>$650</td>
<td>$2,520</td>
<td>+110%</td>
</tr>
<tr>
<td><strong>Q6 (M16-18)</strong></td>
<td>190</td>
<td>55</td>
<td>8%</td>
<td>$275</td>
<td>$850</td>
<td>$3,300</td>
<td>+31%</td>
</tr>
</table>
<div class="chart-container">
<canvas id="arrChart"></canvas>
</div>
<h3>Key Revenue Insights</h3>
<ul>
<li><strong>MRR Path to $3k:</strong> Months 1-12 show exponential growth as user base scales (5-8x users). Months 13-18 show continued growth but decelerating QoQ as base effect slows.</li>
<li><strong>ARR Trajectory:</strong> $120 (Q1) → $1,200 (Q4) → $3,300 (Q6). Represents 27x growth in 18 months with organic acquisition only.</li>
<li><strong>Prism Mix Evolution:</strong> Prism users grow from 12% (Q1) to 22% (Q6) as Free users accumulate and convert. This gradual mix shift drives incremental margin expansion.</li>
<li><strong>Annual Run Rate (Month 18):</strong> $300 MRR × 12 = $3,600 ARR achievable with conservative organic growth. With 10% Prism+ tier adoption (5-6 users), ARR exceeds $4,500.</li>
</ul>
<footer>Kalei — Confidential | February 2026</footer>
</div>
<!-- RISK-ADJUSTED FINANCIAL MODEL -->
<div class="page">
<div class="page-header">
<h2>Risk-Adjusted Financial Model</h2>
<div class="header-right">February 2026</div>
</div>
<p>Probability-weighted outcomes across three scenarios (Conservative 30%, Base 50%, Optimistic 20%) provide expected value perspective:</p>
<table>
<tr>
<th>Outcome</th>
<th>Probability</th>
<th>Month 12 MRR</th>
<th>Month 18 MRR</th>
<th>Cumulative Profit M18</th>
<th>Notes</th>
</tr>
<tr>
<td><strong>Conservative</strong></td>
<td>30%</td>
<td>$45</td>
<td>$90</td>
<td>+$180</td>
<td>5% conversion, slower growth. Still profitable.</td>
</tr>
<tr>
<td><strong>Base Case</strong></td>
<td>50%</td>
<td>$100</td>
<td>$300</td>
<td>+$509</td>
<td>10% conversion, 3-5 users/month. Target outcome.</td>
</tr>
<tr>
<td><strong>Optimistic</strong></td>
<td>20%</td>
<td>$180</td>
<td>$500</td>
<td>+$1,200</td>
<td>15% conversion, viral loops, press. Upside scenario.</td>
</tr>
<tr>
<td colspan="2"><strong>Expected Value (Probability-Weighted)</strong></td>
<td><strong>$91</strong></td>
<td><strong>$272</strong></td>
<td><strong>+$556</strong></td>
<td><strong>Conservative baseline with upside optionality</strong></td>
</tr>
</table>
<h3>Risk Assessment</h3>
<ul>
<li><strong>Downside Risk (Conservative):</strong> 30% probability of $45 MRR at Month 12. Still achieves profitability by Month 14-16. Worst case: break-even by end of runway without fundraising.</li>
<li><strong>Base Case Probability (50%):</strong> Most likely outcome given freemium SaaS benchmarks. $100 MRR Month 12 = $1.2k ARR, sustainable without external funding.</li>
<li><strong>Upside Potential (20%):</strong> Viral activation or press coverage doubles acquisition rate. $500 MRR by Month 18 = $6k ARR. Attractive acquisition target or Series A candidate.</li>
<li><strong>Expected Value (Weighted):</strong> $91 MRR Month 12, $272 MRR Month 18, $556 cumulative profit. Demonstrates risk-adjusted profitability across all scenarios.</li>
</ul>
<footer>Kalei — Confidential | February 2026</footer>
</div>
<!-- SOURCES & METHODOLOGY -->
<div class="page">
<div class="page-header">
<h2>Sources & Methodology</h2>
<div class="header-right">February 2026</div>
</div>
<h3>AI Pricing Sources</h3>
<ul>
<li><strong>DeepSeek V3.2:</strong> OpenRouter and DeepInfra pricing (February 2026) — $0.26 input, $0.38 output per 1M tokens.</li>
<li><strong>Claude Haiku 4.5:</strong> Anthropic API pricing — $1.00 input, $5.00 output per 1M tokens.</li>
<li><strong>Claude Sonnet & GPT-4:</strong> Public pricing APIs (2026 rates). Performance benchmarks from Artificial Analysis and Hugging Face Spaces.</li>
</ul>
<h3>Infrastructure & SaaS Benchmarks</h3>
<ul>
<li><strong>Netcup VPS:</strong> €8.45 (2GB), €15.59 (4GB), €26.18 (8GB) per month (February 2026 pricing).</li>
<li><strong>Typical SaaS Burn:</strong> Y Combinator surveys, Stripe Atlas data. Early-stage AI startups burn $15k-50k/month with 2-4 team members.</li>
<li><strong>Freemium Conversion:</strong> SaaS benchmarks (Recurly, ChartMogul). B2C wellness apps: 5-15% Free-to-Paid, 3-6 month LTV.</li>
</ul>
<h3>User Behavior Assumptions</h3>
<ul>
<li><strong>Organic Acquisition:</strong> 3-5 new free users/month (conservative for B2C health app without paid marketing). Month 1-6 acquisition: 3 users/mo; Month 7-12: 4-5 users/mo; Month 13-18: 5-8 users/mo.</li>
<li><strong>Conversion Rate:</strong> 10% Free-to-Prism by Month 3, sustained through Month 18. Achieved through in-app prompts, feature limits, and organic virality.</li>
<li><strong>Churn Rates:</strong> 8% monthly churn (Prism), 5% (Prism+). Typical for B2C SaaS; wellness apps trend higher (8-12%). Conservative estimate.</li>
<li><strong>Token Usage:</strong> Mirror 3,300 tokens, Turn 1,800, Lens 1,000, Spectrum 6,000, Rehearsal 4,000, Guide 3,000. Estimated from 2-3 month alpha testing.</li>
</ul>
<h3>Financial Modeling Methodology</h3>
<ul>
<li><strong>Month-by-Month Waterfall:</strong> Bottom-up from user counts → feature usage → tokens → costs. Revenue = Prism users × $4.99 (monthly recurring).</li>
<li><strong>Infrastructure Scaling:</strong> Single VPS (€14) through 50 DAU (Month 9). Upgrade at 200 DAU (€18). Kubernetes/load balancing at 1,000 DAU (€50+).</li>
<li><strong>Sensitivity Analysis:</strong> Vary conversion rate (5-15%), growth velocity (2-8 users/mo), AI costs (±20%). Outputs break-even month and Month 18 profit.</li>
<li><strong>Probability Weighting:</strong> Conservative (30%), Base (50%), Optimistic (20%) weighted by historical freemium SaaS outcomes and Kalei-specific competitive advantages.</li>
</ul>
<h3>Key Assumptions & Disclaimers</h3>
<ul>
<li>Token usage estimates may vary ±30% depending on user behavior, prompt lengths, and feature adoption mix.</li>
<li>Infrastructure costs assume PostgreSQL on VPS through Month 18. Managed database adds €20-50/month at scale.</li>
<li>Exchange rate (EUR/USD) fixed at 1.10 for simplicity. Actual rates vary; use spot rates for financial planning.</li>
<li>DeepSeek pricing assumes continued commodity rates through 2026. Rate increases would extend break-even by 1-2 months.</li>
<li>User acquisition assumes zero paid marketing. Paid CAC of $5-10/user would compress break-even by 3-6 months if conversion rates exceed 15%.</li>
<li>Product development and maintenance costs not included. Post-profitability, allocate 20% of revenue to R&D and support.</li>
</ul>
<footer>Kalei — Confidential | February 2026</footer>
</div>
<script>
const colors = {
amethyst: '#8B5CF6',
sapphire: '#3B82F6',
emerald: '#10B981',
amber: '#F59E0B',
rose: '#EC4899',
indigo: '#6366F1'
};
const axisY = { ticks: { font: { size: 11 }, color: '#8E8AA0' }, grid: { color: 'rgba(139,92,246,0.06)' } };
const axisX = { ticks: { font: { size: 11, weight: '500' }, color: '#64607A' }, grid: { display: false } };
const defaults = {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: true,
labels: {
font: { family: "'Inter', sans-serif", size: 11, weight: '500' },
padding: 18,
usePointStyle: true,
pointStyle: 'rectRounded',
color: '#64607A',
boxPadding: 10
}
},
tooltip: {
backgroundColor: '#110E1F',
padding: 14,
cornerRadius: 8,
titleFont: { size: 13, weight: 'bold' },
bodyFont: { size: 12 },
titleColor: '#E2DFEF',
bodyColor: '#B8B3CC',
borderColor: 'rgba(139, 92, 246, 0.3)',
borderWidth: 1
}
}
};
// Timeline Chart
new Chart(document.getElementById('timelineChart'), {
type: 'line',
data: {
labels: ['M1', 'M2', 'M3', 'M6', 'M9', 'M12', 'M15', 'M18'],
datasets: [
{ label: 'MRR ($)', data: [5, 10, 15, 25, 60, 100, 210, 300], borderColor: colors.amethyst, backgroundColor: 'rgba(139,92,246,0.05)', fill: true, tension: 0.4, borderWidth: 2, pointRadius: 4, pointBackgroundColor: colors.amethyst },
{ label: 'AI Costs ($)', data: [2, 4, 6, 16, 40, 53, 118, 200], borderColor: colors.rose, backgroundColor: 'rgba(236,72,153,0.05)', fill: true, tension: 0.4, borderWidth: 2, pointRadius: 4, pointBackgroundColor: colors.rose },
{ label: 'Profit (Loss) ($)', data: [-11, -8, -5, -5, 6, 33, 77, 80], borderColor: colors.emerald, backgroundColor: 'rgba(16,185,129,0.05)', fill: true, tension: 0.4, borderWidth: 2, pointRadius: 4, pointBackgroundColor: colors.emerald }
]
},
options: { ...defaults, scales: { y: { ...axisY, ticks: { ...axisY.ticks, callback: v => '$' + v } }, x: axisX } }
});
// Scenario Charts
new Chart(document.getElementById('scenarioMRRChart'), {
type: 'line',
data: {
labels: ['M3', 'M6', 'M9', 'M12', 'M15', 'M18'],
datasets: [
{ label: 'Conservative (5%)', data: [8, 15, 25, 45, 60, 90], borderColor: colors.rose, borderWidth: 2, tension: 0.4, pointRadius: 4, pointBackgroundColor: colors.rose },
{ label: 'Base Case (10%)', data: [15, 25, 60, 100, 210, 300], borderColor: colors.amethyst, borderWidth: 2, tension: 0.4, pointRadius: 4, pointBackgroundColor: colors.amethyst },
{ label: 'Optimistic (15%)', data: [25, 50, 120, 180, 350, 500], borderColor: colors.emerald, borderWidth: 2, tension: 0.4, pointRadius: 4, pointBackgroundColor: colors.emerald }
]
},
options: { ...defaults, plugins: { ...defaults.plugins, title: { display: true, text: 'MRR by Scenario', font: { size: 13, weight: '600' }, color: '#64607A', padding: { bottom: 12 } } }, scales: { y: { ...axisY, ticks: { ...axisY.ticks, callback: v => '$' + v } }, x: axisX } }
});
new Chart(document.getElementById('scenarioProfitChart'), {
type: 'bar',
data: {
labels: ['Conservative', 'Base Case', 'Optimistic'],
datasets: [
{ label: 'Month 12 Profit', data: [-15, 33, 95], backgroundColor: [colors.rose, colors.amethyst, colors.emerald], borderRadius: 6, borderWidth: 0 },
]
},
options: { ...defaults, plugins: { ...defaults.plugins, title: { display: true, text: 'Month 12 Profit by Scenario', font: { size: 13, weight: '600' }, color: '#64607A', padding: { bottom: 12 } } }, scales: { y: { ...axisY, ticks: { ...axisY.ticks, callback: v => '$' + v } }, x: axisX } }
});
// Per-Feature Cost Chart
new Chart(document.getElementById('featureCostChart'), {
type: 'bar',
data: {
labels: ['Turn', 'Mirror', 'Spectrum', 'Rehearsal', 'Guide', 'Lens', 'Evidence', 'Ritual'],
datasets: [
{ label: 'Free User $/mo', data: [0.0207, 0.0096, 0.0095, 0.002, 0, 0.0077, 0, 0], backgroundColor: colors.rose, borderRadius: 6, borderWidth: 0 },
{ label: 'Prism User $/mo', data: [0.069, 0.0384, 0.038, 0.0144, 0.007, 0.0192, 0.0095, 0.005], backgroundColor: colors.emerald, borderRadius: 6, borderWidth: 0 }
]
},
options: { ...defaults, indexAxis: 'y', scales: { x: { ...axisX, stacked: true, ticks: { ...axisX.ticks, callback: v => '$' + v.toFixed(3) } }, y: axisY } }
});
// Break-even Charts
new Chart(document.getElementById('breakEvenMonthChart'), {
type: 'bar',
data: {
labels: ['$3.99', '$4.99', '$6.99', '$9.99'],
datasets: [
{ label: '5% Conv', data: [16, 14, 12, 10], backgroundColor: colors.rose, borderRadius: 6, borderWidth: 0 },
{ label: '10% Conv', data: [12, 11, 9, 7], backgroundColor: colors.amber, borderRadius: 6, borderWidth: 0 },
{ label: '15% Conv', data: [10, 9, 7, 5], backgroundColor: colors.emerald, borderRadius: 6, borderWidth: 0 },
{ label: '20% Conv', data: [8, 7, 6, 4], backgroundColor: colors.sapphire, borderRadius: 6, borderWidth: 0 }
]
},
options: { ...defaults, plugins: { ...defaults.plugins, title: { display: true, text: 'Break-Even Month by Price & Conversion', font: { size: 13, weight: '600' }, color: '#64607A', padding: { bottom: 12 } } }, scales: { y: { ...axisY, ticks: { ...axisY.ticks, callback: v => 'M' + v } }, x: axisX } }
});
new Chart(document.getElementById('breakEvenProfitChart'), {
type: 'bar',
data: {
labels: ['$3.99', '$4.99', '$6.99', '$9.99'],
datasets: [
{ label: '10% Conv (M12 Profit)', data: [18, 33, 72, 145], backgroundColor: colors.amethyst, borderRadius: 6, borderWidth: 0 }
]
},
options: { ...defaults, plugins: { ...defaults.plugins, title: { display: true, text: 'Month 12 Profit at 10% Conversion', font: { size: 13, weight: '600' }, color: '#64607A', padding: { bottom: 12 } } }, scales: { y: { ...axisY, ticks: { ...axisY.ticks, callback: v => '$' + v } }, x: axisX } }
});
// Model Pricing Charts
new Chart(document.getElementById('modelInputCostChart'), {
type: 'bar',
data: {
labels: ['DeepSeek', 'Haiku', 'Sonnet', 'GPT-4 Mini'],
datasets: [{ label: 'Input Cost / 1M Tokens', data: [0.26, 1.00, 3.00, 0.15], backgroundColor: [colors.emerald, colors.amber, colors.rose, colors.sapphire], borderRadius: 6, borderWidth: 0 }]
},
options: { ...defaults, indexAxis: 'y', plugins: { ...defaults.plugins, title: { display: true, text: 'Input Token Cost Comparison', font: { size: 13, weight: '600' }, color: '#64607A', padding: { bottom: 12 } } }, scales: { x: { ...axisX, beginAtZero: true, ticks: { ...axisX.ticks, callback: v => '$' + v.toFixed(2) } }, y: axisY } }
});
new Chart(document.getElementById('modelOutputCostChart'), {
type: 'bar',
data: {
labels: ['DeepSeek', 'Haiku', 'Sonnet', 'GPT-4 Mini'],
datasets: [{ label: 'Output Cost / 1M Tokens', data: [0.38, 5.00, 15.00, 0.60], backgroundColor: [colors.emerald, colors.amber, colors.rose, colors.sapphire], borderRadius: 6, borderWidth: 0 }]
},
options: { ...defaults, indexAxis: 'y', plugins: { ...defaults.plugins, title: { display: true, text: 'Output Token Cost Comparison', font: { size: 13, weight: '600' }, color: '#64607A', padding: { bottom: 12 } } }, scales: { x: { ...axisX, beginAtZero: true, ticks: { ...axisX.ticks, callback: v => '$' + v.toFixed(2) } }, y: axisY } }
});
// Budget Allocation Chart
new Chart(document.getElementById('budgetAllocationChart'), {
type: 'doughnut',
data: {
labels: ['Buffer & Contingency', 'AI Inference', 'Infrastructure', 'Tools'],
datasets: [{ data: [1400, 300, 200, 100], backgroundColor: [colors.sapphire, colors.rose, colors.emerald, colors.amber], borderColor: '#fff', borderWidth: 3, hoverOffset: 8 }]
},
options: { ...defaults, plugins: { ...defaults.plugins, legend: { ...defaults.plugins.legend, position: 'bottom' }, tooltip: { ...defaults.plugins.tooltip, callbacks: { label: ctx => ' €' + ctx.parsed.toFixed(0) + ' (' + Math.round(ctx.parsed / 20) + '%)' } } } }
});
// ARR Chart
new Chart(document.getElementById('arrChart'), {
type: 'line',
data: {
labels: ['Q1', 'Q2', 'Q3', 'Q4', 'Q5', 'Q6'],
datasets: [
{ label: 'MRR ($)', data: [10, 25, 60, 100, 210, 275], borderColor: colors.amethyst, backgroundColor: 'rgba(139,92,246,0.05)', fill: true, tension: 0.4, borderWidth: 2, pointRadius: 4, pointBackgroundColor: colors.amethyst },
{ label: 'ARR ($)', data: [120, 300, 720, 1200, 2520, 3300], borderColor: colors.emerald, backgroundColor: 'rgba(16,185,129,0.05)', fill: true, tension: 0.4, borderWidth: 2, pointRadius: 4, pointBackgroundColor: colors.emerald }
]
},
options: { ...defaults, scales: { y: { ...axisY, ticks: { ...axisY.ticks, callback: v => '$' + v.toLocaleString() } }, x: axisX } }
});
</script>
</body>
</html>