Your commit message

frontend/components/landing/SEODemoVisual.tsx

@@ -57,36 +57,37 @@ export function SEODemoVisual() {
 
         {/* SERP Snippet */}
         <motion.div
-          className="space-y-2 p-3 rounded-lg bg-white border-2"
+          className="space-y-2 p-3 rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950"
           animate={{
-            borderColor: phase === 0 ? 'hsl(var(--border))' : 'hsl(var(--teal))',
+            borderColor: phase === 0 ? '#27272a' : '#ef4444',
             boxShadow: phase === 0
-              ? '0 1px 3px rgba(0,0,0,0.1)'
-              : '0 0 20px hsl(var(--teal) / 0.3)'
+              ? '0 1px 3px rgba(0,0,0,0.2)'
+              : '0 0 20px rgba(239, 68, 68, 0.2)'
           }}
           transition={{ duration: 0.5 }}
         >
           {/* URL */}
           <div className="flex items-center gap-2">
-            <div className="w-4 h-4 rounded-full bg-primary" />
-            <span className="text-[10px] text-muted-foreground font-mono">
+            <div className="w-4 h-4 rounded-full bg-zinc-800" />
+            <span className="text-[10px] text-zinc-500 font-mono">
               competitor.com/product
             </span>
           </div>
 
           {/* Title */}
-          <h4 className="text-sm font-bold text-[hsl(var(--primary))] line-clamp-1">
+          <h4 className="text-sm font-bold text-zinc-300 line-clamp-1">
             Best Enterprise Software Solution 2026
           </h4>
 
           {/* Meta Description with change highlighting */}
           <motion.p
-            className="text-[11px] text-muted-foreground leading-relaxed relative"
+            className="text-[11px] text-zinc-500 leading-relaxed relative"
             layout
           >
             <motion.span
               animate={{
-                backgroundColor: phase === 1 ? 'hsl(var(--teal) / 0.2)' : 'transparent'
+                backgroundColor: phase === 1 ? 'rgba(239, 68, 68, 0.1)' : 'transparent',
+                color: phase === 1 ? '#ef4444' : 'inherit'
               }}
               transition={{ duration: 0.5 }}
               className="inline-block rounded px-0.5"
@@ -99,9 +100,9 @@ export function SEODemoVisual() {
               <motion.span
                 initial={{ opacity: 0, x: -5 }}
                 animate={{ opacity: 1, x: 0 }}
-                className="absolute -right-2 top-0 px-1.5 py-0.5 rounded bg-[hsl(var(--burgundy))] text-[8px] font-bold text-white"
+                className="absolute -right-2 top-0 px-1.5 py-0.5 rounded bg-red-500 text-[8px] font-bold text-white"
               >
-                NEW
+                Changed
               </motion.span>
             )}
           </motion.p>