1import{d as f,j as r}from"./vendor-react-CHlj1UOJ.js";import{d as g,D as h}from"./deckCss-BVSK-U50.js";const e={bg:"#121110",surface:"#1C1917",border:"#282524",borderSt:"#44403C",text:"#F1F0EE",textHi:"#fafaf9",textDim:"#A6A09D",textMute:"#78726E",lime:"#D0EC1A",limeDark:"#07401A",purple:"#A595FF",lbg:"#fafaf9",lborder:"#e5e3df",ltext:"#07401a",laccent:"#8caa25",lbody:"#6b6962",lmute:"#9a9890"},p=`<svg width="72" height="28" viewBox="0 0 49 20" fill="none" xmlns="http://www.w3.org/2000/svg"> 2<path d="M29.6499 20C27.3536 20 25.8721 19.2593 24.835 18.4444C24.6128 18.5926 24.4647 18.7407 24.1684 18.8889C22.1684 19.9259 19.9462 20 19.1313 20C15.8721 20 14.1684 18.5926 13.3536 17.4074C13.2795 17.3333 13.2054 17.1852 13.1313 17.1111C11.6499 18.8889 9.72393 20 6.83504 20C4.31652 20 2.24245 19.037 1.05726 17.3333C-0.202 15.4815 -0.350148 12.963 0.686889 10.2963C2.0943 6.74074 5.27948 4.59259 9.20541 4.59259C9.27948 4.59259 9.27948 4.59259 9.35356 4.59259C9.35356 4.51852 9.35356 4.37037 9.35356 4.2963C9.27948 3.03704 10.0943 1.92593 11.2795 1.55556L14.761 0.222222C15.1313 0.0740741 15.5017 0 15.8721 0C16.9832 0 18.0202 0.592593 18.5387 1.62963L20.0202 4.66667C20.4647 4.59259 20.9091 4.59259 21.3536 4.59259C23.5017 4.59259 25.2054 5.33333 26.3165 6.66667C28.0202 5.33333 30.1684 4.59259 32.5387 4.59259C33.798 4.59259 34.9832 4.81481 35.8721 5.25926C36.1684 5.40741 36.4647 5.55556 36.6869 5.77778C38.0202 5.03704 39.5758 4.59259 41.2795 4.59259C43.7239 4.59259 45.798 5.55556 46.9832 7.25926C48.2424 9.03704 48.4647 11.4815 47.6499 13.9259C46.3165 17.6296 42.9091 20 38.9091 20C37.2054 20 35.6499 19.5556 34.4647 18.6667C34.2425 18.8889 33.9461 19.1111 33.6499 19.1852C32.5387 19.7037 31.1313 19.9259 29.7239 20H29.6499Z" fill="${e.lime}"/> 3<path d="M39.3532 15.1113C37.7235 15.1113 37.5013 13.5557 37.9457 12.0002C38.3161 10.7409 39.2791 9.48166 40.6865 9.48166C42.3902 9.48166 42.5383 11.1854 42.0198 12.6668C41.7235 13.9261 40.7606 15.1113 39.3532 15.1113ZM38.9087 17.4076C41.7235 17.4076 44.168 15.852 45.205 13.0372C46.242 10.0743 45.0569 7.18537 41.2791 7.18537C38.242 7.18537 35.8717 9.11129 34.9828 11.6298C34.0198 14.4446 35.0569 17.4076 38.9087 17.4076ZM29.6495 17.4076C30.7606 17.4076 31.8717 17.1854 32.6865 16.815C32.9828 16.0743 32.9828 15.3335 32.7606 14.5928C32.242 14.815 31.4272 15.0372 30.6865 15.0372C28.5383 15.0372 28.3902 13.4817 28.8346 12.1483C29.3532 10.7409 30.6124 9.55574 32.6124 9.55574C33.1309 9.55574 33.6495 9.62981 33.9457 9.85203C34.4643 9.11129 34.8346 8.37055 34.9087 7.62981C34.4643 7.40759 33.6495 7.25944 32.6124 7.25944C29.2791 7.25944 26.6865 9.18537 25.7976 11.852C24.8346 14.2965 25.5013 17.4076 29.6495 17.4076ZM18.242 11.3335C18.8346 10.0743 19.7235 9.33351 20.8346 9.33351C21.8717 9.33351 22.0198 9.92611 21.8717 10.3706C21.6495 10.9631 20.8346 11.3335 18.242 11.3335ZM19.205 17.4076C20.3161 17.4076 21.7976 17.1854 23.0569 16.5928C23.2791 15.9261 23.2791 15.1854 22.9828 14.4446C22.168 14.815 21.0569 15.1113 20.0198 15.1113C18.5383 15.1113 17.7235 14.5928 17.7235 13.4076C21.7976 13.4817 23.9457 12.7409 24.6865 10.9631C25.3532 9.11129 24.168 7.25944 21.3532 7.25944C18.3161 7.25944 16.0939 9.40759 15.205 11.778C14.3902 14.2224 14.9087 17.4076 19.205 17.4076ZM6.90871 17.4076C9.72352 17.4076 11.3532 16.1483 13.205 12.1483C14.242 10.0002 15.0569 7.85203 16.0939 5.70388L17.2791 6.07425C17.5754 6.14833 17.7976 6.00018 17.6495 5.70388L16.242 2.74092C16.0198 2.59277 15.7976 2.59277 15.6495 2.59277L12.0939 3.92611C11.7976 4.00018 11.7976 4.29648 12.0939 4.37055L13.205 4.815C12.3161 6.815 11.2791 9.77796 10.3902 11.6298C9.42723 13.7039 8.90871 15.1854 7.27908 15.1854C5.64945 15.1854 5.35315 13.9261 6.01982 12.0743C6.83464 9.92611 8.16797 9.33351 9.72352 9.77796C10.168 9.18537 10.4643 8.29648 10.6124 7.48166C10.168 7.33351 9.64945 7.33351 9.20501 7.33351C6.68649 7.33351 4.24204 8.59277 3.20501 11.3335C1.87167 14.6668 3.13093 17.4076 6.90871 17.4076Z" fill="${e.bg}"/> 4</svg>`,a="@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap');",s=` 5 * { margin:0; padding:0; box-sizing:border-box; } 6 body { 7 font-family:'Inter',-apple-system,system-ui,sans-serif; 8 width:100vw; height:100vh; overflow:hidden; 9 background:${e.bg}; color:${e.text}; 10 -webkit-font-smoothing:antialiased; 11 } 12 ::selection { background:${e.lime}; color:${e.limeDark}; } 13`,n=` 14 * { margin:0; padding:0; box-sizing:border-box; } 15 body { 16 font-family:'Inter',-apple-system,system-ui,sans-serif; 17 width:100vw; height:100vh; overflow:hidden; 18 background:${e.lbg}; color:${e.ltext}; 19 -webkit-font-smoothing:antialiased; 20 } 21 ::selection { background:${e.laccent}; color:#fff; } 22`,i=` 23 @keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} } 24 @keyframes fadeDown { from{opacity:0;transform:translateY(-14px)} to{opacity:1;transform:translateY(0)} } 25 @keyframes fadeIn { from{opacity:0}
25 to{opacity:1} } 26 @keyframes orbA { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-40px,48px)} } 27 @keyframes orbB { 0%,100%{transform:translate(0,0)} 50%{transform:translate(48px,-40px)} } 28`,x=` 29 .spine { font-family:'Instrument Serif',serif; font-weight:400; 30 font-size:clamp(52px,5.2vw,82px); line-height:1.04; letter-spacing:-.028em; 31 color:${e.text}; max-width:1400px; margin-bottom:32px; 32 opacity:0; animation:fadeUp .7s ease forwards .2s; } 33 .spine em { color:${e.lime}; font-style:italic; } 34`,m=` 35 .eyebrow { font-family:'JetBrains Mono',monospace; font-size:13px; 36 letter-spacing:.22em; text-transform:uppercase; color:${e.lime}; 37 margin-bottom:26px; opacity:0; animation:fadeDown .6s ease forwards .1s; } 38`,c=` 39 .eyebrow { font-family:'JetBrains Mono',monospace; font-size:13px; 40 letter-spacing:.22em; text-transform:uppercase; color:${e.laccent}; 41 margin-bottom:26px; opacity:0; animation:fadeDown .6s ease forwards .1s; } 42`,l=(t,o)=>` 43 body::before { content:""; position:absolute; width:680px; height:680px; border-radius:50%; 44 background:${t}; filter:blur(280px); opacity:0.06; ${o} pointer-events:none; } 45`,b=` 46 .embed-slot { border:1.5px dashed ${e.borderSt}; border-radius:16px; 47 display:flex; align-items:center; justify-content:center; text-align:center; 48 font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.1em; text-transform:uppercase; 49 color:${e.textMute}; background:rgba(208,236,26,0.03); } 50`,u=`<!DOCTYPE html><html><head><style> 51${a} 52${s} 53${i} 54body { position:relative; display:flex; flex-direction:column; justify-content:flex-end; padding:96px 112px; } 55.orb { position:absolute; border-radius:50%; filter:blur(140px); opacity:.12; pointer-events:none; } 56.orb-a { width:760px;height:760px; top:-220px;right:-160px; background:${e.lime}; animation:orbA 16s ease-in-out infinite; } 57.orb-b { width:560px;height:560px; bottom:-120px;left:-120px; background:${e.purple}; animation:orbB 20s ease-in-out infinite; } 58nav { position:absolute; top:64px; left:112px; z-index:10; 59 opacity:0; animation:fadeDown .7s ease forwards .15s; } 60.content { position:relative; z-index:2; max-width:1500px; } 61.eyebrow { font-family:'JetBrains Mono',monospace; font-size:14px; letter-spacing:.24em; text-transform:uppercase; 62 color:${e.lime}; margin-bottom:36px; 63 opacity:0; animation:fadeUp .6s ease forwards .25s; } 64h1 { 65 font-family:'Instrument Serif',serif; font-weight:400; 66 font-size:clamp(80px,9vw,140px); line-height:.94; letter-spacing:-.038em; 67 opacity:0; animation:fadeUp .9s ease forwards .45s; 68} 69h1 em { color:${e.lime}; font-style:italic; } 70.sub { font-size:clamp(20px,1.7vw,28px); font-weight:300; color:${e.textDim}; line-height:1.55; 71 margin-top:40px; max-width:1000px; 72 opacity:0; animation:fadeUp .8s ease forwards .85s; } 73</style></head><body> 74<div class="orb orb-a"></div> 75<div class="orb orb-b"></div> 76<nav>${p}</nav> 77<div class="content"> 78 <p class="eyebrow">Category · Autonomous Company</p> 79 <h1>The Way<br>of <em>Deco.</em></h1> 80 <p class="sub">How we operate high-volume, complex commerce brands: agents doing the work, humans governing it, priced on the results we produce.</p> 81</div> 82</body></html>`,v=`<!DOCTYPE html><html><head><style> 83${a} 84* { margin:0; padding:0; box-sizing:border-box; } 85body { width:100vw; height:100vh; overflow:hidden; background:${e.lbg}; 86 font-family:'Inter',-apple-system,system-ui,sans-serif; -webkit-font-smoothing:antialiased; 87 display:grid; grid-template-columns:1fr 1fr; } 88.left { display:flex; flex-direction:column; justify-content:space-between; 89 padding:72px 40px 72px 96px; } 90h1 { font-family:'Inter',sans-serif; font-weight:400; 91 font-size:clamp(38px,3.6vw,54px); letter-spacing:-0.045em; line-height:1.08; color:${e.ltext}; } 92h1 em { color:${e.laccent}; font-style:normal; } 93.stats { display:flex; flex-direction:column; gap:20px; } 94.rule { width:40px; height:2px; background:${e.laccent}; margin-bottom:8px; } 95.stat-num { font-family:'Inter',sans-serif; font-weight:600; 96 font-size:clamp(52px,6.5vw,88px); letter-spacing:-.03em; line-height:.9; color:${e.laccent}; } 97.stat-label { margin-top:10px; font-size:clamp(17px,1.4vw,22px); font-weight:400; color:${e.lbody}
97; line-height:1.5; font-family:'Inter',sans-serif; } 98.right { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); 99 grid-auto-rows:1fr; border-left:1px solid rgba(7,64,26,.1); 100 min-width:0; overflow:hidden; } 101.lc { display:flex; align-items:center; justify-content:center; 102 padding:22px 26px; border-bottom:1px solid rgba(7,64,26,.07); border-right:1px solid rgba(7,64,26,.07); 103 min-width:0; min-height:0; overflow:hidden; } 104.lc:nth-child(4n) { border-right:none; } 105.lc img { display:block; width:auto; height:auto; 106 max-width:70%; max-height:50%; } 107.lc.ais { position:relative; background:rgba(140,170,37,.07); box-shadow:inset 0 0 0 1.5px rgba(140,170,37,.5); } 108.lc.ais::after { content:"AI-Service"; position:absolute; top:9px; right:9px; 109 font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.12em; text-transform:uppercase; 110 color:#fff; background:${e.laccent}; border-radius:5px; padding:3px 6px; line-height:1; } 111.ais-note { display:flex; align-items:center; gap:10px; font-size:clamp(15px,1.2vw,19px); color:${e.lbody}; line-height:1.4; } 112.ais-note b { color:${e.ltext}; font-weight:600; } 113.ais-dot { width:11px; height:11px; border-radius:3px; background:${e.laccent}; flex-shrink:0; box-shadow:0 0 0 4px rgba(140,170,37,.14); } 114</style></head><body> 115<div class="left"> 116 <h1>We operate the largest,<br>most complex catalogs<br><em>in the country.</em></h1> 117 <div class="stats"> 118 <div class="rule"></div> 119 <div> 120 <div class="stat-num">$2B+</div> 121 <div class="stat-label">in GMV operated on the platform, per year.</div> 122 </div> 123 <div> 124 <div class="stat-num">150+</div> 125 <div class="stat-label">storefronts in production today.</div> 126 </div> 127 <div class="ais-note"><span class="ais-dot"></span><span><b>Farm, Fila, Monte Carlo, and Osklen</b> already operate in the AI-Service model.</span></div> 128 </div> 129</div> 130<div class="right"> 131 <div class="lc ais"><img style="aspect-ratio:99.6564/33.7015" src="https://www.decocms.com/logos/summit/fila.svg" alt="Fila"/></div> 132 <div class="lc ais"><img style="aspect-ratio:159.32/23.3152" src="https://www.decocms.com/logos/summit/farm-rio.svg" alt="Farm Rio"/></div> 133 <div class="lc ais"><img style="aspect-ratio:115.904/60.6778" src="https://www.decocms.com/logos/summit/monte-carlo.svg" alt="Monte Carlo"/></div> 134 <div class="lc ais"><img style="aspect-ratio:151.569/20.8498" src="https://www.decocms.com/logos/summit/osklen.svg" alt="Osklen"/></div> 135 <div class="lc"><img style="aspect-ratio:109.193/61.5614" src="https://www.decocms.com/logos/summit/leroy-merlin.svg" alt="Leroy Merlin"/></div> 136 <div class="lc"><img style="aspect-ratio:55.2705/52.125" src="https://www.decocms.com/logos/summit/als.svg" alt="Al's"/></div> 137 <div class="lc"><img style="aspect-ratio:154.195/35.1136" src="https://www.decocms.com/logos/summit/electrolux.svg" alt="Electrolux"/></div> 138 <div class="lc"><img style="aspect-ratio:135.701/17.5222" src="https://www.decocms.com/logos/summit/granado-text.svg" alt="Granado"/></div> 139 <div class="lc"><img style="aspect-ratio:144.983/19.8401" src="https://www.decocms.com/logos/summit/casa-e-video.svg" alt="Casa & Video"/></div> 140 <div class="lc"><img style="aspect-ratio:141.197/24.1183" src="https://www.decocms.com/logos/summit/le-biscuit.svg" alt="Le Biscuit"/></div> 141 <div class="lc"><img style="aspect-ratio:163.8/21.6181" src="https://www.decocms.com/logos/summit/hering-fill.svg" alt="Hering"/></div> 142 <div class="lc"><img style="aspect-ratio:112.959/42.6625" src="https://www.decocms.com/logos/summit/miess.svg" alt="Miess"/></div> 143 <div class="lc"><img style="aspect-ratio:148.708/21.569" src="https://www.decocms.com/logos/summit/bagaggio.svg" alt="Bagaggio"/></div> 144 <div class="lc"><img style="aspect-ratio:141.476/29.208" src="https://www.decocms.com/logos/summit/technos.svg" alt="Technos"/></div> 145 <div class="lc"><img style="aspect-ratio:135.177/55.6213" src="https://www.decocms.com/logos/summit/oficina-reserva.svg" alt="Oficina Reserva"/></div> 146 <div class="lc"><img style="aspect-ratio:73.1505/41.4632" src="https://www.decocms.com/logos/summit/live-mode.svg" alt="Live Mode"/></div> 147</div> 148</body></html>`,y=`<!DOCTYPE html><html><head>
149<link rel="preconnect" href="https://fonts.googleapis.com"> 150<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet"> 151<style> 152*{margin:0;padding:0;box-sizing:border-box;} 153body{width:100vw;height:100vh;overflow:hidden;background:#fafaf9;-webkit-font-smoothing:antialiased;font-family:'Inter',sans-serif;} 154@keyframes rowIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}} 155@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.4}} 156#top{position:relative;z-index:10;display:flex;flex-direction:column;align-items:center;text-align:center;padding:68px 72px 0;gap:10px;} 157.headline{font-family:'Inter',sans-serif;font-weight:500;font-size:clamp(40px,4.8vw,72px);line-height:1.08;letter-spacing:-0.025em;color:#07401a;max-width:1200px;opacity:0;animation:rowIn .7s ease forwards .15s;} 158.headline em{font-family:'Instrument Serif',serif;font-weight:400;font-style:italic;color:#8caa25;} 159#panel{position:absolute;z-index:10;left:6vw;right:6vw;top:max(260px,28vh);bottom:-80px;background:#fafaf9;border-radius:20px 20px 0 0;border:2px solid #e5e3df;border-bottom:none;overflow:hidden;display:flex;flex-direction:column;opacity:0;animation:rowIn .55s ease forwards .55s;} 160#phdr{padding:16px 32px;border-bottom:1px solid #e5e3df;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;} 161.ptitle{font-size:clamp(18px,1.4vw,24px);font-weight:600;color:#1c1917;letter-spacing:-0.02em;} 162.live{display:flex;align-items:center;gap:8px;background:#e7e5e4;border-radius:12px;padding:7px 14px;} 163.ldot{width:9px;height:9px;border-radius:50%;background:#34d399;flex-shrink:0;animation:pulse 2s ease-in-out infinite;} 164.ltxt{font-size:clamp(14px,1.1vw,20px);font-weight:500;color:#1c1917;letter-spacing:-0.02em;} 165.lsince{font-size:clamp(12px,1vw,18px);color:#78756f;} 166#feed{flex:1;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none;} 167#feed::-webkit-scrollbar{display:none;} 168.row{display:flex;align-items:center;padding:10px 32px;gap:24px;border-bottom:1px solid #f0eeeb;} 169.row.new{animation:rowIn .4s ease-out;} 170.rt{font-size:clamp(12px,1vw,18px);font-family:monospace;color:#9a9890;flex-shrink:0;width:clamp(48px,3.8vw,70px);} 171.ra{display:flex;align-items:center;gap:10px;flex-shrink:0;width:clamp(150px,13vw,230px);} 172.ric{display:flex;align-items:center;justify-content:center;border-radius:8px;flex-shrink:0;} 173.rn{font-size:clamp(13px,1.1vw,20px);font-weight:500;color:#1c1917;letter-spacing:-0.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} 174.rst{flex-shrink:0;width:22px;display:flex;align-items:center;justify-content:center;} 175.rr{flex:1;letter-spacing:-0.02em;line-height:1.35;font-size:clamp(13px,1.05vw,18px);} 176.rs{flex-shrink:0;display:flex;align-items:center;gap:5px;background:#f0eeeb;border-radius:10px;padding:5px 10px;} 177.rs span{font-size:clamp(11px,.9vw,15px);font-weight:500;color:#78756f;white-space:nowrap;} 178</style> 179</head><body> 180<div id="top"> 181 <h2 class="headline">We accelerate your buying experience,<br><em>at the pace of AI.</em></h2> 182</div> 183<div id="panel"> 184 <div id="phdr"> 185 <span class="ptitle">Activity</span> 186 <div class="live"><span class="ldot"></span><span class="ltxt">Live</span><span class="lsince">3s</span></div> 187 </div> 188 <div id="feed"></div> 189</div> 190<script> 191var L=[ 192 {t:"00:15",a:"SEO Audit",ic:"seo",s:"ok",r:"Overnight crawl complete. 14,203 URLs checked. 0 broken canonicals.",sc:"Daily 12am"}, 193 {t:"01:00",a:"Performance Monitor",ic:"perf",s:"ok",r:"Off-peak baseline: LCP 1.4s, INP 120ms, CLS 0.01.",sc:"Hourly"}, 194 {t:"02:00",a:"PLP Optimizer",ic:"plp",s:"ok",r:"Reordered 22 products in /home-appliances by 7-day CTR.",sc:"Daily 2am"}, 195 {t:"02:30",a:"Image Optimizer",ic:"img",s:"ok",r:"Recompressed 312 hero banners overnight. Saved 4.8MB total.",sc:"Daily 2am"}, 196 {t:"03:00",a:"PLP Optimizer",ic:"plp",s:"ok",r:"Reordered 18 products across 5 categories by CTR. Projected +2.3% conversion.",sc:"Daily 3am"}, 197 {t:"03:15",a:"PLP Optimizer",ic:"plp",s:"ok",r:"/phones: 4 stockouts hidden, 3 trending SKUs promoted.",sc:"Daily 3am"}, 198 {t:"03:45",a:"SEO Audit",ic:"seo",s:"ok",r:"Internal links audit clean. 0 orphan pages detected.",sc:"Daily 3:45am"}, 199 {t:"04:00",a:"Performance Monitor",ic:"perf",s:"ok",r:"Backend p99 stable: 280ms. No regressions on checkout endpoints.",sc:"Hourly"}, 200 {t:"04:30",a:"Auto-Blog",ic:"blog",s:"action",r:"Drafted 'Mother's Day gift guide' (1,420 words). Awaiting review.",sc:"Daily 4:30am"}, 201 {t:"05:00",a:"PDP Optimizer",ic:"pdp",s:"action",r:"Generated alt-text for 84 product images missing accessibility metadata.",sc:"Daily 5am"}, 202 {t:"05:30",a:"SEO Audit",ic:"seo",s:"ok",r:"Schema.org markup validated across 1,892 PDPs. 0 errors.",sc:"Daily 5:30am"}, 203 {t:"06:00",a:"SEO Audit",ic:"seo",s:"alert",r:"3 PDPs missing meta descriptions. 2 category pages with duplicate titles detected.",sc:"Daily 6am"}, 204 {t:"06:01",a:"SEO Audit",ic:"seo",s:"action",r:"Generated and published meta tags for 3 PDPs. Sitemap update submitted.",sc:"Daily 6am"}, 205 {t:"06:15",a:"Image Optimizer",ic:"img",s:"ok",r:"Converted 47 PNGs to WebP across category banners. -62% file size.",sc:"Daily 6am"}, 206 {t:"06:30",a:"Auto-Blog",ic:"blog",s:"ok",r:"Published 2 seasonal articles. 4 internal links added. Both indexed within 3h.",sc:"Daily 6am"}, 207 {t:"07:00",a:"Performance Monitor",ic:"perf",s:"ok",r:"Morning ramp-up healthy. Concurrent users: 2,140. CWV all green.",sc:"Hourly"}, 208 {t:"07:30",a:"PLP Optimizer",ic:"plp",s:"action",r:"Boosted 6 'back to school' products on /kids top shelf for the week.",sc:"Daily 7:30am"}, 209 {t:"08:00",a:"PDP Optimizer",ic:"pdp",s:"ok",r:"Reviewed yesterday's title test on 12 PDPs. Winning variant promoted.",sc:"Daily 8am"}, 210 {t:"08:15",a:"SEO Audit",ic:"seo",s:"ok",r:"Re-submitted 18 updated URLs to Search Console. Indexed in 42min avg.",sc:"On change"}, 211 {t:"08:45",a:"Performance Monitor",ic:"perf",s:"alert",r:"INP regression on /cart: 240ms (was 180ms). Bisecting recent deploy.",sc:"Hourly"}, 212 {t:"09:00",a:"PDP Optimizer",ic:"pdp",s:"action",r:"Updated hero copy on 6 high-traffic PDPs. A/B test running. Projected +3.1% add-to-cart.",sc:"Daily 9am"}, 213 {t:"09:10",a:"Performance Monitor",ic:"perf",s:"action",r:"INP fix identified: third-party script blocking. Defer applied. Verifying.",sc:"On alert"}, 214 {t:"09:15",a:"Performance Monitor",ic:"perf",s:"alert",r:"LCP spike on /women/dresses: 4.2
214s on mobile. Image optimization triggered.",sc:"Every 15m"}, 215 {t:"09:16",a:"Image Optimizer",ic:"img",s:"ok",r:"14 images recompressed on collection page. LCP back to 1.8s.",sc:"On trigger"}, 216 {t:"09:30",a:"PLP Optimizer",ic:"plp",s:"ok",r:"/deals refreshed. 28 new deal SKUs synced from price feed.",sc:"Every 30m"}, 217 {t:"09:45",a:"PLP Optimizer",ic:"plp",s:"ok",r:"Top 50 collection pages re-ranked using last-7-day CTR x margin.",sc:"Daily 9:45am"}, 218 {t:"10:00",a:"SEO Audit",ic:"seo",s:"ok",r:"Top-100 keyword tracker: 14 up, 6 stable, 3 down. Reports queued.",sc:"Daily 10am"}, 219 {t:"10:15",a:"Auto-Blog",ic:"blog",s:"ok",r:"Backlinked 3 new articles to relevant PDPs. Internal links: +18.",sc:"On publish"}, 220 {t:"10:30",a:"PDP Optimizer",ic:"pdp",s:"ok",r:"Refreshed bullet points on 9 underperforming PDPs using catalog data.",sc:"Daily 10:30am"}, 221 {t:"11:00",a:"Performance Monitor",ic:"perf",s:"ok",r:"Mid-morning health check. p95 latency 108ms. 0 errors in last hour.",sc:"Hourly"}, 222 {t:"11:15",a:"PLP Optimizer",ic:"plp",s:"action",r:"Detected 3 stockout drift events. Hidden from /appliances top 8.",sc:"Every 15m"}, 223 {t:"12:00",a:"PLP Optimizer",ic:"plp",s:"ok",r:"8 out-of-stock products removed from top shelf. 4 bestsellers promoted.",sc:"Daily 3am"}, 224 {t:"12:30",a:"SEO Audit",ic:"seo",s:"ok",r:"Mid-day re-crawl: 142 PDPs re-indexed. Coverage holding at 100%.",sc:"Daily 12:30pm"}, 225 {t:"13:00",a:"Auto-Blog",ic:"blog",s:"action",r:"Drafted 'How to choose running shoes' (980 words). Awaiting review.",sc:"Daily 1pm"}, 226 {t:"13:15",a:"PDP Optimizer",ic:"pdp",s:"ok",r:"A/B test on 6 PDPs reached significance. Winner deployed: +2.1% ATC.",sc:"On significance"}, 227 {t:"14:00",a:"PLP Optimizer",ic:"plp",s:"ok",r:"Re-ranked /tech by margin x velocity. Projected GMV +1.4%.",sc:"Daily 2pm"}, 228 {t:"14:15",a:"SEO Audit",ic:"seo",s:"ok",r:"Long-tail tracker: 38 new ranked terms this week. Briefs queued.",sc:"Weekly"}, 229 {t:"15:00",a:"SEO Audit",ic:"seo",s:"ok",r:"All 1,892 pages indexed. Coverage at 100%. Re-index confirmed.",sc:"Daily 6am"}, 230 {t:"16:00",a:"Performance Monitor",ic:"perf",s:"ok",r:"Peak-hour check: 4,820 RPS. p95 124ms. Cache hit rate 91%.",sc:"Hourly"}, 231 {t:"16:15",a:"PLP Optimizer",ic:"plp",s:"action",r:"Promoted 4 trending SKUs from /home-decor to homepage shelf.",sc:"Every 15m"}, 232 {t:"16:45",a:"SEO Audit",ic:"seo",s:"alert",r:"Detected 2 thin-content PDPs (<150 words). Auto-Blog enrichment queued.",sc:"Daily 4:45pm"}, 233 {t:"17:00",a:"PDP Optimizer",ic:"pdp",s:"action",r:"Enriched 2 thin PDPs with spec tables and use cases (+340 words avg).",sc:"On trigger"}, 234 {t:"18:00",a:"Auto-Blog",ic:"blog",s:"action",r:"3 articles drafted for review: Black Friday guide, gift ideas, winter trends.",sc:"Daily 6pm"}, 235 {t:"19:00",a:"Performance Monitor",ic:"perf",s:"ok",r:"Evening traffic stable. CWV: LCP 1.7s, CLS 0.02, INP 175ms.",sc:"Hourly"}, 236 {t:"20:00",a:"Auto-Blog",ic:"blog",s:"ok",r:"Distributed 2 published articles to newsletter and social queue.",sc:"On publish"}, 237 {t:"21:00",a:"Performance Monitor",ic:"perf",s:"ok",r:"Weekly CWV: LCP avg 1.6s, CLS 0.02, INP 180ms. All green.",sc:"Weekly"}, 238 {t:"22:00",a:"SEO Audit",ic:"seo",s:"ok",r:"End-of-day report: +14 ranked terms, 0 critical issues. Brief drafted.",sc:"Daily 10pm"}, 239 {t:"23:00",a:"PDP Optimizer",ic:"pdp",s:"ok",r:"Queued 24 PDP rewrites for overnight execution. Templates approved.",sc:"Daily 11pm"} 240]; 241var IC={ 242 plp:{bg:"#dcfce7",fg:"#16a34a",p:'<path d="M7 15l5-5 5 5M7 9l5-5 5 5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>'}, 243 pdp:{bg:"#dbeafe",fg:"#2563eb",p:'<rect x="3" y="3" width="18" height="18" rx="2" stroke-width="2"/><path d="M9 9h6M9 13h4" stroke-width="2" stroke-linecap="round"/>'}, 244 seo:{bg:"#ede9fe",fg:"#7c3aed",p:'<circle cx="12" cy="12" r="10" stroke-width="2"/><path d="M2 12h20M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10A15.3 15.3 0 0112 2z" stroke-width="2"/>'}, 245 blog:{bg:"#ccfbf1",fg:"#0d9488",p:'<path d="M12 20h9M16.5 3.5a2.121 2.121 0 013 3L7 19l-4 1 1-4L16.5 3.5z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>'}, 246 perf:{bg:"#ffedd5",fg:"#ea580c",p:'<path d="M18 20V10M12 20V4M6 20v-6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>'}, 247 img:{bg:"#fef9c3",fg:"#ca8a04",p:'<rect x="3" y="3" width="18" height="18" rx="2" stroke-width="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21" stroke-width="2" stroke-linecap="round"/>'} 248}; 249var SOK='<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#16a34a" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="9,12 11,14 15,10"/></svg>'; 250var SALERT='<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#ea580c" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/>
250<line x1="12" y1="16" x2="12.01" y2="16"/></svg>'; 251var SACT='<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#d97706" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/></svg>'; 252var CLK='<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#9a9890" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12,6 12,12 16,14"/></svg>'; 253function si(s){return s==='ok'?SOK:s==='alert'?SALERT:SACT;} 254function sc(s){return s==='ok'?'#16a34a':s==='alert'?'#ea580c':'#d97706';} 255var isz=Math.round(Math.min(window.innerWidth*0.018,30)); 256function makeRow(e,n){ 257 var ic=IC[e.ic]||IC.perf; 258 var d=document.createElement('div'); 259 d.className='row'+(n?' new':''); 260 d.innerHTML='<span class="rt">'+e.t+'</span>'+ 261 '<div class="ra"><div class="ric" style="width:'+isz+'px;height:'+isz+'px;background:'+ic.bg+'"><svg width="'+(isz-8)+'" height="'+(isz-8)+'" viewBox="0 0 24 24" fill="none" stroke="'+ic.fg+'">'+ic.p+'</svg></div><span class="rn">'+e.a+'</span></div>'+ 262 '<div class="rst">'+si(e.s)+'</div>'+ 263 '<span class="rr" style="color:'+sc(e.s)+';font-weight:'+(e.s==='alert'?'500':'400')+'">'+e.r+'</span>'+ 264 '<div class="rs">'+CLK+'<span>'+e.sc+'</span></div>'; 265 return d; 266} 267var feed=document.getElementById('feed'),vis=0,INIT=5; 268function reset(){ 269 feed.innerHTML='';vis=INIT; 270 for(var i=0;i<INIT&&i<L.length;i++)feed.prepend(makeRow(L[i],false)); 271} 272function tick(){ 273 vis++; 274 if(vis>L.length){ 275 setTimeout(function(){ 276 feed.style.transition='opacity .35s ease'; 277 feed.style.opacity='0'; 278 setTimeout(function(){ 279 feed.style.transition=''; 280 feed.style.opacity='1'; 281 reset(); 282 setTimeout(tick,800); 283 },350); 284 },1200); 285 return; 286 } 287 feed.prepend(makeRow(L[vis-1],true)); 288 setTimeout(tick,900); 289} 290reset();setTimeout(tick,1000); 291<\/script> 292</body></html>`,w=`<!DOCTYPE html><html><head><style> 293${a} 294${n} 295${i} 296body { display:flex; flex-direction:column; padding:80px 88px 56px; position:relative; overflow:hidden; background:#fef2f2; } 297.header { position:relative; z-index:2; text-align:center; } 298h1 { font-family:'Inter',sans-serif; font-weight:400; font-size:88px; line-height:1.05; letter-spacing:-0.05em; color:#1c1917; 299 opacity:0; animation:fadeUp .8s ease forwards .2s; } 300h1 .red { color:#b91c1c; } 301.board { position:absolute; left:140px; right:140px; top:480px; bottom:-44px; z-index:1; 302 opacity:0; animation:fadeIn .9s ease forwards .7s; } 303.col { position:absolute; top:0; background:#fff; border:1px solid #eceae7; border-radius:16px; overflow:hidden; 304 box-shadow:0 8px 26px rgba(7,64,26,0.05); } 305.col-head { height:54px; display:flex; align-items:center; justify-content:space-between; padding:0 18px; border-bottom:1px solid #f1efec; } 306.col-name { font-family:'JetBrains Mono',monospace; font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:#57534e; font-weight:500; } 307.col-count { font-family:'JetBrains Mono',monospace; font-size:16px; font-weight:600; color:#a8a29e; min-width:30px; text-align:right; } 308.col-count.bump { animation:countBump .42s ease; } 309.col.c0 .col-head { background:linear-gradient(180deg,#fef2f2,#ffffff); border-bottom-color:#fde2e2; } 310.col.c0 .col-name { color:#dc2626; } 311.col.c0 .col-count { color:#ef4444; font-size:22px; } 312.col.c3 .col-count { color:#5c7a13; } 313.col.alert { animation:alertPulse 1.6s ease-in-out infinite; } 314.layer { position:absolute; inset:0; pointer-events:none; } 315.layer.base { overflow:hidden; } 316.layer.fly { overflow:visible; z-index:6; } 317.card { position:absolute; top:0; left:0; background:#fff; border:1px solid #eceae7; border-radius:11px; display:flex; overflow:hidden; 318 box-shadow:0 2px 6px rgba(7,64,26,0.06); will-change:transform; 319 transition:transform .55s cubic-bezier(.4,0,.2,1), background .45s ease, color .45s ease, border-color .45s ease, opacity .4s ease; } 320.card .cc { flex:1; min-width:0; padding:9px 14px; display:flex; flex-direction:column; justify-content:center; gap:7px; } 321.ct { font-family:'Inter',sans-serif; font-size:15px; font-weight:500; color:#292524; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } 322.cm { display:flex; align-items:center; gap:8px; } 323.tag { font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:#78726e; background:#f4f3f1; padding:2px 7px; border-radius:5px; white-space:nowrap; } 324.cid { font-family:'JetBrains Mono',monospace; font-size:10px; color:#bcb6b1; } 325.card.in-backlog { background:#fde6e6; border-color:#fbcfcf; } 326.card.in-backlog .ct { color:#991b1b; } 327.card.in-backlog .tag { color:#b91c1c; background:#fff1f1; } 328.card.in-backlog .cid { color:#dd9a9a; } 329.card.done { background:#f6faec; border-color:#e4eecb; } 330.card.done .ct { color:#3f5212; } 331.card.spawn.in-backlog { animation:flashRed .6s ease; } 332@keyframes countBump { 0%{transform:scale(1)} 30%{transform:scale(1.3)} 100%{transform:scale(1)} } 333@keyframes alertPulse { 0%,100%{ box-shadow:0 8px 24px rgba(239,68,68,.08); border-color:#fbdcdc; } 50%{ box-shadow:0 0 0 1px rgba(239,68,68,.42),0 16px 44px rgba(239,68,68,.26); border-color:#f87171; } } 334@keyframes flashRed { 0%{ background:#fca5a5; box-shadow:0 0 0 2px rgba(239,68,68,.45),0 8px 18px rgba(239,68,68,.28);} 100%{ background:#fde6e6; box-shadow:0 2px 6px rgba(7,64,26,.06);} } 335</style></head><body> 336<div class="header"> 337 <h1>Most teams still operate through<br><span class="red">tickets, dashboards, and<br>technical backlogs.</span></h1> 338</div> 339<div class="board" id="board"></div> 340 341<script> 342window.addEventListener('load', function(){ requestAnimationFrame(function(){ requestAnimationFrame(init); }); });
343function init(){ 344 var board=document.getElementById('board'); 345 var BW=board.clientWidth||1744, BH=board.clientHeight||692; 346 var NCOL=4, GAP=22, HEAD=54, PADT=14, PADB=12, IN=12, CG=12; 347 var colW=(BW-GAP*(NCOL-1))/NCOL; 348 var CW=colW-IN*2; 349 var bodyTop=HEAD+PADT; 350 var avail=BH-bodyTop-PADB; 351 var SLOTS=Math.max(4, Math.min(9, Math.round((avail+CG)/72))); 352 var pitch=(avail+CG)/SLOTS; 353 var CH=Math.floor(pitch-CG); 354 function colLeft(i){ return Math.round(i*(colW+GAP)); } 355 function cardX(i){ return Math.round(colLeft(i)+IN); } 356 function slotY(j){ return Math.round(bodyTop+j*pitch); } 357 358 var META=[ 359 {name:'Backlog', c:'#ef4444'}, 360 {name:'To do', c:'#f59e0b'}, 361 {name:'Doing', c:'#7c83ff'}, 362 {name:'Done', c:'#8caa25'} 363 ]; 364 var countEls=[]; 365 for(var i=0;i<NCOL;i++){ 366 var col=document.createElement('div'); 367 col.className='col c'+i+(i===0?' alert':''); 368 col.style.left=colLeft(i)+'px'; 369 col.style.width=Math.round(colW)+'px'; 370 col.style.height=BH+'px'; 371 var head=document.createElement('div'); head.className='col-head'; 372 var nm=document.createElement('span'); nm.className='col-name'; nm.textContent=META[i].name; 373 var ct=document.createElement('span'); ct.className='col-count'; ct.textContent='0'; 374 head.appendChild(nm); head.appendChild(ct); col.appendChild(head); 375 board.appendChild(col); countEls.push(ct); 376 } 377 var layerBase=document.createElement('div'); layerBase.className='layer base'; 378 var layerFly=document.createElement('div'); layerFly.className='layer fly'; 379 board.appendChild(layerBase); board.appendChild(layerFly); 380 381 var TASKS=[ 382 ['Update prices','catalog'],['Create collection','catalog'],['Sync inventory feed','inventory'], 383 ['Flag out-of-stock SKUs','inventory'],['Update stock levels','inventory'],['Optimize images','perf'], 384 ['Audit page speed','perf'],['Update meta tags','seo'],['Submit sitemap','seo'], 385 ['Reindex catalog','search'],['Tune search relevance','search'],['Design campaign banner','campaign'], 386 ['Schedule launch date','campaign'],['Activate campaign','campaign'],['Check error logs','bug'], 387 ['Write fix','bug'],['Approve deploy','deploy'],['Create deploy preview','deploy'], 388 ['Update page content','content'],['Publish to CMS','content'],['Pull conversion report','data'], 389 ['Compare A/B variants','data'],['Process return request','returns'],['Issue refund','returns'], 390 ['Test checkout flow','checkout'],['Confirm tax calc','checkout'] 391 ]; 392 for(var s=TASKS.length-1;s>0;s--){ var rr=Math.floor(Math.random()*(s+1)); var tmp=TASKS[s]; TASKS[s]=TASKS[rr]; TASKS[rr]=tmp; } 393 var tptr=0; 394 function nextTask(){ var t=TASKS[tptr%TASKS.length]; tptr++; return t; } 395 396 var cols=[[],[],[],[]]; 397 var backlogCount=0, doneTotal=0, zTop=10; 398 var TODO_CAP=Math.min(5,SLOTS-1), DOING_CAP=Math.min(4,SLOTS-1); 399 400 function baseT(card){ return 'translate('+cardX(card.col)+'px,'+slotY(card.slot)+'px)'; } 401 function makeCard(task,col){ 402 var el=document.createElement('div'); 403 el.className='card'+(col===0?' in-backlog':'')+(col===3?' done':''); 404 el.style.width=CW+'px'; el.style.height=CH+'px'; 405 var cc=document.createElement('div'); cc.className='cc'; 406 var ct=document.createElement('div'); ct.className='ct'; ct.textContent=task[0]; 407 var cm=document.createElement('div'); cm.className='cm'; 408 var tg=document.createElement('span'); tg.className='tag'; tg.textContent=task[1]; 409 var id=document.createElement('span'); id.className='cid'; id.textContent='#'+(1000+Math.floor(Math.random()*9000)); 410 cm.appendChild(tg); cm.appendChild(id); cc.appendChild(ct); cc.appendChild(cm); 411 el.appendChild(cc); 412 return {el:el, col:col, slot:0, flying:false}; 413 } 414 function updateCount(ci){ 415 var v = ci===0 ? backlogCount : (ci===3 ? doneTotal : cols[ci].length); 416 countEls[ci].textContent=v; 417 } 418 function bump(el){ el.classList.remove('bump'); void el.offsetWidth; el.classList.add('bump'); } 419 function reflow(ci){ for(var j=0;j<cols[ci].length;j++){ var c=cols[ci][j]; c.slot=j; if(!c.flying) c.el.style.transform=baseT(c); } } 420 421 function seed(col){ 422 var card=makeCard(nextTask(),col); 423 card.slot=cols[col].length; cols[col].push(card); 424 layerBase.appendChild(card.el); card.el.style.transform=baseT(card); 425 if(col===0) backlogCount++; if(col===3) doneTotal++; 426 } 427 428 function spawn(){ 429 var card=makeCard(nextTask(),0); 430 card.slot=0; cols[0].unshift(card); layerBase.appendChild(card.el); 431 card.el.style.opacity='0'; 432 card.el.style.transform='translate('+cardX(0)+'px,'+(slotY(0)-16)+'px) scale(.96)'; 433 card.el.classList.add('spawn'); 434 requestAnimationFrame(function(){ requestAnimationFrame(function(){ 435 card.el.style.opacity='1'; card.el.style.transform=baseT(card); 436 }); }); 437 for(var j=1;j<cols[0].length;j++){ var c=cols[0][j]; c.slot=j; if(!c.flying) c.el.style.transform=baseT(c); } 438 while(cols[0].length>SLOTS){ 439 var gone=cols[0].pop(); 440 gone.el.style.opacity='0'; 441 gone.el.style.transform='translate('+cardX(0)+'px,'+(slotY(SLOTS)-4)+'px) scale(.97)'; 442 (function(g){ setTimeout(function(){ if(g.el.parentNode) g.el.parentNode.removeChild(g.el); },440); })(gone); 443 } 444 backlogCount++; updateCount(0); bump(countEls[0]); 445 (function(cd){ setTimeout(function(){ cd.el.classList.remove('spawn'); },660); })(card); 446 } 447 448 function trimTop(ci){
449 var g=cols[ci].shift(); 450 g.el.style.opacity='0'; 451 g.el.style.transform='translate('+cardX(ci)+'px,'+(slotY(0)-14)+'px) scale(.97)'; 452 (function(gg){ setTimeout(function(){ if(gg.el.parentNode) gg.el.parentNode.removeChild(gg.el); },440); })(g); 453 reflow(ci); 454 } 455 456 function move(fromCol,toCol,pickIndex){ 457 if(cols[fromCol].length===0) return false; 458 var idx = pickIndex==null ? 0 : Math.min(pickIndex, cols[fromCol].length-1); 459 if(idx<0) return false; 460 var card=cols[fromCol][idx]; 461 if(card.flying) return false; 462 var startX=cardX(fromCol), startY=slotY(idx); 463 cols[fromCol].splice(idx,1); 464 if(fromCol===0) backlogCount=Math.max(0,backlogCount-1); 465 reflow(fromCol); updateCount(fromCol); 466 if(toCol===3 && cols[3].length>=SLOTS) trimTop(3); 467 card.col=toCol; card.slot=cols[toCol].length; cols[toCol].push(card); 468 if(fromCol===0) card.el.classList.remove('in-backlog'); 469 if(toCol===3){ card.el.classList.add('done'); doneTotal++; } 470 updateCount(toCol); if(toCol===3) bump(countEls[3]); 471 var endX=cardX(toCol), endY=slotY(card.slot); 472 card.flying=true; layerFly.appendChild(card.el); card.el.style.zIndex=String(++zTop); 473 card.el.style.transition='none'; 474 card.el.style.transform='translate('+endX+'px,'+endY+'px)'; 475 var apexY=Math.max(8, Math.min(startY,endY)-46); 476 var midX=Math.round((startX+endX)/2); 477 var sh0='0 2px 6px rgba(7,64,26,.08)'; 478 var shMid='0 18px 36px rgba(7,64,26,.20)'; 479 var shHi='0 26px 50px rgba(7,64,26,.26)'; 480 var kf=[ 481 {transform:'translate('+startX+'px,'+startY+'px) scale(1) rotate(0deg)', boxShadow:sh0, offset:0, easing:'cubic-bezier(.34,1.4,.64,1)'}, 482 {transform:'translate('+startX+'px,'+(startY-12)+'px) scale(1.05) rotate(-1.6deg)', boxShadow:shMid, offset:.15, easing:'cubic-bezier(.4,0,.2,1)'}, 483 {transform:'translate('+midX+'px,'+apexY+'px) scale(1.07) rotate(1.3deg)', boxShadow:shHi, offset:.55, easing:'cubic-bezier(.4,0,.2,1)'}, 484 {transform:'translate('+endX+'px,'+(endY+7)+'px) scale(1.02) rotate(0deg)', boxShadow:shMid, offset:.86, easing:'cubic-bezier(.3,.8,.3,1)'}, 485 {transform:'translate('+endX+'px,'+endY+'px) scale(1) rotate(0deg)', boxShadow:sh0, offset:1} 486 ]; 487 var anim=card.el.animate(kf,{duration:1300, fill:'none'}); 488 anim.onfinish=function(){ 489 card.flying=false; card.el.style.zIndex=''; card.el.style.boxShadow=''; 490 card.el.style.transition=''; layerBase.appendChild(card.el); card.el.style.transform=baseT(card); 491 }; 492 return true; 493 } 494 495 for(var a=0;a<5;a++) seed(0); 496 for(var b=0;b<2;b++) seed(1); 497 seed(2); seed(3); 498 for(var i2=0;i2<NCOL;i2++) updateCount(i2); 499 500 function spawnLoop(){ spawn(); setTimeout(spawnLoop, 280+Math.random()*180); } 501 function btLoop(){ if(cols[1].length<TODO_CAP) move(0,1, Math.min(2,cols[0].length-1)); setTimeout(btLoop, 3000+Math.random()*1700); } 502 function tdLoop(){ if(cols[1].length>0 && cols[2].length<DOING_CAP) move(1,2,0); setTimeout(tdLoop, 3600+Math.random()*1800); } 503 function ddLoop(){ if(cols[2].length>0) move(2,3,0); setTimeout(ddLoop, 3200+Math.random()*1700); } 504 setTimeout(spawnLoop, 350); 505 setTimeout(btLoop, 1900); 506 setTimeout(tdLoop, 3300); 507 setTimeout(ddLoop, 4700); 508} 509<\/script> 510</body></html>`,k=`<!DOCTYPE html><html><head><style> 511${a} 512${s} 513${i} 514${x} 515body { display:grid; grid-template-rows: auto 1fr; row-gap:64px; 516 padding:64px 96px 88px; position:relative; overflow:hidden; } 517body::before { content:""; position:absolute; width:720px; height:720px; border-radius:50%; 518 background:${e.lime}; filter:blur(260px); opacity:0.07; top:-300px; right:-240px; 519 pointer-events:none; } 520 521.hdr { position:relative; z-index:1; max-width:1500px; } 522.hdr .spine { margin-bottom:24px; max-width:1400px; font-size:clamp(40px,4.8vw,72px); line-height:1.08; letter-spacing:-0.025em; } 523.sub { font-size:clamp(17px,1.4vw,22px); line-height:1.5; color:${e.textDim}; font-weight:300; 524 letter-spacing:-.005em; max-width:1100px; 525 opacity:0; animation:fadeUp .5s ease forwards .4s; } 526.sub strong { color:${e.text}; font-weight:500; } 527 528.stage { position:relative; z-index:1; min-height:0; 529 display:flex; flex-direction:column; align-items:center; justify-content:center; 530 gap:44px; } 531 532.card { position:relative; width:100%; max-width:1040px; 533 background:rgba(24,22,20,0.55); 534 border:1px solid ${e.border}; border-radius:28px; 535 box-shadow: 0 40px 120px rgba(0,0,0,0.5); 536 opacity:0; animation:fadeUp .7s ease forwards .75s; 537 display:flex; flex-direction:column; 538 padding:64px 72px 60px; gap:40px; } 539 540.card-meta { font-family:'JetBrains Mono',monospace; font-size:16px; 541 color:${e.textMute}; letter-spacing:.04em; } 542.card-meta em { color:${e.purple}; font-style:normal; font-weight:500; } 543 544.card-title { font-family:'Instrument Serif',serif; font-size:56px; line-height:1.1; 545 color:${e.text}; letter-spacing:-.02em; } 546 547.diff { font-family:'JetBrains Mono',monospace; font-size:21px; line-height:1.9; 548 display:flex; flex-direction:column; gap:6px; } 549.diff .ln { display:grid; grid-template-columns: 28px 1fr; gap:18px; } 550.diff .ln.rem { color:#f3bcb7; } 551.diff .ln.add { color:${e.text}; } 552.diff .sign.p { color:${e.lime}; } 553.diff .sign.m { color:#ff8a80; } 554 555.approve-btn { display:inline-flex; align-items:center; gap:14px; align-self:flex-start; 556 padding:18px 32px; border-radius:14px; background:${e.lime}; color:${e.limeDark}; 557 font-size:20px; font-weight:600; letter-spacing:-.005em; 558 box-shadow: 0 0 0 6px rgba(208,236,26,0.1), 0 20px 40px rgba(208,236,26,0.2); 559 position:relative; } 560.approve-btn::after { content:""; position:absolute; inset:-6px; border-radius:20px; 561 border:2px solid rgba(208,236,26,0.5); opacity:0; animation:ring 2.6s ease-out infinite 1.4s; } 562@keyframes ring { 0%{opacity:0.9; transform:scale(0.96);} 80%{opacity:0; transform:scale(1.12);} 100%{opacity:0;} } 563 564.trail { width:100%; max-width:1100px; position:relative; 565 opacity:0; animation:fadeUp .6s ease forwards 1.2s; } 566.trail-title { font-family:'JetBrains Mono',monospace; font-size:11px; 567 letter-spacing:.24em; text-transform:uppercase; color:${e.textMute}; 568 text-align:center; margin-bottom:22px; } 569.trail-title b { color:${e.textDim}; font-weight:500; } 570 571.track { position:relative; display:grid; grid-template-columns:repeat(5, 1fr); 572 padding:0 40px; } 573.track::before { content:""; position:absolute; top:10px; left:60px; right:60px; height:1px; 574 background:repeating-linear-gradient(to right, ${e.borderSt} 0 3px, transparent 3px 8px); } 575 576.event { position:relative; z-index:1; display:flex; flex-direction:column; 577 align-items:center; gap:8px; text-align:center; } 578.event .dot { width:12px; height:12px; border-radius:50%; border:2px solid ${e.bg}; } 579.event.agent .dot { background:${e.purple}; box-shadow:0 0 0 3px rgba(165,149,255,0.18); } 580.event.human .dot { background:${e.lime}; box-shadow:0 0 0 3px rgba(208,236,26,0.18); } 581.event .ts { font-family:'JetBrains Mono',monospace; font-size:11px; color:${e.borderSt}; 582 letter-spacing:.02em; margin-top:2px; } 583.event .txt { font-size:13px; color:${e.textDim}; line-height:1.35; max-width:160px; } 584.event .txt b { color:${e.text}; font-weight:500; } 585 586</style></head><body> 587 588<div class="hdr"> 589 <h1 class="spine">Your team approves every change. <em>Your brand stays yours.</em></h1> 590 <p class="sub"><strong>Nothing goes live without a human sign-off</strong> where you want one. Every action is logged, person or agent, <strong>always traceable.</strong></p> 591</div> 592 593<div class="stage"> 594 <div class="card"> 595 <div class="card-meta">Agent <em>pdp-optimizer</em> proposed a change</div> 596 <div class="card-title">Rewrite hero headline, summer drop.</div> 597 <div class="diff"> 598 <div class="ln rem"><span class="sign m">−
598</span><span>"Discover our new arrivals"</span></div> 599 <div class="ln add"><span class="sign p">+</span><span>"Summer, styled yours."</span></div> 600 </div> 601 <div class="approve-btn">✓ Approve & publish</div> 602 </div> 603 604 <div class="trail"> 605 <div class="trail-title">Audit log · <b>always on</b></div> 606 <div class="track"> 607 <div class="event agent"><span class="dot"></span><span class="ts">14:02</span><span class="txt"><b>agent</b> opened</span></div> 608 <div class="event human"><span class="dot"></span><span class="ts">14:03</span><span class="txt"><b>reviewer</b> reviewed</span></div> 609 <div class="event human"><span class="dot"></span><span class="ts">14:04</span><span class="txt"><b>reviewer</b> approved</span></div> 610 <div class="event agent"><span class="dot"></span><span class="ts">14:11</span><span class="txt"><b>agent</b> synced</span></div> 611 <div class="event agent"><span class="dot"></span><span class="ts">14:22</span><span class="txt"><b>agent</b> awaiting</span></div> 612 </div> 613 </div> 614</div> 615</body></html>`,C=[{ix:"01",n:"Repo health",q:"Commit cadence, dependency freshness, test coverage, CI green rate.",c:"Continuous",color:"#4EC9E8"},{ix:"02",n:"Site performance",q:"Core Web Vitals across every template, on every deploy.",c:"Continuous",color:"#A595FF"},{ix:"03",n:"SEO & content",q:"Indexation, meta hygiene, schema, thin-content detection.",c:"Continuous",color:"#d97a14"},{ix:"04",n:"Data & tracking",q:"GA4 / GTM completeness, event accuracy, tagging drift.",c:"Continuous",color:"#6FBF73"},{ix:"05",n:"Customer voice",q:"Reviews, support tickets, Reclame Aqui signal.",c:"Continuous",color:"#2BA4C7"},{ix:"06",n:"Engineering velocity",q:"PR cycle time, merges & features shipped per week, review latency — read straight from your git history.",c:"Continuous",color:"#D0EC1A"}],$=`<!DOCTYPE html><html><head><style> 616${a} 617${s} 618${i} 619${m} 620@property --p { syntax: '<number>'; inherits: true; initial-value: 0; } 621body { display:flex; flex-direction:column; padding:48px 80px 40px; position:relative; overflow:hidden; 622 --p:0; transition: --p 1s cubic-bezier(.4,0,.2,1); animation:fadeIn .5s ease both; } 623body.revealed { --p:1; }
624${l(e.lime,"top:-240px; right:-160px;")} 625 626/* top bar: crossfading headers on the left, toggle button on the right */ 627.top { position:relative; z-index:5; display:flex; align-items:flex-start; justify-content:space-between; gap:48px; margin-bottom:22px; } 628.heads { position:relative; flex:1; min-height:150px; } 629.head { position:absolute; inset:0 auto auto 0; width:100%; } 630.head-diag { opacity:calc(1 - var(--p)); } 631.head-topics { opacity:var(--p); } 632.eyebrow { margin-bottom:14px; } 633h1.head-h { font-family:'Inter',sans-serif; font-weight:400; font-size:clamp(40px,3.4vw,54px); line-height:1.05; 634 letter-spacing:-.05em; color:${e.textHi}; max-width:1400px; } 635h1.head-h .accent { color:${e.lime}; } 636.sub { margin-top:12px; font-size:19px; font-weight:300; line-height:1.45; color:${e.textDim}; max-width:1150px; } 637 638.toggle { flex-shrink:0; margin-top:6px; display:inline-flex; align-items:center; gap:12px; cursor:pointer; 639 padding:14px 22px; border-radius:14px; background:${e.surface}; border:1px solid ${e.borderSt}; 640 color:${e.textHi}; font-family:'JetBrains Mono',monospace; font-size:13px; letter-spacing:.06em; text-transform:uppercase; 641 transition:border-color .25s, background .25s, transform .25s; } 642.toggle:hover { border-color:${e.lime}; background:#242120; transform:translateY(-1px); } 643.toggle .tg-ic { display:inline-flex; color:${e.lime}; } 644.toggle .tg-ic svg { display:block; } 645 646/* stage: two stacked layers */ 647.stage { flex:1; min-height:0; position:relative; } 648.layer { position:absolute; inset:0; } 649 650/* back layer â the topics the diagnostic examines */ 651.topics { z-index:1; opacity:var(--p); transform:scale(calc(1.03 - var(--p)*0.03)); pointer-events:none; 652 display:grid; grid-template-columns:0.9fr 1.6fr; gap:30px; } 653.hero { background:linear-gradient(160deg, #0a4d1f, ${e.limeDark}); border-radius:22px; padding:38px 40px; 654 display:flex; flex-direction:column; justify-content:center; box-shadow:0 26px 60px rgba(0,0,0,.4); border:1px solid rgba(208,236,26,.16); } 655.hero-big { font-family:'Inter',sans-serif; font-weight:600; font-size:104px; line-height:.9; letter-spacing:-.04em; color:#fff; } 656.hero-cap { font-size:22px; font-weight:500; color:${e.lime}; margin:6px 0 24px; letter-spacing:-.01em; } 657.hero-list { display:flex; flex-direction:column; } 658.hero-row { display:flex; justify-content:space-between; align-items:baseline; padding:14px 0; border-top:1px solid rgba(255,255,255,.16); } 659.hero-row:last-child { border-bottom:1px solid rgba(255,255,255,.16); } 660.hero-row .hn { font-family:'Inter',sans-serif; font-weight:600; font-size:30px; color:#fff; letter-spacing:-.02em; } 661.hero-row .hl { font-size:19px; color:rgba(255,255,255,.72); } 662.areas { display:flex; flex-direction:column; gap:9px; min-height:0; } 663.area { flex:1; display:flex; align-items:center; gap:22px; background:${e.surface}; border:1px solid ${e.border}; border-radius:15px; 664 padding:12px 26px; } 665.area.feat { border:1.5px solid rgba(208,236,26,.55); background:linear-gradient(90deg, rgba(208,236,26,.10), rgba(208,236,26,.015)); } 666.area-ix { font-family:'Inter',sans-serif; font-weight:600; font-size:26px; letter-spacing:-.03em; line-height:1; flex-shrink:0; width:40px; color:${e.lime}; } 667.area-mid { flex:1; } 668.area-mid .an { font-size:21px; font-weight:600; letter-spacing:-.02em; color:${e.textHi}; line-height:1.15; margin-bottom:3px; display:flex; align-items:center; gap:9px; } 669.area-mid .an .new { font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:${e.limeDark}; background:${e.lime}; border-radius:5px; padding:2px 7px; line-height:1; } 670.area-mid .aq { font-size:16px; font-weight:400; color:${e.textDim}; line-height:1.4; } 671.area-c { font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:${e.textMute}; flex-shrink:0; } 672/* topic cards surge in, staggered, each time the layer is revealed */ 673@keyframes cardUp { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:none; } } 674body.revealed .topics .hero { animation:cardUp .55s cubic-bezier(.2,.7,.3,1) both .05s; } 675body.revealed .topics .area { animation:cardUp .5s cubic-bezier(.2,.7,.3,1) both; } 676body.revealed .topics .area:nth-child(1) { animation-delay:.14s; } 677body.revealed .topics .area:nth-child(2) { animation-delay:.21s; } 678body.revealed .topics .area:nth-child(3) { animation-delay:.28s; } 679body.revealed .topics .area:nth-child(4) { animation-delay:.35s; } 680body.revealed .topics .area:nth-child(5) { animation-delay:.42s; } 681body.revealed .topics .area:nth-child(6) { animation-delay:.49s; } 682 683/* front layer â the live diagnostic, dissolves to reveal the back */ 684.diag { z-index:2; opacity:calc(1 - var(--p)); filter:blur(calc(var(--p)*2.5px));
685 transform:scale(calc(1 - var(--p)*0.015)); 686 -webkit-mask:linear-gradient(122deg, #000 calc(140% - var(--p)*185%), #0000 calc(159% - var(--p)*185%)); 687 mask:linear-gradient(122deg, #000 calc(140% - var(--p)*185%), #0000 calc(159% - var(--p)*185%)); } 688body.revealed .diag { pointer-events:none; } 689.frame { position:absolute; inset:0; border-radius:24px; overflow:hidden; 690 border:1px solid ${e.border}; box-shadow:0 40px 120px rgba(0,0,0,0.45); } 691.frame iframe { width:100%; height:100%; border:0; display:block; background:${e.bg}; } 692 693/* pixel band â bg-coloured squares confined to the moving dissolve edge */ 694.px { z-index:3; pointer-events:none; opacity:.9; 695 background-image:conic-gradient(${e.bg} 0 25%, #0000 0 50%, ${e.bg} 0 75%, #0000 0); 696 background-size:9px 9px; 697 -webkit-mask:linear-gradient(122deg, #0000 calc(127% - var(--p)*185%), #000 calc(141% - var(--p)*185%), #0000 calc(155% - var(--p)*185%)); 698 mask:linear-gradient(122deg, #0000 calc(127% - var(--p)*185%), #000 calc(141% - var(--p)*185%), #0000 calc(155% - var(--p)*185%)); } 699</style></head><body> 700<div class="top"> 701 <div class="heads"> 702 <div class="head head-diag"> 703 <p class="eyebrow">How we do it · 01 · Diagnose on loop</p> 704 <h1 class="head-h">A <span class="accent">live diagnostic</span> for every brand we operate.</h1> 705 <p class="sub">Pick a brand — the real report loads, benchmarked and revenue-sized. Click it to open the full diagnostic.</p> 706 </div> 707 <div class="head head-topics"> 708 <p class="eyebrow">How we do it · 01 · What we examine</p> 709 <h1 class="head-h"><span class="accent">400 checks</span> across your whole Digital Experience.</h1> 710 <p class="sub">The same engine that reads your storefront reads your git history — refreshed continuously, not once a year.</p> 711 </div> 712 </div> 713 <button class="toggle" id="tg" type="button" aria-pressed="false"> 714 <span class="tg-ic"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l9 5-9 5-9-5 9-5z"/><path d="M3 14l9 5 9-5"/></svg></span> 715 <span class="tg-label">See what we analyze</span> 716 </button> 717</div> 718<div class="stage"> 719 <div class="layer topics"> 720 <div class="hero"> 721 <div class="hero-big">400</div> 722 <div class="hero-cap">checks across your Digital Experience (example)</div> 723 <div class="hero-list"> 724 <div class="hero-row"><span class="hn">6</span><span class="hl">areas examined</span></div> 725 <div class="hero-row"><span class="hn">10+</span><span class="hl">data sources connected</span></div> 726 <div class="hero-row"><span class="hn">24/7</span><span class="hl">running on loop</span></div> 727 </div> 728 </div> 729 <div class="areas"> 730 ${C.map(t=>`<div class="area${t.feat?" feat":""}"><div class="area-ix">${t.ix}</div><div class="area-mid"><div class="an">${t.n}${t.isNew?'<span class="new">New</span>':""}</div><div class="aq">${t.q}</div></div><div class="area-c">${t.c}</div></div>`).join("")} 731 </div> 732 </div> 733 <div class="layer diag"> 734 <div class="frame"><iframe src="/embed/diagnostic" title="Live diagnostic showcase"></iframe></div> 735 </div> 736 <div class="layer px"></div> 737</div> 738<script> 739 var b=document.body,btn=document.getElementById('tg'),lbl=btn.querySelector('.tg-label'); 740 btn.addEventListener('click',function(){ 741 var on=b.classList.toggle('revealed'); 742 lbl.textContent=on?'Back to the live diagnostic':'See what we analyze'; 743 btn.setAttribute('aria-pressed',on?'true':'false'); 744 }); 745<\/script> 746</body></html>`,z=`<!DOCTYPE html><html><head><style> 747${a} 748${n} 749${i} 750${c} 751body { display:flex; flex-direction:column; padding:50px 80px 44px; position:relative; overflow:hidden; }
752${l(e.laccent,"top:-240px; right:-160px;")} 753.header { position:relative; z-index:1; margin-bottom:22px; } 754.eyebrow { margin-bottom:15px; } 755h1.head { font-family:'Inter',sans-serif; font-weight:400; font-size:clamp(42px,3.5vw,56px); line-height:1.04; 756 letter-spacing:-.05em; color:${e.ltext}; max-width:1500px; opacity:0; animation:fadeUp .7s ease forwards .15s; } 757h1.head .accent { color:${e.laccent}; } 758.sub { margin-top:12px; font-size:19px; font-weight:300; line-height:1.45; color:${e.lbody}; max-width:1350px; 759 opacity:0; animation:fadeUp .7s ease forwards .25s; } 760.stage { flex:1; min-height:0; position:relative; z-index:1; display:flex; gap:38px; align-items:stretch; } 761/* frame hugs the board: locked to its 1440/900 aspect, full stage height */ 762.frame { height:100%; aspect-ratio:1440 / 900; flex:0 0 auto; border-radius:18px; overflow:hidden; 763 border:1px solid ${e.lborder}; box-shadow:0 30px 80px rgba(7,64,26,.14); 764 opacity:0; animation:fadeUp .7s ease forwards .35s; } 765.frame iframe { width:100%; height:100%; border:0; display:block; background:#faf8f4; } 766.rail { flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:14px; 767 opacity:0; animation:fadeUp .7s ease forwards .45s; } 768.rstat { background:#fff; border:1px solid ${e.lborder}; border-radius:16px; padding:19px 24px; box-shadow:0 1px 2px rgba(7,64,26,.04); } 769.rstat .top { display:flex; align-items:baseline; gap:12px; } 770.rstat .dot { width:10px; height:10px; border-radius:3px; flex-shrink:0; align-self:center; } 771.rstat .sn { font-family:'Inter',sans-serif; font-weight:600; font-size:42px; letter-spacing:-.03em; color:${e.ltext}; line-height:1; } 772.rstat .sl { font-size:19px; font-weight:600; letter-spacing:-.01em; color:${e.ltext}; } 773.rstat .sd { margin-top:8px; font-size:15px; line-height:1.35; color:${e.lbody}; } 774.pipe { margin-top:4px; background:#fff; border:1px solid ${e.lborder}; border-radius:16px; padding:18px 24px; box-shadow:0 1px 2px rgba(7,64,26,.04); } 775.pipe .plabel { font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:${e.laccent}; font-weight:600; margin-bottom:12px; } 776.pipe .chain { display:flex; align-items:center; gap:10px; flex-wrap:wrap; } 777.pipe .pchip { font-size:16px; font-weight:500; color:${e.ltext}; } 778.pipe .psep { color:${e.lmute}; } 779</style></head><body> 780<div class="header"> 781 <p class="eyebrow">How we do it · 02 · A board that ships itself</p> 782 <h1 class="head">The plan becomes a <span class="accent">board that ships itself.</span></h1> 783 <p class="sub">Every finding lands on one prioritized board — agents do the work, your team approves what matters, and it ships end to end.</p> 784</div> 785<div class="stage"> 786 <div class="frame"><iframe src="/embed/studio-board" title="Live Studio board â agents at work"></iframe></div> 787 <div class="rail"> 788 <div class="rstat"><div class="top"><span class="dot" style="background:#4d80f2"></span><span class="sn">12</span><span class="sl">New opportunities</span></div><div class="sd">Fresh from this loop's diagnostic, priced by impact.</div></div> 789 <div class="rstat"><div class="top"><span class="dot" style="background:#eb8c1a"></span><span class="sn">5</span><span class="sl">In review</span></div><div class="sd">Waiting on your team's sign-off before they ship.</div></div> 790 <div class="rstat"><div class="top"><span class="dot" style="background:#73c752"></span><span class="sn">38</span><span class="sl">Shipped this month</span></div><div class="sd">One click from the board to production, fully logged.</div></div> 791 <div class="pipe"> 792 <div class="plabel">Connected end to end</div> 793 <div class="chain"> 794 <span class="pchip">GitHub</span><span class="psep">→</span> 795 <span class="pchip">CMS</span><span class="psep">→</span> 796 <span class="pchip">QA Agent</span><span class="psep">→</span> 797 <span class="pchip">Deploy</span> 798 </div> 799 </div> 800 </div> 801</div> 802</body></html>`,D=[{name:"Observability",tag:"System Health",tagClass:"",body:"<strong>Uptime and reliability, watched around the clock.</strong>Errors, regressions, and drift caught before a ticket gets filed."},{name:"QA",tag:"Quality",tagClass:"p",body:"<strong>Every change tested before it ships.</strong>Visual, functional, and regression checks run on each proposal."},{name:"Performance",tag:"Core Web Vitals",tagClass:"",body:"<strong>Speed as a standing target, not a project.</strong>LCP, INP, and CLS monitored and fixed continuously."},{name:"Content",tag:"SEO / GEO",tagClass:"p",body:"<strong>
802Findable by people and by AI.</strong>Schema, indexation, and citability kept current as the web changes."}];`${a}${s}${i}${b}${e.lime}${e.border}${e.textDim}${e.text}${e.border}${e.surface}${e.lime}${e.border}${e.text}${e.lime}${e.purple}${e.textDim}${e.text}${D.map(t=>`<div class="card"> 803 <div class="video-wrap embed-slot">[[embed]] ${t.name} GIF / demo</div> 804 <div class="meta"> 805 <div class="row1"> 806 <span class="name">${t.name}</span> 807 <span class="lever mono ${t.tagClass}">${t.tag}</span> 808 </div> 809 <p class="body">${t.body}</p> 810 </div> 811 </div>`).join("")}`;const d=[{tag:"Managed platform",name:"No service included",accent:"#9a9890",items:["<b>R$1,000</b> per seat, per month (example)","<b>+ 10%</b> of AI usage","Self-serve, your team drives"]},{tag:"Self-hosted",name:"Using our OSS",accent:"#2BA4C7",items:["You run the stack on your own infrastructure","<b>We set up and support,</b> acting as a service team","Full data residency, your perimeter"]},{tag:"AI-Service",name:"We own your Digital Experience",accent:"#8caa25",feat:!0,items:["All technology included, nothing to license separately","<b>You pay for outcomes,</b> as a percentage of your GMV","When your storefront sells more, we earn more"]}],M=`<!DOCTYPE html><html><head><style> 812${a} 813${n} 814${i} 815${c} 816body { display:flex; flex-direction:column; padding:56px 88px 52px; position:relative; overflow:hidden; }
817${l(e.laccent,"top:-240px; left:-160px;")} 818.header { position:relative; z-index:1; margin-bottom:26px; } 819h1.head { font-family:'Inter',sans-serif; font-weight:400; font-size:clamp(50px,4.8vw,72px); line-height:1.05; 820 letter-spacing:-0.05em; color:${e.ltext}; opacity:0; animation:fadeUp .7s ease forwards .15s; } 821h1.head .accent { color:${e.laccent}; } 822/* spectrum axis â a gradient rail with a node centred over each model */ 823.axiswrap { position:relative; z-index:1; margin:0 6px 22px; opacity:0; animation:fadeUp .6s ease forwards .3s; } 824.axis { position:relative; display:grid; grid-template-columns:1fr 1fr 1.22fr; gap:22px; align-items:center; height:16px; } 825.axis::before { content:""; position:absolute; left:12px; right:12px; top:50%; height:4px; border-radius:2px; transform:translateY(-50%); 826 background:linear-gradient(90deg, #cfcbc4 0%, #2BA4C7 55%, ${e.laccent} 100%); } 827.anode { justify-self:center; position:relative; z-index:1; width:15px; height:15px; border-radius:50%; 828 background:var(--c); box-shadow:0 0 0 4px #fafaf9, 0 0 0 6px var(--c); } 829.axis-labels { display:flex; justify-content:space-between; margin-top:14px; 830 font-family:'JetBrains Mono',monospace; font-size:13px; letter-spacing:.07em; text-transform:uppercase; color:${e.lmute}; } 831.axis-labels .r { color:${e.laccent}; font-weight:600; } 832/* model panels */ 833.grid { flex:1; min-height:0; position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr 1.22fr; gap:22px; 834 opacity:0; animation:fadeUp .65s ease forwards .4s; } 835.pan { position:relative; background:#fff; border:1px solid ${e.lborder}; border-radius:20px; padding:32px 34px; 836 display:flex; flex-direction:column; box-shadow:0 1px 3px rgba(7,64,26,.05); 837 transition:transform .4s cubic-bezier(.34,1.4,.64,1), box-shadow .35s; } 838.pan:hover { transform:translateY(-6px); box-shadow:0 22px 48px rgba(7,64,26,.1); } 839.pan.feat { border:1.5px solid ${e.laccent}; background:linear-gradient(180deg, rgba(140,170,37,.09), #fff 42%); 840 box-shadow:0 24px 60px rgba(140,170,37,.16); } 841.pan .ptag { display:inline-flex; align-items:center; gap:9px; font-family:'JetBrains Mono',monospace; font-size:13px; 842 letter-spacing:.1em; text-transform:uppercase; color:var(--c); font-weight:600; } 843.pan .flag { font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.08em; text-transform:uppercase; 844 color:${e.limeDark}; background:${e.lime}; border-radius:5px; padding:2px 7px; } 845.pan .pname { font-size:28px; font-weight:600; letter-spacing:-.02em; color:${e.ltext}; margin:11px 0 2px; } 846.pan ul { list-style:none; margin-top:16px; padding-top:6px; border-top:1px solid ${e.lborder}; } 847.pan li { padding:13px 0; border-bottom:1px solid ${e.lborder}; font-size:18px; line-height:1.35; color:#4a4744; } 848.pan li:last-child { border-bottom:none; padding-bottom:0; } 849.pan li b { color:${e.ltext}; font-weight:600; } 850</style></head><body> 851<div class="header"> 852 <p class="eyebrow">How you can hire us</p> 853 <h1 class="head">Three ways to <span class="accent">work with deco.</span></h1> 854</div> 855<div class="axiswrap"> 856 <div class="axis"> 857 ${d.map(t=>`<span class="anode" style="--c:${t.accent}"></span>`).join("")} 858 </div> 859 <div class="axis-labels"><span>You drive · pay for software</span><span class="r">We operate · pay for outcomes</span></div> 860</div> 861<div class="grid"> 862 ${d.map(t=>`<div class="pan${t.feat?" feat":""}" style="--c:${t.accent}"> 863 <span class="ptag">${t.tag}${t.feat?'<span class="flag">Flagship</span>':""}</span> 864 <div class="pname">${t.name}</div> 865 <ul>${t.items.map(o=>`<li>${o}</li>`).join("")}</ul> 866 </div>`).join("")} 867</div> 868</body></html>`,P=`<!DOCTYPE html><html><head><style> 869${a} 870${n} 871${i} 872${c} 873body { display:flex; flex-direction:column; padding:56px 88px 52px; position:relative; overflow:hidden; }
874${l(e.laccent,"top:-240px; right:-160px;")} 875.header { position:relative; z-index:1; margin-bottom:28px; } 876h1.head { font-family:'Inter',sans-serif; font-weight:400; font-size:clamp(50px,4.8vw,72px); line-height:1.05; 877 letter-spacing:-0.05em; color:${e.ltext}; opacity:0; animation:fadeUp .7s ease forwards .15s; } 878h1.head .accent { color:${e.laccent}; } 879.stage { flex:1; min-height:0; position:relative; z-index:1; display:grid; grid-template-columns:1.5fr 1fr; gap:26px; 880 opacity:0; animation:fadeUp .65s ease forwards .35s; } 881 882/* whale â the primary offer, a filled forest hero */ 883.whale { position:relative; overflow:hidden; border-radius:24px; padding:50px 54px; 884 background:linear-gradient(155deg, #0a4d1f, ${e.ltext}); color:#fff; display:flex; flex-direction:column; 885 box-shadow:0 30px 80px rgba(7,64,26,.28); border:1px solid rgba(208,236,26,.18); } 886.whale .qual { display:inline-flex; align-items:center; gap:9px; align-self:flex-start; 887 font-family:'JetBrains Mono',monospace; font-size:14px; letter-spacing:.07em; text-transform:uppercase; 888 color:${e.lime}; background:rgba(208,236,26,.12); border:1px solid rgba(208,236,26,.32); border-radius:999px; padding:8px 16px; } 889.whale h2 { font-family:'Inter',sans-serif; font-weight:500; font-size:clamp(40px,4vw,60px); line-height:1.02; 890 letter-spacing:-.03em; margin:22px 0 4px; } 891.whale h2 em { font-style:normal; color:${e.lime}; } 892.whale ul { list-style:none; margin:20px 0 0; } 893.whale li { display:flex; gap:14px; align-items:flex-start; padding:13px 0; font-size:21px; line-height:1.35; 894 color:rgba(255,255,255,.9); border-top:1px solid rgba(255,255,255,.14); } 895.whale li:first-child { border-top:none; } 896.whale li .ck { color:${e.lime}; font-weight:700; flex-shrink:0; } 897.cta { margin-top:auto; padding-top:30px; } 898.cta a { display:inline-flex; align-items:center; gap:12px; background:${e.lime}; color:${e.limeDark}; 899 font-size:20px; font-weight:600; letter-spacing:-.01em; padding:18px 30px; border-radius:14px; text-decoration:none; 900 box-shadow:0 12px 30px rgba(208,236,26,.25); transition:transform .2s, filter .2s; } 901.cta a:hover { transform:translateY(-2px); filter:brightness(1.04); } 902 903/* mid-market â the secondary offer, a light card */ 904.mid { background:#fff; border:1px solid ${e.lborder}; border-radius:24px; padding:44px 42px; 905 display:flex; flex-direction:column; box-shadow:0 1px 3px rgba(7,64,26,.05); } 906.mid .mtag { font-family:'JetBrains Mono',monospace; font-size:14px; letter-spacing:.1em; text-transform:uppercase; color:${e.laccent}; font-weight:600; } 907.mid h3 { font-size:34px; font-weight:600; letter-spacing:-.02em; color:${e.ltext}; margin:12px 0 2px; } 908.mid ul { list-style:none; margin-top:18px; } 909.mid li { padding:15px 0; border-top:1px solid ${e.lborder}; font-size:19px; line-height:1.35; color:#4a4744; } 910.mid li:first-child { border-top:none; } 911</style></head><body> 912<div class="header"> 913 <p class="eyebrow">Next step</p> 914 <h1 class="head">Where you <span class="accent">start</span> depends on who you are.</h1> 915</div> 916<div class="stage"> 917 <div class="whale"> 918 <span class="qual">Above R$100M in GMV</span> 919 <h2>30 days, <em>on us.</em></h2> 920 <ul> 921 <li><span class="ck">✓</span><span>30 days of free operation</span></li> 922 <li><span class="ck">✓</span><span>We run a live diagnostic on your storefront</span></li> 923 <li><span class="ck">✓</span><span>You see the model at work before you decide</span></li> 924 </ul> 925 <div class="cta"> 926 <a href="https://www.decocms.com/agendar" target="_blank" rel="noopener noreferrer">Book a call <span>→</span></a> 927 </div> 928 </div> 929 <div class="mid"> 930 <span class="mtag">Mid-market</span> 931 <h3>A free full report</h3> 932 <ul> 933 <li>Complete diagnostic across the 6 areas</li> 934 <li>Prioritized opportunities, no commitment</li> 935 </ul> 936 </div> 937</div> 938</body></html>`,S=`<!DOCTYPE html><html><head><style> 939${a} 940${s} 941${i} 942${m} 943body { position:relative; display:flex; flex-direction:column; justify-content:center; 944 align-items:center; padding:80px 96px; overflow:hidden; } 945.orb { position:absolute; border-radius:50%; filter:blur(160px); opacity:.11; pointer-events:none; } 946.orb-a { width:800px;height:800px; top:-260px;right:-200px; background:${e.lime}; animation:orbA 18s ease-in-out infinite; } 947.orb-b { width:600px;height:600px; bottom:-180px;left:-180px; background:${e.purple}; animation:orbB 22s ease-in-out infinite; } 948nav { position:absolute; top:52px; left:96px; z-index:10; 949 opacity:0; animation:fadeDown .7s ease forwards .1s; } 950.content { position:relative; z-index:2; text-align:center; max-width:1280px; } 951.eyebrow { margin-bottom:24px; } 952.mantra { display:flex; flex-direction:column; gap:6px; } 953.line { font-family:'Instrument Serif',serif; font-weight:400; 954 font-size:clamp(48px,6.2vw,96px); line-height:1.08; letter-spacing:-.03em; 955 opacity:0; animation:fadeUp .7s ease forwards; } 956.line:nth-child(1){animation-delay:.35s} .line:nth-child(2){animation-delay:.6s} .line:nth-child(3){animation-delay:.85s} 957.line span { color:${e.textDim}; } 958.line em { color:${e.lime}; font-style:italic; } 959.divider { width:72px; height:1px; background:${e.border};
959 margin:36px auto; 960 opacity:0; animation:fadeIn .5s ease forwards 1.15s; } 961.other { font-size:clamp(16px,1.35vw,21px); color:${e.textDim}; line-height:1.55; max-width:1000px; margin:0 auto; 962 opacity:0; animation:fadeUp .5s ease forwards 1.3s; } 963.other strong { color:${e.text}; font-weight:500; } 964</style></head><body> 965<div class="orb orb-a"></div> 966<div class="orb orb-b"></div> 967<nav>${p}</nav> 968<div class="content"> 969 <p class="eyebrow">The way of deco</p> 970 <div class="mantra"> 971 <p class="line"><span>Agents do</span> <em>the work.</em></p> 972 <p class="line"><span>Humans keep</span> <em>the judgment.</em></p> 973 <p class="line"><span>You keep</span> <em>the upside.</em></p> 974 </div> 975 <div class="divider"></div> 976 <p class="other"><strong>Do the work. Find the pattern. Build the primitive. Reuse the agent.</strong></p> 977</div> 978</body></html>`,A={id:"thewayofdeco_2026",title:"deco · The Way of Deco",slides:[{id:"01_cover",html:u},{id:"02_proof",html:v},{id:"03_accelerate",html:y},{id:"04_flip_old",html:w},{id:"05_flip_governance",html:k},{id:"06_diagnose",html:$,label:"Diagnose · live + reveal"},{id:"07_board",html:z},{id:"09_hire",html:M},{id:"10_next_step",html:P},{id:"11_closing",html:S}]};function I(){const t=f.c(1);let o;return t[0]===Symbol.for("react.memo_cache_sentinel")?(o=r.jsxs(r.Fragment,{children:[r.jsx("style",{dangerouslySetInnerHTML:{__html:g}}),r.jsx(h,{deck:A,pdfUrl:null})]}),t[0]=o):o=t[0],o}export{I as component};
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.