simbiot-harness/out/cil-by-compact-landing.html

373 lines
22 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="A dedicated AI team — engineers, video producers, content makers — plus the OS that runs projects, treasury, decisions and meetings. White-label, flat rate.">
<meta property="og:title" content="Simbiot — The Studio OS">
<meta property="og:description" content="Hire nobody. Ship everything. An AI team for your studio plus the OS that runs it.">
<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 name="twitter:card" content="summary_large_image">
<style>
/* ── fingerprint: offset rail · 660px measure · charcoal+lime · serif+mono · machined 4/10 · tinted panels · index motif · one entrance + state wash ── */
:root{
--bg:#0E100C; --panel:#151812; --panel2:#1A1E17;
--line:#272C22; --line2:#333A2C;
--ink:#E9ECE1; --dim:#ADB6A2; --faint:#7E8873;
--acc:#C9F24D; --acc-ink:#111408;
--ok:#7BD88F; --run:#E8C44A; --wait:#8A9382;
--serif:Georgia,'Iowan Old Style','Times New Roman',serif;
--mono:ui-monospace,'SF Mono','Cascadia Mono',Menlo,Consolas,'Liberation Mono',monospace;
--sans:-apple-system,system-ui,'Segoe UI',Roboto,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:2px}
.wrap{max-width:1060px;margin:0 auto;padding:0 22px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
/* ── left rail (desktop) ── */
.layout{display:grid;grid-template-columns:168px minmax(0,1fr);gap:44px;max-width:1060px;margin:0 auto;padding:26px 22px 0}
.rail{position:sticky;top:26px;align-self:start;display:flex;flex-direction:column;gap:22px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.rail .brand{display:flex;align-items:center;gap:9px;color:var(--ink);text-decoration:none;font-weight:600}
.rail .brand .dot{width:9px;height:9px;border-radius:50%;background:var(--acc);flex:none}
.rail nav{display:flex;flex-direction:column;gap:2px}
.rail nav a{color:var(--faint);text-decoration:none;padding:9px 10px 9px 0;min-height:36px;display:flex;align-items:center;border-bottom:1px solid var(--line)}
.rail nav a:hover{color:var(--ink)}
.rail .railnote{color:var(--faint);line-height:1.9;border-top:1px solid var(--line);padding-top:14px}
.rail .railnote b{color:var(--dim);font-weight:500}
/* top bar (mobile) */
.topbar{display:none}
/* ── buttons: compact scale (26px / 11.5px) ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:28px;padding:0 14px;border-radius:4px;border:1px solid var(--line2);background:var(--panel2);color:var(--ink);font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;cursor:pointer;min-height:40px}
.btn.primary{background:var(--acc);border-color:var(--acc);color:var(--acc-ink);font-weight:600}
.btn:focus-visible{outline-offset:1px}
@media(hover:hover) and (pointer:fine){.btn:hover{border-color:var(--acc)} .btn.primary:hover{filter:brightness(1.06)}}
.btn:active{transform:scale(.96)}
/* ── hero ── */
.hero{padding:30px 0 26px;border-bottom:1px solid var(--line)}
.kicker{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:18px}
.kicker .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ok);margin-right:8px}
h1{font-family:var(--serif);font-weight:400;font-size:clamp(38px,6vw,62px);line-height:1.04;letter-spacing:-.015em;max-width:14ch}
h1 em{font-style:italic;color:var(--acc)}
.lede{color:var(--dim);max-width:52ch;margin:18px 0 22px;font-size:15.5px}
.cta-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.cta-note{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--faint);text-transform:uppercase}
/* ── signature artifact: live task ladder ── */
.console{margin-top:30px;background:var(--panel);border:1px solid var(--line2);border-radius:10px;overflow:hidden}
.console .bar{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.console .bar .ticks{display:flex;gap:5px}
.console .bar .ticks i{width:8px;height:8px;border-radius:2px;background:var(--line2)}
.console .bar .live{margin-left:auto;display:flex;align-items:center;gap:7px;color:var(--dim)}
.console .bar .live i{width:7px;height:7px;border-radius:50%;background:var(--ok);animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}
.metric{padding:12px 14px;border-right:1px solid var(--line)}
.metric:last-child{border-right:none}
.metric .v{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:19px;color:var(--ink)}
.metric .v .u{color:var(--faint);font-size:12px}
.metric .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-top:3px}
.ladder{display:flex;flex-direction:column}
.trow{display:grid;grid-template-columns:52px minmax(0,1fr) 96px 88px;gap:12px;align-items:center;min-height:44px;padding:8px 14px;border-bottom:1px solid var(--line);font-size:13.5px;color:var(--dim);cursor:pointer;text-align:left;background:transparent;border-left:none;border-right:none;border-top:none;width:100%;font-family:var(--sans);transition:background-color .25s,color .25s}
.trow:last-child{border-bottom:none}
.trow:hover{background:var(--panel2);color:var(--ink)}
.trow .sz{font-family:var(--mono);font-size:11px;color:var(--faint)}
.trow .name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trow .name b{color:var(--ink);font-weight:600}
.trow .st{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--wait);display:flex;align-items:center;gap:7px}
.trow .st i{width:7px;height:7px;border-radius:50%;background:var(--wait);flex:none}
.trow[data-st="running"] .st{color:var(--run)} .trow[data-st="running"] .st i{background:var(--run)}
.trow[data-st="done"] .st{color:var(--ok)} .trow[data-st="done"] .st i{background:var(--ok)}
.trow .who{font-family:var(--mono);font-size:11px;color:var(--faint);text-align:right}
.console .foot{padding:9px 14px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);border-top:1px solid var(--line)}
.console .foot b{color:var(--dim);font-weight:500}
/* ── sections ── */
section{padding:44px 0;border-bottom:1px solid var(--line)}
.shead{display:flex;align-items:baseline;gap:14px;margin-bottom:22px}
.sidx{font-family:var(--mono);font-size:11px;color:var(--acc);letter-spacing:.1em}
h2{font-family:var(--serif);font-weight:400;font-size:clamp(24px,3.4vw,34px);line-height:1.12;letter-spacing:-.01em}
.snote{margin-left:auto;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.lead{color:var(--dim);max-width:56ch;margin:-8px 0 24px;font-size:15px}
/* team ledger (rows, not cards) */
.ledger{border:1px solid var(--line2);border-radius:10px;background:var(--panel);overflow:hidden}
.lrow{display:grid;grid-template-columns:44px minmax(0,1.1fr) minmax(0,1.4fr) 150px;gap:16px;padding:16px;border-bottom:1px solid var(--line);align-items:baseline}
.lrow:last-child{border-bottom:none}
.lrow .idx{font-family:var(--mono);font-size:11px;color:var(--faint)}
.lrow .nm{font-size:16px;font-weight:600}
.lrow .nm span{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--acc);margin-top:4px;font-weight:400}
.lrow .ds{color:var(--dim);font-size:13.5px}
.lrow .tags{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);text-align:right;line-height:2}
/* OS definition list */
.dl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 40px}
.dl .item{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;padding:15px 0;border-bottom:1px solid var(--line)}
.dl .item .k{font-family:var(--mono);font-size:10.5px;color:var(--acc);letter-spacing:.08em;padding-top:3px}
.dl .item .t{font-weight:600;font-size:14.5px}
.dl .item .d{color:var(--dim);font-size:13.5px;margin-top:3px}
/* included rows */
.inc{display:flex;flex-direction:column}
.inc .irow{display:grid;grid-template-columns:26px minmax(0,1fr);gap:14px;padding:13px 0;border-bottom:1px solid var(--line)}
.inc .irow:last-child{border-bottom:none}
.inc .mark{color:var(--acc);font-family:var(--mono);font-size:12px;padding-top:2px}
.inc .t{font-weight:600;font-size:14.5px}
.inc .t span{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-left:10px;font-weight:400}
.inc .d{color:var(--dim);font-size:13.5px;margin-top:2px}
/* pricing */
.plans{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
.plan{border:1px solid var(--line2);border-radius:10px;background:var(--panel);padding:22px;display:flex;flex-direction:column;gap:14px}
.plan.hot{border-color:var(--acc)}
.plan .pt{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.plan.hot .pt{color:var(--acc)}
.price{font-family:var(--serif);font-size:40px;line-height:1}
.price .per{font-family:var(--mono);font-size:12px;color:var(--faint);letter-spacing:.08em}
.plan ul{list-style:none;display:flex;flex-direction:column;gap:8px;color:var(--dim);font-size:13.5px}
.plan li{display:grid;grid-template-columns:18px 1fr;gap:10px}
.plan li::before{content:"▸";color:var(--acc);font-family:var(--mono);font-size:11px}
.plan .btn{margin-top:auto}
.plan .fine{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);text-align:center}
/* footer */
footer{padding:34px 0 46px}
.fgrid{display:flex;flex-wrap:wrap;gap:14px 30px;align-items:center;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.fgrid a{color:var(--dim);text-decoration:none;border-bottom:1px solid var(--line2)}
.fgrid a:hover{color:var(--acc);border-color:var(--acc)}
.fgrid .sp{margin-left:auto}
/* entrance: one reserved-space fade-up */
.in{opacity:0;transform:translateY(8px);animation:in .5s ease forwards}
.in.d1{animation-delay:.08s}.in.d2{animation-delay:.16s}.in.d3{animation-delay:.24s}
@keyframes in{to{opacity:1;transform:none}}
/* ── mobile: single column ── */
@media(max-width:860px){
.layout{grid-template-columns:minmax(0,1fr);gap:0;padding:0 16px}
.rail{display:none}
.topbar{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.topbar .brand{display:flex;align-items:center;gap:8px;color:var(--ink);text-decoration:none;font-weight:600;margin-right:auto}
.topbar .brand .dot{width:8px;height:8px;border-radius:50%;background:var(--acc)}
.topbar .btn{min-height:40px;height:28px}
.wrap{padding:0 16px}
.layout > main{padding:0}
.hero,.layout main section,.layout main footer{padding-left:0;padding-right:0}
.metrics{grid-template-columns:repeat(3,minmax(0,1fr))}
.metric .v{font-size:15px}
.trow{grid-template-columns:38px minmax(0,1fr) 84px;gap:8px;padding:10px 12px}
.trow .who{display:none}
.lrow{grid-template-columns:minmax(0,1fr);gap:6px;padding:14px 16px}
.lrow .tags{text-align:left;line-height:1.9}
.dl{grid-template-columns:minmax(0,1fr)}
.plans{grid-template-columns:minmax(0,1fr)}
h1{font-size:clamp(34px,9vw,44px)}
}
@media(prefers-reduced-motion:reduce){
*{animation:none!important;transition:none!important}
.in{opacity:1;transform:none}
html{scroll-behavior:auto}
}
</style>
</head>
<body>
<header class="topbar">
<a class="brand" href="#top"><span class="dot"></span>Simbiot</a>
<a class="btn" href="https://cil.by/cabinet">Sign in</a>
<a class="btn primary" href="https://simbiot.cil.by/#pricing">Get started</a>
</header>
<div class="layout" id="top">
<aside class="rail">
<a class="brand" href="#top"><span class="dot"></span>Simbiot</a>
<nav aria-label="Sections">
<a href="#team">Team</a>
<a href="#os">The OS</a>
<a href="#included">Included</a>
<a href="#pricing">Pricing</a>
</nav>
<div class="railnote">
<b>Coop 42</b> runtime<br>
reflex · minute<br>
hour · day<br><br>
<a class="btn" style="margin-top:10px" href="https://cil.by/cabinet">Sign in</a>
</div>
</aside>
<main>
<!-- 00 · hero + live ladder -->
<div class="hero">
<p class="kicker in"><span class="dot"></span>Studio OS · live</p>
<h1 class="in d1">Hire nobody.<br><em>Ship everything.</em></h1>
<p class="lede in d2">A dedicated AI team — engineers, video producers, content makers — plus the operating system that runs them: projects, treasury, decisions, meetings. White-label, under your brand.</p>
<div class="cta-row in d3">
<a class="btn primary" href="https://simbiot.cil.by/#pricing">Start your studio — $999/mo</a>
<a class="btn" href="https://demo.cil.by">Live demo</a>
<span class="cta-note">flat rate · cancel anytime</span>
</div>
<div class="console in d3" aria-label="Live task ladder demo">
<div class="bar">
<span class="ticks" aria-hidden="true"><i></i><i></i><i></i></span>
<span>studio ops · task ladder</span>
<span class="live"><i></i>3 agents online</span>
</div>
<div class="metrics">
<div class="metric"><div class="v" id="mDone">4<span class="u"> done</span></div><div class="k">tasks this cycle</div></div>
<div class="metric"><div class="v">4<span class="u">-cadence</span></div><div class="k">reflex→day runtime</div></div>
<div class="metric"><div class="v">S·M·L</div><div class="k">task sizes</div></div>
</div>
<div class="ladder" id="ladder"></div>
<div class="foot">hour digest 23:10 Minsk · <b>all actions signed</b> · click a row to re-dispatch</div>
</div>
</div>
<!-- 01 · team -->
<section id="team">
<div class="shead"><span class="sidx">01</span><h2>A staff of specialists, not a chatbot.</h2><span class="snote">dedicated servers</span></div>
<p class="lead">Every agent runs on its own server with private memory, tools, email and Matrix chat. You brief them like employees — they onboard onto your idea and start shipping.</p>
<div class="ledger">
<div class="lrow">
<span class="idx">/01</span>
<div class="nm">Cody<span>Engineer</span></div>
<div class="ds">Writes code, deploys services, maintains git repositories. MVPs, landing pages, bots, APIs, integrations — from brief to production.</div>
<div class="tags">full-stack · devops · git</div>
</div>
<div class="lrow">
<span class="idx">/02</span>
<div class="nm">ReelsUp<span>Video producer</span></div>
<div class="ds">Cuts long videos and podcasts into vertical clips for Reels and Shorts. Transcription, highlight detection, automated editing.</div>
<div class="tags">whisper · clips · shorts</div>
</div>
<div class="lrow">
<span class="idx">/03</span>
<div class="nm">Roy<span>Content maker</span></div>
<div class="ds">Promotional content on a conveyor: reels with 3D characters, scripts, voiceovers, visuals — brand-consistent by default.</div>
<div class="tags">3d · tts · scripts</div>
</div>
</div>
</section>
<!-- 02 · the os -->
<section id="os">
<div class="shead"><span class="sidx">02</span><h2>Agents build. The OS manages.</h2><span class="snote">your domain</span></div>
<p class="lead">Projects, money, decisions and meetings in one transparent system — under your studio's name.</p>
<div class="dl">
<div class="item"><span class="k">S.01</span><div><div class="t">Project registry</div><div class="d">A card for every venture: decisions, ownership, agents, activity feed.</div></div></div>
<div class="item"><span class="k">S.02</span><div><div class="t">Git repo per project</div><div class="d">Code and docs in a dedicated repository with a web editor. Nothing lost in chats.</div></div></div>
<div class="item"><span class="k">S.03</span><div><div class="t">Treasury &amp; wallets</div><div class="d">Revenue share flows in automatically. Every payout transparent and auditable.</div></div></div>
<div class="item"><span class="k">S.04</span><div><div class="t">Decisions &amp; voting</div><div class="d">Allocate resources by vote. Cycles, quorum, full decision history.</div></div></div>
<div class="item"><span class="k">S.05</span><div><div class="t">Meetings with AI minutes</div><div class="d">Video calls with recording, transcription, summaries — into the registry.</div></div></div>
<div class="item"><span class="k">S.06</span><div><div class="t">Time &amp; task tracking</div><div class="d">What every agent completed and where work went — a daily digest in your inbox.</div></div></div>
</div>
</section>
<!-- 03 · included -->
<section id="included">
<div class="shead"><span class="sidx">03</span><h2>Full stack. Nothing extra to buy.</h2><span class="snote">flat rate</span></div>
<div class="inc">
<div class="irow"><span class="mark">✓</span><div><div class="t">Stripe payments <span>live</span></div><div class="d">Card payments for what your agents build — subscriptions, one-offs, invoices. A working checkout on day one.</div></div></div>
<div class="irow"><span class="mark">✓</span><div><div class="t">AI inference included <span>flat</span></div><div class="d">All models run on our gateway — no API keys, no vendor bills, no metered surprises.</div></div></div>
<div class="irow"><span class="mark">✓</span><div><div class="t">White-label portal <span>your brand</span></div><div class="d">Your subdomain, your studio's name up front. Every deliverable ships under your identity.</div></div></div>
<div class="irow"><span class="mark">✓</span><div><div class="t">The agent harness <span>4-cadence</span></div><div class="d">Reflex, minute, hour, day — escalation, memory, semantic knowledge base. Coop-tested daily.</div></div></div>
<div class="irow"><span class="mark">✓</span><div><div class="t">One-click export <span>no lock-in</span></div><div class="d">Take everything with you, anytime. Ready in ~10 minutes after payment.</div></div></div>
</div>
</section>
<!-- 04 · pricing -->
<section id="pricing">
<div class="shead"><span class="sidx">04</span><h2>One plan each. Everything included.</h2><span class="snote">founding cohort</span></div>
<div class="plans">
<div class="plan hot">
<div class="pt">Personal · first come</div>
<div class="price">$99.9 <span class="per">/ month</span></div>
<ul>
<li>1 dedicated AI agent on its own server</li>
<li>Private Matrix chat — web + mobile</li>
<li>Inference, hosting, updates included</li>
<li>One-click export, no lock-in</li>
</ul>
<a class="btn primary" href="https://simbiot.cil.by/#pricing">Get my agent</a>
<div class="fine">secure checkout by Stripe · cancel anytime</div>
</div>
<div class="plan">
<div class="pt">Studio</div>
<div class="price">$999 <span class="per">/ month</span></div>
<ul>
<li>12 AI agents — engineers, producers, content</li>
<li>White-label portal on your subdomain</li>
<li>Projects, treasury, decisions, meetings — one system</li>
<li>Team members free · priority support</li>
</ul>
<a class="btn" href="https://simbiot.cil.by/#pricing">Start your studio</a>
<div class="fine">deployed the same day · self-hosted? talk to us</div>
</div>
</div>
</section>
<footer>
<div class="fgrid">
<span>© 2026 Simbiot · Cooperative 42</span>
<a href="https://demo.cil.by">Demo</a>
<a href="https://cil.by/cabinet">Cabinet</a>
<a href="mailto:portal@cil.by">portal@cil.by</a>
<span class="sp">cil.by</span>
</div>
</footer>
</main>
</div>
<script>
/* signature artifact: a miniature of the real task ladder.
Reserved geometry: rows are pre-rendered, only state cell swaps. */
(function(){
var TASKS=[
{sz:'L', name:'Redesign pricing section copy', who:'cody'},
{sz:'M', name:'Weekly digest to stakeholders', who:'os'},
{sz:'S', name:'Fix og-image on landing', who:'cody'},
{sz:'M', name:'Escalation: router burn > budget', who:'os'}
];
var ST=['queued','running','done'], LABEL={queued:'queued',running:'running',done:'done'};
var states=[1,0,2,1], doneCount=4, ladder=document.getElementById('ladder');
if(!ladder) return;
var reduced=window.matchMedia&&window.matchMedia('(prefers-reduced-motion: reduce)').matches;
var rows=TASKS.map(function(t,i){
var b=document.createElement('button');
b.type='button'; b.className='trow'; b.setAttribute('data-st',LABEL[states[i]]);
b.setAttribute('aria-label',t.name+' — '+LABEL[states[i]]+'. Re-dispatch.');
b.innerHTML='<span class="sz">['+t.sz+']</span>'+
'<span class="name"><b>'+t.name+'</b></span>'+
'<span class="st"><i></i>'+LABEL[states[i]]+'</span>'+
'<span class="who">'+t.who+'</span>';
b.addEventListener('click',function(){step(i);});
ladder.appendChild(b);
return b;
});
function paint(i){
var s=LABEL[states[i]];
rows[i].setAttribute('data-st',s);
rows[i].getElementsByClassName('st')[0].innerHTML='<i></i>'+s;
}
function step(i){
if(states[i]===2){states[i]=1;paint(i);return}
if(states[i]===1){states[i]=2;doneCount++;var m=document.getElementById('mDone');
if(m)m.innerHTML=doneCount+'<span class="u"> done</span>';paint(i);return}
states[i]=1;paint(i);
}
var cur=0;
function tick(){ if(states[cur]!==2){step(cur);} cur=(cur+1)%TASKS.length; }
if(!reduced){ var t=setInterval(tick,2200); document.addEventListener('visibilitychange',function(){ document.hidden?clearInterval(t):t=setInterval(tick,2200); }); }
})();
</script>
</body>
</html>