diff --git a/apps/docs/app/(home)/page.tsx b/apps/docs/app/(home)/page.tsx
index 11a7fb5c0..df29d4d33 100644
--- a/apps/docs/app/(home)/page.tsx
+++ b/apps/docs/app/(home)/page.tsx
@@ -74,11 +74,11 @@ export default async function HomePage() {
 				</Section>
 
 				<Section
-					className="border-border border-t border-b bg-background/50 py-8 sm:py-10 lg:py-12"
+					className="border-border border-t border-b "
 					customPaddings
 					id="trust"
 				>
-					<div className="mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8">
+					<div className="mx-auto w-full max-w-400 px-4 sm:px-6 lg:px-8">
 						<TrustedBy />
 					</div>
 				</Section>
diff --git a/apps/docs/app/global.css b/apps/docs/app/global.css
index c0f5e568b..bff2d734b 100644
--- a/apps/docs/app/global.css
+++ b/apps/docs/app/global.css
@@ -148,7 +148,7 @@
 }
 
 .dark {
-  --background: #19191D;
+  --background: #27282D;
   --foreground: #E7E8EB;
   --card: #1E1E23;
   --card-foreground: #E7E8EB;
@@ -701,3 +701,38 @@ body {
 .animate-marquee {
   animation: marquee 25s linear infinite;
 }
+
+/* FAQ section hover and open state styles  */
+.accordion-item {
+  position: relative;
+  border-top: 1px solid var(--border);
+  background: color-mix(in oklab, var(--background) 50%, transparent);
+  transition: background 0.2s;
+}
+
+.accordion-item:hover {
+  background: color-mix(in oklab, var(--background) 80%, transparent);
+}
+
+.accordion-item::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  width: 3px;
+  background: linear-gradient(
+    to bottom,
+    #facc15,
+    #ec4899,
+    #6366f1
+  );
+
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+
+.accordion-item:hover::before,
+.accordion-item[data-state="open"]::before {
+  opacity: 1;
+}
\ No newline at end of file
diff --git a/apps/docs/components/footer.tsx b/apps/docs/components/footer.tsx
index 5b9e60912..e99168748 100644
--- a/apps/docs/components/footer.tsx
+++ b/apps/docs/components/footer.tsx
@@ -13,7 +13,7 @@ import { NewsletterForm } from "./newsletter-form";
 export function Footer() {
 	return (
 		<footer className="border-border border-t bg-background/95 backdrop-blur supports-backdrop-filter:bg-background/60">
-			<div className="mx-auto max-w-7xl px-4 pt-10 sm:px-6 lg:px-8">
+			<div className="mx-auto max-w-360 px-4 pt-10 sm:px-6 lg:px-8">
 				{/* CTA Section */}
 				<div className="mb-12 text-center">
 					<h2 className="mb-6 font-medium text-2xl leading-tight sm:text-3xl">
@@ -29,12 +29,12 @@ export function Footer() {
 					</div>
 				</div>
 
-				<div className="mb-10 flex flex-col items-start justify-between gap-4 border border-border bg-card/30 p-5 sm:flex-row sm:items-center sm:p-6">
+				<div className="mb-10 flex flex-col items-start justify-between gap-4 rounded-lg border border-border bg-card/30 p-5 sm:flex-row sm:items-center sm:p-6">
 					<div className="space-y-1">
-						<p className="font-medium text-foreground text-sm">
+						<p className="font-medium text-2xl text-foreground">
 							Get product updates
 						</p>
-						<p className="text-muted-foreground text-xs">
+						<p className="text-base text-muted-foreground">
 							New features, tips, and privacy-first analytics insights. No spam.
 						</p>
 					</div>
diff --git a/apps/docs/components/github-nav-mark.tsx b/apps/docs/components/github-nav-mark.tsx
index 46ea74f5e..73011229a 100644
--- a/apps/docs/components/github-nav-mark.tsx
+++ b/apps/docs/components/github-nav-mark.tsx
@@ -27,7 +27,7 @@ export type GithubStarsBadgeProps = { stars: number };
 export function GithubStarsBadge({ stars }: GithubStarsBadgeProps) {
 	return (
 		<span
-			className="rounded-full border border-border/50 bg-muted/50 px-2.5 py-0.5 font-medium text-foreground/90 text-xs"
+			className="rounded-full px-1 py-1 font-medium text-base text-foreground"
 			title="GitHub stars"
 		>
 			{stars.toLocaleString()} ★
diff --git a/apps/docs/components/landing/backgroundFlow.tsx b/apps/docs/components/landing/backgroundFlow.tsx
new file mode 100644
index 000000000..7daaf5b05
--- /dev/null
+++ b/apps/docs/components/landing/backgroundFlow.tsx
@@ -0,0 +1,158 @@
+const backgroundFlow = () => {
+	return (
+		<div className="pointer-events-none absolute -top-20 right-0 bottom-0 left-0 mx-auto overflow-hidden">
+			<svg
+				className="h-full w-full"
+				fill="none"
+				preserveAspectRatio="none"
+				viewBox="0 0 2215 1865"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				<g filter="url(#filter0_f_163_6)">
+					<path
+						d="M2209.09 140.6C2186.01 292.573 2037.51 644.522 1746.1 748.229C1381.83 877.863 228.596 931.229 250.096 2230.23"
+						stroke="#E3A514"
+						strokeWidth="257"
+					/>
+				</g>
+				<g filter="url(#filter1_f_163_6)">
+					<path
+						d="M2208.74 150.229C2185.66 302.202 1885.24 802.522 1616.74 842.022C368.707 1025.63 335.243 1733.02 356.743 2230.52"
+						stroke="#CD5F20"
+						strokeWidth="194"
+					/>
+				</g>
+				<g filter="url(#filter2_f_163_6)">
+					<path
+						d="M2234.1 143.729C2211.01 295.702 2027.6 797.813 1614.6 911.694C519.948 1213.53 509.096 1756.19 509.096 2228.69"
+						stroke="#B24A7E"
+						strokeWidth="225"
+					/>
+				</g>
+				<g filter="url(#filter3_f_163_6)">
+					<path
+						d="M2261.1 149.229C2237.04 301.202 2199.59 791.522 1895.99 895.229C1660.88 975.538 1132.31 1207.7 1041.67 1264.23C652.019 1507.23 669.209 2035.23 669.209 2230.23"
+						stroke="#714075"
+						strokeWidth="200"
+					/>
+				</g>
+				<g filter="url(#filter4_f_163_6)">
+					<path
+						d="M2286.6 154.729C2263.51 306.702 2190.87 903.816 1899.46 1007.52C1705.38 1076.59 1621.96 1081.7 1317.96 1202.36C794.957 1348.06 781.457 1996.06 794.957 2228.06"
+						stroke="#483C7B"
+						strokeWidth="166"
+					/>
+				</g>
+				<defs>
+					<filter
+						colorInterpolationFilters="sRGB"
+						filterUnits="userSpaceOnUse"
+						height="2353.66"
+						id="filter0_f_163_6"
+						width="2457.44"
+						x="4.57764e-05"
+						y="1.52588e-05"
+					>
+						<feFlood floodOpacity="0" result="BackgroundImageFix" />
+						<feBlend
+							in="SourceGraphic"
+							in2="BackgroundImageFix"
+							mode="normal"
+							result="shape"
+						/>
+						<feGaussianBlur
+							result="effect1_foregroundBlur_163_6"
+							stdDeviation="60.65"
+						/>
+					</filter>
+					<filter
+						colorInterpolationFilters="sRGB"
+						filterUnits="userSpaceOnUse"
+						height="2341.65"
+						id="filter1_f_163_6"
+						width="2291.19"
+						x="134.752"
+						y="14.3603"
+					>
+						<feFlood floodOpacity="0" result="BackgroundImageFix" />
+						<feBlend
+							in="SourceGraphic"
+							in2="BackgroundImageFix"
+							mode="normal"
+							result="shape"
+						/>
+						<feGaussianBlur
+							result="effect1_foregroundBlur_163_6"
+							stdDeviation="60.65"
+						/>
+					</filter>
+					<filter
+						colorInterpolationFilters="sRGB"
+						filterUnits="userSpaceOnUse"
+						height="2344.46"
+						id="filter2_f_163_6"
+						width="2191.32"
+						x="275.296"
+						y="5.53233"
+					>
+						<feFlood floodOpacity="0" result="BackgroundImageFix" />
+						<feBlend
+							in="SourceGraphic"
+							in2="BackgroundImageFix"
+							mode="normal"
+							result="shape"
+						/>
+						<feGaussianBlur
+							result="effect1_foregroundBlur_163_6"
+							stdDeviation="60.65"
+						/>
+					</filter>
+					<filter
+						colorInterpolationFilters="sRGB"
+						filterUnits="userSpaceOnUse"
+						height="2339.23"
+						id="filter3_f_163_6"
+						width="2033.39"
+						x="447.775"
+						y="12.2962"
+					>
+						<feFlood floodOpacity="0" result="BackgroundImageFix" />
+						<feBlend
+							in="SourceGraphic"
+							in2="BackgroundImageFix"
+							mode="normal"
+							result="shape"
+						/>
+						<feGaussianBlur
+							result="effect1_foregroundBlur_163_6"
+							stdDeviation="60.65"
+						/>
+					</filter>
+					<filter
+						colorInterpolationFilters="sRGB"
+						filterUnits="userSpaceOnUse"
+						height="2333.22"
+						id="filter4_f_163_6"
+						width="1902.16"
+						x="587.793"
+						y="20.963"
+					>
+						<feFlood floodOpacity="0" result="BackgroundImageFix" />
+						<feBlend
+							in="SourceGraphic"
+							in2="BackgroundImageFix"
+							mode="normal"
+							result="shape"
+						/>
+						<feGaussianBlur
+							result="effect1_foregroundBlur_163_6"
+							stdDeviation="60.65"
+						/>
+					</filter>
+				</defs>
+			</svg>
+		</div>
+	);
+};
+
+export default backgroundFlow;
diff --git a/apps/docs/components/landing/faq-section.tsx b/apps/docs/components/landing/faq-section.tsx
index b57445b48..524fb87f0 100644
--- a/apps/docs/components/landing/faq-section.tsx
+++ b/apps/docs/components/landing/faq-section.tsx
@@ -27,39 +27,38 @@ export function FaqSection({
 	className,
 }: FaqSectionProps) {
 	return (
-		<div className={cn("mx-auto w-full max-w-3xl", className)}>
-			<div
-				className={cn(
-					"mb-8 text-center sm:mb-10",
-					subtitle ? "space-y-2" : undefined
-				)}
-			>
-				<h2 className="text-balance font-semibold text-2xl tracking-tight sm:text-3xl">
-					{title}
-				</h2>
-				{subtitle ? (
-					<p className="text-pretty text-muted-foreground text-sm sm:text-base">
-						{subtitle}
-					</p>
-				) : null}
-			</div>
+		<div className={cn("mx-auto w-full max-w-5xl", className)}>
+			<div className="flex flex-col gap-10 sm:flex-row sm:gap-16">
+				{/* Left: sticky title block */}
+				<div className="sm:sticky sm:top-8 sm:w-64 sm:shrink-0 sm:self-start">
+					<h2 className="text-balance font-semibold text-2xl tracking-tight sm:text-4xl">
+						{title}
+					</h2>
+					{subtitle ? (
+						<p className="mt-2 text-pretty text-muted-foreground text-sm sm:text-base">
+							{subtitle}
+						</p>
+					) : null}
+				</div>
 
-			<Accordion className="w-full" collapsible type="single">
-				{items.map((faq) => (
-					<AccordionItem
-						className="border-l-4 border-l-transparent bg-background/50 duration-200 hover:border-l-primary/20 hover:bg-background/80"
-						key={faq.question}
-						value={faq.question}
-					>
-						<AccordionTrigger className="px-5 py-4 text-left font-normal text-sm hover:no-underline sm:px-6 sm:py-5 sm:text-base">
-							{faq.question}
-						</AccordionTrigger>
-						<AccordionContent className="px-5 pb-4 text-muted-foreground text-sm leading-relaxed sm:px-6 sm:pb-5">
-							{faq.answer}
-						</AccordionContent>
-					</AccordionItem>
-				))}
-			</Accordion>
+				{/* Right: accordion */}
+				<Accordion className="w-full min-w-0" collapsible type="single">
+					{items.map((faq) => (
+						<AccordionItem
+							className="accordion-item"
+							key={faq.question}
+							value={faq.question}
+						>
+							<AccordionTrigger className="px-5 py-4 text-left font-normal text-sm hover:no-underline sm:px-6 sm:py-5 sm:text-base">
+								{faq.question}
+							</AccordionTrigger>
+							<AccordionContent className="px-5 pb-4 text-muted-foreground text-sm leading-relaxed sm:px-6 sm:pb-5">
+								{faq.answer}
+							</AccordionContent>
+						</AccordionItem>
+					))}
+				</Accordion>
+			</div>
 		</div>
 	);
 }
diff --git a/apps/docs/components/landing/hero.tsx b/apps/docs/components/landing/hero.tsx
index 06aafc218..a12b2e75a 100644
--- a/apps/docs/components/landing/hero.tsx
+++ b/apps/docs/components/landing/hero.tsx
@@ -1,17 +1,12 @@
 "use client";
 
 import { ArrowsOutSimpleIcon } from "@phosphor-icons/react";
+import { motion } from "motion/react";
 import Link from "next/link";
 import { useEffect, useRef, useState } from "react";
-import {
-	Tooltip,
-	TooltipContent,
-	TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { formatLocaleNumber } from "@/lib/format-locale-number";
 import { cn } from "@/lib/utils";
+import BackgroundFlow from "./backgroundFlow";
 import { SciFiButton } from "./scifi-btn";
-import { Spotlight } from "./spotlight";
 
 const tabs = [
 	{ id: "overview", label: "Overview", path: "" },
@@ -87,106 +82,49 @@ export default function Hero({
 	};
 
 	return (
-		<section className="relative flex w-full flex-col items-center overflow-hidden">
-			<Spotlight transform="translateX(-60%) translateY(-50%)" />
-
-			<div className="mx-auto w-full max-w-7xl px-4 pt-16 pb-8 sm:px-6 sm:pt-20 lg:px-8 lg:pt-24">
-				<div className="mx-auto flex max-w-4xl flex-col items-center space-y-8 text-center">
-					<h1 className="text-balance font-bold text-4xl leading-[1.1] tracking-tight sm:text-5xl md:text-6xl lg:text-7xl">
-						Privacy-first analytics.{" "}
-						<span className="text-muted-foreground">
-							One script,{" "}
-							<Tooltip>
-								<TooltipTrigger asChild>
-									<button
-										className="cursor-help border-0 bg-transparent p-0 font-inherit text-inherit underline decoration-muted-foreground/70 decoration-dotted underline-offset-[0.15em] hover:decoration-foreground/60"
-										type="button"
-									>
-										no cookies,
-									</button>
-								</TooltipTrigger>
-								<TooltipContent
-									className="max-w-72 text-pretty text-left text-xs leading-relaxed sm:max-w-sm"
-									side="bottom"
-									sideOffset={8}
-								>
-									<span className="block">
-										Cookieless by design. No fingerprints, no consent banner.
-										B2B research on 1.2M+ interactions found 68.9% of cookie
-										banners closed or ignored.{" "}
-										<a
-											className="font-medium underline underline-offset-2 hover:text-primary-foreground/90"
-											href="https://www.advance-metrics.com/en/blog/cookie-behaviour-study/"
-											rel="noopener noreferrer"
-											target="_blank"
-										>
-											Advance Metrics
-										</a>
-									</span>
-								</TooltipContent>
-							</Tooltip>
-							no consent banners.
-						</span>
-					</h1>
-
-					<p className="max-w-2xl text-pretty font-medium text-muted-foreground text-sm leading-relaxed sm:text-base lg:text-lg">
+		<section className="relative mx-auto flex w-full max-w-400 flex-col items-center overflow-hidden">
+			{/* <Spotlight transform="translateX(-60%) translateY(-50%)" /> */}
+			<BackgroundFlow />
+			<div className="mx-auto w-full max-w-400 px-4 pt-26 pb-8 sm:px-14 sm:pt-20 lg:px-20 lg:pt-38">
+				<div className="mx-auto flex max-w-360 flex-col items-start space-y-2 text-left">
+					<motion.h1
+						animate={{ opacity: 1, y: 0 }}
+						className="z-10 text-balance font-semibold text-3xl sm:text-5xl md:text-6xl"
+						initial={{ opacity: 0, y: 20 }}
+						transition={{ duration: 0.4, delay: 0 }}
+					>
+						Privacy-first analytics. One script, no cookies, no consent banners.
+					</motion.h1>
+
+					<motion.p
+						animate={{ opacity: 1, y: 0 }}
+						className="z-10 max-w-2xl text-muted-foreground text-sm sm:text-base lg:text-lg"
+						initial={{ opacity: 0, y: 20 }}
+						transition={{ duration: 0.4, delay: 0.15 }}
+					>
 						Web analytics, error tracking, and feature flags in a single script
-						under 30 KB. GDPR compliant out of the box.{" "}
-						<Link
-							className="text-foreground"
-							href="https://github.com/databuddy-analytics/databuddy"
-							rel="noopener noreferrer"
-							target="_blank"
-						>
-							Open source
-						</Link>
-						.
-					</p>
-
-					<p className="max-w-2xl text-pretty text-muted-foreground text-xs leading-relaxed sm:text-sm">
-						<a
-							className="underline underline-offset-2 hover:text-foreground"
-							href="https://www.advance-metrics.com/en/blog/cookie-behaviour-study/"
-							rel="noopener noreferrer"
-							target="_blank"
-						>
-							Advance Metrics
-						</a>{" "}
-						on real-world banner behavior.{" "}
-						<Link
-							className="underline underline-offset-2 hover:text-foreground"
-							href="/calculator"
-						>
-							Model the opportunity cost
-						</Link>{" "}
-						for your traffic.
-					</p>
-
-					<div className="flex items-center gap-3">
-						<SciFiButton asChild className="px-6 py-5 text-base sm:px-8">
+						under 30 KB. GDPR compliant out of the box.
+					</motion.p>
+
+					<motion.div
+						animate={{ opacity: 1, y: 0 }}
+						className="flex items-center gap-3 pt-2"
+						initial={{ opacity: 0, y: 20 }}
+						transition={{ duration: 0.4, delay: 0.3 }}
+					>
+						<SciFiButton asChild className="px-6 py-5">
 							<a href="https://app.databuddy.cc/login">Start free</a>
 						</SciFiButton>
-						<SciFiButton asChild className="px-6 py-5 text-base sm:px-8">
+
+						<SciFiButton asChild className="px-6 py-5">
 							<Link href="/demo">Live demo</Link>
 						</SciFiButton>
-					</div>
-
-					<p className="flex flex-wrap items-center justify-center gap-x-4 gap-y-1 text-muted-foreground text-sm">
-						<span>Used by 400+ teams</span>
-						<span className="text-border">·</span>
-						{stars ? (
-							<>
-								<span>{formatLocaleNumber(stars)} GitHub stars</span>
-								<span className="text-border">·</span>
-							</>
-						) : null}
-						<span>Open source</span>
-					</p>
+					</motion.div>
 				</div>
 
-				<div className="mt-8 space-y-8">
+				<div className="z-10 mt-5 space-y-0">
 					<div className="flex justify-center">
-						<div className="relative flex items-center gap-0 border-border border-b">
+						<div className="relative flex items-center gap-0 rounded-t-lg border-border border-b bg-background">
 							{tabs.map((tab) => {
 								const isActive = activeTab === tab.id;
 								return (
@@ -211,61 +149,68 @@ export default function Hero({
 						</div>
 					</div>
 
-					<div className="group relative rounded border border-border/50 bg-card/30 p-1.5 shadow-2xl backdrop-blur-sm sm:p-2">
-						<div className="relative min-h-[400px] overflow-hidden rounded bg-muted sm:min-h-[500px] lg:min-h-[600px]">
-							{tabs.map((tab) => {
-								const isActive = activeTab === tab.id;
-								const src = loadedTabIds.has(tab.id)
-									? `${demoEmbedBaseUrl}${tab.path}?embed=true`
-									: "about:blank";
-								return (
-									<iframe
-										allowFullScreen
-										aria-hidden={!isActive}
-										className={cn(
-											"h-[400px] w-full rounded border-0 bg-muted shadow-inner sm:h-[500px] lg:h-[600px]",
-											isActive
-												? "relative z-10"
-												: "pointer-events-none absolute inset-0 z-0 opacity-0"
-										)}
-										key={tab.id}
-										onLoad={(e) => {
-											const url = e.currentTarget.src;
-											if (url.includes("embed=true")) {
-												markEmbedReady(tab.id);
-											}
-										}}
-										ref={(el) => {
-											iframeRefs.current[tab.id] = el;
-										}}
-										src={src}
-										tabIndex={isActive ? 0 : -1}
-										title={`Databuddy ${tab.label} Demo`}
-									/>
-								);
-							})}
-							<div
-								aria-hidden
-								className={cn(
-									"pointer-events-none absolute inset-0 z-20 rounded bg-muted transition-opacity duration-200",
-									loadedTabIds.has(activeTab) && !embedReady.has(activeTab)
-										? "opacity-100"
-										: "opacity-0"
-								)}
-							/>
-						</div>
-
-						<button
-							aria-label="Open demo in fullscreen"
-							className="absolute inset-1.5 flex items-center justify-center rounded bg-background/10 opacity-0 transition-opacity duration-300 group-hover:opacity-100 sm:inset-2"
-							onClick={handleFullscreen}
-							type="button"
-						>
-							<div className="flex cursor-pointer items-center gap-2 rounded border border-border bg-card/90 px-4 py-2 font-medium text-sm shadow-lg backdrop-blur-sm transition-colors duration-200 hover:bg-card">
-								<ArrowsOutSimpleIcon className="size-4" weight="fill" />
-								<span>Click to view fullscreen</span>
+					<div className="relative">
+						<img
+							alt=""
+							className="pointer-events-none absolute right-0 bottom-full z-30 mb-0 hidden w-40 max-w-[min(100%,10rem)] md:right-0 lg:right-20 lg:block"
+							src="/brand/bunny/off-black.svg"
+						/>
+						<div className="group relative rounded-sm border border-border/50 bg-card p-1.5 shadow-2xl backdrop-blur-sm sm:p-2">
+							<div className="relative min-h-[400px] overflow-hidden rounded bg-muted sm:min-h-[500px] lg:min-h-[600px]">
+								{tabs.map((tab) => {
+									const isActive = activeTab === tab.id;
+									const src = loadedTabIds.has(tab.id)
+										? `${demoEmbedBaseUrl}${tab.path}?embed=true`
+										: "about:blank";
+									return (
+										<iframe
+											allowFullScreen
+											aria-hidden={!isActive}
+											className={cn(
+												"h-[400px] w-full rounded border-0 bg-muted shadow-inner sm:h-[500px] lg:h-[600px]",
+												isActive
+													? "relative z-10"
+													: "pointer-events-none absolute inset-0 z-0 opacity-0"
+											)}
+											key={tab.id}
+											onLoad={(e) => {
+												const url = e.currentTarget.src;
+												if (url.includes("embed=true")) {
+													markEmbedReady(tab.id);
+												}
+											}}
+											ref={(el) => {
+												iframeRefs.current[tab.id] = el;
+											}}
+											src={src}
+											tabIndex={isActive ? 0 : -1}
+											title={`Databuddy ${tab.label} Demo`}
+										/>
+									);
+								})}
+								<div
+									aria-hidden
+									className={cn(
+										"pointer-events-none absolute inset-0 z-20 rounded bg-muted transition-opacity duration-200",
+										loadedTabIds.has(activeTab) && !embedReady.has(activeTab)
+											? "opacity-100"
+											: "opacity-0"
+									)}
+								/>
 							</div>
-						</button>
+
+							<button
+								aria-label="Open demo in fullscreen"
+								className="absolute inset-1.5 flex items-center justify-center rounded bg-background/10 opacity-0 transition-opacity duration-300 group-hover:opacity-100 sm:inset-2"
+								onClick={handleFullscreen}
+								type="button"
+							>
+								<div className="flex cursor-pointer items-center gap-2 rounded border border-border bg-card/90 px-4 py-2 font-medium text-sm shadow-lg backdrop-blur-sm transition-colors duration-200 hover:bg-card">
+									<ArrowsOutSimpleIcon className="size-4" weight="fill" />
+									<span>Click to view fullscreen</span>
+								</div>
+							</button>
+						</div>
 					</div>
 				</div>
 			</div>
diff --git a/apps/docs/components/landing/trusted-by.tsx b/apps/docs/components/landing/trusted-by.tsx
index 3f778d0a4..60ee2ef43 100644
--- a/apps/docs/components/landing/trusted-by.tsx
+++ b/apps/docs/components/landing/trusted-by.tsx
@@ -1,9 +1,6 @@
-"use client";
-
 import Image from "next/image";
-import { cn } from "@/lib/utils";
 
-const industryLeaders = [
+const juneCustomers = [
 	{
 		name: "Open (YC W24)",
 		url: "https://open.cx",
@@ -47,81 +44,158 @@ const industryLeaders = [
 	},
 ];
 
-// const engineerCompanies = [{ name: "Vercel" }, { name: "Mintlify" }];
+const analyticsMigrators = [
+	{
+		name: "Open (YC W24)",
+		url: "https://open.cx",
+		logo: "/social/opencx-black.svg",
+		invert: true,
+		description: "AI-Powered customer support platform",
+	},
+	{
+		name: "Autumn (S25)",
+		url: "https://useautumn.com",
+		logo: "/social/autumn.svg",
+		logoClass: "h-8 sm:h-10",
+		invert: false,
+		description: "Monetization infrastructure for developers",
+	},
+	{
+		name: "Better Auth (YC X25)",
+		url: "https://www.better-auth.com",
+		logo: "/social/better-auth.svg",
+		invert: true,
+		description: "The #1 Authentication framework for TypeScript",
+	},
+	{
+		name: "OpenCut",
+		url: "https://opencut.app",
+		logo: "/social/opencut.svg",
+		invert: true,
+		description: "Open source video editor",
+	},
+	{
+		name: "Maza",
+		url: "https://maza.vc",
+		logo: "/social/maza.svg",
+		description: "Venture Capital Fund",
+	},
+	{
+		name: "Figurable",
+		url: "https://figurable.ai",
+		logo: "/social/figurable.svg",
+		invert: true,
+	},
+];
 
-function MarqueeItem({ company }: { company: (typeof industryLeaders)[0] }) {
-	return (
-		<a
-			className="group/item relative flex shrink-0 items-center justify-center px-8 opacity-60 transition-opacity duration-200 hover:opacity-100 sm:px-12"
-			href={`${company.url}?utm_source=databuddy&utm_medium=referral`}
-			rel="noopener"
-			target="_blank"
-		>
-			<Image
-				alt={company.name}
-				className={cn(
-					"h-6 w-auto sm:h-8",
-					company.logoClass,
-					company.invert && "dark:invert"
-				)}
-				height={32}
-				src={company.logo}
-				width={120}
-			/>
-			{company.description && (
-				<span className="absolute top-full left-1/2 mt-1 -translate-x-1/2 whitespace-nowrap text-center text-muted-foreground text-xs opacity-0 transition-opacity group-hover/item:opacity-100">
-					{company.description}
-				</span>
-			)}
-		</a>
-	);
+const migratedOffOthers = [
+	{
+		name: "Open (YC W24)",
+		url: "https://open.cx",
+		logo: "/social/opencx-black.svg",
+		invert: true,
+		description: "AI-Powered customer support platform",
+	},
+	{
+		name: "Autumn (S25)",
+		url: "https://useautumn.com",
+		logo: "/social/autumn.svg",
+		logoClass: "h-8 sm:h-10",
+		invert: false,
+		description: "Monetization infrastructure for developers",
+	},
+	{
+		name: "Better Auth (YC X25)",
+		url: "https://www.better-auth.com",
+		logo: "/social/better-auth.svg",
+		invert: true,
+		description: "The #1 Authentication framework for TypeScript",
+	},
+	{
+		name: "OpenCut",
+		url: "https://opencut.app",
+		logo: "/social/opencut.svg",
+		invert: true,
+		description: "Open source video editor",
+	},
+	{
+		name: "Maza",
+		url: "https://maza.vc",
+		logo: "/social/maza.svg",
+		description: "Venture Capital Fund",
+	},
+	{
+		name: "Figurable",
+		url: "https://figurable.ai",
+		logo: "/social/figurable.svg",
+		invert: true,
+	},
+];
+
+interface LogoGroupProps {
+	title: string;
+	companies: {
+		name: string;
+		url: string;
+		logo: string;
+		invert?: boolean;
+		description?: string;
+		logoClass?: string;
+	}[];
 }
 
-export function TrustedBy() {
+const LogoGroup = ({ title, companies }: LogoGroupProps) => {
 	return (
-		<div className="relative space-y-8 sm:space-y-10">
-			<div className="space-y-4">
-				<p className="text-balance text-center font-medium text-muted-foreground text-xs uppercase tracking-widest">
-					Trusted by developers at
-				</p>
+		<div className="flex flex-col items-center border border-border bg-background/50 p-4">
+			<h2 className="mb-4 text-center font-medium text-md text-muted-foreground">
+				{title}
+			</h2>
 
-				<div className="group relative overflow-hidden">
-					<div className="absolute inset-y-0 left-0 z-10 w-16 bg-linear-to-r from-background to-transparent sm:w-24" />
-					<div className="absolute inset-y-0 right-0 z-10 w-16 bg-linear-to-l from-background to-transparent sm:w-24" />
+			<div className="grid w-full max-w-80 grid-cols-2 gap-x-2 gap-y-3">
+				{companies.slice(0, 3).map((company, index) => (
+					<a
+						className="flex h-12 w-full items-center justify-center rounded-md"
+						href={company.url}
+						key={index}
+						rel="noopener noreferrer"
+						target="_blank"
+					>
+						<Image
+							alt={company.name}
+							className={`h-7 w-auto max-w-full object-contain ${
+								company.invert ? "dark:invert" : ""
+							}`}
+							height={32}
+							src={company.logo}
+							width={120}
+						/>
+					</a>
+				))}
 
-					<div className="flex py-4">
-						<div className="group-hover:pause flex shrink-0 animate-marquee items-center">
-							{industryLeaders.map((company) => (
-								<MarqueeItem company={company} key={company.name} />
-							))}
-						</div>
-						<div className="group-hover:pause flex shrink-0 animate-marquee items-center">
-							{industryLeaders.map((company) => (
-								<MarqueeItem company={company} key={`${company.name}-copy`} />
-							))}
-						</div>
-					</div>
+				{/* 4th slot — "+N more" */}
+				<div className="flex h-12 w-full items-center justify-center rounded-md px-2">
+					<span className="text-base text-muted-foreground">
+						+{companies.length - 3} more
+					</span>
 				</div>
 			</div>
+		</div>
+	);
+};
 
-			{/* <div className="space-y-4">
-				<p className="text-balance text-center font-medium text-muted-foreground text-xs uppercase tracking-widest">
-					Trusted by engineers from
-				</p>
-
-				<div className="mx-auto grid max-w-2xl grid-cols-2 gap-x-8 gap-y-4 px-4 sm:grid-cols-4 sm:gap-x-12">
-					{engineerCompanies.map((company) => (
-						<div
-							className="flex items-center justify-center"
-							key={company.name}
-						>
-							<span className="font-medium text-muted-foreground/60 text-sm">
-								{company.name}
-							</span>
-						</div>
-					))}
-				</div>
-			</div> */}
+export const TrustedBy = () => {
+	return (
+		<div className="w-full">
+			<div className="grid grid-cols-1 sm:grid-cols-3">
+				<LogoGroup companies={juneCustomers} title="Customers from June" />
+				<LogoGroup
+					companies={analyticsMigrators}
+					title="Customers from Pendo, Mixpanel, Amplitude"
+				/>
+				<LogoGroup companies={migratedOffOthers} title="Migrated off others" />
+			</div>
 		</div>
 	);
-}
+};
+
+export default TrustedBy;
diff --git a/apps/docs/components/landing/wordmark.tsx b/apps/docs/components/landing/wordmark.tsx
index 78c08d585..052c5825a 100644
--- a/apps/docs/components/landing/wordmark.tsx
+++ b/apps/docs/components/landing/wordmark.tsx
@@ -22,7 +22,7 @@ export const Wordmark = () => {
 							gradientSize={100}
 							gradientTo="#B74677"
 							height={149}
-							strokeColor="#27282D"
+							strokeColor="#373840"
 							width={1166}
 						>
 							<defs>
diff --git a/apps/docs/components/nav-link.tsx b/apps/docs/components/nav-link.tsx
index 15e520ed5..961667ee6 100644
--- a/apps/docs/components/nav-link.tsx
+++ b/apps/docs/components/nav-link.tsx
@@ -31,7 +31,7 @@ export function NavLink({ href, children, className, external }: NavLinkProps) {
 	return (
 		<Component
 			className={cn(
-				"flex items-center gap-2 px-4 py-4 font-medium text-muted-foreground text-sm hover:text-foreground",
+				"flex items-center gap-2 px-4 py-5 font-medium text-base text-foreground/70 hover:text-foreground md:px-1",
 				className
 			)}
 			href={href}
diff --git a/apps/docs/components/navbar-features-menu.tsx b/apps/docs/components/navbar-features-menu.tsx
index 320f73628..c256857b8 100644
--- a/apps/docs/components/navbar-features-menu.tsx
+++ b/apps/docs/components/navbar-features-menu.tsx
@@ -89,10 +89,8 @@ export function NavbarFeaturesMenu({
 				aria-expanded={open}
 				aria-haspopup="true"
 				className={cn(
-					"flex items-center gap-1 px-4 py-4 font-medium text-sm transition-colors",
-					open
-						? "text-foreground"
-						: "text-muted-foreground hover:text-foreground"
+					"flex items-center gap-2 px-4 py-5 font-medium text-md transition-colors",
+					open ? "text-foreground" : "text-foreground/70 hover:text-foreground"
 				)}
 				onClick={() => setOpen((prev) => !prev)}
 				onKeyDown={handleKeyDown}
diff --git a/apps/docs/components/navbar-github-desktop-link.tsx b/apps/docs/components/navbar-github-desktop-link.tsx
index dfd309774..8b77ed8d7 100644
--- a/apps/docs/components/navbar-github-desktop-link.tsx
+++ b/apps/docs/components/navbar-github-desktop-link.tsx
@@ -14,8 +14,8 @@ export function NavbarGithubDesktopLink({
 }: NavbarGithubDesktopLinkProps) {
 	return (
 		<NavLink external href={githubRepoUrl}>
-			<span className="inline-flex items-center gap-2">
-				<GithubNavMark className="transition-transform duration-200 hover:scale-110" />
+			<span className="inline-flex items-center justify-center gap-2 rounded-md border border-foreground/20 bg-background/70 px-2 py-1 backdrop-blur-lg md:px-1">
+				<GithubNavMark className="text-foreground transition-transform duration-200 hover:scale-110" />
 				{typeof stars === "number" && <GithubStarsBadge stars={stars} />}
 			</span>
 		</NavLink>
diff --git a/apps/docs/components/navbar.tsx b/apps/docs/components/navbar.tsx
index 70f299bdd..18f1ea440 100644
--- a/apps/docs/components/navbar.tsx
+++ b/apps/docs/components/navbar.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import Link from "next/link";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { BrandContextMenu } from "@/components/brand-context-menu";
 import { ThemeToggle } from "@/components/theme-toggle";
 import { Logo } from "./logo";
@@ -20,21 +20,39 @@ export interface NavbarProps {
 
 export const Navbar = ({ stars }: NavbarProps) => {
 	const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+	const [isScrolled, setIsScrolled] = useState(false);
+
+	useEffect(() => {
+		const onScroll = () => {
+			setIsScrolled(window.scrollY > 8);
+		};
+
+		onScroll();
+		window.addEventListener("scroll", onScroll, { passive: true });
+
+		return () => {
+			window.removeEventListener("scroll", onScroll);
+		};
+	}, []);
 
 	return (
 		<>
-			<header className="fixed inset-x-0 top-0 z-40 flex flex-col border-border/50 border-b bg-background/60 pt-[env(safe-area-inset-top,0px)] backdrop-blur-xl">
+			<header
+				className={`fixed inset-x-0 top-0 z-40 flex flex-col pt-[env(safe-area-inset-top,0px)] transition-colors duration-200 ${
+					isScrolled ? "bg-background" : "bg-transparent"
+				}`}
+			>
 				<nav>
 					<div className="mx-auto w-full px-2 md:px-6 lg:px-8">
-						<div className="flex h-16 items-center justify-between">
+						<div className="relative flex h-20 items-center">
 							<BrandContextMenu>
 								<div className="shrink-0 transition-opacity hover:opacity-90">
 									<Logo />
 								</div>
 							</BrandContextMenu>
 
-							<div className="hidden md:block">
-								<ul className="flex items-center gap-1">
+							<div className="pointer-events-none absolute inset-x-0 hidden justify-center md:flex">
+								<ul className="pointer-events-auto flex h-16 items-center gap-6">
 									<NavbarFeaturesMenu />
 									{navMenu.map((menu) => (
 										<NavLink
@@ -45,13 +63,18 @@ export const Navbar = ({ stars }: NavbarProps) => {
 											{menu.name}
 										</NavLink>
 									))}
+								</ul>
+							</div>
+
+							<div className="ml-auto hidden md:block">
+								<ul className="flex items-center gap-1">
 									<NavbarGithubDesktopLink stars={stars} />
 									<li className="ml-2">
 										<ThemeToggle />
 									</li>
 									<li className="ml-2">
 										<a
-											className="inline-flex items-center rounded bg-primary px-4 py-2 font-medium text-primary-foreground text-sm transition-opacity hover:opacity-90"
+											className="inline-flex items-center rounded bg-primary px-6 py-2 font-semibold text-base text-primary-foreground shadow-[inset_0_-2px_3px_rgba(0,0,0,0.25),inset_0_1px_0_rgba(255,255,255,0.2)] transition-opacity hover:opacity-90"
 											href="https://app.databuddy.cc/login"
 										>
 											Start free
@@ -60,10 +83,12 @@ export const Navbar = ({ stars }: NavbarProps) => {
 								</ul>
 							</div>
 
-							<NavbarMobileMenuButton
-								isOpen={isMobileMenuOpen}
-								onToggleAction={() => setIsMobileMenuOpen((open) => !open)}
-							/>
+							<div className="ml-auto md:hidden">
+								<NavbarMobileMenuButton
+									isOpen={isMobileMenuOpen}
+									onToggleAction={() => setIsMobileMenuOpen((open) => !open)}
+								/>
+							</div>
 						</div>
 					</div>
 				</nav>
@@ -124,10 +149,10 @@ export const Navbar = ({ stars }: NavbarProps) => {
 					</div>
 				</div>
 			</header>
-			<div
+			{/* <div
 				aria-hidden
 				className="h-[calc(4rem+env(safe-area-inset-top,0px))] shrink-0"
-			/>
+			/> */}
 		</>
 	);
 };
diff --git a/apps/docs/components/newsletter-form.tsx b/apps/docs/components/newsletter-form.tsx
index 0cf61c506..954acdc1a 100644
--- a/apps/docs/components/newsletter-form.tsx
+++ b/apps/docs/components/newsletter-form.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { CheckIcon, PaperPlaneIcon } from "@phosphor-icons/react";
+import { CheckIcon, PaperPlaneTiltIcon } from "@phosphor-icons/react";
 import { useRef, useState } from "react";
 
 type FormStatus = "idle" | "loading" | "success" | "error";
@@ -58,7 +58,7 @@ export function NewsletterForm() {
 		<div className="space-y-2">
 			<form className="flex gap-2" onSubmit={handleSubmit}>
 				<input
-					className="h-9 w-full min-w-0 rounded border border-border bg-background px-3 text-foreground text-sm placeholder:text-muted-foreground/60 focus:outline-none focus:ring-1 focus:ring-primary sm:w-56"
+					className="h-10 w-full min-w-0 rounded bg-border px-4 text-base text-foreground placeholder:text-muted-foreground/60 focus:outline-none focus:ring-1 focus:ring-primary sm:w-80"
 					disabled={status === "loading"}
 					placeholder="you@company.com"
 					ref={inputRef}
@@ -67,12 +67,14 @@ export function NewsletterForm() {
 				/>
 				<button
 					aria-label="Subscribe to newsletter"
-					className="inline-flex h-9 shrink-0 items-center gap-1.5 rounded bg-primary px-3 font-medium text-primary-foreground text-sm transition-opacity hover:opacity-90 disabled:opacity-50"
+					className="inline-flex h-10 shrink-0 items-center justify-center gap-1.5 rounded bg-primary px-3 font-semibold text-primary-foreground text-sm transition-opacity hover:opacity-80 disabled:opacity-50"
 					disabled={status === "loading"}
 					type="submit"
 				>
-					<PaperPlaneIcon className="size-3.5" weight="fill" />
-					{status === "loading" ? "..." : "Subscribe"}
+					<span className="mt-0.5 flex items-center gap-1.5">
+						{status === "loading" ? "..." : "Subscribe"}
+					</span>
+					<PaperPlaneTiltIcon className="size-3.5" weight="fill" />
 				</button>
 			</form>
 			{status === "error" && errorMessage ? (
diff --git a/apps/docs/components/theme-toggle.tsx b/apps/docs/components/theme-toggle.tsx
index c15717cf9..566ee1669 100644
--- a/apps/docs/components/theme-toggle.tsx
+++ b/apps/docs/components/theme-toggle.tsx
@@ -25,7 +25,7 @@ export function ThemeToggle({ className }: ThemeToggleProps) {
 
 	return (
 		<Button
-			className={cn("relative size-8", className)}
+			className={cn("relative size-10", className)}
 			onClick={toggleTheme}
 			size="sm"
 			suppressHydrationWarning
@@ -33,7 +33,7 @@ export function ThemeToggle({ className }: ThemeToggleProps) {
 		>
 			<SunIcon
 				className={cn(
-					"size-4 transition-all duration-300",
+					"size-5 transition-all duration-300",
 					currentTheme === "light" ? "rotate-0 scale-100" : "-rotate-90 scale-0"
 				)}
 				size={16}
@@ -42,7 +42,7 @@ export function ThemeToggle({ className }: ThemeToggleProps) {
 			/>
 			<MoonIcon
 				className={cn(
-					"absolute size-4 transition-all duration-300",
+					"absolute size-5 transition-all duration-300",
 					currentTheme === "dark" ? "rotate-0 scale-100" : "rotate-90 scale-0"
 				)}
 				size={16}
@@ -51,7 +51,7 @@ export function ThemeToggle({ className }: ThemeToggleProps) {
 			/>
 			<MonitorIcon
 				className={cn(
-					"absolute size-4 transition-all duration-300",
+					"absolute size-5 transition-all duration-300",
 					currentTheme === "system" ? "rotate-0 scale-100" : "rotate-90 scale-0"
 				)}
 				size={16}
diff --git a/apps/docs/components/ui/accordion.tsx b/apps/docs/components/ui/accordion.tsx
index dca2a9098..8904c4b9c 100644
--- a/apps/docs/components/ui/accordion.tsx
+++ b/apps/docs/components/ui/accordion.tsx
@@ -83,7 +83,7 @@ function AccordionTrigger({
 					{children}
 				</motion.div>
 				<PlusIcon
-					className="size-6 shrink-0 translate-y-0.5 cursor-pointer text-muted-foreground transition-transform duration-200 hover:text-accent-foreground"
+					className="size-6 shrink-0 translate-y-0.5 cursor-pointer text-foreground transition-transform duration-200 hover:text-accent-foreground"
 					strokeWidth={1.5}
 				/>
 			</AccordionPrimitive.Trigger>
diff --git a/apps/docs/public/brand/gradients/cta-bg.png b/apps/docs/public/brand/gradients/cta-bg.png
new file mode 100644
index 000000000..2e2c47f37
Binary files /dev/null and b/apps/docs/public/brand/gradients/cta-bg.png differ