feat(landing): Simbiot landing by GLM via opencode (t-261005113818)
This commit is contained in:
root
parent
2a2d68e324
commit
bfe48e2133
4 changed files with 1187 additions and 0 deletions
84
sites/landing/BRIEF.md
Normal file
84
sites/landing/BRIEF.md
Normal file
|
|
@ -0,0 +1,84 @@
|
||||||
|
# Brief: Simbiot Cooperative Landing Page
|
||||||
|
|
||||||
|
You are building a static marketing landing page for **Simbiot** — a technology cooperative.
|
||||||
|
Work ONLY inside `sites/landing/`. Do not touch any other files in this repository.
|
||||||
|
|
||||||
|
## Deliverables
|
||||||
|
|
||||||
|
1. `index.html` — self-contained landing page (CSS in `styles.css` or inline `<style>` — no external CDN, no build tools, no JS frameworks; vanilla JS only if truly needed).
|
||||||
|
2. `styles.css` — if not inlined.
|
||||||
|
3. `README.md` — 5–10 lines: what's here, how to open/serve.
|
||||||
|
|
||||||
|
**Hard rules**
|
||||||
|
- NO placeholders: no "lorem ipsum", no "TODO", no "Coming soon", no fake stats, no empty sections.
|
||||||
|
- Real content only, taken from the facts below. Every section must be complete and readable.
|
||||||
|
- Semantic HTML5, responsive (mobile-first), accessible (alt-texts, contrast, focus states).
|
||||||
|
- Modern dark aesthetic fitting a systems/infrastructure product; tasteful accents, no gradient soup.
|
||||||
|
- Open graph/meta tags + favicon via inline SVG data-URI.
|
||||||
|
|
||||||
|
## Facts about Simbiot (use these, do not invent numbers)
|
||||||
|
|
||||||
|
### What it is
|
||||||
|
Simbiot is a **rhythmic agent harness** — an AI agent that lives by ticks like a living organism,
|
||||||
|
built on CQRS + Event Sourcing, with Strands Harness SDK as its executive core. It runs for a
|
||||||
|
cooperative (org) — not a chatbot: it works by itself on a schedule, reports digests on time,
|
||||||
|
escalates what it cannot safely decide, and executes with real tools (shell, files, knowledge
|
||||||
|
search).
|
||||||
|
|
||||||
|
### The ladder (how it works)
|
||||||
|
| Level | Interval | Context | Job |
|
||||||
|
|---|---|---|---|
|
||||||
|
| sec | 1 s | none | reflexes: telemetry, alerts |
|
||||||
|
| min | 1 min | 256K | triage: incoming messages, quick fixes |
|
||||||
|
| hour | 1 h | 512K | S/M tasks, hourly digest |
|
||||||
|
| day | 1 d | 1M | M/L tasks, day manifest |
|
||||||
|
|
||||||
|
Every tick is idempotent; busy levels absorb ticks; only digests travel upward.
|
||||||
|
|
||||||
|
### Cooperative portal
|
||||||
|
The org-wide layer: shared task board & projects, knowledge bases with semantic search (RAG),
|
||||||
|
meeting & decision protocols, REST API + MCP gateway with per-agent tokens, live task dashboard
|
||||||
|
(statuses, escalations, digests, spend), direct chat with your agent (batch replies + voice),
|
||||||
|
event subscriptions so agents react proactively.
|
||||||
|
|
||||||
|
### Trust & engineering
|
||||||
|
- Every event is signed (ed25519) and hash-chained (tamper-evident log); `verify` walks the full chain.
|
||||||
|
- Idempotent delivery: no duplicate notifications, retries are safe.
|
||||||
|
- Escalation ladder: what an agent can't decide safely goes up with full context.
|
||||||
|
|
||||||
|
### Offer (presale)
|
||||||
|
- **Your own Simbiot harness** — the same system the cooperative runs in production, not a cut-down demo.
|
||||||
|
- Subscription **$100/mo** — one price everywhere, no discounts (single honest number).
|
||||||
|
- **10 presale seats** — urgency comes from the seat limit, not from discounts.
|
||||||
|
- Included: harness + cooperative portal + agent deployment/onboarding (delivery within the month
|
||||||
|
of purchase), task dashboard, chat with your agent, event subscriptions, priority support,
|
||||||
|
ongoing updates while subscribed.
|
||||||
|
- LLM backend through the cooperative's router (same as production); base quotas included.
|
||||||
|
- Not included: custom contract development, personal SLA guarantees, third-party billing.
|
||||||
|
|
||||||
|
### Install (open source core)
|
||||||
|
```bash
|
||||||
|
curl -fsSL https://raw.cil.by/simbiot/install.sh | bash
|
||||||
|
```
|
||||||
|
|
||||||
|
### Links / CTA
|
||||||
|
- Portal & coop: **https://cil.by**
|
||||||
|
- Presale contact via the portal or cooperative chat.
|
||||||
|
|
||||||
|
## Page structure (suggested)
|
||||||
|
1. Header/nav (logo "Simbiot", anchors: Product / How it works / Portal / Presale / FAQ) + CTA button.
|
||||||
|
2. Hero: one-sentence value prop + sub + install command in a copyable code block + CTA.
|
||||||
|
3. "What it is" — rhythmic agent vs chatbot, short bullets.
|
||||||
|
4. "How it works" — the ladder table or cards (sec/min/hour/day).
|
||||||
|
5. Portal features — grid of 5–6 cards.
|
||||||
|
6. Trust section — signed event chain, idempotency, escalations.
|
||||||
|
7. Presale offer — $100/mo, 10 seats, what's included / honest boundaries.
|
||||||
|
8. FAQ (4–6 real questions answered from facts above).
|
||||||
|
9. Footer — cooperative links, install one-liner, small print.
|
||||||
|
|
||||||
|
Language: English (public page). Tone: precise, engineering-grade, no hype adjectives.
|
||||||
|
|
||||||
|
## Self-check before finishing
|
||||||
|
- `index.html` opens standalone (double-click) with styles applied.
|
||||||
|
- grep the files: no "TODO", no "lorem", no "placeholder", no empty `{}` sections.
|
||||||
|
- All internal anchors resolve; no dead links except https://cil.by.
|
||||||
14
sites/landing/README.md
Normal file
14
sites/landing/README.md
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
# Simbiot — landing page
|
||||||
|
|
||||||
|
Static marketing page for the Simbiot rhythmic agent harness (technology cooperative).
|
||||||
|
|
||||||
|
- `index.html` — the page: semantic HTML5, dark theme, fully self-contained
|
||||||
|
- `styles.css` — all styling (mobile-first, no frameworks, no CDNs)
|
||||||
|
- `BRIEF.md` — the source brief this page implements
|
||||||
|
|
||||||
|
Open `index.html` directly in a browser, or serve locally:
|
||||||
|
|
||||||
|
python3 -m http.server 8000
|
||||||
|
|
||||||
|
No build step and no JS framework — just one inline copy-to-clipboard script
|
||||||
|
for the install command. The only external link is https://cil.by.
|
||||||
401
sites/landing/index.html
Normal file
401
sites/landing/index.html
Normal file
|
|
@ -0,0 +1,401 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<title>Simbiot — a rhythmic agent harness</title>
|
||||||
|
<meta name="description" content="Simbiot is a rhythmic agent harness: an AI agent that lives by ticks, works by itself on a schedule, reports digests, and escalates what it cannot safely decide.">
|
||||||
|
<link rel="canonical" href="https://cil.by/">
|
||||||
|
<meta name="color-scheme" content="dark">
|
||||||
|
<meta name="theme-color" content="#0b0f14">
|
||||||
|
<meta property="og:type" content="website">
|
||||||
|
<meta property="og:site_name" content="Simbiot">
|
||||||
|
<meta property="og:url" content="https://cil.by/">
|
||||||
|
<meta property="og:title" content="Simbiot — a rhythmic agent harness">
|
||||||
|
<meta property="og:description" content="An AI agent that lives by ticks like a living organism. CQRS + Event Sourcing. Signed, hash-chained events. Runs for a cooperative.">
|
||||||
|
<meta name="twitter:card" content="summary">
|
||||||
|
<meta name="twitter:title" content="Simbiot — a rhythmic agent harness">
|
||||||
|
<meta name="twitter:description" content="An AI agent that lives by ticks like a living organism. CQRS + Event Sourcing. Signed, hash-chained events. Runs for a cooperative.">
|
||||||
|
<link rel="icon" href="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2032%2032'%3E%3Crect%20width='32'%20height='32'%20rx='7'%20fill='%230b0f14'/%3E%3Cpath%20d='M5%2018h5l2-7%204%2013%203-9%202%203h6'%20fill='none'%20stroke='%235eead4'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E">
|
||||||
|
<link rel="stylesheet" href="styles.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<a class="skip-link" href="#main">Skip to content</a>
|
||||||
|
|
||||||
|
<header class="site-header">
|
||||||
|
<div class="container header-inner">
|
||||||
|
<a class="brand" href="#top">
|
||||||
|
<svg class="brand-mark" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 12h4l2-5 4 10 3-7 2 2h5"/></svg>
|
||||||
|
Simbiot
|
||||||
|
</a>
|
||||||
|
<nav aria-label="Primary">
|
||||||
|
<ul class="nav-links">
|
||||||
|
<li><a href="#product">Product</a></li>
|
||||||
|
<li><a href="#how-it-works">How it works</a></li>
|
||||||
|
<li><a href="#portal">Portal</a></li>
|
||||||
|
<li><a href="#presale">Presale</a></li>
|
||||||
|
<li><a href="#faq">FAQ</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<a class="btn btn-primary btn-sm" href="https://cil.by">Join presale</a>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main id="main">
|
||||||
|
|
||||||
|
<section class="hero" id="top" aria-labelledby="hero-title">
|
||||||
|
<div class="container">
|
||||||
|
<p class="eyebrow">Technology cooperative · <a href="https://cil.by">cil.by</a></p>
|
||||||
|
<h1 id="hero-title">An AI agent that lives by ticks, not prompts.</h1>
|
||||||
|
<p class="lead">Simbiot is a rhythmic agent harness built on CQRS + Event Sourcing, with the Strands Harness SDK as its executive core. It works by itself on a schedule, reports digests on time, escalates what it cannot safely decide — and executes with real tools: shell, files, knowledge search.</p>
|
||||||
|
|
||||||
|
<div class="install">
|
||||||
|
<div class="install-bar">
|
||||||
|
<span class="install-label">install · open-source core</span>
|
||||||
|
<button class="copy-btn" type="button" data-copy="install-cmd" aria-label="Copy install command"><span>copy</span></button>
|
||||||
|
</div>
|
||||||
|
<div class="install-body">
|
||||||
|
<span class="prompt" aria-hidden="true">$</span>
|
||||||
|
<code id="install-cmd">curl -fsSL https://raw.cil.by/simbiot/install.sh | bash</code>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="cta-row">
|
||||||
|
<a class="btn btn-primary" href="https://cil.by">Join the presale</a>
|
||||||
|
<a class="btn btn-ghost" href="#how-it-works">How it works</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="hero-meta">
|
||||||
|
<span class="chip">open-source core</span>
|
||||||
|
<span class="chip">presale · 10 seats</span>
|
||||||
|
<span class="chip">$100/mo — one price</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section" id="product" aria-labelledby="product-title">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-head">
|
||||||
|
<p class="eyebrow">Product</p>
|
||||||
|
<h2 id="product-title">Not a chatbot</h2>
|
||||||
|
<p class="section-lead">A chatbot answers when you ask. Simbiot is built the other way around: an agent that runs for a cooperative, on its own schedule.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="compare">
|
||||||
|
<article class="compare-card">
|
||||||
|
<h3>A chatbot <span class="compare-tag">prompt-driven</span></h3>
|
||||||
|
<ul>
|
||||||
|
<li>Waits for you to open the tab</li>
|
||||||
|
<li>Acts only when prompted</li>
|
||||||
|
<li>Context starts and ends with the conversation</li>
|
||||||
|
<li>You do the remembering and the follow-up</li>
|
||||||
|
</ul>
|
||||||
|
</article>
|
||||||
|
<article class="compare-card sim">
|
||||||
|
<h3>Simbiot <span class="compare-tag">tick-driven</span></h3>
|
||||||
|
<ul>
|
||||||
|
<li>Works by itself, on a schedule — ticks like a living organism</li>
|
||||||
|
<li>Reports digests on time</li>
|
||||||
|
<li>Escalates what it cannot safely decide</li>
|
||||||
|
<li>Executes with real tools: shell, files, knowledge search</li>
|
||||||
|
</ul>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="chips-label">Built on:</p>
|
||||||
|
<p class="chips">
|
||||||
|
<span class="chip">CQRS</span>
|
||||||
|
<span class="chip">Event Sourcing</span>
|
||||||
|
<span class="chip">Strands Harness SDK — executive core</span>
|
||||||
|
<span class="chip">Idempotent ticks</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section" id="how-it-works" aria-labelledby="how-title">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-head">
|
||||||
|
<p class="eyebrow">How it works</p>
|
||||||
|
<h2 id="how-title">The ladder</h2>
|
||||||
|
<p class="section-lead">The harness lives by ticks at four levels — reflexes at the second scale, planning at the day scale.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="ladder">
|
||||||
|
<article class="ladder-card">
|
||||||
|
<div class="ladder-top">
|
||||||
|
<span class="tick-level">sec</span>
|
||||||
|
<span class="tick-interval">every 1 s</span>
|
||||||
|
</div>
|
||||||
|
<dl>
|
||||||
|
<div><dt>Context</dt><dd>None</dd></div>
|
||||||
|
<div><dt>Job</dt><dd>Reflexes: telemetry, alerts</dd></div>
|
||||||
|
</dl>
|
||||||
|
</article>
|
||||||
|
<article class="ladder-card">
|
||||||
|
<div class="ladder-top">
|
||||||
|
<span class="tick-level">min</span>
|
||||||
|
<span class="tick-interval">every 1 min</span>
|
||||||
|
</div>
|
||||||
|
<dl>
|
||||||
|
<div><dt>Context</dt><dd>256K</dd></div>
|
||||||
|
<div><dt>Job</dt><dd>Triage: incoming messages, quick fixes</dd></div>
|
||||||
|
</dl>
|
||||||
|
</article>
|
||||||
|
<article class="ladder-card">
|
||||||
|
<div class="ladder-top">
|
||||||
|
<span class="tick-level">hour</span>
|
||||||
|
<span class="tick-interval">every 1 h</span>
|
||||||
|
</div>
|
||||||
|
<dl>
|
||||||
|
<div><dt>Context</dt><dd>512K</dd></div>
|
||||||
|
<div><dt>Job</dt><dd>S/M tasks, hourly digest</dd></div>
|
||||||
|
</dl>
|
||||||
|
</article>
|
||||||
|
<article class="ladder-card">
|
||||||
|
<div class="ladder-top">
|
||||||
|
<span class="tick-level">day</span>
|
||||||
|
<span class="tick-interval">every 1 d</span>
|
||||||
|
</div>
|
||||||
|
<dl>
|
||||||
|
<div><dt>Context</dt><dd>1M</dd></div>
|
||||||
|
<div><dt>Job</dt><dd>M/L tasks, day manifest</dd></div>
|
||||||
|
</dl>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="invariants">
|
||||||
|
<p class="invariants-title">Ladder invariants</p>
|
||||||
|
<ul>
|
||||||
|
<li>Every tick is idempotent</li>
|
||||||
|
<li>Busy levels absorb ticks</li>
|
||||||
|
<li>Only digests travel upward</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section" id="portal" aria-labelledby="portal-title">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-head">
|
||||||
|
<p class="eyebrow">Portal</p>
|
||||||
|
<h2 id="portal-title">The cooperative portal</h2>
|
||||||
|
<p class="section-lead">The org-wide layer around your agents: shared work, shared knowledge — and event subscriptions, so agents react proactively.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="portal-grid">
|
||||||
|
<article class="feature-card">
|
||||||
|
<svg class="feature-icon" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/></svg>
|
||||||
|
<h3>Shared task board & projects</h3>
|
||||||
|
<p>One board for the whole cooperative. Agents and humans work from the same tasks and projects.</p>
|
||||||
|
</article>
|
||||||
|
<article class="feature-card">
|
||||||
|
<svg class="feature-icon" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>
|
||||||
|
<h3>Knowledge bases</h3>
|
||||||
|
<p>Knowledge bases with semantic search (RAG), so what the cooperative knows stays reachable.</p>
|
||||||
|
</article>
|
||||||
|
<article class="feature-card">
|
||||||
|
<svg class="feature-icon" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 6h11M10 12h11M10 18h11"/><path d="M3 6l1 1 2-2M3 12l1 1 2-2M3 18l1 1 2-2"/></svg>
|
||||||
|
<h3>Meeting & decision protocols</h3>
|
||||||
|
<p>Meetings and decisions run on protocols the whole cooperative can see and follow.</p>
|
||||||
|
</article>
|
||||||
|
<article class="feature-card">
|
||||||
|
<svg class="feature-icon" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
|
||||||
|
<h3>REST API + MCP gateway</h3>
|
||||||
|
<p>REST API and MCP gateway with per-agent tokens — wire agents into your own systems.</p>
|
||||||
|
</article>
|
||||||
|
<article class="feature-card">
|
||||||
|
<svg class="feature-icon" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 20V10M12 20V4M18 20v-6"/></svg>
|
||||||
|
<h3>Live task dashboard</h3>
|
||||||
|
<p>Statuses, escalations, digests, and spend — live, in one place.</p>
|
||||||
|
</article>
|
||||||
|
<article class="feature-card">
|
||||||
|
<svg class="feature-icon" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
|
||||||
|
<h3>Chat with your agent</h3>
|
||||||
|
<p>Direct chat with your agent — batch replies and voice.</p>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section" id="trust" aria-labelledby="trust-title">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-head">
|
||||||
|
<p class="eyebrow">Trust</p>
|
||||||
|
<h2 id="trust-title">Signed, chained, safe to retry</h2>
|
||||||
|
<p class="section-lead">Autonomy needs a verifiable record. Every event in Simbiot is signed, chained, and safe to retry.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="trust-grid">
|
||||||
|
<article class="trust-card">
|
||||||
|
<svg class="feature-icon" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3l7 3v5c0 4.6-3 7.7-7 9-4-1.3-7-4.4-7-9V6l7-3z"/><path d="M9 12l2 2 4-4"/></svg>
|
||||||
|
<h3>Signed event chain</h3>
|
||||||
|
<p>Every event is signed (ed25519) and hash-chained into a tamper-evident log. <span class="icode">verify</span> walks the full chain.</p>
|
||||||
|
</article>
|
||||||
|
<article class="trust-card">
|
||||||
|
<svg class="feature-icon" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17 1l4 4-4 4"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><path d="M7 23l-4-4 4-4"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
|
||||||
|
<h3>Idempotent delivery</h3>
|
||||||
|
<p>No duplicate notifications. Retries are safe — a repeated event lands once.</p>
|
||||||
|
</article>
|
||||||
|
<article class="trust-card">
|
||||||
|
<svg class="feature-icon" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 17L17 7"/><path d="M8 7h9v9"/></svg>
|
||||||
|
<h3>Escalation ladder</h3>
|
||||||
|
<p>What an agent cannot decide safely goes up, with full context attached.</p>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section" id="presale" aria-labelledby="presale-title">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-head">
|
||||||
|
<p class="eyebrow">Presale</p>
|
||||||
|
<h2 id="presale-title">Your own harness</h2>
|
||||||
|
<p class="section-lead">The same system the cooperative runs in production — not a cut-down demo.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="offer">
|
||||||
|
<div class="price-card">
|
||||||
|
<p class="price"><span class="amount">$100</span><span class="per">/mo</span></p>
|
||||||
|
<p class="price-note">One price everywhere. No discounts — a single honest number.</p>
|
||||||
|
<p class="seat-badge">10 presale seats</p>
|
||||||
|
<p class="seat-note">Urgency comes from the seat limit, not from discounts.</p>
|
||||||
|
<div class="cta-row">
|
||||||
|
<a class="btn btn-primary" href="https://cil.by">Get a seat via the portal</a>
|
||||||
|
</div>
|
||||||
|
<p class="cta-hint">or contact us through cooperative chat.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="offer-lists">
|
||||||
|
<div class="offer-panel">
|
||||||
|
<h3>Included</h3>
|
||||||
|
<ul class="list-include">
|
||||||
|
<li>The Simbiot harness and the cooperative portal</li>
|
||||||
|
<li>Agent deployment and onboarding — delivery within the month of purchase</li>
|
||||||
|
<li>Task dashboard</li>
|
||||||
|
<li>Chat with your agent</li>
|
||||||
|
<li>Event subscriptions</li>
|
||||||
|
<li>Priority support</li>
|
||||||
|
<li>Ongoing updates while subscribed</li>
|
||||||
|
<li>LLM backend through the cooperative's router (same as production); base quotas included</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="offer-panel">
|
||||||
|
<h3>Not included</h3>
|
||||||
|
<ul class="list-exclude">
|
||||||
|
<li>Custom contract development</li>
|
||||||
|
<li>Personal SLA guarantees</li>
|
||||||
|
<li>Third-party billing</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section" id="faq" aria-labelledby="faq-title">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-head">
|
||||||
|
<p class="eyebrow">FAQ</p>
|
||||||
|
<h2 id="faq-title">Questions, answered</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="faq">
|
||||||
|
<details>
|
||||||
|
<summary>Is Simbiot a chatbot?</summary>
|
||||||
|
<p>No. Simbiot is a rhythmic agent harness: it works by itself on a schedule and reports digests on time. You can chat with your agent in the portal — with batch replies and voice — but the agent does not wait for you to open a tab.</p>
|
||||||
|
</details>
|
||||||
|
<details>
|
||||||
|
<summary>What exactly is a tick?</summary>
|
||||||
|
<p>The heartbeat of the harness. Ticks fire at four levels — every second, minute, hour, and day — each with its own context budget and job. Every tick is idempotent, busy levels absorb ticks, and only digests travel upward.</p>
|
||||||
|
</details>
|
||||||
|
<details>
|
||||||
|
<summary>Can I verify what my agent did?</summary>
|
||||||
|
<p>Yes. Every event is signed with ed25519 and hash-chained into a tamper-evident log. The <span class="icode">verify</span> command walks the full chain.</p>
|
||||||
|
</details>
|
||||||
|
<details>
|
||||||
|
<summary>What happens when the agent is not sure?</summary>
|
||||||
|
<p>It escalates. Anything an agent cannot decide safely goes up the ladder with full context attached, so a human or a higher level makes the call.</p>
|
||||||
|
</details>
|
||||||
|
<details>
|
||||||
|
<summary>What does the $100/mo subscription include?</summary>
|
||||||
|
<p>The harness, the cooperative portal, agent deployment and onboarding (delivered within the month of purchase), the task dashboard, chat with your agent, event subscriptions, priority support, and ongoing updates while subscribed. The LLM backend runs through the cooperative's router — the same as production — with base quotas included.</p>
|
||||||
|
</details>
|
||||||
|
<details>
|
||||||
|
<summary>What is not included?</summary>
|
||||||
|
<p>Custom contract development, personal SLA guarantees, and third-party billing. The price is $100/mo everywhere, with no discounts; the presale is limited to 10 seats.</p>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer class="site-footer">
|
||||||
|
<div class="container">
|
||||||
|
<div class="footer-grid">
|
||||||
|
<div>
|
||||||
|
<a class="brand" href="#top">
|
||||||
|
<svg class="brand-mark" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 12h4l2-5 4 10 3-7 2 2h5"/></svg>
|
||||||
|
Simbiot
|
||||||
|
</a>
|
||||||
|
<p class="footer-tagline">A rhythmic agent harness, run by a technology cooperative.</p>
|
||||||
|
</div>
|
||||||
|
<nav aria-label="Footer">
|
||||||
|
<h3 class="footer-title">Site</h3>
|
||||||
|
<ul class="footer-links">
|
||||||
|
<li><a href="#product">Product</a></li>
|
||||||
|
<li><a href="#how-it-works">How it works</a></li>
|
||||||
|
<li><a href="#presale">Presale</a></li>
|
||||||
|
<li><a href="#faq">FAQ</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<div>
|
||||||
|
<h3 class="footer-title">Cooperative</h3>
|
||||||
|
<ul class="footer-links">
|
||||||
|
<li><a href="https://cil.by">Portal & coop — cil.by</a></li>
|
||||||
|
</ul>
|
||||||
|
<h3 class="footer-title">Install</h3>
|
||||||
|
<code class="footer-install">curl -fsSL https://raw.cil.by/simbiot/install.sh | bash</code>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="footer-small">Simbiot is a technology cooperative. One price — $100/mo, no discounts; the presale is limited to 10 seats. Not offered: custom contract development, personal SLA guarantees, third-party billing. © 2026 Simbiot Cooperative.</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
(function () {
|
||||||
|
var btn = document.querySelector('[data-copy]');
|
||||||
|
if (!btn) return;
|
||||||
|
var target = document.getElementById(btn.getAttribute('data-copy'));
|
||||||
|
var label = btn.querySelector('span');
|
||||||
|
var resetTimer = null;
|
||||||
|
btn.addEventListener('click', function () {
|
||||||
|
var text = target.textContent;
|
||||||
|
var done = function () {
|
||||||
|
label.textContent = 'copied';
|
||||||
|
btn.setAttribute('aria-label', 'Install command copied');
|
||||||
|
if (resetTimer) clearTimeout(resetTimer);
|
||||||
|
resetTimer = setTimeout(function () {
|
||||||
|
label.textContent = 'copy';
|
||||||
|
btn.setAttribute('aria-label', 'Copy install command');
|
||||||
|
}, 2000);
|
||||||
|
};
|
||||||
|
if (navigator.clipboard && navigator.clipboard.writeText) {
|
||||||
|
navigator.clipboard.writeText(text).then(done);
|
||||||
|
} else {
|
||||||
|
var ta = document.createElement('textarea');
|
||||||
|
ta.value = text;
|
||||||
|
ta.setAttribute('readonly', '');
|
||||||
|
ta.style.position = 'fixed';
|
||||||
|
ta.style.left = '-9999px';
|
||||||
|
document.body.appendChild(ta);
|
||||||
|
ta.select();
|
||||||
|
document.execCommand('copy');
|
||||||
|
document.body.removeChild(ta);
|
||||||
|
done();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
688
sites/landing/styles.css
Normal file
688
sites/landing/styles.css
Normal file
|
|
@ -0,0 +1,688 @@
|
||||||
|
:root {
|
||||||
|
--bg: #0b0f14;
|
||||||
|
--surface: #111823;
|
||||||
|
--surface-2: #16202e;
|
||||||
|
--border: #212c3b;
|
||||||
|
--border-strong: #2e3d52;
|
||||||
|
--text: #d7e1ec;
|
||||||
|
--text-strong: #f2f7fc;
|
||||||
|
--text-soft: #b7c3d3;
|
||||||
|
--muted: #97a6b8;
|
||||||
|
--accent: #5eead4;
|
||||||
|
--accent-strong: #83f2e0;
|
||||||
|
--accent-ink: #052e2b;
|
||||||
|
--warn: #f3a4b0;
|
||||||
|
--radius: 10px;
|
||||||
|
--radius-lg: 14px;
|
||||||
|
--mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, "Liberation Mono", monospace;
|
||||||
|
--sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
* { box-sizing: border-box; }
|
||||||
|
|
||||||
|
html { scroll-behavior: smooth; }
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-family: var(--sans);
|
||||||
|
background: var(--bg);
|
||||||
|
color: var(--text);
|
||||||
|
line-height: 1.6;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
}
|
||||||
|
|
||||||
|
::selection { background: rgba(94, 234, 212, 0.28); }
|
||||||
|
|
||||||
|
a { color: var(--accent); text-decoration: none; }
|
||||||
|
a:hover { color: var(--accent-strong); }
|
||||||
|
|
||||||
|
a:focus-visible,
|
||||||
|
button:focus-visible,
|
||||||
|
summary:focus-visible {
|
||||||
|
outline: 2px solid var(--accent);
|
||||||
|
outline-offset: 2px;
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
width: min(100% - 2.5rem, 1080px);
|
||||||
|
margin-inline: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skip-link {
|
||||||
|
position: absolute;
|
||||||
|
left: 1rem;
|
||||||
|
top: -4rem;
|
||||||
|
z-index: 100;
|
||||||
|
background: var(--accent);
|
||||||
|
color: var(--accent-ink);
|
||||||
|
font-weight: 600;
|
||||||
|
padding: 0.6rem 1rem;
|
||||||
|
border-radius: 8px;
|
||||||
|
transition: top 0.15s ease;
|
||||||
|
}
|
||||||
|
.skip-link:focus { top: 1rem; }
|
||||||
|
|
||||||
|
.site-header {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 50;
|
||||||
|
background: rgba(11, 15, 20, 0.86);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
-webkit-backdrop-filter: blur(10px);
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-inner {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem 1rem;
|
||||||
|
padding-block: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.55rem;
|
||||||
|
margin-right: auto;
|
||||||
|
color: var(--text-strong);
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 1.08rem;
|
||||||
|
letter-spacing: 0.01em;
|
||||||
|
}
|
||||||
|
.brand:hover { color: var(--text-strong); }
|
||||||
|
.brand-mark { color: var(--accent); flex-shrink: 0; }
|
||||||
|
|
||||||
|
.nav-links {
|
||||||
|
list-style: none;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.15rem;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.nav-links a {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0.45rem 0.7rem;
|
||||||
|
border-radius: 8px;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 0.95rem;
|
||||||
|
}
|
||||||
|
.nav-links a:hover { color: var(--text-strong); background: var(--surface); }
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 1rem;
|
||||||
|
line-height: 1.2;
|
||||||
|
padding: 0.7rem 1.2rem;
|
||||||
|
border-radius: 9px;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
|
||||||
|
}
|
||||||
|
.btn-primary { background: var(--accent); color: var(--accent-ink); }
|
||||||
|
.btn-primary:hover { background: var(--accent-strong); color: var(--accent-ink); }
|
||||||
|
.btn-ghost { border-color: var(--border-strong); color: var(--text); }
|
||||||
|
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
|
||||||
|
.btn-sm { padding: 0.45rem 0.85rem; font-size: 0.9rem; }
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
padding-block: clamp(3.5rem, 9vw, 6.5rem) clamp(3rem, 7vw, 5rem);
|
||||||
|
}
|
||||||
|
.hero::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background-image:
|
||||||
|
linear-gradient(rgba(148, 163, 184, 0.06) 1px, transparent 1px),
|
||||||
|
linear-gradient(90deg, rgba(148, 163, 184, 0.06) 1px, transparent 1px);
|
||||||
|
background-size: 42px 42px;
|
||||||
|
-webkit-mask-image: radial-gradient(ellipse 90% 85% at 50% 0%, #000 25%, transparent 72%);
|
||||||
|
mask-image: radial-gradient(ellipse 90% 85% at 50% 0%, #000 25%, transparent 72%);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
.hero .container { position: relative; }
|
||||||
|
|
||||||
|
.eyebrow {
|
||||||
|
font-family: var(--mono);
|
||||||
|
font-size: 0.78rem;
|
||||||
|
letter-spacing: 0.14em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--accent);
|
||||||
|
margin: 0 0 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: clamp(2.1rem, 5.5vw, 3.35rem);
|
||||||
|
line-height: 1.08;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
color: var(--text-strong);
|
||||||
|
margin: 0 0 1.25rem;
|
||||||
|
max-width: 18ch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lead {
|
||||||
|
font-size: clamp(1.02rem, 1.6vw, 1.16rem);
|
||||||
|
line-height: 1.65;
|
||||||
|
color: var(--text-soft);
|
||||||
|
margin: 0;
|
||||||
|
max-width: 62ch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.install {
|
||||||
|
margin-top: 2.25rem;
|
||||||
|
max-width: 640px;
|
||||||
|
background: var(--surface);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.install-bar {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 1rem;
|
||||||
|
padding: 0.5rem 0.6rem 0.5rem 1rem;
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
.install-label {
|
||||||
|
font-family: var(--mono);
|
||||||
|
font-size: 0.75rem;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
.copy-btn {
|
||||||
|
font-family: var(--mono);
|
||||||
|
font-size: 0.78rem;
|
||||||
|
color: var(--muted);
|
||||||
|
background: transparent;
|
||||||
|
border: 1px solid var(--border-strong);
|
||||||
|
border-radius: 7px;
|
||||||
|
padding: 0.3rem 0.7rem;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: color 0.15s ease, border-color 0.15s ease;
|
||||||
|
}
|
||||||
|
.copy-btn:hover, .copy-btn:focus-visible { color: var(--accent); border-color: var(--accent); }
|
||||||
|
.install-body {
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
gap: 0.75rem;
|
||||||
|
padding: 1rem;
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
.prompt { font-family: var(--mono); color: var(--accent); flex-shrink: 0; }
|
||||||
|
.install-body code {
|
||||||
|
font-family: var(--mono);
|
||||||
|
font-size: 0.95rem;
|
||||||
|
color: var(--text-strong);
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta-row {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.75rem;
|
||||||
|
margin-top: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-meta {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.5rem;
|
||||||
|
margin: 1.75rem 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chip {
|
||||||
|
display: inline-block;
|
||||||
|
font-family: var(--mono);
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: var(--text);
|
||||||
|
background: var(--surface);
|
||||||
|
border: 1px solid var(--border-strong);
|
||||||
|
border-radius: 999px;
|
||||||
|
padding: 0.3rem 0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section {
|
||||||
|
scroll-margin-top: 4.75rem;
|
||||||
|
padding-block: clamp(3.25rem, 8vw, 5.5rem);
|
||||||
|
border-top: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-head {
|
||||||
|
max-width: 62ch;
|
||||||
|
margin-bottom: clamp(2rem, 4vw, 3rem);
|
||||||
|
}
|
||||||
|
.section-head .eyebrow { margin-bottom: 0.9rem; }
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: clamp(1.6rem, 3.4vw, 2.25rem);
|
||||||
|
line-height: 1.15;
|
||||||
|
letter-spacing: -0.015em;
|
||||||
|
color: var(--text-strong);
|
||||||
|
margin: 0 0 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-lead {
|
||||||
|
font-size: 1.05rem;
|
||||||
|
line-height: 1.65;
|
||||||
|
color: var(--text-soft);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.compare {
|
||||||
|
display: grid;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
.compare-card {
|
||||||
|
background: var(--surface);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
padding: 1.6rem;
|
||||||
|
}
|
||||||
|
.compare-card.sim { border-color: rgba(94, 234, 212, 0.45); }
|
||||||
|
.compare-card h3 {
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
gap: 0.75rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
font-size: 1.05rem;
|
||||||
|
color: var(--text-strong);
|
||||||
|
margin: 0 0 1.1rem;
|
||||||
|
}
|
||||||
|
.compare-card.sim h3 { color: var(--accent); }
|
||||||
|
.compare-tag {
|
||||||
|
font-family: var(--mono);
|
||||||
|
font-size: 0.72rem;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--muted);
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
.compare-card ul {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
display: grid;
|
||||||
|
gap: 0.7rem;
|
||||||
|
}
|
||||||
|
.compare-card li {
|
||||||
|
position: relative;
|
||||||
|
padding-left: 1.4rem;
|
||||||
|
color: var(--text-soft);
|
||||||
|
line-height: 1.55;
|
||||||
|
}
|
||||||
|
.compare-card li::before {
|
||||||
|
content: "–";
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
.compare-card.sim li::before { content: "→"; color: var(--accent); }
|
||||||
|
|
||||||
|
.chips-label {
|
||||||
|
font-family: var(--mono);
|
||||||
|
font-size: 0.78rem;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--muted);
|
||||||
|
margin: 1.9rem 0 0.6rem;
|
||||||
|
}
|
||||||
|
.chips {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.5rem;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ladder {
|
||||||
|
display: grid;
|
||||||
|
gap: 1rem;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
|
||||||
|
}
|
||||||
|
.ladder-card {
|
||||||
|
background: var(--surface);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
padding: 1.5rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1.1rem;
|
||||||
|
}
|
||||||
|
.ladder-top {
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 0.5rem;
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
padding-bottom: 0.9rem;
|
||||||
|
}
|
||||||
|
.tick-level {
|
||||||
|
font-family: var(--mono);
|
||||||
|
font-size: 1.35rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--accent);
|
||||||
|
}
|
||||||
|
.tick-interval {
|
||||||
|
font-family: var(--mono);
|
||||||
|
font-size: 0.85rem;
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
.ladder-card dl {
|
||||||
|
margin: 0;
|
||||||
|
display: grid;
|
||||||
|
gap: 0.7rem;
|
||||||
|
}
|
||||||
|
.ladder-card dt {
|
||||||
|
font-family: var(--mono);
|
||||||
|
font-size: 0.72rem;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--muted);
|
||||||
|
margin-bottom: 0.15rem;
|
||||||
|
}
|
||||||
|
.ladder-card dd {
|
||||||
|
margin: 0;
|
||||||
|
color: var(--text-soft);
|
||||||
|
font-size: 0.96rem;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.invariants {
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
background: var(--surface);
|
||||||
|
border: 1px solid var(--border-strong);
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
padding: 1.4rem 1.6rem;
|
||||||
|
}
|
||||||
|
.invariants-title {
|
||||||
|
font-family: var(--mono);
|
||||||
|
font-size: 0.78rem;
|
||||||
|
letter-spacing: 0.12em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--muted);
|
||||||
|
margin: 0 0 0.9rem;
|
||||||
|
}
|
||||||
|
.invariants ul {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
display: grid;
|
||||||
|
gap: 0.6rem;
|
||||||
|
}
|
||||||
|
.invariants li {
|
||||||
|
position: relative;
|
||||||
|
padding-left: 1.4rem;
|
||||||
|
color: var(--text-soft);
|
||||||
|
}
|
||||||
|
.invariants li::before {
|
||||||
|
content: "→";
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
color: var(--accent);
|
||||||
|
font-family: var(--mono);
|
||||||
|
}
|
||||||
|
|
||||||
|
.portal-grid,
|
||||||
|
.trust-grid {
|
||||||
|
display: grid;
|
||||||
|
gap: 1rem;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||||
|
}
|
||||||
|
.feature-card,
|
||||||
|
.trust-card {
|
||||||
|
background: var(--surface);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
padding: 1.5rem;
|
||||||
|
}
|
||||||
|
.feature-icon {
|
||||||
|
display: block;
|
||||||
|
color: var(--accent);
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
.feature-card h3,
|
||||||
|
.trust-card h3 {
|
||||||
|
font-size: 1.02rem;
|
||||||
|
color: var(--text-strong);
|
||||||
|
margin: 0 0 0.6rem;
|
||||||
|
}
|
||||||
|
.feature-card p,
|
||||||
|
.trust-card p {
|
||||||
|
margin: 0;
|
||||||
|
color: var(--text-soft);
|
||||||
|
font-size: 0.95rem;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icode {
|
||||||
|
font-family: var(--mono);
|
||||||
|
font-size: 0.9em;
|
||||||
|
color: var(--text-strong);
|
||||||
|
background: var(--surface-2);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 5px;
|
||||||
|
padding: 0.05em 0.4em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.offer {
|
||||||
|
display: grid;
|
||||||
|
gap: 1.25rem;
|
||||||
|
align-items: start;
|
||||||
|
}
|
||||||
|
.price-card {
|
||||||
|
background: var(--surface);
|
||||||
|
border: 1px solid var(--border-strong);
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
padding: 1.9rem;
|
||||||
|
}
|
||||||
|
.price {
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
gap: 0.45rem;
|
||||||
|
margin: 0 0 0.75rem;
|
||||||
|
}
|
||||||
|
.amount {
|
||||||
|
font-family: var(--mono);
|
||||||
|
font-size: 2.9rem;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 1;
|
||||||
|
color: var(--text-strong);
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
}
|
||||||
|
.per {
|
||||||
|
font-size: 1.05rem;
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
.price-note {
|
||||||
|
margin: 0 0 1.4rem;
|
||||||
|
color: var(--text-soft);
|
||||||
|
max-width: 34ch;
|
||||||
|
}
|
||||||
|
.seat-badge {
|
||||||
|
display: inline-block;
|
||||||
|
font-family: var(--mono);
|
||||||
|
font-size: 0.85rem;
|
||||||
|
color: var(--accent);
|
||||||
|
border: 1px solid rgba(94, 234, 212, 0.5);
|
||||||
|
border-radius: 999px;
|
||||||
|
padding: 0.35rem 0.85rem;
|
||||||
|
margin: 0 0 0.5rem;
|
||||||
|
}
|
||||||
|
.seat-note {
|
||||||
|
margin: 0 0 1.6rem;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 0.92rem;
|
||||||
|
max-width: 34ch;
|
||||||
|
}
|
||||||
|
.cta-hint {
|
||||||
|
margin: 0.9rem 0 0;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 0.92rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.offer-lists {
|
||||||
|
display: grid;
|
||||||
|
gap: 1.25rem;
|
||||||
|
}
|
||||||
|
.offer-panel {
|
||||||
|
background: var(--surface);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
padding: 1.5rem 1.6rem;
|
||||||
|
}
|
||||||
|
.offer-panel h3 {
|
||||||
|
font-family: var(--mono);
|
||||||
|
font-size: 0.78rem;
|
||||||
|
letter-spacing: 0.12em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--muted);
|
||||||
|
margin: 0 0 1rem;
|
||||||
|
}
|
||||||
|
.offer-panel ul {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
display: grid;
|
||||||
|
gap: 0.65rem;
|
||||||
|
}
|
||||||
|
.offer-panel li {
|
||||||
|
position: relative;
|
||||||
|
padding-left: 1.5rem;
|
||||||
|
color: var(--text-soft);
|
||||||
|
line-height: 1.55;
|
||||||
|
font-size: 0.96rem;
|
||||||
|
}
|
||||||
|
.list-include li::before {
|
||||||
|
content: "+";
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
color: var(--accent);
|
||||||
|
font-family: var(--mono);
|
||||||
|
}
|
||||||
|
.list-exclude li::before {
|
||||||
|
content: "–";
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
color: var(--warn);
|
||||||
|
font-family: var(--mono);
|
||||||
|
}
|
||||||
|
|
||||||
|
.faq {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.75rem;
|
||||||
|
max-width: 780px;
|
||||||
|
}
|
||||||
|
.faq details {
|
||||||
|
background: var(--surface);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
}
|
||||||
|
.faq summary {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 1rem;
|
||||||
|
padding: 1rem 1.25rem;
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--text-strong);
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
.faq summary::-webkit-details-marker { display: none; }
|
||||||
|
.faq summary::after {
|
||||||
|
content: "+";
|
||||||
|
font-family: var(--mono);
|
||||||
|
font-size: 1.25rem;
|
||||||
|
color: var(--muted);
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.faq details[open] summary::after { content: "–"; }
|
||||||
|
.faq details[open] summary { border-bottom: 1px solid var(--border); }
|
||||||
|
.faq details p {
|
||||||
|
margin: 0;
|
||||||
|
padding: 1rem 1.25rem 1.25rem;
|
||||||
|
color: var(--text-soft);
|
||||||
|
line-height: 1.65;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-footer {
|
||||||
|
border-top: 1px solid var(--border);
|
||||||
|
padding-block: 3rem 2rem;
|
||||||
|
}
|
||||||
|
.footer-grid {
|
||||||
|
display: grid;
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
.footer-tagline {
|
||||||
|
margin: 0.9rem 0 0;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 0.95rem;
|
||||||
|
max-width: 30ch;
|
||||||
|
}
|
||||||
|
.footer-title {
|
||||||
|
font-family: var(--mono);
|
||||||
|
font-size: 0.75rem;
|
||||||
|
letter-spacing: 0.12em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--muted);
|
||||||
|
margin: 0 0 0.8rem;
|
||||||
|
}
|
||||||
|
.footer-grid .footer-title:nth-of-type(n+2) { margin-top: 1.6rem; }
|
||||||
|
.footer-links {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
display: grid;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
.footer-links a {
|
||||||
|
color: var(--text-soft);
|
||||||
|
font-size: 0.95rem;
|
||||||
|
}
|
||||||
|
.footer-links a:hover { color: var(--text-strong); }
|
||||||
|
.footer-install {
|
||||||
|
display: block;
|
||||||
|
font-family: var(--mono);
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: var(--text-soft);
|
||||||
|
background: var(--surface);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 0.6rem 0.8rem;
|
||||||
|
overflow-x: auto;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.footer-small {
|
||||||
|
margin: 2.5rem 0 0;
|
||||||
|
padding-top: 1.5rem;
|
||||||
|
border-top: 1px solid var(--border);
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 0.85rem;
|
||||||
|
line-height: 1.65;
|
||||||
|
max-width: 78ch;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 760px) {
|
||||||
|
.compare { grid-template-columns: 1fr 1fr; }
|
||||||
|
.invariants ul { grid-template-columns: repeat(3, 1fr); gap: 0.6rem 1.5rem; }
|
||||||
|
.footer-grid { grid-template-columns: 1.3fr 0.8fr 1.6fr; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 920px) {
|
||||||
|
.offer { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
html { scroll-behavior: auto; }
|
||||||
|
*, *::before, *::after {
|
||||||
|
transition-duration: 0.01ms !important;
|
||||||
|
animation-duration: 0.01ms !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue