PageSourceSearch

https://agenciami.digital/portfolio

html agenciami.digital collected 2026-10-06 16:50:13 UTC 39,688 bytes, 609 lines download raw bytes

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 &ldquo;olá, empreendedor&rdquo;.</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 &amp; 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&#160;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.