A imagem "Juice fundo mobile 2" é uma foto vertical dos 4 sachês em pé lado a lado com as frutas na frente, palmeira e pôr do sol ao fundo — ideal para hero mobile. Vou ler os 3 arquivos em paralelo.

Tenho tudo. Aplicando as 3 correções em paralelo:

Agora preciso garantir que a seção mobile do CTA tenha relative overflow-hidden para os sachês absolutos funcionarem:

As 3 correções foram aplicadas:

1. animated-text.tsx — Adicionado hasAnimated ref para garantir que a animação dispare apenas uma vez, removido rootMargin, e adicionado willChange: "opacity, transform". O elemento nunca mais vai piscar ao rolar.
2. hero-section.tsx — Trocado o backgroundImage do bloco mobile para a nova URL Juice fundo mobile 2.png (sachês em pé com frutas na frente e pôr do sol), mantendo backgroundPosition: "center top" e todos os outros elementos intocados.
3. cta-section.tsx — O grid 2×2 foi substituído por 4 div absolutamente posicionados nos 4 cantos (top/bottom: -40px, left/right: -20px) com as rotações especificadas e cada sachê com sua fruta correspondente e animate-float. A seção mobile ganhou relative e overflow-hidden.

As duas correções foram aplicadas exatamente como especificado. No hero mobile, o container do topo recebeu text-center, a headline ficou text-5xl font-bold e o subtítulo text-lg. Na CTA mobile, a <section> trocou py-20 por min-h-[120vh] justify-center, e o div do conteúdo central ganhou py-24 md:py-0, criando espaço vertical suficiente para os sachês dos cantos não sobreporem o texto. Nada no desktop foi alterado.