diff --git a/website/docs/home.md b/website/docs/home.md
new file mode 100644
index 000000000..1ebfcebe5
--- /dev/null
+++ b/website/docs/home.md
@@ -0,0 +1,12 @@
+---
+title: Home
+sidebar_label: Home
+slug: /home
+hide_table_of_contents: true
+hide_title: true
+custom_edit_url: null
+---
+
+import DocsHome from '@site/src/components/docs-widgets/DocsHome';
+
+<DocsHome />
diff --git a/website/sidebars.ts b/website/sidebars.ts
index 16ccd3952..1014b2f49 100644
--- a/website/sidebars.ts
+++ b/website/sidebars.ts
@@ -12,6 +12,11 @@ import type { SidebarsConfig } from "@docusaurus/plugin-content-docs";
  */
 const sidebars: SidebarsConfig = {
   docs: [
+    {
+      type: "doc",
+      id: "home",
+      label: "Home",
+    },
     {
       type: "category",
       label: "Get Started",
diff --git a/website/src/components/doc-navbar/index.tsx b/website/src/components/doc-navbar/index.tsx
index 6dbac3348..15f51b40b 100644
--- a/website/src/components/doc-navbar/index.tsx
+++ b/website/src/components/doc-navbar/index.tsx
@@ -18,11 +18,17 @@ type TabConfig = {
 };
 
 const tabs: TabConfig[] = [
+  {
+    id: "home",
+    label: "Home",
+    href: "/docs/home/",
+    match: (pathname) => pathname === "/docs/home/" || pathname === "/docs/home",
+  },
   {
     id: "voltagent",
-    label: "VoltAgent Docs",
+    label: "VoltAgent",
     href: "/docs/",
-    match: (pathname) => pathname.startsWith("/docs/"),
+    match: (pathname) => pathname.startsWith("/docs/") && !pathname.startsWith("/docs/home"),
   },
   {
     id: "observability",
@@ -78,8 +84,8 @@ export default function DocNavbar() {
       <nav className={styles.docNavbar} aria-label="Documentation navigation">
         <div className={styles.topRow}>
           <Link to="/" className={styles.brandLink} aria-label="VoltAgent home">
-            <span className={styles.brandMark}>
-              <BoltIcon className={styles.brandIcon} />
+            <span className="flex items-center justify-center w-8 h-8 rounded-full border-2 border-solid border-[#00d992] bg-[rgba(0,217,146,0.08)]">
+              <BoltIcon className="w-4 h-4 text-[#00d992]" />
             </span>
           </Link>
           <div className={styles.actions}>
@@ -136,6 +142,16 @@ export default function DocNavbar() {
           <NavbarMobileSidebarSecondaryMenu />
           <div className={styles.mobileDivider} />
           <div className={styles.mobileLinks}>
+            <Link
+              to="/docs/home/"
+              className={clsx(
+                styles.mobileNavLink,
+                activeTab === "home" && styles.mobileNavLinkActive,
+              )}
+              onClick={() => setIsMenuOpen(false)}
+            >
+              Home
+            </Link>
             <Link
               to="/docs/"
               className={clsx(
@@ -144,7 +160,7 @@ export default function DocNavbar() {
               )}
               onClick={() => setIsMenuOpen(false)}
             >
-              VoltAgent Docs
+              VoltAgent
             </Link>
             <Link
               to="/observability-docs/"
diff --git a/website/src/components/docs-widgets/DocsHome.tsx b/website/src/components/docs-widgets/DocsHome.tsx
new file mode 100644
index 000000000..112a2e6f1
--- /dev/null
+++ b/website/src/components/docs-widgets/DocsHome.tsx
@@ -0,0 +1,185 @@
+import Link from "@docusaurus/Link";
+import {
+  BookOpenIcon,
+  CodeBracketIcon,
+  ListBulletIcon,
+  RocketLaunchIcon,
+  Squares2X2Icon,
+} from "@heroicons/react/24/outline";
+// @ts-expect-error - Docusaurus theme component
+import CodeBlock from "@theme/CodeBlock";
+import { FeatureShowcase } from "../feature-showcase";
+import { DotPattern } from "../ui/dot-pattern";
+
+const codeExample = `import { VoltAgent, Agent } from "@voltagent/core";
+import { honoServer } from "@voltagent/server-hono";
+import { openai } from "@ai-sdk/openai";
+
+const agent = new Agent({
+  name: "my-voltagent-app",
+  instructions: "A helpful assistant that answers questions",
+  model: openai("gpt-4o-mini"),
+});
+
+new VoltAgent({
+  agents: { agent },
+  server: honoServer(),
+});`;
+
+const coreFeatures = ["Memory", "RAG", "Guardrails", "Tools", "MCP", "Voice", "Workflow"];
+
+const quickLinks = [
+  {
+    title: "Quick Start",
+    description: "Get up and running with VoltAgent in minutes.",
+    href: "/docs/quick-start/",
+    icon: RocketLaunchIcon,
+  },
+
+  {
+    title: "Recipes & Guides",
+    description: "Ready-to-use patterns and best practices.",
+    href: "/recipes-and-guides/",
+    icon: BookOpenIcon,
+  },
+
+  {
+    title: "5 Steps Tutorial",
+    description: "Learn the fundamentals with hands-on examples.",
+    href: "/tutorial/introduction/",
+    icon: ListBulletIcon,
+  },
+];
+
+export default function DocsHome() {
+  return (
+    <div className="docs-home -mt-8 max-w-7xl mx-auto md:px-4">
+      <DotPattern dotColor="#94a3b8" dotSize={1.2} spacing={20} />
+      {/* Hero Section - Centered */}
+      <div className="text-center pt-8 md:pt-16 pb-8 md:pb-12 mb-4 md:mb-8 overflow-visible">
+        <div
+          className="text-2xl sm:text-3xl md:text-5xl lg:text-6xl font-semibold mb-4 md:mb-6 leading-normal pb-2"
+          style={{
+            background: "linear-gradient(to right, #ffffff, #a1a1aa)",
+            WebkitBackgroundClip: "text",
+            WebkitTextFillColor: "transparent",
+            backgroundClip: "text",
+            lineHeight: 1.2,
+          }}
+        >
+          Build · Observe · Automate · Ship
+          <br />
+          AI Agents
+        </div>
+        <div className="text-sm sm:text-base md:text-lg text-white max-w-xl mx-auto px-2">
+          AI Agent Engineering Platform for <span className="text-[#b2b2b2]">development</span>,{" "}
+          <span className="text-[#b2b2b2]">observability</span>,{" "}
+          <span className="text-[#b2b2b2]">evaluation</span>, and{" "}
+          <span className="text-[#b2b2b2]">deployment</span> in one place.
+        </div>
+      </div>
+
+      {/* VoltAgent Core Section */}
+      <div className="mb-8 md:mb-12">
+        <div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-3 mb-3">
+          <div className="flex items-center gap-2">
+            <CodeBracketIcon className="w-5 h-5 md:w-6 md:h-6 text-[#00d992]" />
+            <span className="text-xl md:text-2xl font-semibold text-white">Core</span>
+          </div>
+          <span className="px-2 py-0.5 text-xs md:text-sm rounded-full bg-zinc-800/80 text-zinc-300 border border-zinc-700/50">
+            Open Source TypeScript Framework
+          </span>
+        </div>
+        <p className="docs-home-description text-sm md:text-base mb-4 text-zinc-400">
+          Everything you need to build production-ready AI agents in TypeScript.
+        </p>
+
+        {/* Feature Badges */}
+        <div className="flex flex-wrap gap-1.5 md:gap-2 mb-4 md:mb-6">
+          {coreFeatures.map((feature) => (
+            <span
+              key={feature}
+              className="px-2 md:px-3 py-0.5 md:py-1 text-xs md:text-sm rounded-full bg-zinc-800/50 text-zinc-300 border border-zinc-700/50"
+            >
+              {feature}
+            </span>
+          ))}
+          <span className="px-2 md:px-3 py-0.5 md:py-1 text-xs md:text-sm rounded-full bg-zinc-800/50 text-zinc-500 border border-zinc-700/50">
+            and more...
+          </span>
+        </div>
+
+        {/* Code Block */}
+        <CodeBlock language="typescript">{codeExample}</CodeBlock>
+      </div>
+
+      {/* VoltOps Console Section */}
+      <div className="mb-8 md:mb-12 bg-black">
+        <div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-3 mb-3">
+          <div className="flex items-center gap-2">
+            <Squares2X2Icon className="w-5 h-5 md:w-6 md:h-6 text-[#00d992]" />
+            <span className="text-xl md:text-2xl font-semibold text-white">VoltOps Console</span>
+          </div>
+          <span className="px-2 py-0.5 text-xs md:text-sm rounded-full bg-zinc-800/80 text-zinc-300 border border-zinc-700/50">
+            Cloud / Self-Hosted Platform
+          </span>
+        </div>
+        <p className="docs-home-description text-sm md:text-base mb-4 text-zinc-400">
+          Enterprise-grade platform to take AI agents from development to production.
+        </p>
+        {/* Feature Showcase - Full Width */}
+        <div className="my-6 md:my-12 relative left-1/2 right-1/2 -ml-[50vw] -mr-[50vw] w-screen max-w-none px-2 md:px-8">
+          <FeatureShowcase />
+        </div>
+        {/*   <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          {voltOpsFeatures.map((feature) => (
+            <Link to={feature.href} className="no-underline hover:no-underline">
+              <div
+                key={feature.title}
+                className="group p-5 cursor-pointer rounded-lg border border-solid border-zinc-800 hover:border-zinc-700 transition-all duration-200"
+              >
+                <div className="flex items-center gap-2 mb-2">
+                  <feature.icon className="w-5 h-5 text-[#00d992]" />
+                  <span className=" text-white">{feature.title}</span>
+                </div>
+
+                <p className="text-sm text-zinc-400 mb-4 leading-relaxed">{feature.description}</p>
+                <span className="inline-flex items-center gap-1 text-zinc-400 group-hover:text-white text-sm transition-all">
+                  Learn more <ArrowRightIcon className="w-3 h-3" />
+                </span>
+              </div>
+            </Link>
+          ))}
+        </div> */}
+      </div>
+
+      {/* Quick Links Section */}
+      <div className="mb-8">
+        <h2 className="text-lg md:text-xl font-semibold mb-3 md:mb-4 text-white">Get Started</h2>
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3 md:gap-4">
+          {quickLinks.map((link) => (
+            <div
+              key={link.title}
+              className="group p-3 md:p-4 rounded-lg !border !border-solid !border-zinc-800 transition-all duration-200"
+            >
+              <div className="flex items-start gap-2 md:gap-3">
+                <link.icon className="w-4 h-4 md:w-5 md:h-5 text-[#00d992] flex-shrink-0 mt-0.5" />
+                <Link
+                  to={link.href}
+                  className="text-white font-medium hover:text-emerald-400 transition-colors no-underline hover:no-underline"
+                >
+                  <div className="flex text-white flex-col">
+                    <span className="text-sm md:text-base">{link.title}</span>
+                    <span className="text-[#b2b2b2] text-xs md:text-sm mt-1">
+                      {link.description}
+                    </span>
+                  </div>
+                </Link>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/website/src/components/feature-showcase/index.tsx b/website/src/components/feature-showcase/index.tsx
index df73fdd51..89bbcd3d0 100644
--- a/website/src/components/feature-showcase/index.tsx
+++ b/website/src/components/feature-showcase/index.tsx
@@ -69,12 +69,12 @@ export function FeatureShowcase() {
   }, [activeTab]);
 
   return (
-    <section className="relative z-10  px-4 md:px-6">
+    <section className="feature-showcase relative z-10 px-4 md:px-6">
       <div className="max-w-7xl mx-auto">
         {/* Main Container */}
-        <div className="overflow-hidden border border-solid border-zinc-800 rounded-lg">
+        <div className="overflow-hidden !border !border-solid !border-zinc-800 rounded-lg">
           {/* Tab Bar + Description (unified) */}
-          <div className=" border-b border-solid border-t-0 border-l-0 border-r-0 border-zinc-800">
+          <div className="!border-b !border-solid !border-t-0 !border-l-0 !border-r-0 !border-zinc-800">
             {/* Tabs */}
             <div
               ref={tabsContainerRef}
@@ -111,7 +111,7 @@ export function FeatureShowcase() {
                   >
                     {Icon && (
                       <Icon
-                        className={`w-5 h-5 transition-colors duration-700 ease-in-out ${
+                        className={`w-3.5 h-3.5 md:w-5 md:h-5 transition-colors duration-700 ease-in-out ${
                           isHighlighted ? "text-emerald-400" : ""
                         }`}
                       />
@@ -130,14 +130,14 @@ export function FeatureShowcase() {
                 hoveredTab ? "bg-zinc-800/40" : activeTab ? "bg-zinc-800/60" : "bg-zinc-800/40"
               }`}
             >
-              <p
-                className={`text-xs md:text-sm m-0 flex-1 transition-colors duration-700 ${
+              <span
+                className={`text-xs md:text-sm flex-1 transition-colors duration-700 ${
                   hoveredTab || activeTab ? "" : "text-zinc-100"
                 }`}
               >
                 {displayTabData?.footerText ||
                   "Start building production-ready AI agents in minutes"}
-              </p>
+              </span>
               <a
                 href={displayTabData?.docLink || "/docs"}
                 target="_blank"
@@ -199,11 +199,11 @@ export function FeatureShowcase() {
                 </div>
 
                 {/* Code Panel - Bottom on mobile, Left on desktop */}
-                <div className="h-[250px] sm:h-[350px] md:h-[600px] overflow-auto showcase-code-block lg:border-r border-solid border-t-0 border-b-0 border-l-0 border-zinc-700 order-2 lg:order-1">
+                <div className="h-[250px] sm:h-[350px] md:h-[600px] overflow-auto showcase-code-block lg:!border-r !border-solid !border-t-0 !border-b-0 !border-l-0 !border-zinc-700 order-2 lg:order-1">
                   {displayTabData?.triggerCode && displayTabData?.actionCode ? (
                     <div className="flex flex-col h-full">
                       {/* Code Tabs */}
-                      <div className="flex border-b border-solid border-t-0 border-l-0 border-r-0 border-zinc-800 bg-black">
+                      <div className="flex !border-b !border-solid !border-t-0 !border-l-0 !border-r-0 !border-zinc-800 bg-black">
                         <button
                           onClick={() => setActiveCodeTab("trigger")}
                           className={`px-4 py-2 text-xs font-medium transition-colors cursor-pointer border-0 outline-none ${
diff --git a/website/src/components/feature-showcase/mock-data.ts b/website/src/components/feature-showcase/mock-data.ts
index ae51b745e..08816c773 100644
--- a/website/src/components/feature-showcase/mock-data.ts
+++ b/website/src/components/feature-showcase/mock-data.ts
@@ -296,7 +296,7 @@ const agent = new Agent({
     ],
   },
 });`,
-    footerText: "Block harmful content, mask PII, and enforce topic boundaries automatically",
+    footerText: "Validate inputs and outputs. Block harmful content and enforce safety rules.",
     docLink: "/docs/guardrails/overview",
   },
   {
@@ -305,7 +305,7 @@ const agent = new Agent({
     icon: "zap",
     image: "https://cdn.voltagent.dev/website/feature-showcase/deployment-4.png",
     fullImage: true,
-    footerText: "Deploy agents to production with one click — no infrastructure to manage",
+    footerText: "Deploy agents to production with one click, no infrastructure to manage",
     docLink: "/deployment-docs/",
   },
 ];
diff --git a/website/src/components/navbar/index.tsx b/website/src/components/navbar/index.tsx
index 0a8dc1b47..fd5eeb3a9 100644
--- a/website/src/components/navbar/index.tsx
+++ b/website/src/components/navbar/index.tsx
@@ -43,21 +43,42 @@ import styles from "./styles.module.css";
 
 // Docs page tab configuration
 const docTabs = [
-  { label: "VoltAgent", href: "/docs/", match: "/docs/" },
-  { label: "Observability", href: "/observability-docs/", match: "/observability-docs/" },
+  { label: "Home", href: "/docs/home/", match: (path: string) => path.startsWith("/docs/home") },
+  {
+    label: "VoltAgent",
+    href: "/docs/",
+    match: (path: string) => path.startsWith("/docs/") && !path.startsWith("/docs/home"),
+  },
+  {
+    label: "Observability",
+    href: "/observability-docs/",
+    match: (path: string) => path.startsWith("/observability-docs/"),
+  },
   {
     label: "Actions & Triggers",
     href: "/actions-triggers-docs/",
-    match: "/actions-triggers-docs/",
+    match: (path: string) => path.startsWith("/actions-triggers-docs/"),
+  },
+  {
+    label: "Evaluation",
+    href: "/evaluation-docs/",
+    match: (path: string) => path.startsWith("/evaluation-docs/"),
   },
-  { label: "Evaluation", href: "/evaluation-docs/", match: "/evaluation-docs/" },
   {
     label: "Prompt Engineering",
     href: "/prompt-engineering-docs/",
-    match: "/prompt-engineering-docs/",
+    match: (path: string) => path.startsWith("/prompt-engineering-docs/"),
+  },
+  {
+    label: "Deployment",
+    href: "/deployment-docs/",
+    match: (path: string) => path.startsWith("/deployment-docs/"),
+  },
+  {
+    label: "Recipes & Guides",
+    href: "/recipes-and-guides/",
+    match: (path: string) => path.startsWith("/recipes-and-guides/"),
   },
-  { label: "Deployment", href: "/deployment-docs/", match: "/deployment-docs/" },
-  { label: "Recipes & Guides", href: "/recipes-and-guides/", match: "/recipes-and-guides/" },
 ];
 
 export default function Navbar() {
@@ -201,7 +222,7 @@ export default function Navbar() {
                 to={tab.href}
                 className={clsx(
                   styles.docsTab,
-                  location.pathname.startsWith(tab.match) && styles.docsTabActive,
+                  tab.match(location.pathname) && styles.docsTabActive,
                 )}
               >
                 {tab.label}
diff --git a/website/src/components/navbar/styles.module.css b/website/src/components/navbar/styles.module.css
index a829b885f..5d5d9ca39 100644
--- a/website/src/components/navbar/styles.module.css
+++ b/website/src/components/navbar/styles.module.css
@@ -369,10 +369,13 @@
 }
 
 .docsLogoIcon {
-  width: 1.1rem;
-  height: 1.1rem;
+  width: 1.5rem;
+  height: 1.5rem  ;
   flex-shrink: 0;
   align-self: center;
+  border: 1px solid #00d992;
+  border-radius: 50%;
+  padding: 3px;
 }
 
 .docsLogoText {
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index e9156d457..f2a95f75b 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -4666,13 +4666,13 @@ code .token.coord {
   background-color: transparent !important;
 }
 
-/* Root level section headers (GETTING STARTED, AGENTS, etc.) */
+/* Root level section headers (Getting Started, Agents, etc.) */
 .menu__list-item-collapsible .menu__link {
-  font-weight: 600 !important;
+  font-weight: 500 !important;
   color: #ffffff !important; /* Default white, emerald will only override for root level */
-  font-size: 0.75rem !important;
-  text-transform: uppercase !important;
-  letter-spacing: 0.05em !important;
+  font-size: 0.875rem !important;
+  text-transform: capitalize !important;
+  letter-spacing: 0.02em !important;
   background-color: transparent !important;
   border-left: 3px solid transparent !important;
   position: relative !important;
@@ -4721,19 +4721,19 @@ code .token.coord {
   > .menu__list-item-collapsible
   .menu__link {
   color: #ffffff !important;
-  font-weight: 600 !important;
+  font-weight: 500 !important;
 }
 
 /* Level 2 category headers (Storage Adapters, SCORERS, etc.) - same size as level 1 */
 .theme-doc-sidebar-item-category-level-2 .menu__list-item-collapsible .menu__link {
   font-size: 0.875rem !important;
-  font-weight: 600 !important;
+  font-weight: 500 !important;
   color: #ffffff !important;
 }
 
 .theme-doc-sidebar-item-category-level-2 > .menu__list-item-collapsible > .menu__link {
   font-size: 0.875rem !important;
-  font-weight: 600 !important;
+  font-weight: 500 !important;
   color: #ffffff !important;
 }
 
@@ -4758,7 +4758,7 @@ code .token.coord {
 .menu__list .menu__list .menu__link {
   padding: 0.4rem 0.75rem !important;
   padding-left: 2rem !important;
-  font-weight: 400 !important;
+  font-weight: 500 !important;
   color: rgb(156, 163, 175) !important;
   font-size: 0.875rem !important;
   width: 100% !important;
@@ -4804,8 +4804,8 @@ code .token.coord {
 .menu__list .menu__list .menu__list-item-collapsible .menu__link {
   padding-left: 1rem !important;
   color: #ffffff !important;
-  font-size: 12px !important;
-  font-weight: 600 !important;
+  font-size: 0.875rem !important;
+  font-weight: 500 !important;
 }
 
 [data-theme="dark"] .menu__list .menu__list .menu__list-item-collapsible .menu__link {
@@ -4830,11 +4830,11 @@ code .token.coord {
 }
 
 [data-theme="dark"] .menu__list-item-collapsible .menu__link {
-  font-weight: 700 !important;
+  font-weight: 500 !important;
   color: #ffffff !important; /* Default beyaz */
-  font-size: 0.75rem !important;
-  text-transform: uppercase !important;
-  letter-spacing: 0.05em !important;
+  font-size: 0.875rem !important;
+  text-transform: capitalize !important;
+  letter-spacing: 0.02em !important;
   background-color: transparent !important;
   border-left: none !important;
   padding-left: 0.75rem !important;
@@ -4962,7 +4962,7 @@ aside.theme-doc-sidebar-container .menu {
 .menu__list .menu__list .menu__link {
   padding: 0.4rem 0.75rem !important;
   padding-left: 1rem !important;
-  font-weight: 400 !important;
+  font-weight: 500 !important;
   color: rgb(156, 163, 175) !important;
   font-size: 0.875rem !important;
   width: 100% !important;
@@ -5416,10 +5416,10 @@ nav.table-of-contents .table-of-contents__link--active,
 
 /* Level 1 link items (Evals, Triggers, Actions, etc.) - same style as category headers */
 .theme-doc-sidebar-item-link-level-1 > .menu__link {
-  font-size: 0.75rem !important;
-  font-weight: 700 !important;
-  text-transform: uppercase !important;
-  letter-spacing: 0.05em !important;
+  font-size: 0.875rem !important;
+  font-weight: 500 !important;
+  text-transform: capitalize !important;
+  letter-spacing: 0.02em !important;
   color: #ffffff !important;
 }
 
@@ -5877,3 +5877,173 @@ html[data-theme="dark"] .three-columns .card p {
 .showcase-code-block [class*="codeBlockTitle"] {
   display: none !important;
 }
+
+/* ========================================
+   Docs Home Page Styles
+   ======================================== */
+
+/* Hide sidebar on docs home page */
+.docs-home-page-wrapper aside.theme-doc-sidebar-container {
+  display: none !important;
+}
+
+/* Make main content full width on home page */
+.docs-home-page-wrapper main {
+  max-width: 100% !important;
+}
+
+.docs-home-page-wrapper .col--3 {
+  display: none !important;
+}
+
+.docs-home-page-wrapper [class*="docMainContainer"] {
+  max-width: 100% !important;
+  padding: 0 !important;
+}
+
+/* Center the home page content */
+.docs-home-page {
+  max-width: 960px !important;
+  margin: 0 auto !important;
+  padding: 2rem 1.5rem !important;
+}
+
+/* Home page hero section */
+.docs-home-page h1 {
+  font-size: 2.5rem !important;
+  font-weight: 700 !important;
+  margin-bottom: 1rem !important;
+  text-align: center !important;
+}
+
+.docs-home-page > p:first-of-type {
+  font-size: 1.125rem !important;
+  text-align: center !important;
+  opacity: 0.9;
+  max-width: 700px;
+  margin: 0 auto 1.5rem auto !important;
+}
+
+/* Center hero buttons */
+.docs-home-page .home-hero-buttons {
+  justify-content: center !important;
+}
+
+/* Section headings */
+.docs-home-page h2 {
+  font-size: 1.5rem !important;
+  font-weight: 600 !important;
+  margin-top: 2rem !important;
+  margin-bottom: 0.75rem !important;
+}
+
+/* Feature cards hover effect */
+.home-feature-link:hover {
+  border-color: var(--ifm-color-emphasis-500) !important;
+  transform: translateY(-2px);
+  transition: all 0.2s ease;
+}
+
+.home-feature-link {
+  transition: all 0.2s ease;
+}
+
+/* Hide copy-page dropdown on docs home page */
+.docs-home .copy-page-dropdown-wrapper {
+  display: none !important;
+}
+
+/* Alternative selector for docs home page */
+.docs-home ~ .copy-page-dropdown-wrapper,
+.docs-home + .copy-page-dropdown-wrapper,
+article:has(.docs-home) .copy-page-dropdown-wrapper,
+[class*="docItemContainer"]:has(.docs-home) .copy-page-dropdown-wrapper {
+  display: none !important;
+}
+
+/* Remove border-bottom from docs-home links */
+.docs-home a.no-underline {
+  border-bottom: none !important;
+}
+
+/* Docs home page background */
+.docs-home {
+  background-color: #000000 !important;
+}
+
+/* Docs home page full background black */
+article:has(.docs-home),
+article:has(.docs-home) .theme-doc-markdown,
+[class*="docItemContainer"]:has(.docs-home) {
+  background-color: #000000 !important;
+}
+
+/* Also target the main container */
+main:has(.docs-home) {
+  background-color: #000000 !important;
+}
+
+/* Docs home page - target docItemWrapper */
+[class*="docItemWrapper"]:has(.docs-home),
+[class*="docMainContainer"]:has(.docs-home),
+[class*="docRoot"]:has(.docs-home) {
+  background-color: #000000 !important;
+}
+
+/* Hide sidebar on docs home page */
+[class*="docSidebarContainer"]:has(~ [class*="docMainContainer"] .docs-home),
+aside:has(~ main .docs-home) {
+  display: none !important;
+}
+
+/* Make content full width when sidebar is hidden */
+[class*="docMainContainer"]:has(.docs-home) {
+  width: 100% !important;
+  max-width: 100% !important;
+}
+
+/* Center content on docs home page */
+[class*="docMainContainer"]:has(.docs-home) [class*="docItemContainer"] {
+  max-width: 1200px !important;
+  margin: 0 auto !important;
+  padding: 0 !important;
+}
+
+/* Fix docs home centering */
+[class*="docItemContainer"]:has(.docs-home) {
+  margin-left: auto !important;
+  margin-right: auto !important;
+}
+
+[class*="docMainContainer"]:has(.docs-home) > div {
+  display: flex !important;
+  justify-content: center !important;
+}
+
+/* Override markdown img styles for FeatureShowcase in docs */
+.markdown .feature-showcase img,
+.theme-doc-markdown .feature-showcase img,
+[data-theme="dark"] .markdown .feature-showcase img,
+[data-theme="dark"] .theme-doc-markdown .feature-showcase img {
+  border: none !important;
+  background-color: transparent !important;
+  border-radius: 0 !important;
+  padding: 0 !important;
+}
+
+/* Override paragraph color in docs-home */
+html[data-theme="dark"] .theme-doc-markdown .docs-home p.docs-home-description {
+  color: #f2f2f2 !important;
+}
+
+/* Override markdown p styles for FeatureShowcase in docs */
+.markdown .feature-showcase p,
+.theme-doc-markdown .feature-showcase p,
+article .markdown .feature-showcase p,
+[data-theme="dark"] .markdown .feature-showcase p,
+[data-theme="dark"] .theme-doc-markdown .feature-showcase p {
+  font-size: inherit !important;
+  font-weight: inherit !important;
+  line-height: inherit !important;
+  margin-bottom: 0 !important;
+}