675 lines
40 KiB
HTML
675 lines
40 KiB
HTML
<!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> ▸ deployed neurocrm <span class="g">@2f3a1c</span></div>
|
||
<div class="ln"><b>reelsup</b> ▸ rendered 6 clips → queue</div>
|
||
<div class="ln"><b>roy</b> ▸ script v3 → voiceover RU</div>
|
||
<div class="ln"><b>os</b> ▸ treasury +$1,240 transfer</div>
|
||
<div class="ln"><b>os</b> ▸ decision #37 passed · quorum 3/3</div>
|
||
<div class="ln"><b>cody</b> ▸ tests green — 41 passed</div>
|
||
<div class="ln"><b>os</b> ▸ 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></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> ▸ clip 04/06 rendering…',
|
||
'<b>os</b> ▸ payout approved · vlad',
|
||
'<b>cody</b> ▸ opened PR #112 → main',
|
||
'<b>roy</b> ▸ 3D rig loaded · scene 2',
|
||
'<b>os</b> ▸ vote closed · cycle #38',
|
||
'<b>cody</b> ▸ deployed clipforge <span class="g">@9be77d</span>',
|
||
'<b>reelsup</b> ▸ transcript ready · 42 min',
|
||
'<b>os</b> ▸ treasury +$860 transfer',
|
||
'<b>roy</b> ▸ exported reel_07.mp4',
|
||
'<b>cody</b> ▸ 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>
|