From eff75a1ab58ce8b5ebfcdc61576f0d26d86fd3ad Mon Sep 17 00:00:00 2001
From: Mark Henderson <mark@getacquired.com>
Date: Fri, 6 Mar 2026 10:21:22 -0800
Subject: [PATCH] Scale all marketing scaffolds to full website proportions
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Remove compact/condensed sizing — all four scaffolds now render at real
website scale (72-80px headlines, 15-18px body, 80px section padding,
48-52px buttons, 64px navs, 340px DashMockup height) so the preview
scrolls naturally rather than squishing everything to fit the viewport.

Made-with: Cursor
---
 components/design-scaffolds/marketing.tsx | 720 +++++++++++-----------
 1 file changed, 360 insertions(+), 360 deletions(-)

diff --git a/components/design-scaffolds/marketing.tsx b/components/design-scaffolds/marketing.tsx
index 3e12a4a..e6c6ee7 100644
--- a/components/design-scaffolds/marketing.tsx
+++ b/components/design-scaffolds/marketing.tsx
@@ -40,29 +40,29 @@ function DashMockup({
   const uid = accent.replace(/[^a-z0-9]/gi, "").slice(0, 6) || "acc";
   return (
     <div style={{
-      borderRadius: 12, overflow: "hidden",
+      borderRadius: 16, overflow: "hidden",
       border: `1px solid ${border}`,
-      boxShadow: "0 32px 80px rgba(0,0,0,0.22), 0 8px 24px rgba(0,0,0,0.1)",
+      boxShadow: "0 48px 120px rgba(0,0,0,0.25), 0 12px 36px rgba(0,0,0,0.12)",
       background: card, userSelect: "none",
     }}>
       {/* Browser chrome */}
       <div style={{
-        height: 26, display: "flex", alignItems: "center", gap: 5,
-        padding: "0 10px", background: bg, borderBottom: `1px solid ${border}`, flexShrink: 0,
+        height: 40, display: "flex", alignItems: "center", gap: 7,
+        padding: "0 16px", background: bg, borderBottom: `1px solid ${border}`, flexShrink: 0,
       }}>
         {["#ff5f56","#ffbd2e","#27c93f"].map((c, i) => (
-          <div key={i} style={{ width: 7, height: 7, borderRadius: "50%", background: c }} />
+          <div key={i} style={{ width: 10, height: 10, borderRadius: "50%", background: c }} />
         ))}
-        <div style={{ marginLeft: 8, height: 13, width: 150, borderRadius: 4, background: border, opacity: 0.55 }} />
+        <div style={{ marginLeft: 12, height: 18, width: 220, borderRadius: 6, background: border, opacity: 0.55 }} />
       </div>
 
-      <div style={{ display: "flex", height: 172 }}>
+      <div style={{ display: "flex", height: 340 }}>
         {/* Sidebar */}
         <div style={{
-          width: 44, background: bg, borderRight: `1px solid ${border}`,
-          padding: "10px 7px", display: "flex", flexDirection: "column", gap: 4, flexShrink: 0,
+          width: 64, background: bg, borderRight: `1px solid ${border}`,
+          padding: "16px 10px", display: "flex", flexDirection: "column", gap: 6, flexShrink: 0,
         }}>
-          <div style={{ width: 24, height: 24, borderRadius: 6, background: accent, marginBottom: 6 }} />
+          <div style={{ width: 34, height: 34, borderRadius: 9, background: accent, marginBottom: 10 }} />
           {[
             "M4 6h16M4 12h16M4 18h10",
             "M3 3h7v7H3zM14 3h7v7h-7zM3 14h7v7H3zM14 14h7v7h-7z",
@@ -70,10 +70,10 @@ function DashMockup({
             "M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z",
           ].map((d, i) => (
             <div key={i} style={{
-              width: 28, height: 28, borderRadius: 6, display: "flex", alignItems: "center", justifyContent: "center",
+              width: 40, height: 40, borderRadius: 9, display: "flex", alignItems: "center", justifyContent: "center",
               background: i === 0 ? `${accent}18` : "transparent",
             }}>
-              <svg viewBox="0 0 24 24" fill="none" stroke={i === 0 ? accent : muted} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" style={{ width: 13, height: 13 }}>
+              <svg viewBox="0 0 24 24" fill="none" stroke={i === 0 ? accent : muted} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" style={{ width: 18, height: 18 }}>
                 <path d={d} />
               </svg>
             </div>
@@ -81,64 +81,64 @@ function DashMockup({
         </div>
 
         {/* Main area */}
-        <div style={{ flex: 1, padding: "12px", display: "flex", flexDirection: "column", gap: 8, overflow: "hidden" }}>
+        <div style={{ flex: 1, padding: "20px 24px", display: "flex", flexDirection: "column", gap: 16, overflow: "hidden" }}>
           {/* Header row */}
           <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
-            <p style={{ fontSize: 11, fontWeight: 700, color: text, letterSpacing: "-0.01em" }}>Analytics</p>
-            <div style={{ height: 20, padding: "0 10px", borderRadius: 5, background: accent, display: "flex", alignItems: "center" }}>
-              <span style={{ fontSize: 7.5, fontWeight: 600, color: "#fff" }}>+ New report</span>
+            <p style={{ fontSize: 17, fontWeight: 700, color: text, letterSpacing: "-0.01em" }}>Analytics</p>
+            <div style={{ height: 32, padding: "0 16px", borderRadius: 8, background: accent, display: "flex", alignItems: "center" }}>
+              <span style={{ fontSize: 12, fontWeight: 600, color: "#fff" }}>+ New report</span>
             </div>
           </div>
 
           {/* KPI cards */}
-          <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 6 }}>
+          <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 12 }}>
             {[
               { l: "MRR",   v: "$24.8k", d: "+18%", up: true  },
               { l: "Users", v: "12.4k",  d: "+8%",  up: true  },
               { l: "Churn", v: "1.2%",   d: "-0.4%",up: false },
             ].map(m => (
               <div key={m.l} style={{
-                padding: "7px 9px", borderRadius: 8,
+                padding: "16px 18px", borderRadius: 12,
                 background: card, border: `1px solid ${border}`,
                 boxShadow: "0 1px 4px rgba(0,0,0,0.06)",
               }}>
-                <p style={{ fontSize: 7, color: muted, marginBottom: 2, fontWeight: 500 }}>{m.l}</p>
-                <p style={{ fontSize: 13, fontWeight: 900, color: text, letterSpacing: "-0.02em", lineHeight: 1.1 }}>{m.v}</p>
-                <p style={{ fontSize: 7, color: m.up ? "#16a34a" : "#dc2626", marginTop: 2, fontWeight: 600 }}>{m.d}</p>
+                <p style={{ fontSize: 12, color: muted, marginBottom: 4, fontWeight: 500 }}>{m.l}</p>
+                <p style={{ fontSize: 24, fontWeight: 900, color: text, letterSpacing: "-0.02em", lineHeight: 1.1 }}>{m.v}</p>
+                <p style={{ fontSize: 12, color: m.up ? "#16a34a" : "#dc2626", marginTop: 4, fontWeight: 600 }}>{m.d}</p>
               </div>
             ))}
           </div>
 
           {/* Chart */}
           <div style={{
-            flex: 1, padding: "8px 10px", borderRadius: 8,
+            flex: 1, padding: "16px 18px", borderRadius: 12,
             background: card, border: `1px solid ${border}`,
             boxShadow: "0 1px 4px rgba(0,0,0,0.06)",
             display: "flex", flexDirection: "column",
           }}>
-            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 6 }}>
-              <p style={{ fontSize: 8, fontWeight: 700, color: text }}>Revenue trend</p>
-              <div style={{ display: "flex", gap: 4 }}>
+            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 12 }}>
+              <p style={{ fontSize: 14, fontWeight: 700, color: text }}>Revenue trend</p>
+              <div style={{ display: "flex", gap: 6 }}>
                 {["7d","30d","90d"].map((l, i) => (
                   <span key={l} style={{
-                    fontSize: 7, fontWeight: i === 1 ? 700 : 400,
+                    fontSize: 11, fontWeight: i === 1 ? 700 : 400,
                     color: i === 1 ? accent : muted,
-                    padding: "1px 4px", borderRadius: 3,
+                    padding: "2px 8px", borderRadius: 5,
                     background: i === 1 ? `${accent}14` : "transparent",
                   }}>{l}</span>
                 ))}
               </div>
             </div>
-            <svg viewBox="0 0 240 50" style={{ flex: 1, width: "100%", overflow: "visible" }} preserveAspectRatio="none">
+            <svg viewBox="0 0 240 80" style={{ flex: 1, width: "100%", overflow: "visible" }} preserveAspectRatio="none">
               <defs>
                 <linearGradient id={`g-${uid}`} x1="0" y1="0" x2="0" y2="1">
                   <stop offset="0%" stopColor={accent} stopOpacity="0.35" />
                   <stop offset="100%" stopColor={accent} stopOpacity="0" />
                 </linearGradient>
               </defs>
-              <path d="M0,48 C24,44 38,38 56,30 C74,22 88,18 108,12 C128,6 148,4 168,3 C188,2 210,1.5 240,1"
-                stroke={accent} strokeWidth="2" fill="none" strokeLinecap="round" />
-              <path d="M0,48 C24,44 38,38 56,30 C74,22 88,18 108,12 C128,6 148,4 168,3 C188,2 210,1.5 240,1 L240,50 L0,50 Z"
+              <path d="M0,75 C24,68 38,58 56,46 C74,34 88,26 108,18 C128,10 148,6 168,4 C188,3 210,2 240,1"
+                stroke={accent} strokeWidth="2.5" fill="none" strokeLinecap="round" />
+              <path d="M0,75 C24,68 38,58 56,46 C74,34 88,26 108,18 C128,10 148,6 168,4 C188,3 210,2 240,1 L240,80 L0,80 Z"
                 fill={`url(#g-${uid})`} />
             </svg>
           </div>
@@ -207,80 +207,80 @@ export function MarketingDaisy({ themeColor, config }: { themeColor?: ThemeColor
 
       {/* Nav */}
       {navStyle === "pill" ? (
-        <div style={{ display: "flex", justifyContent: "center", padding: "12px 22px", position: "relative", zIndex: 2 }}>
-          <nav style={{ display: "flex", alignItems: "center", gap: 22, padding: "8px 20px", borderRadius: 36, border: `1px solid ${border}`, background: isDark ? "rgba(255,255,255,0.05)" : "rgba(0,0,0,0.03)", backdropFilter: "blur(10px)" }}>
-            <div style={{ display: "flex", alignItems: "center", gap: 7 }}>
-              <div style={{ width: 20, height: 20, borderRadius: 5, background: p }} />
-              <span style={{ fontWeight: 800, fontSize: 12, color: text }}>Acme</span>
+        <div style={{ display: "flex", justifyContent: "center", padding: "20px 40px", position: "relative", zIndex: 2 }}>
+          <nav style={{ display: "flex", alignItems: "center", gap: 32, padding: "12px 28px", borderRadius: 50, border: `1px solid ${border}`, background: isDark ? "rgba(255,255,255,0.05)" : "rgba(0,0,0,0.03)", backdropFilter: "blur(10px)" }}>
+            <div style={{ display: "flex", alignItems: "center", gap: 9 }}>
+              <div style={{ width: 28, height: 28, borderRadius: 7, background: p }} />
+              <span style={{ fontWeight: 800, fontSize: 17, color: text }}>Acme</span>
             </div>
-            {["Features","Pricing","Docs"].map(i => <span key={i} style={{ fontSize: 10, color: muted }}>{i}</span>)}
-            <button style={{ height: 26, padding: "0 14px", borderRadius: 18, fontSize: 9.5, fontWeight: 700, background: p, color: pFg, border: "none", cursor: "pointer" }}>Get started</button>
+            {["Features","Pricing","Docs"].map(i => <span key={i} style={{ fontSize: 15, color: muted }}>{i}</span>)}
+            <button style={{ height: 40, padding: "0 22px", borderRadius: 24, fontSize: 14, fontWeight: 700, background: p, color: pFg, border: "none", cursor: "pointer" }}>Get started</button>
           </nav>
         </div>
       ) : (
         <nav style={{
           display: "flex", alignItems: "center", justifyContent: "space-between",
-          padding: "12px 28px", borderBottom: navStyle === "transparent" ? "none" : `1px solid ${border}`,
+          padding: "18px 48px", borderBottom: navStyle === "transparent" ? "none" : `1px solid ${border}`,
           background: navStyle === "transparent" ? "transparent" : bg,
           position: "relative", zIndex: 2,
         }}>
-          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
-            <div style={{ width: 22, height: 22, borderRadius: 6, background: p }} />
-            <span style={{ fontWeight: 800, fontSize: 12.5, color: text, letterSpacing: "-0.01em" }}>Acme</span>
+          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
+            <div style={{ width: 28, height: 28, borderRadius: 7, background: p }} />
+            <span style={{ fontWeight: 800, fontSize: 17, color: text, letterSpacing: "-0.01em" }}>Acme</span>
           </div>
-          <div style={{ display: "flex", gap: 20, fontSize: 10, color: muted }}>
+          <div style={{ display: "flex", gap: 32, fontSize: 15, color: muted }}>
             {["Features","Pricing","Docs","Blog"].map(i => <span key={i}>{i}</span>)}
           </div>
-          <div style={{ display: "flex", gap: 7 }}>
-            <button style={{ height: 28, padding: "0 14px", borderRadius: 20, fontSize: 10, fontWeight: 500, background: "none", border: `1px solid ${border}`, color: muted, cursor: "pointer" }}>Log in</button>
-            <button style={{ height: 28, padding: "0 16px", borderRadius: 20, fontSize: 10, fontWeight: 700, background: p, color: pFg, border: "none", cursor: "pointer" }}>Get started →</button>
+          <div style={{ display: "flex", gap: 10 }}>
+            <button style={{ height: 42, padding: "0 22px", borderRadius: 24, fontSize: 14, fontWeight: 500, background: "none", border: `1px solid ${border}`, color: muted, cursor: "pointer" }}>Log in</button>
+            <button style={{ height: 42, padding: "0 24px", borderRadius: 24, fontSize: 14, fontWeight: 700, background: p, color: pFg, border: "none", cursor: "pointer" }}>Get started →</button>
           </div>
         </nav>
       )}
 
       {/* Hero */}
       {hdrStyle === "centered" && (
-        <div style={{ padding: "32px 28px 0", textAlign: "center", position: "relative", zIndex: 1 }}>
+        <div style={{ padding: "80px 48px 0", textAlign: "center", position: "relative", zIndex: 1 }}>
           {heroBg && <div style={{ position: "absolute", inset: 0, background: heroBg, pointerEvents: "none" }} />}
-          <div style={{ display: "inline-flex", alignItems: "center", gap: 6, padding: "4px 14px", borderRadius: 20, fontSize: 9, fontWeight: 700, marginBottom: 16, background: `${p}18`, color: p, border: `1px solid ${p}40` }}>
+          <div style={{ display: "inline-flex", alignItems: "center", gap: 8, padding: "6px 18px", borderRadius: 24, fontSize: 13, fontWeight: 700, marginBottom: 24, background: `${p}18`, color: p, border: `1px solid ${p}40` }}>
             ✦ {theme.label} theme — v2.0 just shipped
           </div>
-          <h1 style={{ fontSize: 42, fontWeight: 900, marginBottom: 14, color: text, lineHeight: 1.04, letterSpacing: "-0.04em" }}>
+          <h1 style={{ fontSize: 72, fontWeight: 900, marginBottom: 20, color: text, lineHeight: 1.02, letterSpacing: "-0.045em" }}>
             Build faster,<br />ship smarter.
           </h1>
-          <p style={{ fontSize: 13, color: muted, maxWidth: 440, margin: "0 auto 22px", lineHeight: 1.75 }}>
+          <p style={{ fontSize: 18, color: muted, maxWidth: 560, margin: "0 auto 32px", lineHeight: 1.75 }}>
             The all-in-one platform that helps teams build, launch, and scale production apps with confidence.
           </p>
-          <div style={{ display: "flex", gap: 10, justifyContent: "center", marginBottom: 32 }}>
-            <button style={{ height: 38, padding: "0 24px", borderRadius: 22, fontSize: 11, fontWeight: 700, background: p, color: pFg, border: "none", cursor: "pointer" }}>Start for free</button>
-            <button style={{ height: 38, padding: "0 20px", borderRadius: 22, fontSize: 11, border: `1px solid ${border}`, color: muted, background: "none", cursor: "pointer" }}>See demo →</button>
+          <div style={{ display: "flex", gap: 14, justifyContent: "center", marginBottom: 56 }}>
+            <button style={{ height: 52, padding: "0 32px", borderRadius: 28, fontSize: 16, fontWeight: 700, background: p, color: pFg, border: "none", cursor: "pointer" }}>Start for free</button>
+            <button style={{ height: 52, padding: "0 28px", borderRadius: 28, fontSize: 16, border: `1px solid ${border}`, color: muted, background: "none", cursor: "pointer" }}>See demo →</button>
           </div>
-          <div style={{ padding: "0 28px 0" }}>
+          <div style={{ padding: "0 0 0" }}>
             <DashMockup bg={bg} card={card} border={border} text={text} muted={muted} accent={p} />
           </div>
         </div>
       )}
 
       {hdrStyle === "split" && (
-        <div style={{ display: "flex", gap: 24, padding: "28px 28px 0", alignItems: "flex-start", position: "relative", zIndex: 1 }}>
+        <div style={{ display: "flex", gap: 48, padding: "72px 48px 0", alignItems: "flex-start", position: "relative", zIndex: 1 }}>
           {heroBg && <div style={{ position: "absolute", inset: 0, background: heroBg, pointerEvents: "none" }} />}
-          <div style={{ flex: "0 0 44%", paddingTop: 12 }}>
-            <div style={{ display: "inline-flex", alignItems: "center", gap: 5, padding: "3px 10px", borderRadius: 16, fontSize: 9, fontWeight: 700, marginBottom: 14, background: `${p}18`, color: p, border: `1px solid ${p}40` }}>✦ {theme.label}</div>
-            <h1 style={{ fontSize: 34, fontWeight: 900, marginBottom: 12, color: text, lineHeight: 1.07, letterSpacing: "-0.03em" }}>
+          <div style={{ flex: "0 0 44%", paddingTop: 16 }}>
+            <div style={{ display: "inline-flex", alignItems: "center", gap: 6, padding: "5px 14px", borderRadius: 20, fontSize: 13, fontWeight: 700, marginBottom: 20, background: `${p}18`, color: p, border: `1px solid ${p}40` }}>✦ {theme.label}</div>
+            <h1 style={{ fontSize: 58, fontWeight: 900, marginBottom: 18, color: text, lineHeight: 1.06, letterSpacing: "-0.04em" }}>
               Build faster,<br />ship smarter.
             </h1>
-            <p style={{ fontSize: 12, color: muted, marginBottom: 20, lineHeight: 1.7 }}>
+            <p style={{ fontSize: 17, color: muted, marginBottom: 28, lineHeight: 1.75 }}>
               The platform teams trust to ship faster and sleep better.
             </p>
-            <div style={{ display: "flex", gap: 8, marginBottom: 28 }}>
-              <button style={{ height: 34, padding: "0 20px", borderRadius: 20, fontSize: 10, fontWeight: 700, background: p, color: pFg, border: "none", cursor: "pointer" }}>Start free</button>
-              <button style={{ height: 34, padding: "0 16px", borderRadius: 20, fontSize: 10, border: `1px solid ${border}`, color: muted, background: "none", cursor: "pointer" }}>Demo →</button>
+            <div style={{ display: "flex", gap: 12, marginBottom: 40 }}>
+              <button style={{ height: 50, padding: "0 28px", borderRadius: 26, fontSize: 15, fontWeight: 700, background: p, color: pFg, border: "none", cursor: "pointer" }}>Start free</button>
+              <button style={{ height: 50, padding: "0 24px", borderRadius: 26, fontSize: 15, border: `1px solid ${border}`, color: muted, background: "none", cursor: "pointer" }}>Demo →</button>
             </div>
-            <div style={{ display: "flex", gap: 20 }}>
+            <div style={{ display: "flex", gap: 32 }}>
               {[["50k+","Teams"],["99.9%","Uptime"],["$0","To start"]].map(([v,l]) => (
                 <div key={l}>
-                  <p style={{ fontSize: 18, fontWeight: 900, color: p, letterSpacing: "-0.02em" }}>{v}</p>
-                  <p style={{ fontSize: 8.5, color: muted }}>{l}</p>
+                  <p style={{ fontSize: 28, fontWeight: 900, color: p, letterSpacing: "-0.02em" }}>{v}</p>
+                  <p style={{ fontSize: 13, color: muted }}>{l}</p>
                 </div>
               ))}
             </div>
@@ -292,19 +292,19 @@ export function MarketingDaisy({ themeColor, config }: { themeColor?: ThemeColor
       )}
 
       {hdrStyle === "stats" && (
-        <div style={{ padding: "32px 28px 0", textAlign: "center", position: "relative", zIndex: 1 }}>
+        <div style={{ padding: "80px 48px 0", textAlign: "center", position: "relative", zIndex: 1 }}>
           {heroBg && <div style={{ position: "absolute", inset: 0, background: heroBg, pointerEvents: "none" }} />}
-          <h1 style={{ fontSize: 42, fontWeight: 900, marginBottom: 14, color: text, lineHeight: 1.04, letterSpacing: "-0.04em" }}>Build faster,<br />ship smarter.</h1>
-          <p style={{ fontSize: 13, color: muted, maxWidth: 400, margin: "0 auto 20px", lineHeight: 1.75 }}>The platform that helps teams ship with confidence.</p>
-          <div style={{ display: "flex", gap: 10, justifyContent: "center", marginBottom: 24 }}>
-            <button style={{ height: 36, padding: "0 22px", borderRadius: 20, fontSize: 11, fontWeight: 700, background: p, color: pFg, border: "none", cursor: "pointer" }}>Start free</button>
-            <button style={{ height: 36, padding: "0 18px", borderRadius: 20, fontSize: 11, border: `1px solid ${border}`, color: muted, background: "none", cursor: "pointer" }}>Demo →</button>
+          <h1 style={{ fontSize: 70, fontWeight: 900, marginBottom: 20, color: text, lineHeight: 1.02, letterSpacing: "-0.045em" }}>Build faster,<br />ship smarter.</h1>
+          <p style={{ fontSize: 18, color: muted, maxWidth: 520, margin: "0 auto 28px", lineHeight: 1.75 }}>The platform that helps teams ship with confidence.</p>
+          <div style={{ display: "flex", gap: 14, justifyContent: "center", marginBottom: 32 }}>
+            <button style={{ height: 50, padding: "0 30px", borderRadius: 26, fontSize: 16, fontWeight: 700, background: p, color: pFg, border: "none", cursor: "pointer" }}>Start free</button>
+            <button style={{ height: 50, padding: "0 26px", borderRadius: 26, fontSize: 16, border: `1px solid ${border}`, color: muted, background: "none", cursor: "pointer" }}>Demo →</button>
           </div>
-          <div style={{ display: "flex", justifyContent: "center", gap: 36, marginBottom: 28, padding: "18px 0", borderTop: `1px solid ${border}`, borderBottom: `1px solid ${border}` }}>
+          <div style={{ display: "flex", justifyContent: "center", gap: 56, marginBottom: 48, padding: "28px 0", borderTop: `1px solid ${border}`, borderBottom: `1px solid ${border}` }}>
             {[["50k+","Teams"],["99.9%","Uptime"],["10ms","Latency"],["$0","To start"]].map(([v,l]) => (
               <div key={l} style={{ textAlign: "center" }}>
-                <p style={{ fontSize: 24, fontWeight: 900, color: p, letterSpacing: "-0.02em" }}>{v}</p>
-                <p style={{ fontSize: 9, color: muted }}>{l}</p>
+                <p style={{ fontSize: 36, fontWeight: 900, color: p, letterSpacing: "-0.02em" }}>{v}</p>
+                <p style={{ fontSize: 14, color: muted }}>{l}</p>
               </div>
             ))}
           </div>
@@ -314,35 +314,35 @@ export function MarketingDaisy({ themeColor, config }: { themeColor?: ThemeColor
 
       {/* Sections */}
       {comps.includes("logos") && (
-        <div style={{ padding: "18px 28px", display: "flex", alignItems: "center", gap: 16, borderTop: `1px solid ${border}`, borderBottom: `1px solid ${border}`, background: isDark ? "rgba(255,255,255,0.02)" : "rgba(0,0,0,0.015)", position: "relative", zIndex: 1, marginTop: 24 }}>
-          <span style={{ fontSize: 9, color: muted, whiteSpace: "nowrap", flexShrink: 0 }}>Trusted by</span>
+        <div style={{ padding: "28px 48px", display: "flex", alignItems: "center", gap: 24, borderTop: `1px solid ${border}`, borderBottom: `1px solid ${border}`, background: isDark ? "rgba(255,255,255,0.02)" : "rgba(0,0,0,0.015)", position: "relative", zIndex: 1, marginTop: 40 }}>
+          <span style={{ fontSize: 13, color: muted, whiteSpace: "nowrap", flexShrink: 0 }}>Trusted by</span>
           {["Vercel","Stripe","Linear","Notion","Supabase","Raycast"].map(b => (
-            <span key={b} style={{ fontSize: 10, fontWeight: 700, color: muted, opacity: 0.45 }}>{b}</span>
+            <span key={b} style={{ fontSize: 15, fontWeight: 700, color: muted, opacity: 0.45 }}>{b}</span>
           ))}
         </div>
       )}
 
       {comps.includes("features") && (
-        <div style={{ padding: "32px 28px", position: "relative", zIndex: 1 }}>
-          <div style={{ textAlign: "center", marginBottom: 24 }}>
-            <p style={{ fontSize: 9, fontWeight: 700, color: p, letterSpacing: "0.12em", textTransform: "uppercase", marginBottom: 6 }}>Features</p>
-            <h2 style={{ fontSize: 24, fontWeight: 900, color: text, letterSpacing: "-0.02em", lineHeight: 1.15 }}>Everything you need<br />to ship faster</h2>
+        <div style={{ padding: "80px 48px", position: "relative", zIndex: 1 }}>
+          <div style={{ textAlign: "center", marginBottom: 48 }}>
+            <p style={{ fontSize: 13, fontWeight: 700, color: p, letterSpacing: "0.12em", textTransform: "uppercase", marginBottom: 10 }}>Features</p>
+            <h2 style={{ fontSize: 40, fontWeight: 900, color: text, letterSpacing: "-0.02em", lineHeight: 1.12 }}>Everything you need<br />to ship faster</h2>
           </div>
-          <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 14 }}>
+          <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 20 }}>
             {[
-              { icon: "bolt",   title: "10× faster deploys",    desc: "Push to production in under 30 seconds. Zero config required.",  key: "bolt"  },
-              { icon: "shield", title: "Enterprise security",   desc: "SOC 2 compliant with end-to-end encryption and audit logs.",     key: "shld"  },
-              { icon: "trend",  title: "Real-time analytics",   desc: "Track every metric that matters. Live dashboards, zero lag.",    key: "trnd"  },
-              { icon: "globe",  title: "Global edge network",   desc: "300+ PoPs worldwide. Your users get sub-10ms response times.",   key: "glb"   },
-              { icon: "layers", title: "Any stack, any scale",  desc: "Node, Python, Go, Rust — deploy whatever your team builds.",    key: "lyr"   },
-              { icon: "clock",  title: "99.99% uptime SLA",    desc: "We guarantee it. And we back that up with automatic credits.",   key: "clk"   },
+              { icon: "bolt",   title: "10× faster deploys",    desc: "Push to production in under 30 seconds. Zero config required."  },
+              { icon: "shield", title: "Enterprise security",   desc: "SOC 2 compliant with end-to-end encryption and audit logs."     },
+              { icon: "trend",  title: "Real-time analytics",   desc: "Track every metric that matters. Live dashboards, zero lag."    },
+              { icon: "globe",  title: "Global edge network",   desc: "300+ PoPs worldwide. Your users get sub-10ms response times."   },
+              { icon: "layers", title: "Any stack, any scale",  desc: "Node, Python, Go, Rust — deploy whatever your team builds."    },
+              { icon: "clock",  title: "99.99% uptime SLA",    desc: "We guarantee it. And we back that up with automatic credits."   },
             ].map(f => (
-              <div key={f.key} style={{ padding: "16px 18px", borderRadius: 12, background: card, border: `1px solid ${border}`, boxShadow: "0 2px 8px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04)" }}>
-                <div style={{ width: 34, height: 34, borderRadius: 9, background: `${p}16`, display: "flex", alignItems: "center", justifyContent: "center", marginBottom: 12 }}>
-                  <Ico d={ICO[f.icon as keyof typeof ICO]} color={p} size={16} />
+              <div key={f.title} style={{ padding: "28px 28px", borderRadius: 16, background: card, border: `1px solid ${border}`, boxShadow: "0 2px 12px rgba(0,0,0,0.06)" }}>
+                <div style={{ width: 48, height: 48, borderRadius: 12, background: `${p}16`, display: "flex", alignItems: "center", justifyContent: "center", marginBottom: 18 }}>
+                  <Ico d={ICO[f.icon as keyof typeof ICO]} color={p} size={22} />
                 </div>
-                <p style={{ fontSize: 11, fontWeight: 700, color: text, marginBottom: 5, letterSpacing: "-0.01em" }}>{f.title}</p>
-                <p style={{ fontSize: 10, color: muted, lineHeight: 1.65 }}>{f.desc}</p>
+                <p style={{ fontSize: 16, fontWeight: 700, color: text, marginBottom: 8, letterSpacing: "-0.01em" }}>{f.title}</p>
+                <p style={{ fontSize: 14, color: muted, lineHeight: 1.7 }}>{f.desc}</p>
               </div>
             ))}
           </div>
@@ -350,18 +350,18 @@ export function MarketingDaisy({ themeColor, config }: { themeColor?: ThemeColor
       )}
 
       {comps.includes("steps") && (
-        <div style={{ padding: "28px 28px", position: "relative", zIndex: 1 }}>
-          <h2 style={{ fontSize: 22, fontWeight: 900, color: text, letterSpacing: "-0.02em", marginBottom: 22, textAlign: "center" }}>Up and running in 3 steps</h2>
-          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 12 }}>
+        <div style={{ padding: "80px 48px", position: "relative", zIndex: 1 }}>
+          <h2 style={{ fontSize: 36, fontWeight: 900, color: text, letterSpacing: "-0.02em", marginBottom: 40, textAlign: "center" }}>Up and running in 3 steps</h2>
+          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 20 }}>
             {[
               { n: "01", title: "Connect your repo", desc: "Push to GitHub and we handle the rest." },
               { n: "02", title: "Configure your stack", desc: "Env vars, domains, and scaling — all in one place." },
               { n: "03", title: "Ship to production", desc: "One click. Zero downtime deploys, every time." },
             ].map(s => (
-              <div key={s.n} style={{ padding: "16px 18px", borderRadius: 12, background: card, border: `1px solid ${border}` }}>
-                <p style={{ fontSize: 22, fontWeight: 900, color: `${p}50`, letterSpacing: "-0.04em", marginBottom: 8 }}>{s.n}</p>
-                <p style={{ fontSize: 11, fontWeight: 700, color: text, marginBottom: 5 }}>{s.title}</p>
-                <p style={{ fontSize: 10, color: muted, lineHeight: 1.6 }}>{s.desc}</p>
+              <div key={s.n} style={{ padding: "28px 28px", borderRadius: 16, background: card, border: `1px solid ${border}` }}>
+                <p style={{ fontSize: 36, fontWeight: 900, color: `${p}50`, letterSpacing: "-0.04em", marginBottom: 14 }}>{s.n}</p>
+                <p style={{ fontSize: 17, fontWeight: 700, color: text, marginBottom: 8 }}>{s.title}</p>
+                <p style={{ fontSize: 14, color: muted, lineHeight: 1.7 }}>{s.desc}</p>
               </div>
             ))}
           </div>
@@ -369,27 +369,27 @@ export function MarketingDaisy({ themeColor, config }: { themeColor?: ThemeColor
       )}
 
       {comps.includes("testimonials") && (
-        <div style={{ padding: "28px 28px", position: "relative", zIndex: 1 }}>
-          <h2 style={{ fontSize: 22, fontWeight: 900, color: text, letterSpacing: "-0.02em", marginBottom: 20, textAlign: "center" }}>Loved by engineering teams</h2>
-          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
+        <div style={{ padding: "80px 48px", position: "relative", zIndex: 1 }}>
+          <h2 style={{ fontSize: 36, fontWeight: 900, color: text, letterSpacing: "-0.02em", marginBottom: 36, textAlign: "center" }}>Loved by engineering teams</h2>
+          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }}>
             {[
-              { q: "\"We cut our deploy time from 20 minutes to 45 seconds. Game changer.\"", name: "Sarah K.", role: "CTO at Linear", stars: 5 },
-              { q: "\"Reduced infrastructure costs by 40% in our first month. Incredible ROI.\"", name: "James R.", role: "Eng Lead at Stripe", stars: 5 },
-              { q: "\"The DX is in a league of its own. Every edge case is handled perfectly.\"", name: "Mia Chen", role: "Staff Eng at Vercel", stars: 5 },
-              { q: "\"Finally, a platform that just works. Zero incidents in 8 months.\"", name: "Tom W.", role: "Founder at Raycast", stars: 5 },
+              { q: "\"We cut our deploy time from 20 minutes to 45 seconds. Game changer.\"", name: "Sarah K.", role: "CTO at Linear" },
+              { q: "\"Reduced infrastructure costs by 40% in our first month. Incredible ROI.\"", name: "James R.", role: "Eng Lead at Stripe" },
+              { q: "\"The DX is in a league of its own. Every edge case handled perfectly.\"", name: "Mia Chen", role: "Staff Eng at Vercel" },
+              { q: "\"Finally, a platform that just works. Zero incidents in 8 months.\"", name: "Tom W.", role: "Founder at Raycast" },
             ].map(t => (
-              <div key={t.name} style={{ padding: "16px 18px", borderRadius: 12, background: card, border: `1px solid ${border}`, boxShadow: "0 2px 8px rgba(0,0,0,0.05)" }}>
-                <div style={{ display: "flex", gap: 2, marginBottom: 10 }}>
-                  {Array(t.stars).fill(0).map((_, i) => <span key={i} style={{ color: "#f59e0b", fontSize: 11 }}>★</span>)}
+              <div key={t.name} style={{ padding: "28px 28px", borderRadius: 16, background: card, border: `1px solid ${border}`, boxShadow: "0 2px 12px rgba(0,0,0,0.05)" }}>
+                <div style={{ display: "flex", gap: 3, marginBottom: 14 }}>
+                  {Array(5).fill(0).map((_, i) => <span key={i} style={{ color: "#f59e0b", fontSize: 16 }}>★</span>)}
                 </div>
-                <p style={{ fontSize: 11, color: text, marginBottom: 12, lineHeight: 1.65, fontStyle: "italic" }}>{t.q}</p>
-                <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
-                  <div style={{ width: 26, height: 26, borderRadius: "50%", background: `${p}22`, display: "flex", alignItems: "center", justifyContent: "center" }}>
-                    <span style={{ fontSize: 11, fontWeight: 700, color: p }}>{t.name[0]}</span>
+                <p style={{ fontSize: 16, color: text, marginBottom: 18, lineHeight: 1.7, fontStyle: "italic" }}>{t.q}</p>
+                <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
+                  <div style={{ width: 36, height: 36, borderRadius: "50%", background: `${p}22`, display: "flex", alignItems: "center", justifyContent: "center" }}>
+                    <span style={{ fontSize: 15, fontWeight: 700, color: p }}>{t.name[0]}</span>
                   </div>
                   <div>
-                    <p style={{ fontSize: 10, fontWeight: 700, color: text }}>{t.name}</p>
-                    <p style={{ fontSize: 9, color: muted }}>{t.role}</p>
+                    <p style={{ fontSize: 14, fontWeight: 700, color: text }}>{t.name}</p>
+                    <p style={{ fontSize: 13, color: muted }}>{t.role}</p>
                   </div>
                 </div>
               </div>
@@ -399,39 +399,39 @@ export function MarketingDaisy({ themeColor, config }: { themeColor?: ThemeColor
       )}
 
       {comps.includes("pricing") && (
-        <div style={{ padding: "28px 28px", position: "relative", zIndex: 1 }}>
-          <div style={{ textAlign: "center", marginBottom: 22 }}>
-            <h2 style={{ fontSize: 24, fontWeight: 900, color: text, letterSpacing: "-0.02em", marginBottom: 6 }}>Simple, transparent pricing</h2>
-            <p style={{ fontSize: 11, color: muted }}>No surprises. No hidden fees. Cancel anytime.</p>
+        <div style={{ padding: "80px 48px", position: "relative", zIndex: 1 }}>
+          <div style={{ textAlign: "center", marginBottom: 48 }}>
+            <h2 style={{ fontSize: 40, fontWeight: 900, color: text, letterSpacing: "-0.02em", marginBottom: 10 }}>Simple, transparent pricing</h2>
+            <p style={{ fontSize: 16, color: muted }}>No surprises. No hidden fees. Cancel anytime.</p>
           </div>
-          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 12 }}>
+          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 20 }}>
             {[
               { plan: "Starter", price: "Free", period: "forever", hi: false, features: ["5 projects","100 deploys/mo","Community support","Basic analytics"] },
               { plan: "Pro",     price: "$29",  period: "/month",  hi: true,  features: ["Unlimited projects","Unlimited deploys","Priority support","Advanced analytics","Custom domains","Team members"] },
               { plan: "Enterprise", price: "Custom", period: "contact us", hi: false, features: ["Everything in Pro","SLA guarantee","SSO / SAML","Dedicated support","Audit logs"] },
             ].map(pl => (
               <div key={pl.plan} style={{
-                padding: "20px 18px", borderRadius: 14,
+                padding: "32px 28px", borderRadius: 20,
                 background: pl.hi ? p : card,
                 border: `2px solid ${pl.hi ? p : border}`,
-                boxShadow: pl.hi ? `0 8px 32px ${p}40` : "0 2px 8px rgba(0,0,0,0.05)",
+                boxShadow: pl.hi ? `0 12px 48px ${p}40` : "0 2px 12px rgba(0,0,0,0.05)",
               }}>
-                <p style={{ fontSize: 10, fontWeight: 600, color: pl.hi ? `${pFg}bb` : muted, marginBottom: 4 }}>{pl.plan}</p>
-                <p style={{ fontSize: 28, fontWeight: 900, color: pl.hi ? pFg : text, letterSpacing: "-0.03em", lineHeight: 1.1 }}>{pl.price}</p>
-                <p style={{ fontSize: 9, color: pl.hi ? `${pFg}88` : muted, marginBottom: 16 }}>{pl.period}</p>
-                <div style={{ display: "flex", flexDirection: "column", gap: 7 }}>
+                <p style={{ fontSize: 14, fontWeight: 600, color: pl.hi ? `${pFg}bb` : muted, marginBottom: 6 }}>{pl.plan}</p>
+                <p style={{ fontSize: 44, fontWeight: 900, color: pl.hi ? pFg : text, letterSpacing: "-0.03em", lineHeight: 1.1 }}>{pl.price}</p>
+                <p style={{ fontSize: 13, color: pl.hi ? `${pFg}88` : muted, marginBottom: 24 }}>{pl.period}</p>
+                <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
                   {pl.features.map(f => (
-                    <div key={f} style={{ display: "flex", alignItems: "center", gap: 7 }}>
-                      <div style={{ width: 14, height: 14, borderRadius: "50%", background: pl.hi ? `${pFg}22` : `${p}18`, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
-                        <svg viewBox="0 0 10 10" fill="none" style={{ width: 7, height: 7 }}>
+                    <div key={f} style={{ display: "flex", alignItems: "center", gap: 10 }}>
+                      <div style={{ width: 18, height: 18, borderRadius: "50%", background: pl.hi ? `${pFg}22` : `${p}18`, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
+                        <svg viewBox="0 0 10 10" fill="none" style={{ width: 9, height: 9 }}>
                           <path d="M2 5l2 2 4-4" stroke={pl.hi ? pFg : p} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                         </svg>
                       </div>
-                      <span style={{ fontSize: 9.5, color: pl.hi ? `${pFg}dd` : muted }}>{f}</span>
+                      <span style={{ fontSize: 14, color: pl.hi ? `${pFg}dd` : muted }}>{f}</span>
                     </div>
                   ))}
                 </div>
-                <button style={{ marginTop: 16, width: "100%", height: 32, borderRadius: 18, fontSize: 10, fontWeight: 700, background: pl.hi ? pFg : p, color: pl.hi ? p : pFg, border: "none", cursor: "pointer" }}>
+                <button style={{ marginTop: 24, width: "100%", height: 48, borderRadius: 26, fontSize: 15, fontWeight: 700, background: pl.hi ? pFg : p, color: pl.hi ? p : pFg, border: "none", cursor: "pointer" }}>
                   {pl.plan === "Enterprise" ? "Contact sales" : "Get started"}
                 </button>
               </div>
@@ -441,29 +441,29 @@ export function MarketingDaisy({ themeColor, config }: { themeColor?: ThemeColor
       )}
 
       {comps.includes("faq") && (
-        <div style={{ padding: "28px 28px", position: "relative", zIndex: 1 }}>
-          <h2 style={{ fontSize: 22, fontWeight: 900, color: text, letterSpacing: "-0.02em", marginBottom: 16, textAlign: "center" }}>Frequently asked</h2>
+        <div style={{ padding: "80px 48px", position: "relative", zIndex: 1 }}>
+          <h2 style={{ fontSize: 36, fontWeight: 900, color: text, letterSpacing: "-0.02em", marginBottom: 28, textAlign: "center" }}>Frequently asked</h2>
           {[
             ["What's included in the free plan?","5 projects, 100 deploys per month, community forum access, and basic analytics."],
             ["Can I upgrade or downgrade anytime?","Yes. Changes take effect immediately. We prorate billing automatically."],
             ["Do you offer team billing?","Yes. Add team members to your workspace and manage billing centrally."],
           ].map(([q, a], i) => (
-            <div key={q} style={{ padding: "14px 0", borderBottom: `1px solid ${border}` }}>
+            <div key={q} style={{ padding: "22px 0", borderBottom: `1px solid ${border}` }}>
               <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
-                <p style={{ fontSize: 11, fontWeight: 600, color: text }}>{q}</p>
-                <span style={{ fontSize: 14, color: muted, marginLeft: 12 }}>{i === 0 ? "−" : "+"}</span>
+                <p style={{ fontSize: 17, fontWeight: 600, color: text }}>{q}</p>
+                <span style={{ fontSize: 22, color: muted, marginLeft: 20 }}>{i === 0 ? "−" : "+"}</span>
               </div>
-              {i === 0 && <p style={{ fontSize: 10, color: muted, marginTop: 8, lineHeight: 1.65 }}>{a}</p>}
+              {i === 0 && <p style={{ fontSize: 15, color: muted, marginTop: 12, lineHeight: 1.7 }}>{a}</p>}
             </div>
           ))}
         </div>
       )}
 
       {comps.includes("cta") && (
-        <div style={{ margin: "10px 28px 32px", padding: "28px", borderRadius: 16, background: `linear-gradient(135deg, ${p}18, ${p}08)`, border: `1px solid ${p}30`, textAlign: "center", position: "relative", zIndex: 1 }}>
-          <h2 style={{ fontSize: 26, fontWeight: 900, color: text, letterSpacing: "-0.02em", marginBottom: 8 }}>Ready to ship faster?</h2>
-          <p style={{ fontSize: 12, color: muted, marginBottom: 20 }}>Join 50,000+ teams already building on Acme. Free forever.</p>
-          <button style={{ height: 38, padding: "0 28px", borderRadius: 22, fontSize: 11, fontWeight: 700, background: p, color: pFg, border: "none", cursor: "pointer" }}>Start building for free →</button>
+        <div style={{ margin: "0 48px 80px", padding: "60px 48px", borderRadius: 24, background: `linear-gradient(135deg, ${p}18, ${p}08)`, border: `1px solid ${p}30`, textAlign: "center", position: "relative", zIndex: 1 }}>
+          <h2 style={{ fontSize: 42, fontWeight: 900, color: text, letterSpacing: "-0.02em", marginBottom: 12 }}>Ready to ship faster?</h2>
+          <p style={{ fontSize: 17, color: muted, marginBottom: 28 }}>Join 50,000+ teams already building on Acme. Free forever.</p>
+          <button style={{ height: 52, padding: "0 36px", borderRadius: 28, fontSize: 16, fontWeight: 700, background: p, color: pFg, border: "none", cursor: "pointer" }}>Start building for free →</button>
         </div>
       )}
 
@@ -612,127 +612,127 @@ export function MarketingAceternity({ themeColor, config }: { themeColor?: Theme
 
       {/* Nav */}
       {navStyle === "floating" ? (
-        <div style={{ display: "flex", justifyContent: "center", padding: "14px 22px", position: "relative", zIndex: 10 }}>
-          <nav style={{ display: "flex", alignItems: "center", gap: 22, padding: "9px 22px", borderRadius: 40, background: "rgba(255,255,255,0.06)", border: `1px solid ${p}40`, backdropFilter: "blur(14px)" }}>
-            <div style={{ display: "flex", alignItems: "center", gap: 7 }}>
-              <div style={{ width: 18, height: 18, borderRadius: 4, background: `linear-gradient(135deg,${p},#3b82f6)` }} />
-              <span style={{ fontWeight: 800, fontSize: 11, color: text }}>Acme</span>
+        <div style={{ display: "flex", justifyContent: "center", padding: "20px 48px", position: "relative", zIndex: 10 }}>
+          <nav style={{ display: "flex", alignItems: "center", gap: 32, padding: "14px 32px", borderRadius: 50, background: "rgba(255,255,255,0.06)", border: `1px solid ${p}40`, backdropFilter: "blur(14px)" }}>
+            <div style={{ display: "flex", alignItems: "center", gap: 9 }}>
+              <div style={{ width: 26, height: 26, borderRadius: 6, background: `linear-gradient(135deg,${p},#3b82f6)` }} />
+              <span style={{ fontWeight: 800, fontSize: 17, color: text }}>Acme</span>
             </div>
-            {["Features","Pricing","Docs"].map(i => <span key={i} style={{ fontSize: 10, color: muted }}>{i}</span>)}
-            <button style={{ height: 26, padding: "0 14px", borderRadius: 14, fontSize: 9.5, fontWeight: 700, color: "#fff", background: `${p}55`, border: `1px solid ${p}60`, cursor: "pointer" }}>Get started</button>
+            {["Features","Pricing","Docs"].map(i => <span key={i} style={{ fontSize: 15, color: muted }}>{i}</span>)}
+            <button style={{ height: 42, padding: "0 22px", borderRadius: 22, fontSize: 14, fontWeight: 700, color: "#fff", background: `${p}55`, border: `1px solid ${p}60`, cursor: "pointer" }}>Get started</button>
           </nav>
         </div>
       ) : (
-        <nav style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "12px 28px", backdropFilter: "blur(8px)", background: "rgba(5,0,16,0.5)", position: "relative", zIndex: 10 }}>
-          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
-            <div style={{ width: 20, height: 20, borderRadius: 5, background: `linear-gradient(135deg,${p},#3b82f6)` }} />
-            <span style={{ fontWeight: 800, fontSize: 12, color: "#fff" }}>Acme</span>
+        <nav style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "18px 48px", backdropFilter: "blur(8px)", background: "rgba(5,0,16,0.5)", position: "relative", zIndex: 10 }}>
+          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
+            <div style={{ width: 28, height: 28, borderRadius: 7, background: `linear-gradient(135deg,${p},#3b82f6)` }} />
+            <span style={{ fontWeight: 800, fontSize: 17, color: "#fff" }}>Acme</span>
           </div>
-          <div style={{ display: "flex", gap: 20, fontSize: 10, color: muted }}>
+          <div style={{ display: "flex", gap: 32, fontSize: 15, color: muted }}>
             {["Features","Pricing","Docs","Blog"].map(i => <span key={i}>{i}</span>)}
           </div>
-          <button style={{ height: 28, padding: "0 16px", borderRadius: 7, fontSize: 10, fontWeight: 600, color: "#fff", background: `linear-gradient(135deg,${p},#3b82f6)`, border: "none", cursor: "pointer", boxShadow: `0 4px 14px ${p}40` }}>Get started</button>
+          <button style={{ height: 44, padding: "0 24px", borderRadius: 8, fontSize: 14, fontWeight: 600, color: "#fff", background: `linear-gradient(135deg,${p},#3b82f6)`, border: "none", cursor: "pointer", boxShadow: `0 4px 16px ${p}40` }}>Get started</button>
         </nav>
       )}
 
       {/* Hero: Gradient text */}
       {hdrStyle === "gradient-text" && (
-        <div style={{ padding: "36px 28px 24px", textAlign: "center", position: "relative", zIndex: 1 }}>
-          <div style={{ display: "inline-flex", alignItems: "center", gap: 6, padding: "5px 16px", borderRadius: 24, fontSize: 9.5, fontWeight: 600, marginBottom: 20, border: `1px solid ${p}45`, color: `${p}dd`, background: `${p}10` }}>
+        <div style={{ padding: "80px 48px 48px", textAlign: "center", position: "relative", zIndex: 1 }}>
+          <div style={{ display: "inline-flex", alignItems: "center", gap: 8, padding: "7px 20px", borderRadius: 28, fontSize: 13, fontWeight: 600, marginBottom: 28, border: `1px solid ${p}45`, color: `${p}dd`, background: `${p}10` }}>
             ✦ Open source · 12k GitHub stars · Now in v2
           </div>
           <h1 style={{
-            fontSize: 52, fontWeight: 900, marginBottom: 14, lineHeight: 1.0, letterSpacing: "-0.04em",
+            fontSize: 80, fontWeight: 900, marginBottom: 20, lineHeight: 0.98, letterSpacing: "-0.05em",
             background: "linear-gradient(180deg, #fff 35%, rgba(255,255,255,0.3) 100%)",
             WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent",
           }}>
             Build the future<br />of the web.
           </h1>
-          <p style={{ fontSize: 13, color: muted, maxWidth: 380, margin: "0 auto 24px", lineHeight: 1.75 }}>
+          <p style={{ fontSize: 18, color: muted, maxWidth: 520, margin: "0 auto 32px", lineHeight: 1.75 }}>
             Beautifully crafted components built with Tailwind CSS and Framer Motion. Copy, paste, ship.
           </p>
-          <div style={{ display: "flex", gap: 10, justifyContent: "center" }}>
-            <button style={{ height: 40, padding: "0 26px", borderRadius: 8, fontSize: 12, fontWeight: 700, color: "#fff", background: `linear-gradient(135deg,${p},#3b82f6)`, border: "none", cursor: "pointer", boxShadow: `0 6px 20px ${p}45` }}>Get started →</button>
-            <button style={{ height: 40, padding: "0 20px", borderRadius: 8, fontSize: 12, color: muted, border: `1px solid ${border}`, background: "rgba(255,255,255,0.04)", cursor: "pointer", backdropFilter: "blur(4px)" }}>Browse components</button>
+          <div style={{ display: "flex", gap: 14, justifyContent: "center" }}>
+            <button style={{ height: 52, padding: "0 36px", borderRadius: 10, fontSize: 16, fontWeight: 700, color: "#fff", background: `linear-gradient(135deg,${p},#3b82f6)`, border: "none", cursor: "pointer", boxShadow: `0 8px 28px ${p}45` }}>Get started →</button>
+            <button style={{ height: 52, padding: "0 28px", borderRadius: 10, fontSize: 16, color: muted, border: `1px solid ${border}`, background: "rgba(255,255,255,0.04)", cursor: "pointer", backdropFilter: "blur(4px)" }}>Browse components</button>
           </div>
         </div>
       )}
 
       {/* Hero: Lamp */}
       {hdrStyle === "lamp" && (
-        <div style={{ padding: "28px 28px 20px", textAlign: "center", position: "relative", zIndex: 1 }}>
-          <div style={{ position: "absolute", top: 0, left: "50%", transform: "translateX(-50%)", width: "65%", height: 100, background: `conic-gradient(from 263deg at 50% 0%, transparent 0deg, ${p}35 22deg, ${p}20 44deg, transparent 66deg)`, pointerEvents: "none" }} />
-          <div style={{ width: 110, height: 1.5, background: `linear-gradient(90deg, transparent, ${p}, transparent)`, margin: "0 auto 22px", animation: "ace-lamp 3.5s ease-in-out infinite" }} />
-          <h1 style={{ fontSize: 46, fontWeight: 900, marginBottom: 12, color: "#fff", lineHeight: 1.05, letterSpacing: "-0.04em" }}>
+        <div style={{ padding: "64px 48px 48px", textAlign: "center", position: "relative", zIndex: 1 }}>
+          <div style={{ position: "absolute", top: 0, left: "50%", transform: "translateX(-50%)", width: "65%", height: 160, background: `conic-gradient(from 263deg at 50% 0%, transparent 0deg, ${p}35 22deg, ${p}20 44deg, transparent 66deg)`, pointerEvents: "none" }} />
+          <div style={{ width: 160, height: 2, background: `linear-gradient(90deg, transparent, ${p}, transparent)`, margin: "0 auto 32px", animation: "ace-lamp 3.5s ease-in-out infinite" }} />
+          <h1 style={{ fontSize: 72, fontWeight: 900, marginBottom: 18, color: "#fff", lineHeight: 1.02, letterSpacing: "-0.045em" }}>
             Build the future<br />of the web.
           </h1>
-          <p style={{ fontSize: 12.5, color: muted, maxWidth: 360, margin: "0 auto 22px", lineHeight: 1.75 }}>
+          <p style={{ fontSize: 18, color: muted, maxWidth: 480, margin: "0 auto 28px", lineHeight: 1.75 }}>
             Powered by Framer Motion and Tailwind CSS.
           </p>
-          <button style={{ height: 38, padding: "0 22px", borderRadius: 8, fontSize: 11.5, fontWeight: 700, color: "#fff", background: `linear-gradient(135deg,${p},#3b82f6)`, border: "none", cursor: "pointer", boxShadow: `0 4px 18px ${p}40` }}>Get started →</button>
+          <button style={{ height: 52, padding: "0 32px", borderRadius: 10, fontSize: 16, fontWeight: 700, color: "#fff", background: `linear-gradient(135deg,${p},#3b82f6)`, border: "none", cursor: "pointer", boxShadow: `0 6px 24px ${p}40` }}>Get started →</button>
         </div>
       )}
 
       {/* Hero: Typewriter */}
       {hdrStyle === "typewriter" && (
-        <div style={{ padding: "36px 28px 24px", textAlign: "center", position: "relative", zIndex: 1 }}>
-          <div style={{ fontSize: 9.5, letterSpacing: "0.2em", color: `${p}90`, marginBottom: 14, textTransform: "uppercase", fontWeight: 600 }}>The future of the web</div>
-          <h1 style={{ fontSize: 48, fontWeight: 900, marginBottom: 14, lineHeight: 1.02, letterSpacing: "-0.04em" }}>
+        <div style={{ padding: "80px 48px 48px", textAlign: "center", position: "relative", zIndex: 1 }}>
+          <div style={{ fontSize: 14, letterSpacing: "0.2em", color: `${p}90`, marginBottom: 24, textTransform: "uppercase", fontWeight: 600 }}>The future of the web</div>
+          <h1 style={{ fontSize: 76, fontWeight: 900, marginBottom: 20, lineHeight: 0.98, letterSpacing: "-0.05em" }}>
             <span style={{ background: `linear-gradient(135deg,${p},#3b82f6)`, WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent" }}>Build</span>
             {" "}<span style={{ color: "#fff" }}>the future</span><br />
             <span style={{ color: "#fff" }}>of the web</span>
-            <span style={{ display: "inline-block", width: 3, height: "0.9em", background: p, verticalAlign: "text-bottom", marginLeft: 3, animation: "ace-cursor 0.85s step-end infinite", borderRadius: 1 }} />
+            <span style={{ display: "inline-block", width: 4, height: "0.9em", background: p, verticalAlign: "text-bottom", marginLeft: 4, animation: "ace-cursor 0.85s step-end infinite", borderRadius: 1 }} />
           </h1>
-          <p style={{ fontSize: 13, color: muted, maxWidth: 340, margin: "0 auto 22px", lineHeight: 1.75 }}>
+          <p style={{ fontSize: 18, color: muted, maxWidth: 480, margin: "0 auto 28px", lineHeight: 1.75 }}>
             Components that bring ideas to life. No more boring UIs.
           </p>
-          <button style={{ height: 40, padding: "0 24px", borderRadius: 8, fontSize: 12, fontWeight: 700, color: "#fff", background: `linear-gradient(135deg,${p},#3b82f6)`, border: "none", cursor: "pointer" }}>Get started →</button>
+          <button style={{ height: 52, padding: "0 32px", borderRadius: 10, fontSize: 16, fontWeight: 700, color: "#fff", background: `linear-gradient(135deg,${p},#3b82f6)`, border: "none", cursor: "pointer" }}>Get started →</button>
         </div>
       )}
 
       {/* Sections */}
       {comps.includes("badge") && (
-        <div style={{ textAlign: "center", padding: "0 22px 14px", position: "relative", zIndex: 1 }}>
-          <span style={{ display: "inline-block", padding: "5px 16px", borderRadius: 22, fontSize: 9.5, border: `1px solid ${p}45`, color: `${p}cc`, background: `${p}0e` }}>
-            ✦ v2.0 just shipped — see what&apos;s new →
+        <div style={{ textAlign: "center", padding: "0 48px 20px", position: "relative", zIndex: 1 }}>
+          <span style={{ display: "inline-block", padding: "7px 22px", borderRadius: 26, fontSize: 14, border: `1px solid ${p}45`, color: `${p}cc`, background: `${p}0e` }}>
+            ✦ v2.0 just shipped — see what is new →
           </span>
         </div>
       )}
 
       {comps.includes("features") && (
-        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 10, padding: "14px 28px", position: "relative", zIndex: 1 }}>
+        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 20, padding: "40px 48px 80px", position: "relative", zIndex: 1 }}>
           {[
             { icon: "sparkle", title: "100+ components",  desc: "From simple buttons to complex layouts. Copy-paste ready." },
             { icon: "zap",     title: "Framer Motion",    desc: "Buttery smooth animations that feel native to your app." },
             { icon: "code",    title: "TypeScript first", desc: "Full type safety. IDE autocomplete. Zero runtime errors." },
           ].map(f => (
-            <div key={f.title} style={{ padding: "16px 16px", borderRadius: 12, background: card, border: `1px solid ${border}`, backdropFilter: "blur(4px)" }}>
-              <div style={{ width: 32, height: 32, borderRadius: 8, background: `${p}18`, display: "flex", alignItems: "center", justifyContent: "center", marginBottom: 10 }}>
-                <Ico d={ICO[f.icon as keyof typeof ICO]} color={p} size={15} />
+            <div key={f.title} style={{ padding: "28px 28px", borderRadius: 16, background: card, border: `1px solid ${border}`, backdropFilter: "blur(4px)" }}>
+              <div style={{ width: 48, height: 48, borderRadius: 12, background: `${p}18`, display: "flex", alignItems: "center", justifyContent: "center", marginBottom: 18 }}>
+                <Ico d={ICO[f.icon as keyof typeof ICO]} color={p} size={22} />
               </div>
-              <p style={{ fontSize: 11, fontWeight: 700, color: "#fff", marginBottom: 5 }}>{f.title}</p>
-              <p style={{ fontSize: 10, color: muted, lineHeight: 1.65 }}>{f.desc}</p>
+              <p style={{ fontSize: 17, fontWeight: 700, color: "#fff", marginBottom: 8 }}>{f.title}</p>
+              <p style={{ fontSize: 14, color: muted, lineHeight: 1.7 }}>{f.desc}</p>
             </div>
           ))}
         </div>
       )}
 
       {comps.includes("moving-cards") && (
-        <div style={{ padding: "14px 0", position: "relative", zIndex: 1, overflow: "hidden" }}>
-          <p style={{ fontSize: 9.5, color: muted, marginBottom: 12, textAlign: "center", textTransform: "uppercase", letterSpacing: "0.1em" }}>Loved by developers worldwide</p>
-          <div style={{ display: "flex", width: "200%", animation: "ace-marquee 20s linear infinite" }}>
+        <div style={{ padding: "40px 0 80px", position: "relative", zIndex: 1, overflow: "hidden" }}>
+          <p style={{ fontSize: 13, color: muted, marginBottom: 24, textAlign: "center", textTransform: "uppercase", letterSpacing: "0.1em" }}>Loved by developers worldwide</p>
+          <div style={{ display: "flex", width: "200%", animation: "ace-marquee 24s linear infinite" }}>
             {[...Array(2)].map((_, pass) => (
-              <div key={pass} style={{ display: "flex", gap: 10, paddingRight: 10, width: "50%", flexShrink: 0 }}>
+              <div key={pass} style={{ display: "flex", gap: 16, paddingRight: 16, width: "50%", flexShrink: 0 }}>
                 {[
                   { text: "\"Changed how I think about building UIs. Nothing else comes close.\"", name: "Sarah K.", role: "CTO" },
                   { text: "\"Ships 3× faster. The Framer Motion integration is magic.\"", name: "James R.", role: "Eng Lead" },
                   { text: "\"Every component is production-ready. Zero tweaking needed.\"", name: "Mia L.", role: "Founder" },
-                  { text: "\"Best component library I&apos;ve ever used. The DX is incredible.\"", name: "Tom W.", role: "Developer" },
+                  { text: "\"Best component library I have ever used. The DX is incredible.\"", name: "Tom W.", role: "Developer" },
                   { text: "\"Went from design to deployed in a weekend. Mind-blowing.\"", name: "Alex P.", role: "Designer" },
                 ].map(t => (
-                  <div key={t.name + pass} style={{ minWidth: 200, flexShrink: 0, padding: "14px 16px", borderRadius: 12, background: card, border: `1px solid ${p}22`, backdropFilter: "blur(4px)" }}>
-                    <p style={{ fontSize: 10, color: muted, marginBottom: 10, lineHeight: 1.65 }}>{t.text}</p>
-                    <p style={{ fontSize: 9, fontWeight: 700, color: "#fff" }}>— {t.name} <span style={{ fontWeight: 400 }}>· {t.role}</span></p>
+                  <div key={t.name + pass} style={{ minWidth: 280, flexShrink: 0, padding: "22px 24px", borderRadius: 16, background: card, border: `1px solid ${p}22`, backdropFilter: "blur(4px)" }}>
+                    <p style={{ fontSize: 14, color: muted, marginBottom: 14, lineHeight: 1.7 }}>{t.text}</p>
+                    <p style={{ fontSize: 13, fontWeight: 700, color: "#fff" }}>— {t.name} <span style={{ fontWeight: 400 }}>· {t.role}</span></p>
                   </div>
                 ))}
               </div>
@@ -742,46 +742,46 @@ export function MarketingAceternity({ themeColor, config }: { themeColor?: Theme
       )}
 
       {comps.includes("bento") && (
-        <div style={{ padding: "14px 28px", position: "relative", zIndex: 1 }}>
-          <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1fr", gridTemplateRows: "auto auto", gap: 10 }}>
-            <div style={{ padding: "18px", borderRadius: 14, background: card, border: `1px solid ${p}18`, gridRow: "1 / 3", backdropFilter: "blur(4px)" }}>
-              <p style={{ fontSize: 9, color: muted, marginBottom: 5, textTransform: "uppercase", letterSpacing: "0.1em" }}>Revenue</p>
-              <p style={{ fontSize: 22, fontWeight: 900, color: "#fff", marginBottom: 14, letterSpacing: "-0.02em" }}>$128k MRR</p>
-              <svg viewBox="0 0 160 55" style={{ width: "100%", overflow: "visible" }}>
+        <div style={{ padding: "40px 48px 80px", position: "relative", zIndex: 1 }}>
+          <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1fr", gridTemplateRows: "auto auto", gap: 16 }}>
+            <div style={{ padding: "28px", borderRadius: 18, background: card, border: `1px solid ${p}18`, gridRow: "1 / 3", backdropFilter: "blur(4px)" }}>
+              <p style={{ fontSize: 13, color: muted, marginBottom: 8, textTransform: "uppercase", letterSpacing: "0.1em" }}>Revenue</p>
+              <p style={{ fontSize: 36, fontWeight: 900, color: "#fff", marginBottom: 20, letterSpacing: "-0.02em" }}>$128k MRR</p>
+              <svg viewBox="0 0 160 70" style={{ width: "100%", overflow: "visible" }}>
                 <defs>
                   <linearGradient id="bg-chart" x1="0" y1="0" x2="0" y2="1">
                     <stop offset="0%" stopColor={p} stopOpacity="0.5" />
                     <stop offset="100%" stopColor={p} stopOpacity="0" />
                   </linearGradient>
                 </defs>
-                <path d="M0,52 C20,46 35,38 55,28 C75,18 90,12 115,7 C135,3 148,2 160,1" stroke={p} strokeWidth="2" fill="none" strokeLinecap="round" />
-                <path d="M0,52 C20,46 35,38 55,28 C75,18 90,12 115,7 C135,3 148,2 160,1 L160,55 L0,55 Z" fill="url(#bg-chart)" />
+                <path d="M0,66 C20,58 35,48 55,36 C75,24 90,16 115,10 C135,5 148,3 160,1" stroke={p} strokeWidth="2.5" fill="none" strokeLinecap="round" />
+                <path d="M0,66 C20,58 35,48 55,36 C75,24 90,16 115,10 C135,5 148,3 160,1 L160,70 L0,70 Z" fill="url(#bg-chart)" />
               </svg>
             </div>
-            <div style={{ padding: "16px", borderRadius: 14, background: card, border: `1px solid ${border}`, backdropFilter: "blur(4px)" }}>
-              <p style={{ fontSize: 9, color: muted, marginBottom: 4 }}>Components</p>
-              <p style={{ fontSize: 28, fontWeight: 900, color: p, letterSpacing: "-0.02em" }}>100+</p>
+            <div style={{ padding: "24px", borderRadius: 18, background: card, border: `1px solid ${border}`, backdropFilter: "blur(4px)" }}>
+              <p style={{ fontSize: 13, color: muted, marginBottom: 6 }}>Components</p>
+              <p style={{ fontSize: 44, fontWeight: 900, color: p, letterSpacing: "-0.02em" }}>100+</p>
             </div>
-            <div style={{ padding: "16px", borderRadius: 14, background: `${p}18`, border: `1px solid ${p}30`, backdropFilter: "blur(4px)" }}>
-              <p style={{ fontSize: 9, color: muted, marginBottom: 4 }}>Users</p>
-              <p style={{ fontSize: 22, fontWeight: 900, color: "#fff", letterSpacing: "-0.02em" }}>120k+</p>
+            <div style={{ padding: "24px", borderRadius: 18, background: `${p}18`, border: `1px solid ${p}30`, backdropFilter: "blur(4px)" }}>
+              <p style={{ fontSize: 13, color: muted, marginBottom: 6 }}>Users</p>
+              <p style={{ fontSize: 36, fontWeight: 900, color: "#fff", letterSpacing: "-0.02em" }}>120k+</p>
             </div>
-            <div style={{ padding: "16px", borderRadius: 14, background: card, border: `1px solid ${border}`, backdropFilter: "blur(4px)", gridColumn: "2 / 4" }}>
-              <p style={{ fontSize: 9, color: muted, marginBottom: 4 }}>Uptime</p>
-              <p style={{ fontSize: 22, fontWeight: 900, color: "#fff", letterSpacing: "-0.02em" }}>99.99%</p>
+            <div style={{ padding: "24px", borderRadius: 18, background: card, border: `1px solid ${border}`, backdropFilter: "blur(4px)", gridColumn: "2 / 4" }}>
+              <p style={{ fontSize: 13, color: muted, marginBottom: 6 }}>Uptime</p>
+              <p style={{ fontSize: 36, fontWeight: 900, color: "#fff", letterSpacing: "-0.02em" }}>99.99%</p>
             </div>
           </div>
         </div>
       )}
 
       {comps.includes("pricing") && (
-        <div style={{ padding: "14px 28px", position: "relative", zIndex: 1 }}>
-          <div style={{ display: "flex", gap: 10 }}>
+        <div style={{ padding: "40px 48px 80px", position: "relative", zIndex: 1 }}>
+          <div style={{ display: "flex", gap: 16 }}>
             {[{ plan: "Starter", price: "Free",   hi: false }, { plan: "All-Access", price: "$299",  hi: true }, { plan: "Team",    price: "Custom", hi: false }].map(pl => (
-              <div key={pl.plan} style={{ flex: 1, padding: "16px 14px", borderRadius: 12, background: pl.hi ? `linear-gradient(160deg, ${p}30, #3b82f620)` : card, border: `1px solid ${pl.hi ? `${p}55` : border}`, textAlign: "center", backdropFilter: "blur(4px)" }}>
-                <p style={{ fontSize: 9.5, color: pl.hi ? `${p}dd` : muted, marginBottom: 4 }}>{pl.plan}</p>
-                <p style={{ fontSize: 22, fontWeight: 900, color: "#fff", letterSpacing: "-0.02em" }}>{pl.price}</p>
-                {pl.hi && <div style={{ marginTop: 5, fontSize: 8, color: `${p}aa` }}>lifetime access</div>}
+              <div key={pl.plan} style={{ flex: 1, padding: "28px 24px", borderRadius: 18, background: pl.hi ? `linear-gradient(160deg, ${p}30, #3b82f620)` : card, border: `1px solid ${pl.hi ? `${p}55` : border}`, textAlign: "center", backdropFilter: "blur(4px)" }}>
+                <p style={{ fontSize: 14, color: pl.hi ? `${p}dd` : muted, marginBottom: 8 }}>{pl.plan}</p>
+                <p style={{ fontSize: 42, fontWeight: 900, color: "#fff", letterSpacing: "-0.02em" }}>{pl.price}</p>
+                {pl.hi && <div style={{ marginTop: 8, fontSize: 13, color: `${p}aa` }}>lifetime access</div>}
               </div>
             ))}
           </div>
@@ -789,10 +789,10 @@ export function MarketingAceternity({ themeColor, config }: { themeColor?: Theme
       )}
 
       {comps.includes("cta") && (
-        <div style={{ margin: "14px 28px 28px", padding: "24px 22px", borderRadius: 16, background: `linear-gradient(135deg, ${p}18, #3b82f614)`, border: `1px solid ${p}28`, textAlign: "center", position: "relative", zIndex: 1, backdropFilter: "blur(6px)" }}>
-          <p style={{ fontSize: 22, fontWeight: 900, color: "#fff", marginBottom: 6, letterSpacing: "-0.02em" }}>Start building today</p>
-          <p style={{ fontSize: 11, color: muted, marginBottom: 18 }}>Join 120,000+ developers worldwide.</p>
-          <button style={{ height: 36, padding: "0 24px", borderRadius: 8, fontSize: 11, fontWeight: 700, color: "#fff", background: `linear-gradient(135deg,${p},#3b82f6)`, border: "none", cursor: "pointer", boxShadow: `0 4px 18px ${p}40` }}>Get All-Access →</button>
+        <div style={{ margin: "0 48px 80px", padding: "60px 48px", borderRadius: 20, background: `linear-gradient(135deg, ${p}18, #3b82f614)`, border: `1px solid ${p}28`, textAlign: "center", position: "relative", zIndex: 1, backdropFilter: "blur(6px)" }}>
+          <p style={{ fontSize: 42, fontWeight: 900, color: "#fff", marginBottom: 12, letterSpacing: "-0.02em" }}>Start building today</p>
+          <p style={{ fontSize: 17, color: muted, marginBottom: 28 }}>Join 120,000+ developers worldwide.</p>
+          <button style={{ height: 52, padding: "0 34px", borderRadius: 10, fontSize: 16, fontWeight: 700, color: "#fff", background: `linear-gradient(135deg,${p},#3b82f6)`, border: "none", cursor: "pointer", boxShadow: `0 6px 24px ${p}40` }}>Get All-Access →</button>
         </div>
       )}
 
@@ -836,61 +836,61 @@ export function MarketingHeroUI({ themeColor, config }: { themeColor?: ThemeColo
 
       <nav style={{
         display: "flex", alignItems: "center", justifyContent: "space-between",
-        padding: "12px 28px", borderBottom: navStyle === "minimal" ? "none" : `1px solid ${border}`,
+        padding: "18px 48px", borderBottom: navStyle === "minimal" ? "none" : `1px solid ${border}`,
         position: "sticky", top: 0, zIndex: 10,
         background: navBg,
         backdropFilter: navBlur ? "blur(16px)" : undefined,
         WebkitBackdropFilter: navBlur ? "blur(16px)" : undefined,
       }}>
-        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
-          <div style={{ width: 22, height: 22, borderRadius: "50%", background: theme.primary }} />
-          <span style={{ fontWeight: 800, fontSize: 12.5, color: text, letterSpacing: "-0.01em" }}>Acme</span>
+        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
+          <div style={{ width: 28, height: 28, borderRadius: "50%", background: theme.primary }} />
+          <span style={{ fontWeight: 800, fontSize: 17, color: text, letterSpacing: "-0.01em" }}>Acme</span>
         </div>
-        <div style={{ display: "flex", gap: 20, fontSize: 10, color: muted }}>
+        <div style={{ display: "flex", gap: 32, fontSize: 15, color: muted }}>
           {["Features","Pricing","Docs","Blog"].map(i => <span key={i}>{i}</span>)}
         </div>
-        <div style={{ display: "flex", gap: 7 }}>
-          <button style={{ height: 28, padding: "0 14px", borderRadius: 18, border: `1px solid ${border}`, fontSize: 10, background: "none", color: muted, cursor: "pointer" }}>Login</button>
-          <button style={{ height: 28, padding: "0 16px", borderRadius: 18, fontSize: 10, fontWeight: 700, background: theme.primary, color: theme.primaryFg, border: "none", cursor: "pointer", boxShadow: `0 2px 14px ${theme.ring}` }}>Get started</button>
+        <div style={{ display: "flex", gap: 10 }}>
+          <button style={{ height: 42, padding: "0 20px", borderRadius: 22, border: `1px solid ${border}`, fontSize: 14, background: "none", color: muted, cursor: "pointer" }}>Login</button>
+          <button style={{ height: 42, padding: "0 22px", borderRadius: 22, fontSize: 14, fontWeight: 700, background: theme.primary, color: theme.primaryFg, border: "none", cursor: "pointer", boxShadow: `0 2px 16px ${theme.ring}` }}>Get started</button>
         </div>
       </nav>
 
       {hdrStyle === "animated-badge" && (
-        <div style={{ padding: "32px 28px 0", textAlign: "center", position: "relative", zIndex: 1 }}>
-          <div style={{ display: "inline-flex", alignItems: "center", gap: 7, padding: "5px 16px", borderRadius: 22, fontSize: 9.5, fontWeight: 600, marginBottom: 18, background: theme.activeBg, color: theme.activeFg, border: `1px solid ${theme.ring}`, boxShadow: `0 0 0 3px ${theme.ring}44` }}>
+        <div style={{ padding: "80px 48px 0", textAlign: "center", position: "relative", zIndex: 1 }}>
+          <div style={{ display: "inline-flex", alignItems: "center", gap: 9, padding: "7px 20px", borderRadius: 28, fontSize: 13, fontWeight: 600, marginBottom: 28, background: theme.activeBg, color: theme.activeFg, border: `1px solid ${theme.ring}`, boxShadow: `0 0 0 4px ${theme.ring}44` }}>
             🚀 Now in public beta &nbsp;·&nbsp; <span style={{ fontWeight: 800 }}>Join 12k users →</span>
           </div>
-          <h1 style={{ fontSize: 50, fontWeight: 900, color: theme.primary, marginBottom: 14, lineHeight: 1.0, letterSpacing: "-0.04em" }}>
+          <h1 style={{ fontSize: 76, fontWeight: 900, color: theme.primary, marginBottom: 20, lineHeight: 0.98, letterSpacing: "-0.05em" }}>
             Build faster,<br />ship smarter.
           </h1>
-          <p style={{ fontSize: 13, color: muted, maxWidth: 420, margin: "0 auto 22px", lineHeight: 1.75 }}>
+          <p style={{ fontSize: 18, color: muted, maxWidth: 560, margin: "0 auto 32px", lineHeight: 1.75 }}>
             The all-in-one platform for teams that move fast. Deploy in seconds, scale to millions.
           </p>
-          <div style={{ display: "flex", gap: 10, justifyContent: "center", marginBottom: 36 }}>
-            <button style={{ height: 40, padding: "0 26px", borderRadius: 22, fontSize: 12, fontWeight: 700, background: theme.primary, color: theme.primaryFg, border: "none", cursor: "pointer", boxShadow: `0 4px 20px ${theme.ring}` }}>Start for free</button>
-            <button style={{ height: 40, padding: "0 20px", borderRadius: 22, fontSize: 12, background: "none", border: `1px solid ${border}`, color: muted, cursor: "pointer" }}>Live demo →</button>
+          <div style={{ display: "flex", gap: 14, justifyContent: "center", marginBottom: 56 }}>
+            <button style={{ height: 52, padding: "0 34px", borderRadius: 28, fontSize: 16, fontWeight: 700, background: theme.primary, color: theme.primaryFg, border: "none", cursor: "pointer", boxShadow: `0 6px 28px ${theme.ring}` }}>Start for free</button>
+            <button style={{ height: 52, padding: "0 28px", borderRadius: 28, fontSize: 16, background: "none", border: `1px solid ${border}`, color: muted, cursor: "pointer" }}>Live demo →</button>
           </div>
           <DashMockup bg={bg} card={card} border={border} text={text} muted={muted} accent={theme.primary} />
         </div>
       )}
 
       {hdrStyle === "split" && (
-        <div style={{ display: "flex", gap: 24, padding: "28px 28px 0", alignItems: "flex-start", position: "relative", zIndex: 1 }}>
-          <div style={{ flex: "0 0 42%", paddingTop: 10 }}>
-            <div style={{ display: "inline-flex", alignItems: "center", gap: 5, padding: "4px 12px", borderRadius: 16, fontSize: 9.5, fontWeight: 700, marginBottom: 16, background: theme.activeBg, color: theme.activeFg, border: `1px solid ${theme.ring}` }}>🚀 Now in beta</div>
-            <h1 style={{ fontSize: 38, fontWeight: 900, color: theme.primary, marginBottom: 12, lineHeight: 1.08, letterSpacing: "-0.03em" }}>
+        <div style={{ display: "flex", gap: 48, padding: "72px 48px 0", alignItems: "flex-start", position: "relative", zIndex: 1 }}>
+          <div style={{ flex: "0 0 42%", paddingTop: 14 }}>
+            <div style={{ display: "inline-flex", alignItems: "center", gap: 6, padding: "5px 14px", borderRadius: 20, fontSize: 13, fontWeight: 700, marginBottom: 22, background: theme.activeBg, color: theme.activeFg, border: `1px solid ${theme.ring}` }}>🚀 Now in beta</div>
+            <h1 style={{ fontSize: 58, fontWeight: 900, color: theme.primary, marginBottom: 18, lineHeight: 1.06, letterSpacing: "-0.04em" }}>
               Build faster,<br />ship smarter.
             </h1>
-            <p style={{ fontSize: 12, color: muted, marginBottom: 20, lineHeight: 1.75 }}>The platform for fast-moving teams.</p>
-            <div style={{ display: "flex", gap: 8, marginBottom: 24 }}>
-              <button style={{ height: 36, padding: "0 20px", borderRadius: 20, fontSize: 11, fontWeight: 700, background: theme.primary, color: theme.primaryFg, border: "none", cursor: "pointer", boxShadow: `0 3px 14px ${theme.ring}` }}>Start free</button>
-              <button style={{ height: 36, padding: "0 16px", borderRadius: 20, fontSize: 11, border: `1px solid ${border}`, color: muted, background: "none", cursor: "pointer" }}>Demo →</button>
+            <p style={{ fontSize: 17, color: muted, marginBottom: 28, lineHeight: 1.75 }}>The platform for fast-moving teams.</p>
+            <div style={{ display: "flex", gap: 12, marginBottom: 36 }}>
+              <button style={{ height: 50, padding: "0 28px", borderRadius: 26, fontSize: 15, fontWeight: 700, background: theme.primary, color: theme.primaryFg, border: "none", cursor: "pointer", boxShadow: `0 4px 20px ${theme.ring}` }}>Start free</button>
+              <button style={{ height: 50, padding: "0 24px", borderRadius: 26, fontSize: 15, border: `1px solid ${border}`, color: muted, background: "none", cursor: "pointer" }}>Demo →</button>
             </div>
-            <div style={{ display: "flex", gap: 20 }}>
+            <div style={{ display: "flex", gap: 32 }}>
               {[["50k+","Teams"],["99.9%","Uptime"]].map(([v,l]) => (
                 <div key={l}>
-                  <p style={{ fontSize: 20, fontWeight: 900, color: theme.primary, letterSpacing: "-0.02em" }}>{v}</p>
-                  <p style={{ fontSize: 9, color: muted }}>{l}</p>
+                  <p style={{ fontSize: 30, fontWeight: 900, color: theme.primary, letterSpacing: "-0.02em" }}>{v}</p>
+                  <p style={{ fontSize: 13, color: muted }}>{l}</p>
                 </div>
               ))}
             </div>
@@ -902,39 +902,39 @@ export function MarketingHeroUI({ themeColor, config }: { themeColor?: ThemeColo
       )}
 
       {hdrStyle === "gradient" && (
-        <div style={{ padding: "36px 28px 0", textAlign: "center", position: "relative", zIndex: 1 }}>
-          <h1 style={{ fontSize: 52, fontWeight: 900, lineHeight: 1.0, marginBottom: 14, background: `linear-gradient(135deg, ${theme.primary}, ${isDark ? "#06b6d4" : "#7c3aed"})`, WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent", letterSpacing: "-0.04em" }}>
+        <div style={{ padding: "80px 48px 0", textAlign: "center", position: "relative", zIndex: 1 }}>
+          <h1 style={{ fontSize: 76, fontWeight: 900, lineHeight: 0.98, marginBottom: 20, background: `linear-gradient(135deg, ${theme.primary}, ${isDark ? "#06b6d4" : "#7c3aed"})`, WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent", letterSpacing: "-0.05em" }}>
             Build faster.<br />Ship smarter.
           </h1>
-          <p style={{ fontSize: 13, color: muted, maxWidth: 380, margin: "0 auto 22px", lineHeight: 1.75 }}>Everything your team needs in one platform.</p>
-          <div style={{ display: "flex", gap: 10, justifyContent: "center", marginBottom: 32 }}>
-            <button style={{ height: 38, padding: "0 22px", borderRadius: 22, fontSize: 11, fontWeight: 700, background: `linear-gradient(135deg, ${theme.primary}, #06b6d4)`, color: "#fff", border: "none", cursor: "pointer", boxShadow: `0 4px 20px ${theme.ring}` }}>Get started →</button>
-            <button style={{ height: 38, padding: "0 18px", borderRadius: 22, fontSize: 11, background: "none", border: `1px solid ${border}`, color: muted, cursor: "pointer" }}>Learn more</button>
+          <p style={{ fontSize: 18, color: muted, maxWidth: 500, margin: "0 auto 28px", lineHeight: 1.75 }}>Everything your team needs in one platform.</p>
+          <div style={{ display: "flex", gap: 14, justifyContent: "center", marginBottom: 52 }}>
+            <button style={{ height: 52, padding: "0 32px", borderRadius: 28, fontSize: 16, fontWeight: 700, background: `linear-gradient(135deg, ${theme.primary}, #06b6d4)`, color: "#fff", border: "none", cursor: "pointer", boxShadow: `0 6px 28px ${theme.ring}` }}>Get started →</button>
+            <button style={{ height: 52, padding: "0 26px", borderRadius: 28, fontSize: 16, background: "none", border: `1px solid ${border}`, color: muted, cursor: "pointer" }}>Learn more</button>
           </div>
           <DashMockup bg={bg} card={card} border={border} text={text} muted={muted} accent={theme.primary} />
         </div>
       )}
 
       {comps.includes("features") && (
-        <div style={{ padding: "32px 28px", position: "relative", zIndex: 1 }}>
-          <div style={{ textAlign: "center", marginBottom: 22 }}>
-            <h2 style={{ fontSize: 22, fontWeight: 900, color: text, letterSpacing: "-0.02em", marginBottom: 6 }}>Built for what matters</h2>
-            <p style={{ fontSize: 11, color: muted }}>Every feature designed around the way modern teams actually work.</p>
+        <div style={{ padding: "80px 48px", position: "relative", zIndex: 1 }}>
+          <div style={{ textAlign: "center", marginBottom: 48 }}>
+            <h2 style={{ fontSize: 36, fontWeight: 900, color: text, letterSpacing: "-0.02em", marginBottom: 10 }}>Built for what matters</h2>
+            <p style={{ fontSize: 16, color: muted }}>Every feature designed around the way modern teams actually work.</p>
           </div>
-          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
+          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
             {[
               { icon: "bolt",   title: "10× faster deploys",  desc: "Zero-config CI/CD. Push and ship in under a minute." },
               { icon: "shield", title: "Zero-trust security", desc: "SOC 2 compliant. End-to-end encryption by default." },
               { icon: "layers", title: "Any stack",           desc: "Node, Python, Go, Rust — we handle all of them." },
               { icon: "globe",  title: "Global CDN",          desc: "300+ edge locations. Sub-10ms for every user." },
             ].map(f => (
-              <div key={f.title} style={{ padding: "16px 18px", borderRadius: 14, background: card, border: `1px solid ${border}`, display: "flex", gap: 14, alignItems: "flex-start", boxShadow: "0 2px 8px rgba(0,0,0,0.05)" }}>
-                <div style={{ width: 34, height: 34, borderRadius: 9, background: theme.activeBg, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
-                  <Ico d={ICO[f.icon as keyof typeof ICO]} color={theme.primary} size={15} />
+              <div key={f.title} style={{ padding: "24px 26px", borderRadius: 18, background: card, border: `1px solid ${border}`, display: "flex", gap: 20, alignItems: "flex-start", boxShadow: "0 2px 12px rgba(0,0,0,0.05)" }}>
+                <div style={{ width: 48, height: 48, borderRadius: 12, background: theme.activeBg, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
+                  <Ico d={ICO[f.icon as keyof typeof ICO]} color={theme.primary} size={22} />
                 </div>
                 <div>
-                  <p style={{ fontSize: 11, fontWeight: 700, color: text, marginBottom: 4 }}>{f.title}</p>
-                  <p style={{ fontSize: 10, color: muted, lineHeight: 1.65 }}>{f.desc}</p>
+                  <p style={{ fontSize: 17, fontWeight: 700, color: text, marginBottom: 6 }}>{f.title}</p>
+                  <p style={{ fontSize: 14, color: muted, lineHeight: 1.7 }}>{f.desc}</p>
                 </div>
               </div>
             ))}
@@ -943,14 +943,14 @@ export function MarketingHeroUI({ themeColor, config }: { themeColor?: ThemeColo
       )}
 
       {comps.includes("metrics") && (
-        <div style={{ padding: "0 28px 28px", position: "relative", zIndex: 1 }}>
-          <div style={{ padding: "18px 20px", borderRadius: 16, border: `1px solid ${border}`, background: card, boxShadow: "0 4px 24px rgba(0,0,0,0.06)" }}>
-            <p style={{ fontSize: 9.5, color: muted, marginBottom: 14, textTransform: "uppercase", letterSpacing: "0.09em", fontWeight: 600 }}>Live metrics</p>
-            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr 1fr", gap: 10 }}>
+        <div style={{ padding: "0 48px 80px", position: "relative", zIndex: 1 }}>
+          <div style={{ padding: "28px 32px", borderRadius: 20, border: `1px solid ${border}`, background: card, boxShadow: "0 4px 28px rgba(0,0,0,0.06)" }}>
+            <p style={{ fontSize: 13, color: muted, marginBottom: 20, textTransform: "uppercase", letterSpacing: "0.09em", fontWeight: 600 }}>Live metrics</p>
+            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr 1fr", gap: 14 }}>
               {[["MRR","$128k"],[" Users","24.8k"],["Growth","+34%"],["Churn","1.4%"]].map(([l, v]) => (
-                <div key={l} style={{ padding: "12px 14px", borderRadius: 10, background: theme.activeBg, border: `1px solid ${theme.ring}` }}>
-                  <p style={{ fontSize: 9, color: muted, marginBottom: 3 }}>{l}</p>
-                  <p style={{ fontSize: 18, fontWeight: 900, color: text, letterSpacing: "-0.02em" }}>{v}</p>
+                <div key={l} style={{ padding: "18px 20px", borderRadius: 14, background: theme.activeBg, border: `1px solid ${theme.ring}` }}>
+                  <p style={{ fontSize: 12, color: muted, marginBottom: 5 }}>{l}</p>
+                  <p style={{ fontSize: 28, fontWeight: 900, color: text, letterSpacing: "-0.02em" }}>{v}</p>
                 </div>
               ))}
             </div>
@@ -959,15 +959,15 @@ export function MarketingHeroUI({ themeColor, config }: { themeColor?: ThemeColo
       )}
 
       {comps.includes("avatars") && (
-        <div style={{ padding: "0 28px 18px", display: "flex", alignItems: "center", gap: 12, position: "relative", zIndex: 1 }}>
+        <div style={{ padding: "0 48px 28px", display: "flex", alignItems: "center", gap: 16, position: "relative", zIndex: 1 }}>
           <div style={{ display: "flex" }}>
             {[theme.primary,"#2563eb","#0d9488","#e11d48","#7c3aed"].map((c, i) => (
-              <div key={c} style={{ width: 28, height: 28, borderRadius: "50%", background: c, border: `2px solid ${bg}`, marginLeft: i > 0 ? -10 : 0, display: "flex", alignItems: "center", justifyContent: "center" }}>
-                <span style={{ color: "#fff", fontSize: 9, fontWeight: 700 }}>{String.fromCharCode(65+i)}</span>
+              <div key={c} style={{ width: 36, height: 36, borderRadius: "50%", background: c, border: `2px solid ${bg}`, marginLeft: i > 0 ? -12 : 0, display: "flex", alignItems: "center", justifyContent: "center" }}>
+                <span style={{ color: "#fff", fontSize: 12, fontWeight: 700 }}>{String.fromCharCode(65+i)}</span>
               </div>
             ))}
           </div>
-          <span style={{ fontSize: 10, color: muted }}><strong style={{ color: text }}>50,000+</strong> teams ship on Acme</span>
+          <span style={{ fontSize: 14, color: muted }}><strong style={{ color: text }}>50,000+</strong> teams ship on Acme</span>
         </div>
       )}
 
@@ -1009,10 +1009,10 @@ export function MarketingHeroUI({ themeColor, config }: { themeColor?: ThemeColo
       )}
 
       {comps.includes("cta") && (
-        <div style={{ margin: "0 28px 32px", padding: "26px 24px", borderRadius: 16, background: `linear-gradient(135deg, ${theme.primary}18, ${theme.ring}22)`, border: `1px solid ${theme.ring}`, textAlign: "center", position: "relative", zIndex: 1 }}>
-          <h2 style={{ fontSize: 24, fontWeight: 900, color: text, letterSpacing: "-0.02em", marginBottom: 6 }}>Ready to ship faster?</h2>
-          <p style={{ fontSize: 11, color: muted, marginBottom: 18 }}>Join 50,000+ teams already on Acme. Free forever.</p>
-          <button style={{ height: 36, padding: "0 24px", borderRadius: 22, fontSize: 11, fontWeight: 700, background: theme.primary, color: theme.primaryFg, border: "none", cursor: "pointer", boxShadow: `0 4px 16px ${theme.ring}` }}>Get started free →</button>
+        <div style={{ margin: "0 48px 80px", padding: "60px 48px", borderRadius: 24, background: `linear-gradient(135deg, ${theme.primary}18, ${theme.ring}22)`, border: `1px solid ${theme.ring}`, textAlign: "center", position: "relative", zIndex: 1 }}>
+          <h2 style={{ fontSize: 42, fontWeight: 900, color: text, letterSpacing: "-0.02em", marginBottom: 12 }}>Ready to ship faster?</h2>
+          <p style={{ fontSize: 17, color: muted, marginBottom: 28 }}>Join 50,000+ teams already on Acme. Free forever.</p>
+          <button style={{ height: 52, padding: "0 34px", borderRadius: 28, fontSize: 16, fontWeight: 700, background: theme.primary, color: theme.primaryFg, border: "none", cursor: "pointer", boxShadow: `0 6px 24px ${theme.ring}` }}>Get started free →</button>
         </div>
       )}
 
@@ -1054,70 +1054,70 @@ export function MarketingTailwind({ themeColor, config }: { themeColor?: ThemeCo
       )}
 
       {/* Nav */}
-      <nav style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "13px 28px", background: navStyle === "minimal" ? "transparent" : bg, borderBottom: navStyle === "bordered" ? `1px solid ${border}` : "none", position: "relative", zIndex: 2 }}>
-        <span style={{ fontWeight: 900, fontSize: 13.5, color: text, letterSpacing: "-0.03em" }}>acme</span>
-        <div style={{ display: "flex", gap: 22, fontSize: 10, color: muted }}>
+      <nav style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "18px 48px", background: navStyle === "minimal" ? "transparent" : bg, borderBottom: navStyle === "bordered" ? `1px solid ${border}` : "none", position: "relative", zIndex: 2 }}>
+        <span style={{ fontWeight: 900, fontSize: 20, color: text, letterSpacing: "-0.03em" }}>acme</span>
+        <div style={{ display: "flex", gap: 32, fontSize: 15, color: muted }}>
           {["Features","Pricing","Blog","Docs"].map(i => <span key={i}>{i}</span>)}
         </div>
-        <div style={{ display: "flex", gap: 8 }}>
-          <button style={{ height: 28, padding: "0 12px", fontSize: 10, color: muted, background: "none", border: "none", cursor: "pointer" }}>Log in</button>
-          <button style={{ height: 28, padding: "0 14px", borderRadius: 5, fontSize: 10, fontWeight: 700, background: text, color: bg, border: "none", cursor: "pointer" }}>Sign up</button>
+        <div style={{ display: "flex", gap: 10 }}>
+          <button style={{ height: 42, padding: "0 18px", fontSize: 14, color: muted, background: "none", border: "none", cursor: "pointer" }}>Log in</button>
+          <button style={{ height: 42, padding: "0 22px", borderRadius: 7, fontSize: 14, fontWeight: 700, background: text, color: bg, border: "none", cursor: "pointer" }}>Sign up</button>
         </div>
       </nav>
 
       {hdrStyle === "editorial" && (
-        <div style={{ padding: "36px 28px 0", position: "relative", zIndex: 1 }}>
-          <div style={{ display: "inline-flex", alignItems: "center", gap: 6, marginBottom: 14 }}>
-            <div style={{ width: 6, height: 6, borderRadius: "50%", background: useAccent }} />
-            <span style={{ fontSize: 10, fontWeight: 600, color: useAccent, letterSpacing: "0.1em", textTransform: "uppercase" }}>Now in public beta</span>
+        <div style={{ padding: "80px 48px 0", position: "relative", zIndex: 1 }}>
+          <div style={{ display: "inline-flex", alignItems: "center", gap: 8, marginBottom: 20 }}>
+            <div style={{ width: 8, height: 8, borderRadius: "50%", background: useAccent }} />
+            <span style={{ fontSize: 13, fontWeight: 600, color: useAccent, letterSpacing: "0.1em", textTransform: "uppercase" }}>Now in public beta</span>
           </div>
-          <h1 style={{ fontSize: 56, fontWeight: 900, color: text, lineHeight: 1.0, letterSpacing: "-0.045em", marginBottom: 16 }}>
+          <h1 style={{ fontSize: 80, fontWeight: 900, color: text, lineHeight: 0.96, letterSpacing: "-0.05em", marginBottom: 22 }}>
             The platform<br />built for scale.
           </h1>
-          <p style={{ fontSize: 13, color: muted, maxWidth: 480, marginBottom: 26, lineHeight: 1.75 }}>
+          <p style={{ fontSize: 18, color: muted, maxWidth: 560, marginBottom: 36, lineHeight: 1.75 }}>
             Everything your team needs to build, deploy, and monitor production applications — in one place.
           </p>
-          <div style={{ display: "flex", gap: 10, marginBottom: 40 }}>
-            <button style={{ height: 36, padding: "0 20px", borderRadius: 6, fontSize: 10.5, fontWeight: 700, background: text, color: bg, border: "none", cursor: "pointer" }}>Get started free</button>
-            <button style={{ height: 36, padding: "0 18px", borderRadius: 6, fontSize: 10.5, border: `1px solid ${border}`, color: muted, background: "none", cursor: "pointer" }}>Documentation →</button>
+          <div style={{ display: "flex", gap: 14, marginBottom: 56 }}>
+            <button style={{ height: 52, padding: "0 28px", borderRadius: 8, fontSize: 15, fontWeight: 700, background: text, color: bg, border: "none", cursor: "pointer" }}>Get started free</button>
+            <button style={{ height: 52, padding: "0 26px", borderRadius: 8, fontSize: 15, border: `1px solid ${border}`, color: muted, background: "none", cursor: "pointer" }}>Documentation →</button>
           </div>
           {/* Terminal mockup */}
-          <div style={{ borderRadius: 10, overflow: "hidden", border: `1px solid ${border}`, boxShadow: isDark ? "0 24px 60px rgba(0,0,0,0.4)" : "0 24px 60px rgba(0,0,0,0.1)", background: isDark ? "#0d0d0d" : "#1e1e1e" }}>
-            <div style={{ height: 24, display: "flex", alignItems: "center", gap: 5, padding: "0 10px", background: isDark ? "#161616" : "#2a2a2a", borderBottom: "1px solid rgba(255,255,255,0.08)" }}>
-              {["#ff5f56","#ffbd2e","#27c93f"].map((c, i) => <div key={i} style={{ width: 7, height: 7, borderRadius: "50%", background: c }} />)}
-              <span style={{ fontSize: 8, color: "rgba(255,255,255,0.35)", marginLeft: 8 }}>bash</span>
+          <div style={{ borderRadius: 14, overflow: "hidden", border: `1px solid ${border}`, boxShadow: isDark ? "0 32px 80px rgba(0,0,0,0.5)" : "0 32px 80px rgba(0,0,0,0.12)", background: isDark ? "#0d0d0d" : "#1e1e1e" }}>
+            <div style={{ height: 36, display: "flex", alignItems: "center", gap: 7, padding: "0 16px", background: isDark ? "#161616" : "#2a2a2a", borderBottom: "1px solid rgba(255,255,255,0.08)" }}>
+              {["#ff5f56","#ffbd2e","#27c93f"].map((c, i) => <div key={i} style={{ width: 10, height: 10, borderRadius: "50%", background: c }} />)}
+              <span style={{ fontSize: 12, color: "rgba(255,255,255,0.35)", marginLeft: 10 }}>bash</span>
             </div>
-            <div style={{ padding: "14px 16px", fontFamily: '"JetBrains Mono", "Fira Code", monospace', fontSize: 10.5, lineHeight: 1.9 }}>
+            <div style={{ padding: "24px 28px", fontFamily: '"JetBrains Mono", "Fira Code", monospace', fontSize: 15, lineHeight: 2.0 }}>
               <div style={{ color: "rgba(255,255,255,0.4)" }}>$ git push origin main</div>
               <div style={{ color: "#4ade80" }}>✓  Build complete <span style={{ color: "rgba(255,255,255,0.35)" }}>(2.1s)</span></div>
               <div style={{ color: "#60a5fa" }}>→  Deploying to production…</div>
               <div style={{ color: "#4ade80" }}>✓  Live at <span style={{ color: "#f472b6" }}>acme.vercel.app</span> <span style={{ color: "rgba(255,255,255,0.35)" }}>(8.4s)</span></div>
-              <div style={{ color: "rgba(255,255,255,0.25)", marginTop: 4 }}>$ <span style={{ animation: "ace-cursor 0.85s step-end infinite", display: "inline-block", width: 7, height: 12, background: "rgba(255,255,255,0.5)", verticalAlign: "text-bottom", borderRadius: 1 }} /></div>
+              <div style={{ color: "rgba(255,255,255,0.25)", marginTop: 6 }}>$ <span style={{ animation: "ace-cursor 0.85s step-end infinite", display: "inline-block", width: 9, height: 16, background: "rgba(255,255,255,0.5)", verticalAlign: "text-bottom", borderRadius: 1 }} /></div>
             </div>
           </div>
         </div>
       )}
 
       {hdrStyle === "split" && (
-        <div style={{ display: "flex", gap: 28, padding: "32px 28px 0", alignItems: "flex-start", position: "relative", zIndex: 1 }}>
-          <div style={{ flex: "0 0 45%", paddingTop: 8 }}>
-            <div style={{ display: "inline-flex", alignItems: "center", gap: 5, marginBottom: 14 }}>
-              <div style={{ width: 5, height: 5, borderRadius: "50%", background: useAccent }} />
-              <span style={{ fontSize: 9.5, fontWeight: 600, color: useAccent, letterSpacing: "0.1em", textTransform: "uppercase" }}>Public beta</span>
+        <div style={{ display: "flex", gap: 48, padding: "72px 48px 0", alignItems: "flex-start", position: "relative", zIndex: 1 }}>
+          <div style={{ flex: "0 0 45%", paddingTop: 12 }}>
+            <div style={{ display: "inline-flex", alignItems: "center", gap: 7, marginBottom: 20 }}>
+              <div style={{ width: 7, height: 7, borderRadius: "50%", background: useAccent }} />
+              <span style={{ fontSize: 13, fontWeight: 600, color: useAccent, letterSpacing: "0.1em", textTransform: "uppercase" }}>Public beta</span>
             </div>
-            <h1 style={{ fontSize: 40, fontWeight: 900, color: text, lineHeight: 1.05, letterSpacing: "-0.04em", marginBottom: 14 }}>The platform<br />built for scale.</h1>
-            <p style={{ fontSize: 12, color: muted, marginBottom: 22, lineHeight: 1.75 }}>Deploy anywhere. Monitor everything. Sleep soundly.</p>
-            <div style={{ display: "flex", gap: 8 }}>
-              <button style={{ height: 34, padding: "0 18px", borderRadius: 6, fontSize: 10.5, fontWeight: 700, background: text, color: bg, border: "none", cursor: "pointer" }}>Get started</button>
-              <button style={{ height: 34, padding: "0 16px", borderRadius: 6, fontSize: 10.5, border: `1px solid ${border}`, color: muted, background: "none", cursor: "pointer" }}>Docs →</button>
+            <h1 style={{ fontSize: 60, fontWeight: 900, color: text, lineHeight: 1.03, letterSpacing: "-0.045em", marginBottom: 18 }}>The platform<br />built for scale.</h1>
+            <p style={{ fontSize: 17, color: muted, marginBottom: 28, lineHeight: 1.75 }}>Deploy anywhere. Monitor everything. Sleep soundly.</p>
+            <div style={{ display: "flex", gap: 12 }}>
+              <button style={{ height: 50, padding: "0 26px", borderRadius: 8, fontSize: 15, fontWeight: 700, background: text, color: bg, border: "none", cursor: "pointer" }}>Get started</button>
+              <button style={{ height: 50, padding: "0 22px", borderRadius: 8, fontSize: 15, border: `1px solid ${border}`, color: muted, background: "none", cursor: "pointer" }}>Docs →</button>
             </div>
           </div>
           <div style={{ flex: 1, minWidth: 0 }}>
-            <div style={{ borderRadius: 10, overflow: "hidden", border: `1px solid ${border}`, background: "#1e1e1e" }}>
-              <div style={{ height: 22, display: "flex", alignItems: "center", gap: 4, padding: "0 8px", background: "#2a2a2a", borderBottom: "1px solid rgba(255,255,255,0.08)" }}>
-                {["#ff5f56","#ffbd2e","#27c93f"].map((c, i) => <div key={i} style={{ width: 6, height: 6, borderRadius: "50%", background: c }} />)}
+            <div style={{ borderRadius: 14, overflow: "hidden", border: `1px solid ${border}`, background: "#1e1e1e" }}>
+              <div style={{ height: 34, display: "flex", alignItems: "center", gap: 6, padding: "0 14px", background: "#2a2a2a", borderBottom: "1px solid rgba(255,255,255,0.08)" }}>
+                {["#ff5f56","#ffbd2e","#27c93f"].map((c, i) => <div key={i} style={{ width: 9, height: 9, borderRadius: "50%", background: c }} />)}
               </div>
-              <div style={{ padding: "12px 14px", fontFamily: '"JetBrains Mono", monospace', fontSize: 9.5, lineHeight: 1.9 }}>
+              <div style={{ padding: "20px 24px", fontFamily: '"JetBrains Mono", monospace', fontSize: 14, lineHeight: 2.0 }}>
                 <div style={{ color: "rgba(255,255,255,0.4)" }}>$ git push origin main</div>
                 <div style={{ color: "#4ade80" }}>✓  Build complete (2.1s)</div>
                 <div style={{ color: "#60a5fa" }}>→  Deploying to prod…</div>
@@ -1129,35 +1129,35 @@ export function MarketingTailwind({ themeColor, config }: { themeColor?: ThemeCo
       )}
 
       {hdrStyle === "centered" && (
-        <div style={{ padding: "44px 28px 0", textAlign: "center", position: "relative", zIndex: 1 }}>
-          <h1 style={{ fontSize: 56, fontWeight: 900, color: text, lineHeight: 1.0, letterSpacing: "-0.045em", marginBottom: 14 }}>
+        <div style={{ padding: "80px 48px 0", textAlign: "center", position: "relative", zIndex: 1 }}>
+          <h1 style={{ fontSize: 80, fontWeight: 900, color: text, lineHeight: 0.96, letterSpacing: "-0.05em", marginBottom: 20 }}>
             The platform<br />built for scale.
           </h1>
-          <p style={{ fontSize: 13, color: muted, maxWidth: 400, margin: "0 auto 24px", lineHeight: 1.75 }}>Everything your team needs.</p>
-          <button style={{ height: 36, padding: "0 22px", borderRadius: 6, fontSize: 11, fontWeight: 700, background: text, color: bg, border: "none", cursor: "pointer" }}>Get started free →</button>
+          <p style={{ fontSize: 18, color: muted, maxWidth: 480, margin: "0 auto 32px", lineHeight: 1.75 }}>Everything your team needs.</p>
+          <button style={{ height: 52, padding: "0 32px", borderRadius: 8, fontSize: 16, fontWeight: 700, background: text, color: bg, border: "none", cursor: "pointer" }}>Get started free →</button>
         </div>
       )}
 
       {/* Sections */}
       {comps.includes("badge") && (
-        <div style={{ padding: "14px 28px 0", position: "relative", zIndex: 1 }}>
-          <span style={{ display: "inline-block", padding: "3px 10px", borderRadius: 4, fontSize: 9.5, background: `${useAccent}12`, color: useAccent, fontWeight: 600 }}>→ v2.0 released — see what&apos;s new</span>
+        <div style={{ padding: "20px 48px 0", position: "relative", zIndex: 1 }}>
+          <span style={{ display: "inline-block", padding: "6px 16px", borderRadius: 6, fontSize: 14, background: `${useAccent}12`, color: useAccent, fontWeight: 600 }}>→ v2.0 released — see what is new</span>
         </div>
       )}
 
       {comps.includes("logos") && (
-        <div style={{ padding: "18px 28px", display: "flex", alignItems: "center", gap: 20, borderTop: `1px solid ${border}`, borderBottom: `1px solid ${border}`, background: card, position: "relative", zIndex: 1, marginTop: 28 }}>
-          <span style={{ fontSize: 9, color: muted, flexShrink: 0 }}>Trusted by</span>
+        <div style={{ padding: "24px 48px", display: "flex", alignItems: "center", gap: 28, borderTop: `1px solid ${border}`, borderBottom: `1px solid ${border}`, background: card, position: "relative", zIndex: 1, marginTop: 48 }}>
+          <span style={{ fontSize: 13, color: muted, flexShrink: 0 }}>Trusted by</span>
           {["Vercel","Stripe","Linear","Notion","Supabase","Raycast"].map(b => (
-            <span key={b} style={{ fontSize: 9.5, fontWeight: 800, color: muted, opacity: 0.4, whiteSpace: "nowrap" }}>{b}</span>
+            <span key={b} style={{ fontSize: 14, fontWeight: 800, color: muted, opacity: 0.4, whiteSpace: "nowrap" }}>{b}</span>
           ))}
         </div>
       )}
 
       {comps.includes("features") && (
-        <div style={{ padding: "32px 28px", position: "relative", zIndex: 1 }}>
-          <h2 style={{ fontSize: 24, fontWeight: 900, color: text, letterSpacing: "-0.02em", marginBottom: 20 }}>Everything you need.</h2>
-          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
+        <div style={{ padding: "80px 48px", position: "relative", zIndex: 1 }}>
+          <h2 style={{ fontSize: 36, fontWeight: 900, color: text, letterSpacing: "-0.02em", marginBottom: 32 }}>Everything you need.</h2>
+          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
             {[
               { icon: "bolt",   title: "99.9% uptime SLA",     desc: "We guarantee it. Backed by automatic service credits." },
               { icon: "shield", title: "SOC 2 compliant",       desc: "Enterprise-grade security, privacy by default." },
@@ -1166,13 +1166,13 @@ export function MarketingTailwind({ themeColor, config }: { themeColor?: ThemeCo
               { icon: "code",   title: "Any stack",             desc: "Node, Python, Go, Rust, Ruby — we deploy everything." },
               { icon: "layers", title: "Instant rollbacks",     desc: "One click to revert. Zero-downtime deployments." },
             ].map(f => (
-              <div key={f.title} style={{ display: "flex", gap: 12, padding: "12px 14px", borderRadius: 9, background: card, border: `1px solid ${border}` }}>
-                <div style={{ width: 30, height: 30, borderRadius: 7, background: border, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
-                  <Ico d={ICO[f.icon as keyof typeof ICO]} color={text} size={14} />
+              <div key={f.title} style={{ display: "flex", gap: 18, padding: "20px 22px", borderRadius: 12, background: card, border: `1px solid ${border}` }}>
+                <div style={{ width: 42, height: 42, borderRadius: 10, background: border, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
+                  <Ico d={ICO[f.icon as keyof typeof ICO]} color={text} size={20} />
                 </div>
                 <div>
-                  <p style={{ fontSize: 10.5, fontWeight: 700, color: text, marginBottom: 3 }}>{f.title}</p>
-                  <p style={{ fontSize: 9.5, color: muted, lineHeight: 1.6 }}>{f.desc}</p>
+                  <p style={{ fontSize: 16, fontWeight: 700, color: text, marginBottom: 5 }}>{f.title}</p>
+                  <p style={{ fontSize: 14, color: muted, lineHeight: 1.7 }}>{f.desc}</p>
                 </div>
               </div>
             ))}
@@ -1181,12 +1181,12 @@ export function MarketingTailwind({ themeColor, config }: { themeColor?: ThemeCo
       )}
 
       {comps.includes("stats") && (
-        <div style={{ padding: "0 28px 28px", position: "relative", zIndex: 1 }}>
-          <div style={{ display: "flex", borderRadius: 10, overflow: "hidden", border: `1px solid ${border}` }}>
+        <div style={{ padding: "0 48px 80px", position: "relative", zIndex: 1 }}>
+          <div style={{ display: "flex", borderRadius: 14, overflow: "hidden", border: `1px solid ${border}` }}>
             {[["50k+","Teams"],["99.9%","Uptime"],["10ms","Latency"],["$0","To start"]].map(([v,l], i) => (
-              <div key={l} style={{ flex: 1, textAlign: "center", padding: "18px 8px", borderRight: i < 3 ? `1px solid ${border}` : "none", background: i % 2 === 0 ? card : bg }}>
-                <p style={{ fontSize: 24, fontWeight: 900, color: text, letterSpacing: "-0.03em", lineHeight: 1.1 }}>{v}</p>
-                <p style={{ fontSize: 9, color: muted, marginTop: 3 }}>{l}</p>
+              <div key={l} style={{ flex: 1, textAlign: "center", padding: "28px 12px", borderRight: i < 3 ? `1px solid ${border}` : "none", background: i % 2 === 0 ? card : bg }}>
+                <p style={{ fontSize: 36, fontWeight: 900, color: text, letterSpacing: "-0.03em", lineHeight: 1.1 }}>{v}</p>
+                <p style={{ fontSize: 13, color: muted, marginTop: 5 }}>{l}</p>
               </div>
             ))}
           </div>
@@ -1194,18 +1194,18 @@ export function MarketingTailwind({ themeColor, config }: { themeColor?: ThemeCo
       )}
 
       {comps.includes("testimonials") && (
-        <div style={{ padding: "0 28px 28px", position: "relative", zIndex: 1 }}>
-          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
+        <div style={{ padding: "0 48px 80px", position: "relative", zIndex: 1 }}>
+          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
             {[
               { q: "\"Shipped 3× faster since switching. Zero regrets.\"", name: "Sarah K.", role: "CTO" },
               { q: "\"Cut infra costs by 40% in our first month.\"", name: "James R.", role: "Eng Lead" },
             ].map(t => (
-              <div key={t.name} style={{ padding: "16px 18px", borderRadius: 9, background: card, border: `1px solid ${border}` }}>
-                <div style={{ display: "flex", gap: 2, marginBottom: 10 }}>
-                  {Array(5).fill(0).map((_, i) => <span key={i} style={{ color: "#f59e0b", fontSize: 11 }}>★</span>)}
+              <div key={t.name} style={{ padding: "24px 26px", borderRadius: 14, background: card, border: `1px solid ${border}` }}>
+                <div style={{ display: "flex", gap: 3, marginBottom: 14 }}>
+                  {Array(5).fill(0).map((_, i) => <span key={i} style={{ color: "#f59e0b", fontSize: 16 }}>★</span>)}
                 </div>
-                <p style={{ fontSize: 11, color: text, marginBottom: 10, lineHeight: 1.65, fontStyle: "italic" }}>{t.q}</p>
-                <p style={{ fontSize: 9.5, fontWeight: 700, color: text }}>{t.name} <span style={{ fontWeight: 400, color: muted }}>· {t.role}</span></p>
+                <p style={{ fontSize: 16, color: text, marginBottom: 14, lineHeight: 1.7, fontStyle: "italic" }}>{t.q}</p>
+                <p style={{ fontSize: 14, fontWeight: 700, color: text }}>{t.name} <span style={{ fontWeight: 400, color: muted }}>· {t.role}</span></p>
               </div>
             ))}
           </div>
@@ -1213,25 +1213,25 @@ export function MarketingTailwind({ themeColor, config }: { themeColor?: ThemeCo
       )}
 
       {comps.includes("pricing") && (
-        <div style={{ padding: "0 28px 28px", position: "relative", zIndex: 1 }}>
-          <h2 style={{ fontSize: 22, fontWeight: 900, color: text, letterSpacing: "-0.02em", marginBottom: 16 }}>Simple pricing.</h2>
-          <div style={{ display: "flex", gap: 10 }}>
+        <div style={{ padding: "0 48px 80px", position: "relative", zIndex: 1 }}>
+          <h2 style={{ fontSize: 36, fontWeight: 900, color: text, letterSpacing: "-0.02em", marginBottom: 28 }}>Simple pricing.</h2>
+          <div style={{ display: "flex", gap: 16 }}>
             {[
               { plan: "Starter", price: "Free",   period: "forever",  hi: false, features: ["5 projects","100 deploys/mo","Community support"] },
               { plan: "Pro",     price: "$29",     period: "/month",   hi: true,  features: ["Unlimited projects","Unlimited deploys","Priority support","Custom domains","Team members"] },
               { plan: "Enterprise", price: "Custom", period: "",       hi: false, features: ["Everything in Pro","SLA guarantee","SSO/SAML","Dedicated support"] },
             ].map(pl => (
-              <div key={pl.plan} style={{ flex: 1, padding: "18px 16px", borderRadius: 10, background: pl.hi ? text : card, border: `1px solid ${pl.hi ? "transparent" : border}` }}>
-                <p style={{ fontSize: 9.5, fontWeight: 600, color: pl.hi ? bg : muted, marginBottom: 4 }}>{pl.plan}</p>
-                <p style={{ fontSize: 26, fontWeight: 900, color: pl.hi ? bg : text, letterSpacing: "-0.03em", lineHeight: 1.1 }}>{pl.price}</p>
-                <p style={{ fontSize: 9, color: pl.hi ? `${bg}88` : muted, marginBottom: 14 }}>{pl.period}</p>
-                <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+              <div key={pl.plan} style={{ flex: 1, padding: "28px 26px", borderRadius: 16, background: pl.hi ? text : card, border: `1px solid ${pl.hi ? "transparent" : border}` }}>
+                <p style={{ fontSize: 14, fontWeight: 600, color: pl.hi ? bg : muted, marginBottom: 6 }}>{pl.plan}</p>
+                <p style={{ fontSize: 42, fontWeight: 900, color: pl.hi ? bg : text, letterSpacing: "-0.03em", lineHeight: 1.1 }}>{pl.price}</p>
+                <p style={{ fontSize: 13, color: pl.hi ? `${bg}88` : muted, marginBottom: 22 }}>{pl.period}</p>
+                <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
                   {pl.features.map(f => (
-                    <div key={f} style={{ display: "flex", alignItems: "center", gap: 7 }}>
-                      <svg viewBox="0 0 10 10" fill="none" style={{ width: 10, height: 10, flexShrink: 0 }}>
+                    <div key={f} style={{ display: "flex", alignItems: "center", gap: 10 }}>
+                      <svg viewBox="0 0 10 10" fill="none" style={{ width: 12, height: 12, flexShrink: 0 }}>
                         <path d="M2 5l2 2 4-4" stroke={pl.hi ? bg : text} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                       </svg>
-                      <span style={{ fontSize: 9.5, color: pl.hi ? `${bg}cc` : muted }}>{f}</span>
+                      <span style={{ fontSize: 14, color: pl.hi ? `${bg}cc` : muted }}>{f}</span>
                     </div>
                   ))}
                 </div>
@@ -1242,29 +1242,29 @@ export function MarketingTailwind({ themeColor, config }: { themeColor?: ThemeCo
       )}
 
       {comps.includes("faq") && (
-        <div style={{ padding: "0 28px 28px", position: "relative", zIndex: 1 }}>
-          <h2 style={{ fontSize: 20, fontWeight: 900, color: text, letterSpacing: "-0.02em", marginBottom: 14 }}>FAQ</h2>
+        <div style={{ padding: "0 48px 80px", position: "relative", zIndex: 1 }}>
+          <h2 style={{ fontSize: 32, fontWeight: 900, color: text, letterSpacing: "-0.02em", marginBottom: 22 }}>FAQ</h2>
           {[
             ["What's included in free?","5 projects, 100 deploys/month, community support, and basic analytics."],
             ["Can I upgrade anytime?","Yes. Changes are immediate. We prorate everything automatically."],
             ["Do you offer team plans?","Yes — add members and manage billing centrally on any paid plan."],
           ].map(([q, a], i) => (
-            <div key={q} style={{ padding: "14px 0", borderBottom: `1px solid ${border}` }}>
+            <div key={q} style={{ padding: "20px 0", borderBottom: `1px solid ${border}` }}>
               <div style={{ display: "flex", justifyContent: "space-between" }}>
-                <p style={{ fontSize: 11, fontWeight: 600, color: text }}>{q}</p>
-                <span style={{ fontSize: 16, color: muted }}>{i === 0 ? "−" : "+"}</span>
+                <p style={{ fontSize: 16, fontWeight: 600, color: text }}>{q}</p>
+                <span style={{ fontSize: 22, color: muted }}>{i === 0 ? "−" : "+"}</span>
               </div>
-              {i === 0 && <p style={{ fontSize: 10.5, color: muted, marginTop: 8, lineHeight: 1.7 }}>{a}</p>}
+              {i === 0 && <p style={{ fontSize: 15, color: muted, marginTop: 12, lineHeight: 1.75 }}>{a}</p>}
             </div>
           ))}
         </div>
       )}
 
       {comps.includes("cta") && (
-        <div style={{ margin: "0 28px 36px", padding: "26px 24px", borderRadius: 10, background: text, textAlign: "center", position: "relative", zIndex: 1 }}>
-          <h2 style={{ fontSize: 26, fontWeight: 900, color: bg, letterSpacing: "-0.02em", marginBottom: 6 }}>Ready to ship faster?</h2>
-          <p style={{ fontSize: 11, color: isDark ? "#6b7280" : "#9ca3af", marginBottom: 20 }}>Join 50,000+ teams already building on Acme. Free forever.</p>
-          <button style={{ height: 36, padding: "0 22px", borderRadius: 6, fontSize: 11, fontWeight: 700, background: bg, color: text, border: "none", cursor: "pointer" }}>Get started free →</button>
+        <div style={{ margin: "0 48px 80px", padding: "60px 48px", borderRadius: 16, background: text, textAlign: "center", position: "relative", zIndex: 1 }}>
+          <h2 style={{ fontSize: 42, fontWeight: 900, color: bg, letterSpacing: "-0.02em", marginBottom: 12 }}>Ready to ship faster?</h2>
+          <p style={{ fontSize: 17, color: isDark ? "#6b7280" : "#9ca3af", marginBottom: 28 }}>Join 50,000+ teams already building on Acme. Free forever.</p>
+          <button style={{ height: 52, padding: "0 32px", borderRadius: 8, fontSize: 15, fontWeight: 700, background: bg, color: text, border: "none", cursor: "pointer" }}>Get started free →</button>
         </div>
       )}