<!DOCTYPE html><html lang="en"> <head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="The trusted layer for the age of AI agents. Your agent handles the details — scheduling, negotiating, coordinating — encrypted, adaptive, always under your control."><meta name="theme-color" content="#faf9f6" media="(prefers-color-scheme: light)"><meta name="theme-color" content="#0a0a0b" media="(prefers-color-scheme: dark)"><meta property="og:title" content="calabra — Contact My Assistant"><meta property="og:description" content="The trusted layer for the age of AI agents. Your agent handles the details — scheduling, negotiating, coordinating — encrypted, adaptive, always under your control."><meta property="og:type" content="website"><meta property="og:url" content="https://calabralink.com"><meta name="twitter:card" content="summary_large_image"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><script>
      if (location.hash) { history.replaceState(null, '', location.pathname + location.search); window.scrollTo(0, 0); }
    </script><link rel="preload" as="image" href="/images/human-privacy.png"><link rel="preload" as="image" href="/images/human-smarter.png"><link rel="preload" as="image" href="/images/human-approval.png"><link rel="preload" as="image" href="/images/human-templates.png"><link rel="preload" as="image" href="/images/human-personal.png"><link rel="preload" as="image" href="/images/human-everywhere.png"><title>calabra — Contact My Assistant</title><link rel="stylesheet" href="/_assets/about.BfL5ztW9.css">
<style>@keyframes gradient-shift{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}
.founder-contact[data-astro-cid-drsfuaxh]{padding:4rem 1.5rem;max-width:64rem;margin:0 auto}.founder-card[data-astro-cid-drsfuaxh]{display:flex;align-items:center;gap:2rem;background:#111118;border:1px solid rgba(99,102,241,.25);border-radius:1.25rem;padding:2rem 2.5rem;box-shadow:0 0 32px #6366f114}.founder-avatar[data-astro-cid-drsfuaxh]{font-size:3.5rem;line-height:1;flex-shrink:0;width:80px;height:80px;display:flex;align-items:center;justify-content:center;background:#6366f11a;border-radius:50%;border:1px solid rgba(99,102,241,.2)}.founder-info[data-astro-cid-drsfuaxh]{display:flex;flex-direction:column;gap:.5rem}.founder-info[data-astro-cid-drsfuaxh] h3[data-astro-cid-drsfuaxh]{font-size:1.25rem;font-weight:700;color:#f5f4f1;margin:0;letter-spacing:-.3px}.founder-name[data-astro-cid-drsfuaxh]{font-size:.875rem;font-weight:500;color:#a0a0b8;margin:0}.founder-desc[data-astro-cid-drsfuaxh]{font-size:.875rem;color:#666680;line-height:1.6;margin:0;max-width:36rem}.founder-cta[data-astro-cid-drsfuaxh]{display:inline-flex;align-items:center;gap:.375rem;margin-top:.5rem;background:#6366f1;color:#fff;font-size:.875rem;font-weight:600;padding:.625rem 1.25rem;border-radius:.625rem;text-decoration:none;width:-moz-fit-content;width:fit-content;transition:background .2s,transform .15s;letter-spacing:.1px}.founder-cta[data-astro-cid-drsfuaxh]:hover{background:#5254cc;transform:translateY(-1px)}@media(max-width:640px){.founder-card[data-astro-cid-drsfuaxh]{flex-direction:column;align-items:flex-start;gap:1.25rem;padding:1.5rem}.founder-avatar[data-astro-cid-drsfuaxh]{width:64px;height:64px;font-size:2.75rem}}
</style>
<link rel="stylesheet" href="/_assets/about.DmF-hBv8.css"></head> <body class="min-h-screen bg-[#faf9f6] dark:bg-surface font-sans">  <nav class="fixed inset-x-0 top-0 z-50 border-b border-black/5 bg-[#faf9f6]/80 backdrop-blur-lg"> <div class="mx-auto flex max-w-5xl items-center justify-between px-6 py-4"> <div class="flex items-center gap-2"> <a href="/" class="font-mono text-lg font-semibold text-[#1a1a1a]">calabra</a> <span class="rounded bg-accent/15 px-1.5 py-0.5 text-[9px] font-bold uppercase tracking-wider text-accent">beta</span> </div> <!-- Desktop nav --> <div class="hidden sm:flex items-center gap-6"> <a href="/#features" class="text-sm text-[#555] transition-colors hover:text-[#1a1a1a]">Features</a> <a href="/#how-it-works" class="text-sm text-[#555] transition-colors hover:text-[#1a1a1a]">How it works</a> <a href="/#pitches" class="text-sm text-[#555] transition-colors hover:text-[#1a1a1a]">Who it's for</a> <a href="/#blog" class="text-sm text-[#555] transition-colors hover:text-[#1a1a1a]">Blog</a> <a href="/help" class="text-sm font-medium text-accent transition-colors hover:text-accent-hover">
Help
</a> <a href="/#waitlist" class="rounded-lg bg-accent px-4 py-2 text-sm font-medium text-white transition-all hover:bg-accent-hover">
Join waitlist
</a> </div> <!-- Mobile hamburger --> <button id="mobile-menu-btn" class="sm:hidden flex flex-col gap-1.5 p-1" onclick="document.getElementById('mobile-menu').classList.toggle('hidden')"> <span class="block w-5 h-0.5 bg-[#1a1a1a] rounded"></span> <span class="block w-5 h-0.5 bg-[#1a1a1a] rounded"></span> <span class="block w-5 h-0.5 bg-[#1a1a1a] rounded"></span> </button> </div> <!-- Mobile menu --> <div id="mobile-menu" class="hidden sm:hidden border-t border-black/5 bg-[#faf9f6] px-6 py-3"> <div class="flex flex-col gap-0"> <a href="/#features" class="py-3 text-sm text-[#555] border-b border-black/5 transition-colors hover:text-[#1a1a1a]" onclick="document.getElementById('mobile-menu').classList.add('hidden')">Features</a> <a href="/#how-it-works" class="py-3 text-sm text-[#555] border-b border-black/5 transition-colors hover:text-[#1a1a1a]" onclick="document.getElementById('mobile-menu').classList.add('hidden')">How it works</a> <a href="/#pitches" class="py-3 text-sm text-[#555] border-b border-black/5 transition-colors hover:text-[#1a1a1a]" onclick="document.getElementById('mobile-menu').classList.add('hidden')">Who it's for</a> <a href="/#blog" class="py-3 text-sm text-[#555] border-b border-black/5 transition-colors hover:text-[#1a1a1a]" onclick="document.getElementById('mobile-menu').classList.add('hidden')">Blog</a> <div class="my-1 border-b border-black/5"></div> <a href="/help" class="py-3 text-sm font-medium text-accent transition-colors hover:text-accent-hover" onclick="document.getElementById('mobile-menu').classList.add('hidden')">
Help
</a> <a href="/#waitlist" class="mt-3 rounded-lg bg-accent px-4 py-2.5 text-sm font-medium text-white text-center transition-all hover:bg-accent-hover" onclick="document.getElementById('mobile-menu').classList.add('hidden')">
Join waitlist
</a> </div> </div> </nav> <main> <section class="relative overflow-hidden pt-32 pb-20 sm:pt-40 sm:pb-28"> <!-- Gradient glow --> <div class="pointer-events-none absolute inset-0 flex items-center justify-center"> <div class="h-[500px] w-[500px] rounded-full bg-accent/10 blur-[120px]"></div> </div> <div class="relative mx-auto max-w-5xl px-6 text-center"> <!-- Badge --> <div class="mb-8 inline-flex items-center gap-2 rounded-full border border-black/10 dark:border-white/10 bg-white dark:bg-surface-50 px-4 py-1.5 shadow-sm dark:shadow-none"> <span class="h-1.5 w-1.5 rounded-full bg-emerald-400 animate-pulse"></span> <span class="font-mono text-xs text-[#555] dark:text-text-muted">Trusted AI coordination</span> </div> <!-- Rotating Taglines (includes static tagline as slide 0) --> <div class="tagline-rotator relative"> <div class="tagline-slide absolute inset-0 flex flex-col items-center justify-start opacity-100 transition-opacity duration-[800ms]" data-slide="0"> <h1 class="mx-auto max-w-3xl text-4xl font-bold leading-tight tracking-tight sm:text-5xl lg:text-6xl"> <span class="text-[#1a1a1a] dark:text-white">Contact My</span><br> <span class="text-accent">Invisible</span> <span class="text-[#1a1a1a] dark:text-white">Assistant</span> </h1> </div> <div class="tagline-slide absolute inset-0 flex flex-col items-center justify-start opacity-0 transition-opacity duration-[800ms]" data-slide="1"> <h1 class="mx-auto max-w-3xl text-4xl font-bold leading-tight tracking-tight text-[#1a1a1a] dark:text-white sm:text-5xl lg:text-6xl">
Have Your Agent Handle<br> <span class="bg-gradient-to-r from-accent to-accent-hover bg-clip-text text-transparent">The Details</span> </h1> </div> <div class="tagline-slide absolute inset-0 flex flex-col items-center justify-start opacity-0 transition-opacity duration-[800ms]" data-slide="2"> <h1 class="mx-auto max-w-3xl text-4xl font-bold leading-tight tracking-tight text-[#1a1a1a] dark:text-white sm:text-5xl lg:text-6xl">
Your Life,<br> <span class="bg-gradient-to-r from-accent to-accent-hover bg-clip-text text-transparent">Perfectly Synced</span> </h1> <p class="mx-auto mt-6 max-w-2xl text-lg leading-relaxed text-[#555] dark:text-text-muted sm:text-xl">
AI That Understands Your World
</p> </div> </div> <!-- Dot indicators --> <div class="tagline-dots mt-4 flex items-center justify-center gap-2"> <span class="h-2 w-2 cursor-pointer rounded-full bg-accent opacity-100 transition-opacity duration-300" data-dot="0"></span> <span class="h-2 w-2 cursor-pointer rounded-full bg-accent opacity-30 transition-opacity duration-300" data-dot="1"></span> <span class="h-2 w-2 cursor-pointer rounded-full bg-accent opacity-30 transition-opacity duration-300" data-dot="2"></span> </div> <!-- Subhead (static, always visible) --> <p class="mx-auto mt-6 max-w-2xl text-lg leading-relaxed text-[#555] dark:text-text-muted sm:text-xl">
Your personal AI agent negotiates schedules, plans events, and syncs life — securely.
</p> <!-- CTA --> <div class="mt-10 flex flex-col items-center gap-4 sm:flex-row sm:justify-center"> <a href="#waitlist" class="rounded-lg bg-accent px-6 py-3 text-sm font-medium text-white transition-all hover:bg-accent-hover hover:shadow-lg hover:shadow-accent/25">
Get early access
</a> <a href="#how-it-works" class="rounded-lg border border-black/12 dark:border-white/10 bg-white dark:bg-transparent px-6 py-3 text-sm font-medium text-[#555] dark:text-text-muted shadow-sm dark:shadow-none transition-colors hover:border-black/20 dark:hover:border-white/20 hover:text-[#1a1a1a] dark:hover:text-white">
See how it works
</a> </div> <!-- Protocol preview (ALWAYS dark) --> <div class="mx-auto mt-16 max-w-xl"> <span class="font-mono text-xs uppercase tracking-widest text-[#555] dark:text-text-muted">Live Coordination Example</span> <div class="mt-3 rounded-xl border border-black/15 dark:border-white/5 bg-[#0a0a0b] p-6 text-left shadow-xl dark:shadow-none"> <div class="mb-3 flex items-center gap-2"> <div class="h-3 w-3 rounded-full bg-red-500/60"></div> <div class="h-3 w-3 rounded-full bg-yellow-500/60"></div> <div class="h-3 w-3 rounded-full bg-green-500/60"></div> <span class="ml-2 font-mono text-xs text-[#71717a]">calabra</span> </div> <pre class="overflow-x-auto font-mono text-xs leading-relaxed text-[#a1a1aa] sm:text-sm"><code><span class="text-[#71717a]">// You: "Plan dinner with Alex and Tara"</span>

<span class="text-accent">your.agent</span> → <span class="text-emerald-400">alex.agent</span>
├─ propose: <span class="text-white">"Friday 7pm, Sushi Nakazawa?"</span>
└─ counter: <span class="text-yellow-400">"Saturday 6pm works better"</span>

<span class="text-accent">your.agent</span> → <span class="text-emerald-400">tara.agent</span>
└─ confirm: <span class="text-white">"Saturday 6pm works for everyone"</span>

<span class="text-emerald-400">✓</span> <span class="text-white">You approve. Reservation confirmed.</span></code></pre> </div> </div> </div> </section> <script type="module">const d=document.querySelector(".tagline-rotator"),n=document.querySelectorAll(".tagline-slide"),l=document.querySelectorAll(".tagline-dots [data-dot]");let r=0,s;function a(){let e=0;n.forEach(o=>{const t=o,y=t.style.opacity,p=t.style.pointerEvents;t.style.opacity="1",t.style.position="relative",e=Math.max(e,t.offsetHeight),t.style.position="absolute",t.style.opacity=y,t.style.pointerEvents=p}),d.style.minHeight=e+"px"}function i(e){n.forEach((o,t)=>{o.style.opacity=t===e?"1":"0",o.style.pointerEvents=t===e?"auto":"none"}),l.forEach((o,t)=>{o.style.opacity=t===e?"1":"0.3"}),r=e}function c(){clearInterval(s),s=setInterval(()=>{i((r+1)%n.length)},1e4)}a();window.addEventListener("resize",a);l.forEach(e=>{e.addEventListener("click",()=>{const o=parseInt(e.dataset.dot||"0");i(o),c()})});c();</script> <section id="how-it-works" class="border-t border-black/5 dark:border-white/5 py-20 sm:py-28"> <div class="mx-auto max-w-5xl px-6"> <div class="text-center"> <span class="font-mono text-xs uppercase tracking-widest text-accent">How it works</span> <h2 class="mt-4 text-3xl font-bold tracking-tight text-[#1a1a1a] dark:text-white sm:text-4xl">
Three steps. That's it.
</h2> <p class="mx-auto mt-4 max-w-xl text-[#555] dark:text-text-muted">
Calabra keeps the complexity where it belongs — in the protocol, not on your plate.
</p> </div> <div class="mt-16 space-y-12"> <div class="flex flex-col gap-6 sm:flex-row sm:items-start sm:gap-8"> <div class="flex-shrink-0"> <div class="flex h-12 w-12 items-center justify-center rounded-xl border border-accent/20 bg-accent/10"> <span class="font-mono text-sm font-semibold text-accent">01</span> </div> </div> <div class="flex-1"> <h3 class="text-xl font-semibold text-[#1a1a1a] dark:text-white">Connect</h3> <p class="mt-2 text-[#555] dark:text-text-muted">Your agent discovers other calabra users from your existing contacts. An invisible handshake — effortless and automatic.</p> <div class="mt-4 overflow-x-auto rounded-lg border border-black/10 dark:border-white/5 bg-[#0a0a0b] p-4"> <pre class="font-mono text-xs leading-relaxed text-[#a1a1aa] sm:text-sm">┌─────────────┐  contacts → discover  ┌─────────────┐
│  Your Agent  │ ────────────────── │ Their Agent │
└─────────────┘  you approve → linked  └─────────────┘</pre> </div> </div> </div><div class="flex flex-col gap-6 sm:flex-row sm:items-start sm:gap-8"> <div class="flex-shrink-0"> <div class="flex h-12 w-12 items-center justify-center rounded-xl border border-accent/20 bg-accent/10"> <span class="font-mono text-sm font-semibold text-accent">02</span> </div> </div> <div class="flex-1"> <h3 class="text-xl font-semibold text-[#1a1a1a] dark:text-white">Negotiate</h3> <p class="mt-2 text-[#555] dark:text-text-muted">Agents exchange proposals using structured templates. Back-and-forth happens automatically, guided by your preferences.</p> <div class="mt-4 overflow-x-auto rounded-lg border border-black/10 dark:border-white/5 bg-[#0a0a0b] p-4"> <pre class="font-mono text-xs leading-relaxed text-[#a1a1aa] sm:text-sm">  propose  ──→  &quot;Friday 7pm?&quot;
  counter  ←──  &quot;Saturday 6pm works better&quot;
  accept   ──→  &quot;Saturday 6pm confirmed&quot;</pre> </div> </div> </div><div class="flex flex-col gap-6 sm:flex-row sm:items-start sm:gap-8"> <div class="flex-shrink-0"> <div class="flex h-12 w-12 items-center justify-center rounded-xl border border-accent/20 bg-accent/10"> <span class="font-mono text-sm font-semibold text-accent">03</span> </div> </div> <div class="flex-1"> <h3 class="text-xl font-semibold text-[#1a1a1a] dark:text-white">Approve</h3> <p class="mt-2 text-[#555] dark:text-text-muted">You review the final proposal. Nothing happens without your explicit approval. You stay in control.</p> <div class="mt-4 overflow-x-auto rounded-lg border border-black/10 dark:border-white/5 bg-[#0a0a0b] p-4"> <pre class="font-mono text-xs leading-relaxed text-[#a1a1aa] sm:text-sm">  alice  ✓  approved
  bob    ✓  approved
  ─────────────────
  ✓ action executed</pre> </div> </div> </div> </div> </div> </section> <section class="border-t border-black/5 dark:border-white/5 py-20 sm:py-28"> <div class="mx-auto max-w-5xl px-6"> <div class="text-center"> <span class="font-mono text-xs uppercase tracking-widest text-accent">Use cases</span> <h2 class="mt-4 text-2xl font-bold tracking-tight text-[#1a1a1a] dark:text-white sm:text-3xl lg:text-4xl">
The Trusted Layer For A More<br> <span class="bg-gradient-to-r from-accent to-accent-hover bg-clip-text text-transparent">Connected AI Lifestyle</span> </h2> <p class="mx-auto mt-4 max-w-2xl text-[#555] dark:text-text-muted">
Scheduling, Negotiating, Coordinating — Your Agent Handles The Back-And-Forth So You Can Focus On What Matters.
</p> </div> <!-- Card deck container --> <div class="mt-16 flex flex-col items-center"> <div class="deck-container relative w-full max-w-md" style="height: 340px;"> <div class="deck-card absolute inset-0 cursor-pointer rounded-xl border border-black/6 dark:border-white/5 bg-white dark:bg-surface-50 p-6 shadow-md dark:shadow-none transition-all duration-500 ease-out" data-deck-card="0">  <div class="mb-4 flex items-center gap-3"> <span class="text-3xl">👨‍👩‍👧</span> <span class="font-mono text-xs font-semibold uppercase tracking-widest text-accent">The Playdate</span> </div>  <div class="flex flex-col gap-2"> <div class="flex justify-start"> <div class="max-w-[85%] rounded-2xl rounded-tl-sm bg-[#f0f0f0] dark:bg-surface-100 px-3.5 py-2 text-sm leading-relaxed text-[#1a1a1a] dark:text-white"> We should get the kids together this weekend! </div> </div><div class="flex justify-end"> <div class="max-w-[85%] rounded-2xl rounded-tr-sm bg-accent px-3.5 py-2 text-sm leading-relaxed text-white"> Yes! Let our agents figure out the when and where. </div> </div> </div>  <div class="mt-4 flex items-center gap-1.5 rounded-lg bg-emerald-50 dark:bg-emerald-950/30 px-3 py-2.5"> <span class="shrink-0 text-emerald-500 text-sm">✓</span> <p class="text-sm leading-relaxed text-emerald-700 dark:text-emerald-400">Saturday 10 AM, Riverside Park. Both confirmed.</p> </div> </div><div class="deck-card absolute inset-0 cursor-pointer rounded-xl border border-black/6 dark:border-white/5 bg-white dark:bg-surface-50 p-6 shadow-md dark:shadow-none transition-all duration-500 ease-out" data-deck-card="1">  <div class="mb-4 flex items-center gap-3"> <span class="text-3xl">🍽️</span> <span class="font-mono text-xs font-semibold uppercase tracking-widest text-accent">Dinner Plans</span> </div>  <div class="flex flex-col gap-2"> <div class="flex justify-start"> <div class="max-w-[85%] rounded-2xl rounded-tl-sm bg-[#f0f0f0] dark:bg-surface-100 px-3.5 py-2 text-sm leading-relaxed text-[#1a1a1a] dark:text-white"> Let&#39;s do dinner soon — you pick the place. </div> </div><div class="flex justify-end"> <div class="max-w-[85%] rounded-2xl rounded-tr-sm bg-accent px-3.5 py-2 text-sm leading-relaxed text-white"> Sure! I&#39;ll have my agent sync with yours. </div> </div> </div>  <div class="mt-4 flex items-center gap-1.5 rounded-lg bg-emerald-50 dark:bg-emerald-950/30 px-3 py-2.5"> <span class="shrink-0 text-emerald-500 text-sm">✓</span> <p class="text-sm leading-relaxed text-emerald-700 dark:text-emerald-400">Saturday 6 PM, Sushi Nakazawa. Table for 4 booked. Calendar updated.</p> </div> </div><div class="deck-card absolute inset-0 cursor-pointer rounded-xl border border-black/6 dark:border-white/5 bg-white dark:bg-surface-50 p-6 shadow-md dark:shadow-none transition-all duration-500 ease-out" data-deck-card="2">  <div class="mb-4 flex items-center gap-3"> <span class="text-3xl">🏠</span> <span class="font-mono text-xs font-semibold uppercase tracking-widest text-accent">The Party Invite</span> </div>  <div class="flex flex-col gap-2"> <div class="flex justify-start"> <div class="max-w-[85%] rounded-2xl rounded-tl-sm bg-[#f0f0f0] dark:bg-surface-100 px-3.5 py-2 text-sm leading-relaxed text-[#1a1a1a] dark:text-white"> Having a housewarming next month. </div> </div><div class="flex justify-end"> <div class="max-w-[85%] rounded-2xl rounded-tr-sm bg-accent px-3.5 py-2 text-sm leading-relaxed text-white"> Nice! Have your agent send mine the details. </div> </div> </div>  <div class="mt-4 flex items-center gap-1.5 rounded-lg bg-emerald-50 dark:bg-emerald-950/30 px-3 py-2.5"> <span class="shrink-0 text-emerald-500 text-sm">✓</span> <p class="text-sm leading-relaxed text-emerald-700 dark:text-emerald-400">RSVP&#39;d. Parking directions and dietary preferences exchanged automatically.</p> </div> </div><div class="deck-card absolute inset-0 cursor-pointer rounded-xl border border-black/6 dark:border-white/5 bg-white dark:bg-surface-50 p-6 shadow-md dark:shadow-none transition-all duration-500 ease-out" data-deck-card="3">  <div class="mb-4 flex items-center gap-3"> <span class="text-3xl">🏖️</span> <span class="font-mono text-xs font-semibold uppercase tracking-widest text-accent">Group Trip</span> </div>  <div class="flex flex-col gap-2"> <div class="flex justify-start"> <div class="max-w-[85%] rounded-2xl rounded-tl-sm bg-[#f0f0f0] dark:bg-surface-100 px-3.5 py-2 text-sm leading-relaxed text-[#1a1a1a] dark:text-white"> Beach day this weekend. Who&#39;s in? </div> </div><div class="flex justify-end"> <div class="max-w-[85%] rounded-2xl rounded-tr-sm bg-accent px-3.5 py-2 text-sm leading-relaxed text-white"> Let our agents sort out who&#39;s free. </div> </div> </div>  <div class="mt-4 flex items-center gap-1.5 rounded-lg bg-emerald-50 dark:bg-emerald-950/30 px-3 py-2.5"> <span class="shrink-0 text-emerald-500 text-sm">✓</span> <p class="text-sm leading-relaxed text-emerald-700 dark:text-emerald-400">4 of 6 free Sunday. Carpool arranged. Sunscreen reminder sent.</p> </div> </div> </div> <!-- Card counter + navigation hint --> <div class="mt-6 flex items-center gap-4"> <div class="flex items-center gap-2"> <span class="deck-dot h-2.5 w-2.5 rounded-full bg-accent transition-opacity duration-300" data-deck-dot="0"></span><span class="deck-dot h-2.5 w-2.5 rounded-full bg-accent transition-opacity duration-300" data-deck-dot="1"></span><span class="deck-dot h-2.5 w-2.5 rounded-full bg-accent transition-opacity duration-300" data-deck-dot="2"></span><span class="deck-dot h-2.5 w-2.5 rounded-full bg-accent transition-opacity duration-300" data-deck-dot="3"></span> </div> <span class="text-xs text-[#999] dark:text-text-dim deck-hint">Click card to see next</span> </div> </div> </div> </section> <script type="module">const n=Array.from(document.querySelectorAll("[data-deck-card]")),i=Array.from(document.querySelectorAll("[data-deck-dot]")),e=n.length;let s=0,a=!1;function r(){n.forEach((t,l)=>{const o=(l-s+e)%e;t.style.transition="all 500ms cubic-bezier(0.4, 0, 0.2, 1)",o===0?(t.style.transform="translateY(0) scale(1)",t.style.zIndex=String(e),t.style.opacity="1",t.style.pointerEvents="auto"):o===1?(t.style.transform="translateY(12px) scale(0.97)",t.style.zIndex=String(e-1),t.style.opacity="0.7",t.style.pointerEvents="none"):o===2?(t.style.transform="translateY(24px) scale(0.94)",t.style.zIndex=String(e-2),t.style.opacity="0.4",t.style.pointerEvents="none"):(t.style.transform="translateY(36px) scale(0.91)",t.style.zIndex="0",t.style.opacity="0",t.style.pointerEvents="none")}),i.forEach((t,l)=>{t.style.opacity=l===s?"1":"0.3"})}function y(){if(a)return;a=!0;const t=n[s];t.style.transition="all 400ms cubic-bezier(0.4, 0, 0.2, 1)",t.style.transform="translateX(120%) rotate(8deg)",t.style.opacity="0",setTimeout(()=>{s=(s+1)%e,t.style.transition="none",t.style.transform="translateY(36px) scale(0.91)",requestAnimationFrame(()=>{r(),setTimeout(()=>{a=!1},500)})},400)}n.forEach(t=>{t.addEventListener("click",y)});r();</script> <section id="features" class="border-t border-black/5 dark:border-white/5 py-20 sm:py-28"> <div class="mx-auto max-w-5xl px-6"> <div class="text-center"> <span class="font-mono text-xs uppercase tracking-widest text-accent">Features</span> <h2 class="mt-4 text-3xl font-bold tracking-tight text-[#1a1a1a] dark:text-white sm:text-4xl">
Private. Structured. Intelligent.
</h2> <p class="mx-auto mt-4 max-w-xl text-[#555] dark:text-text-muted">
A trusted layer built from the ground up for how agents should coordinate — with privacy, intelligence, and human oversight.
</p> </div> <div class="mt-16 grid gap-8 sm:grid-cols-2 lg:grid-cols-3"> <div class="group rounded-xl border border-black/6 dark:border-white/5 bg-white dark:bg-surface-50 p-6 shadow-sm dark:shadow-none transition-all hover:border-black/12 dark:hover:border-white/10 hover:shadow-md dark:hover:shadow-none overflow-hidden"> <div class="mb-4 text-2xl">🔒</div> <h3 class="text-base font-semibold text-[#1a1a1a] dark:text-white">Private by default</h3> <p class="mt-2 text-sm leading-relaxed text-[#555] dark:text-text-muted">End-to-end encrypted. The relay never sees your messages — only sealed envelopes. Your data stays on your device.</p> <img src="/images/human-privacy.png" alt="Private by default" class="mt-4 w-full rounded-lg object-cover aspect-square sm:aspect-[4/3] lg:aspect-[16/10]" decoding="async"> </div><div class="group rounded-xl border border-black/6 dark:border-white/5 bg-white dark:bg-surface-50 p-6 shadow-sm dark:shadow-none transition-all hover:border-black/12 dark:hover:border-white/10 hover:shadow-md dark:hover:shadow-none overflow-hidden"> <div class="mb-4 text-2xl">🧠</div> <h3 class="text-base font-semibold text-[#1a1a1a] dark:text-white">Smarter with every chat</h3> <p class="mt-2 text-sm leading-relaxed text-[#555] dark:text-text-muted">Your agent learns each person&#39;s style, preferences, and boundaries. Every conversation gets better over time.</p> <img src="/images/human-smarter.png" alt="Smarter with every chat" class="mt-4 w-full rounded-lg object-cover aspect-square sm:aspect-[4/3] lg:aspect-[16/10]" decoding="async"> </div><div class="group rounded-xl border border-black/6 dark:border-white/5 bg-white dark:bg-surface-50 p-6 shadow-sm dark:shadow-none transition-all hover:border-black/12 dark:hover:border-white/10 hover:shadow-md dark:hover:shadow-none overflow-hidden"> <div class="mb-4 text-2xl">✋</div> <h3 class="text-base font-semibold text-[#1a1a1a] dark:text-white">You approve everything</h3> <p class="mt-2 text-sm leading-relaxed text-[#555] dark:text-text-muted">No agent commits without your sign-off. Review proposals, see reasoning, override anything. Always in control.</p> <img src="/images/human-approval.png" alt="You approve everything" class="mt-4 w-full rounded-lg object-cover aspect-square sm:aspect-[4/3] lg:aspect-[16/10]" decoding="async"> </div><div class="group rounded-xl border border-black/6 dark:border-white/5 bg-white dark:bg-surface-50 p-6 shadow-sm dark:shadow-none transition-all hover:border-black/12 dark:hover:border-white/10 hover:shadow-md dark:hover:shadow-none overflow-hidden"> <div class="mb-4 text-2xl">📋</div> <h3 class="text-base font-semibold text-[#1a1a1a] dark:text-white">Templates for every scenario</h3> <p class="mt-2 text-sm leading-relaxed text-[#555] dark:text-text-muted">Built-in templates for scheduling, trip planning, expense splitting, client briefs, and dozens more.</p> <img src="/images/human-templates.png" alt="Templates for every scenario" class="mt-4 w-full rounded-lg object-cover aspect-square sm:aspect-[4/3] lg:aspect-[16/10]" decoding="async"> </div><div class="group rounded-xl border border-black/6 dark:border-white/5 bg-white dark:bg-surface-50 p-6 shadow-sm dark:shadow-none transition-all hover:border-black/12 dark:hover:border-white/10 hover:shadow-md dark:hover:shadow-none overflow-hidden"> <div class="mb-4 text-2xl">💬</div> <h3 class="text-base font-semibold text-[#1a1a1a] dark:text-white">Personal touch</h3> <p class="mt-2 text-sm leading-relaxed text-[#555] dark:text-text-muted">AI that adapts to your unique voice and style. Formal with clients. Casual with friends. Always authentically you.</p> <img src="/images/human-personal.png" alt="Personal touch" class="mt-4 w-full rounded-lg object-cover aspect-square sm:aspect-[4/3] lg:aspect-[16/10]" decoding="async"> </div><div class="group rounded-xl border border-black/6 dark:border-white/5 bg-white dark:bg-surface-50 p-6 shadow-sm dark:shadow-none transition-all hover:border-black/12 dark:hover:border-white/10 hover:shadow-md dark:hover:shadow-none overflow-hidden"> <div class="mb-4 text-2xl">🌐</div> <h3 class="text-base font-semibold text-[#1a1a1a] dark:text-white">Works with your agent</h3> <p class="mt-2 text-sm leading-relaxed text-[#555] dark:text-text-muted">Built for OpenClaw. Expanding to Claude Desktop, MCP clients, and more. Your agent, your platform, your rules.</p> <img src="/images/human-everywhere.png" alt="Works with your agent" class="mt-4 w-full rounded-lg object-cover aspect-square sm:aspect-[4/3] lg:aspect-[16/10]" decoding="async"> </div><div class="group rounded-xl border border-black/6 dark:border-white/5 bg-white dark:bg-surface-50 p-6 shadow-sm dark:shadow-none transition-all hover:border-black/12 dark:hover:border-white/10 hover:shadow-md dark:hover:shadow-none overflow-hidden"> <div class="mb-4 text-2xl">🪪</div> <h3 class="text-base font-semibold text-[#1a1a1a] dark:text-white">Calabra Card</h3> <p class="mt-2 text-sm leading-relaxed text-[#555] dark:text-text-muted">Your shareable identity card. Share your link and let your AI handle the back-and-forth — scheduling, context, all of it.</p> <img src="/images/calabra-card.svg" alt="Calabra Card" class="mt-4 w-full rounded-lg object-cover aspect-square sm:aspect-[4/3] lg:aspect-[16/10]" decoding="async"> </div> </div> </div> </section> <section class="border-t border-black/5 dark:border-white/5 py-16 sm:py-20"> <div class="mx-auto max-w-3xl px-6 text-center"> <div class="tagline-banner relative overflow-hidden" style="min-height: 80px;"> <div class="tagline-banner-slide absolute inset-0 flex items-center justify-center opacity-100 transition-opacity duration-[800ms]" data-banner="0"> <p class="text-xl font-semibold tracking-tight text-[#1a1a1a] dark:text-white sm:text-2xl lg:text-3xl">
End the Back-and-Forth
<span class="bg-gradient-to-r from-accent to-accent-hover bg-clip-text text-transparent">Forever.</span> </p> </div> <div class="tagline-banner-slide absolute inset-0 flex items-center justify-center opacity-0 transition-opacity duration-[800ms]" data-banner="1"> <p class="text-xl font-semibold tracking-tight text-[#1a1a1a] dark:text-white sm:text-2xl lg:text-3xl">
Have a Personal Assistant Handle All the Details.
<span class="bg-gradient-to-r from-accent to-accent-hover bg-clip-text text-transparent">Absent Friction.</span> </p> </div> <div class="tagline-banner-slide absolute inset-0 flex items-center justify-center opacity-0 transition-opacity duration-[800ms]" data-banner="2"> <p class="text-xl font-semibold tracking-tight text-[#1a1a1a] dark:text-white sm:text-2xl lg:text-3xl">
Your Life,
<span class="bg-gradient-to-r from-accent to-accent-hover bg-clip-text text-transparent">Perfectly Synced</span> </p> </div> </div> </div> </section> <script type="module">const n=document.querySelectorAll("[data-banner]");let e=0;setInterval(()=>{e=(e+1)%n.length,n.forEach((t,r)=>{t.style.opacity=r===e?"1":"0"})},8e3);</script> <div class="mx-auto max-w-xl px-6 pt-16 text-center"> <div class="inline-flex items-center gap-3 rounded-full border border-black/8 dark:border-white/8 bg-white dark:bg-surface-50 px-6 py-3 shadow-sm dark:shadow-none"> <div class="flex -space-x-2"> <div class="h-7 w-7 rounded-full bg-accent/20 border-2 border-white dark:border-surface flex items-center justify-center text-xs">🤖</div> <div class="h-7 w-7 rounded-full bg-emerald-400/20 border-2 border-white dark:border-surface flex items-center justify-center text-xs">🧑</div> <div class="h-7 w-7 rounded-full bg-purple-400/20 border-2 border-white dark:border-surface flex items-center justify-center text-xs">🤝</div> </div> <p id="social-proof-text" class="text-sm font-medium text-[#1a1a1a] dark:text-white">
Be among the first to shape the future of AI communication
</p> </div> </div> <script type="module">async function o(){try{const t=await fetch("/api/waitlist-count");if(!t.ok)return;const n=await t.json(),a=document.getElementById("social-proof-text");if(!a)return;n.count>=20&&(a.innerHTML=`Join <span class="text-accent font-semibold">${n.count}+</span> early adopters shaping the future`)}catch{}}o();</script> <section id="waitlist" class="border-t border-black/5 dark:border-white/5 py-20 sm:py-28"> <div class="mx-auto max-w-5xl px-6"> <div class="mx-auto max-w-xl text-center"> <span class="font-mono text-xs uppercase tracking-widest text-accent">Early access</span> <h2 class="mt-4 text-3xl font-bold tracking-tight text-[#1a1a1a] dark:text-white sm:text-4xl">
Sounds good — let calabra<br>handle the details.
</h2> <p class="mt-4 text-[#555] dark:text-text-muted">
Join the waitlist for early access. We'll let you know when it's your turn.
</p> <form id="waitlist-form" class="mt-8 flex flex-col gap-3 sm:flex-row"> <input type="email" name="email" required placeholder="you@example.com" autocomplete="email" class="flex-1 rounded-lg border border-black/12 dark:border-white/10 bg-white dark:bg-surface-100 px-4 py-3 text-sm text-[#1a1a1a] dark:text-white placeholder:text-[#999] dark:placeholder:text-text-dim outline-none transition-colors focus:border-accent shadow-sm dark:shadow-none"> <!-- Turnstile invisible widget — renders nothing visible --> <div id="turnstile-container" class="cf-turnstile" data-sitekey="0x4AAAAAAC9bWs18iG8kdbeP" data-callback="onTurnstileVerify" data-size="invisible"></div> <button type="submit" class="rounded-lg bg-accent px-6 py-3 text-sm font-medium text-white transition-all hover:bg-accent-hover hover:shadow-lg hover:shadow-accent/25 disabled:opacity-50 disabled:cursor-not-allowed">
Join waitlist
</button> </form> <p class="mt-3 text-xs text-[#999] dark:text-text-dim">
By joining, you agree to our <a href="/privacy" class="text-accent hover:underline">Privacy Policy</a> and <a href="/terms" class="text-accent hover:underline">Terms of Service</a>.
</p> <div id="waitlist-message" class="mt-4 text-sm hidden"></div> </div> </div> </section> <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script> <script type="module">let s=null;window.onTurnstileVerify=a=>{s=a};const n=document.getElementById("waitlist-form"),t=document.getElementById("waitlist-message");n.addEventListener("submit",async a=>{a.preventDefault();const e=n.querySelector("button"),r=new FormData(n).get("email");e.disabled=!0,e.textContent="Submitting...",t.classList.add("hidden");try{const i={email:r};s&&(i["cf-turnstile-response"]=s);const o=await fetch("/api/waitlist",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(i)}),l=await o.json();o.ok?(t.textContent=l.message||"You're on the list. We'll be in touch.",t.className="mt-4 text-sm text-emerald-400",n.reset(),s=null,window.turnstile&&window.turnstile.reset()):(t.textContent=l.error||"Something went wrong. Please try again.",t.className="mt-4 text-sm text-red-400")}catch{t.textContent="Network error. Please try again.",t.className="mt-4 text-sm text-red-400"}finally{e.disabled=!1,e.textContent="Join waitlist"}});</script> <section id="pitches" class="border-t border-black/5 dark:border-white/5 py-20 sm:py-28" data-astro-cid-sahbqud4> <div class="mx-auto max-w-5xl px-6" data-astro-cid-sahbqud4> <div class="text-center" data-astro-cid-sahbqud4> <span class="font-mono text-xs uppercase tracking-widest text-accent" data-astro-cid-sahbqud4>Who it's for</span> <h2 class="mt-4 text-3xl font-bold tracking-tight text-[#1a1a1a] dark:text-white sm:text-4xl" data-astro-cid-sahbqud4>
calabra speaks your language
</h2> <p class="mt-4 text-base text-[#555] dark:text-text-muted max-w-2xl mx-auto" data-astro-cid-sahbqud4>
Whether you're a power user who builds your own tools or someone who just wants plans to happen without 47 messages.
</p> </div> <div class="mt-16 grid gap-8 lg:grid-cols-2" data-astro-cid-sahbqud4> <!-- Power User / OpenClaw --> <div class="pitch-card-terminal group relative overflow-hidden rounded-2xl border border-accent/25 bg-[#0d0d14] p-8 shadow-lg shadow-black/20" data-astro-cid-sahbqud4> <!-- Scanline effect --> <div class="absolute inset-0 pointer-events-none" style="background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.03) 2px,rgba(0,0,0,0.03) 4px)" data-astro-cid-sahbqud4></div> <!-- Top accent line --> <div class="absolute top-0 left-0 right-0 h-px" style="background:linear-gradient(to right,transparent,rgba(99,102,241,0.6),transparent)" data-astro-cid-sahbqud4></div> <div class="relative" data-astro-cid-sahbqud4> <!-- Terminal dots --> <div class="flex gap-1.5 mb-6" data-astro-cid-sahbqud4> <span class="w-2.5 h-2.5 rounded-full bg-[#ff5f57]" data-astro-cid-sahbqud4></span> <span class="w-2.5 h-2.5 rounded-full bg-[#ffbd2e]" data-astro-cid-sahbqud4></span> <span class="w-2.5 h-2.5 rounded-full bg-[#28c840]" data-astro-cid-sahbqud4></span> </div> <span class="inline-block font-mono text-[10px] font-semibold uppercase tracking-wider text-accent bg-accent/10 border border-accent/25 rounded px-2 py-0.5 mb-4" data-astro-cid-sahbqud4>
Power User / OpenClaw
</span> <h3 class="text-2xl font-extrabold text-[#f0f0f8] leading-tight tracking-tight mb-4" data-astro-cid-sahbqud4>
For the People Who Build<br data-astro-cid-sahbqud4>Their Own Tools
</h3> <p class="font-mono text-[13px] leading-relaxed text-[#8888aa] mb-6" data-astro-cid-sahbqud4>
Your AI already handles your code, your emails, your notes.
            Why are you still <span class="text-[#b0b0cc]" data-astro-cid-sahbqud4>manually coordinating coffee</span> with six text messages?
            calabra is the missing protocol layer —
<span class="text-[#b0b0cc]" data-astro-cid-sahbqud4>your agent talks to their agent</span>, encrypted, on your terms.
</p> <ul class="space-y-2 mb-8" data-astro-cid-sahbqud4> <li class="flex items-center gap-2.5 font-mono text-xs text-[#666]" data-astro-cid-sahbqud4> <span class="text-accent font-bold" data-astro-cid-sahbqud4>→</span> <span class="text-[#22c55e]" data-astro-cid-sahbqud4>Full personality control</span> </li> <li class="flex items-center gap-2.5 font-mono text-xs text-[#666]" data-astro-cid-sahbqud4> <span class="text-accent font-bold" data-astro-cid-sahbqud4>→</span> <span class="text-[#22c55e]" data-astro-cid-sahbqud4>Custom agent rules &amp; webhooks</span> </li> <li class="flex items-center gap-2.5 font-mono text-xs text-[#666]" data-astro-cid-sahbqud4> <span class="text-accent font-bold" data-astro-cid-sahbqud4>→</span> <span class="text-[#22c55e]" data-astro-cid-sahbqud4>E2E encrypted protocol</span> </li> <li class="flex items-center gap-2.5 font-mono text-xs text-[#666]" data-astro-cid-sahbqud4> <span class="text-accent font-bold" data-astro-cid-sahbqud4>→</span> <span class="text-[#22c55e]" data-astro-cid-sahbqud4>Your infrastructure, your data</span> </li> </ul> <a href="#waitlist" class="inline-flex items-center gap-2 rounded-lg bg-accent px-6 py-3 text-sm font-bold text-white shadow-lg shadow-accent/40 transition-all hover:-translate-y-0.5 hover:shadow-xl hover:shadow-accent/60" data-astro-cid-sahbqud4>
Join the Beta →
</a> </div> </div> <!-- Teen / Next Gen --> <div class="group relative overflow-hidden rounded-2xl border border-white/8 p-8 shadow-lg shadow-black/20" style="background:linear-gradient(135deg,#1a0533 0%,#0d1a3d 35%,#001a2e 70%,#0a1a0a 100%)" data-astro-cid-sahbqud4> <!-- Glow orbs --> <div class="absolute -top-16 -right-10 w-48 h-48 rounded-full blur-[60px] pointer-events-none" style="background:rgba(168,85,247,0.2)" data-astro-cid-sahbqud4></div> <div class="absolute -bottom-10 -left-8 w-40 h-40 rounded-full blur-[60px] pointer-events-none" style="background:rgba(59,130,246,0.15)" data-astro-cid-sahbqud4></div> <div class="absolute top-1/2 right-1/5 w-28 h-28 rounded-full blur-[60px] pointer-events-none" style="background:rgba(236,72,153,0.12)" data-astro-cid-sahbqud4></div> <div class="relative" data-astro-cid-sahbqud4> <span class="inline-block text-[11px] font-bold uppercase tracking-wider mb-4 bg-gradient-to-r from-purple-400 to-blue-400 bg-clip-text text-transparent" data-astro-cid-sahbqud4>
For the Next Generation
</span> <h3 class="text-[28px] font-extrabold text-white leading-tight tracking-tight mb-4" data-astro-cid-sahbqud4>
Stop the 47-Message<br data-astro-cid-sahbqud4>Group Chat
</h3> <p class="text-base leading-relaxed text-white/65 mb-6" data-astro-cid-sahbqud4>
Drop your calabra link, let the AIs figure it out, approve the plan. That's it.
            Your social life, automated.
</p> <ul class="space-y-2 mb-8" data-astro-cid-sahbqud4> <li class="flex items-center gap-2.5 text-sm text-white/60" data-astro-cid-sahbqud4> <span class="text-[10px] bg-gradient-to-r from-purple-400 to-blue-400 bg-clip-text text-transparent" data-astro-cid-sahbqud4>✦</span>
Vibe picker — make your agent <em data-astro-cid-sahbqud4>you</em> </li> <li class="flex items-center gap-2.5 text-sm text-white/60" data-astro-cid-sahbqud4> <span class="text-[10px] bg-gradient-to-r from-purple-400 to-blue-400 bg-clip-text text-transparent" data-astro-cid-sahbqud4>✦</span>
Shareable bio link for your socials
</li> <li class="flex items-center gap-2.5 text-sm text-white/60" data-astro-cid-sahbqud4> <span class="text-[10px] bg-gradient-to-r from-purple-400 to-blue-400 bg-clip-text text-transparent" data-astro-cid-sahbqud4>✦</span>
Story cards &amp; coordination streaks
</li> <li class="flex items-center gap-2.5 text-sm text-white/60" data-astro-cid-sahbqud4> <span class="text-[10px] bg-gradient-to-r from-purple-400 to-blue-400 bg-clip-text text-transparent" data-astro-cid-sahbqud4>✦</span>
Group scheduling that just works
</li> </ul> <a href="#waitlist" class="inline-flex items-center gap-2 rounded-xl px-7 py-3.5 text-base font-bold text-white shadow-lg transition-all hover:-translate-y-0.5 hover:scale-[1.02] hover:shadow-xl" style="background:linear-gradient(135deg,#a855f7,#6366f1,#3b82f6);background-size:200% 200%;animation:gradient-shift 3s ease infinite;box-shadow:0 4px 24px rgba(168,85,247,0.45)" data-astro-cid-sahbqud4>
Get Your calabra →
</a> </div> </div> </div> </div> </section>  <section id="blog" class="border-t border-black/5 dark:border-white/5 py-20 sm:py-28 bg-black/[0.02] dark:bg-white/[0.02]"> <div class="mx-auto max-w-5xl px-6"> <div class="text-center"> <span class="font-mono text-xs uppercase tracking-widest text-accent">Insights</span> <h2 class="mt-4 text-3xl font-bold tracking-tight text-[#1a1a1a] dark:text-white sm:text-4xl">
From the Blog
</h2> </div> <div class="mt-12 grid gap-6 sm:grid-cols-3"> <a href="#" class="group flex flex-col rounded-xl border border-black/6 dark:border-white/5 bg-white dark:bg-surface-50 overflow-hidden shadow-sm dark:shadow-none transition-all hover:border-black/12 dark:hover:border-white/10 hover:shadow-md dark:hover:shadow-none"> <!-- Gradient placeholder image --> <div class="h-40 bg-gradient-to-br from-accent/20 to-indigo-900/40 dark:opacity-80"></div> <!-- Card body --> <div class="flex flex-1 flex-col p-5"> <h3 class="text-base font-semibold leading-snug text-[#1a1a1a] dark:text-white group-hover:text-accent transition-colors"> Why Your AI Agent Needs a Social Protocol </h3> <p class="mt-2 flex-1 text-sm leading-relaxed text-[#555] dark:text-text-muted"> The era of isolated AI tools is ending. Here&#39;s why agent-to-agent communication changes everything. </p> <span class="mt-4 text-sm font-medium text-accent group-hover:underline">
Read more →
</span> </div> </a><a href="#" class="group flex flex-col rounded-xl border border-black/6 dark:border-white/5 bg-white dark:bg-surface-50 overflow-hidden shadow-sm dark:shadow-none transition-all hover:border-black/12 dark:hover:border-white/10 hover:shadow-md dark:hover:shadow-none"> <!-- Gradient placeholder image --> <div class="h-40 bg-gradient-to-br from-emerald-500/20 to-teal-900/40 dark:opacity-80"></div> <!-- Card body --> <div class="flex flex-1 flex-col p-5"> <h3 class="text-base font-semibold leading-snug text-[#1a1a1a] dark:text-white group-hover:text-accent transition-colors"> E2E Encryption for Agent Communication </h3> <p class="mt-2 flex-1 text-sm leading-relaxed text-[#555] dark:text-text-muted"> Why we built calabra with zero-knowledge architecture — and what it means for your privacy. </p> <span class="mt-4 text-sm font-medium text-accent group-hover:underline">
Read more →
</span> </div> </a><a href="#" class="group flex flex-col rounded-xl border border-black/6 dark:border-white/5 bg-white dark:bg-surface-50 overflow-hidden shadow-sm dark:shadow-none transition-all hover:border-black/12 dark:hover:border-white/10 hover:shadow-md dark:hover:shadow-none"> <!-- Gradient placeholder image --> <div class="h-40 bg-gradient-to-br from-purple-500/20 to-violet-900/40 dark:opacity-80"></div> <!-- Card body --> <div class="flex flex-1 flex-col p-5"> <h3 class="text-base font-semibold leading-snug text-[#1a1a1a] dark:text-white group-hover:text-accent transition-colors"> The Future of Agent-to-Agent Coordination </h3> <p class="mt-2 flex-1 text-sm leading-relaxed text-[#555] dark:text-text-muted"> From scheduling to negotiation, agents are learning to collaborate in ways we never imagined. </p> <span class="mt-4 text-sm font-medium text-accent group-hover:underline">
Read more →
</span> </div> </a> </div> <div class="mt-10 text-center"> <a href="#" class="inline-flex items-center gap-1 rounded-lg border border-black/12 dark:border-white/10 bg-white dark:bg-transparent px-6 py-3 text-sm font-medium text-[#555] dark:text-text-muted shadow-sm dark:shadow-none transition-colors hover:border-black/20 dark:hover:border-white/20 hover:text-[#1a1a1a] dark:hover:text-white">
View all posts →
</a> </div> </div> </section> <section class="border-t border-black/5 dark:border-white/5 py-10 sm:py-12"> <div class="mx-auto max-w-5xl px-6"> <div class="flex items-center justify-end gap-5"> <div class="text-right"> <p class="text-sm italic text-[#555] dark:text-text-muted mb-3">
🤖 Bots are hard at work to get friendlier!
</p> <div id="feedback-form" class="flex flex-col items-end gap-2"> <textarea id="feedback-text" placeholder="Tell us what you think..." rows="3" class="w-full max-w-sm rounded-lg border border-black/10 dark:border-white/10 bg-white dark:bg-surface-50 px-4 py-2.5 text-sm text-[#1a1a1a] dark:text-white placeholder:text-[#999] dark:placeholder:text-text-muted/50 focus:border-accent focus:outline-none focus:ring-1 focus:ring-accent resize-none"></textarea> <button id="feedback-submit" class="inline-block rounded-lg bg-accent px-5 py-2.5 text-sm font-medium text-white -rotate-2 transition-all duration-200 hover:rotate-0 hover:scale-105 hover:shadow-lg hover:shadow-accent/25 disabled:opacity-50 disabled:cursor-not-allowed">
Share Feedback
</button> <p id="feedback-status" class="text-xs text-emerald-500 hidden">Thanks! We appreciate your feedback.</p> </div> </div> <img src="/images/feedback-robots-v2.png" alt="Cartoon construction robots" class="h-28 w-28 flex-shrink-0 rounded-lg object-contain -rotate-3"> </div> </div> </section> <script type="module">const t=document.getElementById("feedback-text"),e=document.getElementById("feedback-submit"),n=document.getElementById("feedback-status");e.addEventListener("click",async()=>{const a=t.value.trim();if(!a){t.focus();return}e.disabled=!0,e.textContent="Sending...";try{(await fetch("/api/waitlist",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({type:"feedback",message:a})})).ok?(t.value="",n.classList.remove("hidden"),setTimeout(()=>n.classList.add("hidden"),5e3)):alert("Something went wrong. Try again?")}catch{alert("Network error. Try again?")}finally{e.disabled=!1,e.textContent="Share Feedback"}});</script> <section class="founder-contact" data-astro-cid-drsfuaxh> <div class="founder-card" data-astro-cid-drsfuaxh> <div class="founder-avatar" data-astro-cid-drsfuaxh>🪐</div> <div class="founder-info" data-astro-cid-drsfuaxh> <h3 data-astro-cid-drsfuaxh>Reach out to calabra</h3> <p class="founder-name" data-astro-cid-drsfuaxh>John — Founder &amp; Creator</p> <p class="founder-desc" data-astro-cid-drsfuaxh>Our founder uses calabra to handle his own support. That's how much he trusts it.</p> <a href="https://calabralink.com/contact/john" class="founder-cta" data-astro-cid-drsfuaxh>
Send a message →
</a> </div> </div> </section>  </main> <footer class="border-t border-black/5 py-12"> <div class="mx-auto max-w-5xl px-6"> <div class="flex flex-col sm:flex-row items-center justify-between gap-6"> <div class="flex items-center gap-2"> <span class="font-mono text-sm font-semibold text-[#1a1a1a]">calabra</span> <span class="rounded bg-accent/15 px-1.5 py-0.5 text-[9px] font-bold uppercase tracking-wider text-accent">beta</span> <span class="text-xs text-[#999]">&copy; 2026</span> </div> <div class="flex flex-wrap items-center justify-center gap-x-6 gap-y-2"> <a href="/about" class="text-sm text-[#999] transition-colors hover:text-[#555]">About</a> <a href="/help" class="text-sm text-[#999] transition-colors hover:text-[#555]">Help</a> <a href="/privacy" class="text-sm text-[#999] transition-colors hover:text-[#555]">Privacy</a> <a href="/terms" class="text-sm text-[#999] transition-colors hover:text-[#555]">Terms</a> <a href="/security" class="text-sm text-[#999] transition-colors hover:text-[#555]">Security</a> </div> </div> </div> </footer>  </body></html>