feat(home): replace "Why Choose Us" benefits grid with ProofNumbers band

Swaps the soft-adjective benefits section (Rapid Development, Enterprise
Security, Built to Scale, 24/7 Support) for a compact horizontal stat
band so the first below-the-fold surface leads with hard, scannable
numbers instead of generic copy.

- New src/components/ProofNumbers.astro renders 4 large gradient numbers
  with one-line captions: 20+ Projects Delivered, 5★ Client Rating,
  11 Districts Deployed, < 2s Avg Page Load. Numbers carry a TODO for
  stakeholder confirmation; defaults mirror existing hero/stat copy.
- Responsive grid: 2×2 on mobile (<md), 4×1 horizontal band on desktop,
  with subtle vertical dividers between columns on md+.
- Matches site typography tokens (text-secondary-* / text-primary-*)
  with full dark-mode parity (gradients shift to primary-400/300).
- Removes now-unused `benefits` data array and inline SVG icons from
  src/pages/index.astro along with the surrounding section markup.

src/components/ProofNumbers.astro

@@ -0,0 +1,101 @@
+---
+/**
+ * ProofNumbers Component
+ *
+ * A compact horizontal "stat band" rendered between the social-proof logo
+ * strip and the services grid on the homepage. Replaces the older
+ * "Why Choose Us" / "Built for Your Success" benefits grid — the goal is
+ * to lead with hard, scannable proof points instead of soft adjectives.
+ *
+ * Layout:
+ *   - 2 × 2 grid on mobile (<md)
+ *   - 4 × 1 horizontal band on desktop (md+)
+ *
+ * Typography matches the site's existing tokens (text-secondary-* /
+ * text-primary-*) and supports dark mode via Tailwind's `dark:` variants
+ * so the band stays legible under the theme toggle.
+ *
+ * @prop {Array<{ value: string; label: string }>} [items] - override the
+ *        default set of proof points. Each `value` is rendered as the large
+ *        headline number, `label` is the one-line caption underneath.
+ *
+ * NOTE on the default copy: these numbers are placeholder defaults pending
+ * stakeholder confirmation — update them against the latest delivery log
+ * / Google Analytics / Lighthouse run before each release.
+ */
+
+interface ProofItem {
+  value: string;
+  label: string;
+}
+
+interface Props {
+  items?: ProofItem[];
+}
+
+// TODO(content): confirm these proof numbers with the WorkRoot leadership /
+// marketing team before each public release. Defaults reflect the current
+// public-facing claims (hero badge: "20+ teams · 11 districts") plus the
+// performance budget the site is built against (<2s LCP on 4G).
+//
+//  - "20+ Projects Delivered"   — sourced from existing homepage stats array
+//  - "5★ Client Rating"          — every testimonial in this file has
+//                                  rating: 5; tighten to "4.9★" once a
+//                                  weighted average is available
+//  - "11 Districts Deployed"     — matches hero trust badge copy
+//  - "< 2s Avg Page Load"        — performance budget for the marketing site
+//
+// If real audited numbers become available, prefer those over these defaults.
+const defaultItems: ProofItem[] = [
+  { value: '20+', label: 'Projects Delivered' },
+  { value: '5★', label: 'Client Rating' },
+  { value: '11', label: 'Districts Deployed' },
+  { value: '< 2s', label: 'Avg Page Load' },
+];
+
+const { items = defaultItems } = Astro.props;
+// Cap at 4 — the band is designed as a 4×1 / 2×2 layout and extra entries
+// would break the responsive grid. Trim silently rather than overflowing.
+const proofItems = items.slice(0, 4);
+---
+
+<section
+  id="proof-numbers"
+  class="py-16 sm:py-20 bg-white dark:bg-secondary-900 border-y border-secondary-100 dark:border-secondary-800"
+  aria-label="WorkRoot by the numbers"
+>
+  <div class="container-wrapper">
+    <dl
+      class="grid grid-cols-2 md:grid-cols-4 gap-y-10 gap-x-6 sm:gap-x-10 max-w-6xl mx-auto"
+      data-animate="fade-up"
+    >
+      {proofItems.map((item, index) => (
+        <div
+          class:list={[
+            'text-center',
+            // Subtle vertical divider between columns on desktop — keeps the
+            // band feeling like one continuous strip rather than four cards.
+            index > 0
+              ? 'md:border-l md:border-secondary-100 md:dark:border-secondary-800'
+              : '',
+          ]}
+          data-animate="fade-up"
+          data-delay={String(index * 100)}
+        >
+          <dt
+            class="text-4xl sm:text-5xl lg:text-6xl font-bold text-secondary-900 dark:text-secondary-100 tracking-tight leading-none"
+          >
+            <span class="bg-gradient-to-br from-primary-600 to-primary-500 dark:from-primary-400 dark:to-primary-300 bg-clip-text text-transparent">
+              {item.value}
+            </span>
+          </dt>
+          <dd
+            class="mt-3 text-sm sm:text-base font-semibold text-secondary-600 dark:text-secondary-400 uppercase tracking-wider"
+          >
+            {item.label}
+          </dd>
+        </div>
+      ))}
+    </dl>
+  </div>
+</section>

src/pages/index.astro

@@ -5,30 +5,7 @@ import SEO from '../components/SEO.astro';
 import ClientLogos from '../components/ClientLogos.astro';
 import InlineLeadForm from '../components/InlineLeadForm.astro';
 import HomepageFaq from '../components/HomepageFaq.astro';
-
-// Benefits/Features data
-const benefits = [
-  {
-    icon: 'rocket',
-    title: 'Rapid Development',
-    description: 'Launch your product 3x faster with our agile methodology and proven frameworks.',
-  },
-  {
-    icon: 'shield',
-    title: 'Enterprise Security',
-    description: 'Bank-grade security protocols protecting your data and user privacy.',
-  },
-  {
-    icon: 'scale',
-    title: 'Built to Scale',
-    description: 'Infrastructure that grows with your business, from startup to enterprise.',
-  },
-  {
-    icon: 'support',
-    title: '24/7 Support',
-    description: 'Round-the-clock technical support ensuring your systems run smoothly.',
-  },
-];
+import ProofNumbers from '../components/ProofNumbers.astro';
 
 // Services data — outcome-led headlines with anchor slugs that deep-link
 // into the matching detail sections on /services.
@@ -293,54 +270,10 @@ const techStack = [
     <ClientLogos />
   </div>
 
-  <!-- Benefits Section - NEW -->
-  <section id="benefits" class="py-24 bg-white dark:bg-secondary-900">
-    <div class="container-wrapper">
-      <div class="text-center max-w-3xl mx-auto mb-20" data-animate="fade-up">
-        <span class="inline-block px-4 py-2 rounded-full bg-primary-50 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300 text-sm font-bold uppercase tracking-wider mb-4">Why Choose Us</span>
-        <h2 class="text-4xl sm:text-5xl font-bold text-secondary-900 dark:text-secondary-100 mb-6">Built for Your Success</h2>
-        <p class="text-xl text-secondary-600 dark:text-secondary-400">
-          We don't just write code. We build solutions that drive measurable business results.
-        </p>
-      </div>
-
-      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
-        {benefits.map((benefit, index) => (
-          <div class="group relative bg-gradient-to-br from-secondary-50 to-white dark:from-secondary-800 dark:to-secondary-800/80 rounded-2xl p-8 border border-secondary-100 dark:border-secondary-700 hover:border-primary/30 hover:shadow-2xl transition-all duration-500 hover:-translate-y-2 card-interactive" data-animate="fade-up" data-delay={String(index * 100)}>
-            <!-- Icon -->
-            <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-primary-500 to-primary-600 flex items-center justify-center mb-6 group-hover:scale-110 group-hover:rotate-6 transition-all duration-500 shadow-lg">
-              {benefit.icon === 'rocket' && (
-                <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
-                </svg>
-              )}
-              {benefit.icon === 'shield' && (
-                <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
-                </svg>
-              )}
-              {benefit.icon === 'scale' && (
-                <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"></path>
-                </svg>
-              )}
-              {benefit.icon === 'support' && (
-                <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z"></path>
-                </svg>
-              )}
-            </div>
-
-            <h3 class="text-2xl font-bold text-secondary-900 dark:text-secondary-100 mb-3">{benefit.title}</h3>
-            <p class="text-secondary-600 dark:text-secondary-400 leading-relaxed">{benefit.description}</p>
-
-            <!-- Decorative corner -->
-            <div class="absolute top-4 right-4 w-2 h-2 bg-primary-400 rounded-full opacity-0 group-hover:opacity-100 transition-opacity"></div>
-          </div>
-        ))}
-      </div>
-    </div>
-  </section>
+  <!-- Proof Numbers Band — replaces the older "Why Choose Us" benefits grid.
+       Leads with hard, scannable numbers instead of soft adjectives so the
+       first below-the-fold surface is concrete proof, not generic copy. -->
+  <ProofNumbers />
 
   <!-- Services Section - Enhanced -->
   <section id="services" class="py-24 bg-gradient-to-b from-secondary-50 to-white dark:from-secondary-900 dark:to-secondary-900">