Tighten mobile CTA sizing

CHANGELOG.md

@@ -13,6 +13,7 @@ All notable changes to the New Optic website will be documented in this file.
 - Kept the language switcher visible in the mobile top navigation bar.
 - Added cursor-reactive stretch motion to desktop nav links and matched the glossy dark WhatsApp CTA style on mobile.
 - Corrected the French 2004 trust wording to use "depuis" without "autour de".
+- Tightened mobile sizing for the WhatsApp nav pill and hero trust badge.
 
 ## [1.0.0] - 2026-05-16
 

components/HeroSection.tsx

@@ -29,9 +29,9 @@ export default function HeroSection({ t, whatsappUrl }: { t: Messages; whatsappU
       <motion.div className="absolute left-1/2 top-24 hidden h-72 w-72 -translate-x-1/2 rounded-full bg-optical/10 blur-3xl lg:block" animate={canAnimateIntro ? { scale: [1, 1.16, 1], opacity: [0.55, 0.88, 0.55] } : undefined} transition={{ duration: 8, repeat: Infinity, ease: "easeInOut" }} />
       <div className="mx-auto grid max-w-7xl items-center gap-12 lg:grid-cols-[1fr_0.92fr]">
         <motion.div initial={canAnimateIntro ? { opacity: 0, y: 24 } : false} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.8, ease: [0.22, 1, 0.36, 1] }} className="relative z-10 text-center lg:text-start">
-          <div className="mx-auto mb-6 inline-flex items-center gap-2 rounded-full border border-ink/10 bg-white/65 px-4 py-2 text-xs font-semibold uppercase tracking-[0.18em] text-ink/60 shadow-sm backdrop-blur lg:mx-0">
-            <ShieldCheck size={15} className="text-optical" />
-            {t.hero.eyebrow}
+          <div className="mx-auto mb-5 inline-flex max-w-full items-center gap-1.5 rounded-full border border-ink/10 bg-white/65 px-3 py-1.5 text-[10px] font-semibold uppercase tracking-[0.12em] text-ink/60 shadow-sm backdrop-blur max-[374px]:px-2.5 max-[374px]:text-[9px] max-[374px]:tracking-[0.08em] sm:mb-6 sm:gap-2 sm:px-4 sm:py-2 sm:text-xs sm:tracking-[0.18em] lg:mx-0">
+            <ShieldCheck className="size-3.5 shrink-0 text-optical sm:size-[15px]" />
+            <span className="whitespace-nowrap leading-4">{t.hero.eyebrow}</span>
           </div>
           <h1 className="mx-auto max-w-4xl text-5xl font-semibold tracking-[-0.075em] text-ink sm:text-7xl lg:mx-0 lg:text-8xl">{t.hero.title}</h1>
           <p className="mx-auto mt-6 max-w-2xl text-lg leading-8 text-ink/64 sm:text-xl lg:mx-0">{t.hero.subtitle}</p>

components/Navbar.tsx

@@ -48,9 +48,9 @@ export default function Navbar({ locale, onLocaleChange, t, whatsappUrl }: { loc
           </PhysicsButton>
         </div>
 
-        <div className="relative z-[3] flex items-center gap-2 md:hidden">
+        <div className="relative z-[3] flex items-center gap-1.5 sm:gap-2 md:hidden">
           <LanguageSwitcher locale={locale} onLocaleChange={onLocaleChange} className="bg-white/80 backdrop-blur-none" buttonClassName="px-2 sm:px-3" />
-          <PhysicsButton href={whatsappUrl} external className={`${navCtaClassName} px-3 py-2.5 text-xs max-[374px]:hidden sm:px-5 sm:text-sm`}>
+          <PhysicsButton href={whatsappUrl} external className={`${navCtaClassName} px-2.5 py-2 text-[11px] max-[374px]:px-2 max-[374px]:text-[10px] sm:px-5 sm:py-2.5 sm:text-sm`}>
             {t.nav.cta}
           </PhysicsButton>
           <motion.button