Fix(UI): Fix security page routing and standardize marketing CTA card styles

src/pages/marketing/DemoPage.tsx

@@ -227,29 +227,32 @@ return (
     </section>
 
     {/* CTA */}
-    <section className="py-16 lg:py-24 bg-muted/30">
+    <section className="py-16 lg:py-24">
       <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-        <div className="text-center max-w-2xl mx-auto">
-          <h2 className="text-3xl font-bold text-foreground mb-4">
-            Ready to Try It Yourself?
-          </h2>
-          <p className="text-lg text-muted-foreground mb-8">
-            Start your free trial today. No credit card required. Full access to all features.
-          </p>
-          <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
-            <Link to="/register">
-              <Button size="lg" className="gap-2">
-                Start Free Trial
-                <ArrowRight className="h-4 w-4" />
-              </Button>
-            </Link>
-            <Link to="/pricing">
-              <Button variant="outline" size="lg">
-                View Pricing
-              </Button>
-            </Link>
-          </div>
-        </div>
+        <Card className="bg-gradient-to-br from-primary to-primary/80 border-0 overflow-hidden relative">
+          <div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiNmZmYiIGZpbGwtb3BhY2l0eT0iMC4wNSI+PHBhdGggZD0iTTM2IDM0djItSDI0djJoMTJ6Ii8+PC9nPjwvZz48L3N2Zz4=')] opacity-50" />
+          <CardContent className="p-12 text-center relative">
+            <h2 className="text-3xl sm:text-4xl font-bold text-primary-foreground mb-4">
+              Ready to Try It Yourself?
+            </h2>
+            <p className="text-lg text-primary-foreground/80 max-w-2xl mx-auto mb-8">
+              Start your free trial today. No credit card required. Full access to all features.
+            </p>
+            <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
+              <Link to="/register">
+                <Button size="lg" variant="secondary" className="gap-2 bg-white text-primary hover:bg-white/90 font-semibold">
+                  Start Free Trial
+                  <ArrowRight className="h-4 w-4" />
+                </Button>
+              </Link>
+              <Link to="/pricing">
+                <Button size="lg" className="bg-transparent border-2 border-white text-white hover:bg-white/15 font-semibold">
+                  View Pricing
+                </Button>
+              </Link>
+            </div>
+          </CardContent>
+        </Card>
       </div>
     </section>
   </>