PageSourceSearch

https://clowdops.ai/

html clowdops.ai collected 2026-10-05 14:11:52 UTC 127,030 bytes, 2,034 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en" style="scroll-behavior:smooth;">
3<head>
4  <meta charset="UTF-8" />
5  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6  <title>ClowdOps — AI Agents for Your Cloud Infrastructure</title>
7  <meta name="description" content="ClowdOps is a chat-oriented AI platform for running intelligent agents against your cloud infrastructure. Describe a task in plain language — the agent plans and executes it." />
8
9  <!-- Favicon (root-absolute so it resolves from /privacy/ and /terms/ too) -->
10  <link rel="icon" type="image/svg+xml" href="/images/logo-mark.svg" />
11  <link rel="icon" type="image/png" sizes="512x512" href="/images/logo-mark-512.png" />
12  <link rel="apple-touch-icon" href="/images/logo-mark-512.png" />
13  <link rel="canonical" href="https://clowdops.ai/" />
14
15  <!-- Open Graph / social preview -->
16  <meta property="og:type" content="website" />
17  <meta property="og:site_name" content="ClowdOps" />
18  <meta property="og:title" content="ClowdOps — AI Agents for Your Cloud Infrastructure" />
19  <meta property="og:description" content="A chat-oriented AI platform for running intelligent agents against your cloud infrastructure. Describe a task in plain language — the agent plans and executes it." />
20  <meta property="og:url" content="https://clowdops.ai/" />
21  <meta property="og:image" content="https://clowdops.ai/images/logo-mark-1024.png" />
22  <meta name="twitter:card" content="summary" />
23  <meta name="twitter:title" content="ClowdOps — AI Agents for Your Cloud Infrastructure" />
24  <meta name="twitter:description" content="A chat-oriented AI platform for running intelligent agents against your cloud infrastructure." />
25  <meta name="twitter:image" content="https://clowdops.ai/images/logo-mark-1024.png" />
26
27  <!-- Fonts -->
28  <link rel="preconnect" href="https://fonts.googleapis.com" />
29  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
30  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
31
32  <!-- Cloudflare Turnstile (anti-bot for the demo-request form) -->
33  
33<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
33
34
35  <style>
36    /* ── Design tokens ──────────────────────────────────────────────────────── */
37    :root {
38      --bg:          hsl(240,8%,7%);
39      --bg-surface:  hsl(240,8%,9%);
40      --bg-subtle:   hsl(240,7%,11%);
41      --bg-muted:    hsl(240,6%,14%);
42      --fg:          hsl(0,0%,96%);
43      --fg-muted:    hsl(240,5%,65%);
44      --border:      hsl(240,6%,18%);
45      --border-soft: hsl(240,6%,22%);
46      --radius:      0.625rem;
47      --font-sans:   'Inter', ui-sans-serif, system-ui, sans-serif;
48      --font-mono:   'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
49    }
50
51    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
52    html { font-size: 16px; -webkit-font-smoothing: antialiased; overflow-x:hidden; scroll-padding-top:4.5rem; }
53    body { background:var(--bg); color:var(--fg); font-family:var(--font-sans); font-feature-settings:'cv11','ss01'; font-variation-settings:'opsz' 32; line-height:1.6; overflow-x:hidden; }
54    a { color:inherit; text-decoration:none; }
55    img { display:block; max-width:100%; }
56    button { cursor:pointer; font-family:inherit; }
57
58    /* ── Utility ────────────────────────────────────────────────────────────── */
59    .container { max-width:1200px; margin:auto; padding:0 1.5rem; }
60    .mono { font-family:var(--font-mono); }
61    .section { padding:6rem 0; }
62    .section-sm { padding:4rem 0; }
63
64    /* ── Typography ─────────────────────────────────────────────────────────── */
65    .display    { font-size:clamp(2.5rem,6vw,4.5rem); font-weight:500; letter-spacing:-0.03em; line-height:1.1; }
66    .heading-lg { font-size:clamp(1.75rem,3.5vw,2.5rem); font-weight:500; letter-spacing:-0.025em; line-height:1.2; }
67    .heading-md { font-size:clamp(1.25rem,2vw,1.5rem); font-weight:500; letter-spacing:-0.02em; line-height:1.3; }
68    .body-lg { font-size:1.125rem; line-height:1.7; color:var(--fg-muted); }
69    .body-md { font-size:1rem; line-height:1.7; color:var(--fg-muted); }
70    .caption { font-size:0.75rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--fg-muted); font-weight:500; }
71
72    /* ── Buttons ────────────────────────────────────────────────────────────── */
73    .btn { display:inline-flex; align-items:center; gap:.5rem; padding:.625rem 1.25rem; border-radius:var(--radius); font-size:.875rem; font-weight:500; transition:opacity .15s,background .15s,border-color .15s; border:1px solid transparent; white-space:nowrap; }
74    .btn-primary { background:var(--fg); color:var(--bg); border-color:var(--fg); }
75    .btn-primary:hover { opacity:.85; }
76    .btn-outline { background:transparent; color:var(--fg); border-color:var(--border-soft); }
77    .btn-outline:hover { border-color:var(--fg-muted); }
78    .btn-lg { padding:.75rem 1.75rem; font-size:.9375rem; }
79
80    /* ── Misc shared ────────────────────────────────────────────────────────── */
81    .divider { border:none; border-top:1px solid var(--border); }
82    .badge { display:inline-flex; align-items:center; gap:.375rem; padding:.25rem .625rem; border-radius:999px; border:1px solid var(--border-soft); font-size:.75rem; font-weight:500; color:var(--fg-muted); background:var(--bg-subtle); }
83    .badge-dot { width:6px; height:6px; border-radius:50%; background:var(--fg-muted); }
84    .badge-dot.live { background:#4ade80; }
85    .card { background:var(--bg-surface); border:1px solid var(--border); border-radius:calc(var(--radius)*1.5); padding:1.75rem; }
86    .section-ctas { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; margin-top:2rem; }
87
88    /* ═══════════════════════════════════════════════════════════════════════════
89       DEMO REQUEST MODAL
90    ═══════════════════════════════════════════════════════════════════════════ */
91    .modal-backdrop {
92      position:fixed; inset:0; z-index:200;
93      background:rgba(0,0,0,.75);
94      backdrop-filter:blur(6px);
95      -webkit-backdrop-filter:blur(6px);
96      display:flex; align-items:center; justify-content:center;
97      padding:1rem;
98      opacity:0; pointer-events:none;
99      transition:opacity .2s;
100    }
101    .modal-backdrop.open { opacity:1; pointer-events:all; }
102    .modal {
103      background:var(--bg-surface);
104      border:1px solid var(--border-soft);
105      border-radius:calc(var(--radius)*2);
106      padding:2.5rem;
107      width:100%; max-width:480px;
108      transform:translateY(20px);
109      transition:transform .25s ease;
110      position:relative;
111    }
112    .modal-backdrop.open .modal { transform:translateY(0); }
113    .modal-close {
114      position:absolute; top:.875rem; right:1rem;
115      background:transparent; border:none;
116      color:var(--fg-muted); font-size:1.125rem; line-height:1;
117      padding:.25rem .5rem; transition:color .15s; border-radius:.375rem;
118    }
119    .modal-close:hover { color:var(--fg); background:var(--bg-muted); }
120    .modal-title { font-size:1.375rem; font-weight:500; letter-spacing:-.025em; margin-bottom:.5rem; }
121    .modal-sub { font-size:.875rem; color:var(--fg-muted); margin-bottom:2rem; line-height:1.6; }
122    .form-row { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
123    @media (max-width:480px) { .form-row { grid-template-columns:1fr; } }
124    .form-field { display:flex; flex-direction:column; gap:.375rem; margin-bottom:.875rem; }
125    .form-field label { font-size:.7rem; font-weight:600; color:var(--fg-muted); letter-spacing:.06em; text-transform:uppercase; }
126    .form-field input, .form-field textarea {
127      background:var(--bg-subtle); border:1px solid var(--border-soft);
128      border-radius:var(--radius); padding:.625rem .875rem;
129      font-size:.875rem; font-family:var(--font-sans); color:var(--fg);
130      transition:border-color .15s; outline:none; width:100%;
131    }
132    .form-field input::placeholder, .form-field textarea::placeholder { color:var(--fg-muted); opacity:.6; }
133    .form-field input:focus, .form-field textarea:focus { border-color:var(--fg-muted); }
134    .form-field textarea { resize:vertical; min-height:90px; }
135    .form-submit { width:100%; justify-content:center; margin-top:.5rem; }
136
137    /* ═══════════════════════════════════════════════════════════════════════════
138       NAVBAR
139    ═══════════════════════════════════════════════════════════════════════════ */
140    .nav {
141      position:fixed; top:0; left:0; right:0; z-index:100;
142      background:color-mix(in srgb, var(--bg) 85%, transparent);
143      backdrop-filter:blur(12px);
144      -webkit-backdrop-filter:blur(12px);
145      border-bottom:1px solid var(--border);
146    }
147    .nav-inner { display:flex; align-items:center; height:3.5rem; gap:2rem; }
148    .nav-logo { display:flex; align-items:center; gap:.5rem; font-size:.9375rem; font-weight:600; letter-spacing:-.01em; flex-shrink:0; }
149    .nav-logo-mark { width:28px; height:28px; background:var(--fg); border-radius:6px; display:flex; align-items:center; justify-content:center; }
150    .nav-logo-mark svg { color:var(--bg); }
151    .nav-links { display:flex; align-items:center; gap:1.5rem; list-style:none; flex:1; }
152    .nav-links a { font-size:.875rem; color:var(--fg-muted); transition:color .15s; }
153    .nav-links a:hover { color:var(--fg); }
154    /* Integrations dropdown */
155    .nav-dropdown { position:relative; }
156    .nav-dropdown-trigger { display:inline-flex; align-items:center; gap:.3rem; cursor:pointer; }
157    .nav-dropdown-trigger svg { transition:transform .15s; opacity:.6; }
158    .nav-dropdown:hover .nav-dropdown-trigger svg,
159    .nav-dropdown:focus-within .nav-dropdown-trigger svg { transform:rotate(180deg); }
160    .nav-dropdown-menu {
161      position:absolute; top:calc(100% + .5rem); left:0; min-width:13rem;
162      background:var(--bg); border:1px solid var(--border); border-radius:10px;
163      padding:.375rem; display:flex; flex-direction:column; gap:.125rem;
164      box-shadow:0 12px 32px -8px rgba(0,0,0,.35);
165      opacity:0; visibility:hidden; transform:translateY(-4px); transition:opacity .15s, transform .15s, visibility .15s;
166      z-index:60;
167    }
168    .nav-dropdown:hover .nav-dropdown-menu,
169    .nav-dropdown:focus-within .nav-dropdown-menu { opacity:1; visibility:visible; transform:translateY(0); }
170    .nav-dropdown-menu a { display:flex; flex-direction:column; gap:.1rem; padding:.5rem .625rem; border-radius:6px; color:var(--fg); }
171    .nav-dropdown-menu a:hover { background:var(--bg-surface); }
172    .nav-dropdown-menu a small { font-size:.75rem; color:var(--fg-muted); }
173    .nav-actions { display:flex; align-items:center; gap:.75rem; margin-left:auto; }
174    @media (max-width:768px) { .nav-links { display:none; } }
175
176    /* ═══════════════════════════════════════════════════════════════════════════
177       HERO
178    ═══════════════════════════════════════════════════════════════════════════ */
179    .hero { padding-top:9rem; padding-bottom:5rem; position:relative; overflow:hidden; }
180
181    /* animated background orbs */
182    .hero-orb {
183      position:absolute; border-radius:50%;
184      filter:blur(90px); pointer-events:none;
185      animation:orb-drift ease-in-out infinite alternate;
186    }
187    .hero-orb-1 { width:520px; height:520px; background:hsl(220,70%,50%); opacity:.1; top:-140px; left:25%; animation-duration:20s; }
188    .hero-orb-2 { width:360px; height:360px; background:hsl(270,60%,55%); opacity:.09; top:60px; right:-80px; animation-duration:26s; animation-delay:-9s; }
189    .hero-orb-3 { width:300px; height:300px; background:hsl(190,65%,45%); opacity:.07; bottom:0; left:-60px; animation-duration:32s; animation-delay:-16s; }
190    @keyframes orb-drift {
191      from { transform:translate(0,0) scale(1); }
192      to   { transform:translate(28px,22px) scale(1.07); }
193    }
194
195    .hero-content { position:relative; }
196    .hero-eyebrow { margin-bottom:1.5rem; }
197    .hero-title { margin-bottom:1.5rem; }
198    .hero-title em { font-style:normal; color:var(--fg-muted); }
199    .hero-body { max-width:600px; margin-bottom:2.5rem; }
200    .hero-ctas { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; }
201
202    /* ── Chat demo window ────────────────────────────────────────────────────── */
203    .demo-window { margin-top:4rem; background:var(--bg-surface); border:1px solid var(--border); border-radius:.75rem; overflow:hidden; box-shadow:0 32px 80px -12px hsl(0,0%,0%,.55); position:relative; }
204    .demo-titlebar { display:flex; align-items:center; gap:.5rem; padding:.75rem 1rem; border-bottom:1px solid var(--border); background:var(--bg-subtle); }
205    .demo-titlebar-dot { width:10px; height:10px; border-radius:50%; }
206    .demo-titlebar-dot:nth-child(1) { background:#ff5f57; }
207    .demo-titlebar-dot:nth-child(2) { background:#febc2e; }
208    .demo-titlebar-dot:nth-child(3) { background:#28c840; }
209    .demo-titlebar-label { flex:1; text-align:center; font-size:.75rem; color:var(--fg-muted); }
210    .demo-body { display:grid; grid-template-columns:220px 1fr; height:440px; }
211    .demo-sidebar { border-right:1px solid var(--border); padding:1rem 0; overflow:hidden; }
212    .demo-sidebar-section { padding:0 .75rem; margin-bottom:1.25rem; }
213    .demo-sidebar-label { font-size:.625rem; text-transform:uppercase; letter-spacing:.1em; color:var(--fg-muted); padding:0 .5rem; margin-bottom:.375rem; }
214    .demo-sidebar-item { display:flex; align-items:center; gap:.5rem; padding:.4rem .5rem; border-radius:.375rem; font-size:.75rem; color:var(--fg-muted); cursor:default; }
215    .demo-sidebar-item.active { background:var(--bg-muted); color:var(--fg); }
216    .demo-sidebar-item svg { flex-shrink:0; }
217    .demo-chat { display:flex; flex-direction:column; }
218    .demo-chat-messages { flex:1; overflow:hidden; padding:1.5rem; display:flex; flex-direction:column; gap:1.25rem; }
219    .demo-msg { display:flex; flex-direction:column; gap:.5rem; }
220    .demo-msg-user { align-self:flex-end; max-width:70%; }
221    .demo-msg-agent { align-self:flex-start; max-width:85%; }
222    .demo-msg-bubble { padding:.625rem .875rem; border-radius:.625rem; font-size:.8rem; line-height:1.5; }
223    .demo-msg-user .demo-msg-bubble { background:var(--fg); color:var(--bg); border-bottom-right-radius:.125rem; }
224    .demo-msg-agent .demo-msg-bubble { background:var(--bg-subtle); color:var(--fg); border:1px solid var(--border); border-bottom-left-radius:.125rem; }
225    .demo-steps { display:flex; flex-direction:column; gap:.35rem; padding:0 .875rem; }
226    .demo-step { display:flex; align-items:center; gap:.5rem; font-size:.725rem; color:var(--fg-muted); font-family:var(--font-mono); }
227    .demo-step-icon { width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:.6rem; }
228    .demo-step-icon.done { background:hsl(142,70%,20%); color:#4ade80; }
229    .demo-step-icon.run  { background:hsl(220,70%,20%); color:#60a5fa; }
230    .demo-step-icon.wait { background:var(--bg-muted); color:var(--fg-muted); }
231    .demo-composer {
232      padding:.75rem 1rem; border-top:1px solid var(--border);
233      display:flex; align-items:center; gap:.625rem;
234      cursor:pointer; transition:background .15s;
235    }
236    .demo-composer:hover { background:var(--bg-subtle); }
237    .demo-composer-placeholder { flex:1; font-size:.75rem; color:var(--fg-muted); opacity:.7; font-family:var(--font-sans); user-select:none; }
238    .demo-composer-btn { width:28px; height:28px; background:var(--fg); border:none; border-radius:6px; display:flex; align-items:center; justify-content:center; flex-shrink:0; pointer-events:none; }
239    @media (max-width:640px) { .demo-body { grid-template-columns:1fr; height:380px; } .demo-sidebar { display:none; } }
240
241    /* ═══════════════════════════════════════════════════════════════════════════
242       PROVIDERS
243    ═══════════════════════════════════════════════════════════════════════════ */
244    .providers-strip {
245      padding:3.75rem 0;
246      border-top:1px solid var(--border);
247      border-bottom:1px solid var(--border);
248      overflow:hidden;
249      background:linear-gradient(180deg, transparent 0%, hsla(240,7%,11%,.55) 100%);
250    }
251    .providers-strip .container { max-width:100%; padding:0; }
252    .providers-label { text-align:center; margin-bottom:.6rem; padding:0 1.5rem; }
253    .providers-sub { text-align:center; max-width:660px; margin:0 auto 1.75rem; padding:0 1.5rem; font-size:.85rem; line-height:1.6; color:var(--fg-muted); }
254    .providers-marquee {
255      position:relative;
256      overflow:hidden;
257      overflow:clip;
258      min-height:96px;
259      contain:layout paint;
260      clip-path:inset(0);
261      -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
262      mask-image:linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
263    }
264    .providers-track {
265      position:absolute;
266      top:.625rem;
267      left:0;
268      display:flex;
269      width:max-content;
270      will-change:transform;
271      animation:providers-marquee 42s linear infinite;
272    }
273    .providers-marquee:hover .providers-track { animation-play-state:paused; }
274    .providers-group {
275      display:flex;
276      align-items:center;
277      flex:0 0 auto;
278      gap:.875rem;
279      padding-right:.875rem;
280    }
281    .provider-logo {
282      width:142px;
283      height:78px;
284      display:flex;
285      flex-direction:column;
286      align-items:center;
287      justify-content:center;
288      gap:.55rem;
289      padding:.85rem .75rem;
290      border:1px solid var(--border);
291      border-radius:8px;
292      background:linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-subtle) 100%);
293      opacity:.74;
294      transition:opacity .2s, border-color .2s, transform .2s, background .2s;
295    }
296    .provider-logo:hover {
297      opacity:1;
298      border-color:var(--border-soft);
299      transform:translateY(-2px);
300      background:linear-gradient(180deg, hsl(240,7%,12%) 0%, var(--bg-subtle) 100%);
301    }
302    .provider-logo-icon { width:34px; height:34px; display:flex; align-items:center; justify-content:center; }
303    .provider-logo-icon.wide { width:48px; }
304    .provider-logo-icon img {
305      width:100%;
306      height:100%;
307      object-fit:contain;
308      filter:drop-shadow(0 0 10px rgba(255,255,255,.08));
309    }
310    .provider-logo-name { font-size:.72rem; color:var(--fg-muted); font-weight:500; letter-spacing:.02em; white-space:nowrap; }
311    @keyframes providers-marquee {
312      from { transform:translateX(0); }
313      to { transform:translateX(-50%); }
314    }
315    @media (prefers-reduced-motion: reduce) {
316      .providers-marquee {
317        overflow:visible;
318        -webkit-mask-image:none;
319        mask-image:none;
320      }
321      .providers-track {
322        position:static;
323        width:auto;
324        animation:none;
325        transform:none;
326        justify-content:center;
327        padding:0 1.5rem;
328      }
329      .providers-group {
330        flex-wrap:wrap;
331        justify-content:center;
332        padding-right:0;
333      }
334      .providers-group[aria-hidden="true"] { display:none; }
335      .provider-logo:hover { transform:none; }
336    }
337
338    /* ═══════════════════════════════════════════════════════════════════════════
339       FEATURES GRID
340    ═══════════════════════════════════════════════════════════════════════════ */
341    .features-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:1px; border:1px solid var(--border); border-radius:calc(var(--radius)*1.5); overflow:hidden; background:var(--border); }
342    .feature-cell { background:var(--bg); padding:2rem; transition:background .2s; }
343    .feature-cell:hover { background:var(--bg-surface); }
344    .feature-icon { width:36px; height:36px; background:var(--bg-subtle); border:1px solid var(--border); border-radius:.5rem; display:flex; align-items:center; justify-content:center; margin-bottom:1.25rem; color:var(--fg-muted); }
345    .feature-title { font-size:1rem; font-weight:500; margin-bottom:.5rem; letter-spacing:-.01em; }
346    .feature-body { font-size:.875rem; line-height:1.6; color:var(--fg-muted); }
347
348    /* ═══════════════════════════════════════════════════════════════════════════
349       HOW IT WORKS — animated flow
350    ═══════════════════════════════════════════════════════════════════════════ */
351    .phases-flow { margin-top:3rem; }
352    .phase-step {
353      display:grid; grid-template-columns:5.5rem 1fr;
354      gap:2.5rem; padding:2rem 0;
355      border-top:1px solid var(--border);
356      opacity:0; transform:translateX(-28px);
357      transition:opacity .55s ease, transform .55s ease;
358    }
359    .phase-step.visible { opacity:1; transform:translateX(0); }
360    .phase-step:last-child { border-bottom:1px solid var(--border); }
361    .phase-step-num { font-size:2.25rem; font-weight:600; font-family:var(--font-mono); color:var(--border-soft); line-height:1.1; padding-top:.2rem; }
362    .phase-step-name { font-size:1.125rem; font-weight:500; letter-spacing:-.015em; margin-bottom:.5rem; }
363    .phase-step-desc { font-size:.875rem; color:var(--fg-muted); line-height:1.65; max-width:580px; }
364    @media (max-width:640px) { .phase-step { grid-template-columns:3.5rem 1fr; gap:1.25rem; } .phase-step-num { font-size:1.75rem; } }
365
366    /* ═══════════════════════════════════════════════════════════════════════════
367       RESOURCE TREE
368    ═══════════════════════════════════════════════════════════════════════════ */
369    .resource-tree {
370      background:var(--bg-surface); border:1px solid var(--border);
371      border-radius:var(--radius); padding:1.5rem 1.25rem;
372      font-family:var(--font-mono); font-size:.725rem; line-height:1.9;
373      color:var(--fg-muted); overflow:hidden;
374    }
375    .resource-tree .r-provider { color:var(--fg); font-weight:500; }
376    .resource-tree .r-active::before { content:'●'; color:#4ade80; margin-right:.375rem; font-size:.5rem; vertical-align:middle; }
377    .resource-tree .r-warn::before   { content:'●'; color:#fbbf24; margin-right:.375rem; font-size:.5rem; vertical-align:middle; }
378
379    /* ═══════════════════════════════════════════════════════════════════════════
380       TWO-COL HIGHLIGHT
381    ═══════════════════════════════════════════════════════════════════════════ */
382    .two-col { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
383    .two-col.reverse { direction:rtl; }
384    .two-col.reverse > * { direction:ltr; }
385    @media (max-width:768px) { .two-col { grid-template-columns:1fr; gap:2.5rem; } .two-col.reverse { direction:ltr; } }
386    .check-item { display:flex; align-items:flex-start; gap:.625rem; font-size:.875rem; color:var(--fg-muted); margin-bottom:.75rem; }
387    .check-item-icon { width:18px; height:18px; flex-shrink:0; margin-top:1px; background:var(--bg-subtle); border:1px solid var(--border-soft); border-radius:50%; display:flex; align-items:center; justify-content:center; }
388    .check-item-icon svg { color:#4ade80; }
389
390    /* ═══════════════════════════════════════════════════════════════════════════
391       SCHEDULE / CODE CARD
392    ═══════════════════════════════════════════════════════════════════════════ */
393    .code-card { background:var(--bg-subtle); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
394    .code-card-header { padding:.625rem 1rem; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:.5rem; font-size:.75rem; color:var(--fg-muted); }
395    .code-card pre { padding:1.25rem 1rem; font-family:var(--font-mono); font-size:.75rem; line-height:1.7; color:var(--fg); overflow-x:auto; }
396    .code-card .c-comment { color:var(--fg-muted); }
397    .code-card .c-key     { color:#93c5fd; }
398    .code-card .c-val     { color:#86efac; }
399    .code-card .c-str     { color:#fca5a5; }
400
401    /* ═══════════════════════════════════════════════════════════════════════════
402       MCP — coding-agent terminal mockup
403    ═══════════════════════════════════════════════════════════════════════════ */
404    .mcp-terminal {
405      background:var(--bg-surface); border:1px solid var(--border);
406      border-radius:.75rem; overflow:hidden;
407      box-shadow:0 24px 60px -16px hsl(0,0%,0%,.5);
408    }
409    .mcp-terminal pre {
410      padding:1.15rem 1.1rem; margin:0;
411      font-family:var(--font-mono); font-size:.735rem; line-height:1.85;
412      color:var(--fg); overflow-x:auto;
413      white-space:pre-wrap; word-break:break-word;
414    }
415    .mcp-terminal .m-prompt  { color:var(--fg-muted); }
416    .mcp-terminal .m-cmd     { color:#93c5fd; }
417    .mcp-terminal .m-str     { color:#fca5a5; }
418    .mcp-terminal .m-flag    { color:var(--fg-muted); }
419    .mcp-terminal .m-ok      { color:#4ade80; }
420    .mcp-terminal .m-tool    { color:#c4b5fd; }
421    .mcp-terminal .m-muted   { color:var(--fg-muted); }
422    .mcp-terminal .m-warn    { color:#fbbf24; }
423    .mcp-terminal .m-comment { color:var(--fg-muted); opacity:.75; }
424
425    /* ═══════════════════════════════════════════════════════════════════════════
426       TELEGRAM — animated agent-session mockup
427    ═══════════════════════════════════════════════════════════════════════════ */
428    /* Two independent phone mockups side by side. */
429    .tg-duo { display:flex; gap:1.5rem; justify-content:center; align-items:flex-start; flex-wrap:wrap; }
430    .tg-phone-wrap { flex:1 1 320px; max-width:400px; }
431    .tg-cardlabel { font-size:.82rem; font-weight:600; color:var(--fg); margin-bottom:.6rem; }
432    .tg-cardlabel small { font-weight:400; color:var(--fg-muted); }
433    .tg-phone {
434      border:1px solid var(--border); border-radius:16px;
435      overflow:hidden; background:#0e1621; box-shadow:0 24px 48px -16px rgba(0,0,0,.5);
436    }
437    .tg-header { display:flex; align-items:center; gap:.6rem; padding:.7rem .9rem; background:#17212b; }
438    .tg-avatar {
439      width:34px; height:34px; border-radius:50%; flex-shrink:0; color:#fff; font-size:1rem;
440      background:linear-gradient(135deg,#5eb5f7,#3390ec); display:flex; align-items:center; justify-content:center;
441    }
442    .tg-title { font-size:.85rem; font-weight:600; color:#fff; line-height:1.2; }
443    .tg-sub { font-size:.72rem; color:#5eb5f7; }
444    .tg-body {
445      padding:1rem .9rem 1.1rem; display:flex; flex-direction:column; gap:.5rem;
446      background:
447        radial-gradient(circle at 20% 15%, rgba(94,181,247,.06), transparent 40%),
448        radial-gradient(circle at 80% 85%, rgba(51,144,236,.06), transparent 40%),
449        #0e1621;
450    }
451    /* Fixed min-heights so bubbles fading in/out never reflow the card. */
452    .tg-body.inbound  { min-height:360px; }
453    .tg-body.outbound { min-height:360px; justify-content:flex-start; }
454    .tg-chip { align-self:center; font-size:.7rem; color:#8aa0b4; background:rgba(255,255,255,.05); padding:.25rem .6rem; border-radius:10px; opacity:0; margin-bottom:.15rem; }
455    .tg-msg {
456      max-width:82%; padding:.5rem .7rem; border-radius:13px; font-size:.82rem; line-height:1.45;
457      opacity:0; will-change:opacity,transform;
458    }
459    .tg-msg.user { align-self:flex-end; background:#2b5278; color:#fff; border-bottom-right-radius:4px; }
460    .tg-msg.bot  { align-self:flex-start; background:#1d2b3a; color:#e6edf3; border-bottom-left-radius:4px; }
461    .tg-msg .tg-mono { font-family:var(--font-mono,monospace); font-size:.78rem; }
462    .tg-warn { color:#fbbf24; }
463    .tg-ok { color:#4ade80; }
464    .tg-steps { display:flex; flex-direction:column; gap:.25rem; font-size:.78rem; color:#aebccb; }
465    .tg-steps .s-done { color:#4ade80; }
466    .tg-confirm-title { font-weight:600; color:#fff; margin-bottom:.15rem; }
467    .tg-confirm-meta { color:#8aa0b4; font-size:.76rem; }
468    .tg-btns { display:flex; gap:.45rem; margin-top:.6rem; }
469    .tg-btn {
470      flex:1; text-align:center; padding:.42rem 0; border-radius:9px; font-size:.8rem; font-weight:600;
471      border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.03);
472    }
473    .tg-btn.allow { color:#4ade80; }
474    .tg-btn.deny  { color:#f87171; }
475    .tg-typing { align-self:flex-start; background:#1d2b3a; border-radius:13px; padding:.6rem .75rem; display:flex; gap:.28rem; opacity:0; }
476    .tg-typing span { width:6px; height:6px; border-radius:50%; background:#7d8e9e; animation:tgBlink 1.1s infinite; }
477    .tg-typing span:nth-child(2){ animation-delay:.18s; } .tg-typing span:nth-child(3){ animation-delay:.36s; }
478
479    /* JS-driven single chat: scrollable body + per-bubble entrance */
480    .tg-body.chat { height:460px; overflow:hidden; justify-content:flex-start; scroll-behavior:smooth; }
481    .tg-cmd { color:#5eb5f7; font-weight:500; }
482    .tg-msg.user .tg-cmd { color:#d4ecff; }
483    .tg-in { animation:tgIn .34s ease both; }
484    @keyframes tgIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
485
486    /* Two SEPARATE phones, each on its own self-contained loop: every bubble
487       fades in on cue, holds, then the whole sequence fades out and repeats.
488       Inbound = 13s; outbound = 9s. They run independently. */
489    .tgi-user   { animation:tgiU  13s infinite both; }
490    .tgi-typing { animation:tgiTy 13s infinite both; }
491    .tgi-steps  { animation:tgiS  13s infinite both; }
492    .tgi-card   { animation:tgiC  13s infinite both; }
493    .tgi-tap    { animation:tgiTap 13s infinite both; }
494    .tgi-final  { animation:tgiF  13s infinite both; }
495    .tgo-chip   { animation:tgoChip 9s infinite both; }
496    .tgo-msg    { animation:tgoMsg  9s infinite both; }
497
498    @keyframes tgBlink { 0%,100%{opacity:.3;} 50%{opacity:1;} }
499    /* inbound phone — sequential reveal, hold, fade out at the end */
500    @keyframes tgiU { 0%,2%{opacity:0;transform:translateY(8px);}  5%,90%{opacity:1;transform:none;} 100%{opacity:0;} }
501    @keyframes tgiS { 0%,20%{opacity:0;transform:translateY(8px);} 23%,90%{opacity:1;transform:none;} 100%{opacity:0;} }
502    @keyframes tgiC { 0%,32%{opacity:0;transform:translateY(8px);} 35%,90%{opacity:1;transform:none;} 100%{opacity:0;} }
503    @keyframes tgiF { 0%,46%{opacity:0;transform:translateY(8px);} 50%,90%{opacity:1;transform:none;} 100%{opacity:0;} }
504    @keyframes tgiTy { 0%,8%{opacity:0;} 10%,18%{opacity:1;} 20%,100%{opacity:0;} }
505    @keyframes tgiTap {
506      0%,40%   { background:rgba(255,255,255,.03); box-shadow:none; }
507      43%,46%  { background:rgba(74,222,128,.22); box-shadow:0 0 0 2px rgba(74,222,128,.5) inset; }
508      49%,100% { background:rgba(74,222,128,.10); box-shadow:none; }
509    }
510    /* outbound phone — chip then digest, hold, fade out, repeat */
511    @keyframes tgoChip { 0%,6%{opacity:0;transform:translateY(6px);}  12%,88%{opacity:1;transform:none;} 100%{opacity:0;} }
512    @keyframes tgoMsg  { 0%,18%{opacity:0;transform:translateY(8px);} 26%,88%{opacity:1;transform:none;} 100%{opacity:0;} }
513
514    @media (prefers-reduced-motion: reduce) {
515      /* hold everything visible, no motion */
516      .tgi-user,.tgi-steps,.tgi-card,.tgi-final,.tgo-chip,.tgo-msg { animation:none; opacity:1; transform:none; }
517      .tgi-typing,.tgi-tap { animation:none; }
518      .tgi-typing { opacity:0; }
519      .tg-typing span { animation:none; }
520      .tg-in { animation:none; opacity:1; transform:none; }
521    }
522
523    /* ═══════════════════════════════════════════════════════════════════════════
524       GUARDRAILS
525    ═══════════════════════════════════════════════════════════════════════════ */
526    .grants-panel {
527      background: var(--bg-surface); border: 1px solid var(--border);
528      border-radius: calc(var(--radius)*1.5); overflow: hidden;
529    }
530    .grants-panel-header {
531      padding: .625rem 1rem; border-bottom: 1px solid var(--border);
532      display: flex; align-items: center; gap: .5rem;
533      font-size: .75rem; color: var(--fg-muted);
534      background: var(--bg-subtle);
535    }
536    .grants-grid-inner {
537      display: grid; grid-template-columns: 1fr 1fr; gap: 0;
538    }
539    .grant-row {
540      display: flex; align-items: center; gap: .625rem;
541      padding: .625rem 1rem; font-size: .78rem; color: var(--fg-muted);
542      border-bottom: 1px solid var(--border); border-right: 1px solid var(--border);
543    }
544    .grant-row:nth-child(2n) { border-right: none; }
545    .grant-row:nth-last-child(-n+2) { border-bottom: none; }
546    .grant-dot {
547      width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
548    }
549    .grant-dot.allow { background: #4ade80; }
550    .grant-dot.deny  { background: var(--border-soft); }
551    .grant-row.denied { opacity: .45; }
552
553    .confirm-card-mockup {
554      margin-top: 1rem;
555      background: var(--bg-surface); border: 1px solid var(--border-soft);
556      border-radius: calc(var(--radius)*1.5); padding: 1.25rem;
557    }
558    .confirm-card-title {
559      font-size: .7rem; text-transform: uppercase; letter-spacing: .07em;
560      color: var(--fg-muted); font-weight: 600; margin-bottom: .75rem;
561    }
562    .confirm-cmd {
563      font-family: var(--font-mono); font-size: .72rem; color: var(--fg);
564      background: var(--bg-subtle); border: 1px solid var(--border);
565      border-radius: var(--radius); padding: .625rem .875rem;
566      margin-bottom: .75rem; word-break: break-all;
567    }
568    .confirm-meta {
569      display: flex; align-items: center; gap: .5rem;
570      font-size: .72rem; color: var(--fg-muted); margin-bottom: 1rem;
571    }
572    .confirm-category-badge {
573      display: inline-flex; align-items: center; gap: .3rem;
574      background: hsl(0,60%,18%); color: hsl(0,80%,75%);
575      border: 1px solid hsl(0,50%,30%);
576      border-radius: 999px; padding: .15rem .5rem;
577      font-size: .68rem; font-weight: 500;
578    }
579    .confirm-actions {
580      display: flex; gap: .5rem;
581    }
582    .confirm-btn {
583      flex: 1; padding: .4rem .5rem; border-radius: var(--radius);
584      font-size: .72rem; font-weight: 500; border: 1px solid var(--border-soft);
585      background: transparent; color: var(--fg-muted);
586      text-align: center;
587    }
588    .confirm-btn.allow { background: var(--fg); color: var(--bg); border-color: var(--fg); }
589
590    /* ═══════════════════════════════════════════════════════════════════════════
591       SECURITY — 3-column grid
592    ═══════════════════════════════════════════════════════════════════════════ */
593    .security-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:2.5rem; }
594    @media (max-width:900px) { .security-grid { grid-template-columns:repeat(2,1fr); } }
595    @media (max-width:520px)  { .security-grid { grid-template-columns:1fr; } }
596    .security-item { display:flex; align-items:flex-start; gap:.875rem; padding:1.5rem; background:var(--bg-surface); border:1px solid var(--border); border-radius:calc(var(--radius)*1.5); transition:border-color .2s; }
597    .security-item:hover { border-color:var(--border-soft); }
598    .security-item-icon { width:38px; height:38px; background:var(--bg-subtle); border:1px solid var(--border); border-radius:.625rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--fg-muted); }
599    .security-item-title { font-size:.9375rem; font-weight:500; margin-bottom:.375rem; }
600    .security-item-body  { font-size:.8rem; color:var(--fg-muted); line-height:1.55; }
601
602    /* ═══════════════════════════════════════════════════════════════════════════
603       CTA SECTION
604    ═══════════════════════════════════════════════════════════════════════════ */
605    .cta-section { padding:6rem 0; text-align:center; position:relative; overflow:hidden; }
606    .cta-section::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at center,hsl(240,6%,14%) 0%,transparent 70%); pointer-events:none; }
607    .cta-section .container { position:relative; }
608
609    /* ═══════════════════════════════════════════════════════════════════════════
610       FOOTER
611    ═══════════════════════════════════════════════════════════════════════════ */
612    .footer { border-top:1px solid var(--border); padding:3rem 0 2rem; }
613    .footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem; margin-bottom:3rem; }
614    .footer-brand-desc { font-size:.8rem; color:var(--fg-muted); line-height:1.6; margin-top:.75rem; max-width:240px; }
615    .footer-col-title { font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--fg-muted); margin-bottom:1rem; }
616    .footer-links { list-style:none; display:flex; flex-direction:column; gap:.625rem; }
617    .footer-links a { font-size:.8rem; color:var(--fg-muted); transition:color .15s; }
618    .footer-links a:hover { color:var(--fg); }
619    .footer-bottom { display:flex; justify-content:space-between; align-items:center; padding-top:2rem; border-top:1px solid var(--border); font-size:.75rem; color:var(--fg-muted); }
620    @media (max-width:768px) { .footer-grid { grid-template-columns:1fr 1fr; gap:2rem; } }
621    @media (max-width:480px) { .footer-grid { grid-template-columns:1fr; } .footer-bottom { flex-direction:column; gap:.5rem; text-align:center; } }
622
623    /* ═══════════════════════════════════════════════════════════════════════════
624       ANIMATIONS
625    ═══════════════════════════════════════════════════════════════════════════ */
626    @keyframes blink { 0%,100% { opacity:1; } 50% { opacity:0; } }
627    .cursor-blink { display:inline-block; width:2px; height:1em; background:var(--fg); vertical-align:text-bottom; animation:blink 1.1s step-end infinite; }
628    @keyframes fade-up { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
629    .fade-up { animation:fade-up .5s ease both; }
630    .delay-1 { animation-delay:.1s; }
631    .delay-2 { animation-delay:.2s; }
632    .delay-3 { animation-delay:.3s; }
633    .delay-4 { animation-delay:.4s; }
634    @keyframes shimmer { from { background-position:200% center; } to { background-position:-200% center; } }
635    .shimmer-bar { display:inline-block; width:80px; height:2px; border-radius:1px; background:linear-gradient(90deg,var(--border) 25%,var(--fg-muted) 50%,var(--border) 75%); background-size:200% auto; animation:shimmer 1.4s linear infinite; vertical-align:middle; }
636
637    /* ═══════════════════════════════════════════════════════════════════════════
638       MOBILE NAV — hamburger + slide-down menu
639    ═══════════════════════════════════════════════════════════════════════════ */
640    .nav-hamburger {
641      display: none;
642      background: transparent;
643      border: 1px solid var(--border-soft);
644      border-radius: var(--radius);
645      padding: .375rem .5rem;
646      color: var(--fg);
647      align-items: center;
648      justify-content: center;
649      transition: border-color .15s;
650      margin-left: auto;
651      flex-shrink: 0;
652    }
653    .nav-hamburger:hover { border-color: var(--fg-muted); }
654    @media (max-width:768px) {
655      .nav-hamburger { display: flex; }
656      .nav-actions { display: none; }
657    }
658
659    .mobile-menu {
660      position: fixed;
661      top: 3.5rem; left: 0; right: 0;
662      background: color-mix(in srgb, var(--bg) 97%, transparent);
663      backdrop-filter: blur(20px);
664      -webkit-backdrop-filter: blur(20px);
665      border-bottom: 1px solid var(--border);
666      padding: .5rem 1.5rem 1.5rem;
667      z-index: 99;
668      display: flex; flex-direction: column;
669      opacity: 0; pointer-events: none;
670      transform: translateY(-8px);
671      transition: opacity .18s, transform .18s;
672    }
673    .mobile-menu.open { opacity: 1; pointer-events: all; transform: translateY(0); }
674    .mobile-menu-link {
675      font-size: .9375rem; color: var(--fg-muted);
676      padding: .8rem 0; border-bottom: 1px solid var(--border);
677      display: block; transition: color .15s;
678    }
679    .mobile-menu-link:last-of-type { border-bottom: none; }
680    .mobile-menu-link:hover { color: var(--fg); }
681    .mobile-menu-actions {
682      display: flex; gap: .75rem; margin-top: 1.25rem;
683    }
684    .mobile-menu-actions .btn { flex: 1; justify-content: center; }
685
686    /* ═══════════════════════════════════════════════════════════════════════════
687       MOBILE — GENERAL RESPONSIVE FIXES
688    ═══════════════════════════════════════════════════════════════════════════ */
689    @media (max-width:640px) {
690      html { scroll-padding-top: 5rem; }
691      .section { padding: 3.5rem 0; }
692      .section-sm { padding: 2.5rem 0; }
693      .hero { padding-top: 5.5rem; padding-bottom: 3rem; }
694
695      /* compact floating mobile navbar */
696      .nav {
697        top: .75rem;
698        left: 1rem;
699        right: 1rem;
700        border: 1px solid var(--border);
701        border-radius: 12px;
702        overflow: hidden;
703      }
704      .nav .container { padding: 0 .75rem; }
705      .nav-inner { height: 3rem; gap: 1rem; }
706      .nav-logo { font-size: .875rem; }
707      .nav-logo-mark { width: 26px;
707 height: 26px; }
708      .nav-hamburger {
709        width: 34px;
710        height: 34px;
711        padding: 0;
712        border-radius: 8px;
713      }
714      .mobile-menu {
715        top: 4.25rem;
716        left: 1rem;
717        right: 1rem;
718        border: 1px solid var(--border);
719        border-radius: 12px;
720        padding: .25rem 0 1rem;
721        overflow: hidden;
722      }
723      .mobile-menu .container { padding: 0 1rem; }
724
725      /* stack hero CTAs full-width */
726      .hero-ctas { flex-direction: column; align-items: stretch; }
727      .hero-ctas .btn { justify-content: center; }
728
729      /* stack section doc/CTA buttons */
730      .section-ctas { flex-direction: column; align-items: stretch; }
731      .section-ctas .btn { justify-content: center; }
732
733      /* tighter provider logos */
734      .providers-strip { padding: 3rem 0; }
735      .providers-label { margin-bottom: 1.25rem; }
736      .providers-marquee { min-height: 88px; }
737      .providers-track { top: .5rem; }
738      .providers-group { gap: .65rem; padding-right: .65rem; }
739      .provider-logo { width: 118px; height: 70px; }
740      .provider-logo-icon { width: 30px; height: 30px; }
741      .provider-logo-icon.wide { width: 42px; }
742
743      /* grants grid → 1 col */
744      .grants-grid-inner { grid-template-columns: 1fr; }
745      .grant-row { border-right: none !important; }
746      /* re-wire bottom borders for single column */
747      .grant-row:nth-last-child(-n+2) { border-bottom: 1px solid var(--border) !important; }
748      .grant-row:last-child { border-bottom: none !important; }
749
750      /* confirmation actions wrap */
751      .confirm-actions { flex-wrap: wrap; }
752      .confirm-btn { flex: 1 1 40%; }
753    }
754
755    @media (max-width:480px) {
756      /* features → single column */
757      .features-grid { grid-template-columns: 1fr; }
758
759      /* resource tree: horizontally scrollable to handle deep nesting */
760      .resource-tree { overflow-x: auto; font-size: .68rem; line-height: 1.75; }
761
762      /* modal: tighter padding */
763      .modal { padding: 1.75rem 1.25rem; }
764
765      /* tighten section base padding further */
766      .section { padding: 2.75rem 0; }
767      .cta-section { padding: 3.5rem 0; }
768    }
769  </style>
770</head>
771<body>
772
773
774<!-- ═══════════════════════════════════════════════════════════════════════════
775     DEMO REQUEST MODAL
776═══════════════════════════════════════════════════════════════════════════ -->
777<div class="modal-backdrop" id="demoModal" role="dialog" aria-modal="true" aria-labelledby="modalTitle">
778  <div class="modal">
779    <button class="modal-close" id="modalClose" aria-label="Close">✕</button>
780    <h2 class="modal-title" id="modalTitle">Get started with ClowdOps</h2>
781    <p class="modal-sub">Tell us a bit about yourself and we'll be in touch shortly.</p>
782    <form id="demoForm" novalidate>
783      <div class="form-row">
784        <div class="form-field">
785          <label for="firstName">First name</label>
786          <input type="text" id="firstName" name="firstName" required placeholder="Jane" autocomplete="given-name" />
787        </div>
788        <div class="form-field">
789          <label for="lastName">Last name</label>
790          <input type="text" id="lastName" name="lastName" required placeholder="Smith" autocomplete="family-name" />
791        </div>
792      </div>
793      <div class="form-field">
794        <label for="company">Company</label>
795        <input type="text" id="company" name="company" required placeholder="Acme Corp" autocomplete="organization" />
796      </div>
797      <div class="form-field">
798        <label for="email">Email</label>
799        <input type="email" id="email" name="email" required placeholder="[email protected]" autocomplete="email" />
800      </div>
801      <div class="form-field">
802        <label for="message">Message</label>
803        <textarea id="message" name="message" placeholder="What are you hoping to use ClowdOps for?"></textarea>
804      </div>
805      <!-- Honeypot: hidden from humans (off-screen + aria-hidden + tabindex).
806           Bots auto-fill it; the backend silently drops any filled submission. -->
807      <div aria-hidden="true" style="position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;">
808        <label for="website">Website</label>
809        <input type="text" id="website" name="website" tabindex="-1" autocomplete="off" />
810      </div>
811      <!-- Cloudflare Turnstile widget. Renders the cf-turnstile-response token
812           the submit handler sends as turnstileToken for server-side verify. -->
813      <div class="cf-turnstile" data-sitekey="0x4AAAAAADepLyLZA4s_AYwK" data-theme="dark" style="margin:.25rem 0 .75rem;"></div>
814      <button type="submit" class="btn btn-primary btn-lg form-submit">
815        Send request
816        <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 7H11M11 7L7.5 3.5M11 7L7.5 10.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
817      </button>
818      <p id="formStatus" role="status" aria-live="polite" style="display:none;margin-top:.875rem;font-size:.85rem;line-height:1.5;"></p>
819    </form>
820  </div>
821</div>
822
823
824<!-- ═══════════════════════════════════════════════════════════════════════════
825     NAVBAR
826═══════════════════════════════════════════════════════════════════════════ -->
827<header class="nav">
828  <div class="container">
829    <nav class="nav-inner">
830      <a href="#home" class="nav-logo" aria-label="ClowdOps home">
831        <div class="nav-logo-mark">
832          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
833            <path d="M9.5 2C7.57 2 5.9 3.26 5.24 5.02C4.52 4.47 3.62 4.17 2.67 4.25C1.17 4.38 0 5.64 0 7.15C0 8.73 1.27 10 2.85 10H5.5L4 13H7L5.5 16H10.5L9 13H12L10.5 10H13.15C14.73 10 16 8.73 16 7.15C16 5.57 14.73 4.3 13.15 4.3C13.1 4.3 13.05 4.3 13 4.31C12.42 2.96 11.06 2 9.5 2Z" fill="currentColor"/>
834          </svg>
835        </div>
836        ClowdOps
837      </a>
838
839      <ul class="nav-links">
840        <li><a href="#features">Features</a></li>
841        <li><a href="#how-it-works">How it works</a></li>
842        <li class="nav-dropdown">
843          <a href="#mcp" class="nav-dropdown-trigger">Integrations
844            <svg width="9" height="9" viewBox="0 0 10 10" fill="none"><path d="M2.5 4l2.5 2.5L7.5 4" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>
845          </a>
846          <div class="nav-dropdown-menu">
847            <a href="#mcp">MCP &amp; coding agents<small>Drive your cloud from Claude Code, Cursor, …</small></a>
848            <a href="#telegram">Telegram<small>Notify &amp; drive the agent from a chat</small></a>
849          </div>
850        </li>
851        <li><a href="#providers">Providers</a></li>
852        <li><a href="/demos/">Demos</a></li>
853        <li><a href="https://github.com/clowdops/product-guides/blob/main/cloud-agent/README.md" target="_blank" rel="noopener">Docs</a></li>
854      </ul>
855
856      <div class="nav-actions">
857        <a href="https://platform.clowdops.ai/login" class="btn btn-outline" style="padding:.5rem 1rem;font-size:.8125rem;">Sign in</a>
858        <button onclick="openModal()" class="btn btn-primary" style="padding:.5rem 1rem;font-size:.8125rem;">Get started</button>
859      </div>
860
861      <button class="nav-hamburger" id="navHamburger" aria-label="Open menu" aria-expanded="false" onclick="toggleMobileMenu()">
862        <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" id="hamburgerIcon">
863          <rect y="3" width="18" height="1.5" rx=".75" fill="currentColor"/>
864          <rect y="8.25" width="18" height="1.5" rx=".75" fill="currentColor"/>
865          <rect y="13.5" width="18" height="1.5" rx=".75" fill="currentColor"/>
866        </svg>
867      </button>
868    </nav>
869  </div>
870</header>
871
872<div class="mobile-menu" id="mobileMenu" role="dialog" aria-label="Mobile navigation">
873  <div class="container">
874    <a href="#features" class="mobile-menu-link" onclick="closeMobileMenu()">Features</a>
875    <a href="#how-it-works" class="mobile-menu-link" onclick="closeMobileMenu()">How it works</a>
876    <a href="#mcp" class="mobile-menu-link" onclick="closeMobileMenu()">MCP &amp; coding agents</a>
877    <a href="#telegram" class="mobile-menu-link" onclick="closeMobileMenu()">Telegram</a>
878    <a href="#providers" class="mobile-menu-link" onclick="closeMobileMenu()">Providers</a>
879    <a href="/demos/" class="mobile-menu-link" onclick="closeMobileMenu()">Demos</a>
880    <a href="https://github.com/clowdops/product-guides/blob/main/cloud-agent/README.md" target="_blank" rel="noopener" class="mobile-menu-link" onclick="closeMobileMenu()">Docs</a>
881    <div class="mobile-menu-actions">
882      <a href="https://platform.clowdops.ai/login" class="btn btn-outline">Sign in</a>
883      <button onclick="openModal(); closeMobileMenu();" class="btn btn-primary">Get started</button>
884    </div>
885  </div>
886</div>
887
888
889<!-- ═══════════════════════════════════════════════════════════════════════════
890     HERO
891═══════════════════════════════════════════════════════════════════════════ -->
892<section class="hero" id="home">
893  <!-- animated background orbs -->
894  <div class="hero-orb hero-orb-1" aria-hidden="true"></div>
895  <div class="hero-orb hero-orb-2" aria-hidden="true"></div>
896  <div class="hero-orb hero-orb-3" aria-hidden="true"></div>
897
898  <div class="container hero-content">
899    <div class="hero-eyebrow fade-up">
900      <span class="badge">
901        <span class="badge-dot live"></span>
902        Preview — now available
903      </span>
904    </div>
905
906    <h1 class="display hero-title fade-up delay-1">
907      Your cloud,<br/>
908      <em>on command</em>
909    </h1>
910
911    <p class="body-lg hero-body fade-up delay-2">
912      ClowdOps is a chat-oriented AI platform for running intelligent agents against your cloud infrastructure. Describe a task in plain language — the agent plans and executes it.
913    </p>
914
915    <div class="hero-ctas fade-up delay-3">
916      <button onclick="openModal()" class="btn btn-primary btn-lg">
917        Get Started
918        <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 7H11M11 7L7.5 3.5M11 7L7.5 10.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
919      </button>
920      <a href="#how-it-works" class="btn btn-outline btn-lg">See how it works</a>
921    </div>
922
923    <!-- Demo window -->
924    <div class="demo-window fade-up delay-4">
925      <div class="demo-titlebar">
926        <div class="demo-titlebar-dot"></div>
927        <div class="demo-titlebar-dot"></div>
928        <div class="demo-titlebar-dot"></div>
929        <div class="demo-titlebar-label">ClowdOps — AWS Prod / Production</div>
930      </div>
931      <div class="demo-body">
932        <!-- Sidebar -->
933        <div class="demo-sidebar">
934          <div class="demo-sidebar-section">
935            <div class="demo-sidebar-label">AWS Prod</div>
936            <div class="demo-sidebar-item active">
937              <svg width="12" height="12" fill="none" viewBox="0 0 12 12"><rect x="1" y="1" width="4" height="4" rx="1" stroke="currentColor" stroke-width="1.2"/><rect x="7" y="1" width="4" height="4" rx="1" stroke="currentColor" stroke-width="1.2"/><rect x="1" y="7" width="4" height="4" rx="1" stroke="currentColor" stroke-width="1.2"/><rect x="7" y="7" width="4" height="4" rx="1" stroke="currentColor" stroke-width="1.2"/></svg>
938              S3 audit
939            </div>
940            <div class="demo-sidebar-item">
941              <svg width="12" height="12" fill="none" viewBox="0 0 12 12"><circle cx="6" cy="6" r="4.5" stroke="currentColor" stroke-width="1.2"/><path d="M6 3.5v2.75L7.75 8" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
942              CloudWatch errors
943            </div>
944            <div class="demo-sidebar-item">
945              <svg width="12" height="12" fill="none" viewBox="0 0 12 12"><path d="M2 3h8M2 6h8M2 9h5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
946              Cost comparison
947            </div>
948          </div>
949          <div class="demo-sidebar-section">
950            <div class="demo-sidebar-label">Yesterday</div>
951            <div class="demo-sidebar-item">IAM policy review</div>
952            <div class="demo-sidebar-item">Lambda timeouts</div>
953            <div class="demo-sidebar-item">RDS snapshot check</div>
954          </div>
955        </div>
956
957        <!-- Chat area -->
958        <div class="demo-chat">
959          <div class="demo-chat-messages">
960            <div class="demo-msg demo-msg-user">
961              <div class="demo-msg-bubble">List all S3 buckets and flag any that have public access enabled.</div>
962            </div>
963
964            <div class="demo-msg demo-msg-agent">
965              <div class="demo-steps">
966                <div class="demo-step">
967                  <div class="demo-step-icon done">✓</div>
968                  Classified request as discovery + audit
969                </div>
970                <div class="demo-step">
971                  <div class="demo-step-icon done">✓</div>
972                  Listing buckets in us-east-1 region
973                </div>
974                <div class="demo-step">
975                  <div class="demo-step-icon done">✓</div>
976                  <span>s3:ListBuckets (us-east-1)</span>
977                </div>
978                <div class="demo-step">
979                  <div class="demo-step-icon done">✓</div>
980                  <span>s3:GetBucketPublicAccessBlock × 14</span>
981                </div>
982                <div class="demo-step">
983                  <div class="demo-step-icon run">◉</div>
984                  <span>Synthesising results <span class="shimmer-bar"></span></span>
985                </div>
986              </div>
987            </div>
988
989            <div class="demo-msg demo-msg-agent">
990              <div class="demo-msg-bubble">
991                Found <strong>14 buckets</strong> in us-east-1. <strong>2 have public access enabled</strong>:<br/><br/>
992                ⚠ <span class="mono">prod-assets-cdn</span> — ACL allows public-read<br/>
993                ⚠ <span class="mono">legacy-exports-2021</span> — bucket policy allows s3:GetObject for *
994              </div>
995            </div>
996          </div>
997
998          <!-- interactive composer — opens demo form -->
999          <div class="demo-composer" onclick="openModal()" title="Try it — request a demo">
1000            <div class="demo-composer-placeholder">Type what you want to try with the agent…<span class="cursor-blink"></span></div>
1001            <button class="demo-composer-btn" aria-label="Get started" tabindex="-1">
1002              <svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M2 10L10 6 2 2v3.5L7.5 6 2 6.5V10Z" fill="currentColor"/></svg>
1003            </button>
1004          </div>
1005        </div>
1006      </div>
1007    </div>
1008  </div>
1009</section>
1010
1011
1012<!-- ═══════════════════════════════════════════════════════════════════════════
1013     PROVIDERS STRIP
1014═══════════════════════════════════════════════════════════════════════════ -->
1015<section class="providers-strip" id="providers">
1016  <div class="container">
1017    <p class="caption providers-label">Works with your stack</p>
1018    <p class="providers-sub">Operate AWS, Google Cloud, Azure, and OCI — plus SSH-managed Linux hosts on-prem or anywhere else. Bring your own cloud, model-provider, and notification keys, and choose which model (Claude, GPT, Gemini, Bedrock) powers each project.</p>
1019    <div class="providers-marquee" aria-label="Cloud providers, model providers, and workflow tools">
1020      <div class="providers-track">
1021        <div class="providers-group" role="list">
1022          <div class="provider-logo" role="listitem" title="Amazon Web Services">
1023            <div class="provider-logo-icon wide"><img src="/images/stack/aws.svg" alt="" decoding="async" /></div>
1024            <span class="provider-logo-name">AWS</span>
1025          </div>
1026          <div class="provider-logo" role="listitem" title="Google Cloud">
1027            <div class="provider-logo-icon"><img src="/images/stack/google-cloud.svg" alt="" decoding="async" /></div>
1028            <span class="provider-logo-name">Google Cloud</span>
1029          </div>
1030          <div class="provider-logo" role="listitem" title="Microsoft Azure">
1031            <div class="provider-logo-icon"><img src="/images/stack/azure.svg" alt="" decoding="async" /></div>
1032            <span class="provider-logo-name">Azure</span>
1033          </div>
1034          <div class="provider-logo" role="listitem" title="GitHub">
1035            <div class="provider-logo-icon"><img src="/images/stack/github.svg" alt="" decoding="async" /></div>
1036            <span class="provider-logo-name">GitHub</span>
1037          </div>
1038          <div class="provider-logo" role="listitem" title="GitLab">
1039            <div class="provider-logo-icon"><img src="/images/stack/gitlab.svg" alt="" decoding="async" /></div>
1040            <span class="provider-logo-name">GitLab</span>
1041          </div>
1042          <div class="provider-logo" role="listitem" title="OpenAI">
1043            <div class="provider-logo-icon"><img src="/images/stack/openai.svg" alt="" decoding="async" /></div>
1044            <span class="provider-logo-name">OpenAI</span>
1045          </div>
1046          <div class="provider-logo" role="listitem" title="Anthropic">
1047            <div class="provider-logo-icon"><img src="/images/stack/anthropic.svg" alt="" decoding="async" /></div>
1048            <span class="provider-logo-name">Anthropic</span>
1049          </div>
1050          <div class="provider-logo" role="listitem" title="Amazon Bedrock">
1051            <div class="provider-logo-icon"><img src="/images/stack/amazon-bedrock.svg" alt="" decoding="async" /></div>
1052            <span class="provider-logo-name">Bedrock</span>
1053          </div>
1054          <div class="provider-logo" role="listitem" title="Google Gemini">
1055            <div class="provider-logo-icon"><img src="/images/stack/gemini.svg" alt="" decoding="async" /></div>
1056            <span class="provider-logo-name">Gemini</span>
1057          </div>
1058          <div class="provider-logo" role="listitem" title="Terraform">
1059            <div class="provider-logo-icon"><img src="/images/stack/terraform.svg" alt="" decoding="async" /></div>
1060            <span class="provider-logo-name">Terraform</span>
1061          </div>
1062          <div class="provider-logo" role="listitem" title="Kubernetes">
1063            <div class="provider-logo-icon"><img src="/images/stack/kubernetes.svg" alt="" decoding="async" /></div>
1064            <span class="provider-logo-name">Kubernetes</span>
1065          </div>
1066          <div class="provider-logo" role="listitem" title="Slack">
1067            <div class="provider-logo-icon"><img src="/images/stack/slack.svg" alt="" decoding="async" /></div>
1068            <span class="provider-logo-name">Slack</span>
1069          </div>
1070          <div class="provider-logo" role="listitem" title="PagerDuty">
1071            <div class="provider-logo-icon wide"><img src="/images/stack/pagerduty.svg" alt="" decoding="async" /></div>
1072            <span class="provider-logo-name">PagerDuty</span>
1073          </div>
1074          <div class="provider-logo" role="listitem" title="Azure DevOps">
1075            <div class="provider-logo-icon"><img src="/images/stack/azure-devops.svg" alt="" decoding="async" /></div>
1076            <span class="provider-logo-name">Azure DevOps</span>
1077          </div>
1078        </div>
1079        <div class="providers-group" aria-hidden="true">
1080          <div class="provider-logo" title="Amazon Web Services">
1081            <div class="provider-logo-icon wide"><img src="/images/stack/aws.svg" alt="" decoding="async" /></div>
1082            <span class="provider-logo-name">AWS</span>
1083          </div>
1084          <div class="provider-logo" title="Google Cloud">
1085            <div class="provider-logo-icon"><img src="/images/stack/google-cloud.svg" alt="" decoding="async" /></div>
1086            <span class="provider-logo-name">Google Cloud</span>
1087          </div>
1088          <div class="provider-logo" title="Microsoft Azure">
1089            <div class="provider-logo-icon"><img src="/images/stack/azure.svg" alt="" decoding="async" /></div>
1090            <span class="provider-logo-name">Azure</span>
1091          </div>
1092          <div class="provider-logo" title="GitHub">
1093            <div class="provider-logo-icon"><img src="/images/stack/github.svg" alt="" decoding="async" /></div>
1094            <span class="provider-logo-name">GitHub</span>
1095          </div>
1096          <div class="provider-logo" title="GitLab">
1097            <div class="provider-logo-icon"><img src="/images/stack/gitlab.svg" alt="" decoding="async" /></div>
1098            <span class="provider-logo-name">GitLab</span>
1099          </div>
1100          <div class="provider-logo" title="OpenAI">
1101            <div class="provider-logo-icon"><img src="/images/stack/openai.svg" alt="" decoding="async" /></div>
1102            <span class="provider-logo-name">OpenAI</span>
1103          </div>
1104          <div class="provider-logo" title="Anthropic">
1105            <div class="provider-logo-icon"><img src="/images/stack/anthropic.svg" alt="" decoding="async" /></div>
1106            <span class="provider-logo-name">Anthropic</span>
1107          </div>
1108          <div class="provider-logo" title="Amazon Bedrock">
1109            <div class="provider-logo-icon"><img src="/images/stack/amazon-bedrock.svg" alt="" decoding="async" /></div>
1110            <span class="provider-logo-name">Bedrock</span>
1111          </div>
1112          <div class="provider-logo" title="Google Gemini">
1113            <div class="provider-logo-icon"><img src="/images/stack/gemini.svg" alt="" decoding="async" /></div>
1114            <span class="provider-logo-name">Gemini</span>
1115          </div>
1116          <div class="provider-logo" title="Terraform">
1117            <div class="provider-logo-icon"><img src="/images/stack/terraform.svg" alt="" decoding="async" /></div>
1118            <span class="provider-logo-name">Terraform</span>
1119          </div>
1120          <div class="provider-logo" title="Kubernetes">
1121            <div class="provider-logo-icon"><img src="/images/stack/kubernetes.svg" alt="" decoding="async" /></div>
1122            <span class="provider-logo-name">Kubernetes</span>
1123          </div>
1124          <div class="provider-logo" title="Slack">
1125            <div class="provider-logo-icon"><img src="/images/stack/slack.svg" alt="" decoding="async" /></div>
1126            <span class="provider-logo-name">Slack</span>
1127          </div>
1128          <div class="provider-logo" title="PagerDuty">
1129            <div class="provider-logo-icon wide"><img src="/images/stack/pagerduty.svg" alt="" decoding="async" /></div>
1130            <span class="provider-logo-name">PagerDuty</span>
1131          </div>
1132          <div class="provider-logo" title="Azure DevOps">
1133            <div class="provider-logo-icon"><img src="/images/stack/azure-devops.svg" alt="" decoding="async" /></div>
1134            <span class="provider-logo-name">Azure DevOps</span>
1135          </div>
1136        </div>
1137      </div>
1138    </div>
1139  </div>
1140</section>
1141
1142
1143<!-- ═══════════════════════════════════════════════════════════════════════════
1144     FEATURES
1145═══════════════════════════════════════════════════════════════════════════ -->
1146<section class="section" id="features">
1147  <div class="container">
1148    <p class="caption" style="margin-bottom:.75rem;">Platform capabilities</p>
1149    <h2 class="heading-lg" style="margin-bottom:1rem;max-width:480px;">Everything you need to operate your cloud at the speed of thought</h2>
1150    <p class="body-md" style="max-width:560px;margin-bottom:3rem;">From one-off queries to recurring automated audits — ClowdOps handles the full lifecycle of cloud operations through a single conversational interface.</p>
1151
1152    <div class="features-grid">
1153      <div class="feature-cell">
1154        <div class="feature-icon">
1155          <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M3 9h12M9 3v12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="9" cy="9" r="7.5" stroke="currentColor" stroke-width="1.2"/></svg>
1156        </div>
1157        <div class="feature-title">Chat-first interface</div>
1158        <p class="feature-body">Describe any cloud operation in plain language. No scripts to write, no API docs to read. The agent understands intent and acts accordingly.</p>
1159      </div>
1160      <div class="feature-cell">
1161        <div class="feature-icon">
1162          <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><rect x="2" y="2" width="6" height="6" rx="1.5" stroke="currentColor" stroke-width="1.2"/><rect x="10" y="2" width="6" height="6" rx="1.5" stroke="currentColor" stroke-width="1.2"/><rect x="2" y="10" width="6" height="6" rx="1.5" stroke="currentColor" stroke-width="1.2"/><rect x="10" y="10" width="6" height="6" rx="1.5" stroke="currentColor" stroke-width="1.2"/></svg>
1163        </div>
1164        <div class="feature-title">Projects &amp; Sandboxes</div>
1165        <p class="feature-body">Organise work by team or application domain. Each sandbox holds its own credentials and run history — fully isolated and reusable.</p>
1166      </div>
1167      <div class="feature-cell">
1168        <div class="feature-icon">
1169          <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><circle cx="9" cy="9" r="7.5" stroke="currentColor" stroke-width="1.2"/><path d="M9 4.5v4.75L12 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
1170        </div>
1171        <div class="feature-title">Scheduled runs</div>
1172        <p class="feature-body">Automate task execution with cron expressions. Hourly, daily, weekly, or any custom schedule. Overlapping runs are skipped automatically.</p>
1173      </div>
1174      <div class="feature-cell">
1175        <div class="feature-icon">
1176          <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M3 5.5h12M3 9.5h12M3 13.5h7.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="14.5" cy="13.5" r="2.5" fill="none" stroke="currentColor" stroke-width="1.2"/><path d="M16.25 15.25l1.25 1.25" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
1177        </div>
1178        <div class="feature-title">Resource inventory</div>
1179        <p class="feature-body">A live, searchable inventory of every resource the agent has discovered. Dependency graphs reveal blast radius before you make changes.</p>
1180      </div>
1181      <div class="feature-cell">
1182        <div class="feature-icon">
1183          <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><rect x="2" y="8" width="14" height="8" rx="1.5" stroke="currentColor" stroke-width="1.2"/><path d="M5.5 8V6a3.5 3.5 0 0 1 7 0v2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="9" cy="12" r="1.25" fill="currentColor"/></svg>
1184        </div>
1185        <div class="feature-title">Bring your own keys</div>
1186        <p class="feature-body">
1186Add your own cloud, AI model-provider, and notification credentials — each encrypted at rest and never shown in plaintext after creation. Choose which provider powers each project, or hand the agent a preferred order to fall through.</p>
1187      </div>
1188      <div class="feature-cell">
1189        <div class="feature-icon">
1190          <!-- bell / notify icon -->
1191          <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M9 2C6.24 2 4 4.24 4 7v4l-1.5 2h13L14 11V7c0-2.76-2.24-5-5-5z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/><path d="M7 15a2 2 0 0 0 4 0" stroke="currentColor" stroke-width="1.2"/></svg>
1192        </div>
1193        <div class="feature-title">Notification channels</div>
1194        <p class="feature-body">Connect Slack, Microsoft Teams, PagerDuty, or SMTP. The agent can push alerts mid-run via the <span class="mono" style="font-size:.8rem;">notify</span> tool, or deliver a post-run digest when a scheduled task finishes.</p>
1195      </div>
1196      <div class="feature-cell">
1197        <div class="feature-icon">
1198          <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><circle cx="9" cy="7" r="3" stroke="currentColor" stroke-width="1.2"/><path d="M3 16c0-3.31 2.69-6 6-6s6 2.69 6 6" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/><path d="M13 3l2 2M15 3l-2 2" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
1199        </div>
1200        <div class="feature-title">Team &amp; access control</div>
1201        <p class="feature-body">Invite team members with Admin or Member roles. Members see only the projects and sandboxes they are explicitly invited to.</p>
1202      </div>
1203      <div class="feature-cell">
1204        <div class="feature-icon">
1205          <!-- cost / analysis icon -->
1206          <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M3 15V8M7.5 15V4M12 15v-5M16.5 15V6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><path d="M2 15.5h14" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
1207        </div>
1208        <div class="feature-title">Cloud cost analysis</div>
1209        <p class="feature-body">Just ask what you spent and where. The agent pulls cost and usage data straight from AWS, Google Cloud, and Azure and breaks it down by service, account, or period — no dashboards to wire up.</p>
1210      </div>
1211      <div class="feature-cell">
1212        <div class="feature-icon">
1213          <!-- live cost meter / gauge icon -->
1214          <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M3 13a6 6 0 1 1 12 0" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/><path d="M9 13l3-3.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="9" cy="13" r="1.1" fill="currentColor"/></svg>
1215        </div>
1216        <div class="feature-title">Live cost meter</div>
1217        <p class="feature-body">Watch spend tick up as the agent works. Every model call's cost streams to the budget badge in real time — and daily, monthly, and per-session caps stop a run cleanly before it ever goes over.</p>
1218      </div>
1219    </div>
1220  </div>
1221</section>
1222
1223
1224<!-- ═══════════════════════════════════════════════════════════════════════════
1225     HOW IT WORKS
1226═══════════════════════════════════════════════════════════════════════════ -->
1227<section class="section" id="how-it-works" style="background:var(--bg-surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border);">
1228  <div class="container">
1229    <p class="caption" style="margin-bottom:.75rem;">Execution model</p>
1230    <h2 class="heading-lg" style="max-width:560px;margin-bottom:1rem;">One conversation. Infinite context.</h2>
1231    <p class="body-md" style="max-width:600px;">ClowdOps keeps the full picture in view — every instruction, every action taken, every result returned. The agent that starts your task is the same one that finishes it: nothing is handed off, no context is lost, no detail forgotten along the way.</p>
1232
1233    <div style="margin-top:1.75rem;display:flex;align-items:center;gap:1rem;flex-wrap:wrap;">
1234      <a href="/demos/" class="btn btn-primary btn-lg">Watch it work — live demos</a>
1235      <span class="body-md" style="margin:0;">See real agent sessions replay step by step.</span>
1236    </div>
1237
1238    <div class="phases-flow" id="phasesFlow">
1239      <div class="phase-step">
1240        <div class="phase-step-num">01</div>
1241        <div>
1242          <div class="phase-step-name">Full context, every turn</div>
1243          <p class="phase-step-desc">The agent reads your message alongside the entire conversation — previous actions, real tool outputs, and earlier replies. Context never degrades as the session grows.</p>
1244        </div>
1245      </div>
1246      <div class="phase-step">
1247        <div class="phase-step-num">02</div>
1248        <div>
1249          <div class="phase-step-name">Clarify before acting</div>
1250          <p class="phase-step-desc">For ambiguous requests the agent pauses and asks a single targeted question, then proceeds without further interruption once it has what it needs.</p>
1251        </div>
1252      </div>
1253      <div class="phase-step">
1254        <div class="phase-step-num">03</div>
1255        <div>
1256          <div class="phase-step-name">Execute directly</div>
1257          <p class="phase-step-desc">Actions run in an isolated environment with your credentials pre-loaded. The agent communicates directly with your cloud providers and reads the real output each time — no intermediary layers, no synthetic responses. Every action streams to you as it happens.</p>
1258        </div>
1259      </div>
1260      <div class="phase-step">
1261        <div class="phase-step-num">04</div>
1262        <div>
1263          <div class="phase-step-name">Adapt from real feedback</div>
1264          <p class="phase-step-desc">Every result — expected or not — becomes part of the agent's reasoning. When something unexpected happens, the agent reads it and adapts immediately, keeping the task on track without human intervention.</p>
1265        </div>
1266      </div>
1267      <div class="phase-step">
1268        <div class="phase-step-num">05</div>
1269        <div>
1270          <div class="phase-step-name">Answer with a full trace</div>
1271          <p class="phase-step-desc">Once the task is done, you get a clear structured response. The full audit trail — every command run, every output received — is saved so you always know exactly what happened.</p>
1272        </div>
1273      </div>
1274    </div>
1275  </div>
1276</section>
1277
1278
1279<!-- ═══════════════════════════════════════════════════════════════════════════
1280     MCP — CONNECT YOUR CODING AGENT
1281═══════════════════════════════════════════════════════════════════════════ -->
1282<section class="section" id="mcp" style="background:var(--bg-surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border);">
1283  <div class="container">
1284    <div class="two-col reverse">
1285      <div>
1286        <p class="caption" style="margin-bottom:.75rem;">Coding agents · MCP</p>
1287        <h2 class="heading-lg" style="margin-bottom:1rem;">Drive your cloud from any coding agent</h2>
1288        <p class="body-md" style="margin-bottom:1.75rem;">Every sandbox speaks the Model Context Protocol. Connect your coding agent with a single command and prompt your cloud from inside your editor — it plans and executes against your infrastructure exactly as it does in the web chat.</p>
1289
1290        <div>
1291          <div class="check-item">
1292            <div class="check-item-icon">
1293              <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M2 5.5l2 2 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
1294            </div>
1295            <span>Connect Claude Code, Cursor, Codex, or VS Code — paste one config block or run a single command</span>
1296          </div>
1297          <div class="check-item">
1298            <div class="check-item-icon">
1299              <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M2 5.5l2 2 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
1300            </div>
1301            <span>Per-sandbox access tokens (<span class="mono" style="font-size:.8rem;">fba_…</span>) — shown once, scoped to a single sandbox, revocable in one click</span>
1302          </div>
1303          <div class="check-item">
1304            <div class="check-item-icon">
1305              <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M2 5.5l2 2 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
1306            </div>
1307            <span>Same credentials, guardrails, confirmations, and budgets — MCP changes how you reach the agent, never what it's allowed to do</span>
1308          </div>
1309          <div class="check-item">
1310            <div class="check-item-icon">
1311              <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M2 5.5l2 2 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
1312            </div>
1313            <span>Sessions stream live and land in the sandbox's Chats tab with an <span class="mono" style="font-size:.8rem;">MCP</span> badge — fully auditable</span>
1314          </div>
1315        </div>
1316
1317        <div class="section-ctas">
1318          <a href="https://github.com/clowdops/product-guides/blob/main/cloud-agent/mcp.md" target="_blank" rel="noopener" class="btn btn-outline">MCP docs</a>
1319          <button onclick="openModal()" class="btn btn-primary">Get Started</button>
1320        </div>
1321      </div>
1322
1323      <!-- Claude Code / Cursor terminal mockup -->
1324      <div>
1325        <div class="mcp-terminal">
1326          <div class="demo-titlebar">
1327            <div class="demo-titlebar-dot"></div>
1328            <div class="demo-titlebar-dot"></div>
1329            <div class="demo-titlebar-dot"></div>
1330            <div class="demo-titlebar-label mono">claude ~/infra — clowdops</div>
1331          </div>
1332<pre><span class="m-comment"># ~/.claude.json · register the sandbox as an MCP server</span>
1333<span class="m-prompt">$ </span><span class="m-cmd">claude mcp add --transport http clowdops</span> <span class="m-flag">\</span>
1334    <span class="m-cmd">https://platform.clowdops.ai/mcp</span> <span class="m-flag">--header</span> <span class="m-str">"Authorization: Bearer fba_3kQ…"</span>
1335<span class="m-ok">✓ connected</span><span class="m-muted">  ·  clowdops  ·  6 tools  ·  sandbox "AWS Prod"</span>
1336
1337<span class="m-prompt">❯ </span>any S3 buckets in prod with public access?
1338
1339<span class="m-tool">⏺ clowdops · create_session</span>
1340<span class="m-muted">  ⎿ conversation_id  cnv_8f2a4c</span>
1341<span class="m-tool">⏺ clowdops · send_message</span>
1342<span class="m-muted">  ⎿ scanned 14 buckets · </span><span class="m-warn">2 public ⚠</span>
1343<span class="m-muted">     prod-assets-cdn · legacy-exports-2021</span>
1344<span class="m-muted">  ⎿ done · 1,842 tokens · $0.02 · audited in ClowdOps ↗</span></pre>
1345        </div>
1346      </div>
1347    </div>
1348  </div>
1349</section>
1350
1351
1352<!-- ═══════════════════════════════════════════════════════════════════════════
1353     TELEGRAM
1354═══════════════════════════════════════════════════════════════════════════ -->
1355<section class="section" id="telegram" style="border-bottom:1px solid var(--border);">
1356  <div class="container">
1357    <div style="text-align:center; max-width:720px; margin:0 auto 2.75rem;">
1358      <p class="caption" style="margin-bottom:.75rem;">Notify &amp; drive · Telegram</p>
1359      <h2 class="heading-lg" style="margin-bottom:1rem;">Telegram, both ways</h2>
1360      <p class="body-md">From a single bot: the agent posts findings and run digests to your chat — and you can drive a sandbox by messaging it, with anything risky paused for an <strong>Allow / Deny</strong> tap.</p>
1361    </div>
1362
1363    <!-- Single animated mockup: full lifecycle — link → drive → notify -->
1364    <div class="tg-duo" style="justify-content:center;">
1365      <div class="tg-phone-wrap">
1366        <div class="tg-cardlabel">Link, drive &amp; get notified <small>· all from one chat</small></div>
1367        <div class="tg-phone">
1368          <div class="tg-header">
1369            <div class="tg-avatar">◆</div>
1370            <div>
1371              <div class="tg-title">ClowdOps Agent</div>
1372              <div class="tg-sub">bot · sandbox “GCP Prod”</div>
1373            </div>
1374          </div>
1375          <div class="tg-body chat" id="tgChat"></div>
1376        </div>
1377      </div>
1378    </div>
1379
1380    <!-- Key points + CTAs -->
1381    <div style="max-width:640px; margin:2.75rem auto 0;">
1382      <div class="check-item">
1383        <div class="check-item-icon">
1384          <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M2 5.5l2 2 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
1385        </div>
1386        <span>Link a chat with a one-time <span class="mono" style="font-size:.8rem;">/link</span> code — no token pasted into Telegram; one bot per project, one chat per sandbox</span>
1387      </div>
1388      <div class="check-item">
1389        <div class="check-item-icon">
1390          <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M2 5.5l2 2 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
1391        </div>
1392        <span>Guarded actions pause for an Allow/Deny tap — same credentials, guardrails, confirmations, and budgets as the web app</span>
1393      </div>
1394      <div class="check-item">
1395        <div class="check-item-icon">
1396          <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M2 5.5l2 2 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
1397        </div>
1398        <span>Telegram sessions land in the sandbox's Chats tab with a <span class="mono" style="font-size:.8rem;">Telegram</span> badge — fully auditable</span>
1399      </div>
1400
1401      <div class="section-ctas" style="justify-content:center; margin-top:2rem;">
1402        <a href="https://github.com/clowdops/product-guides/blob/main/cloud-agent/tg.md" target="_blank" rel="noopener" class="btn btn-outline">Telegram docs</a>
1403        <button onclick="openModal()" class="btn btn-primary">Get Started</button>
1404      </div>
1405    </div>
1406  </div>
1407</section>
1408
1409
1410<!-- ═══════════════════════════════════════════════════════════════════════════
1411     RESOURCE INVENTORY HIGHLIGHT
1412═══════════════════════════════════════════════════════════════════════════ -->
1413<section class="section">
1414  <div class="container">
1415    <div class="two-col">
1416      <div>
1417        <p class="caption" style="margin-bottom:.75rem;">Resource inventory</p>
1418        <h2 class="heading-lg" style="margin-bottom:1rem;">Your full infrastructure, organised and searchable</h2>
1419        <p class="body-md" style="margin-bottom:1.75rem;">ClowdOps automatically discovers and catalogues every resource it encounters. Drill into any resource to see raw metadata, inbound and outbound dependencies, and blast-radius graphs.</p>
1420
1421        <div>
1422          <div class="check-item">
1423            <div class="check-item-icon">
1424              <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M2 5.5l2 2 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
1425            </div>
1426            <span>Hierarchical tree: provider → account → region → type → resource</span>
1427          </div>
1428          <div class="check-item">
1429            <div class="check-item-icon">
1430              <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M2 5.5l2 2 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
1431            </div>
1432            <span>Instant search by name, ID, or resource type</span>
1433          </div>
1434          <div class="check-item">
1435            <div class="check-item-icon">
1436              <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M2 5.5l2 2 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
1437            </div>
1438            <span>Dependency graph for understanding connectivity and risk</span>
1439          </div>
1440          <div class="check-item">
1441            <div class="check-item-icon">
1442              <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M2 5.5l2 2 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
1443            </div>
1444            <span>Populate via chat: "discover all resources in us-east-1"</span>
1445          </div>
1446        </div>
1447
1448        <div class="section-ctas">
1449          <a href="https://github.com/clowdops/product-guides/blob/main/cloud-agent/resources.md" target="_blank" rel="noopener" class="btn btn-outline">View docs</a>
1450          <button onclick="openModal()" class="btn btn-primary">Get Started</button>
1451        </div>
1452      </div>
1453
1454      <!-- vertical resource tree -->
1455      <div class="resource-tree">
1456<div><span class="r-provider">▾ AWS</span></div>
1457<div style="padding-left:1.25rem"><span class="r-provider">▾ 123456789012 (prod)</span></div>
1458<div style="padding-left:2.5rem"><span>▾ us-east-1</span></div>
1459<div style="padding-left:3.75rem"><span>▾ EC2</span></div>
1460<div style="padding-left:5rem"><span class="r-active">i-0abc123  web-server-1</span></div>
1461<div style="padding-left:5rem"><span class="r-active">i-0def456  web-server-2</span></div>
1462<div style="padding-left:5rem"><span class="r-warn">i-0ghi789  bastion (public)</span></div>
1463<div style="padding-left:3.75rem"><span>▾ S3</span></div>
1464<div style="padding-left:5rem"><span class="r-active">prod-assets-cdn</span></div>
1465<div style="padding-left:5rem"><span class="r-warn">legacy-exports-2021</span></div>
1466<div style="padding-left:5rem"><span class="r-active">terraform-state</span></div>
1467<div style="padding-left:3.75rem"><span>▾ RDS</span></div>
1468<div style="padding-left:5rem"><span class="r-active">db-prod-postgres14</span></div>
1469<div style="padding-left:3.75rem"><span>▾ Lambda</span></div>
1470<div style="padding-left:5rem"><span class="r-active">payments-handler</span></div>
1471<div style="padding-left:5rem"><span class="r-active">notifications-worker</span></div>
1472<div style="margin-top:.75rem"><span class="r-provider">▾ Azure</span></div>
1473<div style="padding-left:1.25rem"><span class="r-provider">▾ sub-analytics (staging)</span></div>
1474<div style="padding-left:2.5rem"><span>▾ eastus</span></div>
1475<div style="padding-left:3.75rem"><span>▾ VMs</span></div>
1476<div style="padding-left:5rem"><span class="r-active">analytics-vm-01</span></div>
1477      </div>
1478    </div>
1479  </div>
1480</section>
1481
1482
1483<!-- ═══════════════════════════════════════════════════════════════════════════
1484     SCHEDULES
1485═══════════════════════════════════════════════════════════════════════════ -->
1486<section class="section" style="background:var(--bg-surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border);">
1487  <div class="container">
1488    <div class="two-col reverse">
1489      <div>
1490        <p class="caption" style="margin-bottom:.75rem;">Schedules</p>
1491        <h2 class="heading-lg" style="margin-bottom:1rem;">Automate your cloud ops on a schedule</h2>
1492        <p class="body-md" style="margin-bottom:1.75rem;">Write a prompt, set a cron expression, and let ClowdOps run it automatically — no extra tooling, no YAML pipelines.</p>
1493
1494        <div>
1495          <div class="check-item">
1496            <div class="check-item-icon">
1497              <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M2 5.5l2 2 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
1498            </div>
1499            <span>Hourly, daily, weekly, or any custom cron expression</span>
1500          </div>
1501          <div class="check-item">
1502            <div class="check-item-icon">
1503              <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M2 5.5l2 2 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
1504            </div>
1505            <span>Overlap protection — concurrent runs are automatically skipped</span>
1506          </div>
1507          <div class="check-item">
1508            <div class="check-item-icon">
1509              <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M2 5.5l2 2 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
1510            </div>
1511            <span>Post-run digest via Slack, Teams, PagerDuty, or email — on success, failure, or block</span>
1512          </div>
1513        </div>
1514
1515        <div class="section-ctas">
1516          <a href="https://github.com/clowdops/product-guides/blob/main/cloud-agent/schedules.md" target="_blank" rel="noopener" class="btn btn-outline">Schedules docs</a>
1517          <button onclick="openModal()" class="btn btn-primary">Get Started</button>
1518        </div>
1519      </div>
1520
1521      <div>
1522        <div class="code-card">
1523          <div class="code-card-header">
1524            <svg width="12" height="12" fill="none" viewBox="0 0 12 12"><circle cx="6" cy="6" r="4.5" stroke="currentColor" stroke-width="1.2"/><path d="M6 3.5v2.75L7.75 8" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
1525            Daily S3 Audit — Prod
1526          </div>
1527          <pre><span class="c-comment">// Schedule: 0 8 * * *  (every day at 08:00 UTC)</span>
1528<span class="c-key">prompt</span>:    <span class="c-str">"S3 Public Access Audit"</span>
1529<span class="c-key">sandbox</span>:  <span class="c-str">"AWS Prod"</span>
1530<span class="c-key">status</span>:   <span class="c-val">active</span>
1531
1532<span class="c-comment">// Last run: today at 08:00 UTC</span>
1533<span class="c-key">result</span>:   <span class="c-val">2 buckets flagged</span>
1534<span class="c-key">tokens</span>:   <span class="c-val">1,842 used</span>
1535<span class="c-key">duration</span>: <span class="c-val">14.3s</span>
1536<span class="c-key">notify</span>:   <span class="c-str">slack-ops-channel</span>
1537<span class="c-key">send-on</span>:  <span class="c-val">failure | blocked</span></pre>
1538        </div>
1539
1540        <div style="margin-top:1rem;" class="code-card">
1541          <div class="code-card-header">
1542            <svg width="12" height="12" fill="none" viewBox="0 0 12 12"><rect x="1" y="1" width="10" height="10" rx="1.5" stroke="currentColor" stroke-width="1.2"/><path d="M4 6h4M6 4v4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
1543            Weekly Cost Report
1544          </div>
1545          <pre><span class="c-comment">// Schedule: 0 9 * * 1  (every Monday at 09:00 UTC)</span>
1546<span class="c-key">prompt</span>:    <span class="c-str">"Cross-Account Cost Summary"</span>
1547<span class="c-key">sandbox</span>:  <span class="c-str">"GCP Analytics"</span>
1548<span class="c-key">status</span>:   <span class="c-val">active</span>
1549<span class="c-key">notify</span>:   <span class="c-str">teams-finance</span>
1550<span class="c-key">send-on</span>:  <span class="c-val">always</span></pre>
1551        </div>
1552      </div>
1553    </div>
1554  </div>
1555</section>
1556
1557
1558<!-- ═══════════════════════════════════════════════════════════════════════════
1559     SECURITY
1560═══════════════════════════════════════════════════════════════════════════ -->
1561<section class="section">
1562  <div class="container">
1563    <p class="caption" style="margin-bottom:.75rem;">Security</p>
1564    <h2 class="heading-lg" style="max-width:480px;margin-bottom:1rem;">Built for teams that need to trust their tooling</h2>
1565    <p class="body-md" style="max-width:560px;">ClowdOps is designed around the principle that credentials and access should be explicit, encrypted, and auditable at every layer.</p>
1566
1567    <div class="security-grid">
1568      <div class="security-item">
1569        <div class="security-item-icon">
1570          <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><rect x="2" y="8" width="14" height="8" rx="1.5" stroke="currentColor" stroke-width="1.2"/><path d="M5 8V6a4 4 0 0 1 8 0v2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="9" cy="12" r="1.25" fill="currentColor"/></svg>
1571        </div>
1572        <div>
1573          <div class="security-item-title">Encrypted at rest</div>
1574          <p class="security-item-body">All credentials encrypted in storage. Never exposed in plaintext after creation — not in logs, not in UI.</p>
1575        </div>
1576      </div>
1577      <div class="security-item">
1578        <div class="security-item-icon">
1579          <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M9 2l1.75 3.5 4 .5-3 3 .75 4L9 11.5 6.5 13 7.25 9 4.25 6l4-.5L9 2Z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/></svg>
1580        </div>
1581        <div>
1582          <div class="security-item-title">Multi-factor auth</div>
1583          <p class="security-item-body">Time-based one-time passwords (TOTP) and one-time magic-link email add a strong, phishing-resistant second factor to every account.</p>
1584        </div>
1585      </div>
1586      <div class="security-item">
1587        <div class="security-item-icon">
1588          <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><circle cx="9" cy="9" r="7" stroke="currentColor" stroke-width="1.2"/><path d="M6 9l2 2 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
1589        </div>
1590        <div>
1591          <div class="security-item-title">Role-based access</div>
1592          <p class="security-item-body">Admin and Member roles. Members only see the projects and sandboxes they are explicitly invited to.</p>
1593        </div>
1594      </div>
1595      <div class="security-item">
1596        <div class="security-item-icon">
1597          <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><rect x="2" y="3" width="14" height="12" rx="1.5" stroke="currentColor" stroke-width="1.2"/><path d="M2 8h14M5 3v5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
1598        </div>
1599        <div>
1600          <div class="security-item-title">Activity audit log</div>
1601          <p class="security-item-body">Full event history: logins, config changes, credential updates, member invites, and agent runs.</p>
1602        </div>
1603      </div>
1604      <div class="security-item">
1605        <div class="security-item-icon">
1606          <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M9 2C5.69 2 3 4.69 3 8v1h1.5V8a4.5 4.5 0 1 1 9 0v1H15V8c0-3.31-2.69-6-6-6Z" stroke="currentColor" stroke-width="1.2"/><rect x="3.5" y="9" width="11" height="7" rx="1.5" stroke="currentColor" stroke-width="1.2"/></svg>
1607        </div>
1608        <div>
1609          <div class="security-item-title">Sandbox isolation</div>
1610          <p class="security-item-body">Each sandbox is a fully isolated execution context — credentials and runs don't bleed across boundaries.</p>
1611        </div>
1612      </div>
1613      <div class="security-item">
1614        <div class="security-item-icon">
1615          <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M9 2C5 2 2 4.69 2 8c0 1.5.5 2.9 1.35 4L2 14l3-.5A6.95 6.95 0 0 0 9 15c4 0 7-2.69 7-6s-3-7-7-7z" stroke="currentColor" stroke-width="1.2"/><path d="M6 8h6M9 5v6" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg>
1616        </div>
1617        <div>
1618          <div class="security-item-title">Single sign-on</div>
1619          <p class="security-item-body">Sign in with Google, Microsoft, or GitHub — no extra passwords to manage, with access tied to your identity provider.</p>
1620        </div>
1621      </div>
1622    </div>
1623  </div>
1624</section>
1625
1626
1627<!-- ═══════════════════════════════════════════════════════════════════════════
1628     GUARDRAILS
1629═══════════════════════════════════════════════════════════════════════════ -->
1630<section class="section" style="background:var(--bg-surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border);">
1631  <div class="container">
1632    <div class="two-col">
1633      <div>
1634        <p class="caption" style="margin-bottom:.75rem;">Guardrails</p>
1635        <h2 class="heading-lg" style="margin-bottom:1rem;">The agent is powerful.<br/>You decide how far it goes.</h2>
1636        <p class="body-md" style="margin-bottom:1.75rem;">Two independent controls govern every run: action grants determine <em>what kind</em> of change the agent can make, and cost caps determine <em>how much</em> it can spend. Neither can be exceeded — even by the agent itself.</p>
1637
1638        <div>
1639          <div class="check-item">
1640            <div class="check-item-icon">
1641              <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M2 5.5l2 2 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
1642            </div>
1643            <span>Eight action categories — read, write, create, delete, destroy, modify IAM, change network, run on host. Grant only what each sandbox actually needs</span>
1644          </div>
1645          <div class="check-item">
1646            <div class="check-item-icon">
1647              <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M2 5.5l2 2 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
1648            </div>
1649            <span>Hierarchical inheritance: limits cascade from org → project → sandbox. A child scope can never be more permissive than its parent</span>
1650          </div>
1651          <div class="check-item">
1652            <div class="check-item-icon">
1653              <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M2 5.5l2 2 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
1654            </div>
1655            <span>In-chat confirmation: even for granted actions, the agent shows exactly what it's about to run — you approve, allow for the session, or deny with a note</span>
1656          </div>
1657          <div class="check-item">
1658            <div class="check-item-icon">
1659              <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M2 5.5l2 2 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
1660            </div>
1661            <span>Scheduled runs are unattended — confirmation becomes an automatic deny; each schedule carries its own minimal allowlist</span>
1662          </div>
1663          <div class="check-item">
1664            <div class="check-item-icon">
1665              <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M2 5.5l2 2 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
1666            </div>
1667            <span>Daily, monthly, and per-session cost caps: a budget-exceeded turn stops cleanly and reports what it completed before halting</span>
1668          </div>
1669        </div>
1670
1671        <div class="section-ctas">
1672          <a href="https://github.com/clowdops/product-guides/blob/main/cloud-agent/guardrails.md" target="_blank" rel="noopener" class="btn btn-outline">Guardrails docs</a>
1673          <button onclick="openModal()" class="btn btn-primary">Get Started</button>
1674        </div>
1675      </div>
1676
1677      <div>
1678        <!-- action grants panel mockup -->
1679        <div class="grants-panel">
1680          <div class="grants-panel-header">
1681            <svg width="12" height="12" viewBox="0 0 12 12" fill="none"><rect x="1" y="5.5" width="10" height="5.5" rx="1" stroke="currentColor" stroke-width="1.1"/><path d="M3.5 5.5V4a2.5 2.5 0 0 1 5 0v1.5" stroke="currentColor" stroke-width="1.1" stroke-linecap="round"/></svg>
1682            Allowed actions — AWS Prod sandbox
1683          </div>
1684          <div class="grants-grid-inner">
1685            <div class="grant-row">
1686              <span class="grant-dot allow"></span>Read (always on)
1687            </div>
1688            <div class="grant-row">
1689              <span class="grant-dot allow"></span>Write data
1690            </div>
1691            <div class="grant-row">
1692              <span class="grant-dot allow"></span>Create resource
1693            </div>
1694            <div class="grant-row denied">
1695              <span class="grant-dot deny"></span>Delete data
1696            </div>
1697            <div class="grant-row denied">
1698              <span class="grant-dot deny"></span>Destroy resource
1699            </div>
1700            <div class="grant-row denied">
1701              <span class="grant-dot deny"></span>Scale capacity
1702            </div>
1703            <div class="grant-row denied">
1704              <span class="grant-dot deny"></span>Modify IAM
1705            </div>
1706            <div class="grant-row denied">
1707              <span class="grant-dot deny"></span>Modify network
1708            </div>
1709          </div>
1710        </div>
1711
1712        <!-- confirmation card mockup -->
1713        <div class="confirm-card-mockup">
1714          <div class="confirm-card-title">Confirm action</div>
1715          <div class="confirm-cmd">aws ec2 terminate-instances --instance-ids i-0abc123def456</div>
1716          <div class="confirm-meta">
1717            <span class="confirm-category-badge">
1718              <svg width="8" height="8" viewBox="0 0 8 8" fill="none"><path d="M1 4.5l1.5 1.5 3.5-3.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
1719              Destroy resource
1720            </span>
1721            <span style="opacity:.5;">· requires confirmation</span>
1722          </div>
1723          <div class="confirm-actions">
1724            <div class="confirm-btn allow">Approve once</div>
1725            <div class="confirm-btn">Allow session</div>
1726            <div class="confirm-btn">Deny</div>
1727          </div>
1728        </div>
1729      </div>
1730    </div>
1731  </div>
1732</section>
1733
1734
1735<!-- ═══════════════════════════════════════════════════════════════════════════
1736     CTA
1737═══════════════════════════════════════════════════════════════════════════ -->
1738<section class="cta-section">
1739  <div class="container">
1740    <p class="caption" style="margin-bottom:1.5rem;">Get started today</p>
1741    <h2 class="display" style="margin-bottom:1.5rem;">Talk to your cloud.<br/><em style="color:var(--fg-muted);">Finally.</em></h2>
1742    <p class="body-lg" style="max-width:480px;margin:0 auto 2.5rem;">Connect a cloud provider, describe a task, and watch the agent work. Request a demo and we'll get you set up.</p>
1743    <div style="display:flex;align-items:center;justify-content:center;gap:.75rem;flex-wrap:wrap;">
1744      <button onclick="openModal()" class="btn btn-primary btn-lg">
1745        Request a demo
1746        <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 7H11M11 7L7.5 3.5M11 7L7.5 10.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
1747      </button>
1748      <a href="https://github.com/clowdops/product-guides/blob/main/cloud-agent/README.md" target="_blank" rel="noopener" class="btn btn-outline btn-lg">Read the docs</a>
1749    </div>
1750  </div>
1751</section>
1752
1753
1754<!-- ═══════════════════════════════════════════════════════════════════════════
1755     FOOTER
1756═══════════════════════════════════════════════════════════════════════════ -->
1757<footer class="footer">
1758  <div class="container">
1759    <div class="footer-grid">
1760      <div>
1761        <a href="#home" class="nav-logo" style="display:inline-flex;margin-bottom:.5rem;">
1762          <div class="nav-logo-mark">
1763            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
1764              <path d="M9.5 2C7.57 2 5.9 3.26 5.24 5.02C4.52 4.47 3.62 4.17 2.67 4.25C1.17 4.38 0 5.64 0 7.15C0 8.73 1.27 10 2.85 10H5.5L4 13H7L5.5 16H10.5L9 13H12L10.5 10H13.15C14.73 10 16 8.73 16 7.15C16 5.57 14.73 4.3 13.15 4.3C13.1 4.3 13.05 4.3 13 4.31C12.42 2.96 11.06 2 9.5 2Z" fill="currentColor"/>
1765            </svg>
1766          </div>
1767          ClowdOps
1768        </a>
1769        <p class="footer-brand-desc">A chat-oriented AI platform for cloud infrastructure operations. Bring your keys — ClowdOps does the rest.</p>
1770      </div>
1771      <div>
1772        <div class="footer-col-title">Docs</div>
1773        <ul class="footer-links">
1774          <li><a href="https://github.com/clowdops/product-guides/blob/main/cloud-agent/getting-started.md" target="_blank" rel="noopener">Getting started</a></li>
1775          <li><a href="https://github.com/clowdops/product-guides/blob/main/cloud-agent/chat.md" target="_blank" rel="noopener">Chat</a></li>
1776          <li><a href="https://github.com/clowdops/product-guides/blob/main/cloud-agent/mcp.md" target="_blank" rel="noopener">Connect agents (MCP)</a></li>
1777          <li><a href="https://github.com/clowdops/product-guides/blob/main/cloud-agent/tg.md" target="_blank" rel="noopener">Telegram</a></li>
1778          <li><a href="https://github.com/clowdops/product-guides/blob/main/cloud-agent/schedules.md" target="_blank" rel="noopener">Schedules</a></li>
1779          <li><a href="https://github.com/clowdops/product-guides/blob/main/cloud-agent/runs.md" target="_blank" rel="noopener">Runs</a></li>
1780          <li><a href="https://github.com/clowdops/product-guides/blob/main/cloud-agent/resources.md" target="_blank" rel="noopener">Resources</a></li>
1781          <li><a href="https://github.com/clowdops/product-guides/blob/main/cloud-agent/your-workspace.md" target="_blank" rel="noopener">Your workspace</a></li>
1782          <li><a href="https://github.com/clowdops/product-guides/blob/main/cloud-agent/guardrails.md" target="_blank" rel="noopener">Guardrails</a></li>
1783          <li><a href="https://github.com/clowdops/product-guides/blob/main/cloud-agent/team-sett
1783ings.md" target="_blank" rel="noopener">Team &amp; settings</a></li>
1784        </ul>
1785      </div>
1786      <div>
1787        <div class="footer-col-title">Product</div>
1788        <ul class="footer-links">
1789          <li><a href="#features">Features</a></li>
1790          <li><a href="#how-it-works">How it works</a></li>
1791          <li><a href="#mcp">MCP &amp; coding agents</a></li>
1792          <li><a href="#telegram">Telegram</a></li>
1793          <li><a href="#providers">Providers</a></li>
1794          <li><a href="/demos/">Demos</a></li>
1795          <li><a href="/changelog">Changelog</a></li>
1796        </ul>
1797      </div>
1798      <div>
1799        <div class="footer-col-title">Company</div>
1800        <ul class="footer-links">
1801          <li><a href="https://www.flashback.tech/" target="_blank" rel="noopener">About us</a></li>
1802          <li><a href="https://www.flashback.tech/blog" target="_blank" rel="noopener">Blog</a></li>
1803          <li><a href="https://www.flashback.tech/contact/" target="_blank" rel="noopener">Contact</a></li>
1804          <li><a href="/privacy">Privacy</a></li>
1805          <li><a href="/terms">Terms</a></li>
1806        </ul>
1807      </div>
1808    </div>
1809    <div class="footer-bottom">
1810      <span>© 2026 Flashback Corporation. All rights reserved.</span>
1811      <span style="display:flex;gap:1rem;">
1812        <a href="https://github.com/clowdops" target="_blank" rel="noopener" style="color:var(--fg-muted);transition:color .15s;" onmouseover="this.style.color='var(--fg)'" onmouseout="this.style.color='var(--fg-muted)'">GitHub</a>
1813        <a href="https://twitter.com/clowdops" target="_blank" rel="noopener" style="color:var(--fg-muted);transition:color .15s;" onmouseover="this.style.color='var(--fg)'" onmouseout="this.style.color='var(--fg-muted)'">Twitter / X</a>
1814      </span>
1815    </div>
1816  </div>
1817</footer>
1818
1819
1820<script>
1821  /* ── Modal ──────────────────────────────────────────────────────────────── */
1822  const modal   = document.getElementById('demoModal');
1823  const closeBtn = document.getElementById('modalClose');
1824
1825  function openModal() {
1826    modal.classList.add('open');
1827    document.body.style.overflow = 'hidden';
1828    setTimeout(() => document.getElementById('firstName').focus(), 50);
1829  }
1830
1831  function closeModal() {
1832    modal.classList.remove('open');
1833    document.body.style.overflow = '';
1834  }
1835
1836  closeBtn.addEventListener('click', closeModal);
1837  modal.addEventListener('click', e => { if (e.target === modal) closeModal(); });
1838  document.addEventListener('keydown', e => { if (e.key === 'Escape') closeModal(); });
1839
1840  /* form → backend (POST /contact, which emails the team). Replaces the old
1841     mailto: handler, which silently failed for anyone without a configured
1842     desktop mail client. The endpoint lives on the platform API, reached
1843     same-host via the /api prefix nginx strips before the backend. */
1844  const CONTACT_ENDPOINT = 'https://platform.clowdops.ai/api/contact';
1845  const demoForm   = document.getElementById('demoForm');
1846  const formStatus = document.getElementById('formStatus');
1847  const formSubmit = demoForm.querySelector('.form-submit');
1848
1849  function setStatus(msg, kind) {
1850    if (!msg) { formStatus.style.display = 'none'; formStatus.textContent = ''; return; }
1851    formStatus.textContent = msg;
1852    formStatus.style.color = kind === 'error' ? 'hsl(0,70%,68%)' : 'hsl(152,55%,60%)';
1853    formStatus.style.display = 'block';
1854  }
1855
1856  // Each Turnstile token is single-use; reset the widget after every attempt so
1857  // the next submit (retry or a reopened modal) gets a fresh token.
1858  function resetCaptcha() { if (window.turnstile) { try { turnstile.reset(); } catch (_) {} } }
1859
1860  demoForm.addEventListener('submit', async function(e) {
1861    e.preventDefault();
1862    const fd = new FormData(this);
1863    const payload = {
1864      firstName: (fd.get('firstName') || '').toString().trim(),
1865      lastName:  (fd.get('lastName')  || '').toString().trim(),
1866      company:   (fd.get('company')   || '').toString().trim(),
1867      email:     (fd.get('email')     || '').toString().trim(),
1868      message:   (fd.get('message')   || '').toString(),
1869      website:   (fd.get('website')   || '').toString(), // honeypot
1870      turnstileToken: (fd.get('cf-turnstile-response') || '').toString(),
1871    };
1872
1873    formSubmit.disabled = true;
1874    formSubmit.style.opacity = '.6';
1875    const originalLabel = formSubmit.innerHTML;
1876    formSubmit.textContent = 'Sending…';
1877    setStatus('', null);
1878
1879    try {
1880      const res  = await fetch(CONTACT_ENDPOINT, {
1881        method: 'POST',
1882        headers: { 'Content-Type': 'application/json' },
1883        body: JSON.stringify(payload),
1884      });
1885      let data = {};
1886      try { data = await res.json(); } catch (_) { /* non-JSON error page */ }
1887
1888      if (res.ok && data.success) {
1889        this.reset();
1890        resetCaptcha();
1891        setStatus("Thanks — we've got your request and will be in touch shortly.", 'ok');
1892        formSubmit.innerHTML = originalLabel;
1893        formSubmit.disabled = false;
1894        formSubmit.style.opacity = '';
1895        setTimeout(closeModal, 2500);
1896      } else {
1897        resetCaptcha();
1898        setStatus((data && data.message) ? data.message : 'Something went wrong. Please try again.', 'error');
1899        formSubmit.innerHTML = originalLabel;
1900        formSubmit.disabled = false;
1901        formSubmit.style.opacity = '';
1902      }
1903    } catch (_) {
1904      resetCaptcha();
1905      setStatus('Could not reach the server. Please check your connection and try again in a moment.', 'error');
1906      formSubmit.innerHTML = originalLabel;
1907      formSubmit.disabled = false;
1908      formSubmit.style.opacity = '';
1909    }
1910  });
1911
1912  /* ── Mobile nav ─────────────────────────────────────────────────────────── */
1913  function toggleMobileMenu() {
1914    const menu = document.getElementById('mobileMenu');
1915    const btn   = document.getElementById('navHamburger');
1916    const open  = menu.classList.toggle('open');
1917    btn.setAttribute('aria-expanded', String(open));
1918  }
1919
1920  function closeMobileMenu() {
1921    const menu = document.getElementById('mobileMenu');
1922    const btn   = document.getElementById('navHamburger');
1923    menu.classList.remove('open');
1924    btn.setAttribute('aria-expanded', 'false');
1925  }
1926
1927  window.addEventListener('resize', () => {
1928    if (window.innerWidth > 768) closeMobileMenu();
1929  });
1930
1931  /* ── How-it-works: slide-in animation via IntersectionObserver ──────────── */
1932  const steps = document.querySelectorAll('.phase-step');
1933  const stepObserver = new IntersectionObserver((entries) => {
1934    entries.forEach(entry => {
1935      if (entry.isIntersecting) {
1936        entry.target.classList.add('visible');
1937        stepObserver.unobserve(entry.target);
1938      }
1939    });
1940  }, { threshold: 0.15 });
1941
1942  steps.forEach((step, i) => {
1943    step.style.transitionDelay = (i * 0.1) + 's';
1944    stepObserver.observe(step);
1945  });
1946</script>
1946
1947
1948<!-- Telegram chat — full lifecycle replay (link → drive → notify) -->
1949<script>
1950(function () {
1951  var chat = document.getElementById('tgChat');
1952  if (!chat) return;
1953  var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
1954  var sleep = function (ms) { return new Promise(function (r) { setTimeout(r, ms); }); };
1955  var token = 0, started = false;
1956
1957  function node(html, cls) { var d = document.createElement('div'); d.className = cls; d.innerHTML = html; return d; }
1958  function scrollDown() { chat.scrollTop = chat.scrollHeight; }
1959  function add(n) { chat.appendChild(n); scrollDown(); return n; }
1960  function user(html) { return add(node(html, 'tg-msg user tg-in')); }
1961  function bot(html)  { return add(node(html, 'tg-msg bot tg-in')); }
1962  function chip(html) { return add(node(html, 'tg-chip tg-in')); }
1963  function typing()   { return add(node('<span></span><span></span><span></span>', 'tg-typing tg-in')); }
1964
1965  var STEPS_VM = '<div class="tg-steps">' +
1966      '<div><span class="s-done">✓</span> Classified · discovery (read-only)</div>' +
1967      '<div><span class="s-done">✓</span> <span class="tg-mono">gcloud compute instances list</span> · us-east + eu-central</div>' +
1968    '</div>';
1969  var VM_LIST = 'Here are your GCP VMs in those regions:' +
1970    '<div class="tg-steps" style="margin-top:.35rem;">' +
1971      '<div>🔴 <span class="tg-mono">acme-instance-us-east-1</span> · us-east1-b · <span class="tg-warn">TERMINATED</span></div>' +
1972      '<div>🟢 <span class="tg-mono">acme-instance-eu-central-1</span> · europe-west3-a · <span class="tg-ok">RUNNING</span></div>' +
1973      '<div>🟢 <span class="tg-mono">acme-api-eu-central-1</span> · europe-west3-a · <span class="tg-ok">RUNNING</span></div>' +
1974    '</div>' +
1975    '<div class="tg-confirm-meta" style="margin-top:.45rem;">done · 1,240 tokens · $0.01 · audited in ClowdOps ↗</div>';
1976  var NOTIF = '<div class="tg-confirm-title">🔔 Heads-up — idle resource</div>' +
1977    '<div class="tg-confirm-meta" style="margin-top:.15rem;"><span class="tg-mono">acme-instance-us-east-1</span> is TERMINATED, but its 100 GB disk is still billing (~$10/mo). Reply here to clean it up.</div>' +
1978    '<div class="tg-confirm-meta" style="margin-top:.45rem;">pushed by ClowdOps ↗</div>';
1979
1980  function renderStatic() {
1981    chat.innerHTML = '';
1982    user('<span class="tg-cmd">/start</span>');
1983    bot('This chat isn\'t linked to a sandbox yet. Send <span class="tg-cmd">/link &lt;code&gt;</span> — get a code from the sandbox Credentials tab.');
1984    user('<span class="tg-cmd">/link</span> K7M2QX8410');
1985    bot('✅ <strong>Linked.</strong> Messages in this chat now drive the connected sandbox. Send <span class="tg-cmd">/new</span> to start a fresh session.');
1986    user('<span class="tg-cmd">/new</span>');
1987    bot('✨ Started a new session.');
1988    user('Give me the list of VMs in GCP indicating the status. Regions us-east and eu-central');
1989    bot(STEPS_VM); bot(VM_LIST);
1990    chip('ClowdOps · notification'); bot(NOTIF);
1991  }
1992
1993  async function play() {
1994    var t = ++token;
1995    chat.innerHTML = '';
1996    var step = async function (fn, wait) { if (t !== token) return; fn(); await sleep(wait); };
1997    await sleep(600);
1998    await step(function(){ user('<span class="tg-cmd">/start</span>'); }, 1100);
1999    await step(function(){ bot('This chat isn\'t linked to a sandbox yet. Send <span class="tg-cmd">/link &lt;code&gt;</span> — get a code from the sandbox Credentials tab.'); }, 1700);
2000    await step(function(){ user('<span class="tg-cmd">/link</span> K7M2QX8410'); }, 1000);
2001    await step(function(){ bot('✅ <strong>Linked.</strong> Messages in this chat now drive the connected sandbox. Send <span class="tg-cmd">/new</span> to start a fresh session.'); }, 1700);
2002    await step(function(){ user('<span class="tg-cmd">/new</span>'); }, 900);
2003    await step(function(){ bot('✨ Started a new session.'); }, 1300);
2004    await step(function(){ user('Give me the list of VMs in GCP indicating the status. Regions us-east and eu-central'); }, 700);
2005    if (t !== token) return;
2006    var ty = typing(); await sleep(1500);
2007    if (t !== token) return; ty.remove();
2008    await step(function(){ bot(STEPS_VM); }, 1500);
2009    await step(function(){ bot(VM_LIST); }, 2800);
2010    await sleep(1800); // short pause before the notification
2011    await step(function(){ chip('ClowdOps · notification'); }, 550);
2012    await step(function(){ bot(NOTIF); }, 100);
2013    if (t !== token) return;
2014    await sleep(6500); // hold so it can be read
2015    if (t === token) play();
2016  }
2017
2018  function start() {
2019    if (started) return; started = true;
2020    if (reduce) { renderStatic(); return; }
2021    play();
2022  }
2023
2024  if ('IntersectionObserver' in window) {
2025    var io = new IntersectionObserver(function (es) {
2026      es.forEach(function (e) { if (e.isIntersecting) start(); });
2027    }, { threshold: 0.3 });
2028    io.observe(chat);
2029  } else { start(); }
2030})();
2031</script>
2031
2032
2033</body>
2034</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.