diff --git a/frontend/src/marketing/pages/CaseStudies.tsx b/frontend/src/marketing/pages/CaseStudies.tsx
index 7058dc5a..cae70704 100644
--- a/frontend/src/marketing/pages/CaseStudies.tsx
+++ b/frontend/src/marketing/pages/CaseStudies.tsx
@@ -1,65 +1,103 @@
 import React from "react";
-import SectionHeading from "../components/SectionHeading";
-import CTASection from "../components/CTASection";
-
-const caseStudies = [
-  {
-    company: "Lumen Publishing",
-    headline: "From 40 to 220 articles/month with 3× SERP visibility.",
-    metrics: [
-      { label: "Organic traffic", value: "+210%" },
-      { label: "Time-to-publish", value: "-58%" },
-      { label: "Cost per article", value: "-34%" },
-    ],
-    summary:
-      "Publisher running 6 niche brands used Igny8 to centralize research, briefs, and AI-assisted writing. Automation recipes ensured every keyword moved to published content with minimal handoff friction.",
-    image: "case-lumen.png",
-  },
-  {
-    company: "Northbeam Digital",
-    headline: "Agency tripled client output without adding headcount.",
-    metrics: [
-      { label: "Client satisfaction", value: "98%" },
-      { label: "Deliverables/mo", value: "+175%" },
-      { label: "Margin lift", value: "+22%" },
-    ],
-    summary:
-      "Multi-client agency adopted Igny8 to standardize workflows, automate reporting, and launch custom Thinker playbooks. Teams now produce keyword research, content, and images for 20+ clients simultaneously.",
-    image: "case-northbeam.png",
-  },
-  {
-    company: "Arcadia SaaS",
-    headline: "In-house team built a 7-stage automation pipeline.",
-    metrics: [
-      { label: "New keywords ranked", value: "1,040" },
-      { label: "Automation coverage", value: "82%" },
-      { label: "Time saved monthly", value: "120 hrs" },
-    ],
-    summary:
-      "Arcadia used Igny8 to align SEO, product marketing, and design. Thinker libraries ensured every asset matched product messaging; automation pushed approved content directly into WordPress and HubSpot.",
-    image: "case-arcadia.png",
-  },
-];
+import { Link } from "react-router-dom";
+import {
+  RocketLaunchIcon,
+  ChatBubbleLeftRightIcon,
+  ArrowRightIcon,
+  CheckCircleIcon,
+} from "@heroicons/react/24/outline";
 
 const CaseStudies: React.FC = () => {
+  const renderCta = (cta: { label: string; href: string }, className: string) => {
+    const isExternal = cta.href.startsWith("http");
+    
+    if (isExternal) {
+      return (
+        <a
+          href={cta.href}
+          className={className}
+          target="_blank"
+          rel="noreferrer"
+        >
+          {cta.label}
+        </a>
+      );
+    }
+    
+    return (
+      <Link to={cta.href} className={className}>
+        {cta.label}
+      </Link>
+    );
+  };
+
+  const caseStudies = [
+    {
+      company: "Lumen Publishing",
+      headline: "From 40 to 220 articles/month with 3× SERP visibility.",
+      metrics: [
+        { label: "Organic traffic", value: "+210%" },
+        { label: "Time-to-publish", value: "-58%" },
+        { label: "Cost per article", value: "-34%" },
+      ],
+      summary:
+        "Publisher running 6 niche brands used Igny8 to centralize research, briefs, and AI-assisted writing. Automation recipes ensured every keyword moved to published content with minimal handoff friction.",
+      image: "case-lumen.png",
+      color: "from-[#0693e3]/10 to-white",
+      borderColor: "border-[#0693e3]/30",
+    },
+    {
+      company: "Northbeam Digital",
+      headline: "Agency tripled client output without adding headcount.",
+      metrics: [
+        { label: "Client satisfaction", value: "98%" },
+        { label: "Deliverables/mo", value: "+175%" },
+        { label: "Margin lift", value: "+22%" },
+      ],
+      summary:
+        "Multi-client agency adopted Igny8 to standardize workflows, automate reporting, and launch custom Thinker playbooks. Teams now produce keyword research, content, and images for 20+ clients simultaneously.",
+      image: "case-northbeam.png",
+      color: "from-[#0bbf87]/10 to-white",
+      borderColor: "border-[#0bbf87]/30",
+    },
+    {
+      company: "Arcadia SaaS",
+      headline: "In-house team built a 7-stage automation pipeline.",
+      metrics: [
+        { label: "New keywords ranked", value: "1,040" },
+        { label: "Automation coverage", value: "82%" },
+        { label: "Time saved monthly", value: "120 hrs" },
+      ],
+      summary:
+        "Arcadia used Igny8 to align SEO, product marketing, and design. Thinker libraries ensured every asset matched product messaging; automation pushed approved content directly into WordPress and HubSpot.",
+      image: "case-arcadia.png",
+      color: "from-[#5d4ae3]/10 to-white",
+      borderColor: "border-[#5d4ae3]/30",
+    },
+  ];
+
   return (
-    <div className="bg-gradient-to-b from-white via-slate-50/30 to-white text-slate-900">
-      <section className="max-w-6xl mx-auto px-6 pt-24 pb-16">
-        <SectionHeading
-          eyebrow="Proof"
-          title="Stories from teams automating their way to category leadership."
-          description="See how publishers, agencies, and SaaS companies transformed their SEO and content operations with Igny8."
-        />
+    <div className="bg-white">
+      {/* HERO SECTION */}
+      <section className="relative overflow-hidden bg-gradient-to-b from-white via-slate-50/50 to-white">
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(6,147,227,0.03),transparent_60%)]" />
+        
+        <div className="relative max-w-4xl mx-auto px-6 py-24 md:py-32 text-center z-10">
+          <span className="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.28em] text-slate-500 bg-slate-100 px-4 py-2 rounded-full mb-6">
+            Case Studies
+          </span>
+          <h1 className="text-5xl md:text-6xl lg:text-5xl font-bold leading-tight text-slate-900 mb-6">
+            Stories from teams automating their way to category leadership.
+          </h1>
+          <p className="text-xl md:text-2xl text-slate-600 mb-10 max-w-2xl mx-auto leading-relaxed">
+            See how publishers, agencies, and SaaS companies transformed their SEO and content operations with Igny8.
+          </p>
+        </div>
       </section>
 
-      <section className="max-w-6xl mx-auto px-6 pb-24 space-y-12">
+      {/* CASE STUDIES GRID */}
+      <section className="max-w-7xl mx-auto px-6 pb-24 space-y-16">
         {caseStudies.map((cs, idx) => {
-          const gradients = [
-            { border: "border-[#0693e3]/40", bg: "from-[#0693e3]/10 via-white to-[#0bbf87]/5" },
-            { border: "border-[#0bbf87]/40", bg: "from-[#0bbf87]/10 via-white to-[#ff7a00]/5" },
-            { border: "border-[#5d4ae3]/40", bg: "from-[#5d4ae3]/10 via-white to-[#0693e3]/5" },
-          ];
-          const gradient = gradients[idx % gradients.length];
           const metricColors = [
             { border: "border-[#0693e3]/30", bg: "from-[#0693e3]/10 to-white", text: "text-[#0693e3]" },
             { border: "border-[#0bbf87]/30", bg: "from-[#0bbf87]/10 to-white", text: "text-[#0bbf87]" },
@@ -68,26 +106,26 @@ const CaseStudies: React.FC = () => {
           return (
             <div
               key={cs.company}
-              className={`rounded-3xl border-2 ${gradient.border} bg-gradient-to-br ${gradient.bg} p-12 grid grid-cols-1 lg:grid-cols-2 gap-12 hover:shadow-xl transition-all`}
+              className={`rounded-3xl border-2 ${cs.borderColor} bg-gradient-to-br ${cs.color} p-10 md:p-12 grid grid-cols-1 lg:grid-cols-2 gap-12 hover:shadow-xl hover:-translate-y-1 transition-all`}
             >
               <div className="space-y-6">
-                <span className="text-xs uppercase tracking-[0.3em] text-slate-500 font-semibold">
+                <span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold uppercase tracking-[0.2em] bg-slate-100 text-slate-600">
                   {cs.company}
                 </span>
-                <h3 className="text-2xl font-semibold text-slate-900">{cs.headline}</h3>
-                <p className="text-sm text-slate-600 leading-relaxed">{cs.summary}</p>
-                <div className="grid grid-cols-3 gap-4">
+                <h3 className="text-3xl md:text-4xl font-bold text-slate-900">{cs.headline}</h3>
+                <p className="text-base text-slate-600 leading-relaxed">{cs.summary}</p>
+                <div className="grid grid-cols-3 gap-4 pt-4">
                   {cs.metrics.map((metric, metricIdx) => {
                     const metricColor = metricColors[metricIdx % metricColors.length];
                     return (
                       <div
                         key={metric.label}
-                        className={`rounded-2xl border-2 ${metricColor.border} bg-gradient-to-br ${metricColor.bg} p-4 text-center space-y-2 hover:shadow-lg transition-all`}
+                        className={`rounded-2xl border-2 ${metricColor.border} bg-gradient-to-br ${metricColor.bg} p-5 text-center space-y-2 hover:shadow-lg transition-all`}
                       >
-                        <div className={`text-xl font-semibold ${metricColor.text}`}>
+                        <div className={`text-2xl md:text-3xl font-bold ${metricColor.text}`}>
                           {metric.value}
                         </div>
-                        <div className="text-xs uppercase tracking-[0.2em] text-slate-500">
+                        <div className="text-xs uppercase tracking-[0.2em] text-slate-600 font-semibold">
                           {metric.label}
                         </div>
                       </div>
@@ -95,62 +133,99 @@ const CaseStudies: React.FC = () => {
                   })}
                 </div>
               </div>
-              <div className="rounded-3xl border-2 border-slate-200 bg-gradient-to-br from-slate-50 to-white overflow-hidden shadow-inner">
-                <img
-                  src={`/marketing/images/${cs.image}`}
-                  alt={`${cs.company} case study`}
-                  className="w-full h-full object-cover"
-                />
+              <div className="relative">
+                <div className="rounded-3xl border-2 border-slate-200 bg-gradient-to-br from-slate-50 to-white overflow-hidden shadow-lg">
+                  <img
+                    src={`/marketing/images/${cs.image}`}
+                    alt={`${cs.company} case study`}
+                    className="w-full h-full object-cover"
+                  />
+                </div>
+                {/* Subtle glow */}
+                <div className={`absolute -inset-2 bg-gradient-to-br ${cs.color} rounded-3xl opacity-20 blur-xl -z-10`} />
               </div>
             </div>
           );
         })}
       </section>
 
-      <section className="bg-gradient-to-br from-[#0693e3]/10 via-slate-50/70 to-[#0bbf87]/10 border-y border-[#0693e3]/20">
-        <div className="max-w-6xl mx-auto px-6 py-24 grid grid-cols-1 md:grid-cols-2 gap-12">
-          <div className="rounded-3xl border-2 border-[#0693e3]/30 bg-gradient-to-br from-[#0693e3]/10 to-white p-8 space-y-4">
-            <h4 className="text-lg font-semibold text-slate-900 flex items-center gap-2">
-              <span className="size-2 rounded-full bg-[#0693e3]"></span>
-              Results you can expect
-            </h4>
-            <ul className="space-y-3 text-sm text-slate-600">
+      {/* RESULTS & ADVISORY BOARD */}
+      <section className="bg-gradient-to-b from-white via-slate-50/30 to-white py-24">
+        <div className="max-w-7xl mx-auto px-6 grid grid-cols-1 lg:grid-cols-2 gap-8">
+          <div className="rounded-3xl border-2 border-[#0693e3]/30 bg-gradient-to-br from-[#0693e3]/10 via-white to-[#0bbf87]/5 p-8 space-y-6 shadow-lg">
+            <div className="flex items-center gap-3">
+              <div className="size-12 rounded-xl bg-gradient-to-br from-[#0693e3] to-[#0472b8] flex items-center justify-center text-white shadow-lg">
+                <CheckCircleIcon className="h-6 w-6" />
+              </div>
+              <h4 className="text-2xl font-bold text-slate-900">
+                Results you can expect
+              </h4>
+            </div>
+            <ul className="space-y-4 text-sm text-slate-700">
               {[
                 { text: "30-60 day onboarding to deploy automation and Thinker governance.", color: "bg-[#0693e3]" },
                 { text: "3-5× increase in content throughput without sacrificing editorial quality.", color: "bg-[#0bbf87]" },
                 { text: "Clear ROI dashboards tying automation to revenue outcomes.", color: "bg-[#ff7a00]" },
-              ].map((item) => (
+              ].map((item, index) => (
                 <li key={item.text} className="flex gap-3">
-                  <span className={`mt-1 size-1.5 rounded-full ${item.color} shadow-sm`} />
-                  {item.text}
+                  <span className={`mt-1.5 size-2 rounded-full ${item.color} shadow-sm flex-shrink-0`} />
+                  <span>{item.text}</span>
                 </li>
               ))}
             </ul>
           </div>
-          <div className="rounded-3xl border-2 border-[#0bbf87]/30 bg-gradient-to-br from-[#0bbf87]/10 to-white p-10 space-y-4 text-sm text-slate-600">
-            <h4 className="text-lg font-semibold text-slate-900 flex items-center gap-2">
-              <span className="size-2 rounded-full bg-[#0bbf87]"></span>
-              Customer advisory board
-            </h4>
-            <p>
+          <div className="rounded-3xl border-2 border-[#0bbf87]/30 bg-gradient-to-br from-[#0bbf87]/10 via-white to-[#5d4ae3]/5 p-8 space-y-6 shadow-lg">
+            <div className="flex items-center gap-3">
+              <div className="size-12 rounded-xl bg-gradient-to-br from-[#0bbf87] to-[#08966b] flex items-center justify-center text-white shadow-lg">
+                <CheckCircleIcon className="h-6 w-6" />
+              </div>
+              <h4 className="text-2xl font-bold text-slate-900">
+                Customer advisory board
+              </h4>
+            </div>
+            <p className="text-base text-slate-700 leading-relaxed">
               Igny8's roadmap is shaped by an active community of customer strategists, agency partners, and product marketers. Join and get early access to features, template libraries, and industry benchmarks.
             </p>
-            <button className="inline-flex items-center justify-center rounded-full bg-gradient-to-r from-[#0693e3] to-[#0472b8] hover:from-[#0472b8] hover:to-[#0693e3] text-white px-5 py-2 text-sm font-semibold shadow-lg shadow-[#0693e3]/30 transition-all">
+            <button className="inline-flex items-center justify-center gap-2 rounded-xl bg-gradient-to-r from-[#0693e3] to-[#0472b8] text-white px-6 py-3 text-sm font-semibold hover:shadow-lg transition">
               Join the CAB waitlist
+              <ArrowRightIcon className="h-4 w-4" />
             </button>
           </div>
         </div>
       </section>
 
-      <CTASection
-        title="Let’s document your Igny8 success story next."
-        description="Share your goals and we’ll map an automation blueprint specific to your team, then track and celebrate the wins together."
-        primaryCta={{ label: "Book strategy session", href: "/contact" }}
-        secondaryCta={{ label: "Download case study pack", href: "/resources" }}
-      />
+      {/* FINAL CTA */}
+      <section className="relative overflow-hidden bg-gradient-to-br from-[#0693e3] via-[#5d4ae3] to-[#8b5cf6]">
+        {/* Radial glow */}
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(255,255,255,0.1),transparent_70%)]" />
+        
+        <div className="relative max-w-4xl mx-auto px-6 py-24 md:py-32 text-center z-10">
+          <h2 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white mb-6 leading-tight">
+            Let's document your Igny8 success story next.
+          </h2>
+          <p className="text-xl md:text-2xl text-white/90 mb-12 max-w-2xl mx-auto font-medium">
+            Share your goals and we'll map an automation blueprint specific to your team, then track and celebrate the wins together.
+          </p>
+          <div className="flex flex-col sm:flex-row gap-5 justify-center">
+            <Link
+              to="/contact"
+              className="inline-flex items-center justify-center gap-2 rounded-xl border-2 border-white/30 bg-white/10 backdrop-blur-sm text-white px-10 py-5 text-lg font-bold hover:bg-white/20 hover:border-white/50 transition"
+            >
+              <ChatBubbleLeftRightIcon className="h-5 w-5" />
+              Book strategy session
+            </Link>
+            <Link
+              to="/resources"
+              className="inline-flex items-center justify-center gap-2 rounded-xl bg-white text-[#0693e3] px-10 py-5 text-lg font-bold hover:bg-white/95 transition shadow-xl hover:shadow-2xl hover:-translate-y-0.5"
+            >
+              <RocketLaunchIcon className="h-5 w-5" />
+              Download case study pack
+            </Link>
+          </div>
+        </div>
+      </section>
     </div>
   );
 };
 
 export default CaseStudies;
-
diff --git a/frontend/src/marketing/pages/Partners.tsx b/frontend/src/marketing/pages/Partners.tsx
index a2cd27e7..014cdc38 100644
--- a/frontend/src/marketing/pages/Partners.tsx
+++ b/frontend/src/marketing/pages/Partners.tsx
@@ -1,105 +1,185 @@
 import React from "react";
-import SectionHeading from "../components/SectionHeading";
-import CTASection from "../components/CTASection";
-
-const tiers = [
-  {
-    title: "Certified Agency",
-    benefits: [
-      "Co-branded marketing assets and listing in partner directory.",
-      "Dedicated partner manager and quarterly business reviews.",
-      "Access to automation templates and think tank sessions.",
-    ],
-  },
-  {
-    title: "Technology Partner",
-    benefits: [
-      "API access, sandbox environments, and technical documentation.",
-      "Joint integration roadmap planning and go-to-market support.",
-      "Shared lead programs and launch promotion campaigns.",
-    ],
-  },
-  {
-    title: "Affiliate & Advocate",
-    benefits: [
-      "Performance-based revenue share with lifetime attribution.",
-      "Early access to new features and partner community channels.",
-      "Custom reporting dashboards to track referred accounts.",
-    ],
-  },
-];
+import { Link } from "react-router-dom";
+import {
+  RocketLaunchIcon,
+  ChatBubbleLeftRightIcon,
+  ArrowRightIcon,
+  CheckCircleIcon,
+  CodeBracketIcon,
+  WrenchScrewdriverIcon,
+} from "@heroicons/react/24/outline";
 
 const Partners: React.FC = () => {
+  const renderCta = (cta: { label: string; href: string }, className: string) => {
+    const isExternal = cta.href.startsWith("http");
+    
+    if (isExternal) {
+      return (
+        <a
+          href={cta.href}
+          className={className}
+          target="_blank"
+          rel="noreferrer"
+        >
+          {cta.label}
+        </a>
+      );
+    }
+    
+    return (
+      <Link to={cta.href} className={className}>
+        {cta.label}
+      </Link>
+    );
+  };
+
+  const tiers = [
+    {
+      title: "Certified Agency",
+      description: "For agencies delivering content services at scale",
+      benefits: [
+        "Co-branded marketing assets and listing in partner directory",
+        "Dedicated partner manager and quarterly business reviews",
+        "Access to automation templates and think tank sessions",
+      ],
+      icon: CheckCircleIcon,
+      color: "from-[#0693e3] to-[#0472b8]",
+      borderColor: "border-[#0693e3]/30",
+      bgColor: "from-[#0693e3]/10 to-white",
+    },
+    {
+      title: "Technology Partner",
+      description: "For platforms building integrations with IGNY8",
+      benefits: [
+        "API access, sandbox environments, and technical documentation",
+        "Joint integration roadmap planning and go-to-market support",
+        "Shared lead programs and launch promotion campaigns",
+      ],
+      icon: CodeBracketIcon,
+      color: "from-[#0bbf87] to-[#08966b]",
+      borderColor: "border-[#0bbf87]/30",
+      bgColor: "from-[#0bbf87]/10 to-white",
+    },
+    {
+      title: "Affiliate & Advocate",
+      description: "For individuals and teams referring IGNY8",
+      benefits: [
+        "Performance-based revenue share with lifetime attribution",
+        "Early access to new features and partner community channels",
+        "Custom reporting dashboards to track referred accounts",
+      ],
+      icon: RocketLaunchIcon,
+      color: "from-[#ff7a00] to-[#cc5f00]",
+      borderColor: "border-[#ff7a00]/30",
+      bgColor: "from-[#ff7a00]/10 to-white",
+    },
+  ];
+
   return (
-    <div className="bg-gradient-to-b from-white via-slate-50/30 to-white text-slate-900">
-      <section className="max-w-6xl mx-auto px-6 pt-24 pb-16">
-        <SectionHeading
-          eyebrow="Partners"
-          title="Grow faster together—build services and solutions on Igny8."
-          description="Join our partner ecosystem to co-create automations, deliver measurable results, and co-market AI-driven success stories."
-        />
+    <div className="bg-white">
+      {/* HERO SECTION */}
+      <section className="relative overflow-hidden bg-gradient-to-b from-white via-slate-50/50 to-white">
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(6,147,227,0.03),transparent_60%)]" />
+        
+        <div className="relative max-w-4xl mx-auto px-6 py-24 md:py-32 text-center z-10">
+          <span className="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.28em] text-slate-500 bg-slate-100 px-4 py-2 rounded-full mb-6">
+            Partners
+          </span>
+          <h1 className="text-5xl md:text-6xl lg:text-5xl font-bold leading-tight text-slate-900 mb-6">
+            Grow faster together—build services and solutions on Igny8.
+          </h1>
+          <p className="text-xl md:text-2xl text-slate-600 mb-10 max-w-2xl mx-auto leading-relaxed">
+            Join our partner ecosystem to co-create automations, deliver measurable results, and co-market AI-driven success stories.
+          </p>
+        </div>
       </section>
 
-      <section className="max-w-6xl mx-auto px-6 pb-24 grid grid-cols-1 md:grid-cols-3 gap-8">
-        {tiers.map((tier, idx) => {
-          const colors = [
-            { border: "border-[#0693e3]/40", gradient: "from-[#0693e3]/10 to-white", dot: "bg-[#0693e3]" },
-            { border: "border-[#0bbf87]/40", gradient: "from-[#0bbf87]/10 to-white", dot: "bg-[#0bbf87]" },
-            { border: "border-[#ff7a00]/40", gradient: "from-[#ff7a00]/10 to-white", dot: "bg-[#ff7a00]" },
-          ];
-          const colorScheme = colors[idx % colors.length];
-          return (
-            <div
-              key={tier.title}
-              className={`rounded-3xl border-2 ${colorScheme.border} bg-gradient-to-br ${colorScheme.gradient} p-8 flex flex-col gap-5 hover:shadow-xl transition-all hover:-translate-y-1`}
-            >
-              <span className="text-xs uppercase tracking-[0.3em] text-slate-500 font-semibold">
-                Program
-              </span>
-              <h3 className="text-xl font-semibold text-slate-900">{tier.title}</h3>
-              <ul className="space-y-3 text-sm text-slate-600">
-                {tier.benefits.map((benefit, benefitIdx) => {
-                  const benefitColors = ["bg-[#0693e3]", "bg-[#0bbf87]", "bg-[#ff7a00]", "bg-[#5d4ae3]"];
-                  return (
-                    <li key={benefit} className="flex gap-3">
-                      <span className={`mt-1 size-1.5 rounded-full ${benefitColors[benefitIdx % benefitColors.length]} shadow-sm`} />
-                      {benefit}
-                    </li>
-                  );
-                })}
-              </ul>
-            </div>
-          );
-        })}
+      {/* PARTNER TIERS */}
+      <section className="max-w-7xl mx-auto px-6 pb-24">
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          {tiers.map((tier, idx) => {
+            const Icon = tier.icon;
+            return (
+              <div
+                key={tier.title}
+                className={`rounded-3xl border-2 ${tier.borderColor} bg-gradient-to-br ${tier.bgColor} p-8 flex flex-col gap-6 hover:shadow-xl hover:-translate-y-1 transition-all`}
+              >
+                <div className="flex items-center gap-4">
+                  <div className={`inline-flex size-14 rounded-xl bg-gradient-to-br ${tier.color} items-center justify-center text-white shadow-lg`}>
+                    <Icon className="h-7 w-7" />
+                  </div>
+                  <div>
+                    <span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold uppercase tracking-[0.2em] bg-slate-100 text-slate-600 mb-2">
+                      Program
+                    </span>
+                    <h3 className="text-2xl font-bold text-slate-900">{tier.title}</h3>
+                  </div>
+                </div>
+                <p className="text-sm text-slate-600 font-medium">{tier.description}</p>
+                <ul className="space-y-4 text-sm text-slate-700 flex-1">
+                  {tier.benefits.map((benefit, benefitIdx) => {
+                    const dotColors = ["bg-[#0693e3]", "bg-[#0bbf87]", "bg-[#ff7a00]", "bg-[#5d4ae3]"];
+                    return (
+                      <li key={benefit} className="flex gap-3">
+                        <span className={`mt-1.5 size-2 rounded-full ${dotColors[benefitIdx % dotColors.length]} shadow-sm flex-shrink-0`} />
+                        <span>{benefit}</span>
+                      </li>
+                    );
+                  })}
+                </ul>
+              </div>
+            );
+          })}
+        </div>
       </section>
 
-      <section className="bg-gradient-to-br from-[#0693e3]/10 via-slate-50/70 to-[#0bbf87]/10 border-y border-[#0693e3]/20">
-        <div className="max-w-6xl mx-auto px-6 py-24 grid grid-cols-1 lg:grid-cols-2 gap-12">
+      {/* API & INTEGRATIONS + PARTNER RESOURCES */}
+      <section className="bg-gradient-to-b from-white via-slate-50/30 to-white py-24">
+        <div className="max-w-7xl mx-auto px-6 grid grid-cols-1 lg:grid-cols-2 gap-12">
+          {/* Left: API & Integrations */}
           <div className="space-y-6">
-            <SectionHeading
-              eyebrow="API & integrations"
-              title="Embed Igny8 intelligence into your workflows."
-              description="Use Igny8 APIs and webhooks to power your own products, analytics, or client portals. Automate keyword ingestion, content creation, asset delivery, and reporting."
-              align="left"
-            />
-            <div className="rounded-3xl border-2 border-[#0693e3]/30 bg-gradient-to-br from-[#0693e3]/10 to-white p-6 text-sm text-slate-600 shadow-lg">
-              API docs placeholder (download at `/marketing/images/api-docs.png`, 1100×720).
+            <div className="flex items-center gap-3 mb-4">
+              <div className="size-12 rounded-xl bg-gradient-to-br from-[#0693e3] to-[#0472b8] flex items-center justify-center text-white shadow-lg">
+                <CodeBracketIcon className="h-6 w-6" />
+              </div>
+              <div>
+                <span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold uppercase tracking-[0.2em] bg-slate-100 text-slate-600 mb-2">
+                  API & Integrations
+                </span>
+                <h2 className="text-3xl md:text-4xl font-bold text-slate-900">
+                  Embed Igny8 intelligence into your workflows.
+                </h2>
+              </div>
+            </div>
+            <p className="text-lg text-slate-600 leading-relaxed">
+              Use Igny8 APIs and webhooks to power your own products, analytics, or client portals. Automate keyword ingestion, content creation, asset delivery, and reporting.
+            </p>
+            <div className="rounded-3xl border-2 border-[#0693e3]/30 bg-gradient-to-br from-[#0693e3]/10 to-white p-8 shadow-lg">
+              <div className="rounded-2xl border-2 border-slate-200 bg-gradient-to-br from-slate-50 to-white h-64 flex items-center justify-center text-sm text-slate-400 shadow-inner">
+                API docs placeholder
+              </div>
             </div>
           </div>
-          <div className="rounded-3xl border-2 border-[#0bbf87]/30 bg-gradient-to-br from-[#0bbf87]/10 to-white p-10 space-y-6">
-            <h4 className="text-lg font-semibold text-slate-900 flex items-center gap-2">
-              <span className="size-2 rounded-full bg-[#0bbf87]"></span>
-              Partner resources
-            </h4>
-            <ul className="space-y-4 text-sm text-slate-600">
+
+          {/* Right: Partner Resources */}
+          <div className="rounded-3xl border-2 border-[#0bbf87]/30 bg-gradient-to-br from-[#0bbf87]/10 via-white to-[#5d4ae3]/5 p-10 space-y-6 shadow-lg">
+            <div className="flex items-center gap-3">
+              <div className="size-12 rounded-xl bg-gradient-to-br from-[#0bbf87] to-[#08966b] flex items-center justify-center text-white shadow-lg">
+                <WrenchScrewdriverIcon className="h-6 w-6" />
+              </div>
+              <h4 className="text-2xl font-bold text-slate-900">
+                Partner resources
+              </h4>
+            </div>
+            <ul className="space-y-4 text-sm text-slate-700">
               {[
                 { text: "Sales playbooks, ROI calculators, and demo environments.", color: "bg-[#0693e3]" },
                 { text: "Shared Slack channels with Igny8 product and marketing teams.", color: "bg-[#0bbf87]" },
                 { text: "Quarterly partner labs to showcase launches and integrations.", color: "bg-[#ff7a00]" },
-              ].map((item) => (
+              ].map((item, index) => (
                 <li key={item.text} className="flex gap-3">
-                  <span className={`mt-1 size-1.5 rounded-full ${item.color} shadow-sm`} />
-                  {item.text}
+                  <span className={`mt-1.5 size-2 rounded-full ${item.color} shadow-sm flex-shrink-0`} />
+                  <span>{item.text}</span>
                 </li>
               ))}
             </ul>
@@ -107,15 +187,40 @@ const Partners: React.FC = () => {
         </div>
       </section>
 
-      <CTASection
-        title="Become an Igny8 partner."
-        description="Apply today to co-create automations, launch integrations, and grow with our shared go-to-market engine."
-        primaryCta={{ label: "Apply now", href: "/contact" }}
-        secondaryCta={{ label: "Download partner deck", href: "/marketing/images/partner-program.png" }}
-      />
+      {/* FINAL CTA */}
+      <section className="relative overflow-hidden bg-gradient-to-br from-[#0693e3] via-[#5d4ae3] to-[#8b5cf6]">
+        {/* Radial glow */}
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(255,255,255,0.1),transparent_70%)]" />
+        
+        <div className="relative max-w-4xl mx-auto px-6 py-24 md:py-32 text-center z-10">
+          <h2 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white mb-6 leading-tight">
+            Become an Igny8 partner.
+          </h2>
+          <p className="text-xl md:text-2xl text-white/90 mb-12 max-w-2xl mx-auto font-medium">
+            Apply today to co-create automations, launch integrations, and grow with our shared go-to-market engine.
+          </p>
+          <div className="flex flex-col sm:flex-row gap-5 justify-center">
+            <Link
+              to="/contact"
+              className="inline-flex items-center justify-center gap-2 rounded-xl border-2 border-white/30 bg-white/10 backdrop-blur-sm text-white px-10 py-5 text-lg font-bold hover:bg-white/20 hover:border-white/50 transition"
+            >
+              <ChatBubbleLeftRightIcon className="h-5 w-5" />
+              Apply now
+            </Link>
+            <a
+              href="/marketing/images/partner-program.png"
+              target="_blank"
+              rel="noreferrer"
+              className="inline-flex items-center justify-center gap-2 rounded-xl bg-white text-[#0693e3] px-10 py-5 text-lg font-bold hover:bg-white/95 transition shadow-xl hover:shadow-2xl hover:-translate-y-0.5"
+            >
+              <RocketLaunchIcon className="h-5 w-5" />
+              Download partner deck
+            </a>
+          </div>
+        </div>
+      </section>
     </div>
   );
 };
 
 export default Partners;
-