simbiot-harness/docs/simbiot-landing-v2-live.html

675 lines
40 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Simbiot — The Studio OS</title>
<meta name="description" content="Simbiot is the operating system for product studios: a dedicated AI team — engineers, video producers, content makers — plus the layer that runs projects, treasury, decisions and meetings. White-label, $999/mo flat.">
<meta property="og:title" content="Simbiot — The Studio OS">
<meta property="og:description" content="A dedicated AI team for your studio plus the OS that runs it: projects, treasury, decisions, meetings. White-label, flat rate.">
<meta property="og:url" content="https://simbiot.cil.by/">
<meta property="og:type" content="website">
<meta property="og:image" content="https://simbiot.cil.by/og.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Simbiot — The Studio OS">
<meta name="twitter:description" content="A dedicated AI team for your studio plus the OS that runs it: projects, treasury, decisions, meetings.">
<meta name="twitter:image" content="https://simbiot.cil.by/og.png">
<noscript><style>.reveal{opacity:1 !important;transform:none !important}</style></noscript>
<link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
:root{
--paper:#faf8f3; --paper2:#f2efe7; --ink:#1a1a18; --ink2:#55534b; --ink3:#6b685c;
--line:#e2ded2; --line2:#cfcabb;
--acc:#5b4be0; /* simbiot violet — single signal color */
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
section[id],header[id],div[id]{scroll-margin-top:80px}
body{font-family:'Inter Tight',system-ui,-apple-system,sans-serif;background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:hidden}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace}
.wrap{max-width:1240px;margin:0 auto;padding:0 32px}
/* ── nav ── */
nav{position:fixed;top:0;left:0;right:0;z-index:100;background:var(--paper);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;align-items:center;height:60px}
.logo{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:600;letter-spacing:-.3px}
.logo-mark{width:14px;height:14px;background:var(--acc)}
nav .links{margin-left:auto;display:flex;gap:28px;align-items:center}
nav .links a{color:var(--ink2);text-decoration:none;font-size:13.5px;font-weight:500}
nav .links a:hover{color:var(--ink)}
@media(max-width:760px){nav .links a:not(.btn){display:none}}
.btn{display:inline-block;background:var(--ink);color:#faf8f3;border:1px solid var(--ink);padding:14px 26px;font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:.8px;cursor:pointer;text-decoration:none;transition:background .15s,color .15s}
.btn:hover{background:var(--acc);border-color:var(--acc);color:#fff}
.btn-o{background:transparent;color:var(--ink)}
.btn-o:hover{background:var(--ink);color:#faf8f3}
.btn-sm{padding:9px 18px;font-size:12px}
/* ── hero ── */
.hero{padding:170px 0 100px;border-bottom:1px solid var(--line)}
/* ── included (v2, t-261002151244-03c0c4) ── */
.inc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.inc{background:var(--paper);padding:34px 30px;position:relative}
.inc .n{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--acc);letter-spacing:.1em;margin-bottom:18px}
.inc h3{font-size:16.5px;font-weight:600;letter-spacing:-.01em;margin-bottom:10px}
.inc p{font-size:14px;line-height:1.6;color:var(--ink2)}
.inc .tag{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);border:1px solid var(--line2);border-radius:999px;padding:4px 10px;margin-top:14px}
.seats-live{display:flex;align-items:center;gap:12px;margin-top:26px;padding:14px 20px;border:1px solid var(--acc);background:rgba(91,75,224,.05);font-size:14px;color:var(--ink2)}
.seats-live .dot{width:8px;height:8px;border-radius:50%;background:var(--acc);animation:pulse 2s infinite}
.seats-live b{color:var(--ink);font-size:16px}
.seats-live a{color:var(--acc);text-decoration:none;font-weight:500}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.hero .wrap{display:grid;grid-template-columns:1.25fr .85fr;gap:64px;align-items:start}
@media(max-width:980px){
.hero .wrap{grid-template-columns:1fr}
.inc-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
.inc-grid{grid-template-columns:1fr}
.seats-live{flex-wrap:wrap;padding:12px 16px}
}
.ops{border:1px solid var(--line2);background:#fff;padding:26px 26px 22px;margin-top:54px;min-width:0;overflow-wrap:anywhere}
.ops .hd{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink3);border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:14px;display:flex;justify-content:space-between}
.ops .hd b{color:var(--acc);font-weight:500;display:flex;align-items:center;gap:7px}
.ops .hd b::before{content:'';width:7px;height:7px;border-radius:50%;background:#1a7f4b;animation:blink 2s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
.ops .ft{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink3);border-top:1px solid var(--line);margin-top:14px;padding-top:12px;letter-spacing:.8px}
.ops .ln{font-family:'JetBrains Mono',monospace;font-size:13.5px;line-height:2.05;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ops .ln b{color:var(--ink);font-weight:500}
.ops .ln .g{color:#1a7f4b}
@media(max-width:980px){.ops{margin-top:8px}}
.eyebrow{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--ink3);margin-bottom:34px;display:flex;align-items:center;gap:12px}
.eyebrow::before{content:'';width:8px;height:8px;background:var(--acc)}
h1{font-size:clamp(44px,7.2vw,92px);font-weight:500;line-height:.98;letter-spacing:-.03em;max-width:1000px}
h1 em{font-style:normal;color:var(--acc)}
.hero .sub{font-size:19px;line-height:1.55;color:var(--ink2);max-width:560px;margin:36px 0 44px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.hero-meta{display:flex;gap:0;margin-top:90px;border:1px solid var(--line);flex-wrap:wrap}
.hm{flex:1;min-width:220px;padding:22px 26px;border-right:1px solid var(--line)}
.hm:last-child{border-right:none}
.hm .n{font-size:30px;font-weight:500;letter-spacing:-.02em}
.hm .l{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink3);text-transform:uppercase;letter-spacing:1.2px;margin-top:6px}
@media(max-width:700px){.hm{border-right:none;border-bottom:1px solid var(--line)}.hm:last-child{border-bottom:none}}
/* ── sections ── */
section{padding:110px 0;border-bottom:1px solid var(--line)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:64px;flex-wrap:wrap}
.sec-idx{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--ink3);letter-spacing:2px;text-transform:uppercase;margin-bottom:16px}
.sec-idx b{color:var(--acc);font-weight:500}
h2{font-size:clamp(30px,4.2vw,52px);font-weight:500;letter-spacing:-.025em;line-height:1.02}
.sec-sub{font-size:16.5px;color:var(--ink2);line-height:1.6;max-width:460px}
/* ── agents: spec rows ── */
.agent-row{display:grid;grid-template-columns:70px 220px 1fr 300px;gap:32px;padding:34px 0;border-top:1px solid var(--line);align-items:baseline}
.agent-row:last-child{border-bottom:1px solid var(--line)}
.agent-idx{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--ink3)}
.agent-name{font-size:26px;font-weight:500;letter-spacing:-.02em}
.agent-name span{display:block;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--acc);text-transform:uppercase;letter-spacing:1.5px;margin-top:6px;font-weight:500}
.agent-desc{font-size:15px;line-height:1.65;color:var(--ink2)}
.agent-tags{display:flex;gap:8px;flex-wrap:wrap}
.agent-tags span{font-family:'JetBrains Mono',monospace;font-size:11px;padding:5px 10px;border:1px solid var(--line2);color:var(--ink2)}
@media(max-width:900px){.agent-row{grid-template-columns:40px 1fr;gap:16px}.agent-desc,.agent-tags{grid-column:2}}
/* ── system grid ── */
.sys-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
@media(max-width:900px){.sys-grid{grid-template-columns:1fr}}
.sys{padding:34px 30px 40px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background .2s}
.sys:hover{background:var(--paper2)}
.sys .n{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--acc);letter-spacing:1.5px;margin-bottom:22px}
.sys h3{font-size:19px;font-weight:500;letter-spacing:-.01em;margin-bottom:10px}
.sys p{font-size:14px;color:var(--ink2);line-height:1.6}
/* ── loop ── */
.loop{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid var(--line)}
@media(max-width:900px){.loop{grid-template-columns:1fr}}
.lstep{padding:28px 24px 34px;border-right:1px solid var(--line)}
.lstep:last-child{border-right:none}
@media(max-width:900px){.lstep{border-right:none;border-bottom:1px solid var(--line)}.lstep:last-child{border-bottom:none}}
.lstep .n{font-family:'JetBrains Mono',monospace;font-size:24px;color:var(--ink);margin-bottom:16px}
.lstep h3{font-size:15.5px;font-weight:600;margin-bottom:8px}
.lstep p{font-size:13px;color:var(--ink2);line-height:1.55}
/* ── compare ── */
.cmp-grid{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line)}
@media(max-width:900px){.cmp-grid{grid-template-columns:1fr}}
.cmp{padding:44px 40px}
.cmp.a{border-right:1px solid var(--line);color:var(--ink2)}
@media(max-width:900px){.cmp.a{border-right:none;border-bottom:1px solid var(--line)}}
.cmp.b{background:var(--ink);color:var(--paper)}
.cmp .lbl{font-family:'JetBrains Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:26px}
.cmp.a .lbl{color:var(--ink3)}.cmp.b .lbl{color:#b9b3ff}
.cmp ul{list-style:none}
.cmp li{font-size:15px;padding:12px 0;line-height:1.5;display:grid;grid-template-columns:22px 1fr;gap:10px}
.cmp.a li{border-top:1px solid var(--line)}
.cmp.b li{border-top:1px solid #33322e}
.cmp li i{font-style:normal;font-family:'JetBrains Mono',monospace;font-size:13px;padding-top:2px}
.cmp.a li i{color:var(--ink3)}.cmp.b li i{color:var(--acc);filter:brightness(1.6)}
/* ── pricing ── */
.price-panel{display:grid;grid-template-columns:1.1fr 1fr;border:1px solid var(--ink);margin-top:8px}
@media(max-width:900px){.price-panel{grid-template-columns:1fr}}
.price-left{padding:52px 48px;border-right:1px solid var(--ink)}
@media(max-width:900px){.price-left{border-right:none;border-bottom:1px solid var(--ink)}}
.price-tag{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--acc);margin-bottom:26px}
.price-big{font-size:clamp(56px,7vw,88px);font-weight:500;letter-spacing:-.03em;line-height:1}
.price-big span{font-size:20px;color:var(--ink3);letter-spacing:0;font-weight:400}
.price-note{font-size:14.5px;color:var(--ink2);margin:18px 0 36px;line-height:1.6;max-width:380px}
.price-right{padding:52px 48px;background:var(--paper2)}
.price-right ul{list-style:none}
.price-right li{font-size:14.5px;color:var(--ink);padding:11px 0;border-top:1px solid var(--line2);display:grid;grid-template-columns:20px 1fr;gap:10px;line-height:1.5}
.price-right li:first-child{border-top:none}
.price-right li i{font-style:normal;color:var(--acc);font-family:'JetBrains Mono',monospace;font-size:12px;padding-top:3px}
.secure{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--ink3);margin-top:26px;letter-spacing:.4px}
.secure a{color:var(--acc);text-decoration:none}
/* ── cta ── */
.cta-sec{background:var(--ink);color:var(--paper);border-bottom:none}
.cta-sec h2{color:var(--paper);max-width:800px}
.cta-sec .sec-sub{color:#a5a29a;margin:22px 0 40px}
.cta-sec .btn{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.cta-sec .btn:hover{background:var(--acc);color:#fff;border-color:var(--acc)}
.cta-sec .btn-o{background:transparent;color:var(--paper);border-color:#45443f;margin-left:12px}
.cta-sec .btn-o:hover{border-color:var(--paper)}
footer{padding:34px 0;font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--ink3)}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px}
footer a{color:var(--ink2);text-decoration:none}
footer a:hover{color:var(--acc)}
/* ── modal (light) ── */
#planModal{display:none;position:fixed;inset:0;background:rgba(26,26,24,.55);z-index:999;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
#planModal .mbox{background:var(--paper);border:1px solid var(--ink);padding:44px;max-width:480px;width:92%}
.m-input{width:100%;padding:14px 16px;border:1px solid var(--line2);background:#fff;color:var(--ink);font-size:15px;font-family:inherit;margin-bottom:12px;box-sizing:border-box}
.m-input:focus{outline:none;border-color:var(--acc)}
.m-note{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink3);text-align:center;margin-top:14px;letter-spacing:.5px}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s,transform .6s}
.reveal.vis{opacity:1;transform:none}
/* improve-ui аудит (design-plans/simbiot-cilby-v2-audit.md): P1 focus, P2 motion */
.btn:focus-visible, a:focus-visible, button:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:2px}
@media(prefers-reduced-motion:reduce){
.reveal{opacity:1;transform:none;transition:none}
.seats-live .dot{animation:none}
*{scroll-behavior:auto}
}
/* ── SHOWCASE (live product): стили восстановлены из <noscript> — артефакт применения аудита t-261002151425, с JS секция была без стилей ── */
/* ═══ SHOWCASE (live product) — фикс: стилей не было ═══ */
.moc-grid{display:grid;grid-template-columns:1.4fr .9fr;gap:26px;align-items:start;border:1px solid var(--line);}
@media(max-width:980px){.moc-grid{grid-template-columns:1fr}}
.shot{background:#fff;border-bottom:1px solid var(--line);min-width:0}
.shot img{display:block;width:100%;height:auto;border:none}
.shot .bar,.chatwin .hd{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--paper2);font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.shot .bar i{width:9px;height:9px;border-radius:50%;background:var(--line2)}
.shot .bar i:first-child{background:#e35b4f}.shot .bar i:nth-child(2){background:#e2b13c}.shot .bar i:nth-child(3){background:#3d8f5f}
.shot .bar span{margin-left:auto}
.chatwin{background:#fff;border:none;min-width:0}
.chatwin .hd{border-bottom:1px solid var(--line)}
.chatwin .hd .dot{width:8px;height:8px;border-radius:50%;background:#1a7f4b;animation:pulse 2s infinite}
.chatbody{padding:18px 16px;display:flex;flex-direction:column;gap:12px;max-height:460px}
.msgl .b{position:relative;background:var(--paper2);border:1px solid var(--line);padding:10px 12px 10px 14px;font-size:13.5px;line-height:1.5;color:var(--ink)}
.msgl .b .t{display:block;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--ink3);margin-top:6px;letter-spacing:.05em}
.cap{padding:14px 18px;font-size:13px;line-height:1.55;color:var(--ink3);border-top:1px solid var(--line)}
</style>
</head>
<body>
<nav>
<div class="wrap">
<div class="logo"><span class="logo-mark"></span>Simbiot</div>
<div class="links">
<a href="#team">Team</a>
<a href="#system">System</a>
<a href="#pricing">Pricing</a>
<a href="https://cil.by/cabinet">Sign in</a>
<a href="#pricing" class="btn btn-sm">Get started</a>
</div>
</div>
</nav>
<!-- ═══ HERO ═══ -->
<header class="hero">
<div class="wrap">
<div>
<div class="eyebrow">Simbiot — Studio OS</div>
<h1>Hire nobody.<br>Ship <em>everything.</em></h1>
<p class="sub">Simbiot gives your studio a dedicated AI team — engineers, video producers, content makers — and the operating system that runs them: projects, treasury, decisions, meetings. White-label, under your brand.</p>
<div class="hero-cta">
<a href="#pricing" class="btn">Start your studio — $999/mo</a>
<a href="https://demo.cil.by/api/auth/demo-login" class="btn btn-o" style="display:none">Live demo</a>
</div>
</div>
<div class="ops">
<div class="hd"><span>STUDIO OPS</span><b>LIVE</b></div>
<div id="opsLines">
<div class="ln"><b>cody</b>&nbsp;&nbsp;&nbsp;▸ deployed neurocrm <span class="g">@2f3a1c</span></div>
<div class="ln"><b>reelsup</b>&nbsp;▸ rendered 6 clips → queue</div>
<div class="ln"><b>roy</b>&nbsp;&nbsp;&nbsp;▸ script v3 → voiceover RU</div>
<div class="ln"><b>os</b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;▸ treasury +$1,240 transfer</div>
<div class="ln"><b>os</b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;▸ decision #37 passed · quorum 3/3</div>
<div class="ln"><b>cody</b>&nbsp;&nbsp;&nbsp;▸ tests green — 41 passed</div>
<div class="ln"><b>os</b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;▸ digest sent · 09:00 Minsk</div>
</div>
<div class="ft">3 AGENTS ONLINE · UPTIME 99.2%</div>
</div>
</div>
</header>
<div style="border-bottom:1px solid var(--line)">
<div class="wrap hero-meta" style="border:none">
<div class="hm"><div class="n">12</div><div class="l">AI specialists per studio</div></div>
<div class="hm"><div class="n">5–7 days</div><div class="l">idea → working product</div></div>
<div class="hm"><div class="n">$999</div><div class="l">vs $60K agency MVP</div></div>
</div>
</div>
<!-- ═══ TEAM ═══ -->
<section id="team">
<div class="wrap">
<div class="sec-head reveal">
<div>
<div class="sec-idx"><b>01</b> — The team</div>
<h2>Not a chatbot.<br>A staff of specialists.</h2>
</div>
<p class="sec-sub">Every agent runs on a dedicated server with its own memory, tools, email and Matrix chat. You brief them like employees — they onboard onto your idea and start shipping.</p>
</div>
<div class="agent-row reveal">
<div class="agent-idx">/01</div>
<div class="agent-name">Cody<span>Engineer</span></div>
<div class="agent-desc">Writes code, deploys services, maintains your git repositories. MVPs, landing pages, bots, APIs, integrations — from brief to production.</div>
<div class="agent-tags"><span>FULL-STACK</span><span>DEVOPS</span><span>GIT</span></div>
</div>
<div class="agent-row reveal">
<div class="agent-idx">/02</div>
<div class="agent-name">ReelsUp<span>Video producer</span></div>
<div class="agent-desc">Cuts long videos and podcasts into vertical clips for Reels and Shorts. Transcription, AI highlight detection, automated editing.</div>
<div class="agent-tags"><span>WHISPER</span><span>CLIPS</span><span>SHORTS</span></div>
</div>
<div class="agent-row reveal">
<div class="agent-idx">/03</div>
<div class="agent-name">Roy<span>Content maker</span></div>
<div class="agent-desc">Produces promotional content on a conveyor: reels with 3D characters, scripts, voiceovers, visuals. Brand-consistent by default.</div>
<div class="agent-tags"><span>3D</span><span>TTS</span><span>SCRIPTS</span></div>
</div>
</div>
</section>
<!-- ═══ SYSTEM ═══ -->
<section id="system">
<div class="wrap">
<div class="sec-head reveal">
<div>
<div class="sec-idx"><b>02</b> — The system</div>
<h2>Agents build.<br>The OS manages.</h2>
</div>
<p class="sec-sub">Every studio needs an operating layer. Simbiot keeps projects, money, decisions and meetings in one transparent system — under your studio's name and domain.</p>
</div>
<div class="sys-grid reveal">
<div class="sys"><div class="n">S.01</div><h3>Project registry</h3><p>A card for every venture: key decisions, ownership, agents, activity feed. The whole portfolio at a glance.</p></div>
<div class="sys"><div class="n">S.02</div><h3>Git repo per project</h3><p>Code and docs live in a dedicated repository with a web editor. Nothing gets lost in chats.</p></div>
<div class="sys"><div class="n">S.03</div><h3>Treasury & wallets</h3><p>Revenue share flows into the treasury automatically. Every payout is transparent and auditable.</p></div>
<div class="sys"><div class="n">S.04</div><h3>Decisions & voting</h3><p>Allocate resources between projects by vote. Cycles, quorum, full decision history — governance built in.</p></div>
<div class="sys"><div class="n">S.05</div><h3>Meetings with AI minutes</h3><p>Built-in video calls with recording, transcription and summaries. Every decision lands in the registry.</p></div>
<div class="sys"><div class="n">S.06</div><h3>Time & task tracking</h3><p>What every agent completed, how much work went where — a daily digest in your inbox.</p></div>
</div>
</div>
</section>
<!-- ═══ LOOP ═══ -->
<section id="loop">
<div class="wrap">
<div class="sec-head reveal">
<div>
<div class="sec-idx"><b>03</b> — How it works</div>
<h2>The studio flywheel.</h2>
</div>
</div>
<div class="loop reveal">
<div class="lstep"><div class="n">1</div><h3>Hypothesis</h3><p>A partner registers a project: 7 decisions, studio share.</p></div>
<div class="lstep"><div class="n">2</div><h3>Voting</h3><p>Partners vote — the project gets priority and resources.</p></div>
<div class="lstep"><div class="n">3</div><h3>Agents build</h3><p>Engineer codes, producer cuts video, content ships.</p></div>
<div class="lstep"><div class="n">4</div><h3>Market test</h3><p>An MVP validates the hypothesis in days, not months.</p></div>
<div class="lstep"><div class="n">5</div><h3>Revenue → treasury</h3><p>The studio share flows back and funds the next projects.</p></div>
</div>
</div>
</section>
<!-- ═══ COMPARE ═══ -->
<section id="math">
<div class="wrap">
<div class="sec-head reveal">
<div>
<div class="sec-idx"><b>04</b> — The math</div>
<h2>Classic studio vs Simbiot.</h2>
</div>
</div>
<div class="cmp-grid reveal">
<div class="cmp a">
<div class="lbl">Without a system</div>
<ul>
<li><i>—</i>You're the CEO, dev team, marketer and accountant</li>
<li><i>—</i>2–3 months and $30–60K for an agency MVP</li>
<li><i>—</i>Operations scattered across spreadsheets and chats</li>
<li><i>—</i>Freelancers leave — and take the knowledge with them</li>
<li><i>—</i>Burnout before product-market fit</li>
</ul>
</div>
<div class="cmp b">
<div class="lbl">On Simbiot</div>
<ul>
<li><i>+</i>One AI team builds while you steer</li>
<li><i>+</i>Days from idea to working product</li>
<li><i>+</i>Projects, treasury, decisions, meetings — one OS</li>
<li><i>+</i>Code and knowledge stay in your repositories</li>
<li><i>+</i>Every task and decision is documented</li>
</ul>
</div>
</div>
</div>
</section>
<!-- ═══ PRODUCT SHOWCASE (t-261002151630): честные визуалы живого продукта ═══ -->
<section id="showcase">
<div class="wrap">
<div class="sec-head reveal">
<div>
<div class="sec-idx"><b>04·б</b> — The product</div>
<h2>This is the live product.<br>Not a mockup.</h2>
</div>
<p class="sec-sub">Real screens from our own production harness — the same one you get. Dashboard with the task ladder, chat with your agent right in the UI.</p>
</div>
<div class="moc-grid reveal">
<div class="shot">
<div class="bar"><i></i><i></i><i></i><span>simbiot dashboard — task ladder · live</span></div>
<img src="/static/dashboard-live.png" alt="Simbiot dashboard — задача-лестница, статусы, дайджесты (живой продукт)" loading="lazy">
<div class="cap">Dashboard: статус агентов, лестница задач S/M/L/XL, дайджесты часов. Живая прод-борда кооператива 42.</div>
</div>
<div class="chatwin">
<div class="hd"><span class="dot"></span>chat with simbiot · in-ui</div>
<div class="chatbody">
<div class="msgl"><div class="b">Тест из дашборда: ответь коротко, одним пре<span class="t">owner · 10 minutes ago</span></div></div>
<div class="msgl"><div class="b">Вижу тебя чётко, канал чат в дашборде работает — ответ ушёл в ленту ✅<span class="t">simbiot · now</span></div></div>
<div class="msgl"><div class="b">Прими задачу: редизайн секции pricing на лендинге<span class="t">owner</span></div></div>
<div class="msgl"><div class="b">Принято. Задача в лестнице [L]: аудит → план фиксов → применение → скрин до/после в чат.<span class="t">simbiot</span></div></div>
</div>
<div class="cap">Чат с агентом прямо в UI дашборда (t-261001100740): тот же канал, что Telegram — один разговор.</div>
</div>
</div>
</div>
</section>
<!-- ═══ INCLUDED ═══ -->
<section id="included">
<div class="wrap">
<div class="sec-head reveal">
<div>
<div class="sec-idx"><b>05</b> — What's included</div>
<h2>Full stack.<br>Nothing extra to buy.</h2>
</div>
<p class="sec-sub">Everything a product studio needs on day one — from payment rails to the agents themselves. No marketplace, no add-ons, no metered surprises.</p>
</div>
<div class="inc-grid reveal">
<div class="inc"><div class="n">01</div><h3>Stripe payments for your products</h3><p>Card payments for whatever your agents build — subscriptions, one-offs, invoices. Live Stripe account wired on day one: a working checkout, not a promise.</p><div class="tag">STRIPE LIVE</div></div>
<div class="inc"><div class="n">02</div><h3>AI inference included</h3><p>All model inference runs on our gateway — no API keys, no vendor bills to manage, no surprise invoices. Compute is part of the flat rate.</p><div class="tag">FLAT RATE</div></div>
<div class="inc"><div class="n">03</div><h3>White-label portal</h3><p>Your own subdomain, your studio's name and brand at the front. Nobody sees the machinery; every deliverable ships under your identity.</p><div class="tag">YOUR BRAND</div></div>
<div class="inc"><div class="n">04</div><h3>Agents: engineer, producer, content</h3><p>Staff of specialists that actually produces: an engineer for code, a producer for video/assembly, a content maker for marketing — plus more on demand.</p><div class="tag">12 SLOTS</div></div>
<div class="inc"><div class="n">05</div><h3>The Studio OS</h3><p>Projects, treasury with USDA wallets, decisions and voting, meetings with AI minutes, task tracking with daily digests — one transparent system.</p><div class="tag">PROJECTS · TREASURY · MEETINGS</div></div>
<div class="inc"><div class="n">06</div><h3>The agent harness</h3><p>The rhythm engine behind every agent: reflex, minute, hour, day — escalation, memory, semantic knowledge base. Coop-tested daily on our own runtime.</p><div class="tag">4-CADENCE RUNTIME</div></div>
</div>
<div class="seats-live reveal" id="seatsLive">
<span class="dot"></span>
<span>Founding cohort: <b id="seatsTaken">–</b> of 100 studios on board</span>
<a href="#pricing">See the plan →</a>
</div>
</div>
</section>
<!-- ═══ PRICING ═══ -->
<section id="pricing">
<div class="wrap">
<div class="sec-head reveal">
<div>
<div class="sec-idx"><b>06</b> — Pricing</div>
<h2>One plan.<br>Everything included.</h2>
</div>
<p class="sec-sub">Flat rate for product studios. Your whole team of AI agents and the OS to run them — no per-seat math.</p>
</div>
<div class="seats-live reveal" id="seatsLivePricing">
<span class="dot"></span>
<span><b id="seatsLeft">–</b> of 100 founding seats left · $99.9/mo personal · first come, first served</span>
</div>
<div class="price-panel reveal" style="margin-bottom:24px">
<div class="price-left">
<div class="price-tag">Personal</div>
<div class="price-big">$99.9<span> / month</span></div>
<p class="price-note">Your personal AI agent on its own server, with a private Matrix chat. Everything included — inference, hosting, updates. Zero lock-in: export everything with one click, anytime.</p>
<button class="btn" onclick="choosePlan('starter')" id="btnPersonal" style="width:100%">Get my agent</button>
<div class="secure">SECURE CHECKOUT BY STRIPE · CANCEL ANYTIME</div>
</div>
<div class="price-right">
<ul>
<li><i>+</i><span><strong>1 dedicated AI agent</strong> on its own server</span></li>
<li><i>+</i><span><strong>Private Matrix chat</strong> — web + Element X mobile</span></li>
<li><i>+</i><span>Inference, hosting and updates included</span></li>
<li><i>+</i><span><strong>One-click export</strong> — take everything with you, no lock-in</span></li>
<li><i>+</i><span>Ready in ~10 minutes after payment</span></li>
</ul>
</div>
</div>
<div class="price-panel reveal">
<div class="price-left">
<div class="price-tag">Studio</div>
<div class="price-big">$999<span> / month</span></div>
<p class="price-note">Your studio portal on your own subdomain, under your own name. Deployed the same day you pay.</p>
<button class="btn" onclick="choosePlan('pro')" id="btnPro" style="width:100%">Start your studio</button>
<div class="secure">SECURE CHECKOUT BY STRIPE · SELF-HOSTED / CUSTOM? <a href="mailto:portal@cil.by">TALK TO US</a></div>
</div>
<div class="price-right">
<ul>
<li><i>+</i><span><strong>12 AI agents</strong> — engineers, producers, content</span></li>
<li><i>+</i><span>White-label portal on your subdomain — your studio's brand</span></li>
<li><i>+</i><span>Projects, treasury, decisions, meetings — one system</span></li>
<li><i>+</i><span>Invite team members — free</span></li>
<li><i>+</i><span>Email + Matrix included; Telegram and more channels optional</span></li>
<li><i>+</i><span>Priority support & deployment</span></li>
<li><i>+</i><span>Cancel anytime</span></li>
</ul>
</div>
</div>
</div>
</section>
<!-- ═══ Plan modal ═══ -->
<div id="planModal">
<div class="mbox">
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:22px">
<h3 id="modalTitle" style="font-size:22px;font-weight:500;letter-spacing:-.02em">Get Started</h3>
<button onclick="closeModal()" style="background:none;border:none;color:var(--ink3);font-size:26px;cursor:pointer;line-height:1">×</button>
</div>
<div id="modalBody"></div>
</div>
</div>
<!-- ═══ CTA ═══ -->
<section class="cta-sec">
<div class="wrap">
<div class="sec-idx" style="color:#8f8c82"><b style="color:#b9b3ff">07</b> — Go</div>
<h2>Build a new kind of studio.</h2>
<p class="sec-sub">Already a member? Your billing cabinet shows subscription status and payment history.</p>
<a href="#pricing" class="btn">Start — $999/mo</a>
<a href="https://cil.by/cabinet" class="btn btn-o">Open my cabinet</a>
</div>
</section>
<footer>
<div class="wrap">
<span>© 2026 SIMBIOT · COOPERATIVE 42</span>
<span><a href="https://cil.by">CIL.BY</a> · <a href="https://demo.cil.by">DEMO</a> · <a href="https://cil.by/cabinet">CABINET</a> · <a href="https://simbiot.cil.by">SIMBIOT</a> · <a href="https://avatar.cil.by">AVATAR (VLAD)</a> · <a href="https://vybirai.cil.by">VYBIRAI (YURA)</a></span>
</div>
</footer>
<script>
const io = new IntersectionObserver(es => es.forEach(e => e.isIntersecting && e.target.classList.add('vis')), {threshold:.1});
document.querySelectorAll('.reveal').forEach(el => io.observe(el));
// живой счётчик мест предпродажи (t-261002151244): /api/presale/seats на cil.by
// (CORS allow-origin: simbiot.cil.by). taken → «studios on board», left = 100-taken.
// Фолбэк при недоступности API — блоки остаются с «–», не мигают и не врут.
async function seatsRefresh(){
try{
const r = await fetch('https://cil.by/api/presale/seats', {cache:'no-store'});
if(!r.ok) return;
const d = await r.json();
const taken = Math.max(0, Math.min(100, parseInt(d.taken,10) || 0));
const left = Math.max(0, (parseInt(d.total,10) || 100) - taken);
const st = document.getElementById('seatsTaken');
if(st) st.textContent = taken;
const sl = document.getElementById('seatsLeft');
if(sl) sl.textContent = left;
}catch(e){ /* тихо: сети нет — не драматизируем */ }
}
seatsRefresh();
setInterval(seatsRefresh, 60000);
// live ops log — новые строки каждые 3.2s
const OPS_FEED = [
'<b>reelsup</b>&nbsp;▸ clip 04/06 rendering…',
'<b>os</b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;▸ payout approved · vlad',
'<b>cody</b>&nbsp;&nbsp;&nbsp;▸ opened PR #112 → main',
'<b>roy</b>&nbsp;&nbsp;&nbsp;▸ 3D rig loaded · scene 2',
'<b>os</b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;▸ vote closed · cycle #38',
'<b>cody</b>&nbsp;&nbsp;&nbsp;▸ deployed clipforge <span class="g">@9be77d</span>',
'<b>reelsup</b>&nbsp;▸ transcript ready · 42 min',
'<b>os</b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;▸ treasury +$860 transfer',
'<b>roy</b>&nbsp;&nbsp;&nbsp;▸ exported reel_07.mp4',
'<b>cody</b>&nbsp;&nbsp;&nbsp;▸ migrated db · 3 tables',
];
let opsIdx = 0;
setInterval(() => {
const box = document.getElementById('opsLines');
if (!box) return;
const div = document.createElement('div');
div.className = 'ln';
div.innerHTML = OPS_FEED[opsIdx++ % OPS_FEED.length];
div.style.opacity = '0';
box.appendChild(div);
requestAnimationFrame(() => { div.style.transition = 'opacity .5s'; div.style.opacity = '1'; });
while (box.children.length > 7) box.removeChild(box.firstChild);
}, 3200);
async function subscribeNow(plan) {
plan = plan || 'pro';
const emailEl = document.getElementById('modalEmail');
const btn = document.getElementById('modalBtn');
const email = emailEl.value.trim();
const company = (document.getElementById('modalStudio')||{value:''}).value.trim();
const agentName = (document.getElementById('modalAgent')||{value:''}).value.trim();
if (!email || !email.includes('@')) { alert('Please enter your email'); return; }
btn.disabled = true;
btn.textContent = 'Starting...';
try {
const r = await fetch('https://cil.by/api/onboarding/start', {
method: 'POST', headers: {'Content-Type': 'application/json'},
body: JSON.stringify({email, plan})
});
const d = await r.json();
if (d.pending_id) {
await fetch('https://cil.by/api/onboarding/save', {
method: 'POST', headers: {'Content-Type': 'application/json'},
body: JSON.stringify(Object.assign({pending_id: d.pending_id, plan, company_name: company}, agentName ? {agent_name: agentName} : {}))
});
const cr = await fetch('https://cil.by/api/onboarding/checkout', {
method: 'POST', headers: {'Content-Type': 'application/json'},
body: JSON.stringify({pending_id: d.pending_id, plan})
});
const cd = await cr.json();
if (cd.url) { window.location.href = cd.url; return; }
alert(cd.error || 'Checkout error'); btn.disabled = false; btn.textContent = 'Continue'; return;
}
else { alert(d.error || 'Error'); btn.disabled = false; btn.textContent = 'Continue'; }
} catch(e) { alert('Connection error: ' + e.message); btn.disabled = false; btn.textContent = 'Continue'; }
}
function choosePlan(plan) {
const modal = document.getElementById('planModal');
const title = document.getElementById('modalTitle');
const body = document.getElementById('modalBody');
if (plan === 'enterprise') {
title.textContent = 'Enterprise — Request a Quote';
body.innerHTML = `
<p style="color:var(--ink2);margin-bottom:20px;font-size:14.5px;line-height:1.6">Tell us about your needs. We'll contact you within 24 hours.</p>
<input type="email" id="entEmail" placeholder="work@email.com" class="m-input">
<input type="text" id="entCompany" placeholder="Company name" class="m-input">
<input type="text" id="entAgents" placeholder="How many agents?" class="m-input">
<select id="entHosting" class="m-input">
<option value="self-hosted">Self-hosted (on-premise)</option>
<option value="cloud">Cloud (we host)</option>
<option value="hybrid">Hybrid</option>
</select>
<textarea id="entUseCase" placeholder="What do you want to build?" rows="3" class="m-input" style="resize:vertical"></textarea>
<button class="btn" onclick="submitEnterprise()" style="width:100%" id="entBtn">Submit Request</button>
<div id="entMsg" style="margin-top:12px"></div>
`;
} else if (plan === 'starter') {
title.textContent = 'Personal Agent — $99.9/mo';
body.innerHTML = `
<p style="color:var(--ink2);margin-bottom:20px;font-size:14.5px;line-height:1.6">Email and your name — then straight to payment. Your agent and private Matrix chat are ready ~10 minutes after.</p>
<input type="email" id="modalEmail" placeholder="your@email.com" class="m-input">
<input type="text" id="modalAgent" placeholder="Name your first agent (e.g. Anna)" class="m-input">
<input type="text" id="modalStudio" placeholder="How should we call you? (for your agent)" class="m-input" style="margin-bottom:18px">
<button class="btn" onclick="subscribeNow('starter')" style="width:100%" id="modalBtn">Continue</button>
<div class="m-note">SECURE CHECKOUT BY STRIPE · CANCEL ANYTIME</div>
`;
} else {
title.textContent = 'Studio — $999/mo';
body.innerHTML = `
<p style="color:var(--ink2);margin-bottom:20px;font-size:14.5px;line-height:1.6">Email and studio name — then straight to payment. Your portal is created right after.</p>
<input type="email" id="modalEmail" placeholder="your@email.com" class="m-input">
<input type="text" id="modalAgent" placeholder="Name your first agent (e.g. Anna)" class="m-input">
<input type="text" id="modalStudio" placeholder="Your studio name (white-label portal)" class="m-input" style="margin-bottom:18px">
<button class="btn" onclick="subscribeNow('${plan}')" style="width:100%" id="modalBtn">Continue</button>
<div class="m-note">SECURE CHECKOUT BY STRIPE</div>
`;
}
modal.style.display = 'flex';
}
function closeModal() {
document.getElementById('planModal').style.display = 'none';
}
async function submitEnterprise() {
const email = document.getElementById('entEmail').value.trim();
const btn = document.getElementById('entBtn');
if (!email || !email.includes('@')) { alert('Please enter your email'); return; }
btn.disabled = true; btn.textContent = 'Submitting...';
try {
const r = await fetch('https://cil.by/api/enterprise/request', {
method: 'POST', headers: {'Content-Type': 'application/json'},
body: JSON.stringify({
email,
company: document.getElementById('entCompany').value.trim(),
agents_needed: document.getElementById('entAgents').value.trim(),
hosting: document.getElementById('entHosting').value,
use_case: document.getElementById('entUseCase').value.trim()
})
});
const d = await r.json();
if (d.ok) {
document.getElementById('modalBody').innerHTML = `
<div style="text-align:center;padding:20px 0">
<h3 style="font-size:20px;margin-bottom:10px;font-weight:500">Request received.</h3>
<p style="color:var(--ink2);margin-bottom:26px;font-size:14.5px;line-height:1.6">We'll contact you at ${email} within 24 hours.</p>
<button class="btn" onclick="closeModal()" style="width:100%">Close</button>
</div>
`;
} else { alert(d.error || 'Error'); btn.disabled = false; btn.textContent = 'Submit Request'; }
} catch(e) { alert('Connection error: ' + e.message); btn.disabled = false; btn.textContent = 'Submit Request'; }
}
</script>
</body>
</html>