diff --git a/app/explore/enterprise/organisations/OrgCard.tsx b/app/explore/enterprise/organisations/OrgCard.tsx
index 32a614c1f..cfcc0385a 100644
--- a/app/explore/enterprise/organisations/OrgCard.tsx
+++ b/app/explore/enterprise/organisations/OrgCard.tsx
@@ -26,7 +26,7 @@ export default function OrgCard({
   return (
     <Link
       href={`/explore/enterprise/organisations/${org.slug}`}
-      className="group flex flex-col overflow-hidden rounded-2xl border border-border bg-card transition-all duration-300 hover:shadow-lg"
+      className="card-lift group flex flex-col overflow-hidden rounded-2xl border border-border bg-card shadow-card hover:border-foreground/25 hover:shadow-lift"
     >
       <div className="relative h-24 overflow-hidden bg-gradient-to-br from-muted to-muted">
         {org.bannerImage && (
diff --git a/app/explore/enterprise/organisations/[orgSlug]/page.tsx b/app/explore/enterprise/organisations/[orgSlug]/page.tsx
index 77bb428bc..dc4814d6d 100644
--- a/app/explore/enterprise/organisations/[orgSlug]/page.tsx
+++ b/app/explore/enterprise/organisations/[orgSlug]/page.tsx
@@ -219,7 +219,7 @@ function ExpertMiniCard({
   return (
     <Link
       href={`/explore/experts/${expert.id}`}
-      className="flex items-center gap-3 p-4 bg-card rounded-xl border border-border hover:border-border hover:shadow-md transition-all group"
+      className="card-lift group flex items-center gap-3 rounded-2xl border border-border bg-card p-4 shadow-card hover:border-foreground/25 hover:shadow-lift"
     >
       <div className="relative w-12 h-12 flex-shrink-0">
         <Image
@@ -235,7 +235,7 @@ function ExpertMiniCard({
       </div>
       <div className="min-w-0 flex-1">
         <div className="flex items-center gap-1">
-          <p className="font-semibold text-sm text-foreground group-hover:text-muted-foreground truncate">
+          <p className="font-semibold text-sm tracking-tight text-foreground group-hover:text-foreground/70 truncate transition-colors">
             {expert.user.name}
           </p>
           {expert.isVerified && (
@@ -295,9 +295,9 @@ export default async function OrgProfilePage({
   >[];
 
   return (
-    <main className="min-h-screen bg-muted">
+    <main className="min-h-screen bg-background">
       {/* Banner — decorative dark cover header */}
-      <div className="relative h-48 md:h-64 bg-gradient-to-br from-zinc-800 to-zinc-900 overflow-hidden">
+      <div className="relative h-56 md:h-72 bg-gradient-to-br from-zinc-800 to-zinc-950 overflow-hidden">
         {org.bannerImage && (
           <Image
             src={org.bannerImage}
@@ -306,24 +306,26 @@ export default async function OrgProfilePage({
             className="object-cover opacity-40"
           />
         )}
-        <div className="absolute inset-0 bg-gradient-to-b from-transparent to-zinc-900/60" />
-      </div>
+        <div className="absolute inset-0 bg-gradient-to-b from-transparent to-zinc-950/70" />
 
-      <div className="max-w-[1100px] mx-auto px-4 md:px-8">
-        {/* Back link */}
-        <div className="py-4">
-          <Link
-            href="/explore/enterprise/organisations"
-            className="inline-flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors"
-          >
-            <ArrowLeft className="w-4 h-4" />
-            All Organisations
-          </Link>
+        {/* Back link lives inside the banner so the header card owns the fold */}
+        <div className="absolute top-0 left-0 right-0 z-10">
+          <div className="max-w-[1100px] mx-auto px-4 md:px-8 py-5">
+            <Link
+              href="/explore/enterprise/organisations"
+              className="group inline-flex items-center gap-1.5 text-sm text-white/80 transition-colors hover:text-white"
+            >
+              <ArrowLeft className="w-4 h-4 transition-transform duration-300 group-hover:-translate-x-0.5" />
+              All Organisations
+            </Link>
+          </div>
         </div>
+      </div>
 
+      <div className="max-w-[1100px] mx-auto px-4 md:px-8">
         {/* Org header card */}
-        <div className="bg-card rounded-2xl border border-border p-6 md:p-8 mb-8 -mt-16 relative shadow-sm">
-          <div className="flex flex-col sm:flex-row gap-5 items-start">
+        <div className="rounded-3xl border border-border bg-card p-6 shadow-card md:p-8 mb-10 -mt-20 relative">
+          <div className="flex flex-col sm:flex-row gap-6 items-start">
             {/* Logo */}
             <div className="w-20 h-20 rounded-2xl bg-muted border-2 border-card shadow-md flex items-center justify-center overflow-hidden flex-shrink-0">
               {org.logo ? (
diff --git a/app/explore/enterprise/organisations/page.tsx b/app/explore/enterprise/organisations/page.tsx
index fa1afe204..9bffebfca 100644
--- a/app/explore/enterprise/organisations/page.tsx
+++ b/app/explore/enterprise/organisations/page.tsx
@@ -2,6 +2,7 @@ import { Sparkles } from "lucide-react";
 import type { Metadata } from "next";
 import { Suspense } from "react";
 
+import { SpotlightGrid } from "@/components/motion";
 import {
   DEFAULT_ORGANISATION_FILTERS,
   getOrganisationsMetadata,
@@ -58,28 +59,26 @@ async function OrganisationsDirectory() {
 export default function ExploreOrganisationsPage() {
   return (
     <main className="min-h-screen bg-background">
-      {/* Hero */}
-      <section className="relative overflow-hidden bg-zinc-950 pt-32 pb-16">
-        <div className="absolute inset-0">
-          <div className="animate-blob absolute left-1/4 top-1/4 h-[500px] w-[500px] rounded-full bg-zinc-800/30 blur-[120px]" />
-          <div className="animate-blob animation-delay-2000 absolute bottom-1/4 right-1/4 h-[400px] w-[400px] rounded-full bg-zinc-700/20 blur-[100px]" />
-        </div>
-        <div className="grid-pattern absolute inset-0 opacity-20" />
+      {/* Hero — same left-aligned stage as the experts/programs listings */}
+      <section className="relative overflow-hidden bg-zinc-950 pt-36 pb-16">
+        <SpotlightGrid className="opacity-60" />
+        <div
+          aria-hidden
+          className="pointer-events-none absolute -top-32 left-1/2 h-[360px] w-[720px] -translate-x-1/2 rounded-full bg-zinc-500/10 blur-[120px]"
+        />
 
         <div className="relative z-10 mx-auto max-w-[1400px] px-4 md:px-8">
-          <div className="mx-auto max-w-3xl text-center">
-            <div className="mb-8 inline-flex items-center gap-2 rounded-full border border-zinc-700/50 bg-zinc-800/50 px-4 py-2 backdrop-blur-sm">
-              <Sparkles className="h-4 w-4 text-white" />
-              <span className="text-sm font-medium text-zinc-300">
-                Expert Networks &amp; Agencies
-              </span>
+          <div className="max-w-3xl">
+            <div className="mb-6 inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.04] px-3.5 py-1 text-xs text-zinc-300">
+              <Sparkles className="h-3.5 w-3.5" />
+              Expert Networks &amp; Agencies
             </div>
-            <h1 className="text-fluid-4xl mb-6 font-bold tracking-tight text-white">
+            <h1 className="text-fluid-4xl md:text-fluid-5xl mb-5 font-bold leading-[1.05] tracking-tight text-white">
               Explore <span className="silver-text">Organisations</span>
             </h1>
-            <p className="mx-auto max-w-xl text-lg text-zinc-300">
-              Discover expert networks, consulting agencies, and learning
-              institutions on Familiarise. Book their curated experts directly.
+            <p className="max-w-xl text-lg text-zinc-400">
+              Expert networks, consulting agencies, and learning institutions —
+              book their curated experts directly.
             </p>
           </div>
         </div>
diff --git a/app/explore/experts/ExpertsInteractiveContent.tsx b/app/explore/experts/ExpertsInteractiveContent.tsx
index 4322e1d34..dc8398560 100644
--- a/app/explore/experts/ExpertsInteractiveContent.tsx
+++ b/app/explore/experts/ExpertsInteractiveContent.tsx
@@ -147,24 +147,25 @@ export default function ExpertsInteractiveContent({
 
           {/* Search banner */}
           <motion.div
-            className="mb-6"
+            className="mb-8"
             initial={{ opacity: 0, y: 20 }}
             whileInView={{ opacity: 1, y: 0 }}
             viewport={{ once: true }}
             transition={{ duration: 0.5, delay: 0.2 }}
           >
-            <div className="relative mb-6 py-10 px-6 rounded-2xl bg-gradient-to-br from-zinc-900 via-zinc-800 to-zinc-700 overflow-hidden">
-              <div className="absolute inset-0 opacity-10">
-                <div className="absolute top-0 right-0 w-72 h-72 bg-white rounded-full blur-3xl -translate-y-1/2 translate-x-1/4" />
-                <div className="absolute bottom-0 left-0 w-56 h-56 bg-white rounded-full blur-3xl translate-y-1/2 -translate-x-1/4" />
-              </div>
+            <div className="relative overflow-hidden rounded-2xl border border-border bg-zinc-950 px-6 py-9 md:px-10">
+              <div
+                aria-hidden
+                className="pointer-events-none absolute -top-20 right-0 h-56 w-96 rounded-full bg-zinc-500/15 blur-[90px]"
+              />
+              <div className="grid-pattern absolute inset-0 opacity-30" />
               <div className="relative text-center">
-                <h2 className="text-2xl md:text-3xl font-bold text-white mb-2">
-                  Find Your Perfect Expert
+                <h2 className="text-fluid-2xl md:text-fluid-3xl font-bold tracking-tight text-white">
+                  Find your perfect expert
                 </h2>
-                <p className="text-zinc-400 text-sm md:text-base max-w-lg mx-auto">
-                  Search by name, skill, or specialty to connect with top
-                  consultants
+                <p className="mt-2 text-sm text-zinc-400 md:text-base">
+                  Search by name, skill, or specialty — filters live in the
+                  panel below.
                 </p>
               </div>
             </div>
diff --git a/app/explore/experts/[consultantId]/ExpertProfileClient.tsx b/app/explore/experts/[consultantId]/ExpertProfileClient.tsx
index 5d1d4bb2f..d496759e0 100644
--- a/app/explore/experts/[consultantId]/ExpertProfileClient.tsx
+++ b/app/explore/experts/[consultantId]/ExpertProfileClient.tsx
@@ -250,15 +250,15 @@ export function ExpertProfileClient({
   }, [currentDate, selectedDate]);
 
   return (
-    <main className="bg-muted">
+    <main className="bg-background">
       {/* Back Navigation */}
-      <div className="bg-card border-b border-border">
-        <div className="w-full px-4 md:px-8 lg:px-12 py-4">
+      <div className="glass-bar sticky top-[calc(var(--header-height,5rem))] z-30">
+        <div className="w-full px-4 md:px-8 lg:px-12 py-3">
           <Link
             href="/explore/experts"
-            className="inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors"
+            className="group inline-flex items-center gap-2 text-sm text-muted-foreground transition-colors hover:text-foreground"
           >
-            <ArrowLeft className="w-4 h-4" />
+            <ArrowLeft className="w-4 h-4 transition-transform duration-300 group-hover:-translate-x-0.5" />
             Back to Experts
           </Link>
         </div>
diff --git a/app/explore/experts/[consultantId]/components/AboutSection.tsx b/app/explore/experts/[consultantId]/components/AboutSection.tsx
index 7fcfac7fe..0bc15ae5d 100644
--- a/app/explore/experts/[consultantId]/components/AboutSection.tsx
+++ b/app/explore/experts/[consultantId]/components/AboutSection.tsx
@@ -27,7 +27,7 @@ export function AboutSection({
   consultantDetails,
 }: AboutSectionProps) {
   return (
-    <div className="bg-card rounded-2xl border border-border p-6 md:p-8 space-y-6">
+    <div className="rounded-2xl border border-border bg-card p-6 shadow-card md:p-8 space-y-6">
       {/* About */}
       <div>
         <div className="flex items-center gap-2 mb-3">
diff --git a/app/explore/experts/[consultantId]/components/ExperienceSection.tsx b/app/explore/experts/[consultantId]/components/ExperienceSection.tsx
index 247642c6a..d4339591c 100644
--- a/app/explore/experts/[consultantId]/components/ExperienceSection.tsx
+++ b/app/explore/experts/[consultantId]/components/ExperienceSection.tsx
@@ -150,7 +150,7 @@ export function ExperienceSection({
   }
 
   return (
-    <div className="bg-card rounded-2xl border border-border p-6 md:p-8 space-y-8">
+    <div className="rounded-2xl border border-border bg-card p-6 shadow-card md:p-8 space-y-8">
       {/* Work Experience */}
       {workExperiences.length > 0 && (
         <div>
diff --git a/app/explore/experts/[consultantId]/components/ProfileHeader.tsx b/app/explore/experts/[consultantId]/components/ProfileHeader.tsx
index 5231aa8df..14a2f7d50 100644
--- a/app/explore/experts/[consultantId]/components/ProfileHeader.tsx
+++ b/app/explore/experts/[consultantId]/components/ProfileHeader.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import Image from "next/image";
+import { motion } from "framer-motion";
 import {
   Star,
   MapPin,
@@ -13,7 +14,7 @@ import {
   Twitter,
 } from "lucide-react";
 import { Badge } from "@/components/ui/badge";
-import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
+import { SpotlightGrid } from "@/components/motion";
 import { User } from "@prisma/client";
 import type { ConsultantDetailData } from "../types";
 
@@ -23,180 +24,176 @@ interface ProfileHeaderProps {
   reviewCount: number;
 }
 
+/**
+ * Cinematic profile stage — a dark panel carrying the expert's identity while
+ * the sections below stay on the light canvas. Purely presentational: every
+ * value it shows comes in through props.
+ */
 export function ProfileHeader({
   userDetails,
   consultantDetails,
   reviewCount,
 }: ProfileHeaderProps) {
+  const socials: { label: string; icon: typeof Globe; href: string }[] = [
+    userDetails.linkedinUrl && {
+      label: "LinkedIn",
+      icon: Linkedin,
+      href: userDetails.linkedinUrl,
+    },
+    consultantDetails.twitterUrl && {
+      label: "Twitter",
+      icon: Twitter,
+      href: consultantDetails.twitterUrl,
+    },
+    consultantDetails.githubUrl && {
+      label: "GitHub",
+      icon: Github,
+      href: consultantDetails.githubUrl,
+    },
+    consultantDetails.websiteUrl && {
+      label: "Website",
+      icon: Globe,
+      href: consultantDetails.websiteUrl,
+    },
+  ].filter(Boolean) as { label: string; icon: typeof Globe; href: string }[];
+
   return (
-    <div className="bg-card rounded-2xl border border-border p-6 md:p-8">
-      <div className="flex flex-col sm:flex-row gap-6">
-        {/* Profile Display Image - Square format */}
-        <div className="relative flex-shrink-0">
-          {userDetails.profileDisplayImage ? (
-            <div className="w-32 h-32 md:w-48 md:h-48 rounded-xl overflow-hidden ring-4 ring-muted relative">
-              <Image
-                src={userDetails.profileDisplayImage}
-                alt={userDetails.name || "Expert"}
-                fill
-                className="object-cover"
-              />
-              {/* Verified Badge */}
-              {consultantDetails.isVerified && (
-                <div className="absolute bottom-2 right-2 w-8 h-8 bg-emerald-500 rounded-full flex items-center justify-center border-4 border-card">
-                  <CheckCircle2 className="w-4 h-4 text-white" />
-                </div>
-              )}
-            </div>
-          ) : (
-            <>
-              <Avatar className="w-24 h-24 md:w-32 md:h-32 ring-4 ring-muted">
-                <AvatarImage
-                  src={userDetails.image || "/placeholder-user.jpg"}
+    <motion.section
+      initial={{ opacity: 0, y: 24 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.7, ease: [0.16, 1, 0.3, 1] }}
+      className="relative overflow-hidden rounded-3xl border border-zinc-800/60 bg-zinc-950"
+      aria-label={`${userDetails.name}'s profile`}
+    >
+      <SpotlightGrid className="opacity-40" />
+      <div
+        aria-hidden
+        className="pointer-events-none absolute -top-24 right-0 h-64 w-[480px] rounded-full bg-zinc-500/10 blur-[110px]"
+      />
+
+      <div className="relative z-10 p-6 md:p-10">
+        <div className="flex flex-col gap-7 sm:flex-row">
+          {/* Portrait */}
+          <div className="relative shrink-0">
+            {userDetails.profileDisplayImage ? (
+              <div className="relative h-32 w-32 overflow-hidden rounded-2xl ring-1 ring-white/20 md:h-44 md:w-44">
+                <Image
+                  src={userDetails.profileDisplayImage}
                   alt={userDetails.name || "Expert"}
+                  fill
                   className="object-cover"
+                  sizes="(max-width: 768px) 128px, 176px"
+                  priority
                 />
-                <AvatarFallback className="text-2xl bg-primary text-primary-foreground">
-                  {userDetails.name?.charAt(0) || "E"}
-                </AvatarFallback>
-              </Avatar>
-              {/* Verified Badge */}
-              {consultantDetails.isVerified && (
-                <div className="absolute -bottom-1 -right-1 w-8 h-8 bg-emerald-500 rounded-full flex items-center justify-center border-4 border-card">
-                  <CheckCircle2 className="w-4 h-4 text-white" />
-                </div>
-              )}
-            </>
-          )}
-        </div>
+              </div>
+            ) : (
+              <div className="flex h-32 w-32 items-center justify-center rounded-2xl bg-gradient-to-br from-zinc-700 to-zinc-900 text-4xl font-semibold text-white ring-1 ring-white/20 md:h-44 md:w-44 md:text-6xl">
+                {userDetails.name?.charAt(0) || "E"}
+              </div>
+            )}
+            {consultantDetails.isVerified && (
+              <div className="absolute -bottom-2 -right-2 flex h-9 w-9 items-center justify-center rounded-full border-4 border-zinc-950 bg-emerald-500">
+                <CheckCircle2 className="h-4 w-4 text-white" />
+              </div>
+            )}
+          </div>
 
-        {/* Info */}
-        <div className="flex-1 min-w-0">
-          <div className="flex flex-wrap items-start gap-3 mb-2">
-            <h1 className="text-fluid-3xl font-bold tracking-tight text-foreground">
+          {/* Identity */}
+          <div className="min-w-0 flex-1">
+            <h1 className="text-fluid-3xl md:text-fluid-4xl font-bold tracking-tight text-white text-balance">
               {userDetails.name}
             </h1>
-            {consultantDetails.headline && (
-              <Badge className="bg-primary text-primary-foreground hover:bg-primary/90">
-                {consultantDetails.headline}
-              </Badge>
-            )}
-          </div>
 
-          {/* Rating */}
-          <div className="flex items-center gap-3 mb-4">
-            <div className="flex items-center gap-1">
-              {[...Array(5)].map((_, i) => (
-                <Star
-                  key={i}
-                  className={`w-5 h-5 ${
-                    i < Math.floor(consultantDetails.rating)
-                      ? "fill-amber-400 text-amber-400"
-                      : "fill-muted text-muted"
-                  }`}
-                />
-              ))}
+            {/* Rating */}
+            <div className="mt-3 flex flex-wrap items-center gap-x-3 gap-y-1">
+              <div className="flex items-center gap-0.5">
+                {[...Array(5)].map((_, i) => (
+                  <Star
+                    key={i}
+                    className={`h-4 w-4 ${
+                      i < Math.floor(consultantDetails.rating)
+                        ? "fill-white text-white"
+                        : "fill-zinc-700 text-zinc-700"
+                    }`}
+                  />
+                ))}
+              </div>
+              <span className="font-semibold tabular-nums text-white">
+                {consultantDetails.rating.toFixed(1)}
+              </span>
+              <span className="text-zinc-600">·</span>
+              <span className="text-sm text-zinc-400">
+                {reviewCount} reviews
+              </span>
             </div>
-            <span className="font-semibold text-foreground">
-              {consultantDetails.rating.toFixed(1)}
-            </span>
-            <span className="text-muted-foreground/70">•</span>
-            <span className="text-muted-foreground">{reviewCount} reviews</span>
-          </div>
 
-          {/* Meta */}
-          <div className="flex flex-wrap gap-4 text-sm">
-            <div className="flex items-center gap-2 text-muted-foreground">
-              <Briefcase className="w-4 h-4 text-muted-foreground/70" />
-              <span>{consultantDetails.domain.name}</span>
-            </div>
-            <div className="flex items-center gap-2 text-muted-foreground">
-              <Clock className="w-4 h-4 text-muted-foreground/70" />
-              <span>{consultantDetails.experience} experience</span>
+            {/* Meta */}
+            <div className="mt-4 flex flex-wrap gap-x-5 gap-y-2 text-sm text-zinc-400">
+              <span className="inline-flex items-center gap-1.5">
+                <Briefcase className="h-4 w-4 text-zinc-500" />
+                {consultantDetails.domain.name}
+              </span>
+              <span className="inline-flex items-center gap-1.5">
+                <Clock className="h-4 w-4 text-zinc-500" />
+                {consultantDetails.experience} experience
+              </span>
+              {userDetails.timezone && (
+                <span className="inline-flex items-center gap-1.5">
+                  <MapPin className="h-4 w-4 text-zinc-500" />
+                  {userDetails.timezone}
+                </span>
+              )}
             </div>
-            {userDetails.timezone && (
-              <div className="flex items-center gap-2 text-muted-foreground">
-                <MapPin className="w-4 h-4 text-muted-foreground/70" />
-                <span>{userDetails.timezone}</span>
+
+            {/* Tags */}
+            {(consultantDetails.subDomains?.length ||
+              consultantDetails.tags?.length) && (
+              <div className="mt-5 flex flex-wrap gap-2">
+                {consultantDetails.headline && (
+                  <Badge className="rounded-full bg-white px-3 py-1 text-black hover:bg-white/90">
+                    {consultantDetails.headline}
+                  </Badge>
+                )}
+                {consultantDetails.subDomains?.map((subdomain) => (
+                  <Badge
+                    key={subdomain.id}
+                    variant="outline"
+                    className="rounded-full border-white/15 bg-transparent text-zinc-300 hover:bg-white/5"
+                  >
+                    {subdomain.name}
+                  </Badge>
+                ))}
+                {consultantDetails.tags?.slice(0, 4).map((tag) => (
+                  <Badge
+                    key={tag.id}
+                    className="rounded-full border-0 bg-white/[0.07] text-zinc-300 hover:bg-white/10"
+                  >
+                    {tag.name}
+                  </Badge>
+                ))}
               </div>
             )}
-          </div>
 
-          {/* Tags */}
-          <div className="flex flex-wrap gap-2 mt-4">
-            {consultantDetails.subDomains?.map((subdomain) => (
-              <Badge
-                key={subdomain.id}
-                variant="outline"
-                className="border-border text-muted-foreground"
-              >
-                {subdomain.name}
-              </Badge>
-            ))}
-            {consultantDetails.tags?.slice(0, 4).map((tag) => (
-              <Badge
-                key={tag.id}
-                className="bg-muted text-muted-foreground hover:bg-muted/80"
-              >
-                {tag.name}
-              </Badge>
-            ))}
+            {/* Socials */}
+            {socials.length > 0 && (
+              <div className="mt-6 flex flex-wrap gap-4 border-t border-white/[0.07] pt-5">
+                {socials.map(({ label, icon: Icon, href }) => (
+                  <a
+                    key={label}
+                    href={href}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="inline-flex items-center gap-1.5 text-sm text-zinc-400 transition-colors hover:text-white"
+                  >
+                    <Icon className="h-4 w-4" />
+                    {label}
+                  </a>
+                ))}
+              </div>
+            )}
           </div>
-
-          {/* Social Links */}
-          {(userDetails.linkedinUrl ||
-            consultantDetails.twitterUrl ||
-            consultantDetails.githubUrl ||
-            consultantDetails.websiteUrl) && (
-            <div className="flex flex-wrap gap-3 mt-4">
-              {userDetails.linkedinUrl && (
-                <a
-                  href={userDetails.linkedinUrl}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors"
-                >
-                  <Linkedin className="w-4 h-4" />
-                  <span>LinkedIn</span>
-                </a>
-              )}
-              {consultantDetails.twitterUrl && (
-                <a
-                  href={consultantDetails.twitterUrl}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors"
-                >
-                  <Twitter className="w-4 h-4" />
-                  <span>Twitter</span>
-                </a>
-              )}
-              {consultantDetails.githubUrl && (
-                <a
-                  href={consultantDetails.githubUrl}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors"
-                >
-                  <Github className="w-4 h-4" />
-                  <span>GitHub</span>
-                </a>
-              )}
-              {consultantDetails.websiteUrl && (
-                <a
-                  href={consultantDetails.websiteUrl}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors"
-                >
-                  <Globe className="w-4 h-4" />
-                  <span>Website</span>
-                </a>
-              )}
-            </div>
-          )}
         </div>
       </div>
-    </div>
+    </motion.section>
   );
 }
diff --git a/app/explore/experts/[consultantId]/components/ReviewsSection.tsx b/app/explore/experts/[consultantId]/components/ReviewsSection.tsx
index 644df898e..fb487e178 100644
--- a/app/explore/experts/[consultantId]/components/ReviewsSection.tsx
+++ b/app/explore/experts/[consultantId]/components/ReviewsSection.tsx
@@ -15,7 +15,7 @@ export function ReviewsSection({ reviews }: ReviewsSectionProps) {
       : 0;
 
   return (
-    <div className="bg-card rounded-2xl border border-border p-6 md:p-8">
+    <div className="rounded-2xl border border-border bg-card p-6 shadow-card md:p-8">
       <div className="flex items-center justify-between mb-6">
         <div className="flex items-center gap-3">
           <div className="w-10 h-10 rounded-xl bg-muted flex items-center justify-center">
diff --git a/app/explore/experts/components/ConsultantCard.tsx b/app/explore/experts/components/ConsultantCard.tsx
index 576ddb399..31346e637 100644
--- a/app/explore/experts/components/ConsultantCard.tsx
+++ b/app/explore/experts/components/ConsultantCard.tsx
@@ -203,8 +203,8 @@ export const ConsultantCard = memo(function ConsultantCard({
   });
 
   return (
-    <div className="bg-card rounded-2xl border border-border hover:border-border hover:shadow-xl transition-all duration-300 overflow-hidden group">
-      <div className="p-6 md:p-8 lg:p-10 flex flex-col lg:flex-row gap-8 lg:gap-12">
+    <div className="card-lift group overflow-hidden rounded-2xl border border-border bg-card shadow-card hover:border-foreground/25 hover:shadow-lift">
+      <div className="p-6 md:p-8 flex flex-col lg:flex-row gap-8 lg:gap-12">
         {/* Left Section: Consultant Info. Uses a stretched overlay <Link>
             (absolute inset-0) instead of wrapping the whole section, so the
             nested org-badge link stays valid HTML (no <a> inside <a>) while
@@ -216,17 +216,16 @@ export const ConsultantCard = memo(function ConsultantCard({
             className="absolute inset-0 z-0"
           />
           {/* Header */}
-          <div className="flex items-start gap-4 mb-6">
-            <div className="relative h-20 w-20 flex-shrink-0">
+          <div className="flex items-start gap-5 mb-6">
+            <div className="relative h-[72px] w-[72px] flex-shrink-0">
               <Image
                 alt={`Portrait of ${consultant.user.name}`}
-                className="rounded-2xl object-cover ring-2 ring-muted"
+                className="rounded-2xl object-cover ring-1 ring-border"
                 src={consultant.user.image || "/placeholder-user.jpg"}
                 fill
                 // 80×80 slot — without sizes, `fill` fetches a 100vw image (#932 perf).
                 sizes="80px"
               />
-              {/* TODO: Add real presence indicator when online tracking is implemented */}
             </div>
             <div className="flex-1 min-w-0">
               {/* Name and org badge share one row, so neither may wrap: a long
@@ -235,7 +234,7 @@ export const ConsultantCard = memo(function ConsultantCard({
                   too. Both truncate instead, and the badge keeps its `title`
                   so the full name is still reachable on hover. */}
               <div className="flex items-center gap-1.5 min-w-0">
-                <h3 className="truncate text-xl font-bold text-foreground group-hover:text-muted-foreground transition-colors">
+                <h3 className="truncate text-xl font-bold tracking-tight text-foreground group-hover:text-foreground/70 transition-colors">
                   {consultant.user.name}
                 </h3>
                 {consultant.isVerified && (
@@ -379,15 +378,15 @@ export const ConsultantCard = memo(function ConsultantCard({
 
         {/* Right Section: Subscription Plans & Actions */}
         <div className="flex-shrink-0 lg:w-[380px] xl:w-[420px] space-y-4">
-          <div className="bg-muted rounded-xl p-4">
+          <div className="rounded-2xl border border-border bg-muted/50 p-4">
             {sortedPlans.length > 0 ? (
               <Tabs defaultValue={sortedPlans[0].id} className="w-full">
-                <TabsList className="w-full mb-4 bg-card p-1 rounded-lg border border-border">
+                <TabsList className="w-full mb-4 bg-card p-1 rounded-full border border-border">
                   {sortedPlans.map((plan, index) => (
                     <TabsTrigger
                       key={`${consultant.id}-tab-trigger-${plan.id}`}
                       value={plan.id}
-                      className="flex-1 data-[state=active]:bg-primary data-[state=active]:text-primary-foreground rounded-md text-sm font-medium transition-all duration-200"
+                      className="flex-1 rounded-full data-[state=active]:bg-primary data-[state=active]:text-primary-foreground text-sm font-medium transition-all duration-200"
                     >
                       {tabLabels[index]}
                     </TabsTrigger>
@@ -417,7 +416,7 @@ export const ConsultantCard = memo(function ConsultantCard({
           <div className="flex flex-col gap-2">
             <Button
               asChild
-              className="w-full h-12 bg-primary hover:bg-primary/90 text-primary-foreground font-medium rounded-xl transition-all"
+              className="sheen relative w-full h-12 bg-primary hover:bg-primary/90 text-primary-foreground font-medium rounded-full transition-all"
             >
               <Link href={profileHref}>
                 <span>View Profile</span>
@@ -431,7 +430,7 @@ export const ConsultantCard = memo(function ConsultantCard({
                 <Button
                   asChild
                   variant="outline"
-                  className="h-10 border-border hover:bg-muted text-muted-foreground rounded-xl text-sm font-medium"
+                  className="h-10 border-border hover:bg-muted rounded-full text-sm font-medium"
                 >
                   <Link href={`${profileHref}?action=trial`}>
                     {trialOffer.priceInPaise > 0
@@ -443,7 +442,7 @@ export const ConsultantCard = memo(function ConsultantCard({
               <Button
                 asChild
                 variant="outline"
-                className="h-10 border-border hover:bg-muted text-muted-foreground rounded-xl text-sm font-medium"
+                className="h-10 border-border hover:bg-muted rounded-full text-sm font-medium"
               >
                 <Link href={`${profileHref}?action=book`}>Book Session</Link>
               </Button>
diff --git a/app/explore/experts/components/DomainGrid.tsx b/app/explore/experts/components/DomainGrid.tsx
index 954503370..3d09c1b51 100644
--- a/app/explore/experts/components/DomainGrid.tsx
+++ b/app/explore/experts/components/DomainGrid.tsx
@@ -56,12 +56,12 @@ function DomainGridImpl({
           <button
             key={domain.id}
             onClick={() => onDomainSelect(domain.id)}
-            className="group text-left rounded-xl border border-border bg-card p-5 hover:border-border hover:shadow-md transition-all duration-200"
+            className="group card-lift text-left rounded-2xl border border-border bg-card p-5 hover:border-foreground/25 hover:shadow-lift focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
           >
-            <div className="w-10 h-10 rounded-lg bg-muted group-hover:bg-primary flex items-center justify-center mb-3 transition-colors">
-              <Briefcase className="w-5 h-5 text-muted-foreground group-hover:text-primary-foreground transition-colors" />
+            <div className="flex h-10 w-10 items-center justify-center rounded-xl border border-border bg-muted transition-colors duration-300 group-hover:border-transparent group-hover:bg-primary">
+              <Briefcase className="h-5 w-5 text-muted-foreground transition-colors duration-300 group-hover:text-primary-foreground" />
             </div>
-            <h3 className="font-semibold text-foreground text-sm mb-1 line-clamp-1">
+            <h3 className="mb-1 mt-3 line-clamp-1 text-sm font-semibold tracking-tight text-foreground">
               {domain.name}
             </h3>
             <p className="text-xs text-muted-foreground">
diff --git a/app/explore/experts/components/ExpertMiniCard.tsx b/app/explore/experts/components/ExpertMiniCard.tsx
index ece8e4a25..11242cded 100644
--- a/app/explore/experts/components/ExpertMiniCard.tsx
+++ b/app/explore/experts/components/ExpertMiniCard.tsx
@@ -19,7 +19,7 @@ function ExpertMiniCardImpl({ expert, badge }: ExpertMiniCardProps) {
       href={`/explore/experts/${expert.id}`}
       className="group flex-shrink-0 w-[260px] block"
     >
-      <div className="bg-card rounded-2xl p-5 border border-border hover:border-border hover:shadow-lg transition-all duration-300 h-full flex flex-col">
+      <div className="card-lift flex h-full flex-col rounded-2xl border border-border bg-card p-5 shadow-card hover:border-foreground/25 hover:shadow-lift">
         {/* Badge */}
         {badge && (
           <div className="mb-3">
@@ -56,7 +56,7 @@ function ExpertMiniCardImpl({ expert, badge }: ExpertMiniCardProps) {
           </Avatar>
           <div className="min-w-0">
             <div className="flex items-center gap-1">
-              <h3 className="text-sm font-semibold text-foreground line-clamp-1 group-hover:text-muted-foreground transition-colors">
+              <h3 className="text-sm font-semibold text-foreground line-clamp-1 group-hover:text-foreground/70 transition-colors">
                 {expert.user.name}
               </h3>
               {expert.isVerified && (
diff --git a/app/explore/experts/components/SatisfiedTestimonial.tsx b/app/explore/experts/components/SatisfiedTestimonial.tsx
deleted file mode 100644
index 53079809d..000000000
--- a/app/explore/experts/components/SatisfiedTestimonial.tsx
+++ /dev/null
@@ -1,147 +0,0 @@
-"use client";
-
-import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
-import { motion } from "framer-motion";
-import { Quote, Star } from "lucide-react";
-import Image from "next/image";
-
-const TESTIMONIALS = [
-  {
-    id: 1,
-    name: "Sarah Johnson",
-    role: "Product Manager",
-    company: "TechCorp",
-    image: "/placeholder-user.jpg",
-    rating: 5,
-    quote:
-      "The expert I consulted with was incredibly knowledgeable and helped me solve my business challenges quickly. Their insights transformed my approach to product strategy.",
-  },
-  {
-    id: 2,
-    name: "Michael Chen",
-    role: "Software Engineer",
-    company: "StartupX",
-    image: "/placeholder-user.jpg",
-    rating: 5,
-    quote:
-      "Found an amazing mentor through Familiarise. The guidance I received accelerated my career growth by years. Highly recommend!",
-  },
-  {
-    id: 3,
-    name: "Emily Rodriguez",
-    role: "Marketing Director",
-    company: "BrandCo",
-    image: "/placeholder-user.jpg",
-    rating: 5,
-    quote:
-      "The quality of experts on this platform is outstanding. I've had multiple sessions and each one has been incredibly valuable for my professional development.",
-  },
-];
-
-export function SatisfiedTestimonial() {
-  return (
-    <section className="relative py-20 md:py-28 bg-zinc-950 overflow-hidden">
-      {/* Background Effects */}
-      <div className="absolute inset-0">
-        <div className="absolute top-1/3 left-1/4 w-[500px] h-[500px] bg-zinc-800/30 rounded-full blur-[120px] animate-blob" />
-        <div className="absolute bottom-1/3 right-1/4 w-[400px] h-[400px] bg-zinc-700/20 rounded-full blur-[100px] animate-blob animation-delay-2000" />
-      </div>
-      <div className="absolute inset-0 grid-pattern opacity-20" />
-
-      <div className="max-w-[1600px] mx-auto px-4 md:px-8 lg:px-12 relative z-10">
-        {/* Section Header */}
-        <motion.div
-          className="text-center mb-16"
-          initial={{ opacity: 0, y: 20 }}
-          whileInView={{ opacity: 1, y: 0 }}
-          viewport={{ once: true }}
-          transition={{ duration: 0.5 }}
-        >
-          <div className="inline-flex items-center gap-2 px-4 py-2 bg-zinc-800/50 backdrop-blur-sm border border-zinc-700/50 rounded-full mb-6">
-            <Quote className="w-4 h-4 text-white" />
-            <span className="text-sm font-medium text-zinc-300">
-              Testimonials
-            </span>
-          </div>
-          <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white mb-4">
-            What <span className="silver-text">Professionals</span> Say
-          </h2>
-          <p className="text-lg text-zinc-400 max-w-2xl mx-auto">
-            Hear from professionals who&apos;ve transformed their careers with
-            expert mentors on Familiarise
-          </p>
-        </motion.div>
-
-        {/* Testimonials Grid */}
-        <div className="grid md:grid-cols-3 gap-6 max-w-6xl mx-auto">
-          {TESTIMONIALS.map((testimonial, index) => (
-            <motion.div
-              key={testimonial.id}
-              className="relative"
-              initial={{ opacity: 0, y: 30 }}
-              whileInView={{ opacity: 1, y: 0 }}
-              viewport={{ once: true }}
-              transition={{ duration: 0.5, delay: index * 0.1 }}
-            >
-              <div className="h-full bg-zinc-900/50 backdrop-blur-sm border border-zinc-800 rounded-2xl p-6 hover:border-zinc-700 transition-colors">
-                {/* Quote Icon */}
-                <div className="w-10 h-10 rounded-xl bg-zinc-800 flex items-center justify-center mb-4">
-                  <Quote className="w-5 h-5 text-zinc-400" />
-                </div>
-
-                {/* Rating */}
-                <div className="flex gap-1 mb-4">
-                  {[...Array(testimonial.rating)].map((_, i) => (
-                    <Star
-                      key={i}
-                      className="w-4 h-4 fill-amber-400 text-amber-400"
-                    />
-                  ))}
-                </div>
-
-                {/* Quote */}
-                <p className="text-zinc-300 leading-relaxed mb-6">
-                  &ldquo;{testimonial.quote}&rdquo;
-                </p>
-
-                {/* Author */}
-                <div className="flex items-center gap-3 pt-4 border-t border-zinc-800">
-                  <Avatar className="h-10 w-10">
-                    <AvatarImage
-                      src={testimonial.image}
-                      alt={testimonial.name}
-                    />
-                    <AvatarFallback className="bg-zinc-800 text-zinc-300">
-                      {testimonial.name.charAt(0)}
-                    </AvatarFallback>
-                  </Avatar>
-                  <div>
-                    <p className="font-medium text-white text-sm">
-                      {testimonial.name}
-                    </p>
-                    <p className="text-xs text-zinc-500">
-                      {testimonial.role} at {testimonial.company}
-                    </p>
-                  </div>
-                </div>
-
-                {/* Reviewed on Familiarise */}
-                <div className="flex items-center gap-1.5 mt-3 pt-3 border-t border-zinc-800">
-                  <Image
-                    src="/avif/static/assets/logos/images/logos/Familiarise-logos_transparent.avif"
-                    alt="Familiarise"
-                    width={14}
-                    height={14}
-                  />
-                  <span className="text-[10px] text-zinc-500">
-                    Reviewed on Familiarise
-                  </span>
-                </div>
-              </div>
-            </motion.div>
-          ))}
-        </div>
-      </div>
-    </section>
-  );
-}
diff --git a/app/explore/experts/page.tsx b/app/explore/experts/page.tsx
index b635b245e..5a6b7656e 100644
--- a/app/explore/experts/page.tsx
+++ b/app/explore/experts/page.tsx
@@ -1,5 +1,6 @@
 import { Suspense } from "react";
-import { Sparkles, Users, Star, TrendingUp } from "lucide-react";
+import { Sparkles } from "lucide-react";
+import { SpotlightGrid } from "@/components/motion";
 import { FeaturedExperts } from "./components/FeaturedExperts";
 import ExpertsInteractiveContent from "./ExpertsInteractiveContent";
 import {
@@ -38,57 +39,64 @@ function HeroSection({
 }) {
   const STATS = [
     {
-      icon: Users,
       value: totalConsultants > 0 ? `${totalConsultants}` : "10K+",
       label: "Active Experts",
     },
     {
-      icon: Star,
       value: averageRating > 0 ? averageRating.toFixed(1) : "4.9",
-      label: "Average Rating",
+      label: "Avg Rating",
     },
-    { icon: TrendingUp, value: "50K+", label: "Sessions Completed" },
+    { value: "50K+", label: "Sessions" },
   ];
 
   return (
-    <section className="relative pt-32 pb-20 bg-zinc-950 overflow-hidden">
-      <div className="absolute inset-0">
-        <div className="absolute top-1/4 left-1/4 w-[600px] h-[600px] bg-zinc-800/30 rounded-full blur-[120px] animate-blob" />
-        <div className="absolute bottom-1/4 right-1/4 w-[500px] h-[500px] bg-zinc-700/20 rounded-full blur-[100px] animate-blob animation-delay-2000" />
-      </div>
-      <div className="absolute inset-0 grid-pattern opacity-20" />
+    <section className="relative bg-zinc-950 pb-16 pt-36 overflow-hidden">
+      <SpotlightGrid className="opacity-60" />
+      <div
+        aria-hidden
+        className="pointer-events-none absolute -top-32 left-1/2 h-[360px] w-[720px] -translate-x-1/2 rounded-full bg-zinc-500/10 blur-[120px]"
+      />
 
       <div className="max-w-[1600px] mx-auto px-4 md:px-8 lg:px-12 relative z-10">
-        <div className="max-w-4xl mx-auto text-center">
-          <div className="inline-flex items-center gap-2 px-4 py-2 bg-zinc-800/50 backdrop-blur-sm border border-zinc-700/50 rounded-full mb-8">
-            <Sparkles className="w-4 h-4 text-white" />
-            <span className="text-sm font-medium text-zinc-300">
-              World-Class Mentorship
-            </span>
+        {/* Server-rendered hero: CSS entrance animations only — this file is
+            a server component and must not import framer-motion directly. */}
+        <div className="max-w-3xl">
+          <div
+            className="reveal-up inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.04] px-3.5 py-1 text-xs text-zinc-300 mb-6"
+          >
+            <Sparkles className="h-3.5 w-3.5" />
+            World-Class Mentorship
           </div>
 
-          <h1 className="text-fluid-4xl md:text-fluid-5xl font-bold tracking-tight text-white mb-6">
-            Meet Your Perfect <span className="silver-text">Mentor</span>
+          <h1
+            className="reveal-up stagger-2 text-fluid-4xl md:text-fluid-5xl font-bold tracking-tight text-white leading-[1.05]"
+          >
+            Meet your perfect{" "}
+            <span className="silver-text">mentor</span>
           </h1>
 
-          <p className="text-lg md:text-xl text-zinc-400 mb-12 max-w-2xl mx-auto">
-            Ready to level up? Our amazing mentors are here to guide you!
-            Connect with industry experts who understand your journey.
+          <p
+            className="reveal-up stagger-3 mt-5 max-w-xl text-lg text-zinc-400"
+          >
+            Verified experts who understand your journey — book a session and
+            start levelling up today.
           </p>
 
-          <div className="flex flex-wrap justify-center gap-8 md:gap-16">
+          <dl
+            className="reveal-up stagger-4 mt-10 flex flex-wrap items-center gap-x-10 gap-y-4 border-t border-white/[0.07] pt-7"
+          >
             {STATS.map((stat) => (
-              <div key={stat.label} className="text-center">
-                <div className="w-12 h-12 mx-auto mb-3 rounded-xl bg-zinc-800/50 border border-zinc-700/50 flex items-center justify-center">
-                  <stat.icon className="w-6 h-6 text-white" />
-                </div>
-                <div className="text-2xl md:text-3xl font-bold text-white">
+              <div key={stat.label}>
+                <dt className="sr-only">{stat.label}</dt>
+                <dd className="text-2xl font-semibold tabular-nums text-white">
                   {stat.value}
-                </div>
-                <div className="text-sm text-zinc-500">{stat.label}</div>
+                </dd>
+                <dd className="text-xs uppercase tracking-wider text-zinc-500">
+                  {stat.label}
+                </dd>
               </div>
             ))}
-          </div>
+          </dl>
         </div>
       </div>
     </section>
diff --git a/app/explore/programs/ProgramsInteractiveContent.tsx b/app/explore/programs/ProgramsInteractiveContent.tsx
index fbce657e7..eb7f56f2b 100644
--- a/app/explore/programs/ProgramsInteractiveContent.tsx
+++ b/app/explore/programs/ProgramsInteractiveContent.tsx
@@ -4,6 +4,7 @@ import { PlanLevel } from "@prisma/client";
 import { useCallback, useMemo } from "react";
 import { motion } from "framer-motion";
 import { GraduationCap, Video, Users, Sparkles } from "lucide-react";
+import { SpotlightGrid } from "@/components/motion";
 import { useSession } from "@/lib/auth-client";
 import { useCurrency } from "@/hooks/useCurrency";
 import { type Program, type TopicWithCount } from "@/lib/explore/programs";
@@ -177,57 +178,72 @@ export default function ProgramsInteractiveContent({
 
   return (
     <main className="min-h-screen bg-background">
-      {/* Hero Section */}
-      <section className="relative pt-32 pb-20 bg-zinc-950 overflow-hidden">
-        <div className="absolute inset-0">
-          <div className="absolute top-1/4 left-1/4 w-[600px] h-[600px] bg-zinc-800/30 rounded-full blur-[120px] animate-blob" />
-          <div className="absolute bottom-1/4 right-1/4 w-[500px] h-[500px] bg-zinc-700/20 rounded-full blur-[100px] animate-blob animation-delay-2000" />
-        </div>
-        <div className="absolute inset-0 grid-pattern opacity-20" />
+      {/* Hero — mirrors /explore/experts so both listings read as one system */}
+      <section className="relative pt-36 pb-16 bg-zinc-950 overflow-hidden">
+        <SpotlightGrid className="opacity-60" />
+        <div
+          aria-hidden
+          className="pointer-events-none absolute -top-32 left-1/2 h-[360px] w-[720px] -translate-x-1/2 rounded-full bg-zinc-500/10 blur-[120px]"
+        />
 
         <div className="max-w-[1600px] mx-auto px-4 md:px-8 lg:px-12 relative z-10">
-          <motion.div
-            className="max-w-4xl mx-auto text-center"
-            initial={{ opacity: 0, y: 30 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.6 }}
-          >
-            <div className="inline-flex items-center gap-2 px-4 py-2 bg-zinc-800/50 backdrop-blur-sm border border-zinc-700/50 rounded-full mb-8">
-              <Sparkles className="w-4 h-4 text-white" />
-              <span className="text-sm font-medium text-zinc-300">
-                Learn from the Best
-              </span>
-            </div>
+          <div className="max-w-3xl">
+            <motion.div
+              initial={{ opacity: 0, y: 14 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
+              className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.04] px-3.5 py-1 text-xs text-zinc-300 mb-6"
+            >
+              <Sparkles className="h-3.5 w-3.5" />
+              Learn from the Best
+            </motion.div>
 
-            <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6">
-              Classes & <span className="silver-text">Webinars</span>
-            </h1>
+            <motion.h1
+              initial={{ opacity: 0, y: 18 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{
+                duration: 0.65,
+                delay: 0.08,
+                ease: [0.16, 1, 0.3, 1],
+              }}
+              className="text-fluid-4xl md:text-fluid-5xl font-bold tracking-tight text-white leading-[1.05]"
+            >
+              Classes &amp; <span className="silver-text">Webinars</span>
+            </motion.h1>
 
-            <p className="text-lg md:text-xl text-zinc-400 mb-12 max-w-2xl mx-auto">
-              Expand your knowledge with expert-led classes and live webinars.
-              Learn at your own pace or join interactive sessions.
-            </p>
+            <motion.p
+              initial={{ opacity: 0, y: 16 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{
+                duration: 0.6,
+                delay: 0.18,
+                ease: [0.16, 1, 0.3, 1],
+              }}
+              className="mt-5 max-w-xl text-lg text-zinc-400"
+            >
+              Expert-led classes and live webinars — learn at your own pace or
+              join an interactive cohort.
+            </motion.p>
 
-            <div className="flex flex-wrap justify-center gap-8 md:gap-16">
-              {stats.map((stat, index) => (
-                <motion.div
-                  key={stat.label}
-                  className="text-center"
-                  initial={{ opacity: 0, y: 20 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  transition={{ duration: 0.5, delay: 0.2 + index * 0.1 }}
-                >
-                  <div className="w-12 h-12 mx-auto mb-3 rounded-xl bg-zinc-800/50 border border-zinc-700/50 flex items-center justify-center">
-                    <stat.icon className="w-6 h-6 text-white" />
-                  </div>
-                  <div className="text-2xl md:text-3xl font-bold text-white">
+            <motion.dl
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              transition={{ duration: 0.7, delay: 0.35 }}
+              className="mt-10 flex flex-wrap items-center gap-x-10 gap-y-4 border-t border-white/[0.07] pt-7"
+            >
+              {stats.map((stat) => (
+                <div key={stat.label}>
+                  <dt className="sr-only">{stat.label}</dt>
+                  <dd className="text-2xl font-semibold tabular-nums text-white">
                     {stat.value}
-                  </div>
-                  <div className="text-sm text-zinc-500">{stat.label}</div>
-                </motion.div>
+                  </dd>
+                  <dd className="text-xs uppercase tracking-wider text-zinc-500">
+                    {stat.label}
+                  </dd>
+                </div>
               ))}
-            </div>
-          </motion.div>
+            </motion.dl>
+          </div>
         </div>
       </section>
 
diff --git a/app/explore/programs/components/CategoryGrid.tsx b/app/explore/programs/components/CategoryGrid.tsx
index 251cdba3e..f5f1cf329 100644
--- a/app/explore/programs/components/CategoryGrid.tsx
+++ b/app/explore/programs/components/CategoryGrid.tsx
@@ -51,12 +51,12 @@ function CategoryGridImpl({
           <button
             key={topic.id}
             onClick={() => onTopicSelect(topic.id)}
-            className="group text-left rounded-xl border border-border bg-card p-5 hover:border-border hover:shadow-md transition-all duration-200"
+            className="group card-lift text-left rounded-2xl border border-border bg-card p-5 hover:border-foreground/25 hover:shadow-lift focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
           >
-            <div className="w-10 h-10 rounded-lg bg-muted group-hover:bg-primary flex items-center justify-center mb-3 transition-colors">
-              <Hash className="w-5 h-5 text-muted-foreground group-hover:text-primary-foreground transition-colors" />
+            <div className="flex h-10 w-10 items-center justify-center rounded-xl border border-border bg-muted transition-colors duration-300 group-hover:border-transparent group-hover:bg-primary">
+              <Hash className="h-5 w-5 text-muted-foreground transition-colors duration-300 group-hover:text-primary-foreground" />
             </div>
-            <h3 className="font-semibold text-foreground text-sm mb-1 line-clamp-1">
+            <h3 className="mb-1 mt-3 line-clamp-1 text-sm font-semibold tracking-tight text-foreground">
               {topic.name}
             </h3>
             <p className="text-xs text-muted-foreground">
diff --git a/app/explore/programs/components/FeaturedCarousel.tsx b/app/explore/programs/components/FeaturedCarousel.tsx
index d75e72775..bf63b31dc 100644
--- a/app/explore/programs/components/FeaturedCarousel.tsx
+++ b/app/explore/programs/components/FeaturedCarousel.tsx
@@ -83,7 +83,7 @@ function FeaturedCarouselImpl({
   return (
     <div className="relative">
       <div
-        className="group bg-card rounded-2xl overflow-hidden border border-border hover:border-border hover:shadow-xl transition-all duration-300 cursor-pointer"
+        className="card-lift group overflow-hidden rounded-2xl border border-border bg-card shadow-card hover:border-foreground/25 hover:shadow-lift"
         onClick={handleClick}
         role="button"
         tabIndex={0}
@@ -116,7 +116,7 @@ function FeaturedCarouselImpl({
               >
                 {program.type === "class" ? "Class" : "Webinar"}
               </span>
-              <span className="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-medium bg-amber-500 text-white">
+              <span className="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-medium bg-primary text-primary-foreground">
                 <Sparkles className="w-3 h-3" />
                 Featured
               </span>
@@ -125,7 +125,7 @@ function FeaturedCarouselImpl({
 
           {/* Content */}
           <div className="flex-1 p-6 md:p-8 flex flex-col justify-center min-w-0">
-            <h3 className="text-xl md:text-2xl font-bold text-foreground mb-3 line-clamp-2 group-hover:text-muted-foreground transition-colors">
+            <h3 className="text-xl md:text-2xl font-bold text-foreground mb-3 line-clamp-2 group-hover:text-foreground/70 transition-colors">
               {program.title}
             </h3>
             <p className="text-sm md:text-base text-muted-foreground mb-6 line-clamp-3">
diff --git a/app/explore/programs/components/ProgramCard.tsx b/app/explore/programs/components/ProgramCard.tsx
index 1f0222f57..9fbeca16d 100644
--- a/app/explore/programs/components/ProgramCard.tsx
+++ b/app/explore/programs/components/ProgramCard.tsx
@@ -132,7 +132,7 @@ function GridCard({
 
   return (
     <div
-      className="group bg-card rounded-2xl overflow-hidden border border-border hover:border-border hover:shadow-xl transition-all duration-300 cursor-pointer h-full flex flex-col"
+      className="card-lift group overflow-hidden rounded-2xl border border-border bg-card shadow-card hover:border-foreground/25 hover:shadow-lift h-full flex flex-col"
       onClick={handleClick}
       onKeyDown={(e) => {
         if (e.key === "Enter" || e.key === " ") {
@@ -169,7 +169,7 @@ function GridCard({
       </div>
 
       <div className="p-5 flex-1 flex flex-col">
-        <h3 className="text-lg font-semibold text-foreground mb-2 line-clamp-1 group-hover:text-muted-foreground transition-colors">
+        <h3 className="text-lg font-semibold text-foreground mb-2 line-clamp-1 group-hover:text-foreground/70 transition-colors">
           {program.title}
         </h3>
         <p className="text-sm text-muted-foreground mb-4 line-clamp-2 flex-1">
@@ -253,7 +253,7 @@ function ListCard({
 
   return (
     <div
-      className="group bg-card rounded-2xl overflow-hidden border border-border hover:border-border hover:shadow-xl transition-all duration-300 cursor-pointer flex"
+      className="card-lift group overflow-hidden rounded-2xl border border-border bg-card shadow-card hover:border-foreground/25 hover:shadow-lift flex"
       onClick={handleClick}
       onKeyDown={(e) => {
         if (e.key === "Enter" || e.key === " ") {
@@ -282,7 +282,7 @@ function ListCard({
       <div className="p-6 flex-1 flex flex-col justify-between min-w-0">
         <div>
           <div className="flex items-start justify-between gap-4 mb-2">
-            <h3 className="text-lg font-semibold text-foreground group-hover:text-muted-foreground transition-colors">
+            <h3 className="text-lg font-semibold text-foreground group-hover:text-foreground/70 transition-colors">
               {program.title}
             </h3>
             {program.isRegistered && (
@@ -379,7 +379,7 @@ function CarouselCard({
 
   return (
     <div
-      className="group bg-card rounded-2xl overflow-hidden border border-border hover:border-border hover:shadow-xl transition-all duration-300 cursor-pointer flex-shrink-0 w-[320px] md:w-[360px]"
+      className="card-lift group overflow-hidden rounded-2xl border border-border bg-card shadow-card hover:border-foreground/25 hover:shadow-lift flex-shrink-0 w-[320px] md:w-[360px]"
       onClick={handleClick}
       onKeyDown={(e) => {
         if (e.key === "Enter" || e.key === " ") {
@@ -410,7 +410,7 @@ function CarouselCard({
       </div>
 
       <div className="p-4">
-        <h3 className="text-base font-semibold text-foreground mb-1 line-clamp-1 group-hover:text-muted-foreground transition-colors">
+        <h3 className="text-base font-semibold text-foreground mb-1 line-clamp-1 group-hover:text-foreground/70 transition-colors">
           {program.title}
         </h3>
         <p className="text-sm text-muted-foreground line-clamp-1 mb-3">
diff --git a/app/explore/programs/components/ProgramTabs.tsx b/app/explore/programs/components/ProgramTabs.tsx
index 62d3c296b..b8318129d 100644
--- a/app/explore/programs/components/ProgramTabs.tsx
+++ b/app/explore/programs/components/ProgramTabs.tsx
@@ -29,14 +29,14 @@ const tabs: { value: ProgramType; label: string; icon: React.ReactNode }[] = [
 
 function ProgramTabsImpl({ activeTab, onTabChange }: ProgramTabsProps) {
   return (
-    <div className="flex items-center gap-2 p-1.5 bg-muted rounded-xl w-fit">
+    <div className="flex items-center gap-1.5 rounded-full border border-border bg-muted p-1 w-fit">
       {tabs.map((tab) => {
         const isActive = activeTab === tab.value;
         return (
           <button
             key={tab.value}
             onClick={() => onTabChange(tab.value)}
-            className={`inline-flex items-center gap-2 px-5 py-2.5 rounded-lg text-sm font-medium transition-all duration-200 ${
+            className={`inline-flex items-center gap-2 rounded-full px-5 py-2 text-sm font-medium transition-all duration-200 ${
               isActive
                 ? "bg-primary text-primary-foreground shadow-sm"
                 : "text-muted-foreground hover:text-foreground hover:bg-muted-foreground/10"
diff --git a/app/explore/programs/plans/classes/[classPlanId]/components/ClassDetails.tsx b/app/explore/programs/plans/classes/[classPlanId]/components/ClassDetails.tsx
index ffee7bd29..db0d9ba09 100644
--- a/app/explore/programs/plans/classes/[classPlanId]/components/ClassDetails.tsx
+++ b/app/explore/programs/plans/classes/[classPlanId]/components/ClassDetails.tsx
@@ -46,26 +46,33 @@ export function ClassDetails({ plan }: ClassDetailsProps) {
   }, []);
 
   return (
-    <main className="min-h-screen bg-muted">
-      {/* Hero Banner */}
-      <div className="relative h-[350px] md:h-[400px] w-full overflow-hidden">
-        <Image
-          src={generateProgramImageUrl(plan.id, 1200, 400, plan.imageUrl)}
-          alt="Class cover"
-          fill
-          className="object-cover"
-          priority
-        />
-        <div className="absolute inset-0 bg-gradient-to-t from-zinc-950 via-zinc-950/60 to-transparent" />
+    <main className="min-h-screen bg-background">
+      {/* Hero Banner — cinematic cover with a slow Ken Burns drift */}
+      <div className="relative h-[380px] md:h-[460px] w-full overflow-hidden">
+        <motion.div
+          className="absolute inset-0"
+          initial={{ scale: 1.08 }}
+          animate={{ scale: 1 }}
+          transition={{ duration: 2.2, ease: [0.16, 1, 0.3, 1] }}
+        >
+          <Image
+            src={generateProgramImageUrl(plan.id, 1200, 400, plan.imageUrl)}
+            alt="Class cover"
+            fill
+            className="object-cover"
+            priority
+          />
+        </motion.div>
+        <div className="absolute inset-0 bg-gradient-to-t from-zinc-950 via-zinc-950/55 to-zinc-950/10" />
 
         {/* Back Navigation */}
         <div className="absolute top-0 left-0 right-0 z-10">
           <div className="max-w-[1600px] mx-auto px-4 md:px-8 lg:px-12 py-6">
             <Link
               href="/explore/programs"
-              className="inline-flex items-center gap-2 text-sm text-white/80 hover:text-white transition-colors"
+              className="group inline-flex items-center gap-2 text-sm text-white/80 transition-colors hover:text-white"
             >
-              <ArrowLeft className="w-4 h-4" />
+              <ArrowLeft className="w-4 h-4 transition-transform duration-300 group-hover:-translate-x-0.5" />
               Back to Programs
             </Link>
           </div>
@@ -74,16 +81,22 @@ export function ClassDetails({ plan }: ClassDetailsProps) {
         {/* Title Overlay */}
         <div className="absolute bottom-0 left-0 right-0 z-10">
           <div className="max-w-[1600px] mx-auto px-4 md:px-8 lg:px-12 pb-8">
-            <Badge className="bg-background text-foreground mb-4">Class</Badge>
-            <h1 className="text-fluid-4xl tracking-tight font-bold text-white mb-2">
+            <Badge className="mb-4 rounded-full border border-white/20 bg-white/10 text-white backdrop-blur-sm">
+              Class
+            </Badge>
+            <h1 className="text-fluid-4xl tracking-tight font-bold text-white mb-3 max-w-3xl text-balance">
               {plan.title}
             </h1>
-            <div className="flex items-center gap-4 text-white/80">
+            <div className="flex flex-wrap items-center gap-x-5 gap-y-2 text-white/80">
               <span className="text-2xl md:text-3xl font-bold text-white">
                 {formatPrice(plan.price)}
               </span>
-              <span className="text-white/60">•</span>
+              <span className="text-white/40">·</span>
               <span>{plan.durationInMonths} months</span>
+              <span className="text-white/40">·</span>
+              <span>{plan.sessionsPerWeek}/week</span>
+              <span className="text-white/40">·</span>
+              <span>{planLevelLabel(plan.level)}</span>
             </div>
           </div>
         </div>
@@ -282,10 +295,10 @@ export function ClassDetails({ plan }: ClassDetailsProps) {
                   </p>
                   <Link
                     href={`/explore/experts/${plan.consultantProfile?.id}`}
-                    className="inline-flex items-center gap-1 text-sm font-medium text-foreground hover:text-muted-foreground mt-3"
+                    className="group inline-flex items-center gap-1 text-sm font-medium text-foreground transition-colors hover:text-foreground/70 mt-3"
                   >
-                    View Full Profile
-                    <ArrowLeft className="w-4 h-4 rotate-180" />
+                    <span className="link-sweep pb-0.5">View Full Profile</span>
+                    <ArrowLeft className="w-4 h-4 rotate-180 transition-transform duration-300 group-hover:translate-x-0.5" />
                   </Link>
                 </CardContent>
               </Card>
diff --git a/app/explore/programs/plans/webinars/[webinarPlanId]/components/WebinarDetails.tsx b/app/explore/programs/plans/webinars/[webinarPlanId]/components/WebinarDetails.tsx
index 3c3762bd2..7cb5ab7c6 100644
--- a/app/explore/programs/plans/webinars/[webinarPlanId]/components/WebinarDetails.tsx
+++ b/app/explore/programs/plans/webinars/[webinarPlanId]/components/WebinarDetails.tsx
@@ -92,26 +92,33 @@ export function WebinarDetails({
   };
 
   return (
-    <main className="min-h-screen bg-muted">
-      {/* Hero Banner */}
-      <div className="relative h-[350px] md:h-[400px] w-full overflow-hidden">
-        <Image
-          src={generateProgramImageUrl(plan.id, 1200, 400, plan.imageUrl)}
-          alt="Webinar cover"
-          fill
-          className="object-cover"
-          priority
-        />
-        <div className="absolute inset-0 bg-gradient-to-t from-zinc-950 via-zinc-950/60 to-transparent" />
+    <main className="min-h-screen bg-background">
+      {/* Hero Banner — cinematic cover with a slow Ken Burns drift */}
+      <div className="relative h-[380px] md:h-[460px] w-full overflow-hidden">
+        <motion.div
+          className="absolute inset-0"
+          initial={{ scale: 1.08 }}
+          animate={{ scale: 1 }}
+          transition={{ duration: 2.2, ease: [0.16, 1, 0.3, 1] }}
+        >
+          <Image
+            src={generateProgramImageUrl(plan.id, 1200, 400, plan.imageUrl)}
+            alt="Webinar cover"
+            fill
+            className="object-cover"
+            priority
+          />
+        </motion.div>
+        <div className="absolute inset-0 bg-gradient-to-t from-zinc-950 via-zinc-950/55 to-zinc-950/10" />
 
         {/* Back Navigation */}
         <div className="absolute top-0 left-0 right-0 z-10">
           <div className="max-w-[1600px] mx-auto px-4 md:px-8 lg:px-12 py-6">
             <Link
               href="/explore/programs"
-              className="inline-flex items-center gap-2 text-sm text-white/80 hover:text-white transition-colors"
+              className="group inline-flex items-center gap-2 text-sm text-white/80 transition-colors hover:text-white"
             >
-              <ArrowLeft className="w-4 h-4" />
+              <ArrowLeft className="w-4 h-4 transition-transform duration-300 group-hover:-translate-x-0.5" />
               Back to Programs
             </Link>
           </div>
@@ -121,19 +128,21 @@ export function WebinarDetails({
         <div className="absolute bottom-0 left-0 right-0 z-10">
           <div className="max-w-[1600px] mx-auto px-4 md:px-8 lg:px-12 pb-8">
             <div className="flex items-center gap-3 mb-4">
-              <Badge className="bg-background text-foreground">Webinar</Badge>
+              <Badge className="rounded-full border border-white/20 bg-white/10 text-white backdrop-blur-sm">
+                Webinar
+              </Badge>
               <Badge className={getStatusBadgeClass(sessionStatus)}>
                 {sessionStatus}
               </Badge>
             </div>
-            <h1 className="text-fluid-4xl tracking-tight font-bold text-white mb-2">
+            <h1 className="text-fluid-4xl tracking-tight font-bold text-white mb-3 max-w-3xl text-balance">
               {plan.title}
             </h1>
-            <div className="flex items-center gap-4 text-white/80">
+            <div className="flex flex-wrap items-center gap-x-5 gap-y-2 text-white/80">
               <span className="text-2xl md:text-3xl font-bold text-white">
                 {formatPrice(plan.price)}
               </span>
-              <span className="text-white/60">•</span>
+              <span className="text-white/40">·</span>
               <span>{plan.durationInHours} hours</span>
             </div>
           </div>
diff --git a/app/globals.css b/app/globals.css
index 8852cdf0c..572a0ebc9 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -71,6 +71,9 @@
     /* Elevation shadow color — themed below so dark-mode shadows stay visible */
     --shadow-color: 0 0% 0%;
 
+    /* Signature easing — fast start, long glide (UI overhaul motion system) */
+    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
+
     /* Maintenance banner height — set dynamically by MaintenanceBanner.tsx */
     --maintenance-banner-height: 0px;
 
@@ -1366,6 +1369,168 @@
   z-index: 10001 !important;
 }
 
+/* ══════════════════════════════════════════════════════════════════════════
+   UI overhaul — elevated monochrome primitives (fix/ui-overhaul)
+
+   Additive utilities shared by components/motion/* and the redesigned
+   landing/explore/detail surfaces. Everything here degrades gracefully:
+   masks are progressive enhancement, and every animation is silenced under
+   prefers-reduced-motion in the block at the bottom of this section.
+   ══════════════════════════════════════════════════════════════════════════ */
+
+@layer utilities {
+  /* Edge-fade masks so carousels and marquees dissolve instead of clipping */
+  .mask-fade-x {
+    -webkit-mask-image: linear-gradient(
+      90deg,
+      transparent,
+      black 6%,
+      black 94%,
+      transparent
+    );
+    mask-image: linear-gradient(
+      90deg,
+      transparent,
+      black 6%,
+      black 94%,
+      transparent
+    );
+  }
+
+  .mask-fade-b {
+    -webkit-mask-image: linear-gradient(180deg, black 70%, transparent 100%);
+    mask-image: linear-gradient(180deg, black 70%, transparent 100%);
+  }
+
+  /* Unified card interaction: one lift grammar across listings and details.
+     Pure transform+shadow so it composites without layout thrash. */
+  .card-lift {
+    transition:
+      transform 0.5s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)),
+      box-shadow 0.5s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)),
+      border-color 0.3s ease;
+    will-change: transform;
+  }
+
+  .card-lift:hover {
+    transform: translateY(-4px);
+  }
+
+  /* Sticky glass bar (detail-page action bars, explore sub-headers).
+     Theme-aware: translucent surface over any backdrop. */
+  .glass-bar {
+    background: hsl(var(--background) / 0.72);
+    -webkit-backdrop-filter: blur(20px) saturate(1.4);
+    backdrop-filter: blur(20px) saturate(1.4);
+    border-bottom: 1px solid hsl(var(--border) / 0.7);
+  }
+
+  .glass-bar-dark {
+    background: rgba(10, 10, 10, 0.55);
+    -webkit-backdrop-filter: blur(20px) saturate(1.4);
+    backdrop-filter: blur(20px) saturate(1.4);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  }
+
+  /* Hover sheen sweep — a single specular pass across buttons/cards.
+     Applied via ::after on .group:hover using the group-sheen trigger. */
+  .sheen {
+    position: relative;
+    overflow: hidden;
+  }
+
+  .sheen::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    transform: translateX(-120%) skewX(-18deg);
+    background: linear-gradient(
+      100deg,
+      transparent 30%,
+      rgba(255, 255, 255, 0.25) 50%,
+      transparent 70%
+    );
+    transition: transform 0.9s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
+    pointer-events: none;
+  }
+
+  .group:hover .sheen::after,
+  .sheen:hover::after {
+    transform: translateX(120%) skewX(-18deg);
+  }
+
+  /* Cursor spotlight — SpotlightGrid.tsx writes --sx/--sy in px; the radial
+     follows the pointer over a hairline grid. */
+  .spotlight-grid {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+
+  .spotlight-grid::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background-image:
+      linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
+      linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
+    background-size: 56px 56px;
+    -webkit-mask-image: radial-gradient(
+      320px circle at var(--sx, 50%) var(--sy, 40%),
+      black 0%,
+      transparent 75%
+    );
+    mask-image: radial-gradient(
+      320px circle at var(--sx, 50%) var(--sy, 40%),
+      black 0%,
+      transparent 75%
+    );
+  }
+
+  .spotlight-grid::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: radial-gradient(
+      480px circle at var(--sx, 50%) var(--sy, 40%),
+      rgba(255, 255, 255, 0.07),
+      transparent 65%
+    );
+  }
+
+  /* Underline sweep for inline links — grows from left on hover */
+  .link-sweep {
+    background-image: linear-gradient(currentColor, currentColor);
+    background-size: 0% 1px;
+    background-position: 0 100%;
+    background-repeat: no-repeat;
+    transition: background-size 0.45s var(
+        --ease-out-expo,
+        cubic-bezier(0.16, 1, 0.3, 1)
+      );
+  }
+
+  .link-sweep:hover {
+    background-size: 100% 1px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .card-lift,
+  .card-lift:hover {
+    transform: none !important;
+    transition-duration: 0.01ms !important;
+  }
+
+  .sheen::after {
+    display: none;
+  }
+
+  .link-sweep {
+    transition: none;
+  }
+}
+
 /* ─── Reduced motion ──────────────────────────────────────────────────────
  *
  * `<MotionConfig reducedMotion="user">` only governs framer-motion; it cannot
diff --git a/app/page.tsx b/app/page.tsx
index 6279d536c..065283bbc 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,21 +1,16 @@
 import { Suspense } from "react";
 
+import { SmoothScroll } from "@/components/motion";
 import { HeroSection } from "@/components/home/HeroSection";
-import { TrustedBySection } from "@/components/home/TrustedBySection";
 import { FeaturesSection } from "@/components/home/FeaturesSection";
 import { CategoriesSection } from "@/components/home/CategoriesSection";
 import { BenefitsSection } from "@/components/home/BenefitsSection";
-import { SuccessStoriesSection } from "@/components/home/SuccessStoriesSection";
 import { FeaturedExpertsSection } from "@/components/home/FeaturedExpertsSection";
-import { PlatformFeaturesSection } from "@/components/home/PlatformFeaturesSection";
 import { TestimonialsSection } from "@/components/home/TestimonialsSection";
 import { UpcomingEventsSection } from "@/components/home/UpcomingEventsSection";
-import { TrustBadgesSection } from "@/components/home/TrustBadgesSection";
 import { HowItWorksSection } from "@/components/home/HowItWorksSection";
-import { BecomeExpertSection } from "@/components/home/BecomeExpertSection";
-import { EnterpriseSection } from "@/components/home/EnterpriseSection";
+import { CTAFinaleSection } from "@/components/home/CTAFinaleSection";
 import { FAQSection } from "@/components/home/FAQSection";
-import { SatisfiedTestimonial } from "@/app/explore/experts/components/SatisfiedTestimonial";
 import { getHomeExperts, getHomeReviews, getHomeImages } from "@/lib/data/home";
 import { withBuildTimeRetry } from "@/lib/data/fail-open";
 import {
@@ -76,68 +71,49 @@ async function FeaturedExpertsLoader() {
 async function ReviewsLoader() {
   const reviews = await withBuildTimeRetry(getHomeReviews);
   if (reviews.length === 0) return null;
-  return (
-    <>
-      <TestimonialsSection reviews={reviews} isLoading={false} />
-      <UpcomingEventsSection reviews={reviews} />
-    </>
-  );
+  return <TestimonialsSection reviews={reviews} isLoading={false} />;
 }
 
 export default function Home() {
   return (
-    <main className="flex-1 w-full overflow-hidden">
-      {/* Hero - Black with animated orbs */}
-      <HeroSection />
-
-      {/* Trusted By / Logo Cloud - Dark */}
-      <TrustedBySection />
-
-      {/* Our Offerings - Dark charcoal with dot pattern */}
-      <FeaturesSection />
-
-      {/* Browse by Category - Light gradient */}
-      <CategoriesSection />
-
-      {/* Why Familiarise / Benefits - Light silver gradient */}
-      <Suspense fallback={<BenefitsSkeleton />}>
-        <BenefitsLoader />
-      </Suspense>
-
-      {/* Success Stories - Dark gradient */}
-      <SuccessStoriesSection />
+    <SmoothScroll>
+      <main className="flex-1 w-full overflow-hidden bg-zinc-950">
+        {/* Hero - full-viewport black stage, cursor spotlight, word reveal */}
+        <HeroSection />
 
-      {/* Featured Experts Marquee - White with dot pattern */}
-      <Suspense fallback={<FeaturedExpertsSkeleton />}>
-        <FeaturedExpertsLoader />
-      </Suspense>
+        {/* Our Offerings - dark bento grid */}
+        <FeaturesSection />
 
-      {/* Platform Features - Light with diagonal stripes */}
-      <PlatformFeaturesSection />
+        {/* Browse by Category - light scroll-snap rail */}
+        <CategoriesSection />
 
-      {/* Testimonials Marquee + Upcoming Events - Dark */}
-      <Suspense fallback={<TestimonialsSkeleton />}>
-        <ReviewsLoader />
-      </Suspense>
+        {/* Why Familiarise - sticky editorial split */}
+        <Suspense fallback={<BenefitsSkeleton />}>
+          <BenefitsLoader />
+        </Suspense>
 
-      {/* Trust & Security Badges - Dark strip */}
-      <TrustBadgesSection />
+        {/* How It Works - numbered steps on a dark stage */}
+        <HowItWorksSection />
 
-      {/* How It Works - Light with circles */}
-      <HowItWorksSection />
+        {/* Featured Experts Marquee */}
+        <Suspense fallback={<FeaturedExpertsSkeleton />}>
+          <FeaturedExpertsLoader />
+        </Suspense>
 
-      {/* For teams & organisations - Dark. Sits next to the expert CTA so the
-          two "which side are you on?" paths are adjacent at the page's end. */}
-      <EnterpriseSection />
+        {/* Testimonials dual marquee */}
+        <Suspense fallback={<TestimonialsSkeleton />}>
+          <ReviewsLoader />
+        </Suspense>
 
-      {/* Become an Expert CTA - Light mesh gradient */}
-      <BecomeExpertSection />
+        {/* Upcoming live sessions - static curated data, no read to guard */}
+        <UpcomingEventsSection />
 
-      {/* Explore Testimonials - Dark */}
-      <SatisfiedTestimonial />
+        {/* Closing choice: become an expert vs bring your team */}
+        <CTAFinaleSection />
 
-      {/* FAQ - Clean white */}
-      <FAQSection />
-    </main>
+        {/* FAQ */}
+        <FAQSection />
+      </main>
+    </SmoothScroll>
   );
 }
diff --git a/components/home/BecomeExpertSection.tsx b/components/home/BecomeExpertSection.tsx
deleted file mode 100644
index c803f61d1..000000000
--- a/components/home/BecomeExpertSection.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-"use client";
-
-import { motion } from "framer-motion";
-import { ArrowRight, Clock, Mic, Target } from "lucide-react";
-import Link from "next/link";
-
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-
-const EXPERT_BENEFITS = [
-  { icon: Target, label: "Set Your Rates" },
-  { icon: Clock, label: "Flexible Schedule" },
-  { icon: Mic, label: "Build Your Brand" },
-];
-
-export function BecomeExpertSection() {
-  return (
-    <section className="py-20 md:py-32 bg-gradient-to-br from-zinc-200 via-zinc-100 to-white relative overflow-hidden">
-      <div className="absolute inset-0">
-        <div className="absolute top-1/4 right-1/4 w-[400px] h-[400px] bg-zinc-300/50 rounded-full blur-[100px] animate-blob" />
-        <div className="absolute bottom-1/4 left-1/4 w-[500px] h-[500px] bg-zinc-200/50 rounded-full blur-[100px] animate-blob animation-delay-2000" />
-      </div>
-      <div className="absolute inset-0 dot-pattern-light opacity-40" />
-
-      <div className="container mx-auto px-4 md:px-6 relative z-10">
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          whileInView={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.5 }}
-          viewport={{ once: true }}
-          className="max-w-3xl mx-auto text-center"
-        >
-          <Badge
-            variant="secondary"
-            className="mb-4 bg-primary text-primary-foreground hover:bg-primary"
-          >
-            Share Your Expertise
-          </Badge>
-          <h2 className="text-fluid-4xl font-bold text-foreground mb-6 tracking-tight">
-            Become an expert on{" "}
-            <span className="text-muted-foreground">Familiarise</span>
-          </h2>
-          <p className="text-lg text-muted-foreground mb-8 max-w-2xl mx-auto">
-            Join our network of professionals. Share your knowledge, build your
-            personal brand, and earn while helping others grow.
-          </p>
-
-          {/* Expert benefits */}
-          <div className="grid sm:grid-cols-3 gap-6 mb-10">
-            {EXPERT_BENEFITS.map((item, i) => (
-              <motion.div
-                key={item.label}
-                initial={{ opacity: 0, y: 20 }}
-                whileInView={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.4, delay: i * 0.1 }}
-                viewport={{ once: true }}
-                className="flex items-center justify-center gap-2 text-foreground"
-              >
-                <item.icon className="w-5 h-5" />
-                <span className="font-medium">{item.label}</span>
-              </motion.div>
-            ))}
-          </div>
-
-          <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
-            <Link href="/become-an-expert">
-              <Button
-                size="lg"
-                className="bg-primary hover:bg-primary/90 text-primary-foreground px-8 h-14 text-base rounded-xl shadow-elevation-3"
-              >
-                Apply as Expert
-                <ArrowRight className="ml-2 w-5 h-5" />
-              </Button>
-            </Link>
-            <Button
-              size="lg"
-              variant="outline"
-              className="px-8 h-14 text-base rounded-xl border-border hover:bg-muted"
-            >
-              Learn More
-            </Button>
-          </div>
-        </motion.div>
-      </div>
-    </section>
-  );
-}
diff --git a/components/home/BenefitsSection.tsx b/components/home/BenefitsSection.tsx
index 08c5dc4d9..5fe6d6f1e 100644
--- a/components/home/BenefitsSection.tsx
+++ b/components/home/BenefitsSection.tsx
@@ -1,8 +1,10 @@
 "use client";
 
 import { motion } from "framer-motion";
-import { CheckCircle2 } from "lucide-react";
+import { ArrowUpRight } from "lucide-react";
+import Link from "next/link";
 
+import { RevealGroup, RevealItem, Reveal } from "@/components/motion";
 import { Badge } from "@/components/ui/badge";
 import { renderLCPImage } from "@/utils/image";
 import type { SupabaseImageFile } from "@/lib/supabase";
@@ -14,91 +16,73 @@ interface BenefitsSectionProps {
 
 export function BenefitsSection({ images }: BenefitsSectionProps) {
   return (
-    <section className="py-20 md:py-32 bg-gradient-to-b from-zinc-100 to-white relative overflow-hidden">
-      <div className="absolute inset-0 grid-pattern-dark opacity-50" />
+    <section className="bg-background py-20 md:py-32 relative overflow-hidden">
+      <div className="container mx-auto px-4 md:px-6">
+        <div className="grid gap-14 lg:grid-cols-2 lg:gap-20">
+          {/* Sticky editorial column */}
+          <div className="lg:sticky lg:top-32 self-start">
+            <Reveal>
+              <Badge variant="secondary" className="mb-4 rounded-full border-0">
+                Why Familiarise
+              </Badge>
+              <h2 className="text-fluid-4xl font-bold tracking-tight text-foreground text-balance">
+                Years of insight,{" "}
+                <span className="gradient-text-dark">compressed into hours</span>
+              </h2>
+              <p className="mt-5 max-w-md leading-relaxed text-muted-foreground">
+                Join thousands of professionals accelerating their careers
+                through personalised mentorship and expert guidance.
+              </p>
+              <Link
+                href="/explore/experts"
+                className="group mt-8 inline-flex items-center gap-1.5 text-sm font-medium text-foreground"
+              >
+                <span className="link-sweep pb-0.5">Start learning today</span>
+                <ArrowUpRight className="h-4 w-4 transition-transform duration-300 group-hover:-translate-y-0.5 group-hover:translate-x-0.5" />
+              </Link>
+            </Reveal>
 
-      {/* Decorative elements */}
-      <div className="absolute top-20 left-10 w-72 h-72 bg-zinc-200/50 rounded-full blur-[100px]" />
-      <div className="absolute bottom-20 right-10 w-96 h-96 bg-zinc-300/30 rounded-full blur-[120px]" />
-
-      <div className="container mx-auto px-4 md:px-6 relative z-10">
-        <div className="grid lg:grid-cols-2 gap-16 items-center">
-          <motion.div
-            initial={{ opacity: 0, x: -30 }}
-            whileInView={{ opacity: 1, x: 0 }}
-            transition={{ duration: 0.6 }}
-            viewport={{ once: true }}
-          >
-            <Badge
-              variant="secondary"
-              className="mb-4 bg-secondary text-secondary-foreground hover:bg-secondary border-0"
-            >
-              Why Familiarise?
-            </Badge>
-            <h2 className="text-fluid-4xl font-bold text-foreground mb-6 tracking-tight">
-              Transform your career with{" "}
-              <span className="text-muted-foreground">expert guidance</span>
-            </h2>
-            <p className="text-lg text-muted-foreground mb-8">
-              Join thousands of professionals who have accelerated their careers
-              through personalized mentorship and expert guidance.
-            </p>
+            {/* Session imagery */}
+            <Reveal delay={0.15} className="relative mt-12 hidden lg:block">
+              <div className="overflow-hidden rounded-2xl border border-border shadow-card">
+                {renderLCPImage(images, 0, "/placeholder.svg", 600, 400)}
+              </div>
+            </Reveal>
+          </div>
 
-            <div className="space-y-6">
-              {BENEFITS.map((benefit, index) => (
-                <motion.div
-                  key={benefit.title}
-                  initial={{ opacity: 0, x: -20 }}
-                  whileInView={{ opacity: 1, x: 0 }}
-                  transition={{ duration: 0.5, delay: index * 0.1 }}
-                  viewport={{ once: true }}
-                  className="flex gap-4 group"
-                >
-                  <div className="w-12 h-12 rounded-xl bg-primary flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform shadow-elevation-2">
-                    <benefit.icon className="w-6 h-6 text-primary-foreground" />
-                  </div>
-                  <div className="min-w-0">
-                    <h4 className="font-semibold text-foreground mb-1">
+          {/* Benefits ledger */}
+          <RevealGroup stagger={0.1} className="flex flex-col divide-y divide-border/70 border-y border-border/70">
+            {BENEFITS.map((benefit, index) => (
+              <RevealItem key={benefit.title}>
+                <div className="group flex items-start gap-6 py-9 transition-colors">
+                  <span className="pt-1 font-mono text-xs text-muted-foreground/60">
+                    {String(index + 1).padStart(2, "0")}
+                  </span>
+                  <div className="transition-transform duration-500 ease-[cubic-bezier(0.16,1,0.3,1)] group-hover:translate-x-1.5">
+                    <h4 className="text-xl font-semibold tracking-tight text-foreground flex items-center gap-3">
+                      <benefit.icon className="h-5 w-5 text-muted-foreground" />
                       {benefit.title}
                     </h4>
-                    <p className="text-muted-foreground text-sm leading-relaxed">
+                    <p className="mt-2 max-w-lg leading-relaxed text-muted-foreground">
                       {benefit.description}
                     </p>
                   </div>
-                </motion.div>
-              ))}
-            </div>
-          </motion.div>
-
-          <motion.div
-            initial={{ opacity: 0, x: 30 }}
-            whileInView={{ opacity: 1, x: 0 }}
-            transition={{ duration: 0.6 }}
-            viewport={{ once: true }}
-            className="relative"
-          >
-            <div className="relative rounded-2xl overflow-hidden shadow-elevation-3 border border-border">
-              {renderLCPImage(images, 0, "/placeholder.svg", 600, 400)}
-            </div>
-            {/* Floating card decoration */}
-            <div className="absolute -bottom-6 -left-6 bg-card rounded-xl shadow-elevation-3 p-4 hidden md:block border border-border">
-              <div className="flex items-center gap-3">
-                <div className="w-10 h-10 rounded-full bg-primary flex items-center justify-center">
-                  <CheckCircle2 className="w-5 h-5 text-primary-foreground" />
                 </div>
-                <div>
-                  <p className="font-semibold text-foreground text-sm">
-                    Session Complete
-                  </p>
-                  <p className="text-xs text-muted-foreground">
-                    Great progress today!
-                  </p>
-                </div>
-              </div>
-            </div>
-          </motion.div>
+              </RevealItem>
+            ))}
+          </RevealGroup>
         </div>
       </div>
+
+      {/* Soft ambient wash */}
+      <motion.div
+        aria-hidden
+        initial={{ opacity: 0 }}
+        whileInView={{ opacity: 1 }}
+        viewport={{ once: true }}
+        transition={{ duration: 1.2 }}
+        className="pointer-events-none absolute -right-40 top-1/3 h-[420px] w-[420px] rounded-full bg-zinc-200/40 blur-[120px]"
+      />
     </section>
   );
 }
diff --git a/components/home/CTAFinaleSection.tsx b/components/home/CTAFinaleSection.tsx
new file mode 100644
index 000000000..1149fe2d1
--- /dev/null
+++ b/components/home/CTAFinaleSection.tsx
@@ -0,0 +1,126 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { ArrowRight, Building2, Mic } from "lucide-react";
+import Link from "next/link";
+
+import { Reveal } from "@/components/motion";
+
+const PATHS = [
+  {
+    icon: Mic,
+    eyebrow: "For experts",
+    title: "Teach what you know",
+    description:
+      "Set your rates, choose your schedule, and build your brand on a platform that handles payments, scheduling and delivery for you.",
+    cta: "Apply as an expert",
+    href: "/become-an-expert",
+    links: [
+      { label: "Expert networks", href: "/explore/enterprise/organisations" },
+    ],
+  },
+  {
+    icon: Building2,
+    eyebrow: "For teams",
+    title: "Upskill your organisation",
+    description:
+      "One plan covering every seat, sponsored sessions with budgets, GST-compliant invoicing — or run your own expert network.",
+    cta: "Explore for enterprise",
+    href: "/enterprise",
+    links: [{ label: "Browse organisations", href: "/explore/enterprise/organisations" }],
+  },
+];
+
+/**
+ * Closing CTA — a split stage where the hovered panel brightens while its
+ * sibling dims. Replaces the separate BecomeExpert/Enterprise sections so the
+ * page ends with one decisive "which side are you on?" choice.
+ */
+export function CTAFinaleSection() {
+  return (
+    <section className="bg-background py-20 md:py-28">
+      <div className="container mx-auto px-4 md:px-6">
+        <Reveal>
+          <h2 className="sr-only">Join Familiarise</h2>
+          <div className="grid overflow-hidden rounded-3xl border border-border shadow-card lg:grid-cols-2">
+            {PATHS.map((path, i) => (
+              <motion.div
+                key={path.eyebrow}
+                initial={{ opacity: 0, y: 24 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{
+                  duration: 0.7,
+                  delay: i * 0.12,
+                  ease: [0.16, 1, 0.3, 1],
+                }}
+                className={`group relative flex flex-col justify-between gap-10 p-8 md:p-12 ${
+                  i === 0
+                    ? "bg-zinc-950 text-white"
+                    : "border-t border-border bg-smoke text-foreground lg:border-l lg:border-t-0"
+                }`}
+              >
+                {/* Hover glow */}
+                <div
+                  aria-hidden
+                  className="pointer-events-none absolute -inset-x-10 -top-24 h-56 opacity-0 transition-opacity duration-700 group-hover:opacity-100"
+                  style={{
+                    background:
+                      "radial-gradient(400px circle at 50% 0%, rgba(255,255,255,0.08), transparent 70%)",
+                  }}
+                />
+                <div className="relative z-10">
+                  <span
+                    className={`inline-flex items-center gap-2 rounded-full border px-3 py-1 text-xs font-medium tracking-wide uppercase ${
+                      i === 0
+                        ? "border-white/15 bg-white/[0.05] text-zinc-300"
+                        : "border-border bg-secondary text-muted-foreground"
+                    }`}
+                  >
+                    <path.icon className="h-3.5 w-3.5" />
+                    {path.eyebrow}
+                  </span>
+                  <h3 className="mt-6 text-fluid-3xl font-bold tracking-tight text-balance">
+                    {path.title}
+                  </h3>
+                  <p
+                    className={`mt-4 max-w-md leading-relaxed ${
+                      i === 0 ? "text-zinc-400" : "text-muted-foreground"
+                    }`}
+                  >
+                    {path.description}
+                  </p>
+                </div>
+
+                <div className="relative z-10 flex flex-wrap items-center gap-5">
+                  <Link
+                    href={path.href}
+                    className={`sheen group/btn inline-flex h-12 items-center gap-2 rounded-full px-7 text-sm font-medium transition-transform duration-300 hover:-translate-y-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${
+                      i === 0
+                        ? "sheen bg-white text-black hover:bg-zinc-200"
+                        : "bg-primary text-primary-foreground hover:bg-primary/90"
+                    }`}
+                  >
+                    {path.cta}
+                    <ArrowRight className="h-4 w-4 transition-transform duration-300 group-hover/btn:translate-x-1" />
+                  </Link>
+                  {path.links.map((link) => (
+                    <Link
+                      key={link.label}
+                      href={link.href}
+                      className={`text-sm link-sweep pb-0.5 ${
+                        i === 0 ? "text-zinc-400" : "text-muted-foreground"
+                      }`}
+                    >
+                      {link.label}
+                    </Link>
+                  ))}
+                </div>
+              </motion.div>
+            ))}
+          </div>
+        </Reveal>
+      </div>
+    </section>
+  );
+}
diff --git a/components/home/CategoriesSection.tsx b/components/home/CategoriesSection.tsx
index 540c34e92..206d2d872 100644
--- a/components/home/CategoriesSection.tsx
+++ b/components/home/CategoriesSection.tsx
@@ -1,108 +1,124 @@
 "use client";
 
+import { useRef } from "react";
 import { motion } from "framer-motion";
-import { ChevronRight, LucideIcon } from "lucide-react";
+import { LucideIcon } from "lucide-react";
 import Link from "next/link";
 
 import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { Card, CardContent } from "@/components/ui/card";
 import { CATEGORIES } from "./data";
 
-function CategoryCard({
+function CategoryTile({
   category,
   index,
 }: {
-  category: { icon: LucideIcon; name: string; count: string; color: string };
+  category: { icon: LucideIcon; name: string; count: string };
   index: number;
 }) {
   const Icon = category.icon;
 
   return (
-    <motion.div
-      initial={{ opacity: 0, scale: 0.9 }}
-      whileInView={{ opacity: 1, scale: 1 }}
-      transition={{ duration: 0.4, delay: index * 0.05 }}
-      viewport={{ once: true }}
+    <Link
+      href={`/explore/experts?category=${category.name.toLowerCase()}`}
+      className="group relative flex min-h-[180px] w-[240px] shrink-0 snap-start flex-col justify-between overflow-hidden rounded-2xl border border-border bg-card p-6 transition-all duration-500 hover:border-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring md:w-[260px]"
     >
-      <Link href={`/explore/experts?category=${category.name.toLowerCase()}`}>
-        <Card className="group cursor-pointer border border-border bg-card hover:border-foreground/40 transition-all duration-300 hover:-translate-y-1 hover:shadow-elevation-2">
-          <CardContent className="p-6 flex items-center gap-4">
-            <div
-              className={`w-12 h-12 rounded-xl ${category.color} flex items-center justify-center group-hover:scale-110 transition-transform`}
-            >
-              <Icon className="w-6 h-6 text-white" />
-            </div>
-            <div className="min-w-0">
-              <h4 className="font-semibold text-foreground truncate">
-                {category.name}
-              </h4>
-              <p className="text-sm text-muted-foreground truncate">
-                {category.count}
-              </p>
-            </div>
-            <ChevronRight className="w-5 h-5 text-muted-foreground ml-auto group-hover:translate-x-1 transition-transform shrink-0" />
-          </CardContent>
-        </Card>
-      </Link>
-    </motion.div>
+      {/* Invert on hover */}
+      <div
+        aria-hidden
+        className="absolute inset-0 translate-y-full bg-zinc-950 transition-transform duration-500 ease-[cubic-bezier(0.16,1,0.3,1)] group-hover:translate-y-0"
+      />
+      <div className="relative z-10 flex items-start justify-between">
+        <Icon className="h-6 w-6 text-foreground transition-colors duration-500 group-hover:text-white" />
+        <span className="font-mono text-xs text-muted-foreground transition-colors duration-500 group-hover:text-zinc-500">
+          {String(index + 1).padStart(2, "0")}
+        </span>
+      </div>
+      <div className="relative z-10">
+        <h4 className="text-lg font-semibold tracking-tight text-foreground transition-colors duration-500 group-hover:text-white">
+          {category.name}
+        </h4>
+        <p className="text-sm text-muted-foreground transition-colors duration-500 group-hover:text-zinc-400">
+          {category.count}
+        </p>
+      </div>
+    </Link>
   );
 }
 
 export function CategoriesSection() {
-  return (
-    <section className="py-20 md:py-32 bg-gradient-to-b from-white to-zinc-50 relative overflow-hidden">
-      <div className="absolute inset-0 grid-pattern-dark opacity-30" />
+  const railRef = useRef<HTMLDivElement>(null);
 
-      <div className="container mx-auto px-4 md:px-6 relative z-10">
+  return (
+    <section className="bg-smoke py-20 md:py-28 relative overflow-hidden">
+      <div className="container mx-auto px-4 md:px-6">
         <motion.div
           initial={{ opacity: 0, y: 20 }}
           whileInView={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.5 }}
+          transition={{ duration: 0.6, ease: [0.16, 1, 0.3, 1] }}
           viewport={{ once: true }}
-          className="text-center mb-12"
+          className="mb-12 flex flex-col gap-4 md:flex-row md:items-end md:justify-between"
         >
-          <Badge
-            variant="secondary"
-            className="mb-4 bg-secondary text-secondary-foreground hover:bg-secondary border-0"
-          >
-            Categories
-          </Badge>
-          <h2 className="text-fluid-4xl font-bold text-foreground mb-4 tracking-tight">
-            Browse by <span className="text-muted-foreground">expertise</span>
-          </h2>
-          <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
-            Find experts in your field and start learning from the best
-          </p>
+          <div>
+            <Badge variant="secondary" className="mb-4 rounded-full border-0">
+              Categories
+            </Badge>
+            <h2 className="text-fluid-4xl font-bold tracking-tight text-foreground">
+              Browse by <span className="text-muted-foreground">expertise</span>
+            </h2>
+          </div>
+          {/* Scroll affordance for pointer devices; touch users swipe natively */}
+          <div className="hidden gap-2 md:flex">
+            {[-1, 1].map((dir) => (
+              <button
+                key={dir}
+                type="button"
+                aria-label={dir === -1 ? "Scroll categories left" : "Scroll categories right"}
+                onClick={() =>
+                  railRef.current?.scrollBy({
+                    left: dir * 300,
+                    behavior: "smooth",
+                  })
+                }
+                className="flex h-11 w-11 items-center justify-center rounded-full border border-border bg-card text-foreground transition-colors hover:bg-primary hover:text-primary-foreground"
+              >
+                <svg
+                  width="16"
+                  height="16"
+                  viewBox="0 0 16 16"
+                  fill="none"
+                  style={{ transform: dir === -1 ? "rotate(180deg)" : undefined }}
+                >
+                  <path
+                    d="M3 8h10M9 4l4 4-4 4"
+                    stroke="currentColor"
+                    strokeWidth="1.5"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
+                </svg>
+              </button>
+            ))}
+          </div>
         </motion.div>
 
-        <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
-          {CATEGORIES.map((category, index) => (
-            <CategoryCard
-              key={category.name}
-              category={category}
-              index={index}
-            />
-          ))}
-        </div>
-
         <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          whileInView={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.5, delay: 0.3 }}
+          initial={{ opacity: 0 }}
+          whileInView={{ opacity: 1 }}
+          transition={{ duration: 0.7, delay: 0.15 }}
           viewport={{ once: true }}
-          className="text-center mt-10"
         >
-          <Link href="/explore/experts">
-            <Button
-              variant="outline"
-              size="lg"
-              className="border-border hover:bg-muted"
-            >
-              View All Categories
-              <ChevronRight className="ml-2 w-4 h-4" />
-            </Button>
-          </Link>
+          <div
+            ref={railRef}
+            className="-mx-4 flex snap-x snap-mandatory gap-4 overflow-x-auto px-4 pb-4 scrollbar-hide mask-fade-x md:-mx-6 md:px-6"
+          >
+            {CATEGORIES.map((category, index) => (
+              <CategoryTile
+                key={category.name}
+                category={category}
+                index={index}
+              />
+            ))}
+          </div>
         </motion.div>
       </div>
     </section>
diff --git a/components/home/EnterpriseSection.tsx b/components/home/EnterpriseSection.tsx
deleted file mode 100644
index 009039289..000000000
--- a/components/home/EnterpriseSection.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-"use client";
-
-import { motion } from "framer-motion";
-import { ArrowRight, Building2 } from "lucide-react";
-import Link from "next/link";
-
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-
-import { ENTERPRISE_FEATURES } from "./data";
-
-/**
- * The B2C page had no path for the buyer who arrives on behalf of an
- * organisation — the enterprise subsystem (sponsored bookings, procurement
- * invoicing, hosted expert networks) was invisible from the landing page.
- */
-export function EnterpriseSection() {
-  return (
-    <section className="py-20 md:py-28 bg-zinc-950 relative overflow-hidden">
-      <div className="absolute inset-0 grid-pattern opacity-20" />
-      <div className="absolute top-1/3 left-1/4 w-[420px] h-[420px] bg-zinc-800/30 rounded-full blur-[120px] animate-blob" />
-
-      <div className="container mx-auto px-4 md:px-6 relative z-10">
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          whileInView={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.5 }}
-          viewport={{ once: true }}
-          className="max-w-2xl mb-14"
-        >
-          <Badge
-            variant="outline"
-            className="mb-5 border-zinc-700 bg-zinc-800/50 text-zinc-300"
-          >
-            <Building2 className="w-3.5 h-3.5 mr-1.5" />
-            For teams &amp; organisations
-          </Badge>
-          <h2 className="text-fluid-4xl font-bold tracking-tight text-white mb-4">
-            Bring Familiarise to your{" "}
-            <span className="silver-text">whole team</span>
-          </h2>
-          <p className="text-lg text-zinc-400 leading-relaxed">
-            Sponsor sessions for your people, run structured mentorship
-            programs, or host your own experts on the platform — with the
-            billing and compliance your finance team expects.
-          </p>
-        </motion.div>
-
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-5 mb-12">
-          {ENTERPRISE_FEATURES.map((feature, index) => {
-            const Icon = feature.icon;
-            return (
-              <motion.div
-                key={feature.title}
-                initial={{ opacity: 0, y: 20 }}
-                whileInView={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.4, delay: index * 0.08 }}
-                viewport={{ once: true }}
-                className="flex gap-4 p-6 rounded-2xl bg-zinc-900/60 border border-zinc-800 backdrop-blur-sm"
-              >
-                <div className="w-11 h-11 rounded-xl bg-zinc-800 flex items-center justify-center shrink-0">
-                  <Icon className="w-5 h-5 text-zinc-300" />
-                </div>
-                <div className="min-w-0">
-                  <h3 className="font-semibold text-white mb-1.5">
-                    {feature.title}
-                  </h3>
-                  <p className="text-sm text-zinc-400 leading-relaxed">
-                    {feature.description}
-                  </p>
-                </div>
-              </motion.div>
-            );
-          })}
-        </div>
-
-        <motion.div
-          initial={{ opacity: 0 }}
-          whileInView={{ opacity: 1 }}
-          transition={{ duration: 0.5 }}
-          viewport={{ once: true }}
-          className="flex flex-col sm:flex-row gap-3"
-        >
-          <Button
-            size="lg"
-            className="w-full sm:w-auto bg-white text-zinc-900 hover:bg-zinc-200"
-            asChild
-          >
-            <Link href="/enterprise">
-              Explore Enterprise
-              <ArrowRight className="w-4 h-4 ml-2" />
-            </Link>
-          </Button>
-          <Button
-            size="lg"
-            variant="outline"
-            className="w-full sm:w-auto bg-transparent border-zinc-700 text-white hover:bg-zinc-800 hover:text-white"
-            asChild
-          >
-            <Link href="/explore/enterprise/organisations">
-              Browse organisations
-            </Link>
-          </Button>
-        </motion.div>
-      </div>
-    </section>
-  );
-}
diff --git a/components/home/FAQSection.tsx b/components/home/FAQSection.tsx
index f107e9e16..a9b02f14b 100644
--- a/components/home/FAQSection.tsx
+++ b/components/home/FAQSection.tsx
@@ -1,67 +1,72 @@
 "use client";
 
 import { motion } from "framer-motion";
+import Link from "next/link";
 
+import { Reveal } from "@/components/motion";
 import {
   Accordion,
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
 } from "@/components/ui/accordion";
-import { Badge } from "@/components/ui/badge";
 import { FAQ_ITEMS } from "./data";
 
 export function FAQSection() {
   return (
-    <section className="py-20 md:py-32 bg-background relative">
+    <section className="bg-smoke py-20 md:py-32">
       <div className="container mx-auto px-4 md:px-6">
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          whileInView={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.5 }}
-          viewport={{ once: true }}
-          className="text-center mb-12"
-        >
-          <Badge
-            variant="secondary"
-            className="mb-4 bg-secondary text-secondary-foreground hover:bg-secondary border-0"
-          >
-            FAQ
-          </Badge>
-          <h2 className="text-fluid-4xl font-bold text-foreground mb-4 tracking-tight">
-            Common <span className="text-muted-foreground">questions</span>
-          </h2>
-          <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
-            Everything you need to know about getting started
-          </p>
-        </motion.div>
+        <div className="grid gap-12 lg:grid-cols-[1fr_1.6fr] lg:gap-20">
+          {/* Editorial column */}
+          <Reveal className="self-start lg:sticky lg:top-32">
+            <h2 className="text-fluid-4xl font-bold tracking-tight text-foreground text-balance">
+              Common <span className="text-muted-foreground">questions</span>
+            </h2>
+            <p className="mt-4 max-w-sm leading-relaxed text-muted-foreground">
+              Everything you need to know about getting started. Still unsure?{" "}
+              <Link href="/contactus" className="link-sweep text-foreground pb-0.5 font-medium">
+                Talk to us
+              </Link>
+              .
+            </p>
+          </Reveal>
 
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          whileInView={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.5, delay: 0.1 }}
-          viewport={{ once: true }}
-          className="max-w-3xl mx-auto"
-        >
-          <Accordion type="single" collapsible className="space-y-4">
-            {FAQ_ITEMS.map((item, index) => (
-              <AccordionItem
-                key={index}
-                value={`item-${index}`}
-                className="border border-border rounded-xl px-6 bg-card shadow-elevation-1 hover:shadow-elevation-2 transition-shadow"
-              >
-                <AccordionTrigger className="text-left hover:no-underline py-5">
-                  <span className="font-medium text-foreground">
-                    {item.question}
-                  </span>
-                </AccordionTrigger>
-                <AccordionContent className="text-muted-foreground pb-5 leading-relaxed">
-                  {item.answer}
-                </AccordionContent>
-              </AccordionItem>
-            ))}
-          </Accordion>
-        </motion.div>
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6, delay: 0.1, ease: [0.16, 1, 0.3, 1] }}
+            viewport={{ once: true }}
+          >
+            <Accordion
+              type="single"
+              collapsible
+              defaultValue="item-0"
+              className="border-t border-border"
+            >
+              {FAQ_ITEMS.map((item, index) => (
+                <AccordionItem
+                  key={index}
+                  value={`item-${index}`}
+                  className="border-b border-border"
+                >
+                  <AccordionTrigger className="py-6 text-left hover:no-underline group">
+                    <span className="flex items-baseline gap-5">
+                      <span className="font-mono text-xs text-muted-foreground/60">
+                        {String(index + 1).padStart(2, "0")}
+                      </span>
+                      <span className="font-medium tracking-tight text-foreground transition-transform duration-500 ease-[cubic-bezier(0.16,1,0.3,1)] group-hover:translate-x-1">
+                        {item.question}
+                      </span>
+                    </span>
+                  </AccordionTrigger>
+                  <AccordionContent className="pb-6 pl-9 leading-relaxed text-muted-foreground">
+                    {item.answer}
+                  </AccordionContent>
+                </AccordionItem>
+              ))}
+            </Accordion>
+          </motion.div>
+        </div>
       </div>
     </section>
   );
diff --git a/components/home/FeaturedExpertsSection.tsx b/components/home/FeaturedExpertsSection.tsx
index 3c77c3054..675c807de 100644
--- a/components/home/FeaturedExpertsSection.tsx
+++ b/components/home/FeaturedExpertsSection.tsx
@@ -4,74 +4,73 @@ import { motion } from "framer-motion";
 import { ChevronRight, Star } from "lucide-react";
 import Link from "next/link";
 
+import { MarqueeRow, TiltCard } from "@/components/motion";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import { Card, CardContent } from "@/components/ui/card";
 import type { IConsultantCardData } from "@/types/consultant";
 
 function ExpertCard({ expert }: { expert: IConsultantCardData }) {
   return (
-    <Link
-      href={`/explore/experts/${expert.id}`}
-      className="block flex-shrink-0 w-[300px] mx-3"
-    >
-      <Card className="h-full border border-border bg-card overflow-hidden group hover:border-foreground/30 transition-all duration-300 hover:-translate-y-1 hover:shadow-elevation-3">
-        <CardContent className="p-6">
-          <div className="flex items-center gap-4 mb-4">
-            <Avatar className="w-16 h-16 border-2 border-border shadow-elevation-2">
+    <TiltCard className="w-[300px] md:w-[320px]" maxTilt={5}>
+      <Link
+        href={`/explore/experts/${expert.id}`}
+        className="block h-full rounded-2xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        tabIndex={0}
+      >
+        <div className="card-lift flex h-full flex-col rounded-2xl border border-border bg-card p-6 shadow-card hover:border-foreground/30 hover:shadow-lift">
+          <div className="mb-5 flex items-center gap-4">
+            <Avatar className="h-16 w-16 border border-border">
               <AvatarImage
                 src={expert.user.image ?? "/placeholder-user.jpg"}
                 alt={expert.user.name ?? "Expert"}
               />
-              <AvatarFallback className="bg-gradient-to-br from-zinc-700 to-zinc-900 text-white text-lg font-medium">
+              <AvatarFallback className="bg-gradient-to-br from-zinc-700 to-zinc-900 text-lg font-medium text-white">
                 {expert.user.name?.charAt(0) ?? "E"}
               </AvatarFallback>
             </Avatar>
-            <div className="flex-1 min-w-0">
-              <h4 className="font-semibold text-foreground truncate">
+            <div className="min-w-0 flex-1">
+              <h4 className="truncate font-semibold text-foreground">
                 {expert.user.name}
               </h4>
-              <p className="text-sm text-muted-foreground truncate">
+              <p className="truncate text-sm text-muted-foreground">
                 {expert.headline || expert.domain?.name}
               </p>
             </div>
           </div>
 
-          <div className="flex items-center gap-2 mb-4">
-            <div className="flex items-center gap-1">
-              <Star className="w-4 h-4 fill-foreground text-foreground" />
-              <span className="font-medium text-foreground">
+          <div className="mt-auto">
+            <div className="mb-4 flex items-center gap-2 text-sm">
+              <Star className="h-4 w-4 fill-foreground text-foreground" />
+              <span className="font-medium tabular-nums text-foreground">
                 {expert.rating.toFixed(1)}
               </span>
+              <span className="text-muted-foreground/60">·</span>
+              <span className="text-muted-foreground">{expert.experience}</span>
             </div>
-            <span className="text-muted-foreground/70">•</span>
-            <span className="text-sm text-muted-foreground">
-              {expert.experience}
-            </span>
-          </div>
 
-          <div className="flex flex-wrap gap-2">
-            {expert.tags?.slice(0, 3).map((tag) => (
-              <Badge
-                key={tag.id}
-                variant="secondary"
-                className="bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs border-0"
-              >
-                {tag.name}
-              </Badge>
-            ))}
+            <div className="flex flex-wrap gap-2">
+              {expert.tags?.slice(0, 3).map((tag) => (
+                <Badge
+                  key={tag.id}
+                  variant="secondary"
+                  className="rounded-full border-0 bg-secondary text-xs"
+                >
+                  {tag.name}
+                </Badge>
+              ))}
+            </div>
           </div>
-        </CardContent>
-      </Card>
-    </Link>
+        </div>
+      </Link>
+    </TiltCard>
   );
 }
 
 function ExpertLoadingSkeleton() {
   return (
-    <div className="flex-shrink-0 w-[300px] mx-3">
-      <Card className="h-[200px] animate-pulse bg-muted border-0" />
+    <div className="w-[300px] shrink-0 md:w-[320px]">
+      <div className="h-[212px] animate-pulse rounded-2xl bg-muted" />
     </div>
   );
 }
@@ -86,63 +85,47 @@ export function FeaturedExpertsSection({
   isLoading,
 }: FeaturedExpertsSectionProps) {
   return (
-    <section className="py-20 md:py-32 bg-background overflow-hidden relative">
-      <div className="absolute inset-0 dot-pattern-light opacity-60" />
-
-      <div className="container mx-auto px-4 md:px-6 mb-12 relative z-10">
+    <section className="bg-background relative overflow-hidden py-20 md:py-28">
+      <div className="container mx-auto mb-12 px-4 md:px-6">
         <motion.div
           initial={{ opacity: 0, y: 20 }}
           whileInView={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.5 }}
+          transition={{ duration: 0.6, ease: [0.16, 1, 0.3, 1] }}
           viewport={{ once: true }}
-          className="flex flex-col md:flex-row md:items-end md:justify-between gap-6"
+          className="flex flex-col gap-6 md:flex-row md:items-end md:justify-between"
         >
           <div>
-            <Badge
-              variant="secondary"
-              className="mb-4 bg-secondary text-secondary-foreground hover:bg-secondary border-0"
-            >
+            <Badge variant="secondary" className="mb-4 rounded-full border-0">
               Featured Experts
             </Badge>
-            <h2 className="text-fluid-4xl font-bold text-foreground mb-2 tracking-tight">
+            <h2 className="text-fluid-4xl font-bold tracking-tight text-foreground">
               Learn from{" "}
               <span className="text-muted-foreground">industry leaders</span>
             </h2>
-            <p className="text-lg text-muted-foreground">
-              Handpicked professionals ready to guide your journey
+            <p className="mt-3 max-w-md text-muted-foreground">
+              Handpicked professionals ready to guide your journey.
             </p>
           </div>
           <Link href="/explore/experts">
-            <Button
-              variant="outline"
-              className="group border-border hover:bg-muted"
-            >
+            <Button variant="outline" className="group rounded-full">
               View All Experts
-              <ChevronRight className="ml-1 w-4 h-4 group-hover:translate-x-1 transition-transform" />
+              <ChevronRight className="ml-1 h-4 w-4 transition-transform duration-300 group-hover:translate-x-1" />
             </Button>
           </Link>
         </motion.div>
       </div>
 
-      {/* Marquee */}
-      <div className="relative">
-        <div className="absolute left-0 top-0 bottom-0 w-32 bg-gradient-to-r from-background to-transparent z-10" />
-        <div className="absolute right-0 top-0 bottom-0 w-32 bg-gradient-to-l from-background to-transparent z-10" />
-
-        <div className="flex animate-marquee">
-          {isLoading ? (
-            Array.from({ length: 6 }).map((_, i) => (
-              <ExpertLoadingSkeleton key={i} />
+      {/* Pause on hover so cards stay readable and clickable; reduced-motion
+          users get native scrolling via the globals.css override. */}
+      <MarqueeRow duration={48} fadeEdges={false}>
+        {isLoading
+          ? Array.from({ length: 6 }).map((_, i) => (
+              <ExpertLoadingSkeleton key={`skeleton-${i}`} />
             ))
-          ) : (
-            <>
-              {[...experts, ...experts].map((expert, i) => (
-                <ExpertCard key={`${expert.id}-${i}`} expert={expert} />
-              ))}
-            </>
-          )}
-        </div>
-      </div>
+          : experts.map((expert) => (
+              <ExpertCard key={expert.id} expert={expert} />
+            ))}
+      </MarqueeRow>
     </section>
   );
 }
diff --git a/components/home/FeaturesSection.tsx b/components/home/FeaturesSection.tsx
index 34ff893ad..854cded79 100644
--- a/components/home/FeaturesSection.tsx
+++ b/components/home/FeaturesSection.tsx
@@ -2,12 +2,16 @@
 
 import { motion } from "framer-motion";
 import { LucideIcon } from "lucide-react";
+import Link from "next/link";
 
+import { RevealGroup, RevealItem } from "@/components/motion";
 import { Badge } from "@/components/ui/badge";
-import { Card, CardContent } from "@/components/ui/card";
 import { FEATURES } from "./data";
 
-function FeatureCard({
+/** Bento layout: generous half-width cells in a 2×2 arrangement. */
+const SPANS = ["", "", "", ""];
+
+function OfferingCell({
   feature,
   index,
 }: {
@@ -22,67 +26,97 @@ function FeatureCard({
   const Icon = feature.icon;
 
   return (
-    <motion.div
-      initial={{ opacity: 0, y: 30 }}
-      whileInView={{ opacity: 1, y: 0 }}
-      transition={{ duration: 0.5, delay: index * 0.1 }}
-      viewport={{ once: true }}
-    >
-      <Card className="feature-card-dark h-full border-0 bg-zinc-900/80 backdrop-blur-sm overflow-hidden group relative">
-        <div className="absolute inset-0 bg-gradient-to-br from-white/[0.02] to-transparent" />
-        <div className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 bg-gradient-to-br from-white/[0.05] to-transparent" />
-        <CardContent className="p-6 md:p-8 relative z-10">
-          <div
-            className={`w-14 h-14 rounded-2xl bg-gradient-to-br ${feature.gradient} flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300 shadow-lg`}
-          >
-            <Icon className="w-7 h-7 text-white" />
+    <RevealItem className={SPANS[index % SPANS.length]}>
+      <Link
+        href={index === 0 ? "/explore/experts" : "/explore/programs"}
+        className="group relative flex h-full flex-col justify-between overflow-hidden rounded-2xl border border-white/[0.08] bg-zinc-900/60 p-7 md:p-9 transition-colors duration-500 hover:border-white/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+      >
+        {/* Hover glow */}
+        <div
+          aria-hidden
+          className="pointer-events-none absolute -inset-24 opacity-0 transition-opacity duration-700 group-hover:opacity-100"
+          style={{
+            background:
+              "radial-gradient(420px circle at 50% 0%, rgba(255,255,255,0.07), transparent 65%)",
+          }}
+        />
+
+        <div className="relative z-10">
+          <div className="flex items-start justify-between">
+            <div className="flex h-12 w-12 items-center justify-center rounded-xl border border-white/10 bg-white/[0.04] transition-transform duration-500 group-hover:-translate-y-1 group-hover:scale-105">
+              <Icon className="h-5 w-5 text-white" />
+            </div>
+            <span className="font-mono text-xs text-zinc-600">
+              {String(index + 1).padStart(2, "0")}
+            </span>
           </div>
-          <h3 className="text-xl font-semibold mb-3 text-white">
+          <h3 className="mt-8 text-xl md:text-2xl font-semibold tracking-tight text-white">
             {feature.title}
           </h3>
-          <p className="text-zinc-400 leading-relaxed">{feature.description}</p>
-        </CardContent>
-      </Card>
-    </motion.div>
+          <p className="mt-3 max-w-md leading-relaxed text-zinc-400">
+            {feature.description}
+          </p>
+        </div>
+
+        <span
+          aria-hidden
+          className="mt-8 inline-flex translate-y-1 items-center gap-1 text-sm text-zinc-500 opacity-0 transition-all duration-500 group-hover:translate-y-0 group-hover:text-white group-hover:opacity-100"
+        >
+          Explore
+          <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
+            <path
+              d="M3 8h10M9 4l4 4-4 4"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+        </span>
+      </Link>
+    </RevealItem>
   );
 }
 
 export function FeaturesSection() {
   return (
-    <section className="py-20 md:py-32 bg-zinc-950 relative overflow-hidden">
-      <div className="absolute inset-0 dot-pattern opacity-40" />
-
-      {/* Accent gradient */}
-      <div className="absolute top-0 right-0 w-1/2 h-1/2 bg-gradient-to-bl from-zinc-800/30 to-transparent blur-[100px]" />
-
+    <section className="bg-zinc-950 py-20 md:py-28 relative overflow-hidden">
       <div className="container mx-auto px-4 md:px-6 relative z-10">
         <motion.div
           initial={{ opacity: 0, y: 20 }}
           whileInView={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.5 }}
+          transition={{ duration: 0.6, ease: [0.16, 1, 0.3, 1] }}
           viewport={{ once: true }}
-          className="text-center mb-16"
+          className="mb-14 flex flex-col gap-6 md:flex-row md:items-end md:justify-between"
         >
-          <Badge
-            variant="secondary"
-            className="mb-4 bg-zinc-800 text-zinc-300 hover:bg-zinc-800 border-zinc-700"
-          >
-            Our Offerings
-          </Badge>
-          <h2 className="text-fluid-4xl font-bold text-white mb-4 tracking-tight">
-            Multiple ways to <span className="text-zinc-400">learn & grow</span>
-          </h2>
-          <p className="text-lg text-zinc-500 max-w-2xl mx-auto">
-            Choose the format that works best for your learning style and
-            schedule
+          <div className="max-w-xl">
+            <Badge
+              variant="secondary"
+              className="mb-4 rounded-full border-zinc-800 bg-zinc-800/60 text-zinc-300 hover:bg-zinc-800"
+            >
+              Our Offerings
+            </Badge>
+            <h2 className="text-fluid-4xl font-bold tracking-tight text-white">
+              Four ways to <span className="silver-text">learn &amp; grow</span>
+            </h2>
+          </div>
+          <p className="max-w-sm text-muted-foreground md:text-right">
+            Pick the format that fits your learning style and schedule.
           </p>
         </motion.div>
 
-        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
+        <RevealGroup
+          stagger={0.09}
+          className="grid grid-cols-1 gap-4 md:grid-cols-2 md:gap-5"
+        >
           {FEATURES.map((feature, index) => (
-            <FeatureCard key={feature.title} feature={feature} index={index} />
+            <OfferingCell
+              key={feature.title}
+              feature={feature}
+              index={index}
+            />
           ))}
-        </div>
+        </RevealGroup>
       </div>
     </section>
   );
diff --git a/components/home/HeroSection.tsx b/components/home/HeroSection.tsx
index af8ca52fd..0a02e37da 100644
--- a/components/home/HeroSection.tsx
+++ b/components/home/HeroSection.tsx
@@ -1,169 +1,181 @@
 "use client";
 
-import { useCallback } from "react";
-import { motion, useInView } from "framer-motion";
+import { motion } from "framer-motion";
 import { ArrowRight, Sparkles } from "lucide-react";
 import Link from "next/link";
-import { useRef, useState, useEffect } from "react";
 
 import { Button } from "@/components/ui/button";
-import { STATS } from "./data";
-
-function AnimatedNumber({
-  value,
-  suffix = "",
-}: {
-  value: number;
-  suffix: string;
-}) {
-  const ref = useRef(null);
-  const isInView = useInView(ref, { once: true });
-  const [displayValue, setDisplayValue] = useState(0);
-
-  const animate = useCallback(() => {
-    const duration = 2000;
-    const steps = 60;
-    const increment = value / steps;
-    let current = 0;
-    const timer = setInterval(() => {
-      current += increment;
-      if (current >= value) {
-        setDisplayValue(value);
-        clearInterval(timer);
-      } else {
-        setDisplayValue(Math.floor(current));
-      }
-    }, duration / steps);
-    return () => clearInterval(timer);
-  }, [value]);
-
-  useEffect(() => {
-    if (isInView) {
-      return animate();
-    }
-  }, [isInView, animate]);
-
-  return (
-    <motion.span
-      ref={ref}
-      className="text-4xl md:text-5xl font-bold text-white tabular-nums"
-    >
-      {value % 1 !== 0
-        ? displayValue.toFixed(1)
-        : displayValue.toLocaleString()}
-      {suffix}
-    </motion.span>
-  );
-}
+import {
+  AnimatedNumber,
+  MarqueeRow,
+  SpotlightGrid,
+  wordRevealChild,
+  wordRevealParent,
+} from "@/components/motion";
+import { COMPANY_LOGOS, STATS } from "./data";
 
+/**
+ * Hero — full-viewport black stage with a cursor-following spotlight grid.
+ * The headline rises word-by-word from a clipped line (SSR-safe: words are
+ * split at module scope, not in an effect), stats count up on load, and the
+ * trusted-by logo cloud rides a marquee along the bottom edge.
+ */
 export function HeroSection() {
-  return (
-    <section className="relative min-h-[95vh] flex items-center bg-black overflow-hidden">
-      {/* Animated gradient orbs */}
-      <div className="absolute inset-0 overflow-hidden">
-        <div className="absolute top-1/4 left-1/4 w-[600px] h-[600px] rounded-full bg-gradient-to-br from-zinc-800/50 to-transparent blur-[50px] animate-blob" />
-        <div className="absolute top-1/3 right-1/4 w-[500px] h-[500px] rounded-full bg-gradient-to-bl from-zinc-700/30 to-transparent blur-[50px] animate-blob animation-delay-2000" />
-        <div className="absolute bottom-1/4 left-1/2 w-[700px] h-[700px] rounded-full bg-gradient-to-t from-zinc-800/40 to-transparent blur-[50px] animate-blob animation-delay-4000" />
-      </div>
-
-      {/* Grid pattern overlay */}
-      <div className="absolute inset-0 grid-pattern opacity-30" />
+  const headlineTop = ["Learn", "from", "the"];
+  const headlineAccent = ["best", "minds"];
+  const headlineBottom = ["in", "your", "industry"];
 
-      {/* Spotlight effect */}
-      <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[600px] bg-gradient-to-b from-zinc-800/20 via-transparent to-transparent blur-[40px]" />
-
-      <div className="container mx-auto px-4 md:px-6 relative z-10 py-20 md:py-32">
-        <div className="max-w-4xl mx-auto text-center">
-          {/* Badge */}
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.5 }}
-            className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/5 backdrop-blur-sm border border-white/10 text-zinc-400 text-sm mb-8"
-          >
-            <Sparkles className="w-4 h-4 text-zinc-300" />
-            <span>Trusted by 10,000+ professionals worldwide</span>
-          </motion.div>
+  return (
+    <section className="relative min-h-[100svh] flex flex-col bg-black overflow-hidden">
+      {/* Interactive backdrop */}
+      <SpotlightGrid className="opacity-70" />
+      <div className="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-white/20 to-transparent" />
+      <div
+        aria-hidden
+        className="pointer-events-none absolute -top-40 left-1/2 h-[480px] w-[820px] -translate-x-1/2 rounded-full bg-zinc-500/10 blur-[140px]"
+      />
 
-          {/* Main headline */}
-          <motion.h1
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.6, delay: 0.1 }}
-            className="text-fluid-5xl font-bold text-white mb-6 leading-tight tracking-tight"
-          >
-            Learn from the{" "}
-            <span className="relative inline-block">
-              <span className="silver-text">best minds</span>
-            </span>
-            <br />
-            <span className="text-zinc-400">in your industry</span>
-          </motion.h1>
+      <div className="flex-1 flex items-center">
+        <div className="container mx-auto px-4 md:px-6 relative z-10 py-28 md:py-32 w-full">
+          <div className="max-w-4xl mx-auto text-center">
+            {/* Availability pill */}
+            <motion.div
+              initial={{ opacity: 0, y: 16 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.5 }}
+              className="inline-flex items-center gap-2.5 px-4 py-1.5 rounded-full border border-white/10 bg-white/[0.04] text-sm text-zinc-300 mb-10"
+            >
+              <span className="relative flex h-2 w-2">
+                <span className="absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-60 animate-ping" />
+                <span className="relative inline-flex h-2 w-2 rounded-full bg-emerald-400" />
+              </span>
+              Mentors available this week
+            </motion.div>
 
-          {/* Subheadline */}
-          <motion.p
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.6, delay: 0.2 }}
-            className="text-lg md:text-xl text-zinc-500 mb-10 max-w-2xl mx-auto leading-relaxed"
-          >
-            Connect with world-class experts for personalized 1-on-1 sessions,
-            interactive classes, and live webinars. Your career transformation
-            starts here.
-          </motion.p>
+            {/* Headline — word-by-word clip reveal */}
+            <motion.h1
+              variants={wordRevealParent}
+              initial="hidden"
+              animate="visible"
+              className="text-fluid-5xl font-bold text-white leading-[1.05] tracking-tight mb-6"
+              aria-label="Learn from the best minds in your industry"
+            >
+              {[headlineTop, headlineAccent, headlineBottom].map(
+                (words, lineIdx) => (
+                  <span key={lineIdx} className="block overflow-hidden pb-1">
+                    {lineIdx === 2 && (
+                      <span className="sr-only">in your industry</span>
+                    )}
+                    {words.map((word, wordIdx) => (
+                      <span
+                        key={word}
+                        aria-hidden="true"
+                        className="inline-block overflow-hidden align-bottom"
+                      >
+                        <motion.span
+                          variants={wordRevealChild}
+                          className={`inline-block will-change-transform ${
+                            lineIdx === 1 ? "silver-text" : ""
+                          }`}
+                        >
+                          {word}
+                          {wordIdx < words.length - 1 ? "\u00A0" : ""}
+                        </motion.span>
+                      </span>
+                    ))}
+                  </span>
+                ),
+              )}
+            </motion.h1>
 
-          {/* CTAs */}
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.6, delay: 0.3 }}
-            className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-16"
-          >
-            <Button
-              size="lg"
-              className="bg-white text-black hover:bg-zinc-200 px-8 h-14 text-base rounded-xl shadow-lg shadow-white/10 group font-medium"
-              asChild
+            {/* Subheadline */}
+            <motion.p
+              initial={{ opacity: 0, y: 16 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.6, delay: 0.55, ease: [0.16, 1, 0.3, 1] }}
+              className="text-lg md:text-xl text-zinc-400 mb-12 max-w-xl mx-auto leading-relaxed"
             >
-              <Link href="/explore/experts">
-                Find Your Expert
-                <ArrowRight className="ml-2 w-5 h-5 group-hover:translate-x-1 transition-transform" />
-              </Link>
-            </Button>
-            {/* The supply-side CTA lives here now that the navbar carries no
-                CTAs. (It replaces a "Watch Demo" button that had no href and
-                no handler — it did nothing when clicked.) */}
-            <Button
-              size="lg"
-              variant="outline"
-              className="border-zinc-700 bg-transparent text-white hover:bg-zinc-900 hover:text-white px-8 h-14 text-base rounded-xl group"
-              asChild
+              1-on-1 sessions, interactive classes, and live webinars with
+              verified experts — your career transformation starts here.
+            </motion.p>
+
+            {/* CTAs */}
+            <motion.div
+              initial={{ opacity: 0, y: 16 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.6, delay: 0.7, ease: [0.16, 1, 0.3, 1] }}
+              className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-20"
             >
-              <Link href="/become-an-expert">
-                Become an Expert
-                <ArrowRight className="ml-2 w-5 h-5 group-hover:translate-x-1 transition-transform" />
-              </Link>
-            </Button>
-          </motion.div>
+              <Button
+                size="lg"
+                className="sheen group relative h-14 px-9 rounded-full bg-white text-black hover:bg-zinc-200 text-base font-medium shadow-[0_8px_40px_-8px_rgba(255,255,255,0.35)]"
+                asChild
+              >
+                <Link href="/explore/experts">
+                  Find Your Expert
+                  <ArrowRight className="ml-2 w-4 h-4 group-hover:translate-x-1 transition-transform" />
+                </Link>
+              </Button>
+              <Button
+                size="lg"
+                variant="outline"
+                className="h-14 px-9 rounded-full border-zinc-800 bg-transparent text-zinc-200 hover:bg-zinc-900 hover:text-white hover:border-zinc-600 text-base"
+                asChild
+              >
+                <Link href="/become-an-expert">Become an Expert</Link>
+              </Button>
+            </motion.div>
 
-          {/* Stats with animated counters */}
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.6, delay: 0.4 }}
-            className="grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-12 pt-8 border-t border-zinc-800"
-          >
-            {STATS.map((stat, i) => (
-              <div key={i} className="text-center">
-                <AnimatedNumber value={stat.value} suffix={stat.suffix} />
-                <div className="text-zinc-600 text-sm mt-1">{stat.label}</div>
-              </div>
-            ))}
-          </motion.div>
+            {/* Stats strip */}
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              transition={{ duration: 0.8, delay: 0.85 }}
+              className="grid grid-cols-2 md:grid-cols-4 gap-8 pt-10 border-t border-white/[0.07]"
+            >
+              {STATS.map((stat) => (
+                <div key={stat.label} className="text-center">
+                  <AnimatedNumber
+                    value={stat.value}
+                    suffix={stat.suffix}
+                    decimals={Number.isInteger(stat.value) ? 0 : 1}
+                    className="text-3xl md:text-4xl font-semibold text-white tabular-nums"
+                  />
+                  <div className="text-zinc-500 text-sm mt-1.5 tracking-wide uppercase text-xs">
+                    {stat.label}
+                  </div>
+                </div>
+              ))}
+            </motion.div>
+          </div>
         </div>
       </div>
 
-      {/* Bottom gradient fade */}
-      <div className="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-zinc-950 to-transparent" />
+      {/* Trusted-by marquee pinned to the hero's base */}
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ duration: 0.8, delay: 1 }}
+        className="relative z-10 pb-10"
+      >
+        <p className="text-center text-xs uppercase tracking-[0.25em] text-zinc-600 mb-5 flex items-center justify-center gap-2">
+          <Sparkles className="w-3.5 h-3.5" />
+          Mentors from
+        </p>
+        <MarqueeRow duration={32} className="[&_span]:text-zinc-600 [&_span]:hover:text-zinc-300">
+          {COMPANY_LOGOS.map((logo) => (
+            <span
+              key={logo}
+              className="mx-6 text-lg font-semibold tracking-tight whitespace-nowrap transition-colors duration-300 cursor-default"
+            >
+              {logo}
+            </span>
+          ))}
+        </MarqueeRow>
+      </motion.div>
+
+      {/* Bottom fade into the offerings band */}
+      <div className="absolute bottom-0 left-0 right-0 h-24 bg-gradient-to-t from-zinc-950 to-transparent pointer-events-none" />
     </section>
   );
 }
diff --git a/components/home/HowItWorksSection.tsx b/components/home/HowItWorksSection.tsx
index 10dd56d05..de9c2c74d 100644
--- a/components/home/HowItWorksSection.tsx
+++ b/components/home/HowItWorksSection.tsx
@@ -1,108 +1,68 @@
 "use client";
 
 import { motion } from "framer-motion";
-import { ArrowRight } from "lucide-react";
-import Link from "next/link";
 
+import { RevealGroup, RevealItem, SpotlightGrid } from "@/components/motion";
 import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
 import { HOW_IT_WORKS } from "./data";
 
-function HowItWorksStep({
-  step,
-  index,
-  isLast,
-}: {
-  step: (typeof HOW_IT_WORKS)[0];
-  index: number;
-  isLast: boolean;
-}) {
-  return (
-    <motion.div
-      initial={{ opacity: 0, x: -20 }}
-      whileInView={{ opacity: 1, x: 0 }}
-      transition={{ duration: 0.5, delay: index * 0.15 }}
-      viewport={{ once: true }}
-      className="relative"
-    >
-      <div className="flex gap-6">
-        <div className="flex flex-col items-center">
-          <div className="w-12 h-12 rounded-full bg-gradient-to-br from-zinc-100 to-zinc-300 flex items-center justify-center text-zinc-900 font-bold text-lg shadow-elevation-2 border border-border">
-            {step.step}
-          </div>
-          {!isLast && (
-            <div className="w-0.5 h-full bg-gradient-to-b from-border to-transparent mt-4" />
-          )}
-        </div>
-        <div className="pb-12 min-w-0">
-          <h4 className="text-xl font-semibold text-foreground mb-2">
-            {step.title}
-          </h4>
-          <p className="text-muted-foreground leading-relaxed">
-            {step.description}
-          </p>
-        </div>
-      </div>
-    </motion.div>
-  );
-}
-
+/**
+ * How it works — a numbered progress line across a dark stage. The connector
+ * draws itself as the steps scroll into view; each step lifts its number chip
+ * on hover.
+ */
 export function HowItWorksSection() {
   return (
-    <section
-      id="how-it-works"
-      className="py-20 md:py-32 bg-gradient-to-b from-zinc-50 to-white relative overflow-hidden scroll-mt-20"
-    >
-      <div className="absolute inset-0 diagonal-stripes" />
-
-      {/* Decorative circles */}
-      <div className="absolute top-40 right-20 w-64 h-64 border border-border rounded-full opacity-50" />
-      <div className="absolute bottom-40 left-20 w-48 h-48 border border-border rounded-full opacity-50" />
-
+    <section className="bg-obsidian relative overflow-hidden py-20 md:py-28">
+      <SpotlightGrid className="opacity-50" />
       <div className="container mx-auto px-4 md:px-6 relative z-10">
-        <div className="grid lg:grid-cols-2 gap-16 items-start">
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.5 }}
-            viewport={{ once: true }}
-            className="lg:sticky lg:top-32"
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6, ease: [0.16, 1, 0.3, 1] }}
+          viewport={{ once: true }}
+          className="mb-14 text-center"
+        >
+          <Badge
+            variant="secondary"
+            className="mb-4 rounded-full border-zinc-800 bg-zinc-800/60 text-zinc-300 hover:bg-zinc-800"
           >
-            <Badge
-              variant="secondary"
-              className="mb-4 bg-secondary text-secondary-foreground hover:bg-secondary border-0"
-            >
-              Getting Started
-            </Badge>
-            <h2 className="text-fluid-4xl font-bold text-foreground mb-6 tracking-tight">
-              How it <span className="text-muted-foreground">works</span>
-            </h2>
-            <p className="text-lg text-muted-foreground mb-8">
-              Get started in minutes. Our streamlined process makes it easy to
-              connect with the right expert for your needs.
-            </p>
-            <Link href="/explore/experts">
-              <Button
-                size="lg"
-                className="bg-primary hover:bg-primary/90 text-primary-foreground shadow-elevation-2"
-              >
-                Start Your Journey
-                <ArrowRight className="ml-2 w-5 h-5" />
-              </Button>
-            </Link>
-          </motion.div>
+            How it works
+          </Badge>
+          <h2 className="text-fluid-4xl font-bold tracking-tight text-white text-balance">
+            From browsing to breakthrough in{" "}
+            <span className="silver-text">four steps</span>
+          </h2>
+        </motion.div>
 
-          <div>
-            {HOW_IT_WORKS.map((step, index) => (
-              <HowItWorksStep
-                key={step.step}
-                step={step}
-                index={index}
-                isLast={index === HOW_IT_WORKS.length - 1}
-              />
-            ))}
-          </div>
-        </div>
+        <RevealGroup
+          stagger={0.12}
+          className="relative grid gap-10 sm:grid-cols-2 lg:grid-cols-4 lg:gap-8"
+        >
+          {/* Connector line (desktop) */}
+          <div
+            aria-hidden
+            className="absolute left-0 right-0 top-6 hidden h-px bg-gradient-to-r from-transparent via-white/15 to-transparent lg:block"
+          />
+          {HOW_IT_WORKS.map((step) => (
+            <RevealItem key={step.step}>
+              <div className="group relative">
+                <div className="mb-6 flex items-center gap-3 lg:flex-col lg:items-start">
+                  <span className="flex h-12 w-12 items-center justify-center rounded-full border border-white/15 bg-zinc-900 font-mono text-sm text-white transition-all duration-500 group-hover:border-white group-hover:bg-white group-hover:text-black">
+                    {step.step}
+                  </span>
+                  <span className="h-px flex-1 bg-white/10 lg:hidden" />
+                </div>
+                <h4 className="text-lg font-semibold tracking-tight text-white transition-transform duration-500 ease-[cubic-bezier(0.16,1,0.3,1)] group-hover:-translate-y-1">
+                  {step.title}
+                </h4>
+                <p className="mt-2 max-w-xs leading-relaxed text-zinc-500">
+                  {step.description}
+                </p>
+              </div>
+            </RevealItem>
+          ))}
+        </RevealGroup>
       </div>
     </section>
   );
diff --git a/components/home/LandingHeroSkeleton.tsx b/components/home/LandingHeroSkeleton.tsx
index dbded3e40..d88f8cdc6 100644
--- a/components/home/LandingHeroSkeleton.tsx
+++ b/components/home/LandingHeroSkeleton.tsx
@@ -12,8 +12,8 @@ export function LandingHeroSkeleton() {
             <Skeleton className="mx-auto h-14 w-full max-w-2xl bg-zinc-800 sm:h-16" />
             <Skeleton className="mx-auto h-5 w-full max-w-xl bg-zinc-800" />
             <div className="flex flex-wrap items-center justify-center gap-4 pt-2">
-              <Skeleton className="h-12 w-40 rounded-xl bg-zinc-800" />
-              <Skeleton className="h-12 w-40 rounded-xl bg-zinc-800" />
+              <Skeleton className="h-14 w-44 rounded-full bg-zinc-800" />
+              <Skeleton className="h-14 w-40 rounded-full bg-zinc-800" />
             </div>
             <div className="mx-auto grid max-w-2xl grid-cols-2 gap-4 pt-8 md:grid-cols-4">
               {[1, 2, 3, 4].map((i) => (
diff --git a/components/home/PlatformFeaturesSection.tsx b/components/home/PlatformFeaturesSection.tsx
deleted file mode 100644
index 63c69e9af..000000000
--- a/components/home/PlatformFeaturesSection.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-"use client";
-
-import { motion } from "framer-motion";
-import { LucideIcon } from "lucide-react";
-
-import { Badge } from "@/components/ui/badge";
-import { PLATFORM_FEATURES } from "./data";
-
-function PlatformFeatureCard({
-  feature,
-  index,
-}: {
-  feature: { icon: LucideIcon; title: string; description: string };
-  index: number;
-}) {
-  const Icon = feature.icon;
-
-  return (
-    <motion.div
-      initial={{ opacity: 0, y: 20 }}
-      whileInView={{ opacity: 1, y: 0 }}
-      transition={{ duration: 0.4, delay: index * 0.1 }}
-      viewport={{ once: true }}
-      className="text-center group"
-    >
-      <div className="w-16 h-16 rounded-2xl bg-muted flex items-center justify-center mx-auto mb-4 group-hover:bg-secondary transition-colors group-hover:scale-110 duration-300">
-        <Icon className="w-8 h-8 text-foreground" />
-      </div>
-      <h4 className="font-semibold text-foreground mb-2">{feature.title}</h4>
-      <p className="text-sm text-muted-foreground">{feature.description}</p>
-    </motion.div>
-  );
-}
-
-export function PlatformFeaturesSection() {
-  return (
-    <section className="py-20 md:py-32 bg-gradient-to-b from-zinc-50 to-white relative overflow-hidden">
-      <div className="absolute inset-0 diagonal-stripes" />
-
-      <div className="container mx-auto px-4 md:px-6 relative z-10">
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          whileInView={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.5 }}
-          viewport={{ once: true }}
-          className="text-center mb-16"
-        >
-          <Badge
-            variant="secondary"
-            className="mb-4 bg-secondary text-secondary-foreground hover:bg-secondary border-0"
-          >
-            Platform Features
-          </Badge>
-          <h2 className="text-fluid-4xl font-bold text-foreground mb-4 tracking-tight">
-            Everything you need to{" "}
-            <span className="text-muted-foreground">succeed</span>
-          </h2>
-          <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
-            A seamless experience built for learning and growth
-          </p>
-        </motion.div>
-
-        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-10 md:gap-12">
-          {PLATFORM_FEATURES.map((feature, index) => (
-            <PlatformFeatureCard
-              key={feature.title}
-              feature={feature}
-              index={index}
-            />
-          ))}
-        </div>
-      </div>
-    </section>
-  );
-}
diff --git a/components/home/SuccessStoriesSection.tsx b/components/home/SuccessStoriesSection.tsx
deleted file mode 100644
index 36418a8ff..000000000
--- a/components/home/SuccessStoriesSection.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-"use client";
-
-import { motion } from "framer-motion";
-import { Rocket } from "lucide-react";
-
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { Badge } from "@/components/ui/badge";
-import { Card, CardContent } from "@/components/ui/card";
-import { SUCCESS_STORIES } from "./data";
-
-function SuccessStoryCard({
-  story,
-  index,
-}: {
-  story: (typeof SUCCESS_STORIES)[0];
-  index: number;
-}) {
-  return (
-    <motion.div
-      initial={{ opacity: 0, y: 30 }}
-      whileInView={{ opacity: 1, y: 0 }}
-      transition={{ duration: 0.5, delay: index * 0.1 }}
-      viewport={{ once: true }}
-    >
-      <Card className="h-full border border-zinc-800 bg-gradient-to-br from-zinc-900 to-zinc-950 overflow-hidden group">
-        <CardContent className="p-6 md:p-8">
-          <div className="flex items-center gap-4 mb-6">
-            <Avatar className="w-14 h-14 border-2 border-zinc-700">
-              <AvatarImage src={story.image} />
-              <AvatarFallback className="bg-zinc-800 text-white">
-                {story.name.charAt(0)}
-              </AvatarFallback>
-            </Avatar>
-            <div>
-              <h4 className="font-semibold text-white">{story.name}</h4>
-              <p className="text-sm text-zinc-400">{story.role}</p>
-              <p className="text-xs text-zinc-500">Now at {story.company}</p>
-            </div>
-          </div>
-          <p className="text-zinc-300 mb-6 leading-relaxed">
-            &ldquo;{story.story}&rdquo;
-          </p>
-          <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/10 text-white text-sm font-medium">
-            <Rocket className="w-4 h-4" />
-            {story.metric}
-          </div>
-        </CardContent>
-      </Card>
-    </motion.div>
-  );
-}
-
-export function SuccessStoriesSection() {
-  return (
-    <section className="py-20 md:py-32 bg-gradient-to-b from-zinc-900 to-black relative overflow-hidden">
-      <div className="absolute inset-0 grid-pattern opacity-20" />
-
-      <div className="absolute top-0 left-1/4 w-96 h-96 bg-zinc-700/20 rounded-full blur-[150px]" />
-      <div className="absolute bottom-0 right-1/4 w-96 h-96 bg-zinc-600/15 rounded-full blur-[150px]" />
-
-      <div className="container mx-auto px-4 md:px-6 relative z-10">
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          whileInView={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.5 }}
-          viewport={{ once: true }}
-          className="text-center mb-16"
-        >
-          <Badge
-            variant="secondary"
-            className="mb-4 bg-zinc-800 text-zinc-300 hover:bg-zinc-800 border-zinc-700"
-          >
-            Success Stories
-          </Badge>
-          <h2 className="text-fluid-4xl font-bold text-white mb-4 tracking-tight">
-            Real transformations,{" "}
-            <span className="text-zinc-400">real results</span>
-          </h2>
-          <p className="text-lg text-zinc-500 max-w-2xl mx-auto">
-            See how our mentees have achieved their career goals
-          </p>
-        </motion.div>
-
-        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
-          {SUCCESS_STORIES.map((story, index) => (
-            <SuccessStoryCard key={story.name} story={story} index={index} />
-          ))}
-        </div>
-      </div>
-    </section>
-  );
-}
diff --git a/components/home/TestimonialsSection.tsx b/components/home/TestimonialsSection.tsx
index 9717f2435..06bf34a0a 100644
--- a/components/home/TestimonialsSection.tsx
+++ b/components/home/TestimonialsSection.tsx
@@ -1,59 +1,54 @@
 "use client";
 
 import { useMemo } from "react";
-import { motion } from "framer-motion";
 import { Star } from "lucide-react";
 
+import { MarqueeRow, Reveal } from "@/components/motion";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Badge } from "@/components/ui/badge";
-import { Card, CardContent } from "@/components/ui/card";
 import type { ReviewWithProfiles } from "@/types/review";
 
 function TestimonialCard({ review }: { review: ReviewWithProfiles }) {
   return (
-    <Card className="w-[350px] flex-shrink-0 mx-3 border border-zinc-800 bg-zinc-900/50 backdrop-blur-sm">
-      <CardContent className="p-6">
-        <div className="flex items-center gap-1 mb-4">
-          {Array.from({ length: 5 }).map((_, i) => (
-            <Star
-              key={i}
-              className={`w-4 h-4 ${i < review.rating ? "fill-white text-white" : "fill-zinc-700 text-zinc-700"}`}
-            />
-          ))}
-        </div>
-        <p className="text-zinc-300 mb-6 line-clamp-4 leading-relaxed">
-          &ldquo;
-          {review.reviewDescription ||
-            "Great experience working with this expert!"}
-          &rdquo;
-        </p>
-        <div className="flex items-center gap-3">
-          <Avatar className="w-10 h-10 border border-zinc-700">
-            <AvatarImage src={review.consulteeProfile?.user?.image ?? ""} />
-            <AvatarFallback className="bg-zinc-800 text-zinc-300 text-sm">
-              {review.consulteeProfile?.user?.name?.charAt(0) ?? "U"}
-            </AvatarFallback>
-          </Avatar>
-          <div>
-            <p className="font-medium text-white text-sm">
-              {review.consulteeProfile?.user?.name || "Anonymous"}
-            </p>
-            <p className="text-xs text-zinc-500">
-              Session with {review.consultantProfile?.user?.name}
-            </p>
-          </div>
+    <figure className="flex w-[340px] shrink-0 flex-col rounded-2xl border border-white/[0.08] bg-white/[0.03] p-6 backdrop-blur-sm transition-colors duration-500 hover:border-white/20 md:w-[380px]">
+      <div className="mb-4 flex items-center gap-1">
+        {Array.from({ length: 5 }).map((_, i) => (
+          <Star
+            key={i}
+            className={`h-3.5 w-3.5 ${
+              i < review.rating ? "fill-white text-white" : "fill-zinc-800 text-zinc-800"
+            }`}
+          />
+        ))}
+      </div>
+      <blockquote className="mb-6 line-clamp-4 leading-relaxed text-zinc-300">
+        &ldquo;
+        {review.reviewDescription ||
+          "Great experience working with this expert!"}
+        &rdquo;
+      </blockquote>
+      <figcaption className="mt-auto flex items-center gap-3">
+        <Avatar className="h-9 w-9 border border-zinc-700">
+          <AvatarImage src={review.consulteeProfile?.user?.image ?? ""} />
+          <AvatarFallback className="bg-zinc-800 text-sm text-zinc-300">
+            {review.consulteeProfile?.user?.name?.charAt(0) ?? "U"}
+          </AvatarFallback>
+        </Avatar>
+        <div className="min-w-0">
+          <p className="truncate text-sm font-medium text-white">
+            {review.consulteeProfile?.user?.name || "Anonymous"}
+          </p>
+          <p className="truncate text-xs text-zinc-500">
+            Session with {review.consultantProfile?.user?.name}
+          </p>
         </div>
-      </CardContent>
-    </Card>
+      </figcaption>
+    </figure>
   );
 }
 
 function TestimonialLoadingSkeleton() {
-  return (
-    <div className="flex-shrink-0 w-[350px] mx-3">
-      <Card className="h-[200px] animate-pulse bg-zinc-800 border-0" />
-    </div>
-  );
+  return <div className="h-[196px] w-[340px] shrink-0 animate-pulse rounded-2xl bg-zinc-800/70 md:w-[380px]" />;
 }
 
 interface TestimonialsSectionProps {
@@ -72,85 +67,53 @@ export function TestimonialsSection({
     [reviews],
   );
 
-  return (
-    <section className="py-20 md:py-32 bg-gradient-to-b from-zinc-900 via-zinc-950 to-black overflow-hidden relative">
-      <div className="absolute inset-0 grid-pattern opacity-20" />
+  const skeletons = (
+    <>
+      {Array.from({ length: 4 }).map((_, i) => (
+        <TestimonialLoadingSkeleton key={`ts-${i}`} />
+      ))}
+    </>
+  );
 
-      {/* Glow accents */}
-      <div className="absolute top-1/2 left-0 w-96 h-96 bg-zinc-700/20 rounded-full blur-[150px] -translate-y-1/2" />
-      <div className="absolute top-1/2 right-0 w-96 h-96 bg-zinc-600/15 rounded-full blur-[150px] -translate-y-1/2" />
+  return (
+    <section className="relative overflow-hidden bg-gradient-to-b from-black via-zinc-950 to-black py-20 md:py-32">
+      <div
+        aria-hidden
+        className="pointer-events-none absolute left-1/2 top-0 h-[420px] w-[820px] -translate-x-1/2 rounded-full bg-zinc-500/[0.07] blur-[140px]"
+      />
 
-      <div className="container mx-auto px-4 md:px-6 mb-12 relative z-10">
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          whileInView={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.5 }}
-          viewport={{ once: true }}
-          className="text-center"
-        >
+      <div className="container relative z-10 mx-auto mb-12 px-4 md:px-6">
+        <Reveal className="text-center">
           <Badge
             variant="secondary"
-            className="mb-4 bg-zinc-800 text-zinc-300 hover:bg-zinc-800 border-zinc-700"
+            className="mb-4 rounded-full border-zinc-800 bg-zinc-800/60 text-zinc-300 hover:bg-zinc-800"
           >
             Testimonials
           </Badge>
-          <h2 className="text-fluid-4xl font-bold text-white mb-4 tracking-tight">
-            Loved by <span className="text-zinc-400">professionals</span>
+          <h2 className="text-fluid-4xl font-bold tracking-tight text-white text-balance">
+            Trusted by professionals{" "}
+            <span className="silver-text">worldwide</span>
           </h2>
-          <p className="text-lg text-zinc-500 max-w-2xl mx-auto">
-            See what our community has to say about their experience
+          <p className="mx-auto mt-4 max-w-xl text-zinc-500">
+            Real stories from real sessions.
           </p>
-        </motion.div>
-      </div>
-
-      {/* First marquee row - left to right */}
-      <div className="relative mb-8">
-        <div className="absolute left-0 top-0 bottom-0 w-32 bg-gradient-to-r from-zinc-950 to-transparent z-10" />
-        <div className="absolute right-0 top-0 bottom-0 w-32 bg-gradient-to-l from-zinc-950 to-transparent z-10" />
-
-        <div className="flex animate-marquee">
-          {isLoading ? (
-            Array.from({ length: 4 }).map((_, i) => (
-              <TestimonialLoadingSkeleton key={i} />
-            ))
-          ) : (
-            <>
-              {[...displayReviews, ...displayReviews, ...displayReviews].map(
-                (review, i) => (
-                  <TestimonialCard
-                    key={`ltr-${review.id}-${i}`}
-                    review={review}
-                  />
-                ),
-              )}
-            </>
-          )}
-        </div>
+        </Reveal>
       </div>
 
-      {/* Second marquee row - right to left */}
-      <div className="relative">
-        <div className="absolute left-0 top-0 bottom-0 w-32 bg-gradient-to-r from-zinc-950 to-transparent z-10" />
-        <div className="absolute right-0 top-0 bottom-0 w-32 bg-gradient-to-l from-zinc-950 to-transparent z-10" />
-
-        <div className="flex animate-marquee-reverse">
-          {isLoading ? (
-            Array.from({ length: 4 }).map((_, i) => (
-              <TestimonialLoadingSkeleton key={i} />
-            ))
-          ) : (
-            <>
-              {[...displayReviews, ...displayReviews, ...displayReviews]
-                .reverse()
-                .map((review, i) => (
-                  <TestimonialCard
-                    key={`rtl-${review.id}-${i}`}
-                    review={review}
-                  />
-                ))}
-            </>
-          )}
-        </div>
+      {/* Two counter-drifting rows; both pause on hover for readability */}
+      <div className="relative z-10 space-y-5">
+        <MarqueeRow duration={56} fadeEdges={false}>
+          {isLoading ? skeletons : displayReviews.map((r) => (
+            <TestimonialCard key={`ltr-${r.id}`} review={r} />
+          ))}
+        </MarqueeRow>
+        <MarqueeRow duration={64} reverse fadeEdges={false}>
+          {isLoading
+            ? skeletons
+            : [...displayReviews].reverse().map((r) => (
+                <TestimonialCard key={`rtl-${r.id}`} review={r} />
+              ))}
+        </MarqueeRow>
       </div>
     </section>
   );
diff --git a/components/home/TrustBadgesSection.tsx b/components/home/TrustBadgesSection.tsx
deleted file mode 100644
index 4f69cee29..000000000
--- a/components/home/TrustBadgesSection.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-"use client";
-
-import { motion } from "framer-motion";
-import { TRUST_BADGES } from "./data";
-
-export function TrustBadgesSection() {
-  return (
-    <section className="py-16 bg-zinc-950 border-y border-zinc-900">
-      <div className="container mx-auto px-4 md:px-6">
-        <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-8">
-          {TRUST_BADGES.map((badge, index) => (
-            <motion.div
-              key={badge.label}
-              initial={{ opacity: 0, y: 20 }}
-              whileInView={{ opacity: 1, y: 0 }}
-              transition={{ duration: 0.4, delay: index * 0.1 }}
-              viewport={{ once: true }}
-              className="text-center"
-            >
-              <div className="w-12 h-12 rounded-full bg-zinc-800 flex items-center justify-center mx-auto mb-3">
-                <badge.icon className="w-6 h-6 text-zinc-300" />
-              </div>
-              <h4 className="font-semibold text-white mb-1">{badge.label}</h4>
-              <p className="text-sm text-zinc-500">{badge.description}</p>
-            </motion.div>
-          ))}
-        </div>
-      </div>
-    </section>
-  );
-}
diff --git a/components/home/TrustedBySection.tsx b/components/home/TrustedBySection.tsx
deleted file mode 100644
index 34467e788..000000000
--- a/components/home/TrustedBySection.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-"use client";
-
-import { motion } from "framer-motion";
-import { COMPANY_LOGOS } from "./data";
-
-export function TrustedBySection() {
-  return (
-    <section className="py-16 bg-zinc-950 border-b border-zinc-900">
-      <div className="container mx-auto px-4 md:px-6">
-        <motion.p
-          initial={{ opacity: 0 }}
-          whileInView={{ opacity: 1 }}
-          transition={{ duration: 0.5 }}
-          viewport={{ once: true }}
-          className="text-center text-zinc-500 text-sm mb-8"
-        >
-          Our experts have worked at leading companies
-        </motion.p>
-        <div className="flex flex-wrap items-center justify-center gap-8 md:gap-16">
-          {COMPANY_LOGOS.map((company, i) => (
-            <motion.div
-              key={company}
-              initial={{ opacity: 0, y: 10 }}
-              whileInView={{ opacity: 1, y: 0 }}
-              transition={{ duration: 0.4, delay: i * 0.05 }}
-              viewport={{ once: true }}
-              className="text-zinc-600 font-semibold text-lg md:text-xl hover:text-zinc-400 transition-colors cursor-default"
-            >
-              {company}
-            </motion.div>
-          ))}
-        </div>
-      </div>
-    </section>
-  );
-}
diff --git a/components/home/UpcomingEventsSection.tsx b/components/home/UpcomingEventsSection.tsx
index a9f920676..69116f620 100644
--- a/components/home/UpcomingEventsSection.tsx
+++ b/components/home/UpcomingEventsSection.tsx
@@ -1,185 +1,89 @@
 "use client";
 
-import { motion } from "framer-motion";
-import { Calendar, ChevronRight, Clock, Star } from "lucide-react";
+import { ArrowRight, Calendar, Clock, Users } from "lucide-react";
 import Link from "next/link";
 
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { RevealGroup, RevealItem, Reveal } from "@/components/motion";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import { Card, CardContent } from "@/components/ui/card";
-import type { ReviewWithProfiles } from "@/types/review";
 import { UPCOMING_EVENTS } from "./data";
 
-function EventCard({
-  event,
-  index,
-}: {
-  event: (typeof UPCOMING_EVENTS)[0];
-  index: number;
-}) {
+/**
+ * Upcoming events — static curated marketing data rendered on a dark strip
+ * beneath the testimonials marquee. Self-contained: it no longer duplicates
+ * the review cards that TestimonialsSection already owns.
+ */
+export function UpcomingEventsSection() {
   return (
-    <motion.div
-      initial={{ opacity: 0, x: 20 }}
-      whileInView={{ opacity: 1, x: 0 }}
-      transition={{ duration: 0.4, delay: index * 0.1 }}
-      viewport={{ once: true }}
-    >
-      <Card className="border border-zinc-800 bg-zinc-900/50 hover:bg-zinc-900 transition-colors group">
-        <CardContent className="p-5">
-          <div className="flex items-start justify-between mb-3">
+    <section className="relative overflow-hidden bg-zinc-950 py-20 md:py-28">
+      <div className="container mx-auto px-4 md:px-6">
+        <div className="grid gap-12 lg:grid-cols-[1fr_1.4fr] lg:gap-20">
+          {/* Editorial column */}
+          <Reveal className="self-start lg:sticky lg:top-32">
             <Badge
               variant="secondary"
-              className="bg-zinc-800 text-zinc-300 text-xs"
+              className="mb-4 rounded-full border-zinc-800 bg-zinc-800/60 text-zinc-300 hover:bg-zinc-800"
             >
-              {event.type}
+              Live sessions
             </Badge>
-            <span className="text-xs text-zinc-500">
-              {event.attendees} attending
-            </span>
-          </div>
-          <h4 className="font-semibold text-white mb-2 group-hover:text-zinc-200">
-            {event.title}
-          </h4>
-          <p className="text-sm text-zinc-400 mb-3">Hosted by {event.host}</p>
-          <div className="flex items-center gap-4 text-xs text-zinc-500">
-            <span className="flex items-center gap-1">
-              <Calendar className="w-3 h-3" />
-              {event.date}
-            </span>
-            <span className="flex items-center gap-1">
-              <Clock className="w-3 h-3" />
-              {event.time}
-            </span>
-          </div>
-        </CardContent>
-      </Card>
-    </motion.div>
-  );
-}
-
-interface UpcomingEventsSectionProps {
-  reviews: ReviewWithProfiles[];
-}
-
-export function UpcomingEventsSection({ reviews }: UpcomingEventsSectionProps) {
-  const slicedReviews = reviews.slice(0, 3);
-
-  return (
-    <section className="py-20 md:py-32 bg-gradient-to-b from-black via-zinc-950 to-zinc-900 overflow-hidden relative">
-      <div className="absolute inset-0 grid-pattern opacity-20" />
-
-      {/* Glow accents */}
-      <div className="absolute top-1/2 left-0 w-96 h-96 bg-zinc-700/20 rounded-full blur-[150px] -translate-y-1/2" />
-      <div className="absolute top-1/2 right-0 w-96 h-96 bg-zinc-600/15 rounded-full blur-[150px] -translate-y-1/2" />
-
-      <div className="container mx-auto px-4 md:px-6 relative z-10">
-        <div className="grid lg:grid-cols-2 gap-16">
-          {/* Testimonials Column */}
-          <div>
-            <motion.div
-              initial={{ opacity: 0, y: 20 }}
-              whileInView={{ opacity: 1, y: 0 }}
-              transition={{ duration: 0.5 }}
-              viewport={{ once: true }}
-              className="mb-8"
-            >
-              <Badge
-                variant="secondary"
-                className="mb-4 bg-zinc-800 text-zinc-300 hover:bg-zinc-800 border-zinc-700"
+            <h2 className="text-fluid-3xl font-bold tracking-tight text-white text-balance">
+              Something is always{" "}
+              <span className="silver-text">happening</span>
+            </h2>
+            <p className="mt-4 max-w-sm leading-relaxed text-zinc-500">
+              Workshops, webinars and cohort classes run every week — join one
+              or bring your whole team.
+            </p>
+            <Link href="/explore/programs" className="inline-block mt-8">
+              <Button
+                variant="outline"
+                className="group rounded-full border-zinc-800 text-zinc-200 hover:bg-zinc-900 hover:text-white hover:border-zinc-600"
               >
-                Reviews
-              </Badge>
-              <h2 className="text-fluid-3xl font-bold text-white mb-4 tracking-tight">
-                What our users say
-              </h2>
-            </motion.div>
+                Browse programs
+                <ArrowRight className="ml-2 h-4 w-4 transition-transform duration-300 group-hover:translate-x-1" />
+              </Button>
+            </Link>
+          </Reveal>
 
-            <div className="space-y-4">
-              {slicedReviews.map((review, i) => (
-                <motion.div
-                  key={review.id}
-                  initial={{ opacity: 0, x: -20 }}
-                  whileInView={{ opacity: 1, x: 0 }}
-                  transition={{ duration: 0.4, delay: i * 0.1 }}
-                  viewport={{ once: true }}
+          {/* Events ledger */}
+          <RevealGroup stagger={0.09} className="flex flex-col border-t border-white/[0.07]">
+            {UPCOMING_EVENTS.map((event) => (
+              <RevealItem key={event.title}>
+                <Link
+                  href="/explore/programs"
+                  className="group flex flex-col gap-4 border-b border-white/[0.07] py-7 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring sm:flex-row sm:items-center sm:gap-8"
                 >
-                  <Card className="border border-zinc-800 bg-zinc-900/50 backdrop-blur-sm">
-                    <CardContent className="p-5">
-                      <div className="flex items-center gap-1 mb-3">
-                        {Array.from({ length: 5 }).map((_, j) => (
-                          <Star
-                            key={j}
-                            className={`w-3 h-3 ${j < review.rating ? "fill-white text-white" : "fill-zinc-700 text-zinc-700"}`}
-                          />
-                        ))}
-                      </div>
-                      <p className="text-zinc-300 text-sm mb-3 line-clamp-2">
-                        &ldquo;{review.reviewDescription || "Great experience!"}
-                        &rdquo;
-                      </p>
-                      <div className="flex items-center gap-2">
-                        <Avatar className="w-6 h-6 border border-zinc-700">
-                          <AvatarImage
-                            src={review.consulteeProfile?.user?.image ?? ""}
-                          />
-                          <AvatarFallback className="bg-zinc-800 text-zinc-300 text-xs">
-                            {review.consulteeProfile?.user?.name?.charAt(0) ??
-                              "U"}
-                          </AvatarFallback>
-                        </Avatar>
-                        <p className="text-xs text-zinc-500">
-                          — {review.consulteeProfile?.user?.name || "Anonymous"}
-                        </p>
-                      </div>
-                    </CardContent>
-                  </Card>
-                </motion.div>
-              ))}
-            </div>
-          </div>
+                  <div className="min-w-0 flex-1">
+                    <span className="mb-2 inline-flex items-center rounded-full border border-white/10 bg-white/[0.04] px-2.5 py-0.5 text-xs text-zinc-400">
+                      {event.type}
+                    </span>
+                    <h4 className="text-lg font-semibold tracking-tight text-white transition-transform duration-500 ease-[cubic-bezier(0.16,1,0.3,1)] group-hover:translate-x-1.5">
+                      {event.title}
+                    </h4>
+                    <p className="mt-1 text-sm text-zinc-500">
+                      Hosted by {event.host}
+                    </p>
+                  </div>
 
-          {/* Upcoming Events Column */}
-          <div>
-            <motion.div
-              initial={{ opacity: 0, y: 20 }}
-              whileInView={{ opacity: 1, y: 0 }}
-              transition={{ duration: 0.5 }}
-              viewport={{ once: true }}
-              className="mb-8"
-            >
-              <Badge
-                variant="secondary"
-                className="mb-4 bg-zinc-800 text-zinc-300 hover:bg-zinc-800 border-zinc-700"
-              >
-                Coming Soon
-              </Badge>
-              <h2 className="text-fluid-3xl font-bold text-white mb-4 tracking-tight">
-                Upcoming events
-              </h2>
-            </motion.div>
-
-            <div className="space-y-4">
-              {UPCOMING_EVENTS.map((event, index) => (
-                <EventCard key={event.title} event={event} index={index} />
-              ))}
-            </div>
-
-            <motion.div
-              initial={{ opacity: 0, y: 20 }}
-              whileInView={{ opacity: 1, y: 0 }}
-              transition={{ duration: 0.5, delay: 0.3 }}
-              viewport={{ once: true }}
-              className="mt-6"
-            >
-              <Link href="/explore/programs">
-                <Button className="w-full bg-white text-zinc-900 hover:bg-zinc-200 font-medium">
-                  View All Events
-                  <ChevronRight className="ml-2 w-4 h-4" />
-                </Button>
-              </Link>
-            </motion.div>
-          </div>
+                  <div className="flex shrink-0 items-center gap-5 text-sm text-zinc-500">
+                    <span className="flex items-center gap-1.5">
+                      <Calendar className="h-3.5 w-3.5" />
+                      {event.date}
+                    </span>
+                    <span className="hidden items-center gap-1.5 md:flex">
+                      <Clock className="h-3.5 w-3.5" />
+                      {event.time}
+                    </span>
+                    <span className="flex items-center gap-1.5 tabular-nums">
+                      <Users className="h-3.5 w-3.5" />
+                      {event.attendees}
+                    </span>
+                    <ArrowRight className="h-4 w-4 -translate-x-1 opacity-0 transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100" />
+                  </div>
+                </Link>
+              </RevealItem>
+            ))}
+          </RevealGroup>
         </div>
       </div>
     </section>
diff --git a/components/motion/AnimatedNumber.tsx b/components/motion/AnimatedNumber.tsx
new file mode 100644
index 000000000..bef3f7b83
--- /dev/null
+++ b/components/motion/AnimatedNumber.tsx
@@ -0,0 +1,52 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { animate, useInView } from "framer-motion";
+
+interface AnimatedNumberProps {
+  value: number;
+  suffix?: string;
+  prefix?: string;
+  /** Decimal places to render (0.5 ratings etc). */
+  decimals?: number;
+  className?: string;
+}
+
+/**
+ * Counts from zero to `value` with a single framer-motion tween when the
+ * element scrolls into view. Replaces the setInterval-based counter that used
+ * to live inside HeroSection — same behaviour, one animation primitive, and
+ * it honours MotionConfig reducedMotion="user" for free.
+ */
+export function AnimatedNumber({
+  value,
+  suffix = "",
+  prefix = "",
+  decimals = 0,
+  className,
+}: AnimatedNumberProps) {
+  const ref = useRef<HTMLSpanElement>(null);
+  const isInView = useInView(ref, { once: true, margin: "-40px" });
+  const [display, setDisplay] = useState(0);
+
+  useEffect(() => {
+    if (!isInView) return;
+    const controls = animate(0, value, {
+      duration: 1.6,
+      ease: [0.16, 1, 0.3, 1],
+      onUpdate: setDisplay,
+    });
+    return () => controls.stop();
+  }, [isInView, value]);
+
+  return (
+    <span ref={ref} className={className}>
+      {prefix}
+      {display.toLocaleString(undefined, {
+        minimumFractionDigits: decimals,
+        maximumFractionDigits: decimals,
+      })}
+      {suffix}
+    </span>
+  );
+}
diff --git a/components/motion/MarqueeRow.tsx b/components/motion/MarqueeRow.tsx
new file mode 100644
index 000000000..9eb2b06a3
--- /dev/null
+++ b/components/motion/MarqueeRow.tsx
@@ -0,0 +1,46 @@
+"use client";
+
+interface MarqueeRowProps {
+  children: React.ReactNode;
+  /** Seconds for one full loop across the track. */
+  duration?: number;
+  reverse?: boolean;
+  className?: string;
+  /** Fade the left/right edges of the viewport container. */
+  fadeEdges?: boolean;
+}
+
+/**
+ * Infinite horizontal marquee built on the .animate-marquee keyframes in
+ * globals.css. The track carries the children twice; translateX(-50%) of the
+ * doubled track equals exactly one copy width, so the loop is seamless.
+ *
+ * Hovering pauses travel so items stay readable/clickable. Under
+ * prefers-reduced-motion globals.css stops the animation and hands scrolling
+ * back to the user.
+ */
+export function MarqueeRow({
+  children,
+  duration = 40,
+  reverse = false,
+  className = "",
+  fadeEdges = true,
+}: MarqueeRowProps) {
+  return (
+    <div
+      className={`group relative overflow-hidden ${
+        fadeEdges ? "mask-fade-x" : ""
+      } ${className}`}
+    >
+      <div
+        className={`flex w-max gap-4 pr-4 group-hover:[animation-play-state:paused] md:gap-6 md:pr-6 ${
+          reverse ? "animate-marquee-reverse" : "animate-marquee"
+        }`}
+        style={{ animationDuration: `${duration}s` }}
+      >
+        {children}
+        {children}
+      </div>
+    </div>
+  );
+}
diff --git a/components/motion/MotionRoot.tsx b/components/motion/MotionRoot.tsx
new file mode 100644
index 000000000..724fc78f2
--- /dev/null
+++ b/components/motion/MotionRoot.tsx
@@ -0,0 +1,16 @@
+"use client";
+
+import { MotionConfig } from "framer-motion";
+
+/**
+ * Shared motion environment for the marketing surfaces. Wraps children in
+ * MotionConfig reducedMotion="user" so every framer-motion animation in the
+ * tree honours the OS reduce-motion setting.
+ *
+ * Server components must never import framer-motion directly — their client
+ * bindings can resolve undefined during hydration ("Element type is
+ * invalid"). Anything animated gets wrapped by this provider instead.
+ */
+export function MotionRoot({ children }: { children: React.ReactNode }) {
+  return <MotionConfig reducedMotion="user">{children}</MotionConfig>;
+}
diff --git a/components/motion/Reveal.tsx b/components/motion/Reveal.tsx
new file mode 100644
index 000000000..03dde4ce6
--- /dev/null
+++ b/components/motion/Reveal.tsx
@@ -0,0 +1,106 @@
+"use client";
+
+import { motion, type Variants } from "framer-motion";
+import { fadeUp, staggerContainer } from "./presets";
+
+type RevealVariant = "fadeUp" | "fadeIn" | "blurIn" | "scaleIn";
+
+const VARIANTS: Record<RevealVariant, Variants> = {
+  fadeUp,
+  fadeIn: {
+    hidden: { opacity: 0 },
+    visible: { opacity: 1, transition: { duration: 0.6, ease: "easeOut" } },
+  },
+  blurIn: {
+    hidden: { opacity: 0, filter: "blur(8px)", y: 12 },
+    visible: {
+      opacity: 1,
+      filter: "blur(0px)",
+      y: 0,
+      transition: { duration: 0.7, ease: [0.16, 1, 0.3, 1] },
+    },
+  },
+  scaleIn: {
+    hidden: { opacity: 0, scale: 0.94 },
+    visible: {
+      opacity: 1,
+      scale: 1,
+      transition: { duration: 0.6, ease: [0.16, 1, 0.3, 1] },
+    },
+  },
+};
+
+interface RevealProps {
+  children: React.ReactNode;
+  variant?: RevealVariant;
+  /** Seconds of delay before the reveal starts. */
+  delay?: number;
+  className?: string;
+  /** Animate every time the element enters the viewport (default: once). */
+  repeat?: boolean;
+}
+
+/**
+ * Scroll-triggered entrance for any block. Renders a plain div until it is in
+ * view, so content is never trapped invisible if JS fails — the initial state
+ * only applies once the element mounts as a client component.
+ */
+export function Reveal({
+  children,
+  variant = "fadeUp",
+  delay = 0,
+  className,
+  repeat = false,
+}: RevealProps) {
+  return (
+    <motion.div
+      className={className}
+      initial="hidden"
+      whileInView="visible"
+      viewport={{ once: !repeat, margin: "-80px" }}
+      variants={VARIANTS[variant]}
+      transition={{ delay }}
+    >
+      {children}
+    </motion.div>
+  );
+}
+
+/** Parent that staggers its immediate <RevealItem> children into view. */
+export function RevealGroup({
+  children,
+  stagger = 0.08,
+  delayChildren = 0.05,
+  className,
+}: {
+  children: React.ReactNode;
+  stagger?: number;
+  delayChildren?: number;
+  className?: string;
+}) {
+  return (
+    <motion.div
+      className={className}
+      initial="hidden"
+      whileInView="visible"
+      viewport={{ once: true, margin: "-60px" }}
+      variants={staggerContainer(stagger, delayChildren)}
+    >
+      {children}
+    </motion.div>
+  );
+}
+
+export function RevealItem({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <motion.div className={className} variants={fadeUp}>
+      {children}
+    </motion.div>
+  );
+}
diff --git a/components/motion/SmoothScroll.tsx b/components/motion/SmoothScroll.tsx
new file mode 100644
index 000000000..a129689c3
--- /dev/null
+++ b/components/motion/SmoothScroll.tsx
@@ -0,0 +1,30 @@
+"use client";
+
+import { ReactLenis } from "lenis/react";
+
+import { MotionRoot } from "./MotionRoot";
+
+/**
+ * Inertial smooth scrolling + shared motion config for the marketing surfaces
+ * (landing, explore). Scoped per page tree rather than the root layout so
+ * dashboard/app routes keep native scrolling. Lenis drives window scroll, so
+ * sticky positioning, anchor links and scroll restoration all keep working.
+ */
+export function SmoothScroll({ children }: { children: React.ReactNode }) {
+  return (
+    <MotionRoot>
+      <ReactLenis
+        root
+        options={{
+          lerp: 0.11,
+          smoothWheel: true,
+          // Let touch devices use their native momentum — synthesised inertia
+          // on mobile feels laggy and fights pull-to-refresh.
+          syncTouch: false,
+        }}
+      >
+        {children}
+      </ReactLenis>
+    </MotionRoot>
+  );
+}
diff --git a/components/motion/SpotlightGrid.tsx b/components/motion/SpotlightGrid.tsx
new file mode 100644
index 000000000..9c92b4388
--- /dev/null
+++ b/components/motion/SpotlightGrid.tsx
@@ -0,0 +1,29 @@
+"use client";
+
+import { useRef } from "react";
+
+/**
+ * Cursor-following spotlight over a hairline grid. Writes --sx/--sy (px) on
+ * the container; the .spotlight-grid utility in globals.css paints both the
+ * masked grid and the soft radial from those variables. Purely decorative —
+ * pointer-events: none, and static fallback position when untouched.
+ */
+export function SpotlightGrid({ className = "" }: { className?: string }) {
+  const ref = useRef<HTMLDivElement>(null);
+
+  function onPointerMove(e: React.PointerEvent<HTMLDivElement>) {
+    if (e.pointerType !== "mouse" || !ref.current) return;
+    const rect = ref.current.getBoundingClientRect();
+    ref.current.style.setProperty("--sx", `${e.clientX - rect.left}px`);
+    ref.current.style.setProperty("--sy", `${e.clientY - rect.top}px`);
+  }
+
+  return (
+    <div
+      ref={ref}
+      aria-hidden
+      onPointerMove={onPointerMove}
+      className={`spotlight-grid ${className}`}
+    />
+  );
+}
diff --git a/components/motion/TiltCard.tsx b/components/motion/TiltCard.tsx
new file mode 100644
index 000000000..2e43f8118
--- /dev/null
+++ b/components/motion/TiltCard.tsx
@@ -0,0 +1,84 @@
+"use client";
+
+import { useRef, useState } from "react";
+import {
+  motion,
+  useMotionTemplate,
+  useMotionValue,
+  useSpring,
+  useTransform,
+} from "framer-motion";
+
+interface TiltCardProps {
+  children: React.ReactNode;
+  className?: string;
+  /** Max rotation in degrees at the card edge. */
+  maxTilt?: number;
+  /** Render a specular glare that tracks the pointer. */
+  glare?: boolean;
+}
+
+/**
+ * Pointer-tracked 3D tilt with optional moving glare. Springs keep the motion
+ * physical; on touch devices there is no hover pointer, so the handlers simply
+ * never fire and the card renders static. Reduced-motion users get a static
+ * card too via MotionConfig reducedMotion="user".
+ */
+export function TiltCard({
+  children,
+  className = "",
+  maxTilt = 8,
+  glare = true,
+}: TiltCardProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [hovering, setHovering] = useState(false);
+
+  const px = useMotionValue(0.5);
+  const py = useMotionValue(0.5);
+
+  const rotateX = useSpring(useTransform(py, [0, 1], [maxTilt, -maxTilt]), {
+    stiffness: 180,
+    damping: 20,
+  });
+  const rotateY = useSpring(useTransform(px, [0, 1], [-maxTilt, maxTilt]), {
+    stiffness: 180,
+    damping: 20,
+  });
+
+  const glareX = useTransform(px, (v) => `${v * 100}%`);
+  const glareY = useTransform(py, (v) => `${v * 100}%`);
+  const glareBg = useMotionTemplate`radial-gradient(circle at ${glareX} ${glareY}, rgba(255,255,255,0.18), transparent 60%)`;
+
+  function onPointerMove(e: React.PointerEvent<HTMLDivElement>) {
+    if (e.pointerType !== "mouse" || !ref.current) return;
+    const rect = ref.current.getBoundingClientRect();
+    px.set((e.clientX - rect.left) / rect.width);
+    py.set((e.clientY - rect.top) / rect.height);
+  }
+
+  return (
+    <motion.div
+      ref={ref}
+      className={`relative [transform-style:preserve-3d] ${className}`}
+      style={{ rotateX, rotateY, perspective: 900 }}
+      onPointerMove={onPointerMove}
+      onPointerEnter={(e) => {
+        if (e.pointerType === "mouse") setHovering(true);
+      }}
+      onPointerLeave={() => {
+        setHovering(false);
+        px.set(0.5);
+        py.set(0.5);
+      }}
+    >
+      {children}
+      {glare && hovering && (
+        <motion.div
+          aria-hidden
+          className="pointer-events-none absolute inset-0 rounded-[inherit]"
+          style={{ background: glareBg }}
+        />
+      )}
+    </motion.div>
+  );
+}
diff --git a/components/motion/index.ts b/components/motion/index.ts
new file mode 100644
index 000000000..0635d33f8
--- /dev/null
+++ b/components/motion/index.ts
@@ -0,0 +1,19 @@
+export { AnimatedNumber } from "./AnimatedNumber";
+export { MarqueeRow } from "./MarqueeRow";
+export { MotionRoot } from "./MotionRoot";
+export { Reveal, RevealGroup, RevealItem } from "./Reveal";
+export { SmoothScroll } from "./SmoothScroll";
+export { SpotlightGrid } from "./SpotlightGrid";
+export { TiltCard } from "./TiltCard";
+export {
+  EASE_OUT_EXPO,
+  blurIn,
+  fadeUp,
+  fadeIn,
+  scaleIn,
+  springSnappy,
+  springSoft,
+  staggerContainer,
+  wordRevealChild,
+  wordRevealParent,
+} from "./presets";
diff --git a/components/motion/presets.ts b/components/motion/presets.ts
new file mode 100644
index 000000000..18e04450f
--- /dev/null
+++ b/components/motion/presets.ts
@@ -0,0 +1,73 @@
+import type { Transition, Variants } from "framer-motion";
+
+/** Signature easing of the overhaul — fast start, long glide. Mirrors --ease-out-expo in globals.css. */
+export const EASE_OUT_EXPO = [0.16, 1, 0.3, 1] as const;
+
+export const springSoft: Transition = {
+  type: "spring",
+  stiffness: 120,
+  damping: 20,
+  mass: 0.9,
+};
+
+export const springSnappy: Transition = {
+  type: "spring",
+  stiffness: 400,
+  damping: 32,
+};
+
+export const fadeUp: Variants = {
+  hidden: { opacity: 0, y: 28 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.7, ease: EASE_OUT_EXPO },
+  },
+};
+
+export const fadeIn: Variants = {
+  hidden: { opacity: 0 },
+  visible: { opacity: 1, transition: { duration: 0.6, ease: "easeOut" } },
+};
+
+export const blurIn: Variants = {
+  hidden: { opacity: 0, filter: "blur(8px)", y: 12 },
+  visible: {
+    opacity: 1,
+    filter: "blur(0px)",
+    y: 0,
+    transition: { duration: 0.7, ease: EASE_OUT_EXPO },
+  },
+};
+
+export const scaleIn: Variants = {
+  hidden: { opacity: 0, scale: 0.94 },
+  visible: {
+    opacity: 1,
+    scale: 1,
+    transition: { duration: 0.6, ease: EASE_OUT_EXPO },
+  },
+};
+
+export const staggerContainer = (
+  stagger = 0.08,
+  delayChildren = 0.05,
+): Variants => ({
+  hidden: {},
+  visible: { transition: { staggerChildren: stagger, delayChildren } },
+});
+
+/** Word-level headline reveal: parent staggers, children rise from a clipped line. */
+export const wordRevealParent: Variants = {
+  hidden: {},
+  visible: { transition: { staggerChildren: 0.045 } },
+};
+
+export const wordRevealChild: Variants = {
+  hidden: { y: "110%", rotate: 4 },
+  visible: {
+    y: "0%",
+    rotate: 0,
+    transition: { duration: 0.85, ease: EASE_OUT_EXPO },
+  },
+};
diff --git a/package-lock.json b/package-lock.json
index 43d0a0945..013be2a74 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -57,6 +57,7 @@
         "date-fns-tz": "^3.2.0",
         "framer-motion": "^11.15.0",
         "iso-639-1": "^3.1.5",
+        "lenis": "^1.3.26",
         "libsodium-wrappers": "^0.8.2",
         "lucide-react": "^0.563.0",
         "next": "^15.5.0",
@@ -14518,6 +14519,37 @@
         "url": "https://ko-fi.com/killymxi"
       }
     },
+    "node_modules/lenis": {
+      "version": "1.3.26",
+      "resolved": "https://registry.npmjs.org/lenis/-/lenis-1.3.26.tgz",
+      "integrity": "sha512-s/xTCZCxTFvHbAN1OzuhNaN5YPJH2ail0XAkctKW1b+RUAG4nUL5UHLXwNko1h8aEeT2jspBXegMgPJd8zcuag==",
+      "license": "MIT",
+      "workspaces": [
+        "packages/*",
+        "playground",
+        "playground/*"
+      ],
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/darkroomengineering"
+      },
+      "peerDependencies": {
+        "@nuxt/kit": ">=3.0.0",
+        "react": ">=17.0.0",
+        "vue": ">=3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@nuxt/kit": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "vue": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/leven": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
diff --git a/package.json b/package.json
index 80e460a23..1ceeea3c1 100644
--- a/package.json
+++ b/package.json
@@ -104,6 +104,7 @@
     "date-fns-tz": "^3.2.0",
     "framer-motion": "^11.15.0",
     "iso-639-1": "^3.1.5",
+    "lenis": "^1.3.26",
     "libsodium-wrappers": "^0.8.2",
     "lucide-react": "^0.563.0",
     "next": "^15.5.0",
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 611c3dbd8..9fad6fbb7 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -154,6 +154,16 @@ const config: Config = {
           "0 2px 4px -2px hsl(var(--shadow-color) / 0.1), 0 4px 8px -2px hsl(var(--shadow-color) / 0.06)",
         "elevation-3":
           "0 8px 16px -4px hsl(var(--shadow-color) / 0.12), 0 16px 32px -8px hsl(var(--shadow-color) / 0.08)",
+        /* UI overhaul: layered card shadows that read as physical elevation
+           rather than a flat outline glow (shadow-card / shadow-lift / float). */
+        card:
+          "0 1px 1px hsl(var(--shadow-color) / 0.03), 0 2px 6px -1px hsl(var(--shadow-color) / 0.05), 0 8px 24px -6px hsl(var(--shadow-color) / 0.06)",
+        lift:
+          "0 2px 4px -1px hsl(var(--shadow-color) / 0.05), 0 12px 28px -6px hsl(var(--shadow-color) / 0.1), 0 32px 64px -16px hsl(var(--shadow-color) / 0.1)",
+      },
+      transitionTimingFunction: {
+        // Signature easing of the overhaul — fast start, long glide.
+        "out-expo": "cubic-bezier(0.16, 1, 0.3, 1)",
       },
       keyframes: {
         "accordion-down": {