diff --git a/src/components/Breadcrumb.astro b/src/components/Breadcrumb.astro
index eba62d4..973ffe4 100644
--- a/src/components/Breadcrumb.astro
+++ b/src/components/Breadcrumb.astro
@@ -1,11 +1,25 @@
 ---
-import "../styles/app.css";
-
-const { path } = Astro.props;
 ---
 
-<div class="text-md breadcrumbs mb-6 text-base-content/70">
-    <ul>
+<nav
+    class="text-xs uppercase tracking-widest text-base-content/50 mb-10"
+    aria-label="Breadcrumb"
+>
+    <ul class="flex flex-wrap items-center gap-2">
         <slot />
     </ul>
-</div>
+</nav>
+
+<style>
+    nav :global(li + li)::before {
+        content: "›";
+        margin-right: 0.5rem;
+        opacity: 0.5;
+    }
+    nav :global(a) {
+        transition: color 0.2s ease;
+    }
+    nav :global(a:hover) {
+        color: var(--color-primary);
+    }
+</style>
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index ff36b8c..3b2d840 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -2,112 +2,170 @@
 import { Image } from "astro:assets";
 import logo from "../assets/logo.png";
 
-// --- Configuration: Edit URLs here ---
 const facebookUrl =
-    "https://www.facebook.com/p/Multidisciplinary-AI-Research-Center-MARC-61566611961677/"; // e.g., https://www.facebook.com/marc.pdn
-const linkedinUrl = "https://www.linkedin.com/company/multidisciplinaryai"; // e.g., https://www.linkedin.com/company/marc-pdn
-const youtubeUrl = "https://www.youtube.com/@MARCUoP"; // e.g., https://www.youtube.com/@marc_pdn
+    "https://www.facebook.com/p/Multidisciplinary-AI-Research-Center-MARC-61566611961677/";
+const linkedinUrl = "https://www.linkedin.com/company/multidisciplinaryai";
+const youtubeUrl = "https://www.youtube.com/@MARCUoP";
 const facultyUrl = "https://eng.pdn.ac.lk/";
-// -------------------------------------
+
+const exploreLinks = [
+    { href: "/Research", label: "Research areas" },
+    { href: "/projects", label: "Projects" },
+    { href: "/publications", label: "Publications" },
+];
+const aboutLinks = [
+    { href: "/people", label: "People" },
+    { href: "/news", label: "News" },
+    { href: facultyUrl, label: "Faculty of Engineering", external: true },
+];
+const year = new Date().getFullYear();
 ---
 
-<footer
-    class="footer footer-center p-10 bg-base-200 text-base-content rounded mt-auto"
->
-    <nav class="grid grid-flow-col gap-6 text-sm md:text-base font-medium">
-        <a href="/" class="link link-hover">About</a>
-        <a href="/Research" class="link link-hover">Research</a>
-        <a href="/projects" class="link link-hover">Projects</a>
-        <a href="/publications" class="link link-hover">Publications</a>
-        <a href="/people" class="link link-hover">People</a>
-        <a href="/news" class="link link-hover">News</a>
-    </nav>
+<footer class="bg-secondary text-secondary-content mt-24">
+    <div class="container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-16">
+        <div class="grid grid-cols-1 md:grid-cols-12 gap-12">
+            <!-- Brand -->
+            <div class="md:col-span-5 space-y-5">
+                <div class="flex items-center gap-3">
+                    <Image
+                        src={logo}
+                        alt="MARC logo"
+                        class="w-12 h-12 rounded-full ring-1 ring-white/20"
+                    />
+                    <div>
+                        <div class="font-semibold text-lg">MARC</div>
+                        <div class="text-xs opacity-70">
+                            Multidisciplinary AI Research Centre
+                        </div>
+                    </div>
+                </div>
+                <p class="text-sm opacity-75 max-w-sm leading-relaxed">
+                    A research centre at the Faculty of Engineering, University
+                    of Peradeniya, advancing AI through interdisciplinary
+                    collaboration in collaboration with DEEE & DMIE.
+                </p>
 
-    <aside class="flex flex-col items-center gap-2">
-        <Image
-            src={logo}
-            alt="MARC Logo"
-            class="w-16 h-16 mask mask-circle shadow-lg mb-2"
-        />
-        <div class="text-center">
-            <p class="font-bold text-lg">
-                Multidisciplinary AI Research Centre (MARC)
-            </p>
-            <p class="text-sm">
-                <a href={facultyUrl} target="_blank" class="link link-hover"
-                    >Faculty of Engineering</a
-                >, University of Peradeniya
-            </p>
-            <p class="text-xs opacity-75 mt-1">
-                In collaboration with DEEE & DMIE
-            </p>
-        </div>
-    </aside>
+                <div class="flex items-center gap-2 pt-2">
+                    <a
+                        href={linkedinUrl}
+                        target="_blank"
+                        rel="noopener"
+                        aria-label="LinkedIn"
+                        class="w-9 h-9 grid place-items-center rounded-full bg-white/5 hover:bg-white/15 transition"
+                    >
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="16"
+                            height="16"
+                            viewBox="0 0 24 24"
+                            class="fill-current"
+                        >
+                            <path
+                                d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"
+                            ></path>
+                        </svg>
+                    </a>
+                    <a
+                        href={youtubeUrl}
+                        target="_blank"
+                        rel="noopener"
+                        aria-label="YouTube"
+                        class="w-9 h-9 grid place-items-center rounded-full bg-white/5 hover:bg-white/15 transition"
+                    >
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="16"
+                            height="16"
+                            viewBox="0 0 24 24"
+                            class="fill-current"
+                        >
+                            <path
+                                d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"
+                            ></path>
+                        </svg>
+                    </a>
+                    <a
+                        href={facebookUrl}
+                        target="_blank"
+                        rel="noopener"
+                        aria-label="Facebook"
+                        class="w-9 h-9 grid place-items-center rounded-full bg-white/5 hover:bg-white/15 transition"
+                    >
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="16"
+                            height="16"
+                            viewBox="0 0 24 24"
+                            class="fill-current"
+                        >
+                            <path
+                                d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"
+                            ></path>
+                        </svg>
+                    </a>
+                </div>
+            </div>
 
-    <nav>
-        <div class="grid grid-flow-col gap-4">
-            <a
-                href={linkedinUrl}
-                target="_blank"
-                class="btn btn-ghost btn-square btn-sm"
-                aria-label="LinkedIn"
-            >
-                <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="24"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    class="fill-current"
-                >
-                    <path
-                        d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"
-                    ></path>
-                </svg>
-            </a>
+            <!-- Explore -->
+            <div class="md:col-span-3">
+                <h4 class="eyebrow mb-4 opacity-60">Explore</h4>
+                <ul class="space-y-3">
+                    {
+                        exploreLinks.map((l) => (
+                            <li>
+                                <a
+                                    href={l.href}
+                                    class="text-sm hover:text-primary transition-colors"
+                                >
+                                    {l.label}
+                                </a>
+                            </li>
+                        ))
+                    }
+                </ul>
+            </div>
 
-            <a
-                href={youtubeUrl}
-                target="_blank"
-                class="btn btn-ghost btn-square btn-sm"
-                aria-label="YouTube"
-            >
-                <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="24"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    class="fill-current"
-                >
-                    <path
-                        d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"
-                    ></path>
-                </svg>
-            </a>
+            <!-- About -->
+            <div class="md:col-span-4">
+                <h4 class="eyebrow mb-4 opacity-60">About</h4>
+                <ul class="space-y-3">
+                    {
+                        aboutLinks.map((l) => (
+                            <li>
+                                <a
+                                    href={l.href}
+                                    target={l.external ? "_blank" : undefined}
+                                    rel={l.external ? "noopener" : undefined}
+                                    class="text-sm hover:text-primary transition-colors inline-flex items-center gap-1"
+                                >
+                                    {l.label}
+                                    {l.external && (
+                                        <svg
+                                            xmlns="http://www.w3.org/2000/svg"
+                                            class="w-3 h-3"
+                                            fill="none"
+                                            viewBox="0 0 24 24"
+                                            stroke="currentColor"
+                                            stroke-width="2"
+                                        >
+                                            <path
+                                                stroke-linecap="round"
+                                                stroke-linejoin="round"
+                                                d="M14 3h7v7m0-7L10 14m-4-4v11h11"
+                                            />
+                                        </svg>
+                                    )}
+                                </a>
+                            </li>
+                        ))
+                    }
+                </ul>
+            </div>
+        </div>
 
-            <a
-                href={facebookUrl}
-                target="_blank"
-                class="btn btn-ghost btn-square btn-sm"
-                aria-label="Facebook"
-            >
-                <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="24"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    class="fill-current"
-                >
-                    <path
-                        d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"
-                    ></path>
-                </svg>
-            </a>
+        <div class="mt-14 pt-8 border-t border-white/10 flex flex-col md:flex-row justify-between gap-4 text-xs opacity-60">
+            <p>© {year} Multidisciplinary AI Research Centre.</p>
+            <p>Faculty of Engineering, University of Peradeniya, Sri Lanka.</p>
         </div>
-    </nav>
-    <aside>
-        <p>
-            Copyright © {new Date().getFullYear()} - Multidisciplinary AI Research
-            Centre
-        </p>
-    </aside>
+    </div>
 </footer>
diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
index 2d72634..f15d041 100644
--- a/src/components/Navbar.astro
+++ b/src/components/Navbar.astro
@@ -1,56 +1,178 @@
 ---
-import "../styles/app.css";
 import logo from "../assets/logo.png";
 import { Image } from "astro:assets";
+
+const links = [
+    { href: "/", label: "About" },
+    { href: "/Research", label: "Research" },
+    { href: "/projects", label: "Projects" },
+    { href: "/publications", label: "Publications" },
+    { href: "/people", label: "People" },
+    { href: "/news", label: "News" },
+];
+
+const path = Astro.url.pathname.replace(/\/$/, "") || "/";
+const isActive = (href: string) => {
+    if (href === "/") return path === "/";
+    return path === href || path.startsWith(href + "/");
+};
 ---
 
-<div class="navbar bg-base-100 shadow-sm sticky top-0 z-50 py-2">
-    <div class="dropdown">
-        <div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
-            <svg
-                xmlns="http://www.w3.org/2000/svg"
-                class="h-5 w-5"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-            >
-                <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M4 6h16M4 12h8m-8 6h16"></path>
-            </svg>
+<header
+    class="sticky top-0 z-50 backdrop-blur-xl bg-base-100/80 border-b border-base-200"
+>
+    <div class="container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div class="flex items-center justify-between h-16 lg:h-20">
+            <!-- Brand -->
+            <a href="/" class="flex items-center gap-3 group">
+                <Image
+                    src={logo}
+                    alt="MARC logo"
+                    class="w-10 h-10 rounded-full ring-1 ring-base-300 group-hover:ring-primary transition"
+                />
+                <div class="leading-tight hidden sm:block">
+                    <div class="text-base font-semibold tracking-tight">
+                        MARC
+                    </div>
+                    <div class="text-xs text-base-content/60">
+                        Multidisciplinary AI Research Centre
+                    </div>
+                </div>
+            </a>
+
+            <!-- Desktop nav -->
+            <nav class="hidden lg:flex items-center gap-1">
+                {
+                    links.map((l) => (
+                        <a
+                            href={l.href}
+                            class={`relative px-4 py-2 text-sm font-medium rounded-full transition-colors ${
+                                isActive(l.href)
+                                    ? "text-base-content"
+                                    : "text-base-content/60 hover:text-base-content"
+                            }`}
+                        >
+                            {l.label}
+                            {isActive(l.href) && (
+                                <span class="absolute inset-x-4 -bottom-0.5 h-0.5 bg-gradient-to-r from-primary to-accent rounded-full" />
+                            )}
+                        </a>
+                    ))
+                }
+            </nav>
+
+            <!-- Right cluster: theme toggle + mobile menu button -->
+            <div class="flex items-center gap-2">
+                <button
+                    id="theme-toggle"
+                    class="btn btn-ghost btn-sm btn-circle"
+                    aria-label="Toggle theme"
+                    type="button"
+                >
+                    <svg
+                        class="w-5 h-5 hidden dark:hidden"
+                        id="theme-icon-light"
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                    >
+                        <circle cx="12" cy="12" r="4"></circle>
+                        <path
+                            d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"
+                        ></path>
+                    </svg>
+                    <svg
+                        class="w-5 h-5"
+                        id="theme-icon-dark"
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                    >
+                        <path
+                            d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"
+                        ></path>
+                    </svg>
+                </button>
+
+                <button
+                    id="mobile-menu-toggle"
+                    class="lg:hidden btn btn-ghost btn-sm btn-circle"
+                    aria-label="Open menu"
+                    type="button"
+                >
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        class="h-5 w-5"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                        stroke-width="2"
+                    >
+                        <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            d="M4 6h16M4 12h16M4 18h16"></path>
+                    </svg>
+                </button>
+            </div>
+        </div>
+
+        <!-- Mobile menu -->
+        <div id="mobile-menu" class="hidden lg:hidden pb-4">
+            <nav class="flex flex-col gap-1">
+                {
+                    links.map((l) => (
+                        <a
+                            href={l.href}
+                            class={`px-4 py-3 rounded-lg text-sm font-medium transition-colors ${
+                                isActive(l.href)
+                                    ? "bg-base-200 text-base-content"
+                                    : "text-base-content/70 hover:bg-base-200"
+                            }`}
+                        >
+                            {l.label}
+                        </a>
+                    ))
+                }
+            </nav>
         </div>
-        <ul
-            tabindex="-1"
-            class="menu menu-md dropdown-content bg-base-100 rounded-box z-1 mt-3 w-52 p-2 shadow"
-        >
-            <li><a href="/">About Us</a></li>
-            <li><a href="/Research">Research</a></li>
-            <li><a href="/projects">Projects</a></li>
-            <li><a href="/publications">Publications</a></li>
-            <li><a href="/people">People</a></li>
-            <li><a href="/news">News</a></li>
-        </ul>
-    </div>
-    <Image
-        src={logo}
-        alt="MARC Logo"
-        class="w-15 h-15 mr-2 mask mask-circle shadow-xl"
-    />
-    <div class="flex-1">
-        <a class="btn btn-ghost text-xl" href="/"
-            >Multidisciplinary AI Research Centre
-        </a>
-    </div>
-    <div class="flex-none">
-        <ul class="menu menu-lg menu-horizontal px-2 hidden lg:flex">
-            <li><a href="/">About Us</a></li>
-            <li><a href="/Research">Research</a></li>
-            <li><a href="/projects">Projects</a></li>
-            <li><a href="/publications">Publications</a></li>
-            <li><a href="/people">People</a></li>
-            <li><a href="/news">News</a></li>
-        </ul>
     </div>
-</div>
+</header>
+
+<script is:inline>
+    const root = document.documentElement;
+    const toggle = document.getElementById("theme-toggle");
+    const iconSun = document.getElementById("theme-icon-light");
+    const iconMoon = document.getElementById("theme-icon-dark");
+
+    const syncIcons = () => {
+        const isDark = root.getAttribute("data-theme") === "marc-dark";
+        if (iconSun && iconMoon) {
+            iconSun.classList.toggle("hidden", !isDark);
+            iconMoon.classList.toggle("hidden", isDark);
+        }
+    };
+    syncIcons();
+
+    toggle?.addEventListener("click", () => {
+        const next =
+            root.getAttribute("data-theme") === "marc-dark"
+                ? "marc"
+                : "marc-dark";
+        root.setAttribute("data-theme", next);
+        try {
+            localStorage.setItem("marc-theme", next);
+        } catch (_) {}
+        syncIcons();
+    });
+
+    const menuBtn = document.getElementById("mobile-menu-toggle");
+    const menu = document.getElementById("mobile-menu");
+    menuBtn?.addEventListener("click", () => {
+        menu?.classList.toggle("hidden");
+    });
+</script>
diff --git a/src/components/ResearchAreaCard.astro b/src/components/ResearchAreaCard.astro
index 63e67a7..a24837b 100644
--- a/src/components/ResearchAreaCard.astro
+++ b/src/components/ResearchAreaCard.astro
@@ -1,19 +1,55 @@
 ---
-import "../styles/app.css";
+import { Image } from "astro:assets";
 const { Area, ImageUrl, PageLink } = Astro.props;
 ---
 
-<div class="card lg:card-side bg-base-100 shadow-xl">
-    <figure class="w-full lg:w-72 lg:h-72 shrink-0">
-        <img src={ImageUrl.src} alt="Album" />
-    </figure>
-    <div class="card-body">
-        <h2 class="card-title">{Area}</h2>
-        <p>
+<a
+    href={PageLink}
+    class="group surface-hover relative flex flex-col overflow-hidden rounded-2xl bg-base-100 border border-base-200 h-full"
+>
+    <div class="relative aspect-[4/3] overflow-hidden bg-base-200">
+        {
+            ImageUrl && (
+                <Image
+                    src={ImageUrl}
+                    alt={Area}
+                    class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
+                />
+            )
+        }
+        <div
+            class="absolute inset-0 bg-gradient-to-t from-secondary/70 via-transparent to-transparent opacity-60 group-hover:opacity-80 transition-opacity"
+        >
+        </div>
+        <div
+            class="absolute bottom-4 left-4 right-4 text-white"
+        >
+            <h3 class="font-display text-2xl md:text-3xl leading-tight">
+                {Area}
+            </h3>
+        </div>
+    </div>
+    <div class="p-6 flex flex-col flex-grow">
+        <p class="text-sm text-base-content/70 leading-relaxed flex-grow">
             <slot />
         </p>
-        <div class="card-actions justify-end">
-            <a href={PageLink} class="btn btn-primary">Read More</a>
-        </div>
+        <span
+            class="mt-5 inline-flex items-center gap-2 text-sm font-medium text-primary"
+        >
+            Explore area
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="w-4 h-4 transition-transform group-hover:translate-x-1"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                stroke-width="2"
+            >
+                <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M5 12h14M13 5l7 7-7 7"></path>
+            </svg>
+        </span>
     </div>
-</div>
+</a>
diff --git a/src/components/ui/PageHeader.astro b/src/components/ui/PageHeader.astro
new file mode 100644
index 0000000..e8c0125
--- /dev/null
+++ b/src/components/ui/PageHeader.astro
@@ -0,0 +1,26 @@
+---
+interface Props {
+    eyebrow?: string;
+    title: string;
+    subtitle?: string;
+    align?: "left" | "center";
+}
+const { eyebrow, title, subtitle, align = "left" } = Astro.props;
+const alignClass = align === "center" ? "text-center mx-auto" : "text-left";
+---
+
+<header class={`max-w-3xl ${alignClass} mb-14 lg:mb-20`}>
+    {eyebrow && <p class="eyebrow mb-4 text-primary">{eyebrow}</p>}
+    <h1
+        class="font-display text-5xl md:text-6xl lg:text-7xl tracking-tight text-base-content"
+    >
+        {title}
+    </h1>
+    {
+        subtitle && (
+            <p class="mt-6 text-lg md:text-xl text-base-content/70 leading-relaxed">
+                {subtitle}
+            </p>
+        )
+    }
+</header>
diff --git a/src/components/ui/Section.astro b/src/components/ui/Section.astro
new file mode 100644
index 0000000..6f72b2e
--- /dev/null
+++ b/src/components/ui/Section.astro
@@ -0,0 +1,69 @@
+---
+interface Props {
+    eyebrow?: string;
+    title?: string;
+    description?: string;
+    cta?: { href: string; label: string };
+    spacing?: "sm" | "md" | "lg";
+}
+const {
+    eyebrow,
+    title,
+    description,
+    cta,
+    spacing = "lg",
+} = Astro.props;
+
+const padY = {
+    sm: "py-10",
+    md: "py-16",
+    lg: "py-24 lg:py-32",
+}[spacing];
+---
+
+<section class={padY}>
+    {
+        (eyebrow || title || cta) && (
+            <div class="flex flex-col md:flex-row md:items-end md:justify-between gap-6 mb-12">
+                <div class="max-w-2xl">
+                    {eyebrow && (
+                        <p class="eyebrow text-primary mb-3">{eyebrow}</p>
+                    )}
+                    {title && (
+                        <h2 class="font-display text-4xl md:text-5xl tracking-tight">
+                            {title}
+                        </h2>
+                    )}
+                    {description && (
+                        <p class="mt-4 text-base md:text-lg text-base-content/70 leading-relaxed">
+                            {description}
+                        </p>
+                    )}
+                </div>
+                {cta && (
+                    <a
+                        href={cta.href}
+                        class="group inline-flex items-center gap-2 text-sm font-medium text-base-content hover:text-primary transition-colors"
+                    >
+                        {cta.label}
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            class="w-4 h-4 transition-transform group-hover:translate-x-1"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            stroke="currentColor"
+                            stroke-width="2"
+                        >
+                            <path
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                                d="M5 12h14M13 5l7 7-7 7"
+                            />
+                        </svg>
+                    </a>
+                )}
+            </div>
+        )
+    }
+    <slot />
+</section>
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 2d6127f..5c44bb9 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -1,25 +1,88 @@
 ---
 import "../styles/app.css";
 import Navbar from "../components/Navbar.astro";
-import Footer from "../components/Footer.astro"; // Import the new component
+import Footer from "../components/Footer.astro";
+
+interface Props {
+    title?: string;
+    description?: string;
+    image?: string;
+    fullWidth?: boolean;
+}
+
+const {
+    title = "Multidisciplinary AI Research Centre",
+    description = "MARC — Multidisciplinary AI Research Centre at the Faculty of Engineering, University of Peradeniya. Empowering the future through interdisciplinary AI research.",
+    image = "/og-default.png",
+    fullWidth = false,
+} = Astro.props;
+
+const fullTitle =
+    title === "Multidisciplinary AI Research Centre"
+        ? title
+        : `${title} — MARC`;
+const canonical = Astro.url.href;
 ---
 
-<html lang="en">
+<!doctype html>
+<html lang="en" data-theme="marc">
     <head>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta name="description" content={description} />
+        <link rel="canonical" href={canonical} />
+
+        <!-- Open Graph / Twitter -->
+        <meta property="og:type" content="website" />
+        <meta property="og:title" content={fullTitle} />
+        <meta property="og:description" content={description} />
+        <meta property="og:url" content={canonical} />
+        <meta property="og:image" content={image} />
+        <meta name="twitter:card" content="summary_large_image" />
+
+        <!-- Fonts -->
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
         <link
+            rel="preconnect"
+            href="https://fonts.gstatic.com"
+            crossorigin
+        />
+        <link
+            href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Instrument+Serif:ital@0;1&display=swap"
             rel="stylesheet"
-            href="https://cdn.jsdelivr.net/npm/katex@0.13.0/dist/katex.min.css"
         />
-        <title>MARC</title>
+
+        <title>{fullTitle}</title>
+
+        <!-- Theme bootstrap (avoids dark-mode flash) -->
+        <script is:inline>
+            (() => {
+                try {
+                    const stored = localStorage.getItem("marc-theme");
+                    const prefersDark = window.matchMedia(
+                        "(prefers-color-scheme: dark)"
+                    ).matches;
+                    const theme =
+                        stored || (prefersDark ? "marc-dark" : "marc");
+                    document.documentElement.setAttribute("data-theme", theme);
+                } catch (_) {}
+            })();
+        </script>
     </head>
-    <body class="flex flex-col min-h-screen">
+    <body class="flex flex-col min-h-screen bg-base-100 text-base-content">
         <Navbar />
 
-        <div class="container mx-auto px-4 py-12 max-w-6xl flex-grow">
-            <slot />
-        </div>
+        <main class={fullWidth ? "flex-grow" : "flex-grow"}>
+            {
+                fullWidth ? (
+                    <slot />
+                ) : (
+                    <div class="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl py-12 lg:py-20">
+                        <slot />
+                    </div>
+                )
+            }
+        </main>
 
         <Footer />
     </body>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index d6e4466..8ff9ac2 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,198 +1,270 @@
 ---
 import BaseLayout from "../layouts/BaseLayout.astro";
 import ResearchAreaCard from "../components/ResearchAreaCard.astro";
+import Section from "../components/ui/Section.astro";
 import { getCollection } from "astro:content";
 import { Image } from "astro:assets";
-import "../styles/app.css";
-import logo from "../assets/logo.png";
 import heroImage from "../assets/Home_page_Design.jpeg";
 
-// 1. Fetch Research Areas (Same logic as src/pages/Research/index.astro)
 const researchAreas = Object.values(
     import.meta.glob("./Research/*.md", { eager: true }),
 );
 
-// Helper to resolve images for Research Areas (which use string paths in frontmatter)
 const researchImages = import.meta.glob<{ default: ImageMetadata }>(
     "/src/assets/*.{jpeg,jpg,png,gif}",
     { eager: true },
 );
-const getResearchImage = (filename: string) => {
-    return researchImages[`/src/assets/${filename}`]?.default;
-};
+const getResearchImage = (filename: string) =>
+    researchImages[`/src/assets/${filename}`]?.default;
 
-// 2. Fetch Latest News
 const allNews = await getCollection("news");
-// Sort by date descending and take the top 3
 const latestNews = allNews
     .sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf())
-    .slice(0, 3);
+    .slice(0, 4);
+
+const allProjects = await getCollection("projects");
+const allPubs = await getCollection("publications");
+const allPeople = await getCollection("people");
+
+const stats = [
+    { label: "Research areas", value: researchAreas.length },
+    { label: "Active projects", value: allProjects.length },
+    { label: "Publications", value: allPubs.length },
+    { label: "Researchers", value: allPeople.length },
+];
 ---
 
-<BaseLayout>
-    <section class="relative mb-24 lg:mb-32">
+<BaseLayout
+    title="Multidisciplinary AI Research Centre"
+    description="MARC advances multidisciplinary AI research at the Faculty of Engineering, University of Peradeniya — across computer vision, generative AI, biomedical, smart grid, MSI and socioeconomic systems."
+    fullWidth={true}
+>
+    <!-- ─────────────────────────────  HERO  ───────────────────────────── -->
+    <section class="relative overflow-hidden bg-base-100">
+        <div class="bg-grid absolute inset-0 opacity-60"></div>
         <div
-            class="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-16 items-center"
-        >
-            <!-- Left Content: Text-focused and grounded -->
-            <div class="lg:col-span-5 order-2 lg:order-1 relative z-10">
-                <div
-                    class="inline-flex items-center gap-2 mb-6 text-sm font-bold tracking-widest text-primary bg-primary/5 px-4 py-2 rounded-lg border border-primary/10 uppercase"
-                >
-                    Innovation for Humanity
-                </div>
+            class="blob bg-primary -top-32 -left-32 w-[36rem] h-[36rem]"
+        ></div>
+        <div
+            class="blob bg-accent top-40 -right-24 w-[28rem] h-[28rem] opacity-25"
+        ></div>
 
-                <h1
-                    class="text-4xl md:text-5xl font-black mb-8 leading-[1.05] tracking-tight text-gray-900"
-                >
-                    Multidisciplinary <br />
-                    <span class="text-primary relative inline-block">
-                        AI Research Centre
-                        <span
-                            class="absolute -bottom-2 left-0 w-1/2 h-2 bg-primary rounded-full opacity-20"
-                        ></span>
-                    </span>
-                </h1>
+        <div
+            class="relative container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 pt-20 lg:pt-32 pb-24 lg:pb-40"
+        >
+            <p class="eyebrow text-primary mb-6">
+                University of Peradeniya · Faculty of Engineering
+            </p>
 
-                <p
-                    class="text-xl md:text-2xl mb-12 text-gray-600 leading-relaxed max-w-xl font-medium"
-                >
-                    Empowering the Future through Multidisciplinary AI Research
-                </p>
+            <h1
+                class="font-display text-[3.25rem] sm:text-7xl lg:text-[6.5rem] leading-[0.95] tracking-tight max-w-5xl"
+            >
+                Multidisciplinary
+                <em class="not-italic text-gradient">AI research</em>
+                for a human future.
+            </h1>
 
-                <div class="flex flex-col sm:flex-row gap-4">
-                    <a
-                        href="/Research"
-                        class="group relative px-5 py-5 bg-primary text-white rounded-2xl font-bold text-lg overflow-hidden shadow-2xl shadow-primary/30 transition-all hover:-translate-y-1"
-                    >
-                        <span
-                            class="relative z-10 flex items-center justify-center gap-2"
-                        >
-                            Explore Research
-                            <svg
-                                xmlns="http://www.w3.org/2000/svg"
-                                class="w-5 h-5 transition-transform group-hover:translate-x-1"
-                                fill="none"
-                                viewBox="0 0 24 24"
-                                stroke="currentColor"
-                            >
-                                <path
-                                    stroke-linecap="round"
-                                    stroke-linejoin="round"
-                                    stroke-width="2"
-                                    d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
-                            </svg>
-                        </span>
-                    </a>
-                    <a
-                        href="/projects"
-                        class="px-10 py-5 bg-primary/10 text-primary border-2 border-primary/20 rounded-2xl font-bold text-lg transition-all hover:bg-primary/20 hover:border-primary/40 text-center"
-                    >
-                        View Projects
-                    </a>
-                </div>
-            </div>
+            <p
+                class="mt-10 max-w-2xl text-lg md:text-xl text-base-content/70 leading-relaxed"
+            >
+                MARC brings together engineers, scientists and clinicians to
+                build AI systems that are useful, trustworthy, and grounded in
+                real-world problems — from healthcare to smart grids.
+            </p>
 
-            <!-- Right Visual: The Humanized Context -->
-            <div class="lg:col-span-7 order-1 lg:order-2 relative">
-                <!-- Decorative Frame/Shadow -->
-                <div
-                    class="absolute -inset-4 bg-gradient-to-tr from-[--color-primary]/30 to-[--color-primary]/10 rounded-[3rem] blur-2xl opacity-50 -z-10"
+            <div class="mt-12 flex flex-wrap items-center gap-4">
+                <a
+                    href="/Research"
+                    class="inline-flex items-center gap-2 px-7 py-3.5 rounded-full bg-secondary text-secondary-content text-sm font-medium hover:opacity-90 transition"
                 >
-                </div>
-
-                <!-- Main Image Container -->
-                <div
-                    class="relative rounded-[2.5rem] overflow-hidden shadow-2xl border-8 border-white group"
+                    Explore research
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        class="w-4 h-4"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                        stroke-width="2"
+                    >
+                        <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            d="M5 12h14M13 5l7 7-7 7"></path>
+                    </svg>
+                </a>
+                <a
+                    href="/projects"
+                    class="inline-flex items-center gap-2 px-7 py-3.5 rounded-full bg-base-200 text-base-content text-sm font-medium hover:bg-base-300 transition"
                 >
-                    <Image
-                        src={heroImage}
-                        alt="AI Research Center - Human Context"
-                        class="w-full h-auto object-cover transform transition-transform duration-[2s] group-hover:scale-105"
-                    />
-                </div>
+                    View projects
+                </a>
+            </div>
 
-                <!-- Abstract "Human Connection" element -->
+            <!-- Hero visual -->
+            <div class="relative mt-20 lg:mt-28 rounded-3xl overflow-hidden">
+                <Image
+                    src={heroImage}
+                    alt="MARC research"
+                    class="w-full h-[28rem] lg:h-[34rem] object-cover"
+                    loading="eager"
+                />
                 <div
-                    class="absolute -top-10 -right-10 w-32 h-32 bg-[--color-primary] rounded-full blur-[60px] opacity-20 hidden lg:block animate-pulse"
+                    class="absolute inset-x-0 bottom-0 p-8 lg:p-12 bg-gradient-to-t from-secondary/90 via-secondary/40 to-transparent text-white"
                 >
+                    <p class="eyebrow opacity-80 mb-2">Featured</p>
+                    <p
+                        class="font-display text-2xl md:text-3xl lg:text-4xl max-w-2xl leading-tight"
+                    >
+                        Building AI that serves people, science, and society.
+                    </p>
                 </div>
             </div>
         </div>
     </section>
 
-    <section class="mb-16">
-        <h2 class="text-3xl font-bold mb-8 text-center text-gray-900">
-            Our Research Pillars
-        </h2>
-        <div class="flex flex-col gap-8">
-            {
-                researchAreas.map((Area: any) => (
-                    <ResearchAreaCard
-                        Area={Area.frontmatter.title}
-                        ImageUrl={getResearchImage(Area.frontmatter.coverImage)}
-                        PageLink={Area.url}
-                    >
-                        {Area.frontmatter.short}
-                    </ResearchAreaCard>
-                ))
-            }
+    <!-- ─────────────────────────────  STATS  ───────────────────────────── -->
+    <section class="border-y border-base-200 bg-base-200/50">
+        <div
+            class="container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-12 lg:py-16"
+        >
+            <div
+                class="grid grid-cols-2 md:grid-cols-4 gap-8 divide-y md:divide-y-0 md:divide-x divide-base-300"
+            >
+                {
+                    stats.map((s) => (
+                        <div class="px-6 py-4 md:py-0 first:pt-0">
+                            <div class="font-display text-5xl md:text-6xl text-base-content">
+                                {s.value}
+                            </div>
+                            <div class="mt-2 text-sm text-base-content/60">
+                                {s.label}
+                            </div>
+                        </div>
+                    ))
+                }
+            </div>
         </div>
     </section>
 
-    <section class="mb-12">
-        <div class="flex justify-between items-end mb-8">
-            <h2 class="text-3xl font-bold text-gray-900">Latest News</h2>
-            <a href="/news" class="link link-primary font-bold"
-                >View All News →</a
+    <!-- ─────────────────────────────  RESEARCH PILLARS  ───────────────────────────── -->
+    <div class="container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <Section
+            eyebrow="Research"
+            title="Six pillars, one shared mission"
+            description="Our work spans foundational AI and applied research across critical domains where intelligence meets impact."
+            cta={{ href: "/Research", label: "All research areas" }}
+        >
+            <div
+                class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8"
             >
-        </div>
-
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-            {
-                latestNews.map((newsItem) => (
-                    <a
-                        href={`/news/${newsItem.id}`}
-                        class="card bg-base-100 shadow-xl hover:shadow-2xl transition-all duration-300 hover:-translate-y-1 rounded-3xl border border-gray-100"
-                    >
-                        <figure class="px-4 pt-4">
-                            {newsItem.data.cover && (
-                                <Image
-                                    src={newsItem.data.cover}
-                                    alt={newsItem.data.title}
-                                    class="rounded-2xl h-48 w-full object-cover"
-                                />
+                {
+                    researchAreas.map((Area: any) => (
+                        <ResearchAreaCard
+                            Area={Area.frontmatter.title}
+                            ImageUrl={getResearchImage(
+                                Area.frontmatter.coverImage,
                             )}
-                        </figure>
-                        <div class="card-body">
-                            <h3 class="card-title text-lg text-gray-900 font-bold">
-                                {newsItem.data.title}
-                                {new Date(newsItem.data.date) >
-                                    new Date(
-                                        Date.now() - 30 * 24 * 60 * 60 * 1000,
-                                    ) && (
-                                    <div class="badge bg-[--color-primary] border-none text-white font-bold">
-                                        NEW
-                                    </div>
-                                )}
-                            </h3>
-                            <p class="text-sm text-gray-500 mb-2 font-medium">
-                                {newsItem.data.date.toLocaleDateString(
-                                    "en-US",
-                                    {
-                                        year: "numeric",
-                                        month: "long",
-                                        day: "numeric",
-                                    },
+                            PageLink={Area.url}
+                        >
+                            {Area.frontmatter.short}
+                        </ResearchAreaCard>
+                    ))
+                }
+            </div>
+        </Section>
+
+        <!-- ─────────────────────────────  LATEST NEWS  ───────────────────────────── -->
+        <Section
+            eyebrow="The latest"
+            title="News & milestones"
+            description="Awards, papers, talks and stories from the lab."
+            cta={{ href: "/news", label: "All news" }}
+        >
+            <div
+                class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"
+            >
+                {
+                    latestNews.map((newsItem) => (
+                        <a
+                            href={`/news/${newsItem.id}`}
+                            class="group surface-hover flex flex-col rounded-2xl bg-base-100 border border-base-200 overflow-hidden h-full"
+                        >
+                            <div class="aspect-[4/3] overflow-hidden bg-base-200">
+                                {newsItem.data.cover && (
+                                    <Image
+                                        src={newsItem.data.cover}
+                                        alt={newsItem.data.title}
+                                        class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
+                                    />
                                 )}
-                            </p>
-                            <p class="line-clamp-3 text-sm text-gray-600 leading-relaxed">
-                                {newsItem.data.short}
-                            </p>
-                        </div>
-                    </a>
-                ))
-            }
-        </div>
-    </section>
+                            </div>
+                            <div class="p-5 flex flex-col flex-grow">
+                                <p class="text-xs text-base-content/50 mb-2">
+                                    {newsItem.data.date.toLocaleDateString(
+                                        "en-US",
+                                        {
+                                            year: "numeric",
+                                            month: "short",
+                                            day: "numeric",
+                                        },
+                                    )}
+                                </p>
+                                <h3 class="font-medium text-base leading-snug group-hover:text-primary transition-colors mb-2">
+                                    {newsItem.data.title}
+                                </h3>
+                                <p class="text-sm text-base-content/60 line-clamp-2 mt-auto">
+                                    {newsItem.data.short}
+                                </p>
+                            </div>
+                        </a>
+                    ))
+                }
+            </div>
+        </Section>
+
+        <!-- ─────────────────────────────  CTA STRIP  ───────────────────────────── -->
+        <section class="pb-24 lg:pb-32">
+            <div
+                class="relative overflow-hidden rounded-3xl bg-secondary text-secondary-content p-10 md:p-16"
+            >
+                <div
+                    class="blob bg-primary -top-20 -right-10 w-96 h-96 opacity-30"
+                ></div>
+                <div
+                    class="blob bg-accent -bottom-20 -left-10 w-96 h-96 opacity-25"
+                ></div>
+                <div class="relative grid md:grid-cols-3 gap-8 items-end">
+                    <div class="md:col-span-2">
+                        <p class="eyebrow opacity-70 mb-4">Get involved</p>
+                        <h2
+                            class="font-display text-4xl md:text-5xl leading-tight"
+                        >
+                            Collaborate, research, or join the team.
+                        </h2>
+                    </div>
+                    <div class="flex md:justify-end">
+                        <a
+                            href="/people"
+                            class="inline-flex items-center gap-2 px-7 py-3.5 rounded-full bg-white text-secondary text-sm font-medium hover:opacity-90 transition"
+                        >
+                            Meet our people
+                            <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                class="w-4 h-4"
+                                fill="none"
+                                viewBox="0 0 24 24"
+                                stroke="currentColor"
+                                stroke-width="2"
+                            >
+                                <path
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                    d="M5 12h14M13 5l7 7-7 7"></path>
+                            </svg>
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </div>
 </BaseLayout>
diff --git a/src/styles/app.css b/src/styles/app.css
index e01df42..5ff6aa2 100644
--- a/src/styles/app.css
+++ b/src/styles/app.css
@@ -3,12 +3,206 @@
 @plugin "@tailwindcss/typography";
 
 @plugin "daisyui" {
-    themes: winter --default;
+    themes: marc --default, marc-dark --prefersdark;
 }
 
+/* ──────────────────────────────────────────────────────────────
+   MARC light theme — editorial, DeepMind-inspired
+   ────────────────────────────────────────────────────────────── */
 @plugin "daisyui/theme" {
-    name: "winter";
+    name: "marc";
     default: true;
+    color-scheme: light;
+
+    --color-base-100: #ffffff;
+    --color-base-200: #f6f7f9;
+    --color-base-300: #eceef2;
+    --color-base-content: #0b1220;
+
     --color-primary: #06A3DA;
     --color-primary-content: #ffffff;
-}
\ No newline at end of file
+
+    --color-secondary: #0B1220;
+    --color-secondary-content: #ffffff;
+
+    --color-accent: #7C3AED;
+    --color-accent-content: #ffffff;
+
+    --color-neutral: #1a2332;
+    --color-neutral-content: #ffffff;
+
+    --color-info: #06A3DA;
+    --color-success: #16a34a;
+    --color-warning: #d97706;
+    --color-error: #dc2626;
+
+    --radius-selector: 0.75rem;
+    --radius-field: 0.625rem;
+    --radius-box: 1rem;
+
+    --border: 1px;
+    --depth: 0;
+    --noise: 0;
+}
+
+/* ──────────────────────────────────────────────────────────────
+   MARC dark theme
+   ────────────────────────────────────────────────────────────── */
+@plugin "daisyui/theme" {
+    name: "marc-dark";
+    color-scheme: dark;
+
+    --color-base-100: #0b1220;
+    --color-base-200: #111a2e;
+    --color-base-300: #1a2440;
+    --color-base-content: #e6ecf5;
+
+    --color-primary: #38bdf8;
+    --color-primary-content: #08131f;
+
+    --color-secondary: #f5f6fa;
+    --color-secondary-content: #0b1220;
+
+    --color-accent: #a78bfa;
+    --color-accent-content: #1a1033;
+
+    --color-neutral: #e6ecf5;
+    --color-neutral-content: #0b1220;
+
+    --radius-selector: 0.75rem;
+    --radius-field: 0.625rem;
+    --radius-box: 1rem;
+
+    --border: 1px;
+    --depth: 0;
+    --noise: 0;
+}
+
+/* ──────────────────────────────────────────────────────────────
+   Typography — Inter (sans) + Instrument Serif (display)
+   ────────────────────────────────────────────────────────────── */
+@theme {
+    --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
+        Roboto, sans-serif;
+    --font-serif: "Instrument Serif", "Times New Roman", serif;
+}
+
+html {
+    font-family: var(--font-sans);
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+}
+
+body {
+    background: var(--color-base-100);
+    color: var(--color-base-content);
+}
+
+/* Display headings — editorial serif */
+.font-display {
+    font-family: var(--font-serif);
+    font-weight: 400;
+    letter-spacing: -0.02em;
+    line-height: 1.02;
+}
+
+/* Eyebrow label */
+.eyebrow {
+    font-size: 0.75rem;
+    font-weight: 600;
+    letter-spacing: 0.16em;
+    text-transform: uppercase;
+    color: var(--color-base-content);
+    opacity: 0.7;
+}
+
+/* Gradient text accent */
+.text-gradient {
+    background-image: linear-gradient(
+        110deg,
+        var(--color-primary) 0%,
+        var(--color-accent) 60%,
+        #ec4899 100%
+    );
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+}
+
+/* Soft surface hover */
+.surface-hover {
+    transition:
+        transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
+        box-shadow 0.4s ease,
+        border-color 0.3s ease;
+}
+.surface-hover:hover {
+    transform: translateY(-3px);
+    box-shadow:
+        0 12px 32px -12px rgba(11, 18, 32, 0.18),
+        0 2px 6px -2px rgba(11, 18, 32, 0.08);
+}
+
+/* Subtle grid background */
+.bg-grid {
+    background-image:
+        linear-gradient(to right, rgba(11, 18, 32, 0.04) 1px, transparent 1px),
+        linear-gradient(to bottom, rgba(11, 18, 32, 0.04) 1px, transparent 1px);
+    background-size: 48px 48px;
+}
+[data-theme="marc-dark"] .bg-grid {
+    background-image:
+        linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
+        linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
+}
+
+/* Glow blob */
+.blob {
+    position: absolute;
+    border-radius: 9999px;
+    filter: blur(72px);
+    opacity: 0.35;
+    pointer-events: none;
+    z-index: 0;
+}
+
+/* Accessible focus ring */
+:where(a, button, input, select, textarea):focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+    border-radius: 6px;
+}
+
+/* Reduce motion */
+@media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+        animation-duration: 0.001ms !important;
+        transition-duration: 0.001ms !important;
+    }
+}
+
+/* Marquee / horizontal scroll snap rail */
+.scroll-rail {
+    scroll-snap-type: x mandatory;
+    scrollbar-width: none;
+}
+.scroll-rail::-webkit-scrollbar {
+    display: none;
+}
+.scroll-rail > * {
+    scroll-snap-align: start;
+}
+
+/* Section divider */
+.divider-soft {
+    height: 1px;
+    width: 100%;
+    background: linear-gradient(
+        to right,
+        transparent,
+        color-mix(in srgb, var(--color-base-content) 18%, transparent),
+        transparent
+    );
+}