fix: modernize badges and fix gauge spacing

- Redesign SectionBadge: remove border/shadow, use subtle primary tint bg
- Simplify hero badge: remove dated star + divider pattern
- Fix gauge dial overlapping color band: shift arc up (cy 100→88), increase gap

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

apps/web/src/modules/marketing/home/hero.tsx

@@ -21,14 +21,6 @@ export const Hero = async () => {
       />
       <div className="animate-fade-in -translate-y-4 opacity-0">
         <SectionBadge>
-          <div className="w-fit py-0.5 text-center text-xs sm:text-sm">
-            ★
-          </div>
-          <div
-            data-orientation="vertical"
-            role="none"
-            className="bg-border mx-2 h-full w-px shrink-0"
-          ></div>
           {t("announcement")}
         </SectionBadge>
       </div>

apps/web/src/modules/marketing/home/report-preview.tsx

@@ -104,23 +104,23 @@ function ScoreTab() {
   const radius = 80;
   const stroke = 12;
   const cx = 100;
-  const cy = 100;
+  const cy = 88;
   const circumference = Math.PI * radius;
   const offset = circumference - (SCORE / 100) * circumference;
 
   return (
     <div className="flex flex-col items-center gap-4 sm:flex-row sm:items-start sm:gap-10">
       {/* Left: Gauge + band */}
-      <div className="flex shrink-0 flex-col items-center gap-3">
+      <div className="flex shrink-0 flex-col items-center gap-5">
         <span className="text-muted-foreground text-xs tracking-wide uppercase">
           {t("reportPreview.demo.businessName")}
         </span>
 
-        <div className="relative" style={{ width: 200, height: 130 }}>
+        <div className="relative" style={{ width: 200, height: 112 }}>
           <svg
             width="200"
-            height="130"
+            height="112"
-            viewBox="0 0 200 130"
+            viewBox="0 0 200 112"
             className="overflow-visible"
           >
             <circle
@@ -150,7 +150,7 @@ function ScoreTab() {
               className="transition-all duration-1000 ease-out"
             />
           </svg>
-          <div className="absolute inset-0 flex flex-col items-center justify-end pb-3">
+          <div className="absolute inset-0 flex flex-col items-center justify-end pb-1">
             <span
               className="text-6xl font-bold tabular-nums"
               style={{ color: SCORE_COLOR }}

apps/web/src/modules/marketing/layout/section.tsx

@@ -37,7 +37,7 @@ export const SectionBadge = ({
   return (
     <div
       className={cn(
-        "group text-foreground hover:bg-accent/50 focus:ring-ring inline-flex h-8 items-center rounded-full border px-3 py-0.5 text-xs font-medium shadow-xs transition-colors duration-200 focus:ring-2 focus:ring-offset-2 focus:outline-none sm:text-sm",
+        "inline-flex items-center gap-1.5 rounded-full bg-primary/[0.08] px-3.5 py-1.5 text-xs font-medium tracking-wide text-primary/90 sm:text-sm",
         className,
       )}
       {...props}