polish: deep visual pass across all homepage sections

Hero:
- Removed fake trust proof avatars
- Added decorative gradient separator line
- Pushed content down for better vertical rhythm
- More visible secondary CTA button

TrustBar:
- Icon circles with primary tint backdrops
- Gradient top accent bar on hover
- Gradient fade transition from hero section
- Increased card padding

Services:
- Subtle grid texture background
- Larger primary-colored feature dots
- Enhanced AI narrative with horizontal decorative rules
- Hover shadow elevation on pillars

Configurator:
- Step numbers in tinted circles with vertical rail
- ShieldCheck trust icon
- Radial gradient glow on wizard panel
- Sparkles icon on AI toggle
- Empty-state hint message
- Service card icons in circular primary backdrops

Process:
- Gradient top accent strips on cards
- Icon containers with primary tint
- Vertical accent bar on section heading
- Dashed SVG connector lines between cards

SelectedWorks:
- Distinct geometric compositions per card (Monaco, Nimara, Amador)
- Bottom gradient fade on placeholder images
- Dot separators between tags
- Animated background pulse on coming-soon cards
- Enhanced CTA hover animations

Philosophy:
- Enriched decorative panel (circle rings, diagonal lines, navy gradient)
- Primary-colored pillar numbers
- Left border accent on pull-quote card

CTABanner:
- Grid pattern + circle ring overlays
- Email link underline-on-hover animation

Footer:
- Full logo image replacing text wordmark
- Larger social icons
- Gradient divider line
- Larger nav logo (h-14 desktop, h-11 mobile)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/components/sections/Configurator.tsx

@@ -2,6 +2,7 @@
 
 import { useTranslations } from 'next-intl';
 import { motion } from 'framer-motion';
+import { ShieldCheck } from 'lucide-react';
 import { revealVariants, staggerContainer, viewportOnce } from '@/lib/animations';
 import WizardContainer from '@/components/configurator/WizardContainer';
 
@@ -15,8 +16,8 @@ interface StepDotProps {
 function StepDot({ index, label }: StepDotProps) {
   return (
     <motion.div variants={revealVariants} className="flex items-center gap-3">
-      <div className="w-5 h-5 rounded-full border border-outline-variant/60 bg-surface-high flex items-center justify-center flex-shrink-0">
-        <span className="text-[10px] font-semibold text-outline">{index}</span>
+      <div className="w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0">
+        <span className="text-xs font-semibold text-primary-dark leading-none">{index}</span>
       </div>
       <span className="text-sm text-outline">{label}</span>
     </motion.div>
@@ -81,21 +82,24 @@ export default function Configurator() {
                   <p className="text-xs font-semibold uppercase tracking-label text-outline/70">
                     How it works
                   </p>
-                  <div className="flex flex-col gap-2.5">
-                    {steps.map((step, i) => (
-                      <StepDot key={i} index={i + 1} label={step} />
-                    ))}
+                  {/* Vertical accent line + steps */}
+                  <div className="flex gap-4">
+                    <div className="flex-shrink-0 w-px bg-primary/20 ml-3 rounded-full" aria-hidden="true" />
+                    <div className="flex flex-col gap-2.5 flex-1">
+                      {steps.map((step, i) => (
+                        <StepDot key={i} index={i + 1} label={step} />
+                      ))}
+                    </div>
                   </div>
                 </motion.div>
 
                 {/* Trust signal */}
                 <motion.div
                   variants={revealVariants}
-                  className="pt-2 flex items-center gap-2.5"
+                  className="pt-1 flex items-center gap-2"
                 >
-                  <div className="h-px flex-1 bg-outline-variant/40" />
+                  <ShieldCheck size={14} strokeWidth={1.75} className="text-primary flex-shrink-0" aria-hidden="true" />
                   <p className="text-xs text-outline">No commitment required</p>
-                  <div className="h-px flex-1 bg-outline-variant/40" />
                 </motion.div>
               </motion.div>
             </div>
@@ -103,7 +107,15 @@ export default function Configurator() {
 
           {/* ── Right: Wizard ───────────────────────────────────────────── */}
           <div className="lg:col-span-7">
-            <div className="rounded-2xl bg-surface-high shadow-subtle p-6 sm:p-8">
+            <div className="relative rounded-2xl bg-surface-high shadow-subtle p-6 sm:p-8 overflow-hidden">
+              {/* Radial gradient glow — top-left warmth */}
+              <div
+                className="pointer-events-none absolute -top-16 -left-16 w-72 h-72 rounded-full"
+                style={{
+                  background: 'radial-gradient(circle, rgba(91,164,217,0.07) 0%, transparent 70%)',
+                }}
+                aria-hidden="true"
+              />
               <WizardContainer />
             </div>
           </div>