201 lines
21 KiB
HTML
201 lines
21 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>KlongKlong — Your AI Box. Built, Deployed, Managed.</title>
|
|
<meta name="description" content="A dedicated server running AI agents purpose-built for your business. Not a SaaS login. Not an API key. Your own AI box.">
|
|
<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=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root{--klong-green:#1D9E75;--klong-green-light:#25c490;--klong-green-dark:#157a5a;--klong-green-bg:#0d1f1a;--bg:#0a0f0d;--bg-card:#111916;--bg-card-hover:#162019;--text-primary:#e8ece9;--text-secondary:#8a9b91;--text-dim:#5a6b61;--border:#1e2b24;--border-light:#2a3d32}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:'DM Sans',-apple-system,sans-serif;background:var(--bg);color:var(--text-primary);line-height:1.6;-webkit-font-smoothing:antialiased}body::before{content:'';position:fixed;inset:0;background-image:linear-gradient(rgba(29,158,117,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(29,158,117,.03) 1px,transparent 1px);background-size:60px 60px;pointer-events:none;z-index:0}.container{max-width:980px;margin:0 auto;padding:0 24px;position:relative;z-index:1}nav{padding:24px 0;display:flex;align-items:center;justify-content:space-between}.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text-primary)}.logo-icon{width:32px;height:32px;background:var(--klong-green);border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.logo span{font-size:17px;font-weight:500;letter-spacing:-.5px}.nav-cta{font-size:14px;color:var(--klong-green);text-decoration:none;border:1px solid var(--klong-green);padding:8px 20px;border-radius:6px;transition:all .2s;font-weight:500}.nav-cta:hover{background:var(--klong-green);color:var(--bg)}.hero{padding:100px 0 80px}.hero h1{font-size:clamp(36px,5.5vw,52px);font-weight:500;line-height:1.1;letter-spacing:-1.5px;margin-bottom:20px;color:var(--text-primary)}.hero h1 em{font-style:normal;color:var(--klong-green)}.hero-sub{font-size:18px;color:var(--text-secondary);max-width:520px;line-height:1.65;margin-bottom:40px}.hero-cta{display:inline-flex;align-items:center;gap:8px;background:var(--klong-green);color:var(--bg);text-decoration:none;padding:14px 28px;border-radius:8px;font-size:15px;font-weight:500;transition:background .2s}.hero-cta:hover{background:var(--klong-green-light)}.hero-cta svg{width:16px;height:16px}.proof-bar{display:flex;gap:40px;padding:40px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin-bottom:100px;flex-wrap:wrap}.proof-item{display:flex;flex-direction:column;gap:4px}.proof-num{font-family:'JetBrains Mono',monospace;font-size:24px;font-weight:500;color:var(--klong-green)}.proof-label{font-size:13px;color:var(--text-dim);letter-spacing:.5px;text-transform:uppercase}section{margin-bottom:100px}.section-label{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--klong-green);text-transform:uppercase;letter-spacing:2px;margin-bottom:12px}.section-title{font-size:clamp(28px,4vw,36px);font-weight:500;letter-spacing:-1px;margin-bottom:16px;line-height:1.2}.section-desc{font-size:16px;color:var(--text-secondary);max-width:560px;margin-bottom:48px;line-height:1.7}.box-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.box-card{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:28px 24px;transition:all .25s}.box-card:hover{border-color:var(--klong-green);background:var(--bg-card-hover);transform:translateY(-2px)}.box-card-icon{width:36px;height:36px;background:var(--klong-green-bg);border-radius:8px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;color:var(--klong-green);font-size:18px}.box-card h3{font-size:15px;font-weight:500;margin-bottom:8px;letter-spacing:-.3px}.box-card p{font-size:13px;color:var(--text-secondary);line-height:1.6}.vertical-list{display:flex;flex-direction:column;gap:12px}.vertical{display:flex;align-items:flex-start;gap:20px;background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:28px;transition:border-color .2s}.vertical:hover{border-color:var(--border-light)}.vertical-tag{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--klong-green);background:var(--klong-green-bg);padding:4px 10px;border-radius:4px;white-space:nowrap;margin-top:2px;letter-spacing:.5px}.vertical-content h3{font-size:17px;font-weight:500;margin-bottom:6px;letter-spacing:-.3px}.vertical-content p{font-size:14px;color:var(--text-secondary);line-height:1.6}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;counter-reset:step}.step{counter-increment:step;position:relative}.step::before{content:counter(step,decimal-leading-zero);font-family:'JetBrains Mono',monospace;font-size:32px;font-weight:500;color:var(--border-light);display:block;margin-bottom:16px;line-height:1}.step h3{font-size:15px;font-weight:500;margin-bottom:8px}.step p{font-size:13px;color:var(--text-secondary);line-height:1.6}.comparison{display:grid;grid-template-columns:1fr 1fr;gap:16px}.comp-col{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:32px}.comp-col.is-col{border-color:var(--klong-green);background:var(--klong-green-bg)}.comp-col h3{font-family:'JetBrains Mono',monospace;font-size:13px;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:20px;color:var(--text-dim)}.comp-col.is-col h3{color:var(--klong-green)}.comp-col ul{list-style:none;display:flex;flex-direction:column;gap:12px}.comp-col li{font-size:14px;color:var(--text-secondary);padding-left:24px;position:relative;line-height:1.5}.comp-col li::before{content:'\00d7';position:absolute;left:0;color:var(--text-dim);font-weight:500}.comp-col.is-col li{color:var(--text-primary)}.comp-col.is-col li::before{content:'\2192';color:var(--klong-green)}.cta-section{text-align:center;padding:80px 0 120px;border-top:1px solid var(--border)}.cta-section h2{font-size:clamp(28px,4vw,36px);font-weight:500;letter-spacing:-1px;margin-bottom:12px}.cta-section p{font-size:16px;color:var(--text-secondary);margin-bottom:32px}.cta-section .hero-cta{font-size:16px;padding:16px 36px}footer{border-top:1px solid var(--border);padding:32px 0;display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--text-dim)}footer a{color:var(--text-secondary);text-decoration:none}footer a:hover{color:var(--klong-green)}@media(max-width:768px){.hero{padding:60px 0 40px}.box-grid{grid-template-columns:1fr}.steps{grid-template-columns:1fr 1fr;gap:32px}.comparison{grid-template-columns:1fr}.proof-bar{gap:24px}.vertical{flex-direction:column;gap:12px}}@media(max-width:480px){.steps{grid-template-columns:1fr}}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<nav>
|
|
<a href="/" class="logo">
|
|
<div class="logo-icon"><svg width="18" height="18" viewBox="0 0 20 20" fill="none"><rect x="3" y="3" width="14" height="14" rx="2" stroke="white" stroke-width="1.5"/><rect x="6" y="6" width="3" height="3" rx="0.5" fill="white"/><rect x="11" y="6" width="3" height="3" rx="0.5" fill="white"/><rect x="6" y="11" width="3" height="3" rx="0.5" fill="white"/><rect x="11" y="11" width="3" height="3" rx="0.5" fill="white"/></svg></div>
|
|
<span>klongklong</span>
|
|
</a>
|
|
<a href="mailto:hello@klongklong.com" class="nav-cta">Get in touch</a>
|
|
</nav>
|
|
<section class="hero">
|
|
<h1>Your <em>AI box</em>.<br>Built, deployed, managed.</h1>
|
|
<p class="hero-sub">A dedicated server running AI agents purpose-built for your business. Not a SaaS login. Not an API key. Your own infrastructure, your own agents, your own knowledge base.</p>
|
|
<a href="mailto:hello@klongklong.com" class="hero-cta">Book a discovery call <svg viewBox="0 0 16 16" fill="none"><path d="M3 8h10m0 0L9 4m4 4L9 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
|
|
</section>
|
|
<div class="proof-bar">
|
|
<div class="proof-item"><span class="proof-num">2</span><span class="proof-label">Live client boxes</span></div>
|
|
<div class="proof-item"><span class="proof-num">€1.37B</span><span class="proof-label">Fraud detected & blocked</span></div>
|
|
<div class="proof-item"><span class="proof-num">15 min</span><span class="proof-label">Box deployment time</span></div>
|
|
<div class="proof-item"><span class="proof-num">24/7</span><span class="proof-label">Agent availability</span></div>
|
|
</div>
|
|
<section>
|
|
<div class="section-label">What's in the box</div>
|
|
<h2 class="section-title">Everything your team needs to work with AI</h2>
|
|
<p class="section-desc">Each box is a complete AI operations environment — agents, memory, integrations, and task routing — running on your own dedicated server.</p>
|
|
<style>
|
|
.layer{border-radius:10px;padding:16px 20px;transition:all .3s ease;cursor:pointer;position:relative;border:1px solid var(--border)}
|
|
.layer:hover{transform:translateX(4px);border-color:var(--border-light)}
|
|
.layer.active{transform:translateX(8px)}
|
|
.layer-detail{overflow:hidden;max-height:0;opacity:0;transition:max-height .4s ease,opacity .3s ease,margin .3s ease;margin-top:0}
|
|
.layer-detail.open{max-height:300px;opacity:1;margin-top:12px}
|
|
.layer-tag{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:11px;padding:3px 8px;border-radius:4px;margin-right:6px}
|
|
.layer-arrow{transition:transform .3s}
|
|
.layer.active .layer-arrow{transform:rotate(90deg)}
|
|
</style>
|
|
<div style="display:flex;flex-direction:column;gap:8px;max-width:640px;">
|
|
|
|
<div class="layer" style="background:#0d1f1a;border-left:3px solid #1D9E75;" onclick="toggleLayer(this)">
|
|
<div style="display:flex;justify-content:space-between;align-items:center;">
|
|
<div>
|
|
<p style="font-size:15px;font-weight:500;color:#25c490;margin:0;">AI Agents</p>
|
|
<p style="font-size:12px;color:var(--text-secondary);margin:4px 0 0;">Purpose-built for your workflows</p>
|
|
</div>
|
|
<svg class="layer-arrow" width="16" height="16" viewBox="0 0 16 16"><path d="M6 4l4 4-4 4" fill="none" stroke="#1D9E75" stroke-width="1.5" stroke-linecap="round"/></svg>
|
|
</div>
|
|
<div class="layer-detail">
|
|
<div style="padding:12px;background:rgba(29,158,117,.08);border-radius:8px;font-size:13px;color:var(--text-secondary);line-height:1.6;">
|
|
<span class="layer-tag" style="background:rgba(29,158,117,.2);color:#25c490;">Included</span>
|
|
Agents that screen pitch decks, generate cost estimates, draft reports, process documents, and handle repetitive analysis. Each agent is trained on your domain — your terminology, your rules, your quality standards.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layer" style="background:#0d1720;border-left:3px solid #378ADD;" onclick="toggleLayer(this)">
|
|
<div style="display:flex;justify-content:space-between;align-items:center;">
|
|
<div>
|
|
<p style="font-size:15px;font-weight:500;color:#5EA8F0;margin:0;">Knowledge Base</p>
|
|
<p style="font-size:12px;color:var(--text-secondary);margin:4px 0 0;">Institutional memory that grows</p>
|
|
</div>
|
|
<svg class="layer-arrow" width="16" height="16" viewBox="0 0 16 16"><path d="M6 4l4 4-4 4" fill="none" stroke="#378ADD" stroke-width="1.5" stroke-linecap="round"/></svg>
|
|
</div>
|
|
<div class="layer-detail">
|
|
<div style="padding:12px;background:rgba(55,138,221,.08);border-radius:8px;font-size:13px;color:var(--text-secondary);line-height:1.6;">
|
|
<span class="layer-tag" style="background:rgba(55,138,221,.2);color:#5EA8F0;">Included</span>
|
|
Your documents, SOPs, pricing rules, templates, and past decisions — structured so agents actually use them. The knowledge base learns from every interaction. When an agent encounters a new pattern, it’s captured and available going forward.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layer" style="background:#1a1508;border-left:3px solid #BA7517;" onclick="toggleLayer(this)">
|
|
<div style="display:flex;justify-content:space-between;align-items:center;">
|
|
<div>
|
|
<p style="font-size:15px;font-weight:500;color:#D4942A;margin:0;">Integrations</p>
|
|
<p style="font-size:12px;color:var(--text-secondary);margin:4px 0 0;">Connected to your tools</p>
|
|
</div>
|
|
<svg class="layer-arrow" width="16" height="16" viewBox="0 0 16 16"><path d="M6 4l4 4-4 4" fill="none" stroke="#BA7517" stroke-width="1.5" stroke-linecap="round"/></svg>
|
|
</div>
|
|
<div class="layer-detail">
|
|
<div style="padding:12px;background:rgba(186,117,23,.08);border-radius:8px;font-size:13px;color:var(--text-secondary);line-height:1.6;">
|
|
<span class="layer-tag" style="background:rgba(186,117,23,.2);color:#D4942A;">Included</span>
|
|
Email, calendar, CRM, file storage, project management, messaging. Agents read from and write to the tools your team already uses. No copy-paste. No context switching.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layer" style="background:#170d1a;border-left:3px solid #9B59B6;" onclick="toggleLayer(this)">
|
|
<div style="display:flex;justify-content:space-between;align-items:center;">
|
|
<div>
|
|
<p style="font-size:15px;font-weight:500;color:#B87FCC;margin:0;">Human-in-the-Loop</p>
|
|
<p style="font-size:12px;color:var(--text-secondary);margin:4px 0 0;">Agents know when to escalate</p>
|
|
</div>
|
|
<svg class="layer-arrow" width="16" height="16" viewBox="0 0 16 16"><path d="M6 4l4 4-4 4" fill="none" stroke="#9B59B6" stroke-width="1.5" stroke-linecap="round"/></svg>
|
|
</div>
|
|
<div class="layer-detail">
|
|
<div style="padding:12px;background:rgba(155,89,182,.08);border-radius:8px;font-size:13px;color:var(--text-secondary);line-height:1.6;">
|
|
<span class="layer-tag" style="background:rgba(155,89,182,.2);color:#B87FCC;">Included</span>
|
|
Decisions needing human judgment get routed to the right person with full context via Telegram or email. Approve, reject, or modify — agents learn from your decisions.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layer" style="background:#1a0d0d;border-left:3px solid #C0392B;" onclick="toggleLayer(this)">
|
|
<div style="display:flex;justify-content:space-between;align-items:center;">
|
|
<div>
|
|
<p style="font-size:15px;font-weight:500;color:#E06050;margin:0;">Guardrails</p>
|
|
<p style="font-size:12px;color:var(--text-secondary);margin:4px 0 0;">Safety and audit built in</p>
|
|
</div>
|
|
<svg class="layer-arrow" width="16" height="16" viewBox="0 0 16 16"><path d="M6 4l4 4-4 4" fill="none" stroke="#C0392B" stroke-width="1.5" stroke-linecap="round"/></svg>
|
|
</div>
|
|
<div class="layer-detail">
|
|
<div style="padding:12px;background:rgba(192,57,43,.08);border-radius:8px;font-size:13px;color:var(--text-secondary);line-height:1.6;">
|
|
<span class="layer-tag" style="background:rgba(192,57,43,.2);color:#E06050;">Included</span>
|
|
PII detection, action gating, rate limiting, and complete audit trails. Read actions pass through. Write actions are reviewed. High-risk actions require your explicit approval.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layer" style="background:#0f1318;border-left:3px solid #5D6D7E;" onclick="toggleLayer(this)">
|
|
<div style="display:flex;justify-content:space-between;align-items:center;">
|
|
<div>
|
|
<p style="font-size:15px;font-weight:500;color:#8899AA;margin:0;">Managed Infrastructure</p>
|
|
<p style="font-size:12px;color:var(--text-secondary);margin:4px 0 0;">We handle the ops</p>
|
|
</div>
|
|
<svg class="layer-arrow" width="16" height="16" viewBox="0 0 16 16"><path d="M6 4l4 4-4 4" fill="none" stroke="#5D6D7E" stroke-width="1.5" stroke-linecap="round"/></svg>
|
|
</div>
|
|
<div class="layer-detail">
|
|
<div style="padding:12px;background:rgba(93,109,126,.08);border-radius:8px;font-size:13px;color:var(--text-secondary);line-height:1.6;">
|
|
<span class="layer-tag" style="background:rgba(93,109,126,.2);color:#8899AA;">Included</span>
|
|
Monitoring, updates, backups, scaling, SSL, DNS. Your data stays isolated on your own dedicated server. You never touch Docker, SSH, or API keys.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
function toggleLayer(el){
|
|
var panel=el.querySelector('.layer-detail');
|
|
var isOpen=panel.classList.contains('open');
|
|
document.querySelectorAll('.layer-detail.open').forEach(function(p){p.classList.remove('open');p.closest('.layer').classList.remove('active');});
|
|
if(!isOpen){panel.classList.add('open');el.classList.add('active');}
|
|
}
|
|
</script>
|
|
</section>
|
|
<section>
|
|
<div class="section-label">How we're different</div>
|
|
<h2 class="section-title">Not another AI tool. An AI operations layer.</h2>
|
|
<p class="section-desc"></p>
|
|
<div class="comparison">
|
|
<div class="comp-col"><h3>Not this</h3><ul><li>A chatbot bolted onto existing software</li><li>Multi-tenant SaaS with shared infrastructure</li><li>Generic AI that forgets everything between sessions</li><li>Per-seat pricing that punishes team growth</li><li>Vendor lock-in with no data portability</li></ul></div>
|
|
<div class="comp-col is-col"><h3>This</h3><ul><li>Purpose-built agents trained on your domain</li><li>Dedicated server — your data stays isolated</li><li>Knowledge base that grows with every interaction</li><li>Flat monthly fee — one box, unlimited use</li><li>You own everything — full data export anytime</li></ul></div>
|
|
</div>
|
|
</section>
|
|
<section>
|
|
<div class="section-label">Who it's for</div>
|
|
<h2 class="section-title">Built for teams that do real work</h2>
|
|
<p class="section-desc">We start with the workflows that cost you the most time and build agents that handle them end to end.</p>
|
|
<div class="vertical-list">
|
|
<div class="vertical"><span class="vertical-tag">FUNDS</span><div class="vertical-content"><h3>Investment & Project Finance</h3><p>Deal screening, pitch deck analysis, sponsor due diligence, claim verification. Our fund analyst platform caught a €1.37B fraud — fabricated carbon credits, SBLC patterns, virtual office holding companies. Every sponsor claim is unverified until independently cross-referenced.</p></div></div>
|
|
<div class="vertical"><span class="vertical-tag">SERVICE</span><div class="vertical-content"><h3>Service Businesses</h3><p>Cost estimation, job scheduling, client communications, quoting. Our landscape estimating tool generates real proposals from a 1,472-item materials catalog with automatic labor suggestions, three-document output (proposal, work order, job cost report), and margin analysis.</p></div></div>
|
|
<div class="vertical"><span class="vertical-tag">OPS</span><div class="vertical-content"><h3>Operations Teams</h3><p>Compliance automation, vendor management, document processing, SOP enforcement. Agents that know your procedures, flag exceptions, and route decisions to the right person — with a complete audit trail.</p></div></div>
|
|
</div>
|
|
</section>
|
|
<section>
|
|
<div class="section-label">How it works</div>
|
|
<h2 class="section-title">From zero to running in weeks, not months</h2>
|
|
<p class="section-desc"></p>
|
|
<div class="steps">
|
|
<div class="step"><h3>Discover</h3><p>We map your workflows, documents, pain points, and tools. You tell us what costs you the most time.</p></div>
|
|
<div class="step"><h3>Build</h3><p>We deploy your box and build agents trained on your domain. Week one delivers a working MVP you can interact with.</p></div>
|
|
<div class="step"><h3>Integrate</h3><p>We connect your email, CRM, calendar, and file storage. Agents work where your team already works.</p></div>
|
|
<div class="step"><h3>Iterate</h3><p>Agents get smarter as the knowledge base grows. We monitor, tune, and expand — your box improves every month.</p></div>
|
|
</div>
|
|
</section>
|
|
<section class="cta-section">
|
|
<h2>Ready to see what a box can do?</h2>
|
|
<p>30-minute discovery call. We'll map your highest-impact workflows and show you what agents can handle.</p>
|
|
<a href="mailto:hello@klongklong.com" class="hero-cta">Book a discovery call <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8h10m0 0L9 4m4 4L9 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
|
|
</section>
|
|
</div>
|
|
<div class="container">
|
|
<footer>
|
|
<span>© 2026 KlongKlong. Managed AI infrastructure.</span>
|
|
<a href="mailto:hello@klongklong.com">hello@klongklong.com</a>
|
|
</footer>
|
|
</div>
|
|
</body>
|
|
</html>
|