Refine site hero copy and reusable badge

components/layout/home-hero.tsx

@@ -2,6 +2,7 @@
 
 import { motion, useReducedMotion } from "framer-motion";
 
+import { HeroBadge } from "@/components/layout/hero-badge";
 import {
   HeroContentMotion,
   HeroMotionItem,
@@ -70,8 +71,8 @@ export function HomeHero({
     <HeroShell showBridges>
       <HeroContentMotion variant="home">
         <HeroMotionItem variant="home">
-          <p className="inline-flex items-center gap-1.5 rounded-pill border border-border/70 bg-background/75 px-3 py-1 text-[0.84rem] font-medium tracking-[-0.01em] text-foreground/82 shadow-xs backdrop-blur-chrome sm:px-3.5 sm:py-1 sm:text-[0.9rem]">
-            <span>{kicker}</span>
+          <HeroBadge
+            trailing={
             <motion.span
               aria-hidden="true"
               className="text-[0.95rem] leading-none"
@@ -99,7 +100,10 @@ export function HomeHero({
             >
               👋
             </motion.span>
-          </p>
+            }
+          >
+            {kicker}
+          </HeroBadge>
         </HeroMotionItem>
         <HeroTitle locale={locale} lines={lines} />
         <HeroMotionItem variant="home">