fix(ui): make Justine palette visible on marketing + trim rainbow chrome

- Replace blue/purple gradients with ink gradient text and cream/parch CTA surface
- Step badges and transformation icons use primary (ink) fills
- /features page icons unified to text-primary; Lora section titles
- Tree view status colors use semantic tokens instead of blue/green

Made-with: Cursor

marketing/components/cta.tsx

@@ -7,8 +7,8 @@ export function CTA() {
   return (
     <section className="w-full py-16 md:py-24">
       <div className="container mx-auto px-6">
-        <div className="mx-auto flex max-w-[980px] flex-col items-center gap-6 rounded-2xl border bg-gradient-to-br from-blue-50 to-purple-50 dark:from-blue-950/20 dark:to-purple-950/20 p-12 md:p-16">
-        <h2 className="text-2xl font-bold leading-tight tracking-tight md:text-4xl lg:text-5xl text-center max-w-[800px]">
+        <div className="vibn-cta-surface mx-auto flex max-w-[980px] flex-col items-center gap-6 rounded-2xl border border-border p-12 md:p-16">
+        <h2 className="font-serif text-2xl font-semibold leading-tight tracking-tight md:text-4xl lg:text-5xl text-center max-w-[800px]">
           {homepage.finalCTA.title}
         </h2>
         <div className="flex flex-col sm:flex-row gap-4 pt-4">

marketing/components/emotional-hook.tsx

@@ -5,10 +5,10 @@ export function EmotionalHook() {
     <section className="w-full py-16 md:py-24">
       <div className="container mx-auto px-6">
         <div className="mx-auto max-w-[800px] text-center space-y-4">
-        <h2 className="text-3xl font-bold tracking-tight md:text-5xl">
+        <h2 className="font-serif text-3xl font-semibold tracking-tight md:text-5xl">
           {homepage.emotionalHook.title}
         </h2>
-        <p className="text-4xl font-bold tracking-tight md:text-6xl bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
+        <p className="vibn-gradient-text font-serif text-4xl font-semibold tracking-tight md:text-6xl">
           {homepage.emotionalHook.subtitle}
         </p>
         <p className="text-lg text-muted-foreground md:text-xl pt-4 leading-relaxed">

marketing/components/features.tsx

@@ -6,7 +6,7 @@ export function Features() {
     <section id="features" className="w-full py-16 md:py-24">
       <div className="container mx-auto px-6">
         <div className="mx-auto flex max-w-[980px] flex-col items-center gap-4 mb-12">
-        <h2 className="text-3xl font-bold leading-tight tracking-tighter md:text-5xl text-center">
+        <h2 className="font-serif text-3xl font-semibold leading-tight tracking-tight md:text-5xl text-center">
           {homepage.features.title}
         </h2>
         <p className="max-w-[750px] text-center text-lg text-muted-foreground md:text-xl">

marketing/components/footer.tsx

@@ -35,7 +35,7 @@ export function Footer() {
           <div className="col-span-2 md:col-span-1">
             <Link href="/" className="flex items-center gap-2 mb-4">
               <img src="/vibn-black-circle-logo.png" alt="Vib'n" className="h-8 w-8" />
-              <span className="text-lg font-bold">Vib&apos;n</span>
+              <span className="font-serif text-lg font-bold tracking-tight">Vib&apos;n</span>
             </Link>
             <p className="text-sm text-muted-foreground leading-relaxed max-w-[220px]">
               AI-powered development platform for vibe coders. From idea to market.

marketing/components/how-it-works.tsx

@@ -6,7 +6,7 @@ export function HowItWorks() {
       <div className="container mx-auto px-6">
         <div className="mx-auto max-w-[900px] space-y-12">
         <div className="text-center space-y-4">
-          <h2 className="text-3xl font-bold tracking-tight md:text-5xl">
+          <h2 className="font-serif text-3xl font-semibold tracking-tight md:text-5xl">
             {homepage.howItWorks.title}
           </h2>
           <p className="text-lg text-muted-foreground md:text-xl">
@@ -18,7 +18,7 @@ export function HowItWorks() {
           {homepage.howItWorks.steps.map((step) => (
             <div key={step.number} className="flex gap-6">
               <div className="flex-shrink-0">
-                <div className="flex h-12 w-12 items-center justify-center rounded-full bg-gradient-to-br from-blue-600 to-purple-600 text-white font-bold text-xl">
+                <div className="flex h-12 w-12 items-center justify-center rounded-full bg-primary text-primary-foreground font-bold text-xl">
                   {step.number}
                 </div>
               </div>

marketing/components/pricing.tsx

@@ -10,7 +10,7 @@ export function Pricing() {
       <div className="container mx-auto px-6">
         <div className="mx-auto max-w-[980px] space-y-12">
         <div className="text-center space-y-4">
-          <h2 className="text-3xl font-bold tracking-tight md:text-5xl">
+          <h2 className="font-serif text-3xl font-semibold tracking-tight md:text-5xl">
             {homepage.pricing.title}
           </h2>
           <p className="text-lg text-muted-foreground md:text-xl">

marketing/components/transformation.tsx

@@ -7,7 +7,7 @@ export function Transformation() {
       <div className="container mx-auto px-6">
         <div className="mx-auto max-w-[900px] space-y-12">
         <div className="text-center space-y-4">
-          <h2 className="text-3xl font-bold tracking-tight md:text-5xl">
+          <h2 className="font-serif text-3xl font-semibold tracking-tight md:text-5xl">
             {homepage.transformation.title}
           </h2>
           <p className="text-lg text-muted-foreground md:text-xl pt-4 leading-relaxed">
@@ -21,8 +21,8 @@ export function Transformation() {
               key={index}
               className="flex items-start gap-4 rounded-lg border bg-background p-6 shadow-sm"
             >
-              <div className="rounded-full bg-gradient-to-br from-blue-500 to-purple-600 p-2 mt-1">
-                <Sparkles className="h-5 w-5 text-white" />
+              <div className="mt-1 rounded-full bg-primary p-2 text-primary-foreground">
+                <Sparkles className="h-5 w-5" />
               </div>
               <p className="text-lg leading-relaxed font-medium">{outcome}</p>
             </div>

marketing/components/who-its-for.tsx

@@ -7,7 +7,7 @@ export function WhoItsFor() {
       <div className="container mx-auto px-6">
         <div className="mx-auto max-w-[900px] space-y-12">
         <div className="text-center space-y-4">
-          <h2 className="text-3xl font-bold tracking-tight md:text-5xl">
+          <h2 className="font-serif text-3xl font-semibold tracking-tight md:text-5xl">
             {homepage.whoItsFor.title}
           </h2>
           <p className="text-2xl font-semibold text-muted-foreground md:text-3xl">