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/Process.tsx

@@ -54,27 +54,36 @@ function StepCard({ numeral, stepKey, Icon }: { numeral: string; stepKey: string
     <motion.div
       variants={revealVariants}
       className={cn(
-        'relative flex flex-col bg-surface-high rounded-xl p-6',
+        'relative flex flex-col bg-surface-high rounded-xl pt-0 px-6 pb-6 overflow-hidden',
         'shadow-subtle',
       )}
     >
+      {/* Top accent strip — gradient from primary-dark to primary */}
+      <div
+        className="absolute top-0 left-0 right-0 h-[3px] rounded-t-xl"
+        style={{ background: 'linear-gradient(90deg, #006494, #5BA4D9)' }}
+        aria-hidden="true"
+      />
+
       {/* Ghosted numeral — scales up on scroll */}
       <motion.span
         variants={numeralScaleVariants}
         aria-hidden="true"
-        className="font-serif text-6xl font-light leading-none text-on-surface/[0.06] select-none -ml-0.5 mb-3"
+        className="font-serif text-6xl font-light leading-none text-on-surface/[0.06] select-none -ml-0.5 mb-3 mt-6"
       >
         {numeral}
       </motion.span>
 
-      {/* Icon */}
+      {/* Icon container */}
       <div className="mb-4">
-        <Icon
-          size={24}
-          strokeWidth={1.5}
-          className="text-primary"
-          aria-hidden="true"
-        />
+        <div className="w-12 h-12 rounded-xl bg-primary/8 flex items-center justify-center">
+          <Icon
+            size={22}
+            strokeWidth={1.5}
+            className="text-primary"
+            aria-hidden="true"
+          />
+        </div>
       </div>
 
       {/* Title */}
@@ -111,26 +120,71 @@ export default function Process() {
 
           {/* ── Header column ── */}
           <div className="lg:col-span-1 lg:sticky lg:top-32">
-            <SectionHeader
-              eyebrow={t('process.eyebrow')}
-              title={t('process.title')}
-              align="left"
-            />
+            {/* Vertical accent bar left of heading */}
+            <div className="relative pl-4">
+              <div
+                className="absolute left-0 top-[3.25rem] w-0.5 h-10 rounded-full bg-primary"
+                aria-hidden="true"
+              />
+              <SectionHeader
+                eyebrow={t('process.eyebrow')}
+                title={t('process.title')}
+                align="left"
+              />
+            </div>
           </div>
 
           {/* ── Steps column ── */}
           <div className="lg:col-span-3">
-            <motion.div
-              variants={staggerContainerWide}
-              initial="hidden"
-              whileInView="visible"
-              viewport={viewportOnce}
-              className="grid grid-cols-1 sm:grid-cols-2 gap-5"
-            >
-              {STEPS.map((step) => (
-                <StepCard key={step.key} numeral={step.numeral} stepKey={step.key} Icon={step.Icon} />
-              ))}
-            </motion.div>
+            <div className="relative">
+              {/* Dashed connector line — visible on sm+ grid layouts only */}
+              <div
+                className="hidden sm:block absolute inset-0 pointer-events-none"
+                aria-hidden="true"
+              >
+                <svg
+                  className="w-full h-full"
+                  preserveAspectRatio="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  {/* Horizontal dashes across the middle gap */}
+                  <line
+                    x1="50%" y1="50%"
+                    x2="50%" y2="50%"
+                    stroke="rgba(91,164,217,0.18)"
+                    strokeWidth="1.5"
+                    strokeDasharray="4 6"
+                  />
+                  {/* Vertical dashes down the centre gap */}
+                  <line
+                    x1="0%" y1="50%"
+                    x2="100%" y2="50%"
+                    stroke="rgba(91,164,217,0.18)"
+                    strokeWidth="1.5"
+                    strokeDasharray="4 6"
+                  />
+                  <line
+                    x1="50%" y1="0%"
+                    x2="50%" y2="100%"
+                    stroke="rgba(91,164,217,0.18)"
+                    strokeWidth="1.5"
+                    strokeDasharray="4 6"
+                  />
+                </svg>
+              </div>
+
+              <motion.div
+                variants={staggerContainerWide}
+                initial="hidden"
+                whileInView="visible"
+                viewport={viewportOnce}
+                className="grid grid-cols-1 sm:grid-cols-2 gap-5"
+              >
+                {STEPS.map((step) => (
+                  <StepCard key={step.key} numeral={step.numeral} stepKey={step.key} Icon={step.Icon} />
+                ))}
+              </motion.div>
+            </div>
           </div>
 
         </div>