feat(design): card motion + Pricing MID tier hierarchy

- DualValueProps: 110ms staggered rise-in on load (cubic-bezier ease),
  reduced-motion users see cards pre-populated, no animation.
- All card sections (DualValueProps, HowItWorks, WhyUs, Pricing) gain a
  subtle hover lift: -translate-y-0.5, amber/40 border, soft amber drop
  shadow. 200ms ease-out — tactile but not noisy.
- Pricing MID tier now looks like the highlighted option: ring-2 accent,
  amber-tinted drop shadow, lg:-translate-y-2 (sits above the others),
  and a 'MOST POPULAR' ribbon pill. The 1px border swap was invisible.

src/components/sections/HowItWorks.astro

@@ -33,7 +33,7 @@ const steps: Step[] = [
     </div>
     <ol class="grid md:grid-cols-3 gap-6 md:gap-8">
       {steps.map((step) => (
-        <li class="relative rounded-lg border border-border bg-bg-elevated p-7">
+        <li class="relative rounded-lg border border-border bg-bg-elevated p-7 transition-all duration-200 ease-out hover:-translate-y-0.5 hover:border-accent/40 hover:shadow-[0_12px_32px_-12px_rgba(240,180,41,0.18)]">
           <div class="font-mono text-accent text-sm tracking-wider mb-3">{step.n}</div>
           <h3 class="text-lg font-bold text-text mb-3">{step.title}</h3>
           <p class="text-text-muted leading-relaxed mb-4">{step.body}</p>