page-060fac60c394e2c2.js

js brightcone.ai collected 2026-10-05 11:53:04 UTC 150,126 bytes, 1,517 lines download raw bytes

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[704],{2828:(e,a,r)=>{Promise.resolve().then(r.bind(r,3633))},3633:(e,a,r)=>{"use strict";r.r(a),r.d(a,{default:()=>L});var s=r(5155),t=r(2115),i=r(8372),o=r(2539);function n(){return(0,s.jsx)("svg",{width:"0",height:"0",style:{position:"absolute"},"aria-hidden":"true",children:(0,s.jsxs)("defs",{children:[(0,s.jsxs)("symbol",{id:"bwa2-i-logo",viewBox:"0 0 100 110",children:[(0,s.jsxs)("defs",{children:[(0,s.jsxs)("linearGradient",{id:"bwa2-lg-outer",x1:".5",y1:"0",x2:".5",y2:"1",children:[(0,s.jsx)("stop",{offset:"0",stopColor:"#2A6DE8"}),(0,s.jsx)("stop",{offset:"1",stopColor:"#0E2D6E"})]}),(0,s.jsxs)("linearGradient",{id:"bwa2-lg-inner",x1:".5",y1:"0",x2:".5",y2:"1",children:[(0,s.jsx)("stop",{offset:"0",stopColor:"#EAFBFF"}),(0,s.jsx)("stop",{offset:".45",stopColor:"#14E6B8"}),(0,s.jsx)("stop",{offset:"1",stopColor:"#0E8F75"})]})]}),(0,s.jsx)("path",{d:"M50 4 L96 96 L50 106 L4 96Z",fill:"url(#bwa2-lg-outer)",opacity:".92"}),(0,s.jsx)("path",{d:"M50 20 L80 88 L50 96 L20 88Z",fill:"#0F2D7A",opacity:".88"}),(0,s.jsx)("path",{d:"M50 36 L72 92 L50 96 L28 92Z",fill:"url(#bwa2-lg-inner)"})]}),(0,s.jsxs)("symbol",{id:"bwa2-i-monitor",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.7",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,s.jsx)("rect",{x:"2.5",y:"3.5",width:"19",height:"13",rx:"2"}),(0,s.jsx)("path",{d:"M8 21h8M12 17v4"})]}),(0,s.jsxs)("symbol",{id:"bwa2-i-mobile",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.7",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,s.jsx)("rect",{x:"6",y:"2.5",width:"12",height:"19",rx:"2.5"}),(0,s.jsx)("path",{d:"M11 18.5h2"})]}),(0,s.jsx)("symbol",{id:"bwa2-i-chat",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.7",strokeLinecap:"round",strokeLinejoin:"round",children:(0,s.jsx)("path",{d:"M21 12a8 8 0 0 1-12.4 6.7L3 20l1.3-5.6A8 8 0 1 1 21 12Z"})}),(0,s.jsxs)("symbol",{id:"bwa2-i-terminal",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.7",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,s.jsx)("rect",{x:"2.5",y:"3.5",width:"19",height:"17",rx:"2"}),(0,s.jsx)("path",{d:"M7 9l3 3-3 3M13 15h5"})]}),(0,s.jsxs)("symbol",{id:"bwa2-i-api",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.7",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,s.jsx)("circle",{cx:"12",cy:"12",r:"9"}),(0,s.jsx)("path",{d:"M3.5 12h17M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"})]}),(0,s.jsxs)("symbol",{id:"bwa2-i-shield",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.7",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,s.jsx)("path",{d:"M12 2.5 4 5.5v6c0 5 3.5 8.5 8 10 4.5-1.5 8-5 8-10v-6Z"}),(0,s.jsx)("path",{d:"m9 12 2 2 4-4"})]}),(0,s.jsxs)("symbol",{id:"bwa2-i-graph",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.7",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,s.jsx)("circle",{cx:"6",cy:"6",r:"2.5"}),(0,s.jsx)("circle",{cx:"18",cy:"6",r:"2.5"}),(0,s.jsx)("circle",{cx:"12",cy:"18",r:"2.5"}),(0,s.jsx)("path",{d:"M7.6 7.8 10.4 16M16.4 7.8 13.6 16M8.5 6h7"})]}),(0,s.jsxs)("symbol",{id:"bwa2-i-users",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.7",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,s.jsx)("circle",{cx:"9",cy:"8",r:"3.5"}),(0,s.jsx)("path",{d:"M2.5 20a6.5 6.5 0 0 1 13 0M16 12a3.5 3.5 0 0 0 0-7M15 20a6.5 6.5 0 0 1 6.5-6.5"})]}),(0,s.jsx)("symbol",{id:"bwa2-i-check",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.7",strokeLinecap:"round",strokeLinejoin:"round",children:(0,s.jsx)("path",{d:"M3.5 12.5 9 18l11.5-12.5"})}),(0,s.jsxs)("symbol",{id:"bwa2-i-key",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.7",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,s.jsx)("circle",{cx:"8",cy:"14",r:"4"}),(0,s.jsx)("path",{d:"M11 11 21 1m-4 4 3 3m-6 0 3 3"})]}),(0,s.jsxs)("symbol",{id:"bwa2-i-eye",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.7",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,s.jsx)("path",{d:"M2 12s3.5-

17 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z"}),(0,s.jsx)("circle",{cx:"12",cy:"12",r:"3"})]}),(0,s.jsxs)("symbol",{id:"bwa2-i-building",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.7",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,s.jsx)("rect",{x:"4",y:"2.5",width:"16",height:"19",rx:"1.5"}),(0,s.jsx)("path",{d:"M9 7h2M13 7h2M9 11h2M13 11h2M9 15h2M13 15h2M10.5 21.5v-4h3v4"})]}),(0,s.jsxs)("symbol",{id:"bwa2-i-conductor",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.7",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,s.jsx)("circle",{cx:"12",cy:"6",r:"2.5"}),(0,s.jsx)("path",{d:"M12 8.5v4M9 16.5l3-4 3 4M7 21l5-4.5 5 4.5M4 12.5l3-2M20 12.5l-3-2"})]}),(0,s.jsxs)("symbol",{id:"bwa2-i-frontend",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.7",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,s.jsx)("rect",{x:"2.5",y:"3.5",width:"19",height:"17",rx:"2"}),(0,s.jsx)("path",{d:"M2.5 8h19M6 5.7v.01M9 5.7v.01"})]}),(0,s.jsxs)("symbol",{id:"bwa2-i-backend",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.7",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,s.jsx)("rect",{x:"3",y:"4",width:"18",height:"6",rx:"1.5"}),(0,s.jsx)("rect",{x:"3",y:"14",width:"18",height:"6",rx:"1.5"}),(0,s.jsx)("path",{d:"M7 7h.01M7 17h.01M11 7h6M11 17h6"})]}),(0,s.jsxs)("symbol",{id:"bwa2-i-db",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.7",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,s.jsx)("ellipse",{cx:"12",cy:"5",rx:"8",ry:"2.8"}),(0,s.jsx)("path",{d:"M4 5v6c0 1.5 3.6 2.8 8 2.8s8-1.3 8-2.8V5M4 11v6c0 1.6 3.6 2.8 8 2.8s8-1.2 8-2.8v-6"})]}),(0,s.jsxs)("symbol",{id:"bwa2-i-devops",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.7",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,s.jsx)("circle",{cx:"12",cy:"12",r:"3"}),(0,s.jsx)("path",{d:"M19.4 14a1.7 1.7 0 0 0 .3 1.9l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.9-.3 1.7 1.7 0 0 0-1 1.5V20a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.9.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.9 1.7 1.7 0 0 0-1.5-1H2a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.9l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.9.3H8a1.7 1.7 0 0 0 1-1.5V2a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.9-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.9V8a1.7 1.7 0 0 0 1.5 1H22a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1Z"})]}),(0,s.jsxs)("symbol",{id:"bwa2-i-test",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.7",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,s.jsx)("path",{d:"M9 3v4l-5 11a2.5 2.5 0 0 0 2.3 3.5h11.4A2.5 2.5 0 0 0 20 18L15 7V3"}),(0,s.jsx)("path",{d:"M8 3h8M7 14h10"})]}),(0,s.jsxs)("symbol",{id:"bwa2-i-lock",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.7",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,s.jsx)("rect",{x:"4",y:"11",width:"16",height:"10",rx:"2"}),(0,s.jsx)("path",{d:"M8 11V7a4 4 0 0 1 8 0v4"})]}),(0,s.jsxs)("symbol",{id:"bwa2-i-search",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.7",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,s.jsx)("circle",{cx:"11",cy:"11",r:"7"}),(0,s.jsx)("path",{d:"m20.5 20.5-4.5-4.5"})]}),(0,s.jsxs)("symbol",{id:"bwa2-i-clipboard",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.7",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,s.jsx)("rect",{x:"6",y:"4",width:"12",height:"17",rx:"1.5"}),(0,s.jsx)("path",{d:"M9 4V3a2 2 0 0 1 6 0v1M9 11h6M9 15h4"})]}),(0,s.jsxs)("symbol",{id:"bwa2-i-pencil",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.7",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,s.jsx)("path",{d:"M14 4l6 6L9 21H3v-6L14 4Z"}),(0,s.jsx)("path",{d:"M13 5l6 6"})]}),(0,s.jsxs)("symbol",{id:"bwa2-i-mobile-dev",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.7",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,s.jsx)("rect",{x:"5",y:"2.5",width:"14",height:"19",rx:"2.5"}),(0,s.jsx)("path",{d:"M10 5h4M11 18.5h2"})]}),(0,s.jsxs)("symbol",{id:"bwa2-i-doc",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.7",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,s.jsx)("path",{d:"M6 2.5h8l5 5V21a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1Z"}),(0,s.jsx)("path",{d:"M14 2.5v5h5M8 13h8M8 17h6"})]}),(0,s.jsxs)("symbol",{id:"bwa2-i-data",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.7",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,s.jsx)("path",{d:"M3 3h18v18H3z"}),(0,s.jsx)("path",{d:"M3 9h18M3 15h18M9 3v18M15 3v18"})]}),(0,s.jsxs)("symbol",{id:"bwa2-i-brain",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.7",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,s.jsx)("path",{d:"M12 5a3 3 0 0 0-6 0v.5a2.5 2.5 0 0 0-1.5 4.5A2.5 2.5 0 0 0 6 14.5a2.5 2.5 0 0 0 2.5 4.5A2.5 2.5 0 0 0 12 21V5Z"}),(0,s.jsx)("path",{d:"M12 5a3 3 0 0 1 6 0v.5a2.5 2.5 0 0 1 1.5 4.5A2.5 2.5 0 0 1 18 14.5a2.5 2.5 0 0 1-2.5 4.5A2.5 2.5 0 0 1 12 21"})]}),(0,s.jsxs)("symbol",{id:"bwa2-i-bell",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.7",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,s.jsx)("path",{d:"M6 9a6 6 0 1 1 12 0c0 7 3 7 3 9H3c0-2 3-2 3-9Z"}),(0,s.jsx)("path",{d:"M10.5 21a1.5 1.5 0 0 0 3 0"})]}),(0,s.jsx)("symbol",{id:"bwa2-i-plus",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.7",strokeLinecap:"round",strokeLinejoin:"round",children:(0,s.jsx)("path",{d:"M12 5v14M5 12h14"})}),(0,s.jsxs)("symbol",{id:"bwa2-i-git",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.7",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,s.jsx)("circle",{cx:"6",cy:"6",r:"2.5"}),(0,s.jsx)("circle",{cx:"6",cy:"18",r:"2.5"}),(0,s.jsx)("circle",{cx:"18",cy:"12",r:"2.5"}),(0,s.jsx)("path",{d:"M6 8.5v7M8.3 6.7a6 6 0 0 1 7.3 5.3"})]}),(0,s.jsx)("symbol",{id:"bwa2-i-cloud",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.7",strokeLinecap:"round",strokeLinejoin:"round",children:(0,s.jsx)("path",{d:"M7 18a5 5 0 0 1-1-9.9A6 6 0 0 1 18 9a4 4 0 0 1 1 7.9H7Z"})}),(0,s.jsxs)("symbol",{id:"bwa2-i-microsoft",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.7",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,s.jsx)("rect",{x:"3",y:"3",width:"8",he

1ight:"8"}),(0,s.jsx)("rect",{x:"13",y:"3",width:"8",height:"8"}),(0,s.jsx)("rect",{x:"3",y:"13",width:"8",height:"8"}),(0,s.jsx)("rect",{x:"13",y:"13",width:"8",height:"8"})]}),(0,s.jsx)("symbol",{id:"bwa2-i-plug",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.7",strokeLinecap:"round",strokeLinejoin:"round",children:(0,s.jsx)("path",{d:"M9 2v4M15 2v4M5.5 6h13v6a6.5 6.5 0 0 1-13 0V6ZM12 18.5V22"})}),(0,s.jsxs)("symbol",{id:"bwa2-i-branch",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.7",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,s.jsx)("circle",{cx:"6",cy:"5",r:"2.5"}),(0,s.jsx)("circle",{cx:"6",cy:"19",r:"2.5"}),(0,s.jsx)("circle",{cx:"18",cy:"12",r:"2.5"}),(0,s.jsx)("path",{d:"M6 7.5v9M8.5 12c4 0 6-3 6-5"})]}),(0,s.jsxs)("symbol",{id:"bwa2-i-cicd",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.7",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,s.jsx)("path",{d:"M21 12a9 9 0 1 1-3-6.7"}),(0,s.jsx)("path",{d:"M21 3v6h-6"})]}),(0,s.jsxs)("symbol",{id:"bwa2-i-server",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.7",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,s.jsx)("rect",{x:"3",y:"4",width:"18",height:"7",rx:"1.5"}),(0,s.jsx)("rect",{x:"3",y:"14",width:"18",height:"7",rx:"1.5"}),(0,s.jsx)("path",{d:"M7 7.5h.01M7 17.5h.01"})]}),(0,s.jsx)("symbol",{id:"bwa2-i-pulse",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.7",strokeLinecap:"round",strokeLinejoin:"round",children:(0,s.jsx)("path",{d:"M3 12h4l3-8 4 16 3-8h4"})})]})})}function l({id:e,s:a=13}){return(0,s.jsx)("svg",{width:a,height:a,children:(0,s.jsx)("use",{href:`#bwa2-i-${e}`})})}let c=[{id:"layer-1",num:"01",label:"Human Layer",icon:"monitor",color:"#2563EB",desc:"Where people work web, mobile, chat, API"},{id:"layer-2",num:"02",label:"Control Plane",icon:"graph",color:"#F59E0B",desc:"Orchestration, audit trail & human gates"},{id:"layer-3",num:"03",label:"Agent Fleet",icon:"conductor",color:"#7C3AED",desc:"Isolated compute per role never shared"},{id:"layer-4",num:"04",label:"Connector Layer",icon:"plug",color:"#0EA5E9",desc:"OAuth-scoped, revocable tool integrations"},{id:"layer-5",num:"05",label:"Customer Environment",icon:"server",color:"#10B981",desc:"Your cloud, code, and data never leaves"}];function d(){let[e,a]=(0,t.useState)(null),[r,i]=(0,t.useState)(null),o=(0,t.useRef)(null),d=(0,t.useRef)(null),p=(0,t.useRef)(null),x=(0,t.useRef)([]),[m,g]=(0,t.useState)(1),[h,b]=(0,t.useState)(void 0);function f(a,r=""){return e?e===a?`bwa2-layer bwa2-layer-focused ${r}`.trim():`bwa2-layer bwa2-dimmed ${r}`.trim():`bwa2-layer ${r}`.trim()}function w(e){return null===r?"bwa2-layer-row":e<=r?"bwa2-layer-row bwa2-row-cascade":"bwa2-layer-row"}function u(e){return null!==r&&r>=e?"bwa2-flow bwa2-flow-active":"bwa2-flow"}return(0,t.useEffect)(()=>{let e=o.current,a=p.current;if(!e||!a)return;let r=()=>{let r=Math.min(1,(e.clientWidth-36)/1660);g(r),requestAnimationFrame(()=>{b(a.offsetHeight*r)})},s=new ResizeObserver(r);s.observe(e);let t=setTimeout(r,0);return()=>{s.disconnect(),clearTimeout(t)}},[]),(0,s.jsxs)("section",{className:"bwa2-section",children:[(0,s.jsx)(n,{}),(0,s.jsx)("div",{className:"bwa2-section-header",children:(0,s.jsxs)("div",{className:"bwa2-header-left",children:[(0,s.jsxs)("div",{className:"bwa2-eyebrow",children:[(0,s.jsx)("span",{className:"bwa2-eyebrow-dot","aria-hidden":!0}),(0,s.jsx)("span",{children:"Platform Architecture"})]}),(0,s.jsxs)("h2",{className:"bwa2-title",children:["Built in layers. ",(0,s.jsx)("span",{className:"bwa2-title-accent",children:"Secure by design."})]}),(0,s.jsx)("p",{className:"bwa2-subtitle",children:"Human, control, agents, connectors, your cloud â each with its own trust boundary."})]})}),(0,s.jsx)("div",{className:"bwa2-outer-grid",children:(0,s.jsx)("div",{ref:o,className:"bwa2-diagram-wrap",style:{width:"100%"},children:(0,s.jsx)("div",{className:"bwa2-outer-card",children:(0,s.jsx)("div",{ref:d,className:"bwa2-scale-wrap",style:{height:h},children:(0,s.jsxs)("div",{ref:p,style:{width:1660,transformOrigin:"top left",transform:m<1?`scale(${m})`:void 0,position:"absolute",top:0,left:0},children:[(0,s.jsxs)("div",{className:w(0),style:{"--layer-color":c[0].color},onMouseEnter:()=>i(0),onMouseLeave:()=>i(null),children:[(0,s.jsxs)("div",{className:"bwa2-row-label",style:{"--layer-color":c[0].color},children:[(0,s.jsxs)("div",{className:"bwa2-row-title",children:[(0,s.jsx)("span",{className:"bwa2-row-num",children:"01"}),(0,s.jsx)("span",{className:"bwa2-row-name",children:c[0].label})]}),(0,s.jsx)("span",{className:"bwa2-row-desc",children:c[0].desc})]}),(0,s.jsx)("div",{ref:e=>{x.current[0]=e},className:f("layer-1"),style:{"--layer-color":c[0].color},children:(0,s.jsxs)("div",{className:"bwa2-human-row",children:[[{icon:"monitor",title:"Web Console",sub:"Chat, PRs, approvals"},{icon:"mobile",title:"Mobile App",sub:"Approvals on the go"},{icon:"chat",title:"Slack / Teams",sub:"Two-way chat"},{icon:"terminal",title:"CLI",sub:"Brightworks"},{icon:"api",title:"REST API",sub:"Webhooks"}].map(e=>(0,s.jsxs)("div",{className:"bwa2-entry-card",children:[(0,s.jsx)("div",{className:"bwa2-entry-icon",children:(0,s.jsx)(l,{id:e.icon,s:14})}),(0,s.jsxs)("div",{className:"bwa2-entry-text",children:[(0,s.jsx)("span",{className:"bwa2-entry-title",children:e.title}),(0,s.jsx)("span",{className:"bwa2-entry-sub",children:e.sub})]})]},e.title)),(0,s.jsxs)("div",{className:"bwa2-gate-pill",children:[(0,s.jsx)("div",{className:"bwa2-gate-icon",children:(0,s.jsx)(l,{id:"shield",s:15})}),(0,s.jsxs)("div",{className:"bwa2-gate-text",children:[(0,s.jsx)("span",{className:"bwa2-gate-title",children:"Human-in-the-loop gates"}),(0,s.jsx)("span",{className:"bwa2-gate-sub",children:"Prod deploys, migrations, secrets, spend"})]})]})]})})]}),(0,s.jsx)("div",{className:u(1),style:{"--layer-color":c[1].color},children:(0,s.jsx)("div",{className:"bwa2-flow-track",children:(0,s.jsx)("div",{className:"bwa2-flow-fill"})})}),(0,s.jsxs)("div",{className:w(1),style:{"--layer-color":c[1].color},onMouseEnter:()=>i(1),onMouseLeave:()=>i(null),children:[(0,s.jsxs)("div",{className:"bwa2-row-label",style:{"--layer-color":c[1].color},children:[(0,s.jsxs)("div",{className:"bwa2-row-title",children:[(0,s.jsx)("span",{className:"bwa2-row-num",children:"02"}),(0,s.jsx)("span",{className:"bwa2-row-name",children:c[1].label})]}),(0,s.jsx)("span",{className:"bwa2-row-desc",children:c[1].desc})]}),(0,s.jsx)("div",{ref:e=>{x.current[1]=e},className:f("layer-2","bwa2-control"),style:{"--layer-color":c[1].color},children:(0,s.jsx)("div",{className:"bwa2-control-row",children:[{icon:"graph",tag:"",title:"AI Orchestration Hub",meta:["Task graph, routing","Depen

1dency resolution","Retries, escalation"]},{icon:"users",tag:"",title:"Agent Registry",meta:["Roles, skills","Model routing","Custom agent specs"]},{icon:"check",tag:"",title:"Governance & Compliance",meta:["Deploys, migrations","Spend caps, secrets","Policy enforcement"]},{icon:"key",tag:"",title:"Security & Secrets",meta:["Scoped JIT tokens","BYO-KMS / HSM","BYO-API-keys"]},{icon:"eye",tag:"",title:"Audit & Observability",meta:["Immutable log","Per-agent traces","SIEM streaming"]},{icon:"building",tag:"",title:"Workspace & Billing",meta:["Orgs, RBAC, SSO/SCIM","Usage metering","Spend caps, alerts"],featured:!1}].map(e=>(0,s.jsxs)("div",{className:`bwa2-card${e.featured?" bwa2-card-featured":""}`,children:[(0,s.jsxs)("div",{className:"bwa2-card-head",children:[(0,s.jsx)("div",{className:"bwa2-icon-wrap",children:(0,s.jsx)(l,{id:e.icon,s:13})}),(0,s.jsx)("span",{className:"bwa2-card-title bwa2-card-title-inline",children:e.title})]}),(0,s.jsx)("div",{className:"bwa2-card-meta",children:e.meta.join(", ")})]},e.title))})})]}),(0,s.jsx)("div",{className:u(2),style:{"--layer-color":c[2].color},children:(0,s.jsx)("div",{className:"bwa2-flow-track",children:(0,s.jsx)("div",{className:"bwa2-flow-fill"})})}),(0,s.jsxs)("div",{className:w(2),style:{"--layer-color":c[2].color},onMouseEnter:()=>i(2),onMouseLeave:()=>i(null),children:[(0,s.jsxs)("div",{className:"bwa2-row-label",style:{"--layer-color":c[2].color},children:[(0,s.jsxs)("div",{className:"bwa2-row-title",children:[(0,s.jsx)("span",{className:"bwa2-row-num",children:"03"}),(0,s.jsx)("span",{className:"bwa2-row-name",children:c[2].label})]}),(0,s.jsx)("span",{className:"bwa2-row-desc",children:c[2].desc})]}),(0,s.jsxs)("div",{ref:e=>{x.current[2]=e},className:f("layer-3"),style:{"--layer-color":c[2].color},children:[(0,s.jsxs)("div",{className:"bwa2-fleet-row",children:[(0,s.jsxs)("div",{className:"bwa2-card bwa2-card-custom",children:[(0,s.jsxs)("div",{className:"bwa2-card-head",children:[(0,s.jsx)("div",{className:"bwa2-icon-wrap",children:(0,s.jsx)(l,{id:"conductor",s:13})}),(0,s.jsx)("span",{className:"bwa2-card-title bwa2-card-title-inline",children:"Orchestrator"})]}),(0,s.jsx)("div",{className:"bwa2-card-meta",children:"Plan & route"})]}),[{icon:"frontend",title:"Frontend",desc:"React / Vue"},{icon:"backend",title:"Backend",desc:"Node, Py, Go"},{icon:"db",title:"DBA",desc:"Schemas"},{icon:"devops",title:"DevOps",desc:"IaC, CI/CD"},{icon:"test",title:"QA / Test",desc:"E2E, load"}].map(e=>(0,s.jsxs)("div",{className:"bwa2-card",children:[(0,s.jsxs)("div",{className:"bwa2-card-head",children:[(0,s.jsx)("div",{className:"bwa2-icon-wrap",children:(0,s.jsx)(l,{id:e.icon,s:13})}),(0,s.jsx)("span",{className:"bwa2-card-title bwa2-card-title-inline",children:e.title})]}),(0,s.jsx)("div",{className:"bwa2-card-meta",children:e.desc})]},e.title))]}),(0,s.jsxs)("div",{className:"bwa2-fleet-row",style:{marginTop:10},children:[[{icon:"lock",title:"Security",desc:"SAST, SCA"},{icon:"search",title:"Code Review",desc:"Inline"},{icon:"clipboard",title:"Product Mgr",desc:"Specs & stories"},{icon:"doc",title:"Tech Writer",desc:"Docs"},{icon:"data",title:"Data Eng.",desc:"Dbt, ETL"}].map(e=>(0,s.jsxs)("div",{className:"bwa2-card",children:[(0,s.jsxs)("div",{className:"bwa2-card-head",children:[(0,s.jsx)("div",{className:"bwa2-icon-wrap",children:(0,s.jsx)(l,{id:e.icon,s:13})}),(0,s.jsx)("span",{className:"bwa2-card-title bwa2-card-title-inline",children:e.title})]}),(0,s.jsx)("div",{className:"bwa2-card-meta",children:e.desc})]},e.title)),(0,s.jsxs)("div",{className:"bwa2-card bwa2-card-custom",children:[(0,s.jsx)("div",{className:"bwa2-custom-pill",children:"CUSTOM"}),(0,s.jsxs)("div",{className:"bwa2-card-head",children:[(0,s.jsx)("div",{className:"bwa2-icon-wrap",children:(0,s.jsx)(l,{id:"plus",s:13})}),(0,s.jsx)("span",{className:"bwa2-card-title bwa2-card-title-inline",children:"Your Agent"})]}),(0,s.jsx)("div",{className:"bwa2-card-meta",children:"Defined in Studio"})]})]})]})]}),(0,s.jsx)("div",{className:u(3),style:{"--layer-color":c[3].color},children:(0,s.jsx)("div",{className:"bwa2-flow-track",children:(0,s.jsx)("div",{className:"bwa2-flow-fill"})})}),(0,s.jsxs)("div",{className:w(3),style:{"--layer-color":c[3].color},onMouseEnter:()=>i(3),onMouseLeave:()=>i(null),children:[(0,s.jsxs)("div",{className:"bwa2-row-label",style:{"--layer-color":c[3].color},children:[(0,s.jsxs)("div",{className:"bwa2-row-title",children:[(0,s.jsx)("span",{className:"bwa2-row-num",children:"04"}),(0,s.jsx)("span",{className:"bwa2-row-name",children:c[3].label})]}),(0,s.jsx)("span",{className:"bwa2-row-desc",children:c[3].desc})]}),(0,s.jsx)("div",{ref:e=>{x.current[3]=e},className:f("layer-4","bwa2-connectors"),style:{"--layer-color":c[3].color},children:(0,s.jsx)("div",{className:"bwa2-connectors-row",children:[{icon:"git",title:"GitHub / GitLab / Azure DevOps",sub:"Source Control"},{icon:"db",title:"Postgres / MySQL / Mongo",sub:"Databases"}

1,{icon:"cloud",title:"AWS / Azure / GCP / OCI",sub:"Cloud Providers"},{icon:"microsoft",title:"M365 / Teams / Entra ID",sub:"Identity & Productivity"},{icon:"plug",title:"Slack / Jira / Datadog / Stripe",sub:"Tooling & MCP"}].map(e=>(0,s.jsxs)("div",{className:"bwa2-conn-pill",children:[(0,s.jsx)("div",{className:"bwa2-conn-icon",children:(0,s.jsx)(l,{id:e.icon,s:13})}),(0,s.jsx)("div",{className:"bwa2-conn-text",children:(0,s.jsx)("span",{className:"bwa2-conn-title",children:e.title})})]},e.title))})})]}),(0,s.jsx)("div",{className:u(4),style:{"--layer-color":c[4].color},children:(0,s.jsx)("div",{className:"bwa2-flow-track",children:(0,s.jsx)("div",{className:"bwa2-flow-fill"})})}),(0,s.jsxs)("div",{className:w(4),style:{"--layer-color":c[4].color},onMouseEnter:()=>i(4),onMouseLeave:()=>i(null),children:[(0,s.jsxs)("div",{className:"bwa2-row-label",style:{"--layer-color":c[4].color},children:[(0,s.jsxs)("div",{className:"bwa2-row-title",children:[(0,s.jsx)("span",{className:"bwa2-row-num",children:"05"}),(0,s.jsx)("span",{className:"bwa2-row-name",children:c[4].label})]}),(0,s.jsx)("span",{className:"bwa2-row-desc",children:c[4].desc})]}),(0,s.jsx)("div",{ref:e=>{x.current[4]=e},className:f("layer-5"),style:{"--layer-color":c[4].color},children:(0,s.jsxs)("div",{className:"bwa2-customer-row",children:[(0,s.jsxs)("div",{className:"bwa2-cust-card",children:[(0,s.jsx)("div",{className:"bwa2-cust-icon",children:(0,s.jsx)(l,{id:"branch",s:14})}),(0,s.jsxs)("div",{className:"bwa2-cust-text",children:[(0,s.jsx)("span",{className:"bwa2-cust-title",children:"Source Control"}),(0,s.jsx)("span",{className:"bwa2-cust-sub",children:"PRs, signed commits"}),(0,s.jsx)("span",{className:"bwa2-cust-sub bwa2-accent-blue",children:"No force-push to main"})]})]}),(0,s.jsxs)("div",{className:"bwa2-cust-card",children:[(0,s.jsx)("div",{className:"bwa2-cust-icon",children:(0,s.jsx)(l,{id:"cicd",s:14})}),(0,s.jsxs)("div",{className:"bwa2-cust-text",children:[(0,s.jsx)("span",{className:"bwa2-cust-title",children:"CI / CD"}),(0,s.jsx)("span",{className:"bwa2-cust-sub",children:"GitHub Actions, GitLab CI"}),(0,s.jsx)("span",{className:"bwa2-cust-sub bwa2-accent-blue",children:"Preview env per PR"})]})]}),(0,s.jsxs)("div",{className:"bwa2-cust-card",children:[(0,s.jsx)("div",{className:"bwa2-cust-icon",children:(0,s.jsx)(l,{id:"server",s:14})}),(0,s.jsxs)("div",{className:"bwa2-cust-text",children:[(0,s.jsx)("span",{className:"bwa2-cust-title",children:"Cloud Compute"}),(0,s.jsx)("span",{className:"bwa2-cust-sub",children:"AWS, Azure, GCP, OCI"}),(0,s.jsx)("span",{className:"bwa2-cust-sub bwa2-accent-blue",children:"Blue/green & canary deploys"})]})]}),(0,s.jsxs)("div",{className:"bwa2-cust-card",children:[(0,s.jsx)("div",{className:"bwa2-cust-icon",children:(0,s.jsx)(l,{id:"db",s:14})}),(0,s.jsxs)("div",{className:"bwa2-cust-text",children:[(0,s.jsx)("span",{className:"bwa2-cust-title",children:"Databases"}),(0,s.jsx)("span",{className:"bwa2-cust-sub",children:"Postgres, MySQL, Mongo"}),(0,s.jsx)("span",{className:"bwa2-cust-sub bwa2-accent-amber",children:"Migrations gated by human"})]})]}),(0,s.jsxs)("div",{className:"bwa2-cust-card",children:[(0,s.jsx)("div",{className:"bwa2-cust-icon",children:(0,s.jsx)(l,{id:"pulse",s:14})}),(0,s.jsxs)("div",{className:"bwa2-cust-text",children:[(0,s.jsx)("span",{className:"bwa2-cust-title",children:"Observability"}),(0,s.jsx)("span",{className:"bwa2-cust-sub",children:"Datadog, New Relic, Sentry"}),(0,s.jsx)("span",{className:"bwa2-cust-sub bwa2-accent-teal",children:"SLO-based auto-rollback"})]})]})]})})]})]})})})})}),(0,s.jsx)("style",{children:`
2        .bwa2-section {
3          padding: 0px 0 40px;
4          background: #F0F4FA;
5          font-family: var(--font-sans, Inter, sans-serif);
6        }
7
8        /* Section header */
9        .bwa2-section-header {
10          max-width: 1296px; margin: 0 auto;
11          padding: 0 48px; margin-bottom: 36px;
12        }
13        .bwa2-header-left { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
14
15        /* Two-column outer grid */
16        .bwa2-outer-grid {
17          max-width: 1296px; margin: 0 auto;
18          padding: 0 48px;
19        }
20
21        /* Diagram wrapper â no card background */
22        .bwa2-diagram-wrap { width: 100%; overflow-x: hidden; overflow-y: visible; }
23
24        /* Outer container card wrapping all layers */
25        .bwa2-outer-card {
26          background: #ffffff;
27          border-radius: 24px;
28          border: 1.5px solid #E2E8F1;
29          box-shadow: 0 2px 24px rgba(10,19,48,0.06);
30          padding: 28px 16px 28px 16px;
31        }
32
33        /* Per-layer row: label left + card right */

34        .bwa2-layer-row {
35          display: grid;
36          grid-template-columns: 210px 1fr;
37          gap: 0px;
38          align-items: center;
39        }
40        .bwa2-row-label {
41          display: flex; flex-direction: column; gap: 4px;
42          padding-right: 8px;
43        }
44        .bwa2-row-title {
45          display: flex; align-items: baseline; gap: 8px;
46        }
47        .bwa2-row-num {
48          font-size: 13px; font-weight: 500; color: #1E293B;
49          transition: color 350ms ease;
50        }
51        .bwa2-layer-row:hover .bwa2-row-num { color: var(--layer-color); }
52        .bwa2-row-name {
53          font-size: 14px; font-weight: 600; color: #0A1330; line-height: 1.2; white-space: nowrap;
54        }
55        .bwa2-row-desc {
56          font-size: 12px; color: #64748B; line-height: 1.4;
57        }
58
59        @media (max-width: 1080px) {
60          .bwa2-section-header { padding: 0 24px; }
61          .bwa2-outer-grid { padding: 0 24px; gap: 24px; }
62        }
63        @media (max-width: 860px) {
64          .bwa2-section-header { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 24px; }
65          .bwa2-subtitle { max-width: 100%; padding-bottom: 0; }
66          .bwa2-outer-grid { grid-template-columns: 1fr; }
67          .bwa2-layer-list { flex-direction: row; flex-wrap: wrap; gap: 8px; }
68          .bwa2-layer-card { width: auto; flex: 1; min-width: 140px; }
69          .bwa2-title { font-size: 32px !important; line-height: 1.1 !important; }
70        }
71        @media (max-width: 640px) {
72          .bwa2-section { padding: 20px 0 40px; }
73          .bwa2-section-header { padding: 0 16px; }
74          .bwa2-outer-grid { padding: 0 16px; }
75          .bwa2-card-inner { flex-direction: column; }
76          .bwa2-scale-wrap { width: 100%; }
77        }
78
79        /* Card inner â layer tabs on top, diagram below */
80        .bwa2-card-inner {
81          display: flex; flex-direction: column; gap: 20px;
82        }
83
84        .bwa2-eyebrow {
85          display: flex; align-items: center; gap: 8px;
86          height: 18px; margin-bottom: 4px;
87        }
88        .bwa2-eyebrow-dot {
89          width: 5px; height: 5px; border-radius: 2.5px; flex-shrink: 0;
90          background: #2563EB;
91          box-shadow: 0 0 12px #3B82F6;
92        }
93        .bwa2-eyebrow span:last-child {
94          font-size: 11.5px; font-weight: 600;
95          text-transform: uppercase; letter-spacing: 1.84px;
96          color: #2563EB; line-height: 18px;
97        }
98
99        .bwa2-title {
100          font-family: var(--font-display, Outfit, sans-serif);
101          font-weight: 500;
102          font-size: 40px; line-height: 1.1; letter-spacing: -1.2px;
103          color: #020617;
104        }
105        @media (min-width: 768px) {
106          .bwa2-title { font-size: 48px; line-height: 54px; letter-spacing: -1.44px; }
107        }
108        @media (min-width: 1024px) {
109          .bwa2-title { font-size: 58px; line-height: 63.8px; letter-spacing: -1.74px; }
110        }
111        .bwa2-title-accent {
112          background: linear-gradient(110deg, #1E5FD9 0%, #14E6B8 100%);
113          -webkit-background-clip: text; background-clip: text; color: transparent;
114        }
115        .bwa2-subtitle {
116          margin-top: 4px; font-size: 18px; font-weight: 400;
117          line-height: 1.6; color: #334155;
118        }
119
120        /* Sidebar layer list â vertical */
121        .bwa2-layer-list {
122          display: flex; flex-direction: column; gap: 0;
123        }
124        .bwa2-sidebar-flow {
125          display: flex; justify-content: center; align-items: center;
126          height: 34px; pointer-events: none;
127        }
128        .bwa2-layer-card {
129          display: flex; align-items: center; gap: 12px;
130          padding: 12px 14px;
131          background: white;
132          border: 1px solid #E2E8F1;
133          border-left: 3px solid var(--layer-color, #2563EB);
134          border-radius: 10px;
135          cursor: pointer; text-align: left; width: 100%;
136          transition: background 180ms, box-shadow 180ms, border-color 180ms;
137        }
138        .bwa2-layer-card:hover { background: #F8FAFC; box-shadow: 0 2px 8px rgba(15,30,80,0.07); }

139        .bwa2-layer-card.bwa2-active {
140          background: color-mix(in srgb, var(--layer-color) 6%, #ffffff);
141          border-color: color-mix(in srgb, var(--layer-color) 30%, #E2E8F1);
142          border-left-color: var(--layer-color);
143          box-shadow: 0 2px 12px color-mix(in srgb, var(--layer-color) 15%, transparent);
144        }
145        .bwa2-layer-num {
146          font-family: var(--font-mono, monospace);
147          font-size: 12px; font-weight: 700; letter-spacing: 0.14em;
148          text-transform: uppercase; color: #94A3B8;
149          flex-shrink: 0; padding-top: 2px;
150        }
151        .bwa2-layer-card.bwa2-active .bwa2-layer-num { color: var(--layer-color); }
152        .bwa2-layer-text { display: flex; flex-direction: column; gap: 2px; }
153        .bwa2-layer-name {
154          font-size: 12px; font-weight: 600; color: #1E293B; line-height: 1.3;
155        }
156        .bwa2-layer-card.bwa2-active .bwa2-layer-name { color: #0A1330; }
157        .bwa2-layer-desc {
158          font-size: 12px; font-weight: 400; color: #64748B; line-height: 1.4;
159        }
160
161        /* Active layer info bar */
162        .bwa2-active-bar {
163          display: flex; align-items: center; gap: 8px;
164          padding: 7px 14px; border-radius: 10px;
165          background: color-mix(in srgb, var(--active-color) 8%, transparent);
166          border: 1px solid color-mix(in srgb, var(--active-color) 25%, transparent);
167          animation: bwa2FadeIn 200ms ease;
168        }
169        @keyframes bwa2FadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
170        .bwa2-active-dot {
171          width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
172          background: var(--active-color);
173          box-shadow: 0 0 8px var(--active-color);
174        }
175        .bwa2-active-num {
176          font-family: var(--font-mono, monospace); font-size: 12px; font-weight: 700;
177          color: var(--active-color); letter-spacing: 0.1em;
178        }
179        .bwa2-active-label {
180          font-size: 12px; font-weight: 700; color: #0A1330;
181        }
182        .bwa2-active-sep { color: #CBD5E1; font-size: 12px; }
183        .bwa2-active-desc { font-size: 12px; color: #5A6786; }
184
185        .bwa2-scale-wrap { width: 100%; overflow-x: hidden; overflow-y: visible; border-radius: 12px; position: relative; }
186
187        /* Layer */
188        .bwa2-layer {
189          background: #ffffff; border: 1px solid #1E293B;
190          border-radius: 20px;
191          box-shadow: 0 2px 6px rgba(15,30,80,0.05), 0 12px 32px -8px rgba(15,30,80,0.10);
192          padding: 18px 14px 18px; margin-bottom: 0; margin-left: -16px; overflow: hidden;
193          position: relative;
194          display: flex; flex-direction: column; justify-content: center;
195          transition: box-shadow 350ms ease, border-color 350ms ease,
196                      opacity 350ms ease, filter 350ms ease, transform 350ms ease, background 350ms ease;
197        }
198        .bwa2-layer:last-of-type { margin-bottom: 0; }
199        .bwa2-dimmed { opacity: 0.15; filter: saturate(0.1) brightness(1.02); }
200        .bwa2-layer-focused, .bwa2-layer:hover, .bwa2-layer-row:hover .bwa2-layer, .bwa2-row-cascade .bwa2-layer {
201          border-color: var(--layer-color);
202          background: color-mix(in srgb, var(--layer-color) 14%, #ffffff);
203          box-shadow: 0 4px 24px -6px color-mix(in srgb, var(--layer-color) 30%, transparent);
204        }
205        .bwa2-layer-row:hover .bwa2-layer::before, .bwa2-row-cascade .bwa2-layer::before,
206        .bwa2-layer-row:hover .bwa2-layer::after,  .bwa2-row-cascade .bwa2-layer::after { opacity: 1; }
207        .bwa2-layer-row:hover .bwa2-row-name, .bwa2-row-cascade .bwa2-row-name { color: var(--layer-color); }
208        .bwa2-layer-row:hover .bwa2-row-num, .bwa2-row-cascade .bwa2-row-num { color: var(--layer-color); opacity: 1; }
209        .bwa2-layer-focused .bwa2-diag-num {
210          color: var(--layer-color);
211          background: color-mix(in srgb, var(--layer-color) 18%, transparent);
212        }
213        .bwa2-layer-focused .bwa2-diag-name { color: var(--layer-color); }
214
215
216        /* Control Plane */
217        .bwa2-layer.bwa2-control .bwa2-card-meta { padding-left: 0; }
218        .bwa2-layer.bwa2-control .bwa2-card-title { font-size: 13px; color: #0A1330; }
219        .bwa2-layer.bwa2-control .bwa2-icon-wrap { color: #475569; background: #F1F5F9; border-color: #CBD5E1; }

220        .bwa2-layer-row:hover .bwa2-layer.bwa2-control .bwa2-icon-wrap,
221        .bwa2-row-cascade .bwa2-layer.bwa2-control .bwa2-icon-wrap {
222          background: color-mix(in srgb, var(--layer-color) 10%, transparent);
223          border-color: color-mix(in srgb, var(--layer-color) 18%, transparent);
224          color: var(--layer-color);
225        }
226        .bwa2-layer.bwa2-control .bwa2-card {
227          background: #ffffff; border: 1px solid #E2E8F1;
228          box-shadow: none;
229        }
230
231
232        /* Diagram layer header */
233        .bwa2-diag-header {
234          display: flex; align-items: baseline; justify-content: space-between;
235          margin-bottom: 6px; gap: 16px;
236        }
237        .bwa2-diag-label { display: flex; align-items: center; gap: 10px; }
238        .bwa2-diag-num {
239          font-family: var(--font-mono, monospace); font-size: 12px; font-weight: 600;
240          color: var(--layer-color); background: color-mix(in srgb, var(--layer-color) 8%, transparent);
241          padding: 4px 8px; border-radius: 6px; letter-spacing: 0.04em;
242        }
243        .bwa2-diag-name {
244          font-family: var(--font-mono, monospace); font-size: 12px; font-weight: 600;
245          letter-spacing: 0.22em; color: #0A1330; text-transform: uppercase;
246        }
247        .bwa2-layer-desc { font-size: 12px; color: #5A6786; }
248
249        /* Card */
250        .bwa2-card {
251          flex: 1; background: #FFFFFF; border: 1px solid #E2E8F1; border-radius: 14px;
252          padding: 8px 8px 8px; display: flex; flex-direction: column; gap: 3px;
253          position: relative;
254          transition: transform 220ms cubic-bezier(0.2,0.8,0.2,1), box-shadow 220ms ease, border-color 220ms ease;
255        }
256        .bwa2-card:hover {
257          transform: translateY(-2px);
258          box-shadow: 0 8px 28px -12px color-mix(in srgb, var(--layer-color) 30%, transparent);
259          border-color: color-mix(in srgb, var(--layer-color) 35%, transparent);
260        }
261        .bwa2-layer-row:not(:hover):not(.bwa2-row-cascade) .bwa2-card { border-color: #E2E8F1; }
262        .bwa2-card-head { display: flex; align-items: center; gap: 7px; }
263        .bwa2-icon-wrap {
264          width: 26px; height: 26px; border-radius: 7px;
265          background: #F1F5F9;
266          border: 1px solid #CBD5E1;
267          display: grid; place-items: center; flex-shrink: 0; color: #475569;
268          transition: background 350ms ease, border-color 350ms ease, color 350ms ease;
269        }
270        .bwa2-layer-row:hover .bwa2-icon-wrap, .bwa2-row-cascade .bwa2-icon-wrap,
271        .bwa2-layer-row:hover .bwa2-layer .bwa2-icon-wrap, .bwa2-row-cascade .bwa2-layer .bwa2-icon-wrap {
272          background: color-mix(in srgb, var(--layer-color) 10%, transparent);
273          border-color: color-mix(in srgb, var(--layer-color) 18%, transparent);
274          color: var(--layer-color);
275        }
276        .bwa2-card-tag {
277          font-family: var(--font-mono, monospace); font-size: 12px; font-weight: 700;
278          letter-spacing: 0.16em; color: #0A1330; text-transform: uppercase;
279        }
280        .bwa2-card-title { font-weight: 600; font-size: 12px; color: #0A1330; letter-spacing: -0.01em; line-height: 1.2; }
281        .bwa2-card-title-inline { display: flex; align-items: center; margin-left: 6px; }
282        .bwa2-card-meta { font-size: 12px; color: #5A6786; line-height: 1.45; padding-left: 40px; }
283        .bwa2-k {
284          font-family: var(--font-mono, monospace); font-size: 12px; font-weight: 700;
285          color: var(--layer-color); background: color-mix(in srgb, var(--layer-color) 10%, transparent);
286          padding: 1px 5px; border-radius: 4px; margin-right: 2px;
287          letter-spacing: 0.04em;
288        }
289
290        /* Orchestrator card */
291        .bwa2-card-orch {
292          background: #1E293B;
293          color: white; border: 1px solid #1E293B;
294          box-shadow: none; overflow: hidden;
295          transition: background 350ms ease, border-color 350ms ease, box-shadow 350ms ease;
296        }
297        .bwa2-card-orch .bwa2-card-title { color: white; }
298        .bwa2-card-orch .bwa2-card-meta { color: rgba(255,255,255,0.65); }

299        .bwa2-layer-row:hover .bwa2-card-orch, .bwa2-row-cascade .bwa2-card-orch {
300          background: color-mix(in srgb, var(--layer-color) 10%, #ffffff);
301          border-color: color-mix(in srgb, var(--layer-color) 25%, transparent);
302          box-shadow: 0 4px 16px -6px color-mix(in srgb, var(--layer-color) 20%, transparent);
303        }
304        .bwa2-layer-row:hover .bwa2-card-orch .bwa2-card-title, .bwa2-row-cascade .bwa2-card-orch .bwa2-card-title { color: #0A1330; }
305        .bwa2-layer-row:hover .bwa2-card-orch .bwa2-card-meta, .bwa2-row-cascade .bwa2-card-orch .bwa2-card-meta { color: #3B5EA6; }
306        .bwa2-live-dot {
307          position: absolute; top: 12px; right: 12px;
308          width: 8px; height: 8px; background: var(--layer-color); border-radius: 50%;
309          box-shadow: 0 0 0 0 color-mix(in srgb, var(--layer-color) 50%, transparent);
310          animation: bwa2LiveDot 1.8s ease-out infinite;
311        }
312        @keyframes bwa2LiveDot {
313          0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--layer-color, #2563EB) 50%, transparent); }
314          100% { box-shadow: 0 0 0 10px transparent; }
315        }
316
317        /* Custom pill badge */
318        .bwa2-custom-pill {
319          position: absolute; top: 7px; right: 7px;
320          font-size: 9px; font-weight: 700; letter-spacing: 0.12em;
321          text-transform: uppercase; color: var(--layer-color);
322          background: color-mix(in srgb, var(--layer-color) 12%, transparent);
323          border: 1px solid color-mix(in srgb, var(--layer-color) 30%, transparent);
324          border-radius: 4px; padding: 2px 5px; line-height: 1.3;
325        }
326
327        /* Custom card */
328        .bwa2-card-custom {
329          background: #F8FAFC;
330          border: 1.5px dashed #94A3B8;
331          transition: background 350ms ease, border-color 350ms ease;
332        }
333        .bwa2-card-custom .bwa2-card-tag { color: #64748B; }
334        .bwa2-layer-row:hover .bwa2-card-custom, .bwa2-row-cascade .bwa2-card-custom {
335          background: color-mix(in srgb, var(--layer-color) 8%, transparent);
336          border-color: color-mix(in srgb, var(--layer-color) 55%, transparent);
337        }
338        .bwa2-layer-row:hover .bwa2-card-custom .bwa2-card-tag, .bwa2-row-cascade .bwa2-card-custom .bwa2-card-tag { color: var(--layer-color); }
339
340        /* Grid layouts */
341        .bwa2-human-row {
342          display: grid; grid-template-columns: repeat(5, 1fr) 1.6fr; gap: 8px;
343        }
344        .bwa2-control-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 9px; }
345        .bwa2-fleet-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 9px; }
346        .bwa2-fleet-row .bwa2-card-title { font-size: 13px; }
347        .bwa2-connectors-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; }
348        .bwa2-customer-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; }
349
350        /* Entry card (human layer) */
351        .bwa2-entry-card {
352          background: #F8FAFD; border: 1px solid #E2E8F1; border-radius: 14px;
353          padding: 8px 8px; display: flex; align-items: center; gap: 8px;
354          transition: all 220ms cubic-bezier(0.2,0.8,0.2,1);
355        }
356        .bwa2-entry-card:hover {
357          background: #FFFFFF; border-color: color-mix(in srgb, var(--layer-color) 30%, transparent);
358          transform: translateY(-2px); box-shadow: 0 8px 28px -12px color-mix(in srgb, var(--layer-color) 30%, transparent);
359        }
360        .bwa2-entry-icon {
361          width: 30px; height: 30px; border-radius: 8px;
362          background: #F1F5F9; border: 1px solid #CBD5E1;
363          display: grid; place-items: center; color: #475569; flex-shrink: 0;
364          transition: background 350ms ease, border-color 350ms ease, color 350ms ease;
365        }
366        .bwa2-layer-row:hover .bwa2-entry-icon, .bwa2-row-cascade .bwa2-entry-icon {
367          background: color-mix(in srgb, var(--layer-color) 10%, transparent);
368          border-color: color-mix(in srgb, var(--layer-color) 18%, transparent);
369          color: var(--layer-color);
370        }
371        .bwa2-entry-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
372        .bwa2-entry-title { font-weight: 600; font-size: 12px; color: #0A1330; }
373        .bwa2-entry-sub { font-size: 12px; color: #5A6786; }
374
375        /* Gate pill */
376        .bwa2-gate-pill {
377          background: #F8FAFC;
378          border-radius: 14px; padding: 8px 12px;
379          border: 1.5px dashed #94A3B8;
380          display: flex; align-items: center; gap: 9px;
381          color: #1E293B; box-shadow: none;
382          position: relative; overflow: hidden;
383          transition: background 350ms ease, border-color 350ms ease, color 350ms ease, box-shadow 350ms ease;
384        }
385        .bwa2-gate-pill .bwa2-gate-title { color: #1E293B; }
386        .bwa2-gate-pill .bwa2-gate-sub { color: #64748B; }

387        .bwa2-layer-row:hover .bwa2-gate-pill, .bwa2-row-cascade .bwa2-gate-pill {
388          background: linear-gradient(135deg, var(--layer-color), color-mix(in srgb, var(--layer-color) 70%, #000) 100%);
389          border-color: transparent;
390          color: white;
391          box-shadow: 0 8px 24px -8px color-mix(in srgb, var(--layer-color) 40%, transparent);
392        }
393        .bwa2-layer-row:hover .bwa2-gate-pill .bwa2-gate-title, .bwa2-row-cascade .bwa2-gate-pill .bwa2-gate-title { color: white; }
394        .bwa2-layer-row:hover .bwa2-gate-pill .bwa2-gate-sub, .bwa2-row-cascade .bwa2-gate-pill .bwa2-gate-sub { color: rgba(255,255,255,0.85); }
395        .bwa2-gate-icon {
396          width: 30px; height: 30px; border-radius: 8px;
397          background: #E2E8F1;
398          display: grid; place-items: center; flex-shrink: 0;
399          transition: background 350ms ease;
400        }
401        .bwa2-layer-row:hover .bwa2-gate-icon, .bwa2-row-cascade .bwa2-gate-icon { background: rgba(255,255,255,0.22); backdrop-filter: blur(4px); }
402        .bwa2-gate-text { display: flex; flex-direction: column; gap: 3px; }
403        .bwa2-gate-title {
404          font-family: var(--font-mono, monospace); font-size: 12px; font-weight: 700;
405          letter-spacing: 0.16em; text-transform: uppercase;
406        }
407        .bwa2-gate-sub { font-size: 12px; color: rgba(255,255,255,0.92); }
408
409        /* Connector pills */
410        .bwa2-conn-pill {
411          background: #F8FAFC; border: 1px solid #E2E8F1;
412          border-radius: 14px; padding: 8px 8px;
413          display: flex; align-items: center; gap: 8px;
414          color: #1E293B;
415          transition: all 220ms cubic-bezier(0.2,0.8,0.2,1);
416        }
417        .bwa2-conn-pill:hover {
418          transform: translateY(-2px);
419          background: #ffffff;
420          border-color: color-mix(in srgb, var(--layer-color) 45%, transparent);
421          box-shadow: 0 8px 24px -10px color-mix(in srgb, var(--layer-color) 25%, transparent);
422        }
423        .bwa2-conn-icon {
424          width: 26px; height: 26px; border-radius: 7px;
425          background: #F1F5F9; color: #475569;
426          display: grid; place-items: center; flex-shrink: 0;
427          transition: background 350ms ease, color 350ms ease;
428        }
429        .bwa2-layer-row:hover .bwa2-conn-icon, .bwa2-row-cascade .bwa2-conn-icon {
430          background: color-mix(in srgb, var(--layer-color) 12%, transparent); color: var(--layer-color);
431        }
432        .bwa2-conn-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
433        .bwa2-conn-title { font-weight: 600; font-size: 12px; color: #0A1330; }
434        .bwa2-conn-sub {
435          font-family: var(--font-mono, monospace); font-size: 12px;
436          color: #64748B; letter-spacing: 0.02em;
437        }
438
439        /* Customer cards */
440        .bwa2-cust-card {
441          background: #F8FAFD; border: 1px solid #E2E8F1; border-radius: 14px;
442          padding: 8px 8px; display: flex; align-items: flex-start; gap: 8px;
443          transition: all 220ms cubic-bezier(0.2,0.8,0.2,1); position: relative;
444        }
445        .bwa2-cust-card:hover {
446          background: #FFFFFF; border-color: color-mix(in srgb, var(--layer-color) 45%, transparent);
447          transform: translateY(-2px); box-shadow: 0 8px 28px -12px color-mix(in srgb, var(--layer-color) 30%, transparent);
448        }
449        .bwa2-cust-icon {
450          width: 30px; height: 30px; border-radius: 8px;

450 margin-top: 1px;
451          background: #F1F5F9; border: 1px solid #CBD5E1;
452          display: grid; place-items: center; color: #475569; flex-shrink: 0;
453          transition: background 350ms ease, border-color 350ms ease, color 350ms ease;
454        }
455        .bwa2-layer-row:hover .bwa2-cust-icon, .bwa2-row-cascade .bwa2-cust-icon {
456          background: color-mix(in srgb, var(--layer-color) 12%, transparent);
457          border-color: color-mix(in srgb, var(--layer-color) 25%, transparent);
458          color: var(--layer-color);
459        }
460        .bwa2-cust-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
461        .bwa2-cust-title { font-weight: 600; font-size: 12px; color: #0A1330; }
462        .bwa2-cust-sub { display: block; font-size: 12px; color: #5A6786; }
463        .bwa2-accent-blue, .bwa2-accent-amber, .bwa2-accent-teal { color: #0A1330 !important; font-weight: 500; }
464        .bwa2-layer-row:hover .bwa2-accent-blue, .bwa2-row-cascade .bwa2-accent-blue,
465        .bwa2-layer-row:hover .bwa2-accent-amber, .bwa2-row-cascade .bwa2-accent-amber,
466        .bwa2-layer-row:hover .bwa2-accent-teal, .bwa2-row-cascade .bwa2-accent-teal { color: var(--layer-color) !important; }
467
468        /* Flow connectors */
469        .bwa2-flow { display: flex; justify-content: center; align-items: stretch; height: 34px; margin: 0; padding-left: 204px; pointer-events: none; }
470        .bwa2-flow-track { width: 1.5px; height: 100%; background: #CBD5E1; position: relative; }
471        .bwa2-flow-fill { position: absolute; top: 0; left: 0; width: 100%; height: 0; background: #020617; transition: height 500ms ease-out; }
472        .bwa2-flow-active .bwa2-flow-fill { height: 100%; }
473
474        /* Footer */
475        .bwa2-footer {
476          margin-top: 28px; display: flex; justify-content: space-between; align-items: center;
477          padding-top: 18px; border-top: 1px solid #E2E8F1;
478          color: #8893AE; font-size: 12px;
479          font-family: var(--font-mono, monospace); letter-spacing: 0.02em;
480        }
481        .bwa2-footer-legend { display: flex; gap: 18px; align-items: center; }
482        .bwa2-legend-item { display: flex; align-items: center; gap: 6px; }
483        .bwa2-legend-swatch { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
484      `})]})}let p={orchestrator:{label:"Orchestrator",color:"#2B88EE",dimColor:"rgba(43,136,238,0.12)",avatarBg:"#2B88EE",avatarText:"#fff"},planning:{label:"Planning",color:"#3558D4",dimColor:"rgba(53,88,212,0.10)",avatarBg:"#3558D4",avatarText:"#fff"},specialist:{label:"Specialist",color:"#07BEA3",dimColor:"rgba(7,190,163,0.10)",avatarBg:"#07BEA3",avatarText:"#fff"},custom:{label:"Custom",color:"#64748B",dimColor:"rgba(238,244,250,0.80)",avatarBg:"#EEF4FA",avatarText:"#475569"}},x=[{letter:"O",tier:"orchestrator",name:"Orchestrator",desc:"Plans work, decomposes tasks, routes to specialists, reconciles conflicts.",svgId:"ORC"},{letter:"P",tier:"planning",name:"Product Manager",desc:"Converts vague prompts into specs, stories, and acceptance criteria.",svgId:"PM"},{letter:"S",tier:"planning",name:"Security",desc:"SAST/DAST, dependency audit, secret scanning, OWASP checks.",svgId:"SEC"},{letter:"R",tier:"planning",name:"Code Review",desc:"Reads every diff. Inline comments. Conventions enforcer.",svgId:"ARCH"},{letter:"F",tier:"specialist",name:"Frontend",desc:"React, Vue, Svelte, design tokens, accessibility, state management.",svgId:"FE"},{letter:"B",tier:"specialist",name:"Backend",desc:"REST/GraphQL APIs, business logic, auth, queues, integrations.",svgId:"BE"},{letter:"Q",tier:"specialist",name:"QA / Test",desc:"Unit, integration, E2E (Playwright/Cypress), load tests, regression.",svgId:"QA"},{letter:"V",tier:"specialist",name:"DevOps",desc:"Terraform, CI/CD pipelines, container builds, secrets, observability.",svgId:"DEV"},{letter:"D",tier:"specialist",name:"DBA",desc:"Schema design, migrations, indexes, query optimization, backfills.",svgId:"DBA"},{letter:"W",tier:"specialist",name:"Tech Writer",desc:"Docs â keeps documentation in sync with every commit."},{letter:"E",tier:"specialist",name:"Data Engineer",desc:"Dbt, ETL â pipelines, transforms, schema management."}

484,{letter:"+",tier:"custom",name:"Your Agent",desc:"Defined in Studio â bring your own role, model, and toolchain."}],m=[{id:"ORC",tier:"orchestrator",cx:130,cy:30,r:24,label:"O"},{id:"PM",tier:"planning",cx:48,cy:118,r:20,label:"P"},{id:"ARCH",tier:"planning",cx:130,cy:118,r:20,label:"R"},{id:"SEC",tier:"planning",cx:212,cy:118,r:20,label:"S"},{id:"FE",tier:"specialist",cx:22,cy:210,r:17,label:"F"},{id:"BE",tier:"specialist",cx:76,cy:210,r:17,label:"B"},{id:"QA",tier:"specialist",cx:130,cy:210,r:17,label:"Q"},{id:"DEV",tier:"specialist",cx:184,cy:210,r:17,label:"V"},{id:"DBA",tier:"specialist",cx:238,cy:210,r:17,label:"D"}];function g(){let e,a,[r,i]=(0,t.useState)(null),[o,n]=(0,t.useState)(null),[l,c]=(0,t.useState)(null),d=r??o,g=e=>{i(a=>a===e?null:e)},h=e=>l===e.id?"hovered":d?d===e.tier?"active":"dimmed":"default";return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)("style",{children:`
485        /* ââ Section ââ */
486        .agt-section { background: #F0F4FA; padding: 40px 0 40px; }
487        .agt-container { max-width: 1296px; margin: 0 auto; padding: 0 48px; }
488
489        /* ââ Header ââ */
490        .agt-head { margin-bottom: 40px; }
491        .agt-eyebrow { display: flex; align-items: center; gap: 8px; height: 18px; margin-bottom: 12px; }
492        .agt-eyebrow-dot { width: 5px; height: 5px; border-radius: 2.5px; background: #2563EB; box-shadow: 0 0 12px #3B82F6; flex-shrink: 0; }
493        .agt-eyebrow-text { font-family: var(--font-sans); font-size: 11.5px; font-weight: 600; letter-spacing: 1.84px; text-transform: uppercase; color: #2563EB; line-height: 18px; }
494        .agt-title { font-family: var(--font-display, Outfit, sans-serif); font-weight: 500; font-size: clamp(34px, 5.2vw, 60px); line-height: 1.05; letter-spacing: -0.03em; color: #020617; margin: 0 0 12px; }
495        .agt-title-italic { background: linear-gradient(110deg, #1E5FD9 0%, #14E6B8 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
496        .agt-subtitle { font-family: var(--font-sans); font-size: 17px; color: #334155; line-height: 1.6; max-width: 560px; margin: 0; }
497
498        /* ââ Filter pills ââ */
499        .agt-filters { display: flex; gap: 8px; margin-bottom: 28px; flex-wrap: wrap; }
500        .agt-filter-btn {
501          font-family: var(--font-sans); font-size: 12px; font-weight: 600;
502          padding: 6px 14px; border-radius: 100px; border: 1.5px solid #E2E8F1;
503          background: #fff; color: #5A6786; cursor: pointer;
504          transition: all 200ms ease; letter-spacing: 0.02em;
505          display: flex; align-items: center; gap: 6px;
506        }
507        .agt-filter-btn:hover { border-color: var(--t-color); color: var(--t-color); background: var(--t-dim); }
508        .agt-filter-btn.active { background: var(--t-color); border-color: var(--t-color); color: #fff; box-shadow: 0 4px 14px -4px var(--t-color); }
509        .agt-filter-btn.active-all { background: #020617; border-color: #020617; color: #fff; }
510        .agt-filter-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: 0.8; }
511
512        /* ââ Layout ââ */
513        .agt-layout { display: flex; gap: 24px; align-items: flex-start; }
514
515        /* ââ Sidebar ââ */
516        .agt-sidebar {
517          width: 288px; flex-shrink: 0;
518          background: #fff; border: 1px solid #E2E8F1; border-radius: 20px;
519          padding: 20px; align-self: flex-start;
520          position: sticky; top: 24px;
521        }
522        .agt-svg-wrap { width: 100%; margin-bottom: 16px; }
523        .agt-sidebar-divider { height: 1px; background: #E2E8F1; margin-bottom: 14px; }
524        .agt-sidebar-caption { font-family: var(--font-sans); font-size: 13px; color: #5A6786; line-height: 1.65; margin: 0 0 12px; }
525        .agt-legend-divider { height: 1px; background: #E2E8F1; margin-bottom: 12px; }
526        .agt-legend { display: flex; flex-direction: column; gap: 4px; }
527        .agt-legend-row {
528          display: flex; align-items: center; gap: 9px;
529          padding: 7px 10px; border-radius: 10px; cursor: pointer;
530          border: 1.5px solid transparent;
531          transition: background 180ms ease, border-color 180ms ease;
532        }
533        .agt-legend-row:hover { background: var(--t-dim); border-color: color-mix(in srgb, var(--t-color) 25%, transparent); }
534        .agt-legend-row.legend-selected { background: var(--t-dim); border-color: color-mix(in srgb, var(--t-color) 30%, transparent); }
535        .agt-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
536        .agt-legend-label { font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; color: #0A1330; flex: 1; }
537        .agt-legend-count { font-family: var(--font-sans); font-size: 11px; color: #94A3B8; font-weight: 500; }
538
539        /* ââ Grid ââ */

540        .agt-grid { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
541
542        /* ââ Agent card ââ */
543        .agt-card {
544          background: #fff; border: 1.5px solid #E2E8F1; border-radius: 16px;
545          padding: 16px; cursor: default; position: relative; overflow: hidden;
546          transition: transform 220ms cubic-bezier(0.2,0.8,0.2,1), box-shadow 220ms ease,
547                      border-color 220ms ease, opacity 300ms ease, filter 300ms ease;
548        }
549        .agt-card::before {
550          content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
551          background: var(--t-color); opacity: 0; transition: opacity 220ms ease;
552          border-radius: 16px 16px 0 0;
553        }
554        .agt-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px -12px var(--t-shadow); border-color: var(--t-border); }
555        .agt-card:hover::before { opacity: 1; }
556        .agt-card.dimmed { opacity: 0.3; filter: grayscale(0.25); transform: scale(0.98); }
557        .agt-card.card-active { border-color: var(--t-border); box-shadow: 0 6px 24px -8px var(--t-shadow); }
558        .agt-card.card-active::before { opacity: 1; }
559        .agt-card.card-custom { border: 1.5px dashed #CBD5E1; background: #EEF4FA; }
560        .agt-card.card-custom:hover { border-color: #94A3B8; border-style: dashed; }
561
562        /* ââ Card header ââ */
563        .agt-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
564        .agt-avatar {
565          width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
566          display: flex; align-items: center; justify-content: center;
567          font-family: var(--font-display); font-size: 14px; font-weight: 700;
568          background: var(--avatar-bg); color: var(--avatar-text);
569          transition: transform 200ms ease;
570        }
571        .agt-card.card-custom .agt-avatar {
572          border: 1.5px dashed #94A3B8; color: #475569; font-size: 18px;
573        }
574        .agt-card:hover .agt-avatar { transform: scale(1.08); }
575        .agt-tier-badge {
576          font-family: var(--font-sans); font-size: 9.5px; font-weight: 700;
577          letter-spacing: 0.08em; text-transform: uppercase;
578          padding: 3px 8px; border-radius: 100px;
579          background: var(--t-dim); color: var(--t-color);
580          border: 1px solid color-mix(in srgb, var(--t-color) 20%, transparent);
581        }
582        .agt-custom-badge {
583          font-family: var(--font-sans); font-size: 9.5px; font-weight: 700;
584          letter-spacing: 0.08em; text-transform: uppercase;
585          padding: 3px 8px; border-radius: 100px;
586          background: #F1F5F9; color: #64748B;
587          border: 1px dashed #CBD5E1;
588        }
589
590        /* ââ Card body ââ */
591        .agt-card-name { font-family: var(--font-sans); font-size: 14px; font-weight: 700; color: #0A1330; margin: 0 0 4px; }
592        .agt-card-desc { font-family: var(--font-sans); font-size: 12px; color: #5A6786; line-height: 1.55; margin: 0; }
593
594        /* ââ SVG diagram node hover ââ */
595        .agt-node { cursor: pointer; transition: all 200ms ease; }
596        .agt-node-circle { transition: fill 200ms ease, filter 200ms ease, r 200ms ease; }
597        .agt-node-text { pointer-events: none; transition: fill 200ms ease; }
598
599        /* ââ Responsive ââ */

600        @media (max-width: 1100px) { .agt-grid { grid-template-columns: repeat(2, 1fr); } }
601        @media (max-width: 820px) {
602          .agt-layout { flex-direction: column; }
603          .agt-sidebar { width: 100%; position: static; display: flex; flex-direction: row; gap: 20px; align-items: flex-start; }
604          .agt-svg-wrap { width: 180px; flex-shrink: 0; margin-bottom: 0; }
605          .agt-sidebar-right { flex: 1; display: flex; flex-direction: column; gap: 12px; }
606          .agt-legend-divider { display: none; }
607        }
608        @media (max-width: 520px) {
609          .agt-container { padding: 0 16px; }
610          .agt-grid { grid-template-columns: 1fr; }
611          .agt-section { padding: 20px 0 40px; }
612          .agt-sidebar { flex-direction: column; }
613          .agt-svg-wrap { width: 100%; }
614        }
615      `}),(0,s.jsx)("section",{className:"agt-section",id:"agents",children:(0,s.jsxs)("div",{className:"agt-container",children:[(0,s.jsxs)("div",{className:"agt-head",children:[(0,s.jsxs)("div",{className:"agt-eyebrow",children:[(0,s.jsx)("span",{className:"agt-eyebrow-dot","aria-hidden":!0}),(0,s.jsx)("span",{className:"agt-eyebrow-text",children:"The Agent Team"})]}),(0,s.jsxs)("h2",{className:"agt-title",children:["Role-specialized agents,"," ",(0,s.jsx)("span",{className:"agt-title-italic",children:"isolated compute."})]}),(0,s.jsx)("p",{className:"agt-subtitle",children:"Agents, Made for Humans."})]}),(0,s.jsxs)("div",{className:"agt-layout",children:[(0,s.jsxs)("div",{className:"agt-sidebar",children:[(0,s.jsx)("div",{className:"agt-svg-wrap",children:(0,s.jsxs)("svg",{viewBox:"0 0 260 248",fill:"none",xmlns:"http://www.w3.org/2000/svg",style:{width:"100%",height:"auto"},children:[(0,s.jsxs)("defs",{children:[(0,s.jsxs)("linearGradient",{id:"agt-lg-orch",x1:"0",y1:"0",x2:"1",y2:"1",children:[(0,s.jsx)("stop",{offset:"0%",stopColor:"#2B88EE"}),(0,s.jsx)("stop",{offset:"100%",stopColor:"#2B88EE"})]}),(0,s.jsxs)("linearGradient",{id:"agt-lg-plan",x1:"0",y1:"0",x2:"1",y2:"1",children:[(0,s.jsx)("stop",{offset:"0%",stopColor:"#3558D4"}),(0,s.jsx)("stop",{offset:"100%",stopColor:"#3558D4"})]}),(0,s.jsxs)("linearGradient",{id:"agt-lg-spec",x1:"0",y1:"0",x2:"1",y2:"1",children:[(0,s.jsx)("stop",{offset:"0%",stopColor:"#07BEA3"}),(0,s.jsx)("stop",{offset:"100%",stopColor:"#07BEA3"})]}),(0,s.jsxs)("filter",{id:"agt-glow-blue",x:"-50%",y:"-50%",width:"200%",height:"200%",children:[(0,s.jsx)("feGaussianBlur",{stdDeviation:"5",result:"blur"}),(0,s.jsx)("feFlood",{floodColor:"#2B88EE",floodOpacity:"0.4",result:"color"}),(0,s.jsx)("feComposite",{in:"color",in2:"blur",operator:"in",result:"glow"}),(0,s.jsxs)("feMerge",{children:[(0,s.jsx)("feMergeNode",{in:"glow"}),(0,s.jsx)("feMergeNode",{in:"SourceGraphic"})]})]}),(0,s.jsxs)("filter",{id:"agt-glow-plan",x:"-50%",y:"-50%",width:"200%",height:"200%",children:[(0,s.jsx)("feGaussianBlur",{stdDeviation:"4",result:"blur"}),(0,s.jsx)("feFlood",{floodColor:"#3558D4",floodOpacity:"0.35",result:"color"}),(0,s.jsx)("feComposite",{in:"color",in2:"blur",operator:"in",result:"glow"}),(0,s.jsxs)("feMerge",{children:[(0,s.jsx)("feMergeNode",{in:"glow"}),(0,s.jsx)("feMergeNode",{in:"SourceGraphic"})]})]}),(0,s.jsxs)("filter",{id:"agt-glow-spec",x:"-50%",y:"-50%",width:"200%",height:"200%",children:[(0,s.jsx)("feGaussianBlur",{stdDeviation:"4",result:"blur"}),(0,s.jsx)("feFlood",{floodColor:"#07BEA3",floodOpacity:"0.35",result:"color"}),(0,s.jsx)("feComposite",{in:"color",in2:"blur",operator:"in",result:"glow"}),(0,s.jsxs)("feMerge",{children:[(0,s.jsx)("feMergeNode",{in:"glow"}),(0,s.jsx)("feMergeNode",{in:"SourceGraphic"})]})]}),(0,s.jsx)("filter",{id:"agt-shadow-sm",children:(0,s.jsx)("feDropShadow",{dx:"0",dy:"2",stdDeviation:"3",floodColor:"#0A1330",floodOpacity:"0.10"})})]}),(0,s.jsx)("rect",{x:"0",y:"4",width:"260",height:"52",rx:"10",fill:"orchestrator"===d?"rgba(43,136,238,0.12)":d?"rgba(43,136,238,0.04)":"#EEF6FF",style:{transition:"fill 300ms ease"}}),(0,s.jsx)("rect",{x:"0",y:"94",width:"260",height:"48",rx:"10",fill:"planning"===d?"rgba(53,88,212,0.10)":d?"rgba(53,88,212,0.03)":"#EEF0FF",style:{transition:"fill 300ms ease"}}),(0,s.jsx)("rect",{x:"0",y:"186",width:"260",height:"48",rx:"10",fill:"specialist"===d?"rgba(7,190,163,0.12)":d?"rgba(7,190,163,0.03)":"#EDFAF7",style:{transition:"fill 300ms ease"}}),(0,s.jsx)("rect",{x:"0",y:"4",width:"260",height:"52",rx:"10",fill:"transparent",style:{cursor:"pointer"},onClick:()=>g("orchestrator"),onMouseEnter:()=>n("orchestrator"),onMouseLeave:()=>n(null)}),(0,s.jsx)("rect",{x:"0",y:"94",width:"260",height:"48",rx:"10",fill:"transparent",style:{cursor:"pointer"},onClick:()=>g("planning"),onMouseEnter:()=>n("planning"),onMouseLeave:()=>n(null)}),(0,s.jsx)("rect",{x:"0",y:"186",width:"260",height:"48",rx:"10",fill:"transparent",style:{cursor:"pointer"},onClick:()=>g("specialist"),onMouseEnter:()=>n("specialist"),onMouseLeave:()=>n(null)}),(0,s.jsx)("path",{d:"M 130,54 Q 88,82 48,94",stroke:"planning"===d||"orchestrator"===d?"#3558D4":"#CBD5E1",strokeWidth:"1.5",strokeDasharray:"4 3",style:{transition:"stroke 300ms ease"}}),(0,s.jsx)("path",{d:"M 130,54 L 130,94",stroke:"planning"===d||"orchestrator"===d?"#3558D4":"#CBD5E1",strokeWidth:"1.5",strokeDasharray:"4 3",style:{transition:"stroke 300ms ease"}}),(0,s.jsx)("path",{d:"M 130,54 Q 172,82 212,94",stroke:"planning"===d||"orchestrator"===d?"#3558D4":"#CBD5E1",strokeWidth:"1.5",strokeDasharray:"4 3",style:{transition:"stroke 300ms ease"}}),(0,s.jsx)("path",{d:"M 48,138 Q 34,162 22,186",stroke:"specialist"===d||"planning"===d?"#07BEA3":"#C8EDEA",strokeWidth:"1.2",strokeDasharray:"3 3",style:{transition:"stroke 300ms ease"}}),(0,s.jsx)("path",{d:"M 48,138 Q 62,162 76,186",stroke:"specialist"===d||"planning"===d?"#07BEA3":"#C8EDEA",strokeWidth:"1.2",strokeDasharray:"3 3",style:{transition:"stroke 300ms ease"}}),(0,s.jsx)("path",{d:"M 130,138 L 130,186",stroke:"specialist"===d||"planning"===d?"#07BEA3":"#C8EDEA",strokeWidth:"1.2",strokeDasharray:"3 3",style:{transition:"stroke 300ms ease"}}),(0,s.jsx)("path",{d:"M 212,138 Q 198,162 184,186",stroke:"specialist"===d||"planning"===d?"#07BEA3":"#C8EDEA",strokeWidth:"1.2",strokeDasharray:"3 3",style:{transition:"stroke 300ms ease"}}),(0,s.jsx)("path",{d:"M 212,138 Q 226,162 238,186",stroke:"specialist"===d||"planning"===d?"#07BEA3":"#C8EDEA",strokeWidth:"1.2",strokeDasharray:"3 3",style:{transition:"stroke 300ms ease"}}),(a="active"===(e=h(m[0]))||"hovered"===e,(0,s.jsxs)("g",{className:"agt-node",onClick:()=>g("orchestrator"),onMouseEnter:()=>{n("orchestrator"),c("ORC")},onMouseLeave:()=>{n(null),c(null)},children:[a&&(0,s.jsx)("circle",{cx:"130",cy:"30",r:"32",fill:"rgba(30,91,198,0.15)"}),(0,s.jsx)("circle",{cx:"130",cy:"30",r:a?26:24,fill:"url(#agt-lg-orch)",filter:a?"url(#agt-glow-blue)":"url(#agt-shadow-sm)",opacity:d&&"orchestrator"!==d?.3:1,style:{transition:"all 200ms ease"}}),(0,s.jsx)("text",{x:"130",y:"35",textAnchor:"middle",fill:"#fff",fontSize:"11",fontWeight:"700",letterSpacing:"0.5",style:{pointerEvents:"none",transition:"opacity 200ms ease",opacity:d&&"orchestrator"!==d?.3:1},children:"ORC"})]})),[m[1],m[2],m[3]].map(e=>{let a=h(e),r="active"===a||"hovered"===a,t=d&&"planning"!==d?.25:1;return(0,s.jsxs)("g",{className:"agt-node",onClick:()=>g("planning"),onMouseEnter:()=>{n("planning"),c(e.id)},onMouseLeave:()=>{n(null),c(null)},children:[r&&(0,s.jsx)("circle",{cx:e.cx,cy:e.cy,r:e.r+7,fill:"rgba(124,58,237,0.12)"}),(0,s.jsx)("circle",{cx:e.cx,cy:e.cy,r:r?e.r+1:e.r,fill:r?"url(#agt-lg-plan)":"#fff",stroke:r?"transparent":"#3558D4",strokeWidth:"1.5",filter:r?"url(#agt-glow-plan)":"url(#agt-shadow-sm)",opacity:t,style:{transition:"all 200ms ease"}}),(0,s.jsx)("text",{x:e.cx,y:e.cy+4,textAnchor:"middle",fill:r?"#fff":"#5B21B6",fontSize:"9",fontWeight:"700",style:{pointerEvents:"none",transition:"all 200ms ease",opacity:t},children:e.label})]},e.id)}),[m[4],m[5],m[6],m[7],m[8]].map(e=>{let a=h(e),r="active"===a||"hovered"===a,t=d&&"specialist"!==d?.25:1;return(0,s.jsxs)("g",{className:"agt-node",onClick:()=>g("specialist"),onMouseEnter:()=>{n("specialist"),c(e.id)},onMouseLeave:()=>{n(null),c(null)},children:[r&&(0,s.jsx)("circle",{cx:e.cx,cy:e.cy,r:e.r+6,fill:"rgba(13,148,136,0.12)"}),(0,s.jsx)("circle",{cx:e.cx,cy:e.cy,r:r?e.r+1:e.r,fill:r?"url(#agt-lg-spec)":"#fff",stroke:r?"transparent":"#07BEA3",strokeWidth:"1.5",filter:r?"url(#agt-glow-spec)":"url(#agt-shadow-sm)",opacity:t,style:{transition:"all 200ms ease"}}),(0,s.jsx)("text",{x:e.cx,y:e.cy+4,textAnchor:"middle",fill:r?"#fff":"#0E7A6E",fontSize:"8",fontWeight:"700",style:{pointerEvents:"none",transition:"all 200ms ease",opacity:t},children:e.label})]},e.id)})]})}),(0,s.jsxs)("div",{className:"agt-sidebar-right",children:[(0,s.jsx)("p",{className:"agt-sidebar-caption",children:"Orchestrator plans, planning agents decompose, specialist agents execute. Every layer can be scaled or swapped."}),(0,s.jsx)("div",{className:"agt-legend-divider"}),(0,s.jsx)("div",{className:"agt-legend",children:["orchestrator","planning","specialist"].map(e=>{let a=p[e],t=x.filter(a=>a.tier===e).length;return(0,s.jsxs)("div",{className:`agt-legend-row ${r===e?"legend-selected":""}`,style:{"--t-color":a.color,"--t-dim":a.dimColor},onClick:()=>g(e),onMouseEnter:()=>n(e),onMouseLeave:()=>n(null),children:[(0,s.jsx)("span",{className:"agt-legend-dot",style:{background:a.color}}),(0,s.jsxs)("span",{className:"agt-legend-label",children:[a.label," Agents"]}),(0,s.jsx)("span",{className:"agt-legend-count",children:t})]},e)})})]})]}),(0,s.jsx)("div",{className:"agt-grid",children:x.map(e=>{var a;let r=p[e.tier],t=(a=e.tier,d?d===a?"active":"dimmed":"default"),i="custom"===e.tier;return(0,s.jsxs)("div",{className:["agt-card","dimmed"===t?"dimmed":"","active"===t?"card-active":"",i?"card-custom":""].join(" "),style:{"--t-color":r.color,"--t-dim":r.dimColor,"--t-border":`color-mix(in srgb, ${r.color} 35%, transparent)`,"--t-shadow":`color-mix(in srgb, ${r.color} 30%, transparent)`,"--avatar-bg":r.avatarBg,"--avatar-text":r.avatarText},children:[(0,s.jsxs)("div",{className:"agt-card-header",children:[(0,s.jsx)("div",{className:"agt-avatar",children:e.letter}),i?(0,s.jsx)("span",{className:"agt-custom-badge",children:"Custom"}):(0,s.jsx)("span",{className:"agt-tier-badge",children:r.label})]}),(0,s.jsx)("p",{className:"agt-card-name",children:e.name}),(0,s.jsx)("p",{className:"agt-card-desc",children:e.desc})]},e.name)})})]})]})})]})}let h=[{num:"1",name:"Prompt",tag:"YOU",gate:!1,tagClass:"",desc:"A sentence. A paste. A dropped PDF."},{num:"2",name:"Plan",tag:"GATE 1 \xb7 YOU",gate:!0,tagClass:"",desc:"PM writes a spec. Orchestrator builds the task graph. You approve before code runs."},{num:"3",name:"Build",tag:"SPECIALISTS \xb7 PARALLEL",gate:!1,tagClass:"tag-agents",desc:"Each agent in its own VM. Per-agent identity. Small commits. Never push to main."},{num:"4",name:"Pull Request",tag:"AUTOMATIC",gate:!1,tagClass:"tag-auto",desc:"Diff, tests, screenshots, risk note, rollback plan, linked task."},{num:"5",name:"Review & Merge",tag:"GATE 2 \xb7 YOU",gate:!0,tagClass:"",desc:"Code Reviewer + Security agents pass first. Then you make the call."},{num:"6",name:"CI & Staging",tag:"YOUR PIPELINE",gate:!1,tagClass:"tag-pipeline",desc:"Preview env per PR. Full regression on staging."},{num:"7",name:"Deploy",tag:"GATE 3 \xb7 YOU",gate:!0,tagClass:"",desc:"Production never auto-promotes. Canary, blue/green, auto-rollback."},{num:"8",name:"Post-deploy",tag:"SRE + WRITER",gate:!1,tagClass:"tag-sre",desc:"Watch SLOs. Update docs. Attach evidence â auditor-ready."}],b=[function(){return(0,s.jsxs)("div",{className:"clp-terminal",children:[(0,s.jsxs)("div",{className:"clp-term-bar",children:[(0,s.jsx)("span",{className:"clp-dot r"}),(0,s.jsx)("span",{className:"clp-dot y"}),(0,s.jsx)("span",{className:"clp-dot g"}),(0,s.jsx)("span",{className:"clp-term-title",children:"brightworks â workspace/meridian-consulting"})]}),(0,s.jsxs)("div",{className:"clp-term-body",children:[(0,s.jsx)("span",{className:"clp-line muted",children:"$ brightworks --project meridian-consulting"}),(0,s.jsx)("span",{className:"clp-line ok",children:"â Orchestrator ready \xb7 claude-opus-4"}),(0,s.jsx)("span",{className:"clp-line muted",children:"\xa0"}),(0,s.jsx)("span",{className:"clp-line user",children:"âº Automate our quote-to-invoice pipeline â when a deal closes in HubSpot, auto-generate the invoice in Xero and ping the account manager on Slack"}),(0,s.jsx)("span",{className:"clp-line muted",children:"\xa0"}),(0,s.jsx)("span",{className:"clp-line",children:"[orchestrator] parsing intentâ¦"}),(0,s.jsx)("span",{className:"clp-line",children:"[orchestrator] matched: CRM \xb7 billing \xb7 notifications \xb7 workflow"}),(0,s.jsx)("span",{className:"clp-line",children:"[orchestrator] identified integrations: HubSpot, Xero, Slack"}),(0,s.jsx)("span",{className:"clp-line",children:"[orchestrator] routing to PM for specâ¦"}),(0,s.jsx)("span",{className:"clp-line muted",children:(0,s.jsx)("span",{className:"clp-cursor"})})]})]})},function(){return(0,s.jsxs)("div",{className:"clp-card",children:[(0,s.jsxs)("div",{className:"clp-card-head",children:[(0,s.jsxs)("div",{children:[(0,s.jsx)("div",{className:"clp-card-eyebrow",children:"Spec #37 \xb7 PM Agent"}),(0,s.jsx)("div",{className:"clp-card-title",children:"Quote-to-Invoice Automation"})]}),(0,s.jsx)("span",{className:"clp-gate-badge",children:"GATE 1"})]}),(0,s.jsx)("div",{className:"clp-spec-tasks",children:[{id:"T-1",label:"HubSpot deal-closed webhook",agent:"BE",est:"35m"},{id:"T-2",label:"Xero invoice generation API",agent:"BE",est:"50m"},{id:"T-3",label:"Slack account manager alert",agent:"BE",est:"20m"},{id:"T-4",label:"Invoice status dashboard",agent:"FE",est:"40m"},{id:"T-5",label:"Overdue payment reminder job",agent:"BE",est:"25m"},{id:"T-6",label:"End-to-end workflow tests",agent:"QA",est:"30m"},{id:"T-7",label:"Secrets audit + docs update",agent:"SEC",est:"15m"}].map(e=>(0,s.jsxs)("div",{className:"clp-task-row",children:[(0,s.jsx)("span",{className:"clp-task-id",children:e.id}),(0,s.jsx)("span",{className:"clp-task-label",children:e.label}),(0,s.jsx)("span",{className:"clp-task-agent",children:e.agent}),(0,s.jsx)("span",{className:"clp-task-est",children:e.est})]},e.id))}),(0,s.jsxs)("div",{className:"clp-approval-row",children:[(0,s.jsx)("span",{className:"clp-approval-hint",children:"Awaiting your approval to start build"}),(0,s.jsx)("button",{className:"clp-approve-btn",children:"Approve plan â"})]})]})},function(){return(0,s.jsxs)("div",{className:"clp-card",children:[(0,s.jsxs)("div",{className:"clp-card-head",children:[(0,s.jsxs)("div",{children:[(0,s.jsx)("div",{className:"clp-card-eyebrow",children:"Parallel build \xb7 4 agents active"}),(0,s.jsx)("div",{className:"clp-card-title",children:"SSO Integration"})]}),(0,s.jsxs)("span",{className:"clp-live-dot-wrap",children:[(0,s.jsx)("span",{className:"clp-live-dot"}),"LIVE"]})]}),(0,s.jsx)("div",{className:"clp-agents-build",children:[{av:"JO",cls:"b2",name:"Jordan",role:"Backend",status:"HubSpot + Xero webhooks \xb7 5 commits",pct:78,color:"#34D399"},{av:"AL",cls:"b1",name:"Alex",role:"Frontend",status:"invoice dashboard \xb7 3 commits",pct:55,color:"#60a5fa"},{av:"RI",cls:"b3",name:"Riley",role:"QA",status:"workflow e2e tests \xb7 2 commits",pct:38,color:"#a78bfa"},{av:"SE",cls:"g",name:"Sec",role:"Security",status:"scanning API keys + secretsâ¦",pct:22,color:"#fbbf24"}].map(e=>(0,s.jsxs)("div",{className:"clp-agent-build-row",children:[(0,s.jsx)("span",{className:`clp-av ${e.cls}`,children:e.av}),(0,s.jsxs)("div",{className:"clp-agent-info",children:[(0,s.jsxs)("div",{className:"clp-agent-name-row",children:[(0,s.jsx)("span",{className:"clp-agent-name",children:e.name}),(0,s.jsx)("span",{className:"clp-agent-role",children:e.role})]}),(0,s.jsx)("span",{className:"clp-agent-status",children:e.status}),(0,s.jsx)("div",{className:"clp-progress-track",children:(0,s.jsx)("div",{className:"clp-progress-fill",style:{width:`${e.pct}%`,background:e.color}})})]})]},e.name))})]})},function(){return(0,s.jsxs)("div",{className:"clp-terminal",children:[(0,s.jsxs)("div",{className:"clp-term-bar",children:[(0,s.jsx)("span",{className:"clp-dot r"}),(0,s.jsx)("span",{className:"clp-dot y"}),(0,s.jsx)("span",{className:"clp-dot g"}),(0,s.jsx)("span",{className:"clp-term-title",children:"

615PR \xb7 #37 \xb7 feature/quote-to-invoice"}),(0,s.jsx)("span",{className:"clp-pr-stat",children:"+312 â8"})]}),(0,s.jsxs)("div",{className:"clp-pr-meta-row",children:[(0,s.jsx)("span",{className:"clp-pr-label",children:'"Quote-to-Invoice Automation"'}),(0,s.jsx)("span",{className:"clp-pr-files",children:"14 files \xb7 3.1h"})]}),(0,s.jsxs)("div",{className:"clp-term-body clp-term-body-sm",children:[(0,s.jsx)("span",{className:"clp-line muted",children:"@@ -0,0 +1,18 @@ webhooks/hubspot.ts"}),(0,s.jsxs)("span",{className:"clp-line add",children:["+ export async function onDealClosed(payload: HubSpotDeal) ","{"]}),(0,s.jsx)("span",{className:"clp-line add",children:"+   const contact = await hubspot.getContact(payload.contactId)"}),(0,s.jsxs)("span",{className:"clp-line add",children:["+   const invoice = await xero.createInvoice(","{"]}),(0,s.jsx)("span",{className:"clp-line add",children:"+     contact, lineItems: payload.lineItems,"}),(0,s.jsx)("span",{className:"clp-line add",children:"+     dueDate: addDays(new Date(), 30),"}),(0,s.jsxs)("span",{className:"clp-line add",children:["+   ","}",")"]}),(0,s.jsx)("span",{className:"clp-line add",children:"+   await slack.notify(invoice, contact.accountManager)"}),(0,s.jsx)("span",{className:"clp-line add",children:"+   return invoice"}),(0,s.jsxs)("span",{className:"clp-line add",children:["+ ","}"]})]})]})},function(){return(0,s.jsxs)("div",{className:"clp-card",children:[(0,s.jsxs)("div",{className:"clp-card-head",children:[(0,s.jsxs)("div",{children:[(0,s.jsx)("div",{className:"clp-card-eyebrow",children:"PR #142 \xb7 review complete"}),(0,s.jsx)("div",{className:"clp-card-title",children:"2 gates passed"})]}),(0,s.jsx)("span",{className:"clp-gate-badge",children:"GATE 2"})]}),(0,s.jsx)("div",{className:"clp-review-rows",children:[{av:"CR",cls:"b1",name:"Code Reviewer",result:"â Passed",note:"4 inline comments resolved \xb7 idempotency flag added",ok:!0},{av:"SE",cls:"g",name:"Security",result:"â Passed",note:"API keys scoped \xb7 no secrets in logs \xb7 OWASP OK",ok:!0},{av:"RI",cls:"b3",name:"QA / Test",result:"â Passed",note:"18 e2e tests \xb7 dealâinvoiceâSlack flow verified",ok:!0}].map(e=>(0,s.jsxs)("div",{className:"clp-review-row",children:[(0,s.jsx)("span",{className:`clp-av ${e.cls}`,children:e.av}),(0,s.jsxs)("div",{className:"clp-review-info",children:[(0,s.jsxs)("div",{className:"clp-review-name-row",children:[(0,s.jsx)("span",{className:"clp-agent-name",children:e.name}),(0,s.jsx)("span",{className:`clp-review-result ${e.ok?"ok":"fail"}`,children:e.result})]}),(0,s.jsx)("span",{className:"clp-agent-status",children:e.note})]})]},e.name))}),(0,s.jsxs)("div",{className:"clp-approval-row",children:[(0,s.jsx)("span",{className:"clp-approval-hint",children:"All agents passed \xb7 your call"}),(0,s.jsx)("button",{className:"clp-approve-btn",children:"Merge PR â"})]})]})},function(){return(0,s.jsxs)("div",{className:"clp-card",children:[(0,s.jsxs)("div",{className:"clp-card-head",children:[(0,s.jsxs)("div",{children:[(0,s.jsx)("div",{className:"clp-card-eyebrow",children:"GitHub Actions \xb7 PR #142"}),(0,s.jsx)("div",{className:"clp-card-title",children:"CI Pipeline"})]}),(0,s.jsxs)("span",{className:"clp-live-dot-wrap",children:[(0,s.jsx)("span",{className:"clp-live-dot"}),"RUNNING"]})]}),(0,s.jsx)("div",{className:"clp-ci-stages",children:[{icon:"â",label:"Lint",time:"12s",done:!0},{icon:"â",label:"Unit tests",time:"1m 4s",done:!0},{icon:"â",label:"Build",time:"2m 8s",done:!0},{icon:"â",label:"E2E (Playwright)",time:"3m 21s",done:!0},{icon:"â³",label:"Preview deploy",time:"â¦",done:!1}].map(e=>(0,s.jsxs)("div",{className:`clp-ci-row ${e.done?"done":"running"}`,children:[(0,s.jsx)("span",{className:"clp-ci-icon",children:e.icon}),(0,s.jsx)("span",{className:"clp-ci-label",children:e.label}),(0,s.jsx)("span",{className:"clp-ci-time",children:e.time})]},e.label))}),(0,s.jsxs)("div",{className:"clp-preview-url",children:[(0,s.jsx)("span",{className:"clp-preview-label",children:"Preview"}),(0,s.jsx)("span",{className:"clp-preview-link",children:"pr-37--meridian.preview.vercel.app"})]})]})},function(){return(0,s.jsxs)("div",{className:"clp-card",children:[(0,s.jsxs)("div",{className:"clp-card-head",children:[(0,s.jsxs)("div",{children:[(0,s.jsx)("div",{className:"clp-card-eyebrow",children:"Production deploy \xb7 quote-to-invoice"}),(0,s.jsx)("div",{className:"clp-card-title",children:"Awaiting Gate 3"})]}),(0,s.jsx)("span",{className:"clp-gate-badge",children:"GATE 3"})]}),(0,s.jsxs)("div",{className:"clp-canary-wrap",children:[(0,s.jsxs)("div",{className:"clp-canary-labels",children:[(0,s.jsx)("span",{children:"Canary traffic"}),(0,s.jsx)("span",{className:"clp-canary-pct",children:"10%"})]}),(0,s.jsx)("div",{className:"clp-canary-track",children:(0,s.jsx)("div",{className:"clp-canary-fill",style:{width:"10%"}})}),(0,s.jsx)("span",{className:"clp-canary-note",children:"Paused at 10% â no errors detected"})]}),(0,s.jsx)("div",{className:"clp-deploy-config",children:[{label:"Strategy",value:"Blue / Green"},{label:"Rollback",value:"Auto if webhook errors > 1%"},{label:"Gate",value:"Manual approval"}].map(e=>(0,s.jsxs)("div",{className:"clp-deploy-row",children:[(0,s.jsx)("span",{className:"clp-deploy-label",children:e.label}),(0,s.jsx)("span",{className:"clp-deploy-value",children:e.value})]},e.label))}),(0,s.jsxs)("div",{className:"clp-approval-row",children:[(0,s.jsx)("span",{className:"clp-approval-hint",children:"Canary healthy \xb7 0 invoice errors \xb7 promote?"}),(0,s.jsx)("button",{className:"clp-approve-btn",children:"Deploy â"})]})]})},function(){return(0,s.jsxs)("div",{className:"clp-card",children:[(0,s.jsxs)("div",{className:"clp-card-head",children:[(0,s.jsxs)("div",{children:[(0,s.jsx)("div",{className:"clp-card-eyebrow",children:"Post-deploy \xb7 SRE + Writer"}),(0,s.jsx)("div",{className:"clp-card-title",children:"All systems n

615ominal"})]}),(0,s.jsx)("span",{className:"clp-ok-badge",children:"â Done"})]}),(0,s.jsx)("div",{className:"clp-slo-rows",children:[{label:"p99 latency",value:"142ms",target:"< 300ms",ok:!0},{label:"Error rate",value:"0.01%",target:"< 0.1%",ok:!0},{label:"Apdex",value:"0.97",target:"> 0.90",ok:!0}].map(e=>(0,s.jsxs)("div",{className:"clp-slo-row",children:[(0,s.jsx)("span",{className:"clp-slo-label",children:e.label}),(0,s.jsx)("span",{className:"clp-slo-value",children:e.value}),(0,s.jsx)("span",{className:"clp-slo-target",children:e.target}),(0,s.jsx)("span",{className:"clp-slo-ok",children:"â"})]},e.label))}),(0,s.jsxs)("div",{className:"clp-postdeploy-items",children:[(0,s.jsxs)("div",{className:"clp-post-item",children:[(0,s.jsx)("span",{className:"clp-post-icon",children:(0,s.jsxs)("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,s.jsx)("rect",{x:"2",y:"5",width:"20",height:"14",rx:"2"}),(0,s.jsx)("path",{d:"M2 10h20"})]})}),(0,s.jsx)("span",{children:"First invoice auto-generated â INV-2024-0091 \xb7 \xa34,200"})]}),(0,s.jsxs)("div",{className:"clp-post-item",children:[(0,s.jsx)("span",{className:"clp-post-icon",children:(0,s.jsx)("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round",strokeLinejoin:"round",children:(0,s.jsx)("path",{d:"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"})})}),(0,s.jsx)("span",{children:"Slack alert sent to account manager â Sarah K."})]}),(0,s.jsxs)("div",{className:"clp-post-item",children:[(0,s.jsx)("span",{className:"clp-post-icon",children:(0,s.jsxs)("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,s.jsx)("path",{d:"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"}),(0,s.jsx)("path",{d:"M14 2v6h6M16 13H8M16 17H8M10 9H8"})]})}),(0,s.jsx)("span",{children:"Docs + runbook updated \xb7 PR #37 closed \xb7 linked MRD-14"})]})]})]})}];function f(){let[e,a]=(0,t.useState)(0),r=b[e];return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)("style",{children:`
616        .cl-section { background: #F0F4FA; padding: 40px 0 40px; }
617        .cl-container { max-width: 1296px; margin: 0 auto; padding: 0 48px; }
618
619        /* Header */
620        .cl-head { margin-bottom: 56px; }
621        .cl-eyebrow { display: flex; align-items: center; gap: 8px; height: 18px; margin-bottom: 12px; }
622        .cl-eyebrow-dot { width: 5px; height: 5px; border-radius: 2.5px; background: #2563EB; box-shadow: 0 0 12px #3B82F6; flex-shrink: 0; }
623        .cl-eyebrow-text { font-family: var(--font-sans); font-size: 11.5px; font-weight: 600; letter-spacing: 1.84px; text-transform: uppercase; color: #2563EB; }
624        .cl-title { font-family: var(--font-display, Outfit, sans-serif); font-size: clamp(34px, 5.2vw, 60px); font-weight: 500; line-height: 1.05; letter-spacing: -0.03em; color: #020617; margin: 0 0 12px; }
625        .cl-title em { font-style: normal; background: linear-gradient(97.13deg, #0059D9 0%, #00C897 92.79%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
626        .cl-subtitle { font-family: var(--font-sans); font-size: 17px; color: #334155; line-height: 1.6; max-width: 560px; margin: 0; }
627
628        /* Layout */
629        .cl-body { display: grid; grid-template-columns: 1fr 400px; gap: 32px; align-items: start; }
630
631        /* Steps */
632        .cl-steps { display: flex; flex-direction: column; position: relative; gap: 2px; }
633        .cl-steps::before {
634          content: ""; position: absolute; left: 26px; top: 20px; bottom: 20px;
635          width: 1.5px;
636          background: linear-gradient(180deg, #2563EB 0%, #CBD5E1 60%, #E2E8F1 100%);
637          z-index: 0;
638        }
639        .cl-step {
640          display: flex; gap: 12px; align-items: center;
641          padding: 12px 14px 12px 10px; cursor: pointer;
642          border-radius: 14px; position: relative;
643          transition: background 180ms ease, box-shadow 180ms ease;
644        }
645        .cl-step:hover { background: rgba(255,255,255,0.6); }
646        .cl-step.active {
647          background: #fff;
648          box-shadow: 0 4px 24px -6px rgba(10,19,48,0.10);
649        }
650        .cl-step.active.gate {
651          box-shadow: 0 4px 24px -6px rgba(37,99,235,0.18);
652        }
653
654        .cl-num {
655          width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
656          display: flex; align-items: center; justify-content: center;
657          font-family: var(--font-mono, monospace); font-size: 11px; font-weight: 700;
658          background: #F8FAFC; color: #94A3B8; border: 1.5px solid #E2E8F1;
659          position: relative; z-index: 1; margin-left: 0px;
660          transition: all 220ms ease;
661        }
662        .cl-step.active .cl-num {
663          background: linear-gradient(135deg, #0F172A, #1E3A5F);
664          color: #fff; border-color: transparent;
665          box-shadow: 0 2px 8px rgba(2,6,23,0.25);
666        }
667        .cl-step.active.gate .cl-num {
668          background: linear-gradient(135deg, #2563EB, #0059D9);
669          border-color: transparent;
670          box-shadow: 0 2px 8px rgba(37,99,235,0.35);
671        }
672        .cl-step.gate:not(.active) .cl-num {
673          color: #2563EB; border-color: #BFDBFE; background: #EFF6FF;
674        }
675
676        .cl-step-body { flex: 1; }
677        .cl-step-head { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; flex-wrap: wrap; }
678        .cl-step-name { font-family: var(--font-sans); font-size: 14px; font-weight: 700; color: #0A1330; letter-spacing: -0.01em; }
679        .cl-step-tag {
680          font-family: var(--font-mono, monospace); font-size: 9px; font-weight: 700;
681          letter-spacing: 0.09em; text-transform: uppercase;
682          padding: 2px 8px; border-radius: 100px;
683          background: #F1F5F9; color: #64748B; border: 1px solid #E2E8F1;
684          transition: all 200ms ease;
685        }
686        .cl-step.gate .cl-step-tag { background: #EFF6FF; color: #2563EB; border-color: #BFDBFE; }
687        .cl-step-tag.tag-auto { background: #F0FDF4; color: #16A34A; border-color: #BBF7D0; }
688        .cl-step-tag.tag-agents { background: #FAF5FF; color: #7C3AED; border-color: #DDD6FE; }
689        .cl-step-tag.tag-pipeline { background: #FFF7ED; color: #C2410C; border-color: #FED7AA; }
690        .cl-step-tag.tag-sre { background: #F0FDFA; color: #0D9488; border-color: #99F6E4; }
691        .cl-step-desc { font-family: var(--font-sans); font-size: 12.5px; color: #94A3B8; line-height: 1.55; transition: color 200ms ease; }
692        .cl-step.active .cl-step-desc { color: #475569; }
693
694        /* Right panel */
695        .cl-panel-wrap { position: sticky; top: 24px; }
696        .cl-panel { animation: clFadeUp 280ms cubic-bezier(0.2,0.8,0.2,1) both; }
697        @keyframes clFadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
698
699        /* Dark terminal */
700        .clp-terminal {

701          background: #0A1330; border-radius: 16px; overflow: hidden;
702          border: 1px solid rgba(255,255,255,0.07);
703          box-shadow: 0 20px 60px -16px rgba(10,19,48,0.28);
704        }
705        .clp-term-bar {
706          display: flex; align-items: center; gap: 6px;
707          padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,0.07);
708          background: rgba(255,255,255,0.03);
709        }
710        .clp-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
711        .clp-dot.r { background: #FF5F57; } .clp-dot.y { background: #FEBC2E; } .clp-dot.g { background: #28C840; }
712        .clp-term-title { flex: 1; font-family: var(--font-mono,monospace); font-size: 10px; color: rgba(255,255,255,0.35); margin-left: 6px; }
713        .clp-pr-stat { font-family: var(--font-mono,monospace); font-size: 11px; font-weight: 700; color: #34D399; }
714        .clp-pr-meta-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px 0; }
715        .clp-pr-label { font-family: var(--font-display); font-size: 14px; font-weight: 600; color: #fff; }
716        .clp-pr-files { font-family: var(--font-mono,monospace); font-size: 10px; color: rgba(255,255,255,0.35); }
717        .clp-term-body { padding: 14px 16px; font-family: var(--font-mono,monospace); font-size: 12px; line-height: 2; color: rgba(255,255,255,0.85); }
718        .clp-term-body-sm { padding-top: 10px; }
719        .clp-line { display: block; }
720        .clp-line.muted { color: rgba(255,255,255,0.3); }
721        .clp-line.ok    { color: #34D399; }
722        .clp-line.user  { color: #60a5fa; }
723        .clp-line.del   { color: #F87171; }
724        .clp-line.add   { color: #34D399; }
725        .clp-cursor { display: inline-block; width: 7px; height: 13px; background: #34D399; vertical-align: -2px; animation: clBlink 1.05s steps(2) infinite; }
726        @keyframes clBlink { 0%,49%{opacity:1} 50%,100%{opacity:0} }
727
728        /* Light card */
729        .clp-card {
730          background: #fff; border-radius: 16px;
731          border: 1px solid #E2E8F1;
732          box-shadow: 0 8px 32px -12px rgba(10,19,48,0.10);
733          overflow: hidden;
734        }
735        .clp-card-head { display: flex; justify-content: space-between; align-items: flex-start; padding: 18px 20px 14px; border-bottom: 1px solid #F1F5F9; }
736        .clp-card-eyebrow { font-family: var(--font-mono,monospace); font-size: 10px; font-weight: 700; color: #94A3B8; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 4px; }
737        .clp-card-title { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: #0A1330; letter-spacing: -0.02em; }
738        .clp-gate-badge { font-family: var(--font-mono,monospace); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; padding: 4px 10px; border-radius: 100px; background: #EFF6FF; color: #2563EB; border: 1.5px solid #BFDBFE; white-space: nowrap; }
739        .clp-ok-badge { font-family: var(--font-mono,monospace); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; padding: 4px 10px; border-radius: 100px; background: #ECFDF5; color: #059669; border: 1.5px solid #A7F3D0; }
740        .clp-live-dot-wrap { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono,monospace); font-size: 10px; font-weight: 700; color: #34D399; }
741        .clp-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #34D399; animation: clPulse 1.8s infinite; }
742        @keyframes clPulse { 0%{box-shadow:0 0 0 0 rgba(52,211,153,0.5)} 70%{box-shadow:0 0 0 8px rgba(52,211,153,0)} 100%{box-shadow:0 0 0 0 rgba(52,211,153,0)} }
743
744        /* Spec tasks */
745        .clp-spec-tasks { padding: 12px 20px; display: flex; flex-direction: column; gap: 6px; }
746        .clp-task-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; background: #F8FAFC; border: 1px solid #F1F5F9; }
747        .clp-task-id { font-family: var(--font-mono,monospace); font-size: 10px; color: #94A3B8; font-weight: 700; min-width: 28px; }
748        .clp-task-label { font-family: var(--font-sans); font-size: 12.5px; color: #0A1330; font-weight: 500; flex: 1; }
749        .clp-task-agent { font-family: var(--font-mono,monospace); font-size: 10px; font-weight: 700; color: #2563EB; background: #EFF6FF; padding: 2px 7px; border-radius: 6px; }
750        .clp-task-est { font-family: var(--font-mono,monospace); font-size: 10px; color: #94A3B8; }
751
752        /* Build agents */
753        .clp-agents-build { padding: 14px 20px; display: flex; flex-direction: column; gap: 12px; }
754        .clp-agent-build-row { display: flex; gap: 12px; align-items: flex-start; }
755        .clp-agent-info { flex: 1; }
756        .clp-agent-name-row { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
757        .clp-agent-name { font-family: var(--font-sans); font-size: 13px; font-weight: 700; color: #0A1330; }
758        .clp-agent-role { font-family: var(--font-mono,monospace); font-size: 9.5px; font-weight: 700; color: #94A3B8; letter-spacing: 0.06em; }
759        .clp-agent-status { font-family: var(--font-mono,monospace); font-size: 11px; color: #64748B; display: block; margin-bottom: 5px; }
760        .clp-progress-track { height: 4px; background: #F1F5F9; border-radius: 2px; overflow: hidden; }
761        .clp-progress-fill { height: 100%; border-radius: 2px; transition: width 600ms ease; }
762
763        /* Avatars */
764        .clp-av { width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono,monospace); font-size: 9px; font-weight: 700; color: #fff; background: linear-gradient(135deg,#1E3A8A,#2CC9A4); }
765        .clp-av.b1 { background: linear-gradient(135deg,#1E5BC6,#60a5fa); }
766        .clp-av.b2 { background: linear-gradient(135deg,#0059D9,#00C897); }
767        .clp-av.b3 { background: linear-gradient(135deg,#2CC9A4,#60a5fa); }
768        .clp-av.g  { background: linear-gradient(135deg,#065F46,#34D399); }
769
770        /* Review */
771        .clp-review-rows { padding: 12px 20px; display: flex; flex-direction: column; gap: 8px; }
772        .clp-review-row { display: flex; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 8px; background: #F8FAFC; border: 1px solid #F1F5F9; }
773        .clp-review-info { flex: 1; }
774        .clp-review-name-row { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
775        .clp-review-result { font-family: var(--font-mono,monospace); font-size: 10px; font-weight: 700; color: #059669; }
776        .clp-review-result.fail { color: #DC2626; }
777
778        /* CI */
779        .clp-ci-stages { padding: 12px 20px; display: flex; flex-direction: column; gap: 6px; }
780        .clp-ci-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; }
781        .clp-ci-row.done { background: #F0FDF4; }
782        .clp-ci-row.running { background: #EFF6FF; }

783        .clp-ci-icon { width: 20px; font-size: 12px; text-align: center; color: #059669; }
784        .clp-ci-row.running .clp-ci-icon { color: #2563EB; animation: clSpin 1s linear infinite; display: inline-block; }
785        @keyframes clSpin { to { transform: rotate(360deg); } }
786        .clp-ci-label { font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: #0A1330; flex: 1; }
787        .clp-ci-time { font-family: var(--font-mono,monospace); font-size: 11px; color: #94A3B8; }
788        .clp-preview-url { display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-top: 1px solid #F1F5F9; }
789        .clp-preview-label { font-family: var(--font-mono,monospace); font-size: 10px; font-weight: 700; color: #2563EB; background: #EFF6FF; padding: 2px 8px; border-radius: 6px; }
790        .clp-preview-link { font-family: var(--font-mono,monospace); font-size: 11px; color: #2563EB; }
791
792        /* Deploy */
793        .clp-canary-wrap { padding: 16px 20px; border-bottom: 1px solid #F1F5F9; }
794        .clp-canary-labels { display: flex; justify-content: space-between; margin-bottom: 6px; font-family: var(--font-sans); font-size: 12px; color: #5A6786; }
795        .clp-canary-pct { font-weight: 700; color: #0A1330; }
796        .clp-canary-track { height: 6px; background: #F1F5F9; border-radius: 3px; overflow: hidden; margin-bottom: 6px; }
797        .clp-canary-fill { height: 100%; background: linear-gradient(90deg,#2563EB,#14E6B8); border-radius: 3px; }
798        .clp-canary-note { font-family: var(--font-mono,monospace); font-size: 10.5px; color: #64748B; }
799        .clp-deploy-config { padding: 12px 20px; display: flex; flex-direction: column; gap: 8px; }
800        .clp-deploy-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-radius: 8px; background: #F8FAFC; }
801        .clp-deploy-label { font-family: var(--font-sans); font-size: 12px; color: #64748B; }
802        .clp-deploy-value { font-family: var(--font-mono,monospace); font-size: 11px; font-weight: 600; color: #0A1330; }
803
804        /* Post-deploy */
805        .clp-slo-rows { padding: 12px 20px; display: flex; flex-direction: column; gap: 6px; }
806        .clp-slo-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; background: #F0FDF4; border: 1px solid #A7F3D0; }
807        .clp-slo-label { font-family: var(--font-sans); font-size: 12px; color: #5A6786; flex: 1; }
808        .clp-slo-value { font-family: var(--font-mono,monospace); font-size: 13px; font-weight: 700; color: #0A1330; }
809        .clp-slo-target { font-family: var(--font-mono,monospace); font-size: 10px; color: #94A3B8; }
810        .clp-slo-ok { color: #059669; font-weight: 700; }
811        .clp-postdeploy-items { padding: 10px 20px 16px; display: flex; flex-direction: column; gap: 8px; border-top: 1px solid #F1F5F9; }
812        .clp-post-item { display: flex; align-items: flex-start; gap: 10px; font-family: var(--font-sans); font-size: 12.5px; color: #334155; }
813        .clp-post-icon { width: 22px; height: 22px; border-radius: 6px; background: #EFF6FF; color: #2563EB; display: flex; align-items: center; justify-content: center; flex-shrink: 0;

813 margin-top: 1px; }
814
815        /* Approval row */
816        .clp-approval-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; border-top: 1px solid #F1F5F9; background: #FAFBFD; }
817        .clp-approval-hint { font-family: var(--font-sans); font-size: 12px; color: #64748B; }
818        .clp-approve-btn { font-family: var(--font-sans); font-size: 12px; font-weight: 700; padding: 7px 16px; border-radius: 8px; background: #2563EB; color: #fff; border: none; cursor: pointer; white-space: nowrap; transition: opacity 150ms ease; }
819        .clp-approve-btn:hover { opacity: 0.88; }
820
821        /* Responsive */
822        @media (max-width: 1024px) {
823          .cl-body { grid-template-columns: 1fr; grid-template-rows: auto auto; }
824          .cl-panel-wrap { position: static; order: -1; }
825          .cl-steps { order: 1; }
826        }
827        @media (max-width: 640px) { .cl-container { padding: 0 16px; } .cl-section { padding: 20px 0 40px; } }
828      `}),(0,s.jsx)("section",{className:"cl-section",id:"closed-loop",children:(0,s.jsxs)("div",{className:"cl-container",children:[(0,s.jsxs)("div",{className:"cl-head",children:[(0,s.jsxs)("div",{className:"cl-eyebrow",children:[(0,s.jsx)("span",{className:"cl-eyebrow-dot","aria-hidden":!0}),(0,s.jsx)("span",{className:"cl-eyebrow-text",children:"The Closed Loop"})]}),(0,s.jsxs)("h2",{className:"cl-title",children:["A sentence in. ",(0,s.jsx)("em",{children:"A deploy out."})]})]}),(0,s.jsxs)("div",{className:"cl-body",children:[(0,s.jsx)("div",{className:"cl-steps",children:h.map((r,t)=>(0,s.jsxs)("div",{className:`cl-step${r.gate?" gate":""}${e===t?" active":""}`,onClick:()=>a(t),children:[(0,s.jsx)("div",{className:"cl-num",children:r.num}),(0,s.jsxs)("div",{className:"cl-step-body",children:[(0,s.jsxs)("div",{className:"cl-step-head",children:[(0,s.jsx)("span",{className:"cl-step-name",children:r.name}),(0,s.jsx)("span",{className:`cl-step-tag${r.tagClass?` ${r.tagClass}`:""}`,children:r.tag})]}),(0,s.jsx)("p",{className:"cl-step-desc",children:r.desc})]})]},r.num))}),(0,s.jsx)("div",{className:"cl-panel-wrap",children:(0,s.jsx)("div",{className:"cl-panel",children:(0,s.jsx)(r,{})},e)})]})]})})]})}let w={"30d":{label:"LAST 30 DAYS",metrics:[{label:"DEPLOYS / MO",value:"38",unit:"",delta:"â 12% vs prev 30d",deltaPos:!0,bars:[22,18,28,24,32,28,36,42,48,58,68,78,90]},{label:"PRS MERGED",value:"142",unit:"",delta:"87% accept rate",deltaPos:!1,bars:[28,22,34,30,38,44,52,58,64,72,80,88,96]},{label:"MTTR",value:"22",unit:" min",delta:"â 38% vs prev 30d",deltaPos:!0,bars:[88,78,92,72,82,65,58,50,42,34,26,20,14]},{label:"CHANGE FAILURE",value:"2.6",unit:"%",delta:"DORA ELITE",deltaPos:!1,bars:[62,52,72,44,64,36,54,38,48,30,42,26,36]}]},"90d":{label:"LAST 90 DAYS",metrics:[{label:"DEPLOYS / MO",value:"34",unit:"",delta:"â 28% vs prev 90d",deltaPos:!0,bars:[14,16,18,20,22,24,26,30,34,40,48,58,68,76,90]},{label:"PRS MERGED",value:"128",unit:"",delta:"83% accept rate",deltaPos:!1,bars:[20,24,28,32,36,38,44,50,56,62,70,76,84,90,96]},{label:"MTTR",value:"31",unit:" min",delta:"â 24% vs prev 90d",deltaPos:!0,bars:[96,88,92,84,80,76,72,66,60,54,46,40,34,28,22]},{label:"CHANGE FAILURE",value:"3.1",unit:"%",delta:"â vs prev 90d",deltaPos:!0,bars:[80,72,84,68,76,64,58,52,50,44,40,36,32,28,24]}]},YTD:{label:"YEAR TO DATE",metrics:[{label:"DEPLOYS / MO",value:"29",unit:"",delta:"â 41% YoY",deltaPos:!0,bars:[10,12,14,16,18,22,26,30,36,42,50,58,66,74,82,90]},{label:"PRS MERGED",value:"109",unit:"",delta:"79% accept rate",deltaPos:!1,bars:[16,18,22,26,30,36,42,50,56,62,68,74,80,86,92,96]},{label:"MTTR",value:"44",unit:" min",delta:"â 18% YoY",deltaPos:!0,bars:[96,90,94,86,88,80,76,70,64,58,52,46,40,34,28,20]},{label:"CHANGE FAILURE",value:"3.8",unit:"%",delta:"Improving YoY",deltaPos:!0,bars:[90,84,88,78,82,74,68,62,58,52,46,40,36,30,26,22]}]}};function u({data:e,animate:a,colorLight:r="#4FC3F7",colorDark:t="#0D47A1"}){let i=Math.max(...e),o=36*e.length+(e.length-1)*5;return(0,s.jsx)("svg",{width:"100%",height:56,viewBox:`0 0 ${o} 56`,preserveAspectRatio:"none",children:e.map((o,n)=>{let l=Math.round(o/i*56),c=n/(e.length-1),d=Math.round(parseInt(r.slice(1,3),16)*(1-c)+parseInt(t.slice(1,3),16)*c),p=Math.round(parseInt(r.slice(3,5),16)*(1-c)+parseInt(t.slice(3,5),16)*c),x=Math.round(parseInt(r.slice(5,7),16)*(1-c)+parseInt(t.slice(5,7),16)*c),m=`rgb(${d},${p},${x})`,g=a?`${60*n}ms`:"9999s";

828return(0,s.jsx)("rect",{x:41*n,y:56,width:36,height:l,rx:4,fill:m,style:{transform:a?`translateY(-${l}px)`:"translateY(0)",transition:a?`transform 420ms cubic-bezier(0.68,-0.6,0.32,1.6) ${g}`:"none"}},n)})})}let v=()=>(0,s.jsxs)("svg",{width:"22",height:"22",viewBox:"0 0 24 24",fill:"none",stroke:"#007DFE",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,s.jsx)("line",{x1:"18",y1:"20",x2:"18",y2:"10"}),(0,s.jsx)("line",{x1:"12",y1:"20",x2:"12",y2:"4"}),(0,s.jsx)("line",{x1:"6",y1:"20",x2:"6",y2:"14"}),(0,s.jsx)("line",{x1:"2",y1:"20",x2:"22",y2:"20"})]}),y=[{icon:(0,s.jsx)(()=>(0,s.jsx)("svg",{width:"22",height:"22",viewBox:"0 0 24 24",fill:"none",stroke:"#007DFE",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:(0,s.jsx)("polygon",{points:"13 2 3 14 12 14 11 22 21 10 12 10 13 2"})}),{}),value:"3",unit:"x",label:"Faster delivery.",desc:"Median time from prompt to production, measured against the team's prior 90-day baseline."},{icon:(0,s.jsx)(()=>(0,s.jsxs)("svg",{width:"22",height:"22",viewBox:"0 0 24 24",fill:"none",stroke:"#007DFE",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,s.jsx)("circle",{cx:"12",cy:"12",r:"10"}),(0,s.jsx)("path",{d:"M14.31 8a4 4 0 0 0-4.62 0C8.27 8.8 8.27 10.2 9.69 11c1.42.8 3.22.8 4.62 1.5 1.42.8 1.42 2.2 0 3-.7.4-1.54.6-2.31.5m0-9v1m0 10v1"})]}),{}),value:"62",unit:"%",label:"Lower cost per feature",desc:"All-in: model spend + platform + engineering hours no longer spent on boilerplate, tests, reviews."},{icon:(0,s.jsx)(()=>(0,s.jsxs)("svg",{width:"22",height:"22",viewBox:"0 0 24 24",fill:"none",stroke:"#007DFE",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,s.jsx)("circle",{cx:"12",cy:"12",r:"3"}),(0,s.jsx)("path",{d:"M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"})]}),{}),value:"+47",unit:"%",label:"Engineer productivity",desc:"Senior engineers move from typing to reviewing â they ship more, not less."}];function j(){let[e,a]=(0,t.useState)("30d"),[r,i]=(0,t.useState)(!1),o=(0,t.useRef)(null);return(0,t.useEffect)(()=>{let e=o.current;if(!e)return;let a=new IntersectionObserver(([e])=>{e.isIntersecting&&(i(!0),a.disconnect())},{threshold:.2});return a.observe(e),()=>a.disconnect()},[]),(0,s.jsxs)("section",{className:"imp2-section",children:[(0,s.jsxs)("div",{className:"imp2-container",children:[(0,s.jsxs)("div",{className:"imp2-header",children:[(0,s.jsxs)("div",{className:"cl-eyebrow",children:[(0,s.jsx)("span",{className:"cl-eyebrow-dot","aria-hidden":!0}),(0,s.jsx)("span",{className:"cl-eyebrow-text",children:"Impact"})]}),(0,s.jsxs)("h2",{className:"imp2-title",children:["Real outcomes. ",(0,s.jsx)("span",{className:"imp2-title-gradient",children:"Measurable"})]})]}),(0,s.jsx)("div",{className:"imp2-big-grid",children:y.map(e=>(0,s.jsxs)("div",{className:"imp2-big-card",children:[(0,s.jsx)("div",{className:"imp2-card-left",children:(0,s.jsxs)("div",{className:"imp2-value-row",children:[(0,s.jsx)("span",{className:"imp2-value",children:e.value}),(0,s.jsx)("span",{className:"imp2-unit",children:e.unit})]})}),(0,s.jsx)("div",{className:"imp2-card-divider"}),(0,s.jsxs)("div",{className:"imp2-card-right",children:[(0,s.jsx)("div",{className:"imp2-big-label",children:e.label}),(0,s.jsx)("p",{className:"imp2-big-desc",children:e.desc})]})]},e.label))}),(0,s.jsxs)("div",{className:"imp2-analytics",ref:o,children:[(0,s.jsxs)("div",{className:"imp2-analytics-header",children:[(0,s.jsxs)("div",{className:"imp2-analytics-left",children:[(0,s.jsx)("div",{className:"imp2-analytics-icon",children:(0,s.jsx)(v,{})}),(0,s.jsxs)("div",{children:[(0,s.jsx)("div",{className:"imp2-analytics-title",children:"Delivery anal

828ytics"}),(0,s.jsxs)("div",{className:"imp2-analytics-sub",children:[w[e].label," \xb7 DORA METRICS"]})]})]}),(0,s.jsx)("div",{className:"imp2-toggle",children:["30d","90d","YTD"].map(r=>(0,s.jsx)("button",{onClick:()=>a(r),className:`imp2-toggle-btn${e===r?" active":""}`,children:r},r))})]}),(0,s.jsx)("div",{className:"imp2-dora-grid",children:w[e].metrics.map(e=>(0,s.jsxs)("div",{className:"imp2-dora-col",children:[(0,s.jsx)("div",{className:"imp2-dora-label",children:e.label}),(0,s.jsxs)("div",{className:"imp2-dora-value",children:[e.value,(0,s.jsx)("span",{className:"imp2-dora-unit",children:e.unit})]}),(0,s.jsx)("div",{className:`imp2-dora-delta${e.deltaPos?" pos":""}`,children:e.delta}),(0,s.jsx)("div",{className:"imp2-dora-chart",style:{overflow:"hidden"},children:(0,s.jsx)(u,{data:e.bars,animate:r})})]},e.label))})]})]}),(0,s.jsx)("style",{children:`
829        .imp2-section {
830          background: #fff;
831          padding: 40px 0 24px;
832        }
833        .imp2-container {
834          max-width: 1296px;
835          margin: 0 auto;
836          padding: 0 48px;
837          display: flex;
838          flex-direction: column;
839          gap: 40px;
840        }
841
842        /* Header */
843        .imp2-header { display: flex; flex-direction: column; gap: 12px; }
844        .cl-eyebrow { display: flex; align-items: center; gap: 8px; height: 18px; margin-bottom: 4px; }
845        .cl-eyebrow-dot { width: 5px; height: 5px; border-radius: 2.5px; background: #2563EB; box-shadow: 0 0 12px #3B82F6; flex-shrink: 0; }
846        .cl-eyebrow-text { font-size: 11.5px; font-weight: 600; letter-spacing: 1.84px; text-transform: uppercase; color: #2563EB; }
847        .imp2-title {
848          font-family: var(--font-display, Outfit, sans-serif);
849          font-size: clamp(34px, 5.2vw, 60px);
850          font-weight: 500;
851          line-height: 1.05;
852          letter-spacing: -0.03em;
853          color: #020617;
854          margin: 0;
855        }
856        .imp2-title-gradient {
857          background: linear-gradient(97.13deg, #0059D9 0%, #00C897 92.79%);
858          -webkit-background-clip: text;
859          -webkit-text-fill-color: transparent;
860          background-clip: text;
861        }
862        .imp2-subtitle {
863          font-size: 16px; color: #64748B; margin: 0; max-width: 640px; line-height: 1.6;
864        }
865
866        /* Big cards */
867        .imp2-big-grid {
868          display: grid;
869          grid-template-columns: repeat(3, 1fr);
870          gap: 20px;
871        }
872        .imp2-big-card {
873          background: radial-gradient(57.49% 102.76% at 136.84% -68.12%, rgba(0,125,254,0.3) 0%, #FCFEFF 100%);
874          border: 1px solid rgba(79,207,219,0.5);
875          border-radius: 20px;
876          padding: 24px;
877          display: flex;
878          flex-direction: row;
879          align-items: center;
880          gap: 20px;
881        }
882        .imp2-card-left {
883          display: flex;
884          flex-direction: column;
885          align-items: center;
886          gap: 10px;
887          flex-shrink: 0;
888          min-width: 90px;
889        }
890        .imp2-icon-wrap {
891          width: 40px; height: 40px;
892          background: #E6F0FF;
893          border-radius: 10px;
894          display: flex; align-items: center; justify-content: center;
895          flex-shrink: 0;
896        }
897        .imp2-value-row {
898          display: flex; align-items: baseline; gap: 2px;
899        }
900        .imp2-value {
901          font-size: 36px; font-weight: 700; line-height: 1;
902          color: #007DFE; font-family: 'Inter', sans-serif;
903        }
904        .imp2-unit {
905          font-size: 36px; font-weight: 700; line-height: 1;
906          color: #007DFE; font-family: 'Inter', sans-serif;
907        }
908        .imp2-card-divider {
909          width: 1px; align-self: stretch;
910          background: rgba(79,207,219,0.4); flex-shrink: 0;
911        }
912        .imp2-card-right { display: flex; flex-direction: column; gap: 6px; flex: 1; }
913        .imp2-big-label {
914          font-size: 16px; font-weight: 600; color: #0A2642;
915          letter-spacing: -0.02em; line-height: 1.3;
916        }
917        .imp2-big-desc {
918          font-size: 13px; color: #64748B; line-height: 1.6; margin: 0;
919        }
920
921        /* Analytics panel */
922        .imp2-analytics {
923          background: #fff;
924          border: 1px solid #E2E8F0;
925          border-radius: 16px;
926          padding: 32px;
927          box-shadow: 0 1px 2px rgba(0,0,0,0.05);
928          display: flex;
929          flex-direction: column;
930          gap: 32px;
931        }
932        .imp2-analytics-header {
933          display: flex; align-items: flex-start; justify-content: space-between;
934          gap: 12px; flex-wrap: wrap;
935        }
936        .imp2-analytics-left { display: flex; align-items: center; gap: 14px; }
937        .imp2-analytics-icon {
938          width: 44px; height: 44px;
939          background: #EFF6FF;
940          border-radius: 10px;
941          display: flex; align-items: center; justify-content: center;
942          flex-shrink: 0;
943        }
944        .imp2-analytics-title {
945          font-size: 18px; font-weight: 700; color: #0A0A0A; line-height: 1.3;
946        }
947        .imp2-analytics-sub {
948          font-size: 11px; font-weight: 600; color: #94A3B8;
949          letter-spacing: 0.08em; text-transform: uppercase; margin-top: 2px;
950        }
951
952        /* Toggle */
953        .imp2-toggle {
954          display: flex; align-items: center;
955          border: 1px solid #E2E8F0; border-radius: 10px;
956          overflow: hidden; flex-shrink: 0;
957        }
958        .imp2-toggle-btn {
959          padding: 8px 20px;
960          font-size: 14px; font-weight: 600;
961          color: #94A3B8; background: transparent;
962          border: none; cursor: pointer;
963          transition: all 0.2s;
964          white-space: nowrap; min-width: 52px; text-align: center;
965        }
966        .imp2-toggle-btn.active {
967          background: linear-gradient(135deg, #007DFE, #00C897);
968          color: #fff;
969          border-radius: 8px;
970          margin: 3px;
971        }
972
973        /* DORA grid */
974        .imp2-dora-grid {
975          display: grid;
976          grid-template-columns: repeat(4, 1fr);
977          gap: 32px;
978        }
979        .imp2-dora-col {
980          display: flex; flex-direction: column; gap: 4px;
981        }
982        .imp2-dora-label {
983          font-size: 11px; font-weight: 700; color: #94A3B8;
984          letter-spacing: 0.08em; text-transform: uppercase;
985          margin-bottom: 4px;
986        }
987        .imp2-dora-value {
988          font-size: 40px; font-weight: 700; color: #007DFE;
989          line-height: 1; letter-spacing: -0.02em;
990          font-family: 'Inter', sans-serif;
991        }
992        .imp2-dora-unit {
993          font-size: 22px; font-weight: 600;
994        }
995        .imp2-dora-delta {
996          font-size: 13px; font-weight: 600;
997          color: #64748B; margin-top: 4px;
998        }
999        .imp2-dora-delta.pos { color: #16A34A; }
1000        .imp2-dora-chart { margin-top: 16px; }
1001
1002        /* Responsive */
1003        @media (max-width: 1024px) {
1004          .imp2-container { padding: 0 24px; }
1005          .imp2-dora-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
1006        }
1007        @media (max-width: 768px) {
1008          .imp2-section { padding: 20px 0 40px; }
1009          .imp2-big-grid { grid-template-columns: 1fr; }
1010          .imp2-dora-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
1011          .imp2-analytics { padding: 20px; gap: 20px; }
1012          .imp2-analytics-title { font-size: 15px; }
1013          .imp2-dora-value { font-size: 30px; }
1014          .imp2-dora-unit { font-size: 18px; }
1015          .imp2-toggle-btn { padding: 6px 14px; font-size: 13px; }
1016        }
1017        @media (max-width: 480px) {
1018          .imp2-container { padding: 0 16px; }
1019          .imp2-dora-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
1020          .imp2-analytics { padding: 16px; gap: 16px; }
1021          .imp2-analytics-title { font-size: 14px; }
1022          .imp2-analytics-icon { width: 36px; height: 36px; }
1023          .imp2-dora-value { font-size: 26px; }
1024          .imp2-dora-unit { font-size: 16px; }
1025          .imp2-dora-delta { font-size: 11px; }
1026          .imp2-toggle-btn { padding: 5px 12px; font-size: 12px; }
1027        }
1028      `})]})}function k(){return(0,s.jsxs)("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"#007DFE",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,s.jsx)("path",{d:"M12 2.5 4 5.5v6c0 5 3.5 8.5 8 10 4.5-1.5 8-5 8-10v-6Z"}),(0,s.jsx)("path",{d:"m9 12 2 2 4-4"})]})}let N=[{name:"SOC 2",badge:"LIVE",sub:"Type I & II â¢ CC6 â¢ CC8.1",Icon:k},{name:"ISO 27001",badge:"LIVE",sub:"2022 â¢ Annex A controls",Icon:function(){return(0,s.jsxs)("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"#007DFE",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,s.jsx)("path",{d:"M6 2.5h8l5 5V21a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1Z"}),(0,s.jsx)("path",{d:"M14 2.5v5h5M9 13h6M9 17h4"})]})}},{name:"HIPAA",badge:"LIVE",sub:"\xa7164.312 â¢ BAA available",Icon:function(){return(0,s.jsxs)("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"#007DFE",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,s.jsx)("path",{d:"M12 2.5 4 5.5v6c0 5 3.5 8.5 8 10 4.5-1.5 8-5 8-10v-6Z"}),(0,s.jsx)("path",{d:"M12 8v8M8 12h8"})]})}},{name:"PCI DSS v4",badge:"LIVE",sub:"Req 6 â¢ 7 â¢ 8 â¢ 10",Icon:function(){return(0,s.jsxs)("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"#007DFE",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,s.jsx)("rect",{x:"2.5",y:"5.5",width:"19",height:"13",rx:"2"}),(0,s.jsx)("path",{d:"M2.5 10h19"})]})}},{name:"EU AI Act",badge:"LIVE",sub:"Art 12 â¢ Art 14 oversight",Icon:k}],F=[{label:"E-01",name:"Change ticket",desc:"Every human instruction is its own ticket. Maps to SOC 2 CC8.1.",Icon:function(){return(0,s.jsxs)("svg",{width:"28",height:"28",viewBox:"0 0 28 28",fill:"none",stroke:"#007DFE",strokeWidth:"1.75",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,s.jsx)("rect",{x:"3",y:"7",width:"22",height:"14",rx:"2"}),(0,s.jsx)("path",{d:"M3 13a3 3 0 0 0 0 2M25 13a3 3 0 0 1 0 2M9 11v6M13 14h6"})]})}},{label:"E-02",name:"Approval record",desc:"Every gated step with approver, decision, justification, and TTL.",Icon:function(){return(0,s.jsxs)("svg",{width:"28",height:"28",viewBox:"0 0 28 28",fill:"none",stroke:"#007DFE",strokeWidth:"1.75",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,s.jsx)("circle",{cx:"11",cy:"9",r:"4"}),(0,s.jsx)("path",{d:"M3 24a8 8 0 0 1 16 0"}),(0,s.jsx)("path",{d:"M19 13l2 2 4-4"})]})}},{label:"E-03",name:"Code review record",desc:"Inline comments, requested-changes events, final approval, CI status.",Icon:function(){return(0,s.jsx)("svg",{width:"28",height:"28",viewBox:"0 0 28 28",fill:"none",stroke:"#007DFE",strokeWidth:"1.75",strokeLinecap:"round",strokeLinejoin:"round",children:(0,s.jsx)("path",{d:"M9 9l-5 5 5 5M19 9l5 5-5 5M16 6l-4 16"})})}},{label:"E-04",name:"Commit attestation",desc:"SHA, signed identity, files changed, SLSA Level 3 provenance.",Icon:function(){return(0,s.jsxs)("svg",{width:"28",height:"28",viewBox:"0 0 28 28",fill:"none",stroke:"#007DFE",strokeWidth:"1.75",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,s.jsx)("path",{d:"M14 4a10 10 0 0 1 10 10"}),(0,s.jsx)("path",{d:"M4 14a10 10 0 0 1 10-10"}),(0,s.jsx)("path",{d:"M9 14a5 5 0 0 1 10 0"}),(0,s.jsx)("path",{d:"M14 9v5l3 3"}),(0,s.jsx)("path",{d:"M4 18a14 14 0 0 0 7 5"}),(0,s.jsx)("path",{d:"M24 18a14 14 0 0 1-7 5"})]})}},{label:"E-05",name:"Deploy log",desc:"Artifact digest, target env, canary stages, rollback plan, SLO status.",Icon:function(){return(0,s.jsxs)("svg",{width:"28",height:"28",viewBox:"0 0 28 28",fill:"none",stroke:"#007DFE",strokeWidth:"1.75",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,s.jsx)("path",{d:"M20 17a5 5 0 0 0-1-9.9A8 8 0 1 0 7 18h13Z"}),(0,s.jsx)("path",{d:"M11 21l3-3 3 3M14 18v7"})]})}}

1028,{label:"E-06",name:"Access log",desc:"Actor (human or agent), scope, TTL, originating ticket. HIPAA, PCI Req 10.",Icon:function(){return(0,s.jsxs)("svg",{width:"28",height:"28",viewBox:"0 0 28 28",fill:"none",stroke:"#007DFE",strokeWidth:"1.75",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,s.jsx)("circle",{cx:"10",cy:"16",r:"5"}),(0,s.jsx)("path",{d:"M14 12 24 2m-5 5 3 3m-6 0 3 3"})]})}}];function E(){return(0,s.jsxs)("section",{className:"ta-section",children:[(0,s.jsx)("style",{children:`
1029        .ta-section {
1030          position: relative;
1031          background: #ffffff;
1032          padding: 42px 0 96px;
1033          overflow: hidden;
1034        }
1035        .ta-watermark {
1036          position: absolute;
1037          top: -100px;
1038          right: -130px;
1039          width: 500px;
1040          height: 500px;
1041          border-radius: 50%;
1042          border: 3px solid rgba(147,197,253,0.25);
1043          display: flex;
1044          flex-direction: column;
1045          align-items: center;
1046          justify-content: center;
1047          pointer-events: none;
1048          user-select: none;
1049        }
1050        .ta-watermark::before {
1051          content: "";
1052          position: absolute;
1053          inset: 28px;
1054          border-radius: 50%;
1055          border: 2px solid rgba(147,197,253,0.18);
1056        }
1057        .ta-watermark-aicpa {
1058          font-family: var(--font-display, Outfit, sans-serif);
1059          font-size: 72px;
1060          font-weight: 700;
1061          color: rgba(147,197,253,0.30);
1062          line-height: 1;
1063          letter-spacing: -2px;
1064        }
1065        .ta-watermark-div {
1066          width: 160px;
1067          height: 1.5px;
1068          background: rgba(147,197,253,0.22);
1069          margin: 6px 0;
1070        }
1071        .ta-watermark-soc {
1072          font-family: var(--font-display, Outfit, sans-serif);
1073          font-size: 90px;
1074          font-weight: 700;
1075          color: rgba(147,197,253,0.28);
1076          line-height: 1;
1077          letter-spacing: -3px;
1078        }
1079        .ta-watermark-sub {
1080          font-size: 11px;
1081          font-weight: 600;
1082          color: rgba(147,197,253,0.28);
1083          letter-spacing: 2px;
1084          text-transform: uppercase;
1085          margin-top: 8px;
1086        }
1087        .ta-watermark-tm {
1088          position: absolute;
1089          bottom: 54px;
1090          right: 56px;
1091          font-size: 10px;
1092          color: rgba(147,197,253,0.28);
1093          font-weight: 600;
1094        }
1095
1096        .ta-container {
1097          max-width: 1238px;
1098          margin: 0 auto;
1099          padding: 0 24px;
1100          position: relative;
1101          z-index: 1;
1102        }
1103
1104        /* ââ Hero header ââ */
1105        .ta-hero { display: flex; flex-direction: column; gap: 16px; }
1106        .ta-eyebrow {
1107          display: flex; align-items: center; gap: 6px;
1108          font-family: var(--font-sans, Inter, sans-serif);
1109          font-weight: 700; font-size: 11.5px; line-height: 16px;
1110          letter-spacing: 1.32px; text-transform: uppercase; color: #2563EB;
1111        }
1112        .ta-eyebrow-dot {
1113          width: 5px; height: 5px; border-radius: 50%; background: #2563EB; flex-shrink: 0;
1114        }
1115        .ta-heading {
1116          font-family: var(--font-display, Outfit, sans-serif);
1117          font-weight: 500; font-size: clamp(34px, 5.2vw, 60px); line-height: 1.05;
1118          letter-spacing: -0.03em; color: #020617;
1119          margin: 0;
1120        }
1121        .ta-heading em {
1122          font-style: normal; font-weight: 600;
1123          background: linear-gradient(97.13deg, #0059D9 0%, #00C897 92.79%);
1124          -webkit-background-clip: text; background-clip: text; color: transparent;
1125        }
1126        .ta-subtitle {
1127          font-family: var(--font-sans, Inter, sans-serif);
1128          font-weight: 400; font-size: 16px; line-height: 28px;
1129          color: #13244C; max-width: 864px; margin: 0;
1130        }
1131
1132        /* ââ Section row header ââ */
1133        .ta-block { margin-top: 48px; }
1134        .ta-block-head {
1135          display: flex; flex-direction: row; align-items: center;
1136          gap: 16px; margin-bottom: 24px;
1137        }
1138        .ta-block-title {
1139          font-family: var(--font-sans, Inter, sans-serif);
1140          font-weight: 600; font-size: 20px; line-height: 28px;
1141          color: #0F172A; white-space: nowrap; margin: 0;
1142        }
1143        .ta-block-divider { flex: 1; height: 1px; background: #F1F5F9; }
1144
1145        /* ââ Framework cards ââ */
1146        .ta-fw-row {
1147          display: grid;
1148          grid-template-columns: repeat(5, 1fr);
1149          gap: 16px;
1150        }
1151        .ta-fw-card {
1152          background: #ffffff;
1153          border: 1px solid #E2E8F0;
1154          border-radius: 12px;
1155          padding: 20px;
1156          display: flex;
1157          flex-direction: row;
1158          align-items: center;
1159          gap: 16px;
1160          box-shadow: 0px 4px 6px -1px rgba(0,0,0,0.05), 0px 2px 4px -2px rgba(0,0,0,0.05);
1161        }
1162        .ta-fw-icon {
1163          width: 50px; height: 50px; flex-shrink: 0;
1164          background: linear-gradient(135deg, #F0FDFA 0%, #FFFFFF 100%);
1165          border: 1px solid #F0FDFA;

1166          border-radius: 8px;
1167          display: flex; align-items: center; justify-content: center;
1168        }
1169        .ta-fw-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
1170        .ta-fw-name-row { display: flex; align-items: center; gap: 8px; }
1171        .ta-fw-name {
1172          font-family: var(--font-sans, Inter, sans-serif);
1173          font-weight: 700; font-size: 16px; line-height: 24px; color: #0F172A;
1174          white-space: nowrap;
1175        }
1176        .ta-fw-live {
1177          display: flex; align-items: center; gap: 4px;
1178          font-family: var(--font-sans, Inter, sans-serif);
1179          font-weight: 700; font-size: 10px; line-height: 15px; color: #007DFE;
1180        }
1181        .ta-fw-live-dot { width: 6px; height: 6px; border-radius: 50%; background: #007DFE; flex-shrink: 0; }
1182        .ta-fw-sub {
1183          font-family: var(--font-sans, Inter, sans-serif);
1184          font-weight: 400; font-size: 12px; line-height: 16px; color: #94A3B8;
1185        }
1186
1187        /* ââ Evidence cards ââ */
1188        .ta-ev-grid {
1189          display: grid;
1190          grid-template-columns: repeat(3, 1fr);
1191          gap: 24px;
1192        }
1193        .ta-ev-card {
1194          background: rgba(101,172,246,0.10);
1195          border: 1px solid #E2E8F0;
1196          border-radius: 16px;
1197          padding: 32px;
1198        }
1199        .ta-ev-head { display: flex; flex-direction: row; align-items: center; gap: 12px; }
1200        .ta-ev-icon {
1201          width: 56px; height: 56px; flex-shrink: 0;
1202          background: #FFFFFF;
1203          border: 1px solid #D3E9FF;
1204          border-radius: 12px;
1205          display: flex; align-items: center; justify-content: center;
1206        }
1207        .ta-ev-name {
1208          font-family: var(--font-sans, Inter, sans-serif);
1209          font-weight: 700; font-size: 20px; line-height: 28px; color: #0F172A;
1210        }
1211        .ta-ev-desc {
1212          font-family: var(--font-sans, Inter, sans-serif);
1213          font-weight: 400; font-size: 14px; line-height: 23px; color: #64748B;
1214          margin-top: 12px;
1215        }
1216
1217        /* ââ Responsive ââ */
1218        @media (max-width: 1024px) {
1219          .ta-fw-row { grid-template-columns: repeat(3, 1fr); }
1220        }
1221        @media (max-width: 768px) {
1222          .ta-fw-row { grid-template-columns: repeat(2, 1fr); }
1223          .ta-ev-grid { grid-template-columns: repeat(2, 1fr); }
1224          .ta-watermark { width: 280px; height: 280px; top: -40px; right: -80px; opacity: 0.5; }
1225          .ta-watermark-aicpa { font-size: 42px; }
1226          .ta-watermark-soc { font-size: 54px; }
1227          .ta-watermark-sub { font-size: 9px; }
1228        }
1229        @media (max-width: 480px) {
1230          .ta-fw-row { grid-template-columns: 1fr; }
1231          .ta-ev-grid { grid-template-columns: 1fr; }
1232          .ta-watermark { display: none; }
1233        }
1234      `}),(0,s.jsxs)("div",{className:"ta-watermark","aria-hidden":"true",children:[(0,s.jsx)("span",{className:"ta-watermark-aicpa",children:"AICPA"}),(0,s.jsx)("div",{className:"ta-watermark-div"}),(0,s.jsx)("span",{className:"ta-watermark-soc",children:"SOC"}),(0,s.jsx)("span",{className:"ta-watermark-sub",children:"Service Organizations"}),(0,s.jsx)("span",{className:"ta-watermark-tm",children:"â¢"})]}),(0,s.jsxs)("div",{className:"ta-container",children:[(0,s.jsxs)("div",{className:"ta-hero",children:[(0,s.jsxs)("div",{className:"ta-eyebrow",children:[(0,s.jsx)("span",{className:"ta-eyebrow-dot"}),"TRUST & AUDIT"]}),(0,s.jsxs)("h2",{className:"ta-heading",children:["Hire the team in ",(0,s.jsx)("em",{children:"fourteen days."})]}),(0,s.jsx)("p",{className:"ta-subtitle",children:"No credit card. Two weeks on the Team tier with one Orchestrator and two specialists. Bring your GitHub, your cloud, your API keys. BrightWorks writes the SOC\xa02 evidence as you ship."})]}),(0,s.jsxs)("div",{className:"ta-block",children:[(0,s.jsxs)("div",{className:"ta-block-head",children:[(0,s.jsx)("h3",{className:"ta-block-title",children:"Framework coverage"}),(0,s.jsx)("div",{className:"ta-block-divider"})]}),(0,s.jsx)("div",{className:"ta-fw-row",children:N.map(e=>(0,s.jsxs)("div",{className:"ta-fw-card",children:[(0,s.jsx)("div",{className:"ta-fw-icon",children:(0,s.jsx)(e.Icon,{})}),(0,s.jsxs)("div",{className:"ta-fw-info",children:[(0,s.jsxs)("div",{className:"ta-fw-name-row",children:[(0,s.jsx)("span",{className:"ta-fw-name",children:e.name}),(0,s.jsxs)("span",{className:"ta-fw-live",children:[(0,s.jsx)("span",{className:"ta-fw-live-d

1234ot"}),"LIVE"]})]}),(0,s.jsx)("span",{className:"ta-fw-sub",children:e.sub})]})]},e.name))})]}),(0,s.jsxs)("div",{className:"ta-block",children:[(0,s.jsxs)("div",{className:"ta-block-head",children:[(0,s.jsx)("h3",{className:"ta-block-title",children:"Evidence generated automatically"}),(0,s.jsx)("div",{className:"ta-block-divider"})]}),(0,s.jsx)("div",{className:"ta-ev-grid",children:F.map(e=>(0,s.jsxs)("div",{className:"ta-ev-card",children:[(0,s.jsxs)("div",{className:"ta-ev-head",children:[(0,s.jsx)("div",{className:"ta-ev-icon",children:(0,s.jsx)(e.Icon,{})}),(0,s.jsx)("span",{className:"ta-ev-name",children:e.name})]}),(0,s.jsx)("p",{className:"ta-ev-desc",children:e.desc})]},e.label))})]})]})]})}var A=r(8500),C=r.n(A);let B=()=>(0,s.jsxs)("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":!0,children:[(0,s.jsx)("line",{x1:"5",y1:"12",x2:"19",y2:"12"}),(0,s.jsx)("polyline",{points:"12 5 19 12 12 19"})]}),M=({showConnect:e=!0})=>(0,s.jsx)("section",{"aria-labelledby":"get-started-heading",className:"relative w-full",style:{background:"linear-gradient(157.23deg, #F8FAFC 0%, #EFF6FF 100%)"},children:(0,s.jsxs)("div",{className:"mx-auto flex w-full max-w-[1280px] flex-col items-center gap-6 px-4 py-[60px] text-center sm:px-6 md:px-10 md:py-[80px]",children:[(0,s.jsxs)("div",{className:"relative flex h-[18px] items-center",children:[(0,s.jsx)("span",{"aria-hidden":!0,className:"absolute left-0 top-1/2 h-[5px] w-[5px] -translate-y-1/2 rounded-[2.5px] bg-[#2563EB]",style:{boxShadow:"0 0 12px #3B82F6"}}),(0,s.jsx)("span",{className:"pl-[14px] font-sans text-[11.5px] font-semibold uppercase leading-[18px] tracking-[1.84px] text-[#2563EB]",children:"Get Started"})]}),(0,s.jsxs)("h2",{id:"get-started-heading",className:"font-display text-[32px] font-medium leading-[1] tracking-[-0.96px] text-[#020617] sm:text-[44px] sm:tracking-[-1.32px] md:text-[60px] md:tracking-[-1.8px] lg:text-[76px] lg:tracking-[-2.28px]",children:["The foundation for",(0,s.jsx)("br",{}),"the"," ",(0,s.jsx)("span",{className:"bg-clip-text font-semibold text-transparent",style:{backgroundImage:"linear-gradient(97.13deg, #0059D9 0%, #00C897 92.79%)"},children:"autonomous enterprise."})]}),e&&(0,s.jsx)("p",{className:"mt-2 font-display text-[20px] font-medium leading-[1.55] tracking-[-0.2px] text-[#0F766E] md:text-[24px] md:leading-[37.2px] md:tracking-[-0.24px]",children:"Let's Connect."}),(0,s.jsx)("p",{className:"max-w-[560px] font-sans text-[16px] font-normal leading-[26px] text-[#334155] md:text-[16.5px] md:leading-[27px]",children:"Let's explore how Brightcone can transform your enterprise workflows with intelligent AI agents â built around how you actually operate."}),(0,s.jsx)("div",{className:"mt-6 flex w-full items-center justify-center",children:(0,s.jsxs)(C(),{href:"https://calendly.com/naresh-vemparala-brightcone/30min",target:"_blank",rel:"noopener noreferrer",className:"inline-flex h-[54px] w-full items-center justify-center gap-2 rounded-[10px] bg-[#020617] px-6 font-sans text-[14px] font-semibold leading-[22px] text-white shadow-[0_1px_2px_rgba(2,6,23,0.08)] transition-all hover:opacity-90 active:scale-[0.98] sm:w-auto sm:min-w-[184px]",children:["Request a Demo",(0,s.jsx)(B,{})]})})]})});function L(){return(0,s.jsxs)("div",{className:"bwp-root",children:[(0,s.jsx)("style",{children:`
1235        .bwp-root {
1236          background: linear-gradient(180deg, #EEF2F9 0%, #E8EEF6 30%, #EDF1F8 70%, #E9EFF7 100%);
1237        }
1238        .bwp-root .bw-hero { background: transparent; }
1239        .bwp-root .bw-hero-mesh {
1240          background:
1241            radial-gradient(ellipse 80% 60% at 20% 30%, rgba(61,217,168,0.10), transparent 60%),
1242            radial-gradient(ellipse 60% 60% at 90% 80%, rgba(167,139,250,0.10), transparent 60%);
1243        }
1244        .bwp-root .bwa2-section { background: transparent !important; }
1245        .bwp-root .agt-section { background: transparent !important; }
1246        .bwp-root .cl-section { background: transparent !important; }
1247        .bwp-root .imp2-section { background: transparent !important; }
1248        .bwp-root .ta-section { background: transparent !important; }
1249        .bwp-root footer {
1250          background: linear-gradient(180deg, #E9EFF7 0%, #E4EAF5 60%, #DFE7F2 100%) !important;
1251          border-top: none !important;
1252        }
1253      `}),(0,s.jsx)(i.default,{}),(0,s.jsxs)("main",{children:[(0,s.jsx)(D,{}),(0,s.jsx)(d,{}),(0,s.jsx)(g,{}),(0,s.jsx)(f,{}),(0,s.jsx)(j,{}),(0,s.jsx)(E,{}),(0,s.jsx)(M,{})]}),(0,s.jsx)(o.default,{})]})}function D(){let e=(0,t.useRef)(null),a=(0,t.useRef)(null),[r,i]=(0,t.useState)(1),[o,n]=(0,t.useState)(void 0);return(0,t.useEffect)(()=>{let r=e.current,s=a.current;if(!r||!s)return;let t=()=>{let e=Math.min(1,r.offsetWidth/560);i(e),n(s.offsetHeight*e)},o=new ResizeObserver(t);return o.observe(r),t(),()=>o.disconnect()},[]),(0,s.jsxs)("section",{className:"bw-hero",children:[(0,s.jsx)("div",{className:"bw-hero-mesh","aria-hidden":!0}),(0,s.jsx)("div",{className:"bw-hero-grid","aria-hidden":!0}),(0,s.jsxs)("div",{className:"bw-hero-inner",children:[(0,s.jsxs)("div",{className:"bw-hero-content",children:[(0,s.jsxs)("div",{className:"bw-eyebrow",children:[(0,s.jsx)("span",{className:"bw-eyebrow-dot","aria-hidden":!0}),(0,s.jsx)("span",{children:"BrightWorks - Multi Agent Coding Platform"})]}),(0,s.jsxs)("h1",{className:"bw-title",children:["Your engineering"," ",(0,s.jsx)("br",{}),(0,s.jsx)("span",{className:"bw-title-grad",children:"AI workforce."})]}),(0,s.jsx)("p",{className:"bw-lede",children:"BrightWorks orchestrates a team of role-specialized AI agents â Orchestrator, Frontend, Backend, QA, DevOps, Security â that build, review, and ship real production software. Every step audited. Every deploy approved by a human."}),(0,s.jsx)("div",{className:"bw-ctas",children:(0,s.jsx)(C(),{href:"https://calendly.com/naresh-vemparala-brightcone/30min",target:"_blank",rel:"noopener noreferrer",className:"bw-btn-primary",children:"Request a Demo"})})]}),(0,s.jsx)("div",{ref:e,className:"bw-mock-scroll",style:{height:o},children:(0,s.jsxs)("aside",{ref:a,className:"bw-mock",style:{transformOrigin:"top left",transform:r<1?`scale(${r})`:void 0},children:[(0,s.jsxs)("div",{className:"bw-mock-bar",children:[(0,s.jsx)("span",{className:"bw-dot r"}),(0,s.jsx)("span",{className:"bw-dot y"}),(0,s.jsx)("span",{className:"bw-dot g"}),(0,s.jsx)("span",{className:"bw-mock-url",children:"brightworks.brightcone.ai/workspace/proj-atlas"}),(0,s.jsx)("span",{className:"bw-mock-live",children:"LIVE"})]}),(0,s.jsxs)("div",{className:"bw-mock-body",children:[(0,s.jsxs)("div",{className:"bw-term",children:[(0,s.jsx)("span",{className:"bw-tl muted",children:"$ session.start --project acme-portal"}),(0,s.jsx)("span",{className:"bw-tl ok",children:"â Orchestrator (Sam \xb7 opus) booted"}),(0,s.jsx)("span",{className:"bw-tl ok",children:"â 4 specialists ready \xb7 isolated VMs"}),(0,s.jsx)("span",{className:"bw-tl muted",children:"\xa0"}),(0,s.jsx)("span",{className:"bw-tl user",children:"âº Add SSO via Entra ID"}),(0,s.jsx)("span",{className:"bw-tl muted",children:"\xa0"}),(0,s.jsx)("span",{className:"bw-tl",children:"[sam] decomposing into 6 tasksâ¦"}),(0,s.jsx)("span",{className:"bw-tl",children:"[sam] task graph ready \xb7 awaiting plan"}),(0,s.jsx)("span",{className:"bw-tl gate",children:"â¸ GATE 1 \xb7 review at /plan/142"}),(0,s.jsx)("span",{className:"bw-tl muted",children:"\xa0"}),(0,s.jsx)("span",{className:"bw-tl ok",children:"â plan approved \xb7 2m 14s"}),(0,s.jsx)("span",{className:"bw-tl",children:"[alex] frontend: sign-in UIâ¦"}),(0,s.jsx)("span",{className:"bw-tl",children:"[jordan] backend: OIDC clientâ¦"}),(0,s.jsx)("span",{className:"bw-tl ok",children:"â 6 commits \xb7 0 conflicts"}),(0,s.jsx)("span",{className:"bw-tl muted",children:"\xa0"}),(0,s.jsxs)("span",{className:"bw-tl user",children:["âº ",(0,s.jsx)("span",{className:"bw-cursor","aria-hidden":!0})]})]}),(0,s.jsxs)("div",{className:"bw-pane",children:[(0,s.jsxs)("div",{className:"bw-pane-head",children:[(0,s.jsxs)("div",{className:"bw-pane-title",children:["Sprint: ",(0,s.jsx)("em",{children:"SSO Integration"})]}),(0,s.jsx)("span",{className:"bw-pane-meta",children:"4 agents active"})]}),(0,s.jsx)("div",{className:"bw-pill",children:"Live \xb7 proj-atlas"}),(0,s.jsx)("div",{className:"bw-agents",children:[{initials:"SO",name:"Sam",role:"ORCH",active:!0,cls:""},{initials:"AL",name:"Alex",role:"FE",active:!0,cls:"b1"},{initials:"JO",name:"Jordan",role:"BE",active:!1,cls:"b2"},{initials:"RI",name:"Riley",role:"QA",active:!0,cls:"b3"}].map(e=>(0,s.jsxs)("div",{className:`bw-agent${e.active?" active":""}`,children:[(0,s.jsx)("span",{className:`bw-av ${e.cls}`,children:e.initials}),(0,s.jsx)("span",{className:"bw-name",children:e.name}),(0,s.jsx)("span",{className:"bw-role",children:e.role}),(0,s.jsx)("span",{className:`bw-status-dot${!e.active?" idle":""}`})]},e.name))}),(0,s.jsxs)("div",{className:"bw-stats",children:[(0,s.jsxs)("div",{children:[(0,s.jsx)("div",{className:"bw-stat-n",children:"61"}),(0,s.jsx)("div",{className:"bw-stat-l",children:"Tasks"})]}),(0,s.jsxs)("div",{children:[(0,s.jsx)("div",{className:"bw-stat-n",children:"134"}),(0,s.jsx)("div",{className:"bw-stat-l",children:"Commits"})]}),(0,s.jsxs)("div",{children:[(0,s.jsx)("div",{className:"bw-stat-n green",children:"0"}),(0,s.jsx)("div",{className:"bw-stat-l",children:"Rollbacks"})]})]})]})]})]})})]}),(0,s.jsx)("style",{children:`
1254        .bw-hero {
1255          --navy-deepest: #061328;
1256          --navy-deep:    #020617;
1257          --mint:         #2CC9A4;
1258          --border:       #E5EBF4;
1259          --t2:           #334155;
1260          --t3:           #64748b;
1261          --font-mono:    'JetBrains Mono', ui-monospace, monospace;
1262
1263          position: relative;
1264          overflow: hidden;
1265          padding: 140px 48px 80px;
1266          background: #F0F4FA;
1267          font-family: var(--font-sans, Inter, sans-serif);
1268        }
1269
1270        /* Gradient from index.html hero */
1271        .bw-hero-mesh {
1272          position: absolute; inset: 0; pointer-events: none;
1273          background:
1274            radial-gradient(ellipse 80% 60% at 20% 30%, rgba(61,217,168,0.10), transparent 60%),

1275            radial-gradient(ellipse 60% 60% at 90% 80%, rgba(167,139,250,0.10), transparent 60%),
1276            linear-gradient(180deg, #F0F4FA 0%, #E8EEF6 100%);
1277        }
1278        /* Line grid from brightcone-landing-v4 hero */
1279        .bw-hero-grid {
1280          position: absolute; inset: 0; pointer-events: none;
1281          background-image:
1282            linear-gradient(rgba(20,47,92,0.04) 1px, transparent 1px),
1283            linear-gradient(90deg, rgba(20,47,92,0.04) 1px, transparent 1px);
1284          background-size: 56px 56px;
1285          mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 30%, transparent 100%);
1286          -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 30%, transparent 100%);
1287        }
1288
1289        /* Layout */
1290        .bw-hero-inner {
1291          position: relative; max-width: 1200px; margin: 0 auto;
1292          display: grid; grid-template-columns: 1fr 1.05fr;
1293          gap: 56px; align-items: center;
1294        }
1295        .bw-hero-content { max-width: 580px; }
1296
1297        /* Eyebrow â matches home page style */
1298        .bw-eyebrow {
1299          display: inline-flex; align-items: center; gap: 8px;
1300          margin-bottom: 28px;
1301        }
1302        .bw-eyebrow-dot {
1303          width: 5px; height: 5px; border-radius: 50%;
1304          background: #2563EB; flex-shrink: 0;
1305          box-shadow: 0 0 12px #3B82F6;
1306        }
1307        .bw-eyebrow span:last-child {
1308          font-size: 11.5px; font-weight: 600;
1309          text-transform: uppercase; letter-spacing: 1.84px;
1310          color: #2563EB;
1311        }
1312
1313        /* Title â uses Outfit (--font-display) like home page */
1314        .bw-title {
1315          font-family: var(--font-display, Outfit, sans-serif);
1316          font-weight: 500;
1317          font-size: clamp(34px, 5.2vw, 60px);
1318          line-height: 1.05;
1319          letter-spacing: -0.03em;
1320          color: #020617;
1321          margin-bottom: 21px;
1322        }
1323        .bw-title-grad {
1324          background: linear-gradient(97.13deg, #0059D9 0%, #00C897 92.79%);
1325          -webkit-background-clip: text; background-clip: text; color: transparent;
1326          font-weight: 600;
1327        }
1328
1329        /* Lede */
1330        .bw-lede {
1331          font-size: 18px; color: var(--t2);
1332          line-height: 30px; max-width: 540px; margin-bottom: 38px;
1333        }
1334
1335        /* CTA â exactly matches home page "Request a Demo" */
1336        .bw-ctas { margin-bottom: 38px; }
1337        .bw-btn-primary {
1338          display: inline-flex; align-items: center; justify-content: center;
1339          height: 54px; padding: 0 28px;
1340          font-size: 14px; font-weight: 600; line-height: 22px;
1341          text-decoration: none; border-radius: 10px;
1342          background: #020617; color: white;
1343          box-shadow: 0 4px 12px rgba(2,6,23,0.15);
1344          transition: opacity 0.2s;
1345          white-space: nowrap;
1346        }
1347        .bw-btn-primary:hover { opacity: 0.90; }
1348
1349        /* Trust â client logos */
1350        .bw-trust { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
1351        .bw-trust-label {
1352          font-size: 12px; font-weight: 600; color: var(--t3);
1353          text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap;
1354        }
1355        .bw-logos { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
1356        .bw-logo-wrap {
1357          display: flex; align-items: center; justify-content: center;
1358          height: 28px; opacity: 0.7; transition: opacity 0.2s;
1359        }
1360        .bw-logo-wrap:hover { opacity: 1; }
1361        .bw-logo-img { object-fit: contain; height: 100%; width: auto; max-width: 80px; }
1362        .bw-logo-blend { mix-blend-mode: multiply; }
1363
1364        /* Mockup wrapper â scales the card to fit any viewport */
1365        .bw-mock-scroll {
1366          overflow: hidden;
1367          width: 100%;
1368        }
1369
1370        /* Mockup */
1371        .bw-mock {
1372          width: 560px;
1373          background: var(--navy-deepest);
1374          border-radius: 18px; overflow: hidden;
1375          box-shadow: none;
1376          border: 1px solid rgba(255,255,255,0.06);
1377        }
1378        .bw-mock-bar {
1379          display: flex; align-items: center; gap: 8px;
1380          padding: 12px 16px;
1381          background: rgba(255,255,255,0.03);
1382          border-bottom: 1px solid rgba(255,255,255,0.06);
1383        }
1384        .bw-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
1385        .bw-dot.r { background: #FF5F57; }
1386        .bw-dot.y { background: #FEBC2E; }
1387        .bw-dot.g { background: #28C840; }
1388        .bw-mock-url {
1389          margin-left: 10px; flex: 1;
1390          background: rgba(255,255,255,0.04); border-radius: 5px;
1391          padding: 4px 12px;
1392          font-family: var(--font-mono); font-size: 11px;
1393          color: rgba(255,255,255,0.45); text-align: center;
1394        }
1395        .bw-mock-live {
1396          font-family: var(--font-mono); font-size: 10px; font-weight: 600;
1397          letter-spacing: 0.08em; color: var(--mint);
1398          display: flex; align-items: center; gap: 6px;
1399        }
1400        .bw-mock-live::before {
1401          content: ''; width: 6px; height: 6px; border-radius: 50%;
1402          background: var(--mint);
1403          animation: bwPulse 1.8s infinite;
1404        }
1405        @keyframes bwPulse {
1406          0%   { box-shadow: 0 0 0 0 rgba(44,201,164,0.55); }
1407          70%  { box-shadow: 0 0 0 8px rgba(44,201,164,0); }
1408          100% { box-shadow: 0 0 0 0 rgba(44,201,164,0); }
1409        }
1410
1411        .bw-mock-body { display: grid; grid-template-columns: 1.1fr 1fr; min-height: 400px; }
1412        .bw-term {
1413          padding: 18px 18px 24px;
1414          font-family: var(--font-mono); font-size: 12px;
1415          line-height: 1.85; color: rgba(255,255,255,0.85);
1416          background: var(--navy-deepest);
1417          overflow: hidden;
1418        }
1419        .bw-tl { display: block; }
1420        .bw-tl.muted { color: rgba(255,255,255,0.35); }
1421        .bw-tl.ok    { color: var(--mint); }
1422        .bw-tl.gate  { color: #FCB94A; }
1423        .bw-tl.user  { color: #60a5fa; }
1424        .bw-cursor {
1425          display: inline-block; width: 8px; height: 14px;
1426          background: var(--mint); vertical-align: -2px;
1427          animation: bwBlink 1.05s steps(2) infinite;
1428        }
1429        @keyframes bwBlink { 0%,49%{opacity:1} 50%,100%{opacity:0}

1429 }
1430
1431        .bw-pane {
1432          padding: 18px 20px;
1433          border-left: 1px solid rgba(255,255,255,0.06);
1434          background: rgba(255,255,255,0.015);
1435        }
1436        .bw-pane-head {
1437          display: flex; justify-content: space-between; align-items: center;
1438          margin-bottom: 12px;
1439        }
1440        .bw-pane-title {
1441          font-family: var(--font-display, Outfit, sans-serif);
1442          font-size: 16px; font-weight: 600; color: white; letter-spacing: -0.015em;
1443        }
1444        .bw-pane-title em { color: var(--mint); font-style: italic; font-weight: 400; }
1445        .bw-pane-meta {
1446          font-family: var(--font-mono); font-size: 9px;
1447          letter-spacing: 0.1em; text-transform: uppercase;
1448          color: rgba(255,255,255,0.4); font-weight: 600;
1449        }
1450        .bw-pill {
1451          display: inline-flex; align-items: center; gap: 6px;
1452          padding: 3px 10px; margin-bottom: 14px;
1453          background: rgba(44,201,164,0.12); border: 1px solid rgba(44,201,164,0.25);
1454          border-radius: 99px; font-size: 10px; font-weight: 700;
1455          color: var(--mint); font-family: var(--font-mono);
1456          letter-spacing: 0.08em; text-transform: uppercase;
1457        }
1458        .bw-pill::before {
1459          content: ''; width: 6px; height: 6px;
1460          border-radius: 50%; background: var(--mint);
1461          animation: bwPulse 1.8s infinite;
1462        }
1463
1464        .bw-agents { display: flex; flex-direction: column; gap: 6px; }
1465        .bw-agent {
1466          display: flex; align-items: center; gap: 10px;
1467          padding: 7px 10px; border-radius: 8px;
1468          border: 1px solid rgba(255,255,255,0.05); font-size: 12px;
1469        }
1470        .bw-agent.active { background: rgba(44,201,164,0.08); border-color: rgba(44,201,164,0.25); }
1471        .bw-av {
1472          width: 26px; height: 26px; border-radius: 7px;
1473          background: linear-gradient(135deg, #1E3A8A, #2CC9A4);
1474          color: white; font-size: 9px; font-weight: 700;
1475          display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
1476        }
1477        .bw-av.b1 { background: linear-gradient(135deg, #1E5BC6, #60a5fa); }
1478        .bw-av.b2 { background: linear-gradient(135deg, #0059D9, #00C897); }
1479        .bw-av.b3 { background: linear-gradient(135deg, #2CC9A4, #60a5fa); }
1480        .bw-name { font-weight: 600; color: white; flex: 1; font-size: 12px; }
1481        .bw-role {
1482          font-family: var(--font-mono); font-size: 9px;
1483          color: rgba(255,255,255,0.40); font-weight: 600; letter-spacing: 0.08em;
1484        }
1485        .bw-status-dot {
1486          width: 8px; height: 8px; border-radius: 50%; background: var(--mint);
1487          margin-left: 4px; flex-shrink: 0;
1488        }
1489        .bw-status-dot.idle { background: #FFD66B; }
1490
1491        .bw-stats {
1492          display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
1493          margin-top: 16px; padding-top: 16px;
1494          border-top: 1px solid rgba(255,255,255,0.06);
1495        }
1496        .bw-stat-n {
1497          font-family: var(--font-display, Outfit, sans-serif);
1498          font-weight: 700; font-size: 26px;
1499          color: #60a5fa; line-height: 1; letter-spacing: -0.03em;
1500        }
1501        .bw-stat-n.green { color: var(--mint); }
1502        .bw-stat-l {
1503          font-size: 9px; font-weight: 600; font-family: var(--font-mono);
1504          color: rgba(255,255,255,0.40); letter-spacing: 0.1em;
1505          text-transform: uppercase; margin-top: 3px;
1506        }
1507
1508        /* Responsive */
1509        @media (max-width: 1080px) {
1510          .bw-hero-inner { grid-template-columns: 1fr; gap: 48px; }
1511          .bw-hero-content { max-width: 100%; }
1512          .bw-hero { padding: 120px 24px 80px; }
1513        }
1514        @media (max-width: 640px) {
1515          .bw-hero { padding: 110px 16px 40px; }
1516        }
1517      `})]})}}},e=>{e.O(0,[772,756,90,441,794,358],()=>e(e.s=2828)),_N_E=e.O()}]);

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.