diff --git a/locales/en.json b/locales/en.json
index 63b4456..46d7f3c 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -470,15 +470,29 @@
                 "title1": "The ",
                 "title2": "professional",
                 "title3": " page your clients expect.",
-                "description": "Your listings. Your reviews. Your calendar. One link that works as hard as you do.",
+                "description": "Create your professional real estate agent page in minutes. Share your listings, reviews, and links — one URL for everything. The smarter alternative to Linktree for realtors.",
                 "join": "Claim my page",
-                "free": "No credit card required"
-            },
-            "preview": {
-                "badge": "Preview",
-                "title1": "See it in ",
-                "title2": "action",
-                "your-page": "your page, live in minutes"
+                "free": "No credit card required",
+                "cards": {
+                    "stats": {
+                        "title": "This Week",
+                        "views": "Page Views",
+                        "leads": "New Leads",
+                        "growth": "↑ 22% this week"
+                    },
+                    "review": {
+                        "text": "Found our dream home in 3 weeks!",
+                        "author": "— John & Sarah M."
+                    },
+                    "qr": {
+                        "title": "Your link"
+                    },
+                    "status": {
+                        "title": "Response rate",
+                        "value": "98%",
+                        "label": "avg. reply in 2h"
+                    }
+                }
             },
             "logo-strip": {
                 "label": "Trusted by agents from"
@@ -708,7 +722,7 @@
                 "title1": "Ready to",
                 "title2": " stand out ",
                 "title3": "?",
-                "description": "Join now to upgrade online presence.",
+                "description": "Join now to upgrade your online presence.",
                 "join": "Claim my page"
             }
         },
@@ -862,6 +876,7 @@
         "tagline": "The professional page your clients expect.",
         "product": "Product",
         "legal": "Legal",
+        "register": "Register",
         "copyright": "© {year} Agentpage. All rights reserved.",
         "made-with": "Made with 💙 for you"
     },
@@ -885,6 +900,7 @@
         "refund": "Refund policy",
         "cookies": "Cookies Policy",
         "blog": "Blog",
+        "forgot-password": "Forgot password",
         "features": "Features",
         "how-it-works": "How It Works",
         "pricing": "Pricing",
diff --git a/public/images/home/house.jpg b/public/images/home/house.jpg
deleted file mode 100644
index bbb7445..0000000
Binary files a/public/images/home/house.jpg and /dev/null differ
diff --git a/public/images/home/johndoe.png b/public/images/home/johndoe.png
new file mode 100644
index 0000000..1b47d79
Binary files /dev/null and b/public/images/home/johndoe.png differ
diff --git a/public/images/home/preview.png b/public/images/home/preview.png
deleted file mode 100644
index 54693b9..0000000
Binary files a/public/images/home/preview.png and /dev/null differ
diff --git a/src/app/[locale]/(main)/home/final-cta.tsx b/src/app/[locale]/(main)/home/final-cta.tsx
index d67d868..53d25fa 100644
--- a/src/app/[locale]/(main)/home/final-cta.tsx
+++ b/src/app/[locale]/(main)/home/final-cta.tsx
@@ -36,7 +36,7 @@ const FinalCta: React.FC = () => {
 
     return (
         <motion.section
-            className="py-16 bg-secondary/10 rounded-box overflow-hidden"
+            className="py-16 relative isolate bg-secondary/10 rounded-box overflow-hidden"
             {...fadeUpView(0)}
         >
             <div className="relative max-w-6xl mx-auto px-4">
@@ -45,7 +45,7 @@ const FinalCta: React.FC = () => {
                         <div>
                             <h2
                                 className={cn(
-                                    "text-3xl sm:text-4xl md:text-5xl font-bold",
+                                    "text-3xl sm:text-4xl md:text-5xl font-bold mb-4",
                                     font.className
                                 )}
                             >
@@ -87,6 +87,18 @@ const FinalCta: React.FC = () => {
                     </div>
                 </div>
             </div>
+            <div
+                aria-hidden="true"
+                className="absolute top-0 left-1/2 -z-10 -translate-x-1/2 blur-3xl xl:-top-6"
+            >
+                <div
+                    style={{
+                        clipPath:
+                            "polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
+                    }}
+                    className="aspect-1155/678 w-288.75 bg-linear-to-tr from-[#ff80b5] to-secondary opacity-30"
+                ></div>
+            </div>
         </motion.section>
     );
 };
diff --git a/src/app/[locale]/(main)/home/hero.tsx b/src/app/[locale]/(main)/home/hero.tsx
index 25dfd34..a049c00 100644
--- a/src/app/[locale]/(main)/home/hero.tsx
+++ b/src/app/[locale]/(main)/home/hero.tsx
@@ -1,13 +1,14 @@
 "use client";
 
 import Image from "next/image";
-import { useState } from "react";
 import { useRouter } from "next/navigation";
 import { Merriweather as Font } from "next/font/google";
 import { useTranslations } from "next-intl";
+import { useState } from "react";
 import { motion } from "framer-motion";
-import { cn } from "@/lib/utils";
 import { domain } from "@/config/seo";
+import { cn } from "@/lib/utils";
+import { Sparkles } from "lucide-react";
 
 const font = Font({
     subsets: ["latin"],
@@ -21,7 +22,7 @@ const fadeUp = (delay = 0) => ({
 });
 
 const fadeUpView = (delay = 0) => ({
-    initial: { opacity: 0, y: -28 },
+    initial: { opacity: 0, y: 20 },
     whileInView: { opacity: 1, y: 0 },
     viewport: { once: true },
     transition: { duration: 0.7, ease: [0.16, 1, 0.3, 1] as const, delay },
@@ -43,77 +44,187 @@ const Hero: React.FC = () => {
 
     return (
         <motion.section
-            className="relative w-full h-[calc(100svh-90px)] rounded-box shadow-xl overflow-hidden"
+            className="relative z-50 w-full min-h-[calc(100svh-90px)] overflow-x-hidden text-left"
             {...fadeUp(0)}
         >
-            <Image
-                src="/images/home/house.jpg"
-                alt="house"
-                className="absolute size-full object-cover"
-                fill
-                priority
-            />
-            <div className="size-full bg-gradient-to-b from-black/50 to-black/40 text-white backdrop-blur-sm flex flex-col items-center justify-center gap-y-6">
-                <motion.div className="flex -mb-2" {...fadeUpView(0)}>
-                    <div className="badge badge-lg badge-soft rounded-full">
-                        <span className="status status-success"></span>
-                        <p>{t("badge")}</p>
-                    </div>
-                </motion.div>
-
-                <motion.h1
-                    className={cn(
-                        "text-5xl sm:text-6xl md:text-7xl max-w-[840px] text-center px-4",
-                        font.className
-                    )}
-                    {...fadeUpView(0.2)}
-                >
-                    {t("title1")}
-                    <span className="italic text-secondary contrast-150">
-                        {t("title2")}
-                    </span>
-                    {t("title3")}
-                </motion.h1>
-
-                <motion.p
-                    className="text-center max-w-[540px] px-6"
-                    {...fadeUpView(0.4)}
-                >
-                    {t("description")}
-                </motion.p>
-
-                <motion.div
-                    className="join join-vertical sm:join-horizontal text-black font-[500] w-full px-4 sm:w-auto sm:px-0"
-                    {...fadeUpView(0.6)}
-                >
-                    <label className="input input-lg lg:input-xl join-item gap-x-0 px-6 text-base! focus:border-primary/80 focus:outline-none! outline-offset-0 outline-none w-full sm:w-auto">
-                        <span className="opacity-80">
-                            {domain.replace("https://", "")}/
+            <div className="flex flex-col lg:flex-row items-center lg:items-center lg:h-[calc(100svh-90px)] py-14 lg:py-0 gap-y-10 lg:gap-y-0">
+                <div className="w-full lg:w-3/7 flex flex-col items-center lg:items-start justify-center text-center lg:text-left gap-y-6 flex-shrink-0">
+                    <motion.div className="flex -mb-2" {...fadeUpView(0)}>
+                        <div className="badge badge-lg badge-secondary badge-soft border border-secondary/20">
+                            <Sparkles className="size-5 text-amber-300 fill-amber-300" />
+                            <p className="text-neutral">{t("badge")}</p>
+                        </div>
+                    </motion.div>
+
+                    <motion.h1
+                        className={cn(
+                            "text-4xl sm:text-5xl md:text-5xl xl:text-6xl max-w-180",
+                            font.className
+                        )}
+                        {...fadeUpView(0.2)}
+                    >
+                        {t("title1")}
+                        <span className="italic text-secondary">
+                            {t("title2")}
                         </span>
-                        <input
-                            type="text"
-                            placeholder="johndoe"
-                            className="focus:border-none focus:outline-none"
-                            value={username}
-                            onChange={(e) => setUsername(e.target.value)}
-                            onKeyDown={(e) => e.key === "Enter" && handleJoin()}
-                        />
-                    </label>
-
-                    <button
-                        className="btn btn-lg lg:btn-xl btn-primary pl-4 text-base! join-item"
-                        onClick={handleJoin}
+                        {t("title3")}
+                    </motion.h1>
+
+                    <motion.p
+                        className="text-sm xl:text-base max-w-md lg:max-w-none"
+                        {...fadeUpView(0.4)}
+                    >
+                        {t("description")}
+                    </motion.p>
+
+                    <motion.div
+                        className="join join-vertical sm:join-horizontal text-black font-[500] w-full max-w-sm lg:max-w-none"
+                        {...fadeUpView(0.6)}
+                    >
+                        <label className="input input-lg join-item gap-x-0 px-4 text-sm! focus:border-primary/80 focus:outline-none! outline-offset-0 outline-none w-full sm:w-auto">
+                            <span className="opacity-80 text-sm">
+                                {domain.replace("https://", "")}/
+                            </span>
+                            <input
+                                type="text"
+                                placeholder="johndoe"
+                                className="focus:border-none focus:outline-none text-sm"
+                                value={username}
+                                onChange={(e) => setUsername(e.target.value)}
+                                onKeyDown={(e) =>
+                                    e.key === "Enter" && handleJoin()
+                                }
+                            />
+                        </label>
+
+                        <button
+                            className="btn btn-lg btn-primary pl-4 text-sm! join-item"
+                            onClick={handleJoin}
+                        >
+                            {t("join")}
+                        </button>
+                    </motion.div>
+
+                    <motion.div
+                        {...fadeUpView(0.7)}
+                        className="text-neutral/50 -mt-5 text-sm"
+                    >
+                        {t("free")}
+                    </motion.div>
+                </div>
+
+                <div className="flex relative w-full lg:w-3/5 h-[540px] sm:h-[620px] lg:h-full items-center justify-center">
+                    <motion.div
+                        className="mockup-phone border-neutral rounded-[60px] w-52 xl:w-72 max-h-[85%] aspect-9/18"
+                        {...fadeUpView(0.3)}
+                    >
+                        <div className="mockup-phone-camera" />
+                        <div className="mockup-phone-display rounded-[66px]">
+                            <Image
+                                src="/images/home/johndoe.png"
+                                alt="AgentPage preview"
+                                width={480}
+                                height={800}
+                                className="w-full h-auto"
+                            />
+                        </div>
+                    </motion.div>
+
+                    <motion.div
+                        className="absolute top-[8%] right-4 sm:right-8 xl:right-16 w-44 bg-base-100 rounded-2xl shadow-xl border border-base-300 p-3.5"
+                        style={{ rotate: "3deg" }}
+                        {...fadeUpView(0.5)}
+                    >
+                        <p className="text-[10px] text-neutral/40 font-semibold uppercase tracking-widest mb-2.5">
+                            {t("cards.stats.title")}
+                        </p>
+                        <div className="grid grid-cols-2 gap-2 mb-2">
+                            <div>
+                                <p className="text-xl font-bold leading-none">
+                                    847
+                                </p>
+                                <p className="text-[10px] text-neutral/50 mt-0.5">
+                                    {t("cards.stats.views")}
+                                </p>
+                            </div>
+                            <div>
+                                <p className="text-xl font-bold leading-none text-secondary">
+                                    12
+                                </p>
+                                <p className="text-[10px] text-neutral/50 mt-0.5">
+                                    {t("cards.stats.leads")}
+                                </p>
+                            </div>
+                        </div>
+                        <p className="text-[10px] text-green-500 font-semibold">
+                            {t("cards.stats.growth")}
+                        </p>
+                    </motion.div>
+
+                    <motion.div
+                        className="absolute top-[22%] left-4 sm:left-8 xl:left-16 w-40 bg-base-100 rounded-2xl shadow-xl border border-base-300 p-3"
+                        style={{ rotate: "-2deg" }}
+                        {...fadeUpView(0.7)}
+                    >
+                        <div className="flex items-center gap-1.5 mb-1.5">
+                            <span className="size-2 rounded-full bg-green-500 animate-pulse shrink-0" />
+                            <p className="text-[9px] text-neutral/40 font-semibold uppercase tracking-widest">
+                                {t("cards.status.title")}
+                            </p>
+                        </div>
+                        <p className="text-2xl font-bold text-green-500 leading-none mb-0.5">
+                            {t("cards.status.value")}
+                        </p>
+                        <p className="text-[9px] text-neutral/50">
+                            {t("cards.status.label")}
+                        </p>
+                    </motion.div>
+
+                    <motion.div
+                        className="absolute bottom-[16%] left-4 sm:left-8 xl:left-16 w-52 bg-base-100 rounded-2xl shadow-xl border border-base-300 p-3.5"
+                        style={{ rotate: "-3deg" }}
+                        {...fadeUpView(0.6)}
+                    >
+                        <div className="flex gap-0.5 mb-2">
+                            {[...Array(5)].map((_, i) => (
+                                <span
+                                    key={i}
+                                    className="text-yellow-400 text-sm"
+                                >
+                                    ★
+                                </span>
+                            ))}
+                        </div>
+                        <p className="text-xs font-medium leading-relaxed">
+                            &ldquo;{t("cards.review.text")}&rdquo;
+                        </p>
+                        <p className="text-[10px] text-neutral/40 mt-2">
+                            {t("cards.review.author")}
+                        </p>
+                    </motion.div>
+
+                    <motion.div
+                        className="absolute bottom-[14%] right-4 sm:right-8 xl:right-16 w-36 bg-base-100 rounded-2xl shadow-xl border border-base-300 p-3"
+                        style={{ rotate: "4deg" }}
+                        {...fadeUpView(0.8)}
                     >
-                        {t("join")}
-                    </button>
-                </motion.div>
-
-                <motion.div
-                    {...fadeUpView(0.7)}
-                    className="text-base-300 -mt-4"
-                >
-                    {t("free")}
-                </motion.div>
+                        <p className="text-[9px] text-neutral/40 font-semibold uppercase tracking-widest mb-2">
+                            {t("cards.qr.title")}
+                        </p>
+                        <p className="text-[9px] font-mono font-bold text-secondary truncate mb-2">
+                            agentpage.me/johndoe
+                        </p>
+                        <div className="flex justify-center">
+                            <Image
+                                src="/images/home/qr.png"
+                                alt="QR code"
+                                width={80}
+                                height={80}
+                                className="rounded-lg"
+                            />
+                        </div>
+                    </motion.div>
+                </div>
             </div>
         </motion.section>
     );
diff --git a/src/app/[locale]/(main)/home/index.tsx b/src/app/[locale]/(main)/home/index.tsx
index eed9b06..b657d6f 100644
--- a/src/app/[locale]/(main)/home/index.tsx
+++ b/src/app/[locale]/(main)/home/index.tsx
@@ -1,7 +1,6 @@
 import { plans } from "@/config/stripe";
 import Hero from "./hero";
 import Comparison from "./comparison";
-import PreviewMockup from "./preview";
 import Features from "./features";
 import HowItWorks from "./how-it-works";
 import Pricing from "./pricing";
@@ -12,13 +11,10 @@ const Home: React.FC = async () => {
     return (
         <>
             <Hero />
-            {/* <LogoStrip /> */}
-            <PreviewMockup />
             <Comparison />
             <Features />
             <HowItWorks />
             <Pricing plans={plans} />
-            {/* <Testimonials /> */}
             <FAQ />
             <FinalCta />
         </>
diff --git a/src/app/[locale]/(main)/home/preview.tsx b/src/app/[locale]/(main)/home/preview.tsx
deleted file mode 100644
index a85474e..0000000
--- a/src/app/[locale]/(main)/home/preview.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-"use client";
-
-import Image from "next/image";
-import { useTranslations } from "next-intl";
-import { Merriweather as Font } from "next/font/google";
-import { motion } from "framer-motion";
-import { cn } from "@/lib/utils";
-
-const font = Font({
-    subsets: ["latin"],
-    weight: "700",
-});
-
-const fadeUpView = (delay = 0) => ({
-    initial: { opacity: 0, y: -28 },
-    whileInView: { opacity: 1, y: 0 },
-    viewport: { once: true },
-    transition: { duration: 0.7, ease: [0.16, 1, 0.3, 1] as const, delay },
-});
-
-const PreviewMockup: React.FC = () => {
-    const t = useTranslations("pages.home.preview");
-    return (
-        <motion.section
-            {...fadeUpView(0)}
-            className="py-16 flex flex-col items-center"
-        >
-            <div className="mb-6 text-center">
-                <p className="badge badge-lg badge-primary mb-4">
-                    {t("badge")}
-                </p>
-                <h2
-                    className={cn(
-                        "text-3xl sm:text-4xl md:text-5xl font-bold",
-                        font.className
-                    )}
-                >
-                    {t("title1")}
-                    <span className="italic text-secondary">{t("title2")}</span>
-                </h2>
-            </div>
-
-            <div className="mockup-phone border-secondary">
-                <div className="mockup-phone-camera"></div>
-                <div className="mockup-phone-display">
-                    <Image
-                        src="/images/home/preview.png"
-                        alt="John Doe's AgentPage profile"
-                        width={480}
-                        height={800}
-                        className="w-full h-auto"
-                    />
-                </div>
-            </div>
-
-            <motion.p
-                initial={{ opacity: 0 }}
-                whileInView={{ opacity: 1 }}
-                viewport={{ once: true }}
-                transition={{ duration: 0.6, delay: 0.3 }}
-                className="text-neutral text-sm mt-3"
-            >
-                {t("your-page")}
-            </motion.p>
-        </motion.section>
-    );
-};
-
-export default PreviewMockup;
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index a13d9fd..76041a1 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -20,8 +20,8 @@ const generateMetadata = async (): Promise<Metadata> => {
     const t = await getTranslations("common");
     return {
         title: {
-            default: metadata.title + " " + t("subtitle"),
-            template: `%s ${String.fromCharCode(183)} ${metadata.title}`,
+            default: metadata.title + " | " + t("subtitle"),
+            template: `%s | ${metadata.title}`,
         },
         description: t("description"),
         abstract: t("subtitle"),
diff --git a/src/components/layout/footer.tsx b/src/components/layout/footer.tsx
index a324294..dd0a2bb 100644
--- a/src/components/layout/footer.tsx
+++ b/src/components/layout/footer.tsx
@@ -23,9 +23,15 @@ const Footer: React.FC = async () => {
         { title: t("links.contact"), path: "mailto:" + env.SENDER_EMAIL },
     ];
 
+    const registerLinks = [
+        { title: t("links.login"), path: "/login" },
+        { title: t("links.register"), path: "/register" },
+        { title: t("links.forgot-password"), path: "/forgot-password" },
+    ];
+
     return (
         <footer className="mx-auto max-w-8xl px-4 md:px-6 lg:px-8 xl:px-12 pt-16 pb-8">
-            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-12 mb-12">
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-12 mb-12">
                 <div className="flex flex-col gap-y-4">
                     <Link href="/" className="flex items-center gap-x-2">
                         <Logo />
@@ -34,21 +40,6 @@ const Footer: React.FC = async () => {
                     <p className="text-sm leading-relaxed">
                         {t("footer.tagline")}
                     </p>
-                    <div className="flex items-center gap-x-4 mt-2">
-                        {/* <Link
-                            href="#"
-                            aria-label="Twitter / X"
-                            className="link"
-                        >
-                            <Twitter className="size-5" />
-                        </Link>
-                        <Link href="#" aria-label="Instagram" className="link">
-                            <Instagram className="size-5" />
-                        </Link>
-                        <Link href="#" aria-label="LinkedIn" className="link">
-                            <Linkedin className="size-5" />
-                        </Link> */}
-                    </div>
                 </div>
 
                 <div className="flex flex-col gap-y-3">
@@ -80,6 +71,21 @@ const Footer: React.FC = async () => {
                         </Link>
                     ))}
                 </div>
+
+                <div className="flex flex-col gap-y-3">
+                    <p className="text-xs font-semibold uppercase tracking-widest text-neutral mb-1">
+                        {t("footer.register")}
+                    </p>
+                    {registerLinks.map((link) => (
+                        <Link
+                            key={link.path}
+                            href={link.path}
+                            className="link link-hover"
+                        >
+                            {link.title}
+                        </Link>
+                    ))}
+                </div>
             </div>
 
             <div className="border-t border-neutral/20 pt-6 flex flex-col sm:flex-row items-center justify-between gap-4 text-sm text-neutral">
diff --git a/src/components/layout/header.tsx b/src/components/layout/header.tsx
index 5b7684a..53bef5c 100644
--- a/src/components/layout/header.tsx
+++ b/src/components/layout/header.tsx
@@ -9,7 +9,7 @@ import type { User } from "lucia";
 import Logo from "@/components/ui/logo";
 import LogoText from "@/components/ui/logo-text";
 import LocaleModal from "@/components/ui/locale-modal";
-import { getImage } from "@/lib/utils";
+import { cn, getImage } from "@/lib/utils";
 
 type HeaderProps = {
     user: User | null;
@@ -20,6 +20,13 @@ const Header: React.FC<HeaderProps> = ({ children, user }) => {
     const t = useTranslations("links");
     const [localeOpen, setLocaleOpen] = useState<boolean>(false);
     const [drawerOpen, setDrawerOpen] = useState<boolean>(false);
+    const [scrolled, setScrolled] = useState<boolean>(false);
+
+    useEffect(() => {
+        const onScroll = () => setScrolled(window.scrollY > 0);
+        window.addEventListener("scroll", onScroll, { passive: true });
+        return () => window.removeEventListener("scroll", onScroll);
+    }, []);
 
     const initials =
         user ?
@@ -66,7 +73,12 @@ const Header: React.FC<HeaderProps> = ({ children, user }) => {
                     onChange={(e) => setDrawerOpen(e.target.checked)}
                 />
                 <div className="drawer-content">
-                    <header className="fixed top-0 z-90 w-full bg-base-100">
+                    <header
+                        className={cn(
+                            "fixed top-0 z-90 w-full transition-colors duration-300",
+                            scrolled ? "bg-base-100" : "bg-transparent"
+                        )}
+                    >
                         <div className="navbar min-h-16 py-0 mx-auto max-w-8xl w-full px-4 md:px-6 lg:px-8 xl:px-12">
                             <div className="navbar-start gap-x-2">
                                 <label
diff --git a/src/styles/globals.css b/src/styles/globals.css
index ffdf67a..0814255 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -7,7 +7,7 @@
 html[data-theme="light"] {
     color-scheme: light;
 
-    --color-primary: #000000;
+    --color-primary: #111111;
     --color-primary-content: #ffffff;
     --color-secondary: #657fff;
     --color-secondary-content: #ffffff;
@@ -48,14 +48,14 @@ html[data-theme="dark"] {
     --color-base-200: #1f1f1f;
     --color-base-300: #323232;
     --color-base-content: #f9fafb;
-    --color-info: #38bdf8;
-    --color-success: #4ade80;
-    --color-warning: #fbbf24;
-    --color-error: #f87171;
+    --color-info: #0ea5e9;
+    --color-success: #22c55e;
+    --color-warning: #f5c20b;
+    --color-error: #ef4444;
 
-    --radius-selector: 10rem;
-    --radius-field: 100rem;
-    --radius-box: 2rem;
+    --radius-selector: 0.8rem;
+    --radius-field: 0.8rem;
+    --radius-box: 1rem;
 
     --animation-btn: 0;
     --animation-input: 0;
@@ -87,12 +87,3 @@ html[data-theme="dark"] {
     width: 100%;
     max-width: 90rem;
 }
-
-@keyframes marquee {
-    from { transform: translateX(0); }
-    to { transform: translateX(-50%); }
-}
-
-.animate-marquee {
-    animation: marquee 24s linear infinite;
-}