A plataforma de marketing para vencer em

<!-- Bases — carrossel das IAs (só HTML e CSS, sem script) O nome de cada IA com o logo numa cor só, trocando sozinho com um esmaecer suave. ELEMENTOR: troque o widget "Título animado" do hero por um widget "HTML" e cole tudo isto. A letra é a do título do hero (Inter 500, já carregada no site): 48 px no computador e 36 px no celular. AJUSTES (no bloco abaixo, em .bases-ia): --bases-ia-passo: 3s quanto tempo cada nome fica na tela --bases-ia-tamanho o tamanho da letra (48px; 36px no celular) color a cor do nome e do logo Os logos são da biblioteca Lobe Icons (licença MIT), numa cor só. --> .bases-ia { --bases-ia-n: 6; --bases-ia-passo: 3s; --bases-ia-tamanho: 48px; display: grid; justify-items: center; color: #fcfcfc; font-family: Inter, sans-serif; font-size: var(--bases-ia-tamanho); font-weight: 500; letter-spacing: -0.06125em; line-height: 1.33; text-align: center; } /* Todos os nomes no MESMO lugar: a largura é a do mais longo, e nada pula na troca. */ .bases-ia-item { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 0.28em; white-space: nowrap; opacity: 0; filter: blur(14px); animation: bases-ia-troca calc(var(--bases-ia-n) * var(--bases-ia-passo)) ease-in-out infinite; animation-delay: calc(var(--i) * var(--bases-ia-passo)); } .bases-ia-item svg { flex: none; width: 0.78em; height: 0.78em; } /* O logo numa cor só, a do texto — o mesmo acabamento da Profound. */ .bases-ia-item svg { fill: currentColor; fill-rule: evenodd; } /* Cada nome tem 1/6 do ciclo: entra, fica, e sai enquanto o próximo entra. */ @keyframes bases-ia-troca { 0% { opacity: 0; filter: blur(14px); } 3.33%, 16.67% { opacity: 1; filter: blur(0); } 20%, 100% { opacity: 0; filter: blur(14px); } } @media (max-width: 767px) { /* No celular, o mesmo do título: 36 px e -2,1 px de espaçamento. */ .bases-ia { --bases-ia-tamanho: 36px; letter-spacing: -0.0583em; } /* Só o nome longo encolhe em tela estreita: "Google AI Overview" tem de caber numa linha. */ .bases-ia-item.is-longo { font-size: min(1em, 8.2vw); } } /* Quem pediu menos movimento no sistema vê o primeiro nome, parado. */ @media (prefers-reduced-motion: reduce) { .bases-ia-item { animation: none; } .bases-ia-item:first-child { opacity: 1; filter: none; } }