site: added live metrics strip (animated counters, pulsing dots) + 'how it works' section with 4 numbered steps and connecting flow line, between hero and feature sections

site/src/pages/index.astro

@@ -157,13 +157,87 @@ const plans = [
   </section>
 
   <!-- ============================================================
-       Spacer to make room for the overlap, then features
+       Spacer for the overlap, then sections
   ============================================================ -->
   <div class="bg-white" style="padding-top: 160px;">
+
+    <!-- ============================================================
+         LIVE METRICS STRIP — animated numbers, no fake reviews
+    ============================================================ -->
+    <section class="container-page pt-4 pb-16 md:pb-24">
+      <div class="grid grid-cols-2 md:grid-cols-4 rounded-[14px] bg-white ring-1 ring-[color:var(--border)] overflow-hidden"
+           style="box-shadow: var(--shadow-sm);">
+        {[
+          { eyebrow: 'Today', value: '5,420', counter: { from: 5380, to: 6400 }, label: 'Sends · all workers', tone: 'bg-[color:var(--brand)]' },
+          { eyebrow: 'Warming now', value: '12,418', counter: { from: 12390, to: 12480 }, label: 'Mailboxes in premium pool', tone: 'bg-emerald-500' },
+          { eyebrow: 'Mean placement', value: '96.4%', label: 'Inbox · last 14 days', tone: 'bg-emerald-500' },
+          { eyebrow: 'Mean complaint', value: '0.02%', label: 'Below Google’s 0.10% threshold', tone: 'bg-emerald-500' },
+        ].map((s, i) => (
+          <div class={`px-5 py-5 md:px-6 md:py-6 ${i < 3 ? 'md:border-r border-[color:var(--border)]' : ''} ${i < 2 ? 'border-b md:border-b-0 border-[color:var(--border)]' : ''}`}>
+            <div class="flex items-center gap-1.5">
+              <span class={`relative inline-flex w-1.5 h-1.5 rounded-full ${s.tone}`}>
+                <span class={`absolute inset-0 rounded-full ${s.tone} animate-ping opacity-40`}></span>
+              </span>
+              <span class="text-[10.5px] uppercase tracking-[0.14em] text-muted-foreground font-semibold">{s.eyebrow}</span>
+            </div>
+            <div class="mt-3 text-[28px] md:text-[34px] font-semibold tracking-[-0.025em] text-heading leading-none">
+              {s.counter ? (
+                <span data-live-counter
+                      data-from={s.counter.from}
+                      data-to={s.counter.to}
+                      data-tick-min="900"
+                      data-tick-max="2400"
+                      data-step-min="1"
+                      data-step-max="3">{s.value}</span>
+              ) : s.value}
+            </div>
+            <div class="mt-2 text-[12px] text-muted-foreground">{s.label}</div>
+          </div>
+        ))}
+      </div>
+    </section>
+
+    <!-- ============================================================
+         HOW IT WORKS — 4 numbered steps, connected flow
+    ============================================================ -->
+    <section class="border-t border-[color:var(--border)]" style="background: var(--surface-2);">
+      <div class="container-page py-20 md:py-28">
+        <div class="max-w-3xl">
+          <div class="text-[11px] uppercase tracking-[0.16em] text-[color:var(--brand)] font-semibold mb-4">How it works</div>
+          <h2 class="text-[32px] md:text-[48px] font-semibold tracking-[-0.03em] leading-[1.04] text-heading">
+            From connected mailbox to a campaign that lands — in an afternoon.
+          </h2>
+        </div>
+
+        <div class="mt-14 grid md:grid-cols-4 gap-4 relative">
+          <!-- Connecting line behind the steps -->
+          <div class="hidden md:block absolute top-7 left-[12%] right-[12%] h-px" style="background: linear-gradient(to right, transparent, var(--brand) 20%, var(--brand) 80%, transparent);"></div>
+
+          {[
+            { n: '01', title: 'Connect',  body: 'OAuth a mailbox in seconds — Google, Microsoft, or any SMTP/IMAP.', icon: 'mail' },
+            { n: '02', title: 'Warm up',  body: 'Pool selects vetted partners, ramps your volume +1/day, watches reputation.', icon: 'flame' },
+            { n: '03', title: 'Sequence', body: 'Build steps with branching, A/B variants, business-hour delays.', icon: 'workflow' },
+            { n: '04', title: 'Send & reply', body: 'Distribute across workers, classify every reply, route to the right human.', icon: 'send' },
+          ].map((s) => (
+            <div class="relative bg-white rounded-[14px] p-6 ring-1 ring-[color:var(--border)] lift-on-hover" style="box-shadow: var(--shadow-sm);">
+              <div class="flex items-center gap-3 mb-4">
+                <div class="w-14 h-14 rounded-full bg-[color:var(--brand)] text-white grid place-items-center text-[16px] font-semibold tracking-tight ring-4 ring-white">
+                  {s.n}
+                </div>
+                <Icon name={s.icon} class="text-[color:var(--brand)] ml-auto" size={18} />
+              </div>
+              <h3 class="text-[17px] font-semibold tracking-[-0.01em] text-heading">{s.title}</h3>
+              <p class="mt-1.5 text-[13.5px] text-foreground/70 leading-relaxed">{s.body}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+
     <!-- ============================================================
          FEATURE — Warmup (text left, mock right with sky backdrop)
     ============================================================ -->
-    <section class="container-page py-16 md:py-24">
+    <section class="container-page py-20 md:py-28">
       <div class="grid lg:grid-cols-12 gap-12 lg:gap-16 items-center">
         <div class="lg:col-span-5">
           <div class="inline-flex items-center gap-1.5 mb-4">