AI Agent Studio Card

<div class="text-slate-100 antialiased p-6" style="font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji','Segoe UI Emoji';">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
  <section class="relative rounded-3xl border border-white/10 bg-gradient-to-b from-slate-900/60 to-slate-900/40 shadow-[0_10px_60px_-15px_rgba(0,0,0,0.6)] backdrop-blur-xl overflow-hidden">
    <div class="pointer-events-none absolute -inset-px rounded-[1.45rem] bg-[radial-gradient(80%_60%_at_50%_0%,rgba(90,97,255,0.12),transparent_60%)]"></div>
    <div class="relative px-4 pt-6 sm:px-6 sm:pt-8">
      <div class="relative mx-auto w-full max-w-3xl">
        <div class="absolute inset-0 translate-y-8 scale-[0.96] rounded-2xl bg-slate-900/50 ring-1 ring-white/5 blur-[0.3px]"></div>
        <div class="absolute inset-0 translate-y-4 scale-[0.98] rounded-2xl bg-slate-900/60 ring-1 ring-white/5"></div>
        <div class="relative rounded-2xl bg-[linear-gradient(180deg,rgba(19,24,31,0.9),rgba(10,13,18,0.9))] ring-1 ring-white/10 overflow-hidden">
          <div class="flex items-center justify-between px-3 sm:px-4 py-3 border-b border-white/5 bg-slate-950/50 backdrop-blur">
            <div class="flex items-center gap-2">
              <span class="h-2.5 w-2.5 rounded-full bg-red-500/60"></span>
              <span class="h-2.5 w-2.5 rounded-full bg-amber-500/60"></span>
              <span class="h-2.5 w-2.5 rounded-full bg-emerald-500/60"></span>
            </div>
            <div class="hidden sm:flex items-center gap-2 rounded-full border border-white/10 bg-slate-900/60 px-3 py-1.5 text-sm text-slate-300 shadow-inner shadow-black/20">
              <i data-lucide="search" class="h-4 w-4 text-slate-400"></i>
              <span class="text-slate-400/80">Search agents…</span>
              <span class="ml-2 rounded-md bg-white/5 px-1.5 py-0.5 text-[11px] text-slate-400">⌘K</span>
            </div>
            <button class="inline-flex items-center gap-2 rounded-lg bg-slate-900/70 px-3 py-1.5 text-sm text-slate-200 ring-1 ring-white/10 hover:bg-slate-900/90 transition">
              <span>Code</span>
              <i data-lucide="code-2" class="h-4 w-4 text-slate-300"></i>
            </button>
          </div>
          <div class="relative h-64 sm:h-72">
            <div class="pointer-events-none absolute inset-0 bg-[radial-gradient(120%_100%_at_50%_0%,rgba(87,107,255,0.08),transparent_50%)]"></div>
            <div class="absolute inset-0 grid grid-cols-[40px_1fr]">
              <div class="select-none border-r border-white/5 bg-slate-950/30 px-2 py-3 text-[13px] leading-6 text-slate-400/50">
                <div>1</div>
                <div>2</div>
                <div>3</div>
                <div>4</div>
                <div>5</div>
                <div>6</div>
                <div>7</div>
                <div>8</div>
                <div>9</div>
                <div>10</div>
                <div>11</div>
                <div>12</div>
              </div>
              <pre class="relative m-0 overflow-hidden px-4 py-3 text-[13px] leading-6 text-slate-300">
                OrchestratorAgent:__init__(, tools, memory):.tools = tools.memory = memory.mode =plan(, goal:):
        steps =tool.tools:tool.matches(goal): steps.append(tool)stepsexecute(, steps):stepsteps:
            result = step.run().memory.remember(result).memory.summarize()
                <span class="text-sky-300">class</span>
                <span class="text-sky-300">def</span>
                <span class="text-emerald-300">self</span>
                <span class="text-emerald-300">self</span>
                <span class="text-emerald-300">self</span>
                <span class="text-emerald-300">self</span>
                <span class="text-rose-300">"idle"</span>
                <span class="text-sky-300">def</span>
                <span class="text-emerald-300">self</span>
                <span class="text-indigo-300">str</span>
                <span class="text-amber-300">[]</span>
                <span class="text-sky-300">for</span>
                <span class="text-sky-300">in</span>
                <span class="text-emerald-300">self</span>
                <span class="text-sky-300">if</span>
                <span class="text-sky-300">return</span>
                <span class="text-sky-300">def</span>
                <span class="text-emerald-300">self</span>
                <span class="text-sky-300">for</span>
                <span class="text-sky-300">in</span>
                <span class="text-emerald-300">self</span>
                <span class="text-sky-300">return</span>
                <span class="text-emerald-300">self</span>
              </pre>
            </div>
            <div class="pointer-events-none absolute inset-x-0 bottom-0 h-24 bg-gradient-to-t from-[#0B0F14] to-transparent"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="relative z-10 px-6 pb-7 pt-4 sm:px-8 sm:pb-10">
      <div class="mx-auto w-full max-w-3xl">
        <div class="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-3 py-1 text-xs text-slate-300">
          Agent Engineering
          <i data-lucide="sparkles" class="h-3.5 w-3.5"></i>
        </div>
        <h2 class="mt-3 text-3xl sm:text-4xl font-semibold tracking-tight text-white">Autonomous AI Agent Studio</h2>
        <p class="mt-3 text-slate-400 text-base sm:text-lg">
          We design domain-tuned agents that orchestrate your APIs, data, and workflows—delivering dependable automations that scale with your stack.
        </p>
      </div>
    </div>
  </section>
  <script src="https://unpkg.com/lucide@latest"></script>
  <script>window.addEventListener('DOMContentLoaded', () => { if (window.lucide) lucide.createIcons(); });</script>
</div>