1<!DOCTYPE html> 2<html lang="pt-BR"> 3<head> 4<meta charset="UTF-8"/> 5<meta name="viewport" content="width=device-width, initial-scale=1"/> 6<title>Portfólio · Agência Mi</title> 7<meta name="description" content="O que a gente cria, entrega e deixa no mundo. Sites, branding, campanhas e sistemas que cutucaram o óbvio em cada nicho."/> 8<link rel="canonical" href="https://agenciami.digital/portfolio"/> 9<link rel="icon" href="/assets/mi-logo-cor.svg"/> 10 11<!-- Page transition (pre-painted reveal, zero-FOUC) --> 12<style> 13html[data-mitx]::before{content:"";position:fixed;top:0;left:0;right:0;height:calc(100vh + 30px);background:#00A1F9;z-index:9999;pointer-events:none; 14 -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'><path d='M0,0 L1200,0 L1200,98 C1000,99 800,97 600,98 C400,99 200,97 0,98 Z' fill='white'/></svg>"); 15 mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'><path d='M0,0 L1200,0 L1200,98 C1000,99 800,97 600,98 C400,99 200,97 0,98 Z' fill='white'/></svg>"); 16 -webkit-mask-size:100% 100%;mask-size:100% 100%; 17 -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; 18 animation:miCoverOut .65s cubic-bezier(.86,0,.07,1) forwards;} 19@keyframes miCoverOut{from{transform:translateY(0);}to{transform:translateY(-100%);}} 20@media (prefers-reduced-motion: reduce){html[data-mitx]::before{animation:none;transform:translateY(-100%);}} 21</style>
22<script>(function(){try{if(sessionStorage.getItem("mi-tx")){sessionStorage.removeItem("mi-tx");document.documentElement.dataset.mitx="1";}}catch(e){}})();</script>
22 23
24<script>window.MI_PB = { url: 'https://cms.agenciami.digital' };</script>
vendor: 1 bytes, line 24
24
25<script defer src="/portfolio.js?v=2026091401"></script>
25 26 27<link rel="preconnect" href="https://cms.agenciami.digital" crossorigin/> 28<link rel="preconnect" href="https://fonts.googleapis.com"/> 29<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/> 30<link href="https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;600;700;900&family=Inter:wght@300;400;500;600&family=Playfair+Display:ital,wght@1,400;1,600&display=swap" rel="stylesheet"/> 31<link rel="stylesheet" href="/partials/site.css?v=2026092002"/> 32 33<style> 34:root{ 35 --mi-cobalto:#00A1F9; --mi-abismo:#0056C2; --mi-noite:#003D7A; 36 --mi-celeste:#4DBEFF; --mi-nevoa:#7ECBF7; --mi-aurora:#C8E8FD; --mi-gelo:#E8F5FF; 37 --mi-limao:#F5D23A; --mi-ambar:#F4B333; --mi-ocre:#C8A000; --mi-palha:#FAEBA0; 38 --mi-carvao:#0B0B14; --mi-ardosia:#1A1A2A; --mi-grafite:#2E2E44; 39 --mi-pewter:#5A5A78; --mi-neblina:#8888A0; --mi-prata:#C2C2D4; --mi-branco:#F7F7F5; 40 --r-s:8px; --r-m:12px; --r-l:16px; --r-xl:20px; --r-2xl:24px; --r-pill:100px; 41 --display:"Source Sans 3","Inter",system-ui,-apple-system,sans-serif; 42 --sans:"Inter","Source Sans 3",system-ui,-apple-system,sans-serif; 43 --italic:"Playfair Display",Georgia,serif; 44 --mono:ui-monospace,SFMono-Regular,"JetBrains Mono",Menlo,monospace; 45 --ease:cubic-bezier(.22,1,.36,1); 46 --ease-out:cubic-bezier(.4,0,.2,1); 47} 48*,*::before,*::after{box-sizing:border-box;} 49html{scroll-behavior:smooth;} 50html,body{margin:0;padding:0;background:var(--mi-branco);color:var(--mi-carvao);} 51body{font-family:var(--sans);font-weight:400;font-size:16px;line-height:1.6; 52 -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;} 53img,svg{max-width:100%;display:block;} 54a{color:inherit;text-decoration:none;} 55button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;} 56.editorial{font-family:var(--italic);font-style:italic;font-weight:400;} 57.shell{max-width:1320px;margin:0 auto;padding:0 32px;width:100%;} 58@media (max-width:768px){ .shell{padding:0 20px;} } 59 60/* ===================== NAV (light) ===================== */ 61.nav{position:fixed;top:0;left:0;right:0;z-index:80;padding:14px 0; 62 transition:background-color .35s var(--ease-out),backdrop-filter .35s var(--ease-out),padding .35s var(--ease-out),border-color .35s var(--ease-out); 63 border-bottom:1px solid transparent;} 64.nav.scrolled{background:rgba(255,255,255,.85);backdrop-filter:saturate(160%) blur(18px); 65 -webkit-backdrop-filter:saturate(160%) blur(18px); 66 padding:10px 0;border-bottom-color:rgba(11,11,20,.07);} 67.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;} 68.nav-logo img{height:90px;width:auto;transition:height .35s var(--ease-out);} 69.nav.scrolled .nav-logo img{height:60px;} 70.nav-links{display:flex;gap:6px;align-items:center;} 71.nav-links a{font-size:14px;font-weight:500;color:var(--mi-grafite); 72 padding:10px 16px;border-radius:var(--r-pill); 73 transition:color .2s,background-color .2s;} 74.nav-links a:hover{color:var(--mi-cobalto);background:rgba(0,161,249,.08);} 75.nav-links a.is-active{color:#fff;background:var(--mi-cobalto);} 76.nav-cta{position:relative;display:inline-flex;align-items:center; 77 height:44px;padding:4px 52px 4px 22px; 78 border-radius:var(--r-pill);background:var(--mi-cobalto);color:#fff; 79 font-weight:600;font-size:13px;line-height:1;overflow:hidden;cursor:pointer; 80 transition:padding .5s var(--ease-out),background-color .25s ease;} 81.nav-cta:hover{padding:4px 22px 4px 52px;background:var(--mi-cobalto-hover, #0091e0);} 82.nav-cta-text{position:relative;z-index:1;} 83.nav-cta-icon{position:absolute;right:4px;top:4px;width:36px;height:36px; 84 background:#fff;color:var(--mi-cobalto);border-radius:50%; 85 display:flex;align-items:center;justify-content:center; 86 transition:right .5s var(--ease-out),transform .5s var(--ease-out);} 87.nav-cta:hover .nav-cta-icon{right:calc(100% - 40px);transform:rotate(45deg);} 88.nav-cta-icon svg{width:13px;height:13px;stroke:currentColor;fill:none; 89 stroke-width:2;stroke-linecap:round;stroke-linejoin:round;} 90@media (max-width:991px){ 91 .nav-links,.nav-cta{display:none;} 92 93} 94 95/* ===================== HERO ===================== */ 96.portfolio-page{padding:188px 0 96px;} 97 98.portfolio-back{margin-bottom:32px;} 99.portfolio-back a{display:inline-flex;align-items:center;gap:8px; 100 font-family:var(--mono);font-size:12px;
100color:var(--mi-pewter); 101 letter-spacing:.10em;text-transform:uppercase;font-weight:600;transition:color .2s;} 102.portfolio-back a:hover{color:var(--mi-cobalto);} 103.portfolio-back svg{width:14px;height:14px;stroke:currentColor;fill:none; 104 stroke-width:2;stroke-linecap:round;stroke-linejoin:round; 105 transition:transform .25s ease;} 106.portfolio-back a:hover svg{transform:translateX(-3px);} 107.portfolio-back.hidden{display:none;} 108 109.portfolio-head{text-align:center;margin-bottom:64px;max-width:780px;margin-left:auto;margin-right:auto;} 110.portfolio-eyebrow{display:inline-flex;align-items:center;gap:10px; 111 font-family:var(--mono);font-size:12px;font-weight:600; 112 color:var(--mi-pewter);letter-spacing:.16em;text-transform:uppercase;margin-bottom:18px;} 113/* travessões removidos */ 114.portfolio-title{font-family:var(--display);font-weight:700; 115 font-size:clamp(44px,6vw,84px);line-height:1.04;letter-spacing:-0.025em; 116 color:var(--mi-carvao);margin:0 0 24px;} 117.portfolio-title .accent{color:var(--mi-cobalto);} 118.portfolio-subtitle{margin:0 auto;color:var(--mi-pewter);font-size:18px;line-height:1.6; 119 max-width:620px;font-weight:400;} 120 121/* Filtro de categorias (chips) */ 122.portfolio-cats{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:36px;} 123/* A regra de baixo (perto de .proj-card.is-flipping) só redefine transition. 124 Esta aqui é a que dá forma ao chip â sem ela ele vira texto solto com 125 fundo azul colado nas letras. Não é duplicata. */ 126.port-chip{display:inline-flex;align-items:center;padding:10px 20px; 127 border-radius:var(--r-pill, 100px);background:#fff; 128 border:1px solid rgba(11,11,20,.10); 129 font-size:14px;font-weight:500;line-height:1.2;color:var(--mi-grafite);} 130.port-chip:hover{background:rgba(0,161,249,.08);color:var(--mi-cobalto);border-color:rgba(0,161,249,.25);transform:translateY(-1px);} 131.port-chip.active{background:var(--mi-cobalto);color:#fff;border-color:transparent;} 132 133/* ===================== GRID DE CASES ===================== */ 134.portfolio-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;} 135@media (max-width:768px){.portfolio-grid{grid-template-columns:1fr;}} 136 137.proj-card{position:relative;display:block; 138 border-radius:var(--r-2xl);overflow:hidden; 139 aspect-ratio:4/3; 140 background:var(--mi-ardosia); 141 transition:transform .5s var(--ease),box-shadow .5s var(--ease);} 142.proj-card:hover{transform:translateY(-4px);box-shadow:0 30px 60px -20px rgba(0,0,0,.30);} 143 144.proj-art{position:absolute;inset:0; 145 background-size:cover;background-position:center; 146 transition:transform .8s var(--ease);} 147.proj-card:hover .proj-art{transform:scale(1.05);} 148.proj-art.p1{background-image:linear-gradient(135deg,#003D7A,var(--mi-cobalto));} 149.proj-art.p2{background-image:linear-gradient(135deg,var(--mi-ardosia),var(--mi-grafite));} 150.proj-art.p3{background-image:linear-gradient(135deg,var(--mi-noite),var(--mi-cobalto));} 151.proj-art.p4{background-image:linear-gradient(135deg,var(--mi-limao),var(--mi-ambar));} 152 153.proj-overlay{position:absolute;inset:0; 154 background:linear-gradient(to bottom,transparent 35%,rgba(0,0,0,.78) 100%); 155 display:flex;flex-direction:column;justify-content:flex-end; 156 padding:32px 32px 28px;} 157.proj-cat{font-family:var(--mono);font-size:11px;color:var(--mi-celeste); 158 letter-spacing:.14em;text-transform:uppercase;font-weight:600;} 159.proj-title{font-family:var(--display);font-weight:700; 160 font-size:clamp(22px,2.4vw,30px);line-height:1.12;letter-spacing:-0.018em; 161 margin:6px 0 14px;color:#fff;} 162.proj-cta{display:inline-flex;align-items:center;gap:8px; 163 font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.14em; 164 text-transform:uppercase;color:#fff; 165 width:fit-content; 166 padding:8px 4px; 167 border-bottom:1px solid rgba(255,255,255,.35); 168 transition:gap .25s var(--ease),border-color .25s ease;} 169.proj-card:hover .proj-cta{gap:14px;border-color:var(--mi-cobalto);} 170.proj-cta svg{width:14px;height:14px;stroke:currentColor;fill:none; 171 stroke-width:2;stroke-linecap:round;stroke-linejoin:round; 172 transition:transform .25s ease;} 173.proj-card:hover .proj-cta svg{transform:translate(2px,-2px);} 174 175.proj-arrow{position:absolute;top:24px;right:24px; 176 width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.96);
177 color:var(--mi-carvao);display:flex;align-items:center;justify-content:center; 178 transition:transform .4s var(--ease),background-color .3s,color .3s; 179 z-index:2;} 180.proj-card:hover .proj-arrow{transform:rotate(-45deg);background:var(--mi-cobalto);color:#fff;} 181.proj-arrow svg{width:16px;height:16px;stroke:currentColor;fill:none; 182 stroke-width:2;stroke-linecap:round;stroke-linejoin:round;} 183 184/* ===================== FILTER STATES (SPA) ===================== */ 185.proj-card.is-hidden{display:none;} 186.proj-card.is-leaving{ 187 animation:cardFadeOut .28s var(--ease) forwards; 188 pointer-events:none; 189} 190.proj-card.is-entering{ 191 animation:cardFadeIn .45s var(--ease) forwards; 192} 193@keyframes cardFadeOut{ 194 0% { opacity:1; transform:scale(1); } 195 100% { opacity:0; transform:scale(.92); } 196} 197@keyframes cardFadeIn{ 198 0% { opacity:0; transform:scale(.92); } 199 100% { opacity:1; transform:scale(1); } 200} 201/* Quando aplicamos FLIP via inline style, queremos que a transição funcione */ 202.proj-card.is-flipping{ 203 transition:transform .55s cubic-bezier(.22,1,.36,1) !important; 204} 205 206/* Chips ganham um leve glow ao virar ativo */ 207.port-chip{ 208 transition:background-color .25s ease, color .25s ease, border-color .25s ease, 209 transform .25s ease, box-shadow .25s ease; 210} 211.port-chip.active{box-shadow:0 6px 18px rgba(0,161,249,.30);} 212 213/* ===================== EMPTY / SKELETON ===================== */ 214.portfolio-empty{padding:80px 32px;text-align:center; 215 font-family:var(--mono);font-size:13px;color:var(--mi-pewter); 216 background:#fff;border:1px dashed rgba(11,11,20,.10); 217 border-radius:var(--r-xl);grid-column:1 / -1;} 218 219.skeleton-card{aspect-ratio:4/3;border-radius:var(--r-2xl); 220 background:linear-gradient(90deg,rgba(11,11,20,.04) 25%,rgba(11,11,20,.08) 50%,rgba(11,11,20,.04) 75%); 221 background-size:200% 100%;animation:skel 1.4s linear infinite;} 222@keyframes skel{0%{background-position:200% 0;}100%{background-position:-200% 0;}} 223 224/* ===================== ANIMATIONS ===================== */ 225.fx-up{opacity:0;transform:translateY(24px); 226 transition:opacity .8s var(--ease),transform .8s var(--ease);} 227.fx-up.in{opacity:1;transform:translateY(0);} 228 229/* ===================== FOOTER ===================== */ 230 231/* Footer + brain animado: estilos em /partials/site.css */ 232 233</style>
234<script type="application/ld+json" data-mi-jsonld="org"> 235{ 236 "@context": "https://schema.org", 237 "@type": [ 238 "Organization", 239 "ProfessionalService" 240 ], 241 "@id": "https://agenciami.digital/#organization", 242 "name": "Agência Mi Digital", 243 "alternateName": "Mi", 244 "url": "https://agenciami.digital", 245 "logo": { 246 "@type": "ImageObject", 247 "url": "https://agenciami.digital/assets/mi-logo-cor.svg" 248 }, 249 "image": "https://agenciami.digital/assets/mi-logo-cor.svg", 250 "description": "Agência digital fundada em 2008 em Porto Alegre. Estratégia, design e tecnologia que cutucam o óbvio.", 251 "foundingDate": "2008", 252 "email": "[email protected]", 253 "telephone": "+55-51-98181-3798", 254 "priceRange": "$$", 255 "address": { 256 "@type": "PostalAddress", 257 "streetAddress": "Rua Pereira Franco, 65 / 201", 258 "addressLocality": "Porto Alegre", 259 "addressRegion": "RS", 260 "addressCountry": "BR" 261 }, 262 "areaServed": { 263 "@type": "Country", 264 "name": "Brasil" 265 }, 266 "contactPoint": [ 267 { 268 "@type": "ContactPoint", 269 "telephone": "+55-51-98181-3798", 270 "email": "[email protected]", 271 "contactType": "sales", 272 "areaServed": "BR", 273 "availableLanguage": [ 274 "Portuguese" 275 ] 276 } 277 ], 278 "founder": { 279 "@type": "Person", 280 "name": "Róger Perotto" 281 }, 282 "sameAs": [ 283 "https://www.instagram.com/agenciami.digital/", 284 "https://www.linkedin.com/company/agenciamidigital/", 285 "https://www.facebook.com/agenciami.digital", 286 "https://www.tiktok.com/@agenciami.digital" 287 ], 288 "knowsAbout": [ 289 "Desenvolvimento de sites", 290 "Identidade visual", 291 "Tráfego pago", 292 "Gestão de redes sociais", 293 "E-mail marketing", 294 "Automação de processos", 295 "SEO e GEO", 296 "Criação gráfica", 297 "Sistemas web" 298 ] 299} 300</script>
vendor: 1 bytes, line 300
300
301<script type="application/ld+json" data-mi-jsonld="breadcrumb"> 302{ 303 "@context": "https://schema.org", 304 "@type": "BreadcrumbList", 305 "itemListElement": [ 306 { 307 "@type": "ListItem", 308 "position": 1, 309 "name": "InÃcio", 310 "item": "https://agenciami.digital/" 311 }, 312 { 313 "@type": "ListItem", 314 "position": 2, 315 "name": "Portfólio", 316 "item": "https://agenciami.digital/portfolio" 317 } 318 ] 319} 320</script>
320 321 <!-- Autodescoberta do feed: leitores de RSS e vários rastreadores 322 procuram esta linha pra saber que o site publica conteúdo novo. --> 323 <link rel="alternate" type="application/rss+xml" title="Blog da Agência Mi Digital" href="https://agenciami.digital/feed.xml" /> 324</head> 325<body> 326 327<!-- Header universal â markup em /partials/header.html --> 328 329<!-- Header inlinado no build. Antes vinha por fetch() no site.js: sem JS o 330 site inteiro ficava com 1 link por página e nenhum grafo de navegação 331 pra crawler de IA seguir. O inject() do site.js pula o fetch quando o 332 slot já tem conteúdo, então o comportamento no cliente não muda. 333 Fonte da verdade continua sendo /partials/header.html. --> 334<div id="site-header"> 335<!-- 336 Header universal â Agência Mi 337 Editar este arquivo afeta TODAS as páginas do site. 338 O mega menu de serviços é renderizado dinamicamente em /partials/site.js 339 a partir dos dados em /partials/services-data.js 340--> 341<header class="nav" id="nav"> 342 <div class="shell nav-inner"> 343 <a class="nav-logo" href="/" aria-label="Agência Mi · home"> 344 <img src="/assets/mi-logo-cor.svg" alt="Agência Mi"/> 345 </a> 346 <nav class="nav-links" aria-label="Principal"> 347 <a href="/sobre">Sobre</a> 348 <span class="nav-item-services"> 349 <a href="/servicos" aria-haspopup="true" aria-expanded="false">Serviços</a> 350 </span> 351 <a href="/portfolio">Portfólio</a> 352 <a href="/blog">Blog</a> 353 <a href="/perguntas-frequentes">FAQ</a> 354 </nav> 355 <a class="nav-cta" href="/vamos-conversar"> 356 <span class="nav-cta-text">Vamos conversar</span> 357 <span class="nav-cta-icon"> 358 <svg viewBox="0 0 16 16"><path d="M5 11l6-6M6 5h5v5"/></svg> 359 </span> 360 </a> 361 <div class="social nav-social" aria-label="Redes sociais Agência Mi"> 362 <a class="so" data-net="ig" href="https://www.instagram.com/agenciami.digital/" target="_blank" rel="noopener noreferrer" aria-label="Instagram da Agência Mi"> 363 <svg viewBox="0 0 24 24" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"><path d="M7 2h10c2.76 0 5 2.24 5 5v10c0 2.76-2.24 5-5 5H7c-2.76 0-5-2.24-5-5V7c0-2.76 2.24-5 5-5zm10 3.75a1.25 1.25 0 100 2.5 1.25 1.25 0 000-2.5zM12 8a4 4 0 100 8 4 4 0 000-8z"/></svg> 364 </a> 365 <a class="so" data-net="li" href="https://www.linkedin.com/company/agenciamidigital/" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn da Agência Mi"> 366 <svg viewBox="0 0 24 24" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"><path d="M3 3h18v18H3V3zm5 4.5a1.7 1.7 0 100 3.4 1.7 1.7 0 000-3.4zM6 12h3v8H6v-8zm5.5 0h3v1.2c.5-.6 1.4-1.4 2.7-1.4 2 0 3.3 1.3 3.3 3.7V20h-3v-4.6c0-1-.4-1.6-1.3-1.6-.8 0-1.3.5-1.5 1-.1.3-.2.6-.2 1V20h-3v-8z"/></svg> 367 </a> 368 <a class="so" data-net="fb" href="https://www.facebook.com/agenciami.digital" target="_blank" rel="noopener noreferrer" aria-label="Facebook da Agência Mi"> 369 <svg viewBox="0 0 24 24" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"><path d="M12 2C6.48 2 2 6.48 2 12c0 5.52 4.48 10 10 10s10-4.48 10-10C22 6.48 17.52 2 12 2zm1.5 18.93V14h2.5l.5-3H13.5V9c0-.55.45-1 1-1H17V5h-3c-1.93 0-3.5 1.57-3.5 3.5V11H8v3h2.5v6.93c.49.05.99.07 1.5.07s1.01-.02 1.5-.07z"/></svg> 370 </a> 371 <a class="so" data-net="tk" href="https://www.tiktok.com/@agenciami.digital" target="_blank" rel="noopener noreferrer" aria-label="TikTok da Agência Mi"> 372 <svg viewBox="0 0 24 24" fill="currentColor"><path d="M19.5 6.5c-1.86-.4-3.36-1.9-3.76-3.76V2h-3.4v13.5c0 1.66-1.34 3-3 3s-3-1.34-3-3 1.34-3 3-3c.32 0 .63.05.91.15V9.2c-.3-.04-.6-.07-.91-.07A6.4 6.4 0 003 15.5 6.4 6.4 0 0016.34 15.5v-7c1.45 1.04 3.23 1.65 5.16 1.65V6.75c-.7 0-1.37-.07-2-.25z"/></svg> 373 </a> 374 </div> 375 <button class="nav-burger" aria-label="Menu" aria-expanded="false" type="button"> 376 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> 377 <path class="bl-top" d="M4 12L20 12"/> 378 <path class="bl-mid" d="M4 12H20"/> 379 <path class="bl-bot" d="M4 12H20"/> 380 </svg> 381 </button> 382 </div> 383 <!-- Mega menu (preenchido por site.js) --> 384 <div class="mega" id="mega-services" role="menu" aria-label="Serviços"></div> 385</header> 386</div> 387 388<main class="portfolio-page"> 389 <div class="shell"> 390 <div class="portfolio-back hidden" id="portfolio-back"> 391 <a href="/portfolio" data-no-transition data-slug=""> 392 <svg viewBox="0 0 16 16"><path d="M13 8H3M7 4L3 8l4 4"/></svg> 393 Todos os projetos 394 </a> 395 </div> 396 397 <header class="portfolio-head">
398 <span class="portfolio-eyebrow" id="portfolio-eyebrow">Portfólio</span> 399 <h1 class="portfolio-title" id="portfolio-title">O que a gente cria,<br/>entrega e <span class="accent">deixa no mundo.</span></h1> 400 <p class="portfolio-subtitle" id="portfolio-subtitle">Uma seleção de projetos recentes. Sites, branding, campanhas e sistemas que cutucaram o óbvio em cada nicho.</p> 401 <nav class="portfolio-cats" id="portfolio-cats" aria-label="Filtrar por categoria"></nav> 402 </header> 403 404 <div class="portfolio-grid" id="portfolio-grid"> 405 <div class="skeleton-card"></div> 406 <div class="skeleton-card"></div> 407 <div class="skeleton-card"></div> 408 <div class="skeleton-card"></div> 409 </div> 410 </div> 411</main> 412 413<!-- Footer universal â markup em /partials/footer.html --> 414 415<!-- Footer inlinado no build â mesma razão do header. Fonte: /partials/footer.html --> 416<div id="site-footer"> 417<!-- 418 Footer universal â Agência Mi 419 Editar este arquivo afeta TODAS as páginas do site. 420 IMPORTANTE: o CSS do .brain-anim / .brain-wrap e do .foot* fica nas páginas 421 (será migrado pra um site.css compartilhado em uma próxima iteração). 422--> 423 424<footer class="foot"> 425 426 <!-- Newsletter "AntÃdoto para o óbvio" â acima do rodapé, dentro da estrutura do footer --> 427 <section class="foot-newsletter" aria-labelledby="foot-news-title"> 428 <div class="shell"> 429 <div class="foot-newsletter-grid"> 430 <div class="foot-newsletter-text"> 431 <span class="foot-newsletter-eyebrow">AntÃdoto para o óbvio</span> 432 <h2 class="foot-newsletter-title" id="foot-news-title">Nem toda ideia precisa<br/>passar pelo humor do algoritmo.</h2> 433 <p class="foot-newsletter-sub">A gente manda ideias, provocações, bastidores e referências para quem cansou de conteúdo pasteurizado. Promessa solene: nada de spam, fórmula mágica ou e-mail começando com “olá, empreendedor”.</p> 434 435 <form class="foot-newsletter-form" data-foot-newsletter novalidate> 436 <label class="foot-newsletter-vh" for="foot-news-email">Seu melhor e-mail</label> 437 <div class="foot-newsletter-row"> 438 <input type="email" id="foot-news-email" name="email" placeholder="[email protected]" required autocomplete="email" inputmode="email"/> 439 <button type="submit" class="foot-newsletter-btn"> 440 <span class="foot-newsletter-btn-label">Quero receber</span> 441 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg> 442 </button> 443 </div> 444 <label class="foot-newsletter-consent"> 445 <input type="checkbox" id="foot-news-consent" name="consent" required/> 446 <span class="foot-newsletter-consent-box" aria-hidden="true"> 447 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5L20 7"/></svg> 448 </span> 449 <span class="foot-newsletter-consent-text">Li e aceito a <a href="/politica-de-privacidade">polÃtica de privacidade</a>.</span> 450 </label> 451 <p class="foot-newsletter-msg" data-foot-newsletter-msg role="status" aria-live="polite"></p> 452 </form> 453 </div> 454 455 <div class="foot-newsletter-illustration" aria-hidden="true"> 456 <picture> 457 <source type="image/avif" srcset="/assets/cientista-mi-320.avif 320w, /assets/cientista-mi-640.avif 640w" sizes="320px"/> 458 <source type="image/webp" srcset="/assets/cientista-mi-320.webp 320w, /assets/cientista-mi-640.webp 640w" sizes="320px"/> 459 <img class="foot-newsletter-illustration-img" src="/assets/cientista-mi.png" alt="" 460 width="320" height="568" loading="lazy" decoding="async"/> 461 </picture> 462 463 <!-- Sombra elÃptica nos pés do personagem (CSS-only via ::after) --> 464 465 <!-- Bolhas saindo do frasco mais alto --> 466 <div class="foot-newsletter-bubbles">
467 <span class="foot-bubble"></span> 468 <span class="foot-bubble"></span> 469 <span class="foot-bubble"></span> 470 <span class="foot-bubble"></span> 471 <span class="foot-bubble"></span> 472 <span class="foot-bubble"></span> 473 <span class="foot-bubble"></span> 474 <span class="foot-bubble"></span> 475 <span class="foot-bubble"></span> 476 <span class="foot-bubble"></span> 477 <span class="foot-bubble"></span> 478 <span class="foot-bubble"></span> 479 <span class="foot-bubble"></span> 480 <span class="foot-bubble"></span> 481 <span class="foot-bubble"></span> 482 <span class="foot-bubble"></span> 483 </div> 484 485 <!-- Aviões de papel + envelopes orbitando a cabeça (mouse-reactive) --> 486 <div class="foot-newsletter-orbit" data-foot-orbit> 487 <span class="orbit-item plane" style="left:-4%;top:4%;--bsize:32px;--brot:-14deg;--fdur:5.2s;--fdelay:0s;--fx:6px;--fy:-10px;"> 488 <span class="orbit-float"> 489 <svg class="orbit-icon" viewBox="0 0 24 24" fill="#fff" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round" stroke-linecap="round"><path d="M21 3 L3 11 L10 14 L13 21 L21 3 Z"/><path d="M10 14 L21 3"/></svg> 490 </span> 491 </span> 492 <span class="orbit-item envelope" style="left:78%;top:-3%;--bsize:30px;--brot:12deg;--fdur:5.8s;--fdelay:-1.5s;--fx:-5px;--fy:-8px;"> 493 <span class="orbit-float"> 494 <svg class="orbit-icon" viewBox="0 0 24 24" fill="#fff" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round" stroke-linecap="round"><rect x="3" y="6" width="18" height="13" rx="1.5"/><path d="M3 8 L12 14 L21 8"/></svg> 495 </span> 496 </span> 497 <span class="orbit-item plane" style="left:92%;top:24%;--bsize:28px;--brot:24deg;--fdur:4.8s;--fdelay:-2s;--fx:-4px;--fy:-9px;"> 498 <span class="orbit-float"> 499 <svg class="orbit-icon" viewBox="0 0 24 24" fill="#fff" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round" stroke-linecap="round"><path d="M21 3 L3 11 L10 14 L13 21 L21 3 Z"/><path d="M10 14 L21 3"/></svg> 500 </span> 501 </span> 502 <span class="orbit-item envelope" style="left:-12%;top:32%;--bsize:26px;--brot:-20deg;--fdur:6.2s;--fdelay:-.8s;--fx:5px;--fy:-7px;"> 503 <span class="orbit-float"> 504 <svg class="orbit-icon" viewBox="0 0 24 24" fill="#fff" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round" stroke-linecap="round"><rect x="3" y="6" width="18" height="13" rx="1.5"/><path d="M3 8 L12 14 L21 8"/></svg> 505 </span> 506 </span> 507 <span class="orbit-item plane" style="left:48%;top:-9%;--bsize:34px;--brot:-4deg;--fdur:5.4s;--fdelay:-2.5s;--fx:4px;--fy:-12px;"> 508 <span class="orbit-float"> 509 <svg class="orbit-icon" viewBox="0 0 24 24" fill="#fff" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round" stroke-linecap="round"><path d="M21 3 L3 11 L10 14 L13 21 L21 3 Z"/><path d="M10 14 L21 3"/></svg> 510 </span> 511 </span> 512 <span class="orbit-item envelope" style="left:62%;top:38%;--bsize:28px;--brot:8deg;--fdur:5.6s;--fdelay:-1.2s;--fx:-6px;--fy:-9px;"> 513 <span class="orbit-float"> 514 <svg class="orbit-icon" viewBox="0 0 24 24" fill="#fff" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round" stroke-linecap="round"><rect x="3" y="6" width="18" height="13" rx="1.5"/><path d="M3 8 L12 14 L21 8"/></svg> 515 </span> 516 </span> 517 </div> 518 </div> 519 </div> 520 </div> 521 </section> 522 523 <div class="foot-main"> 524 <div class="shell"> 525 <div class="foot-grid"> 526 <div class="foot-brand"> 527 <img src="/assets/mi-logo-cor.svg" alt="Agência Mi"/> 528 <div class="social foot-brand-social"> 529 <a class="so" data-net="ig" href="https://www.instagram.com/agenciami.digital/" target="_blank" rel="noopener noreferrer" aria-label="Instagram da Agência Mi"> 530 <svg viewBox="0 0 24 24" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"><path d="M7 2h10c2.76 0 5 2.24 5 5v10c0 2.76-2.24 5-5 5H7c-2.76 0-5-2.24-5-5V7c0-2.76 2.24-5 5-5zm10 3.75a1.25 1.25 0 100 2.5 1.25 1.25 0 000-2.5zM12 8a4 4 0 100 8 4 4 0 000-8z"/></svg> 531 </a> 532 <a class="so" data-net="li" href="https://www.linkedin.com/company/agenciamidigital/" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn da Agência Mi"> 533 <svg viewBox="0 0 24 24" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"><path d="M3 3h18v18H3V3zm5 4.5a1.7 1.7 0 100 3.4 1.7 1.7 0 000-3.4zM6 12h3v8H6v-8zm5.5 0h3v1.2c.5-.6 1.4-1.4 2.7-1.4 2 0 3.3 1.3 3.3 3.7V20h-3v-4.6c0-1-.4-1.6-1.3-1.6-.8 0-1.3.5-1.5 1-.1.3-.2.6-.2 1V20h-3v-8z"/></svg> 534 </a> 535 <a class="so" data-net="fb" href="https://www.facebook.com/agenciami.digital" target="_blank" rel="noopener noreferrer" aria-label="Facebook da Agência Mi"> 536 <svg viewBox="0 0 24 24" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"><path d="M12 2C6.48 2 2 6.48 2 12c0 5.52 4.48 10 10 10s10-4.48 10-10C22 6.48 17.52 2 12 2zm1.5 18.93V14h2.5l.5-3H13.5V9c0-.55.45-1 1-1H17V5h-3c-1.93 0-3.5 1.57-3.5 3.5V11H8v3h2.5v6.93c.49.05.99.07 1.5.07s1.01-.02 1.5-.07z"/></svg> 537 </a> 538 <a class="so" data-net="tk" href="https://www.tiktok.com/@agenciami.digital" target="_blank" rel="noopener noreferrer" aria-label="TikTok da Agência Mi"> 539 <svg viewBox="0 0 24 24" fill="currentColor"><path d="M19.5 6.5c-1.86-.4-3.36-1.9-3.76-3.76V2h-3.4v13.5c0 1.66-1.34 3-3 3s-3-1.34-3-3 1.34-3 3-3c.32 0 .63.05.91.15V9.2c-.3-.04-.6-.07-.91-.07A6.4 6.4 0 003 15.5 6.4 6.4 0 0016.34 15.5v-7c1.45 1.04 3.23 1.65 5.16 1.65V6.75c-.7 0-1.37-.07-2-.25z"/></svg> 540 </a> 541 </div> 542 </div> 543 544 <div class="foot-col foot-nav"> 545 <h4>Para não se perder</h4> 546 <ul> 547 <li><a href="/sobre"><span class="foot-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 11v5"/><circle cx="12" cy="8" r=".6" fill="currentColor"/></svg></span>Sobre</a></li> 548 <li><a href="/servicos"><span class="foot-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg></span>Serviços</a></li> 549 <li><a href="/portfolio"><span class="foot-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><circle cx="9" cy="11" r="1.6"/><path d="M21 17l-5-5-8 7"/></svg></span>Portfólio</a></li> 550 <li><a href="/blog"><span class="foot-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 3h11l3 3v15H5z"/><path d="M8 9h8M8 13h8M8 17h5"/></svg></span>Blog</a></li> 551 <li><a href="/perguntas-frequentes"><span class="foot-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M9.5 9a2.5 2.5 0 0 1 5 0c0 1.5-2 1.8-2.5 3.2"/><circle cx="12" cy="16.5" r=".7" fill="currentColor"/></svg></span>FAQ</a></li> 552 <li><a href="/vamos-conversar"><span class="foot-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a3 3 0 01-3 3H8l-5 4V6a3 3 0 013-3h12a3 3 0 013 3z"/></svg></span>Vamos conversar</a></li> 553 </ul> 554 </div> 555 556 <div class="foot-col foot-services"> 557 <h4>Serviços</h4> 558 <ul> 559 <li><a href="/servicos/desenvolvimento-de-sites"><span class="foot-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="14" rx="2"/><path d="M3 8h18M7 12h6"/></svg></span>Sites & landing pages</a></li> 560 <li><a href="/servicos/gestao-de-redes-sociais"><span class="foot-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 4-7 8-7s8 3 8 7"/></svg></span>Redes sociais</a></li> 561 <li><a href="/servicos/trafego-pago"><span class="foot-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M3 17l4-4 4 4 4-6 6 8"/><path d="M3 21h18"/></svg></span>Tráfego pago</a></li> 562 <li><a href="/servicos/criacao-grafica"><span class="foot-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="16" height="6"/><rect x="4" y="14" width="10" height="6"/><rect x="18" y="14" width="2" height="6"/></svg></span>Criação gráfica</a></li> 563 <li><a href="/servicos/email-marketing"><span class="foot-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></svg></span>E-mail marketing</a></li> 564 <li><a href="/servicos/automacao-de-processos"><span class="foot-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M12 3v3m0 12v3m9-9h-3m-12 0H3m15.4-6.4l-2.1 2.1m-8.6 8.6l-2.1 2.1m0-12.8l2.1 2.1m8.6 8.6l2.1 2.1"/></svg></span>Automação</a></li> 565 <li><a href="/servicos/estrategia-seo-e-geo"><span class="foot-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.5-4.5"/></svg></span>SEO e GEO</a></li> 566 <li><a href="/servicos/identidade-visual"><span class="foot-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a16 16 0 010 18M12 3a16 16 0 000 18"/></svg></span>Identidade visual</a></li> 567 <li><a href="/servicos/sistemas-web"><span class="foot-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M8 4l-5 8 5 8M16 4l5 8-5 8M14 3l-4 18"/></svg></span>Sistemas web</a></li> 568 </ul> 569 </div> 570 571 <div class="foot-col foot-contact" id="contato"> 572 <h4>Contato</h4> 573 <ul> 574 <li>
575 <span class="foot-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s7-7 7-12a7 7 0 10-14 0c0 5 7 12 7 12z"/><circle cx="12" cy="10" r="2.5"/></svg></span> 576 <span>Rua Pereira Franco, 65 / 201<br/>Porto Alegre / RS</span> 577 </li> 578 <li> 579 <span class="foot-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></svg></span> 580 <a href="/cdn-cgi/l/email-protection#0e6d61607a6f7a614e6f696b606d676f6367206a6769677a6f62"><span class="__cf_email__" data-cfemail="0e6d61607a6f7a614e6f696b606d676f6367206a6769677a6f62">[email protected]</span></a> 581 </li> 582 <li> 583 <span class="foot-icon"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M17.5 14.4c-.3-.15-1.7-.84-2-.94-.27-.1-.46-.15-.66.15s-.76.94-.93 1.13c-.17.2-.34.22-.64.07-.3-.15-1.25-.46-2.38-1.47-.88-.78-1.47-1.74-1.64-2.04-.17-.3-.02-.46.13-.6.13-.13.3-.34.45-.51.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.07-.15-.66-1.6-.91-2.18-.24-.57-.49-.5-.66-.51l-.56-.01a1.07 1.07 0 00-.78.36c-.27.3-1.02 1-1.02 2.43s1.05 2.82 1.2 3.02c.15.2 2.07 3.16 5.02 4.43.7.3 1.25.48 1.68.62.7.22 1.34.19 1.85.12.56-.08 1.7-.7 1.94-1.37.24-.67.24-1.25.17-1.37-.07-.13-.27-.2-.57-.34zM12 2C6.5 2 2 6.5 2 12c0 1.93.55 3.74 1.5 5.27L2 22l4.85-1.47A9.94 9.94 0 0012 22c5.5 0 10-4.5 10-10S17.5 2 12 2zm0 18c-1.78 0-3.45-.53-4.84-1.43l-.35-.21-2.88.87.88-2.79-.23-.36A8.04 8.04 0 014 12c0-4.41 3.59-8 8-8s8 3.59 8 8-3.59 8-8 8z"/></svg></span> 584 <a href="https://wa.me/5551981813798" target="_blank" rel="noopener noreferrer">+55 (51) 98181-3798</a> 585 </li> 586 </ul> 587 </div> 588 589 <div class="foot-col foot-anamid"> 590 <a href="https://painel.anamid.com.br/minha-pagina" id="link-anamid" target="_blank" rel="noopener noreferrer" aria-label="Selo AnaMid â Agência de marketing digital certificada"> 591 <img alt="AnaMid" width="150" src="https://painel.anamid.com.br/selo.png" loading="lazy" decoding="async" 592 onerror="this.closest('.foot-anamid').style.display='none'"/> 593 </a> 594 </div> 595 </div> 596 597 <div class="foot-bottom"> 598 <span>© 2026 Agência Mi · todos os direitos reservados · <a class="foot-bottom-link" href="/politica-de-privacidade">PolÃtica de privacidade</a></span> 599 <span>Feito com <span class="brain-wrap" tabindex="0" aria-label="Feito com cérebro!"><svg class="brain-icon" viewBox="0 0 100 100" aria-hidden="true"><defs><radialGradient id="brainAura-foot" cx="50%" cy="50%" r="50%"><stop offset="0%" stop-color="#00A1F9" stop-opacity=".45"/><stop offset="60%" stop-color="#00A1F9" stop-opacity=".10"/><stop offset="100%" stop-color="#00A1F9" stop-opacity="0"/></radialGradient></defs><circle class="brain-aura" cx="50" cy="50" r="46" fill="url(#brainAura-foot)"/><g class="brain-shell" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path stroke-width="2.6" d="M50 22 C 42 16, 30 18, 24 26 C 16 28, 14 38, 18 46 C 14 52, 18 62, 26 64 C 28 74, 40 78, 46 72 L 50 72 Z"/><path stroke-width="2.6" d="M50 22 C 58 16, 70 18, 76 26 C 84 28, 86 38, 82 46 C 86 52, 82 62, 74 64 C 72 74, 60 78, 54 72 L 50 72 Z"/><path class="gyrus g1" stroke-width="1.6" d="M28 32 Q 34 38, 30 44 Q 26 50, 32 56"/><path class="gyrus g2" stroke-width="1.6" d="M38 26 Q 36 36, 40 44 Q 44 52, 38 62"/><path class="gyrus g3" stroke-width="1.6" d="M72 32 Q 66 38, 70 44 Q 74 50, 68 56"/><path class="gyrus g4" stroke-width="1.6" d="M62 26 Q 64 36, 60 44 Q 56 52, 62 62"/></g><g class="sparks"><circle class="spark s1" cx="32" cy="34" r="2.2" fill="#00A1F9"/><circle class="spark s2" cx="68" cy="34" r="2.2" fill="#F5D23A"/><circle class="spark s3" cx="38" cy="52" r="1.8" fill="#F5D23A"/><circle class="spark s4" cx="62" cy="52" r="1.8" fill="#00A1F9"/><circle class="spark s5" cx="50" cy="42" r="1.6" fill="#FFFFFF"/><circle class="spark s6" cx="42" cy="66" r="1.4" fill="#00A1F9"/><circle class="spark s7" cx="58" cy="66" r="1.4" fill="#F5D23A"/></g></svg></span></span> 600 </div> 601 </div> 602 </div> 603</footer> 604</div>
vendor: 109 bytes, lines 604-605
604 605<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>
605<script src="/partials/site.js?v=2026091503" defer></script>
605 606
607<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"b1ac462b76ca4472ae118aeee6558860","r":1,"spa":2}' crossorigin="anonymous"></script>
607 608</body> 609</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.