diff --git a/next-env.d.ts b/next-env.d.ts
index 9edff1c..c4b7818 100644
--- a/next-env.d.ts
+++ b/next-env.d.ts
@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts";
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/package-lock.json b/package-lock.json
index 9d4f1ea..23f426b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -598,9 +598,6 @@
       "cpu": [
         "arm"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -617,9 +614,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -636,9 +630,6 @@
       "cpu": [
         "ppc64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -655,9 +646,6 @@
       "cpu": [
         "riscv64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -674,9 +662,6 @@
       "cpu": [
         "s390x"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -693,9 +678,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -712,9 +694,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -731,9 +710,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "LGPL-3.0-or-later",
       "optional": true,
       "os": [
@@ -750,9 +726,6 @@
       "cpu": [
         "arm"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -775,9 +748,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -800,9 +770,6 @@
       "cpu": [
         "ppc64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -825,9 +792,6 @@
       "cpu": [
         "riscv64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -850,9 +814,6 @@
       "cpu": [
         "s390x"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -875,9 +836,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -900,9 +858,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -925,9 +880,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -1119,9 +1071,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1138,9 +1087,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1157,9 +1103,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1176,9 +1119,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1382,9 +1322,6 @@
       "cpu": [
         "arm"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1405,9 +1342,6 @@
       "cpu": [
         "arm"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1428,9 +1362,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1451,9 +1382,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1474,9 +1402,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1497,9 +1422,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1657,9 +1579,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0 AND MIT",
       "optional": true,
       "os": [
@@ -1676,9 +1595,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "Apache-2.0 AND MIT",
       "optional": true,
       "os": [
@@ -1695,9 +1611,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "Apache-2.0 AND MIT",
       "optional": true,
       "os": [
@@ -1714,9 +1627,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "Apache-2.0 AND MIT",
       "optional": true,
       "os": [
@@ -1933,9 +1843,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1953,9 +1860,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1973,9 +1877,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1993,9 +1894,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2510,9 +2408,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2527,9 +2422,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2544,9 +2436,6 @@
         "ppc64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2561,9 +2450,6 @@
         "riscv64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2578,9 +2464,6 @@
         "riscv64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2595,9 +2478,6 @@
         "s390x"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2612,9 +2492,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2629,9 +2506,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4964,9 +4838,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -4988,9 +4859,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -5012,9 +4880,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -5036,9 +4901,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -5365,6 +5227,17 @@
         }
       }
     },
+    "node_modules/next-intl/node_modules/@swc/helpers": {
+      "version": "0.5.19",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.19.tgz",
+      "integrity": "sha512-QamiFeIK3txNjgUTNppE6MiG3p7TdninpZu0E0PbqVh1a9FNLT2FRhisaa4NcaX52XVhA5l7Pk58Ft7Sqi/2sA==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "tslib": "^2.8.0"
+      }
+    },
     "node_modules/next/node_modules/postcss": {
       "version": "8.4.31",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
diff --git a/src/app/[locale]/cart/page.tsx b/src/app/[locale]/cart/page.tsx
index 88c60a4..55d00f4 100644
--- a/src/app/[locale]/cart/page.tsx
+++ b/src/app/[locale]/cart/page.tsx
@@ -12,7 +12,7 @@ export default async function CartPage() {
 
   return (
     <div className="mx-auto max-w-3xl px-4 py-10 sm:px-6 lg:px-8">
-      <h1 className="text-3xl font-bold tracking-tight text-stone-900">
+      <h1 className="text-3xl font-semibold tracking-tight text-neutral-900">
         {t("title")}
       </h1>
       <div className="mt-8">
diff --git a/src/app/[locale]/checkout/page.tsx b/src/app/[locale]/checkout/page.tsx
index 746126a..d54c420 100644
--- a/src/app/[locale]/checkout/page.tsx
+++ b/src/app/[locale]/checkout/page.tsx
@@ -11,10 +11,10 @@ export default async function CheckoutPage() {
 
   return (
     <div className="mx-auto max-w-2xl px-4 py-10 sm:px-6 lg:px-8">
-      <h1 className="text-3xl font-bold tracking-tight text-stone-900">
+      <h1 className="text-3xl font-semibold tracking-tight text-neutral-900">
         {t("title")}
       </h1>
-      <p className="mt-2 text-stone-600">{t("subtitle")}</p>
+      <p className="mt-2 text-neutral-600">{t("subtitle")}</p>
       <div className="mt-8">
         <CheckoutForm />
       </div>
diff --git a/src/app/[locale]/not-found.tsx b/src/app/[locale]/not-found.tsx
index 34b6aec..0872afc 100644
--- a/src/app/[locale]/not-found.tsx
+++ b/src/app/[locale]/not-found.tsx
@@ -6,10 +6,10 @@ export default async function NotFound() {
 
   return (
     <div className="mx-auto flex max-w-lg flex-col items-center px-4 py-24 text-center">
-      <h1 className="text-2xl font-bold text-stone-900">{t("notFound")}</h1>
+      <h1 className="text-2xl font-semibold text-neutral-900">{t("notFound")}</h1>
       <Link
         href="/catalog"
-        className="mt-6 rounded-xl bg-blue-600 px-5 py-3 text-sm font-semibold text-white hover:bg-blue-700"
+        className="mt-6 rounded-lg bg-neutral-900 px-5 py-3 text-sm font-semibold text-white transition hover:bg-neutral-800"
       >
         {t("back")}
       </Link>
diff --git a/src/app/[locale]/page.tsx b/src/app/[locale]/page.tsx
index 71f6a1b..584dfda 100644
--- a/src/app/[locale]/page.tsx
+++ b/src/app/[locale]/page.tsx
@@ -11,31 +11,31 @@ export default async function HomePage() {
       <section className="relative overflow-hidden border-b border-neutral-200/90 bg-gradient-to-b from-white to-neutral-50">
         <div className="mx-auto grid max-w-[1440px] gap-10 px-4 py-14 sm:px-6 lg:grid-cols-2 lg:items-center lg:py-20 lg:px-8">
           <div>
-            <p className="text-xs font-bold uppercase tracking-widest text-neutral-500">
+            <p className="text-[11px] font-semibold uppercase tracking-widest text-neutral-400">
               {t("hero.eyebrow")}
             </p>
-            <h1 className="mt-3 text-3xl font-bold tracking-tight text-stone-900 sm:text-4xl lg:text-5xl">
+            <h1 className="mt-3 text-3xl font-semibold tracking-tight text-neutral-900 sm:text-4xl lg:text-5xl">
               {t("hero.title")}
             </h1>
-            <p className="mt-4 text-base leading-relaxed text-stone-600 sm:text-lg">
+            <p className="mt-4 text-base leading-relaxed text-neutral-600 sm:text-lg">
               {t("hero.subtitle")}
             </p>
             <div className="mt-8 flex flex-col gap-3 sm:flex-row">
               <Link
                 href="/catalog"
-                className="inline-flex items-center justify-center rounded-full bg-blue-600 px-5 py-3.5 text-sm font-bold text-white shadow-lg shadow-blue-600/20 hover:bg-blue-700"
+                className="inline-flex items-center justify-center rounded-lg bg-neutral-900 px-5 py-3.5 text-sm font-semibold text-white transition hover:bg-neutral-800"
               >
                 {t("hero.ctaCatalog")}
               </Link>
               <Link
                 href="/checkout"
-                className="inline-flex items-center justify-center rounded-full border border-neutral-300 bg-white px-5 py-3.5 text-sm font-semibold text-neutral-800 shadow-sm hover:border-neutral-400 hover:text-neutral-950"
+                className="inline-flex items-center justify-center rounded-lg border border-neutral-200 bg-white px-5 py-3.5 text-sm font-semibold text-neutral-600 transition hover:border-neutral-300 hover:text-neutral-900"
               >
                 {t("hero.ctaQuote")}
               </Link>
             </div>
           </div>
-          <div className="relative aspect-[4/3] overflow-hidden rounded-2xl bg-[#e2e8f0] shadow-xl ring-1 ring-neutral-200/90">
+          <div className="relative aspect-[4/3] overflow-hidden rounded-lg bg-[#e2e8f0] border border-neutral-200">
             <Image
               src="/metal/hero-stack.svg"
               alt={th("stackAlt")}
@@ -51,17 +51,17 @@ export default async function HomePage() {
 
       <section
         id="services"
-        className="border-y border-stone-200/80 bg-stone-50/80"
+        className="border-y border-neutral-200/80 bg-neutral-50/80"
         aria-labelledby="services-heading"
       >
         <div className="mx-auto max-w-6xl px-4 py-16 sm:px-6 lg:px-8">
           <h2
             id="services-heading"
-            className="text-2xl font-bold text-stone-900 sm:text-3xl"
+            className="text-2xl font-semibold text-neutral-900 sm:text-3xl"
           >
             {t("services.title")}
           </h2>
-          <p className="mt-2 max-w-2xl text-stone-600">{t("services.subtitle")}</p>
+          <p className="mt-2 max-w-2xl text-neutral-600">{t("services.subtitle")}</p>
           <ul className="mt-10 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
             {(
               [
@@ -75,17 +75,44 @@ export default async function HomePage() {
             ).map((key) => (
               <li
                 key={key}
-                className="rounded-2xl bg-white p-5 shadow-sm ring-1 ring-stone-200/80"
+                className="rounded-lg bg-white p-5 border border-neutral-100"
               >
-                <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-blue-600 text-white">
-                  <span className="text-lg font-black" aria-hidden>
-                    ✓
-                  </span>
+                <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-neutral-900 text-white">
+                  {key === "cut" && (
+                    <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+                      <path strokeLinecap="round" strokeLinejoin="round" d="M14.121 14.121L19 19m-7-7l7-7m-7 7l-2.879 2.879M12 12L9.121 9.121m0 5.758a3 3 0 11-4.243 4.243 3 3 0 014.243-4.243zm0-5.758a3 3 0 11-4.243-4.243 3 3 0 014.243 4.243z" />
+                    </svg>
+                  )}
+                  {key === "coating" && (
+                    <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+                      <path strokeLinecap="round" strokeLinejoin="round" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
+                    </svg>
+                  )}
+                  {key === "docs" && (
+                    <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+                      <path strokeLinecap="round" strokeLinejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                    </svg>
+                  )}
+                  {key === "delivery" && (
+                    <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+                      <path strokeLinecap="round" strokeLinejoin="round" d="M13 16V6a1 1 0 00-1-1H4a1 1 0 00-1 1v10a1 1 0 001 1h1m8-1a1 1 0 01-1 1H9m4-1V8a1 1 0 011-1h2.586a1 1 0 01.707.293l3.414 3.414a1 1 0 01.293.707V16a1 1 0 01-1 1h-1m-6-1a1 1 0 001 1h1M5 17a2 2 0 104 0m-4 0m6 0a2 2 0 104 0m-4 0a2 2 0 114 0" />
+                    </svg>
+                  )}
+                  {key === "sizing" && (
+                    <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+                      <path strokeLinecap="round" strokeLinejoin="round" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
+                    </svg>
+                  )}
+                  {key === "bulk" && (
+                    <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+                      <path strokeLinecap="round" strokeLinejoin="round" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
+                    </svg>
+                  )}
                 </div>
-                <h3 className="mt-4 text-lg font-semibold text-stone-900">
+                <h3 className="mt-4 text-lg font-semibold text-neutral-900">
                   {t(`services.${key}.title`)}
                 </h3>
-                <p className="mt-2 text-sm leading-relaxed text-stone-600">
+                <p className="mt-2 text-sm leading-relaxed text-neutral-600">
                   {t(`services.${key}.body`)}
                 </p>
               </li>
@@ -96,23 +123,23 @@ export default async function HomePage() {
 
       <section className="bg-white">
         <div className="mx-auto max-w-6xl px-4 py-16 sm:px-6 lg:px-8">
-          <h2 className="text-2xl font-bold text-stone-900 sm:text-3xl">
+          <h2 className="text-2xl font-semibold text-neutral-900 sm:text-3xl">
             {t("how.title")}
           </h2>
-          <p className="mt-2 text-stone-600">{t("how.subtitle")}</p>
+          <p className="mt-2 text-neutral-600">{t("how.subtitle")}</p>
           <ol className="mt-10 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
             {([1, 2, 3, 4] as const).map((n) => (
               <li
                 key={n}
-                className="relative rounded-2xl border border-stone-200 bg-stone-50/80 p-5"
+                className="relative rounded-lg border border-neutral-100 bg-neutral-50/80 p-5"
               >
-                <span className="text-3xl font-black text-orange-500/30">
+                <span className="text-3xl font-semibold text-neutral-300">
                   {n}
                 </span>
-                <h3 className="mt-2 font-semibold text-stone-900">
+                <h3 className="mt-2 font-semibold text-neutral-900">
                   {t(`how.step${n}.title` as "how.step1.title")}
                 </h3>
-                <p className="mt-2 text-sm text-stone-600">
+                <p className="mt-2 text-sm text-neutral-600">
                   {t(`how.step${n}.body` as "how.step1.body")}
                 </p>
               </li>
@@ -123,28 +150,28 @@ export default async function HomePage() {
 
       <section
         id="faq"
-        className="border-t border-stone-200/80 bg-stone-50/80"
+        className="border-t border-neutral-100 bg-neutral-50/80"
         aria-labelledby="faq-heading"
       >
         <div className="mx-auto max-w-6xl px-4 py-16 sm:px-6 lg:px-8">
           <div className="mx-auto max-w-3xl">
             <h2
               id="faq-heading"
-              className="text-2xl font-bold text-stone-900 sm:text-3xl"
+              className="text-2xl font-semibold text-neutral-900 sm:text-3xl"
             >
               {t("faq.title")}
             </h2>
-            <p className="mt-2 text-stone-600">{t("faq.subtitle")}</p>
+            <p className="mt-2 text-neutral-600">{t("faq.subtitle")}</p>
             <div className="mt-10 space-y-3">
               {([1, 2, 3, 4, 5, 6] as const).map((n) => (
                 <details
                   key={n}
-                  className="group rounded-2xl border border-stone-200 bg-white px-4 py-1 shadow-sm ring-stone-200/80 open:ring-2 open:ring-blue-600/15"
+                  className="group rounded-lg border border-neutral-200 bg-white px-4 py-1"
                 >
-                  <summary className="flex cursor-pointer list-none items-center justify-between gap-3 py-3 text-left text-sm font-semibold text-stone-900 [&::-webkit-details-marker]:hidden">
+                  <summary className="flex cursor-pointer list-none items-center justify-between gap-3 py-3 text-left text-sm font-semibold text-neutral-900 [&::-webkit-details-marker]:hidden">
                     <span>{t(`faq.i${n}.q` as "faq.i1.q")}</span>
                     <svg
-                      className="faq-chevron h-5 w-5 shrink-0 text-stone-400 transition-transform duration-200"
+                      className="faq-chevron h-5 w-5 shrink-0 text-neutral-400 transition-transform duration-200"
                       viewBox="0 0 20 20"
                       fill="currentColor"
                       aria-hidden
@@ -156,7 +183,7 @@ export default async function HomePage() {
                       />
                     </svg>
                   </summary>
-                  <p className="border-t border-stone-100 pb-4 pt-3 text-sm leading-relaxed text-stone-600">
+                  <p className="border-t border-neutral-100 pb-4 pt-3 text-sm leading-relaxed text-neutral-600">
                     {t(`faq.i${n}.a` as "faq.i1.a")}
                   </p>
                 </details>
@@ -167,21 +194,21 @@ export default async function HomePage() {
       </section>
 
       <section className="mx-auto max-w-6xl px-4 py-16 sm:px-6 lg:px-8">
-        <div className="overflow-hidden rounded-3xl bg-blue-600 px-6 py-10 text-center text-white shadow-xl shadow-blue-600/25 sm:px-12">
-          <h2 className="text-2xl font-bold sm:text-3xl">{t("ctaBand.title")}</h2>
-          <p className="mx-auto mt-3 max-w-xl text-sm text-blue-100 sm:text-base">
+        <div className="overflow-hidden rounded-lg bg-neutral-900 px-6 py-10 text-center text-white sm:px-12">
+          <h2 className="text-2xl font-semibold sm:text-3xl">{t("ctaBand.title")}</h2>
+          <p className="mx-auto mt-3 max-w-xl text-sm text-neutral-400 sm:text-base">
             {t("ctaBand.body")}
           </p>
           <div className="mt-8 flex flex-col justify-center gap-3 sm:flex-row">
             <Link
               href="/checkout"
-              className="inline-flex justify-center rounded-xl bg-orange-500 px-6 py-3.5 text-sm font-bold text-white hover:bg-orange-600"
+              className="inline-flex justify-center rounded-lg bg-white px-6 py-3.5 text-sm font-semibold text-neutral-900 transition hover:bg-neutral-100"
             >
               {t("ctaBand.primary")}
             </Link>
             <a
               href={`tel:${(process.env.NEXT_PUBLIC_CONTACT_PHONE ?? "+251911000000").replace(/\s/g, "")}`}
-              className="inline-flex justify-center rounded-xl border border-white/40 bg-white/10 px-6 py-3.5 text-sm font-semibold text-white backdrop-blur hover:bg-white/20"
+              className="inline-flex justify-center rounded-lg border border-white/20 bg-white/10 px-6 py-3.5 text-sm font-semibold text-white transition hover:bg-white/20"
             >
               {t("ctaBand.secondary")}
             </a>
diff --git a/src/app/[locale]/product/[slug]/page.tsx b/src/app/[locale]/product/[slug]/page.tsx
index ff0385d..4521824 100644
--- a/src/app/[locale]/product/[slug]/page.tsx
+++ b/src/app/[locale]/product/[slug]/page.tsx
@@ -39,7 +39,7 @@ export default async function ProductPage({ params }: Props) {
     <div className="mx-auto max-w-[1440px] px-4 py-10 sm:px-6 lg:px-8">
       <Link
         href="/catalog"
-        className="text-sm font-medium text-blue-600 hover:text-blue-700"
+        className="text-sm font-medium text-neutral-500 transition hover:text-neutral-900"
       >
         ← {t("back")}
       </Link>
@@ -47,8 +47,8 @@ export default async function ProductPage({ params }: Props) {
       <div className="mt-8 grid gap-10 lg:grid-cols-2 lg:gap-16">
         <div>
           <ProductGallery slug={slug} sources={product.gallery} />
-          <div className="mt-4">
-            <p className="text-xs font-bold uppercase tracking-wider text-neutral-500">
+          <div className="mt-6">
+            <p className="text-[11px] font-semibold uppercase tracking-widest text-neutral-400">
               {t("thicknessLabel")}
             </p>
             <div
@@ -60,7 +60,7 @@ export default async function ProductPage({ params }: Props) {
                 <span
                   key={mm}
                   role="listitem"
-                  className="inline-flex rounded-full bg-neutral-100 px-3 py-1.5 text-sm font-semibold tabular-nums text-neutral-800 ring-1 ring-neutral-200/90"
+                  className="inline-flex rounded-md border border-neutral-200 bg-neutral-50 px-3 py-1.5 text-sm font-semibold tabular-nums text-neutral-800"
                 >
                   {t("thicknessValue", {
                     value: formatThicknessMm(mm),
@@ -72,13 +72,13 @@ export default async function ProductPage({ params }: Props) {
         </div>
 
         <div>
-          <p className="text-[10px] font-semibold uppercase tracking-[0.16em] text-neutral-500">
+          <p className="text-[11px] font-semibold uppercase tracking-widest text-neutral-400">
             {tcl(product.catalogLineKey)}
           </p>
           <p className="mt-2 text-sm font-semibold text-neutral-900">
             {tn("supplier")}
           </p>
-          <h1 className="mt-1 text-2xl font-normal leading-tight tracking-tight text-neutral-700 sm:text-3xl lg:text-4xl">
+          <h1 className="mt-1 text-2xl font-semibold leading-tight tracking-tight text-neutral-900 sm:text-3xl lg:text-4xl">
             {tp(`${slug}.name`)}
           </h1>
           <p className="mt-4 text-base leading-relaxed text-neutral-600">
@@ -95,8 +95,8 @@ export default async function ProductPage({ params }: Props) {
             <ProductAddToCart product={product} />
           </div>
 
-          <div className="mt-8 rounded-2xl border border-neutral-200 bg-neutral-50/80 p-5">
-            <h2 className="text-xs font-semibold uppercase tracking-wider text-neutral-500">
+          <div className="mt-8 rounded-lg border border-neutral-100 bg-neutral-50/80 p-5">
+            <h2 className="text-[11px] font-semibold uppercase tracking-widest text-neutral-400">
               {t("details")}
             </h2>
             <p className="mt-2 text-sm leading-relaxed text-neutral-600">
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index efce0b4..a8f23c3 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -11,7 +11,7 @@ const dmSans = DM_Sans({
 export default function RootLayout({ children }: { children: ReactNode }) {
   return (
     <html lang="en" className={dmSans.variable} suppressHydrationWarning>
-      <body className="min-h-screen bg-stone-50 font-sans text-stone-900 antialiased">
+      <body className="min-h-screen bg-neutral-50 font-sans text-neutral-900 antialiased">
         {children}
       </body>
     </html>
diff --git a/src/components/CartBadge.tsx b/src/components/CartBadge.tsx
index 065f1e2..be85c3e 100644
--- a/src/components/CartBadge.tsx
+++ b/src/components/CartBadge.tsx
@@ -9,7 +9,7 @@ export function CartBadge() {
 
   if (count === 0) return null;
   return (
-    <span className="absolute -right-1.5 -top-1.5 flex h-5 min-w-5 items-center justify-center rounded-full bg-orange-500 px-1 text-[10px] font-bold text-white shadow-sm">
+    <span className="absolute -right-1.5 -top-1.5 flex h-5 min-w-5 items-center justify-center rounded-full bg-neutral-900 px-1 text-[10px] font-semibold text-white">
       {count > 99 ? "99+" : count}
     </span>
   );
diff --git a/src/components/CartCheckoutLink.tsx b/src/components/CartCheckoutLink.tsx
index 5dd2a27..b496854 100644
--- a/src/components/CartCheckoutLink.tsx
+++ b/src/components/CartCheckoutLink.tsx
@@ -12,7 +12,7 @@ export function CartCheckoutLink() {
     <div className="mt-8 flex justify-end">
       <Link
         href="/checkout"
-        className="inline-flex rounded-xl bg-orange-500 px-6 py-3 text-sm font-bold text-white shadow-sm hover:bg-orange-600"
+        className="inline-flex rounded-lg bg-neutral-900 px-6 py-3 text-sm font-semibold text-white transition hover:bg-neutral-800"
       >
         {t("checkout")}
       </Link>
diff --git a/src/components/CartView.tsx b/src/components/CartView.tsx
index 0f9b3eb..2cead73 100644
--- a/src/components/CartView.tsx
+++ b/src/components/CartView.tsx
@@ -17,11 +17,11 @@ export function CartView() {
 
   if (items.length === 0) {
     return (
-      <div className="mx-auto max-w-lg rounded-2xl bg-white p-10 text-center shadow-sm ring-1 ring-stone-200/80">
-        <p className="text-stone-600">{t("empty")}</p>
+      <div className="mx-auto max-w-lg rounded-lg border border-neutral-100 bg-white p-10 text-center">
+        <p className="text-neutral-600">{t("empty")}</p>
         <Link
           href="/catalog"
-          className="mt-6 inline-flex rounded-xl bg-blue-600 px-5 py-3 text-sm font-semibold text-white hover:bg-blue-700"
+          className="mt-6 inline-flex rounded-lg bg-neutral-900 px-5 py-3 text-sm font-semibold text-white transition hover:bg-neutral-800"
         >
           {t("emptyCta")}
         </Link>
@@ -79,13 +79,13 @@ function CartLineRow({
   const lineTotal = price * line.quantity;
 
   return (
-    <li className="flex flex-col gap-4 rounded-2xl bg-white p-4 shadow-sm ring-1 ring-stone-200/80 sm:flex-row sm:items-center sm:justify-between">
+    <li className="flex flex-col gap-4 rounded-lg border border-neutral-100 bg-white p-4 sm:flex-row sm:items-center sm:justify-between">
       <div className="min-w-0 flex-1">
-        <p className="font-semibold text-stone-900">{name}</p>
+        <p className="font-semibold text-neutral-900">{name}</p>
         {sub ? (
-          <p className="mt-1 text-sm text-stone-500">{sub}</p>
+          <p className="mt-1 text-sm text-neutral-500">{sub}</p>
         ) : null}
-        <p className="mt-2 text-sm text-stone-600">
+        <p className="mt-2 text-sm text-neutral-600">
           {price.toFixed(2)}{" "}
           {product ? tu(product.unitKey) : ""} {t("each")}
         </p>
@@ -103,9 +103,9 @@ function CartLineRow({
           onChange={(e) =>
             updateQuantity(line.lineId, Number(e.target.value) || 1)
           }
-          className="w-20 rounded-lg border border-stone-200 px-2 py-1.5 text-sm font-semibold"
+          className="w-20 rounded-lg border border-neutral-200 bg-neutral-50 px-2 py-1.5 text-sm font-semibold outline-none transition duration-150 focus:border-neutral-300 focus:bg-white focus:ring-2 focus:ring-neutral-900/8"
         />
-        <p className="text-sm font-bold text-orange-500">
+        <p className="text-sm font-semibold text-neutral-900">
           {lineTotal.toFixed(2)}
         </p>
         <button
diff --git a/src/components/CatalogExplorer.tsx b/src/components/CatalogExplorer.tsx
index 3a42dfe..325e615 100644
--- a/src/components/CatalogExplorer.tsx
+++ b/src/components/CatalogExplorer.tsx
@@ -97,7 +97,7 @@ export function CatalogExplorer({
   const filterPanel = (
     <div className="space-y-6">
       <div>
-        <p className="text-xs font-semibold uppercase tracking-wider text-neutral-500">
+        <p className="text-[11px] font-semibold uppercase tracking-widest text-neutral-400">
           {t("filterCategory")}
         </p>
         <ul className="mt-3 space-y-1">
@@ -109,10 +109,10 @@ export function CatalogExplorer({
                   setCat(c);
                   setFiltersOpen(false);
                 }}
-                className={`flex w-full rounded-xl px-3 py-2 text-left text-sm font-medium transition ${
+                className={`flex w-full rounded-lg px-3 py-2 text-left text-sm font-medium transition ${
                   cat === c
-                    ? "bg-blue-600 text-white"
-                    : "text-neutral-700 hover:bg-neutral-100"
+                    ? "bg-neutral-900 text-white"
+                    : "text-neutral-500 hover:bg-neutral-50 hover:text-neutral-900"
                 }`}
               >
                 {c === "all" ? t("all") : tc(c)}
@@ -123,13 +123,13 @@ export function CatalogExplorer({
       </div>
 
       <div>
-        <p className="text-xs font-semibold uppercase tracking-wider text-neutral-500">
+        <p className="text-[11px] font-semibold uppercase tracking-widest text-neutral-400">
           {t("filterSort")}
         </p>
         <select
           value={sort}
           onChange={(e) => setSort(e.target.value as SortKey)}
-          className="mt-3 w-full rounded-xl border border-neutral-200 bg-white px-3 py-2.5 text-sm font-medium text-neutral-900 outline-none focus:border-blue-600 focus:ring-2 focus:ring-blue-600/20"
+          className="mt-3 w-full rounded-lg border border-neutral-200 bg-neutral-50 px-3 py-2.5 text-sm font-medium text-neutral-900 outline-none transition duration-150 focus:border-neutral-300 focus:bg-white focus:ring-2 focus:ring-neutral-900/8"
         >
           <option value="name-asc">{t("sortNameAsc")}</option>
           <option value="name-desc">{t("sortNameDesc")}</option>
@@ -138,7 +138,7 @@ export function CatalogExplorer({
         </select>
       </div>
 
-      <div className="rounded-2xl border border-neutral-200 bg-neutral-50/80 p-4">
+      <div className="rounded-lg border border-neutral-100 bg-neutral-50/80 p-4">
         <div className="flex items-center justify-between gap-3">
           <span className="text-sm font-medium text-neutral-800">
             {t("galvToggle")}
@@ -150,11 +150,11 @@ export function CatalogExplorer({
             aria-label={t("galvToggle")}
             onClick={() => setPreferGalv((v) => !v)}
             className={`relative h-7 w-12 shrink-0 rounded-full transition-colors ${
-              preferGalv ? "bg-blue-600" : "bg-neutral-300"
+              preferGalv ? "bg-neutral-900" : "bg-neutral-300"
             }`}
           >
             <span
-              className={`absolute top-1 h-5 w-5 rounded-full bg-white shadow transition-all ${
+              className={`absolute top-1 h-5 w-5 rounded-full bg-white transition-all ${
                 preferGalv ? "left-[calc(100%-1.25rem-0.25rem)]" : "left-1"
               }`}
             />
@@ -165,7 +165,7 @@ export function CatalogExplorer({
         </p>
       </div>
 
-      <div className="rounded-2xl border border-neutral-200 bg-white p-4">
+      <div className="rounded-lg border border-neutral-100 bg-white p-4">
         <p className="text-sm font-semibold text-neutral-900">{t("sidebarDocs")}</p>
         <p className="mt-2 text-xs leading-relaxed text-neutral-600">
           {t("sidebarDocsBody")}
@@ -195,7 +195,7 @@ export function CatalogExplorer({
             value={search}
             onChange={(e) => setSearch(e.target.value)}
             placeholder={tn("searchPlaceholder")}
-            className="w-full rounded-full border border-neutral-200 bg-white py-3 pl-11 pr-4 text-sm text-neutral-900 shadow-sm outline-none focus:border-blue-600 focus:ring-2 focus:ring-blue-600/20"
+            className="w-full rounded-lg border border-neutral-200 bg-neutral-50 py-3 pl-11 pr-4 text-sm text-neutral-900 outline-none transition duration-150 placeholder:text-neutral-400 focus:border-neutral-300 focus:bg-white focus:ring-2 focus:ring-neutral-900/8"
           />
           <span className="pointer-events-none absolute left-3.5 top-1/2 -translate-y-1/2 text-neutral-400">
             <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.75}>
@@ -207,7 +207,7 @@ export function CatalogExplorer({
         <div className="mt-8 flex flex-wrap items-center gap-3">
           <button
             type="button"
-            className="inline-flex items-center gap-2 rounded-full border border-neutral-300 bg-white px-4 py-2.5 text-sm font-semibold text-neutral-800 shadow-sm lg:hidden"
+            className="inline-flex items-center gap-2 rounded-lg border border-neutral-200 bg-white px-4 py-2.5 text-sm font-semibold text-neutral-800 transition hover:border-neutral-300 lg:hidden"
             onClick={() => setFiltersOpen(true)}
           >
             <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
@@ -222,10 +222,10 @@ export function CatalogExplorer({
                 key={c}
                 type="button"
                 onClick={() => setCat(c)}
-                className={`shrink-0 rounded-full px-4 py-2 text-sm font-semibold transition ${
+                className={`shrink-0 rounded-md px-4 py-2 text-sm font-semibold transition ${
                   cat === c
-                    ? "bg-blue-600 text-white shadow-sm"
-                    : "bg-white text-neutral-700 ring-1 ring-neutral-200 hover:bg-neutral-100"
+                    ? "bg-neutral-900 text-white"
+                    : "border border-neutral-200 bg-white text-neutral-500 hover:border-neutral-300 hover:text-neutral-900"
                 }`}
               >
                 {c === "all" ? t("allShort") : tc(c)}
@@ -241,7 +241,7 @@ export function CatalogExplorer({
               id="catalog-sort"
               value={sort}
               onChange={(e) => setSort(e.target.value as SortKey)}
-              className="rounded-full border border-neutral-200 bg-white py-2 pl-3 pr-8 text-sm font-medium text-neutral-900 outline-none focus:border-blue-600 focus:ring-2 focus:ring-blue-600/20"
+              className="rounded-lg border border-neutral-200 bg-neutral-50 py-2 pl-3 pr-8 text-sm font-medium text-neutral-900 outline-none transition duration-150 focus:border-neutral-300 focus:bg-white focus:ring-2 focus:ring-neutral-900/8"
             >
               <option value="name-asc">{t("sortNameAsc")}</option>
               <option value="name-desc">{t("sortNameDesc")}</option>
@@ -264,19 +264,19 @@ export function CatalogExplorer({
                     <article className="group flex h-full flex-col">
                       <Link
                         href={`/product/${p.slug}`}
-                        className="group relative block overflow-hidden rounded-2xl ring-1 ring-neutral-200/80"
+                        className="group relative block overflow-hidden rounded-lg border border-neutral-100"
                       >
                         <div className="relative aspect-square">
                           <MetalProfileVisual
                             src={p.gallery[0]}
                             alt={tp(`${p.slug}.imageAlt`)}
-                            className="h-full w-full rounded-2xl"
+                            className="h-full w-full rounded-lg"
                           />
                         </div>
                       </Link>
 
-                      <div className="mt-3 px-0.5">
-                        <p className="text-[10px] font-bold uppercase tracking-wider text-neutral-500">
+                      <div className="mt-4 px-0.5">
+                        <p className="text-[11px] font-semibold uppercase tracking-widest text-neutral-400">
                           {t("thicknessLabel")}
                         </p>
                         <div
@@ -288,7 +288,7 @@ export function CatalogExplorer({
                             <span
                               key={`${p.slug}-${mm}`}
                               role="listitem"
-                              className="inline-flex rounded-full bg-neutral-100 px-2.5 py-1 text-xs font-semibold tabular-nums text-neutral-800 ring-1 ring-neutral-200/90"
+                              className="inline-flex rounded-md border border-neutral-200 bg-neutral-50 px-2.5 py-1 text-xs font-semibold tabular-nums text-neutral-800"
                             >
                               {t("thicknessValue", {
                                 value: formatThicknessMm(mm),
@@ -298,7 +298,7 @@ export function CatalogExplorer({
                         </div>
                       </div>
 
-                      <p className="mt-3 text-[10px] font-semibold uppercase tracking-[0.14em] text-neutral-500">
+                      <p className="mt-3 text-[11px] font-semibold uppercase tracking-widest text-neutral-400">
                         {tcl(p.catalogLineKey)}
                       </p>
                       <p className="mt-1 text-sm font-semibold text-neutral-900">
@@ -307,14 +307,14 @@ export function CatalogExplorer({
                       <h2 className="mt-0.5 text-sm font-normal leading-snug text-neutral-600">
                         <Link
                           href={`/product/${p.slug}`}
-                          className="hover:text-blue-600"
+                          className="transition hover:text-neutral-900"
                         >
                           {tp(`${p.slug}.name`)}
                         </Link>
                       </h2>
 
                       <p className="mt-3 text-sm text-neutral-500">
-                        <span className="text-[11px] font-semibold uppercase tracking-wide">
+                        <span className="text-[11px] font-semibold uppercase tracking-widest">
                           {t("from")}
                         </span>{" "}
                         <span className="text-base font-semibold text-neutral-900">
@@ -325,7 +325,7 @@ export function CatalogExplorer({
 
                       <Link
                         href={`/product/${p.slug}`}
-                        className="mt-4 w-full rounded-full border border-neutral-300 bg-white py-2.5 text-center text-sm font-semibold text-neutral-900 transition hover:border-blue-600 hover:bg-blue-600 hover:text-white"
+                        className="mt-4 w-full rounded-lg bg-neutral-900 py-2.5 text-center text-sm font-semibold text-white transition hover:bg-neutral-800"
                       >
                         {t("addToCart")}
                       </Link>
@@ -346,12 +346,12 @@ export function CatalogExplorer({
             aria-label={t("closeFilters")}
             onClick={() => setFiltersOpen(false)}
           />
-          <div className="fixed inset-y-0 left-0 z-[60] w-[min(22rem,100vw)] overflow-y-auto border-r border-neutral-200 bg-white p-6 shadow-2xl lg:hidden">
+          <div className="fixed inset-y-0 left-0 z-[60] w-[min(22rem,100vw)] overflow-y-auto border-r border-neutral-100 bg-white p-6 lg:hidden">
             <div className="mb-6 flex items-center justify-between">
               <p className="text-lg font-semibold text-neutral-900">{t("filters")}</p>
               <button
                 type="button"
-                className="rounded-full p-2 text-neutral-500 hover:bg-neutral-100"
+                className="rounded-lg p-2 text-neutral-500 transition hover:bg-neutral-50 hover:text-neutral-900"
                 onClick={() => setFiltersOpen(false)}
               >
                 <span className="sr-only">{t("closeFilters")}</span>
diff --git a/src/components/CheckoutForm.tsx b/src/components/CheckoutForm.tsx
index ce35198..8ba9a4b 100644
--- a/src/components/CheckoutForm.tsx
+++ b/src/components/CheckoutForm.tsx
@@ -18,6 +18,9 @@ const formSchema = z.object({
 
 type FormValues = z.infer<typeof formSchema>;
 
+const inputClass =
+  "mt-1 w-full rounded-lg border border-neutral-200 bg-neutral-50 px-3 py-2.5 text-sm text-neutral-900 outline-none transition duration-150 placeholder:text-neutral-400 focus:border-neutral-300 focus:bg-white focus:ring-2 focus:ring-neutral-900/8";
+
 export function CheckoutForm() {
   const t = useTranslations("checkout");
   const items = useCartStore((s) => s.items);
@@ -43,11 +46,11 @@ export function CheckoutForm() {
 
   if (items.length === 0 && status !== "success") {
     return (
-      <div className="rounded-2xl bg-white p-8 text-center shadow-sm ring-1 ring-stone-200/80">
-        <p className="text-stone-600">{t("cartEmpty")}</p>
+      <div className="rounded-lg border border-neutral-100 bg-white p-8 text-center">
+        <p className="text-neutral-600">{t("cartEmpty")}</p>
         <Link
           href="/cart"
-          className="mt-4 inline-flex rounded-xl bg-blue-600 px-5 py-3 text-sm font-semibold text-white hover:bg-blue-700"
+          className="mt-4 inline-flex rounded-lg bg-neutral-900 px-5 py-3 text-sm font-semibold text-white transition hover:bg-neutral-800"
         >
           {t("goCart")}
         </Link>
@@ -57,22 +60,22 @@ export function CheckoutForm() {
 
   if (status === "success" && requestId) {
     return (
-      <div className="rounded-2xl bg-white p-8 shadow-sm ring-1 ring-emerald-200/80">
-        <h2 className="text-xl font-bold text-emerald-800">{t("successTitle")}</h2>
-        <p className="mt-2 text-sm text-stone-600">
+      <div className="rounded-lg border border-neutral-100 bg-white p-8">
+        <h2 className="text-xl font-semibold text-green-800">{t("successTitle")}</h2>
+        <p className="mt-2 text-sm text-neutral-600">
           {t("successBody")}{" "}
-          <span className="font-mono font-semibold text-stone-900">
+          <span className="font-mono font-semibold text-neutral-900">
             {requestId}
           </span>
         </p>
         {emailWarn ? (
-          <p className="mt-4 rounded-xl bg-amber-50 p-3 text-sm text-amber-900 ring-1 ring-amber-200">
+          <p className="mt-4 rounded-lg border border-amber-200 bg-amber-50 p-3 text-sm text-amber-900">
             {t("emailWarn")}
           </p>
         ) : null}
         <Link
           href="/catalog"
-          className="mt-6 inline-flex rounded-xl bg-blue-600 px-5 py-3 text-sm font-semibold text-white hover:bg-blue-700"
+          className="mt-6 inline-flex rounded-lg bg-neutral-900 px-5 py-3 text-sm font-semibold text-white transition hover:bg-neutral-800"
         >
           {t("successCta")}
         </Link>
@@ -144,7 +147,7 @@ export function CheckoutForm() {
   return (
     <form
       onSubmit={onFormSubmit}
-      className="space-y-6 rounded-2xl bg-white p-6 shadow-sm ring-1 ring-stone-200/80 sm:p-8"
+      className="space-y-6 rounded-lg border border-neutral-100 bg-white p-6 sm:p-8"
     >
       <input
         type="text"
@@ -157,12 +160,12 @@ export function CheckoutForm() {
 
       <div className="grid gap-4 sm:grid-cols-2">
         <div>
-          <label className="text-sm font-medium text-stone-700" htmlFor="name">
+          <label className="text-sm font-medium text-neutral-700" htmlFor="name">
             {t("name")}
           </label>
           <input
             id="name"
-            className="mt-1 w-full rounded-xl border border-stone-200 px-3 py-2.5 text-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/25"
+            className={inputClass}
             {...register("name")}
           />
           {errors.name ? (
@@ -170,12 +173,12 @@ export function CheckoutForm() {
           ) : null}
         </div>
         <div>
-          <label className="text-sm font-medium text-stone-700" htmlFor="phone">
+          <label className="text-sm font-medium text-neutral-700" htmlFor="phone">
             {t("phone")}
           </label>
           <input
             id="phone"
-            className="mt-1 w-full rounded-xl border border-stone-200 px-3 py-2.5 text-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/25"
+            className={inputClass}
             {...register("phone")}
           />
           {errors.phone ? (
@@ -185,13 +188,13 @@ export function CheckoutForm() {
       </div>
 
       <div>
-        <label className="text-sm font-medium text-stone-700" htmlFor="email">
+        <label className="text-sm font-medium text-neutral-700" htmlFor="email">
           {t("email")}
         </label>
         <input
           id="email"
           type="email"
-          className="mt-1 w-full rounded-xl border border-stone-200 px-3 py-2.5 text-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/25"
+          className={inputClass}
           {...register("email")}
         />
         {errors.email ? (
@@ -200,30 +203,30 @@ export function CheckoutForm() {
       </div>
 
       <div>
-        <label className="text-sm font-medium text-stone-700" htmlFor="company">
+        <label className="text-sm font-medium text-neutral-700" htmlFor="company">
           {t("company")}
         </label>
         <input
           id="company"
-          className="mt-1 w-full rounded-xl border border-stone-200 px-3 py-2.5 text-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/25"
+          className={inputClass}
           {...register("company")}
         />
       </div>
 
       <div>
-        <label className="text-sm font-medium text-stone-700" htmlFor="message">
+        <label className="text-sm font-medium text-neutral-700" htmlFor="message">
           {t("message")}
         </label>
         <textarea
           id="message"
           rows={4}
-          className="mt-1 w-full rounded-xl border border-stone-200 px-3 py-2.5 text-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/25"
+          className={inputClass}
           {...register("message")}
         />
       </div>
 
       <div>
-        <label className="text-sm font-medium text-stone-700" htmlFor="refs">
+        <label className="text-sm font-medium text-neutral-700" htmlFor="refs">
           {t("referenceImages")}
         </label>
         <input
@@ -233,13 +236,13 @@ export function CheckoutForm() {
           name="referenceImages"
           accept="image/jpeg,image/png,image/webp"
           multiple
-          className="mt-1 block w-full text-sm text-stone-600 file:mr-3 file:rounded-lg file:border-0 file:bg-blue-50 file:px-3 file:py-2 file:text-sm file:font-semibold file:text-blue-700 hover:file:bg-blue-100"
+          className="mt-1 block w-full text-sm text-neutral-600 file:mr-3 file:rounded-lg file:border-0 file:bg-neutral-100 file:px-3 file:py-2 file:text-sm file:font-semibold file:text-neutral-700 hover:file:bg-neutral-200"
         />
-        <p className="mt-1 text-xs text-stone-500">{t("referenceHelp")}</p>
+        <p className="mt-1 text-xs text-neutral-500">{t("referenceHelp")}</p>
       </div>
 
       <div>
-        <label className="text-sm font-medium text-stone-700" htmlFor="proforma">
+        <label className="text-sm font-medium text-neutral-700" htmlFor="proforma">
           {t("proforma")}
         </label>
         <input
@@ -248,13 +251,13 @@ export function CheckoutForm() {
           type="file"
           name="proforma"
           accept="application/pdf,image/jpeg,image/png,image/webp"
-          className="mt-1 block w-full text-sm text-stone-600 file:mr-3 file:rounded-lg file:border-0 file:bg-orange-50 file:px-3 file:py-2 file:text-sm file:font-semibold file:text-orange-700 hover:file:bg-orange-100"
+          className="mt-1 block w-full text-sm text-neutral-600 file:mr-3 file:rounded-lg file:border-0 file:bg-neutral-100 file:px-3 file:py-2 file:text-sm file:font-semibold file:text-neutral-700 hover:file:bg-neutral-200"
         />
-        <p className="mt-1 text-xs text-stone-500">{t("proformaHelp")}</p>
+        <p className="mt-1 text-xs text-neutral-500">{t("proformaHelp")}</p>
       </div>
 
       {errorMsg ? (
-        <p className="rounded-xl bg-red-50 p-3 text-sm text-red-800 ring-1 ring-red-200">
+        <p className="rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-800">
           {errorMsg}
         </p>
       ) : null}
@@ -262,7 +265,7 @@ export function CheckoutForm() {
       <button
         type="submit"
         disabled={status === "sending"}
-        className="w-full rounded-xl bg-orange-500 py-3.5 text-sm font-bold text-white shadow-sm hover:bg-orange-600 disabled:cursor-not-allowed disabled:opacity-60 sm:w-auto sm:px-10"
+        className="w-full rounded-lg bg-neutral-900 py-3.5 text-sm font-semibold text-white transition hover:bg-neutral-800 disabled:cursor-not-allowed disabled:opacity-60 sm:w-auto sm:px-10"
       >
         {status === "sending" ? t("sending") : t("submit")}
       </button>
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 3561dca..dcdb968 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,4 +1,5 @@
 import { getTranslations } from "next-intl/server";
+import { Link } from "@/i18n/navigation";
 import {
   getPublicSocialLinks,
   publicContactAddress,
@@ -15,7 +16,7 @@ function SocialGlyph({
   name: "linkedin" | "facebook" | "telegram" | "instagram";
   className?: string;
 }) {
-  const c = className ?? "h-5 w-5";
+  const c = className ?? "h-4 w-4";
   switch (name) {
     case "linkedin":
       return (
@@ -48,69 +49,105 @@ function SocialGlyph({
 
 export async function Footer() {
   const t = await getTranslations("footer");
+  const tn = await getTranslations("nav");
   const year = new Date().getFullYear();
   const socials = getPublicSocialLinks();
 
   return (
-    <footer className="mt-16 border-t border-stone-200/80 bg-white">
-      <div className="mx-auto max-w-6xl px-4 py-12 sm:px-6 lg:px-8">
-        <div className="grid gap-10 sm:grid-cols-2 lg:grid-cols-3 lg:gap-12">
-          <div>
-            <h2 className="text-lg font-bold tracking-tight text-blue-600">
-              TrustWin
-            </h2>
-            <p className="mt-3 max-w-sm text-sm leading-relaxed text-stone-600">
+    <footer className="border-t border-neutral-100 bg-white">
+      <div className="mx-auto max-w-6xl px-4 py-14 sm:px-6 lg:px-8">
+        <div className="grid gap-12 sm:grid-cols-2 lg:grid-cols-4">
+
+          {/* Brand column */}
+          <div className="space-y-4">
+            <div className="flex items-center gap-2">
+              <span className="flex h-8 w-8 items-center justify-center rounded-lg bg-neutral-900 text-white">
+                <svg width="14" height="14" viewBox="0 0 32 32" fill="none" aria-hidden>
+                  <path d="M6 24 16 6l10 18H6Z" stroke="currentColor" strokeWidth="2.5" strokeLinejoin="round" />
+                </svg>
+              </span>
+              <span className="text-[15px] font-semibold tracking-tight text-neutral-900">
+                TrustWin
+              </span>
+            </div>
+            <p className="max-w-xs text-sm leading-relaxed text-neutral-500">
               {t("tagline")}
             </p>
           </div>
 
-          <div>
-            <h3 className="text-xs font-semibold uppercase tracking-wider text-stone-500">
+          {/* Links column */}
+          <div className="space-y-4">
+            <p className="text-[11px] font-semibold uppercase tracking-widest text-neutral-400">
+              {tn("catalog")}
+            </p>
+            <ul className="space-y-2.5 text-sm">
+              <li>
+                <Link href="/" className="text-neutral-500 transition hover:text-neutral-900">
+                  {tn("home")}
+                </Link>
+              </li>
+              <li>
+                <Link href="/catalog" className="text-neutral-500 transition hover:text-neutral-900">
+                  {tn("products")}
+                </Link>
+              </li>
+              <li>
+                <Link href="/cart" className="text-neutral-500 transition hover:text-neutral-900">
+                  {tn("cart")}
+                </Link>
+              </li>
+            </ul>
+          </div>
+
+          {/* Contact column */}
+          <div className="space-y-4">
+            <p className="text-[11px] font-semibold uppercase tracking-widest text-neutral-400">
               {t("contactTitle")}
-            </h3>
-            <ul className="mt-4 space-y-3 text-sm">
+            </p>
+            <ul className="space-y-2.5 text-sm">
               <li>
                 <a
                   href={telHref(publicContactPhone)}
-                  className="font-medium text-stone-900 transition hover:text-blue-600"
+                  className="font-medium text-neutral-800 transition-colors hover:text-neutral-500"
                 >
                   {publicContactPhone}
                 </a>
               </li>
-              {publicContactEmail ? (
+              {publicContactEmail && (
                 <li>
                   <a
                     href={`mailto:${publicContactEmail}`}
-                    className="text-stone-700 underline-offset-2 transition hover:text-blue-600 hover:underline"
+                    className="text-neutral-500 underline underline-offset-2 decoration-neutral-300 transition-colors hover:text-neutral-800 hover:decoration-neutral-500"
                   >
                     {publicContactEmail}
                   </a>
                 </li>
-              ) : null}
-              {publicContactAddress ? (
-                <li className="whitespace-pre-line text-stone-600">
+              )}
+              {publicContactAddress && (
+                <li className="whitespace-pre-line text-neutral-500">
                   {publicContactAddress}
                 </li>
-              ) : null}
-              {publicContactHours ? (
-                <li className="text-stone-600">{publicContactHours}</li>
-              ) : null}
+              )}
+              {publicContactHours && (
+                <li className="text-neutral-500">{publicContactHours}</li>
+              )}
             </ul>
           </div>
 
-          <div className="sm:col-span-2 lg:col-span-1">
-            <h3 className="text-xs font-semibold uppercase tracking-wider text-stone-500">
+          {/* Social column */}
+          <div className="flex flex-col items-center space-y-4 sm:col-span-2 lg:col-span-1 lg:items-center">
+            <p className="text-[11px] font-semibold uppercase tracking-widest text-neutral-400">
               {t("socialTitle")}
-            </h3>
+            </p>
             {socials.length > 0 ? (
-              <ul className="mt-4 flex flex-wrap gap-3">
+              <ul className="flex flex-wrap justify-center gap-2">
                 {socials.map(({ key, href }) => (
                   <li key={key}>
                     <a
                       href={href}
                       target="_blank"
                       rel="noopener noreferrer"
-                      className="flex h-11 w-11 items-center justify-center rounded-xl bg-stone-50 text-stone-600 shadow-sm ring-1 ring-stone-200/90 transition hover:bg-blue-600 hover:text-white hover:ring-blue-600"
+                      className="flex h-9 w-9 items-center justify-center rounded-lg border border-neutral-200 bg-white text-neutral-500 transition hover:border-neutral-900 hover:bg-neutral-900 hover:text-white"
                       aria-label={t(`social.${key}`)}
                     >
                       <SocialGlyph name={key} />
@@ -119,19 +156,20 @@ export async function Footer() {
                 ))}
               </ul>
             ) : (
-              <p className="mt-4 max-w-xs text-sm leading-relaxed text-stone-500">
+              <p className="max-w-xs text-center text-sm leading-relaxed text-neutral-400">
                 {t("socialHint")}
               </p>
             )}
           </div>
         </div>
 
-        <div className="mt-10 border-t border-stone-200/80 pt-8">
-          <p className="text-center text-xs text-stone-500 sm:text-left">
+        {/* Bottom bar */}
+        <div className="mt-14 flex flex-col items-center justify-center gap-3 border-t border-neutral-100 pt-8 sm:flex-row">
+          <p className="text-xs font-semibold text-black-300">
             © {year} TrustWin. {t("rights")}
           </p>
         </div>
       </div>
     </footer>
   );
-}
+}
\ No newline at end of file
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index ce08c19..e140812 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -11,100 +11,104 @@ export function Header() {
   const t = useTranslations("nav");
   const [open, setOpen] = useState(false);
 
+  const navLinkClass =
+    "relative text-sm font-medium text-neutral-500 transition-colors duration-150 hover:text-neutral-900 after:absolute after:-bottom-0.5 after:left-0 after:h-px after:w-0 after:bg-neutral-900 after:transition-all after:duration-200 hover:after:w-full";
+
   const mobileLinks = (
     <>
       <Link
         href="/"
-        className="rounded-full px-4 py-3 text-sm font-medium text-neutral-800 hover:bg-neutral-100"
+        className="rounded-lg px-3 py-2.5 text-sm font-medium text-neutral-700 transition hover:bg-neutral-50 hover:text-neutral-900"
         onClick={() => setOpen(false)}
       >
         {t("home")}
       </Link>
       <Link
         href="/catalog"
-        className="rounded-full px-4 py-3 text-sm font-medium text-neutral-800 hover:bg-neutral-100"
+        className="rounded-lg px-3 py-2.5 text-sm font-medium text-neutral-700 transition hover:bg-neutral-50 hover:text-neutral-900"
         onClick={() => setOpen(false)}
       >
         {t("catalog")}
       </Link>
       <Link
         href="/cart"
-        className="rounded-full px-4 py-3 text-sm font-medium text-neutral-800 hover:bg-neutral-100"
+        className="rounded-lg px-3 py-2.5 text-sm font-medium text-neutral-700 transition hover:bg-neutral-50 hover:text-neutral-900"
         onClick={() => setOpen(false)}
       >
         {t("cart")}
       </Link>
-      <Link
-        href="/checkout"
-        className="mx-2 mt-2 rounded-full bg-blue-600 px-4 py-3 text-center text-sm font-semibold text-white"
-        onClick={() => setOpen(false)}
-      >
-        {t("joinCta")}
-      </Link>
+      <div className="pt-2">
+        <Link
+          href="/checkout"
+          className="block rounded-lg bg-neutral-900 px-4 py-2.5 text-center text-sm font-semibold text-white transition hover:bg-neutral-800"
+          onClick={() => setOpen(false)}
+        >
+          {t("joinCta")}
+        </Link>
+      </div>
     </>
   );
 
   return (
-    <header className="sticky top-0 z-40 border-b border-neutral-200/90 bg-white/95 backdrop-blur-md">
-      <div className="mx-auto flex max-w-[1440px] items-center gap-3 px-4 py-3 sm:gap-4 lg:px-8">
+    <header className="sticky top-0 z-40 border-b border-neutral-100 bg-white/98 backdrop-blur-sm">
+      <div className="mx-auto flex max-w-[1440px] items-center gap-6 px-4 py-3.5 sm:gap-8 lg:px-8">
+
+        {/* Logo */}
         <Link
           href="/"
-          className="flex shrink-0 items-center gap-2.5 text-neutral-900"
+          className="group flex shrink-0 items-center gap-2 text-neutral-900"
           onClick={() => setOpen(false)}
         >
           <span
-            className="flex h-9 w-9 items-center justify-center rounded-2xl bg-blue-600 text-white shadow-sm"
+            className="flex h-8 w-8 items-center justify-center rounded-lg bg-neutral-900 text-white transition duration-200 group-hover:bg-neutral-700"
             aria-hidden
           >
-            <svg width="20" height="20" viewBox="0 0 32 32" fill="none" className="text-white">
+            <svg width="16" height="16" viewBox="0 0 32 32" fill="none">
               <path
                 d="M6 24 16 6l10 18H6Z"
                 stroke="currentColor"
-                strokeWidth="2.2"
+                strokeWidth="2.5"
                 strokeLinejoin="round"
+                fill="none"
               />
             </svg>
           </span>
-          <span className="hidden text-[17px] font-semibold tracking-tight sm:inline">
+          <span className="hidden text-[15px] font-semibold tracking-tight sm:inline">
             {t("brand")}
           </span>
         </Link>
 
-        <nav
-          className="hidden items-center gap-1 lg:flex"
-          aria-label="Primary"
-        >
-          <Link
-            href="/"
-            className="rounded-full px-3 py-2 text-sm font-medium text-neutral-700 hover:bg-neutral-100 hover:text-neutral-950"
-          >
+        {/* Desktop nav */}
+        <nav className="hidden items-center gap-6 lg:flex" aria-label="Primary">
+          <Link href="/" className={navLinkClass}>
             {t("home")}
           </Link>
-          <Link
-            href="/catalog"
-            className="rounded-full px-3 py-2 text-sm font-medium text-neutral-700 hover:bg-neutral-100 hover:text-neutral-950"
-          >
+          <Link href="/catalog" className={navLinkClass}>
             {t("products")}
           </Link>
         </nav>
 
+        {/* Search */}
         <div className="min-w-0 flex-1">
           <HeaderCatalogSearch />
         </div>
 
-        <div className="flex shrink-0 items-center gap-1.5 sm:gap-2">
+        {/* Right actions */}
+        <div className="flex shrink-0 items-center gap-2">
           <LanguageSwitcher />
+
+          {/* Cart */}
           <Link
             href="/cart"
-            className="relative rounded-full p-2.5 text-neutral-600 transition hover:bg-neutral-100 hover:text-blue-600"
+            className="relative rounded-lg p-2 text-neutral-500 transition hover:bg-neutral-50 hover:text-neutral-900"
             aria-label={t("cart")}
           >
             <svg
-              className="h-6 w-6"
+              className="h-5 w-5"
               fill="none"
               viewBox="0 0 24 24"
               stroke="currentColor"
-              strokeWidth={1.5}
+              strokeWidth={1.6}
               aria-hidden
             >
               <path
@@ -116,27 +120,29 @@ export function Header() {
             <CartBadge />
           </Link>
 
+          {/* CTA */}
           <Link
             href="/checkout"
-            className="hidden rounded-full bg-blue-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:bg-blue-700 sm:inline-flex"
+            className="hidden rounded-lg bg-neutral-900 px-4 py-2 text-sm font-semibold text-white transition hover:bg-neutral-800 sm:inline-flex"
           >
             {t("joinCta")}
           </Link>
 
+          {/* Mobile menu toggle */}
           <button
             type="button"
-            className="rounded-full p-2.5 text-neutral-800 hover:bg-neutral-100 lg:hidden"
+            className="rounded-lg p-2 text-neutral-500 transition hover:bg-neutral-50 hover:text-neutral-900 lg:hidden"
             aria-expanded={open}
             aria-controls="mobile-nav"
             onClick={() => setOpen((v) => !v)}
           >
             <span className="sr-only">{open ? t("closeMenu") : t("openMenu")}</span>
             {open ? (
-              <svg className="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.75}>
+              <svg className="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.75}>
                 <path strokeLinecap="round" d="M6 18 18 6M6 6l12 12" />
               </svg>
             ) : (
-              <svg className="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.75}>
+              <svg className="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.75}>
                 <path strokeLinecap="round" d="M4 7h16M4 12h16M4 17h16" />
               </svg>
             )}
@@ -144,16 +150,17 @@ export function Header() {
         </div>
       </div>
 
-      {open ? (
+      {/* Mobile nav drawer */}
+      {open && (
         <div
           id="mobile-nav"
-          className="border-t border-neutral-200 bg-white px-4 py-4 lg:hidden"
+          className="border-t border-neutral-100 bg-white px-4 pb-4 pt-2 lg:hidden"
         >
-          <nav className="flex flex-col gap-1" aria-label="Mobile">
+          <nav className="flex flex-col gap-0.5" aria-label="Mobile">
             {mobileLinks}
           </nav>
         </div>
-      ) : null}
+      )}
     </header>
   );
-}
+}
\ No newline at end of file
diff --git a/src/components/HeaderCatalogSearch.tsx b/src/components/HeaderCatalogSearch.tsx
index 5c7ca8f..0444722 100644
--- a/src/components/HeaderCatalogSearch.tsx
+++ b/src/components/HeaderCatalogSearch.tsx
@@ -28,12 +28,23 @@ function HeaderCatalogSearchInner() {
   return (
     <form
       onSubmit={onSubmit}
-      className="relative hidden w-full max-w-xl md:block"
+      className="relative hidden w-full max-w-lg md:block"
       role="search"
     >
       <label htmlFor="header-catalog-search" className="sr-only">
         {t("searchAria")}
       </label>
+
+      {/* Search icon */}
+      <span
+        className="pointer-events-none absolute left-3.5 top-1/2 -translate-y-1/2 text-neutral-400"
+        aria-hidden
+      >
+        <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.75}>
+          <path strokeLinecap="round" strokeLinejoin="round" d="m21 21-4.34-4.34M11 18a7 7 0 1 1 0-14 7 7 0 0 1 0 14Z" />
+        </svg>
+      </span>
+
       <input
         id="header-catalog-search"
         type="search"
@@ -41,16 +52,24 @@ function HeaderCatalogSearchInner() {
         value={q}
         onChange={(e) => setQ(e.target.value)}
         placeholder={t("searchPlaceholder")}
-        className="w-full rounded-full border border-neutral-200 bg-neutral-50 py-2.5 pl-11 pr-4 text-sm text-neutral-900 shadow-inner shadow-neutral-200/40 outline-none ring-blue-600/0 transition placeholder:text-neutral-400 focus:border-blue-600 focus:bg-white focus:ring-2 focus:ring-blue-600/20"
+        className="
+          w-full rounded-lg border border-neutral-200 bg-neutral-50 py-2.5 pl-10 pr-10
+          text-sm text-neutral-900 outline-none transition duration-150
+          placeholder:text-neutral-400
+          hover:border-neutral-300 hover:bg-white
+          focus:border-neutral-300 focus:bg-white focus:ring-2 focus:ring-neutral-900/8
+        "
       />
-      <span
-        className="pointer-events-none absolute left-3.5 top-1/2 -translate-y-1/2 text-neutral-400"
-        aria-hidden
-      >
-        <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.75}>
-          <path strokeLinecap="round" strokeLinejoin="round" d="m21 21-4.34-4.34M11 18a7 7 0 1 1 0-14 7 7 0 0 1 0 14Z" />
-        </svg>
-      </span>
+
+      {/* Submit button - visible only when there's input */}
+      {q.trim() && (
+        <button
+          type="submit"
+          className="absolute right-2.5 top-1/2 -translate-y-1/2 rounded-md bg-neutral-900 px-2 py-1 text-[11px] font-semibold text-white transition hover:bg-neutral-700"
+        >
+          ↵
+        </button>
+      )}
     </form>
   );
 }
@@ -60,7 +79,7 @@ export function HeaderCatalogSearch() {
     <Suspense
       fallback={
         <div
-          className="hidden h-10 w-full max-w-xl rounded-full bg-neutral-100 md:block"
+          className="hidden h-[38px] w-full max-w-lg animate-pulse rounded-lg bg-neutral-100 md:block"
           aria-hidden
         />
       }
@@ -68,4 +87,4 @@ export function HeaderCatalogSearch() {
       <HeaderCatalogSearchInner />
     </Suspense>
   );
-}
+}
\ No newline at end of file
diff --git a/src/components/LanguageSwitcher.tsx b/src/components/LanguageSwitcher.tsx
index 6391485..eae7e10 100644
--- a/src/components/LanguageSwitcher.tsx
+++ b/src/components/LanguageSwitcher.tsx
@@ -8,39 +8,29 @@ export function LanguageSwitcher() {
   const pathname = usePathname();
 
   return (
-    <div className="flex items-center gap-1.5 rounded-full border border-neutral-200 bg-white px-1 py-1 shadow-sm">
-      <span className="hidden pl-2 text-neutral-400 sm:inline" aria-hidden>
-        <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.75}>
-          <path strokeLinecap="round" strokeLinejoin="round" d="M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Z" />
-          <path strokeLinecap="round" strokeLinejoin="round" d="M3.6 9h16.8M3.6 15h16.8M12 3a15.3 15.3 0 0 1 4 9 15.3 15.3 0 0 1-4 9 15.3 15.3 0 0 1-4-9 15.3 15.3 0 0 1 4-9Z" />
-        </svg>
-      </span>
-      <div className="flex items-center rounded-full bg-neutral-100 p-0.5 text-[11px] font-semibold text-neutral-600">
-        <Link
-          href={pathname}
-          locale="en"
-          className={`rounded-full px-2 py-1 transition ${
-            locale === "en"
-              ? "bg-white text-blue-600 shadow-sm"
-              : "hover:text-neutral-900"
+    <div className="flex items-center rounded-lg border border-neutral-200 bg-neutral-50 p-0.5">
+      <Link
+        href={pathname}
+        locale="en"
+        className={`rounded-md px-2.5 py-1.5 text-[11px] font-semibold tracking-wide transition-all duration-150 ${locale === "en"
+            ? "bg-white text-neutral-900"
+            : "text-neutral-400 hover:text-neutral-700"
           }`}
-          aria-current={locale === "en" ? "true" : undefined}
-        >
-          EN
-        </Link>
-        <Link
-          href={pathname}
-          locale="am"
-          className={`rounded-full px-2 py-1 transition ${
-            locale === "am"
-              ? "bg-white text-orange-500 shadow-sm"
-              : "hover:text-neutral-900"
+        aria-current={locale === "en" ? "true" : undefined}
+      >
+        EN
+      </Link>
+      <Link
+        href={pathname}
+        locale="am"
+        className={`rounded-md px-2.5 py-1.5 text-[11px] font-semibold tracking-wide transition-all duration-150 ${locale === "am"
+            ? "bg-white text-neutral-900"
+            : "text-neutral-400 hover:text-neutral-700"
           }`}
-          aria-current={locale === "am" ? "true" : undefined}
-        >
-          አማ
-        </Link>
-      </div>
+        aria-current={locale === "am" ? "true" : undefined}
+      >
+        አማ
+      </Link>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/src/components/ProductAddToCart.tsx b/src/components/ProductAddToCart.tsx
index 6e4b5b3..8ec6317 100644
--- a/src/components/ProductAddToCart.tsx
+++ b/src/components/ProductAddToCart.tsx
@@ -40,8 +40,8 @@ export function ProductAddToCart({ product }: { product: Product }) {
   }
 
   return (
-    <div className="rounded-2xl border border-neutral-200 bg-white p-5 shadow-sm">
-      <h2 className="text-xs font-semibold uppercase tracking-wider text-neutral-500">
+    <div className="rounded-lg border border-neutral-100 bg-white p-5">
+      <h2 className="text-[11px] font-semibold uppercase tracking-widest text-neutral-400">
         {t("options")}
       </h2>
       <div className="mt-4 space-y-4">
@@ -51,7 +51,7 @@ export function ProductAddToCart({ product }: { product: Product }) {
               {tv(v.labelKey)}
             </label>
             <select
-              className="mt-1 w-full rounded-xl border border-neutral-200 bg-neutral-50 px-3 py-2.5 text-sm font-medium text-neutral-900 focus:border-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-600/15"
+              className="mt-1 w-full rounded-lg border border-neutral-200 bg-neutral-50 px-3 py-2.5 text-sm font-medium text-neutral-900 outline-none transition duration-150 focus:border-neutral-300 focus:bg-white focus:ring-2 focus:ring-neutral-900/8"
               value={selections[v.key]}
               onChange={(e) =>
                 setSelections((s) => ({ ...s, [v.key]: e.target.value }))
@@ -78,13 +78,13 @@ export function ProductAddToCart({ product }: { product: Product }) {
           max={9999}
           value={qty}
           onChange={(e) => setQty(Math.max(1, Number(e.target.value) || 1))}
-          className="mt-2 w-full rounded-full border border-neutral-200 bg-white px-4 py-2.5 text-sm font-semibold focus:border-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-600/15"
+          className="mt-2 w-full rounded-lg border border-neutral-200 bg-neutral-50 px-4 py-2.5 text-sm font-semibold outline-none transition duration-150 focus:border-neutral-300 focus:bg-white focus:ring-2 focus:ring-neutral-900/8"
         />
         <button
           type="button"
           onClick={handleAdd}
           disabled={!canSubmit}
-          className="mt-4 w-full rounded-full border border-neutral-300 bg-neutral-900 py-3 text-sm font-semibold text-white transition hover:border-blue-600 hover:bg-blue-600 disabled:cursor-not-allowed disabled:opacity-40"
+          className="mt-4 w-full rounded-lg bg-neutral-900 py-3 text-sm font-semibold text-white transition hover:bg-neutral-800 disabled:cursor-not-allowed disabled:opacity-40"
         >
           {added ? `✓ ${t("add")}` : t("add")}
         </button>
diff --git a/src/components/ProductGallery.tsx b/src/components/ProductGallery.tsx
index cebcc07..03597e5 100644
--- a/src/components/ProductGallery.tsx
+++ b/src/components/ProductGallery.tsx
@@ -51,7 +51,7 @@ export function ProductGallery({ slug, sources }: Props) {
   if (n === 0) {
     return (
       <div
-        className="flex aspect-square items-center justify-center rounded-2xl bg-neutral-100 text-sm text-neutral-500 ring-1 ring-neutral-200/90"
+        className="flex aspect-square items-center justify-center rounded-lg border border-neutral-200 bg-neutral-100 text-sm text-neutral-500"
         role="img"
         aria-label={alt}
       >
@@ -67,7 +67,7 @@ export function ProductGallery({ slug, sources }: Props) {
   return (
     <div className="space-y-3">
       <div
-        className="relative aspect-square overflow-hidden rounded-2xl bg-neutral-100 ring-1 ring-neutral-200/90"
+        className="relative aspect-square overflow-hidden rounded-lg border border-neutral-200 bg-neutral-100"
         onTouchStart={(e) => {
           touchStartX.current = e.touches[0]?.clientX ?? null;
         }}
@@ -99,7 +99,7 @@ export function ProductGallery({ slug, sources }: Props) {
             <button
               type="button"
               onClick={() => go(-1)}
-              className="absolute left-2 top-1/2 z-10 flex h-10 w-10 -translate-y-1/2 items-center justify-center rounded-full bg-white/90 text-neutral-800 shadow-md ring-1 ring-neutral-200/80 backdrop-blur-sm transition hover:bg-white"
+              className="absolute left-2 top-1/2 z-10 flex h-10 w-10 -translate-y-1/2 items-center justify-center rounded-lg border border-neutral-200 bg-white/90 text-neutral-800 backdrop-blur-sm transition hover:bg-white"
               aria-label={t("galleryPrev")}
             >
               <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
@@ -109,14 +109,14 @@ export function ProductGallery({ slug, sources }: Props) {
             <button
               type="button"
               onClick={() => go(1)}
-              className="absolute right-2 top-1/2 z-10 flex h-10 w-10 -translate-y-1/2 items-center justify-center rounded-full bg-white/90 text-neutral-800 shadow-md ring-1 ring-neutral-200/80 backdrop-blur-sm transition hover:bg-white"
+              className="absolute right-2 top-1/2 z-10 flex h-10 w-10 -translate-y-1/2 items-center justify-center rounded-lg border border-neutral-200 bg-white/90 text-neutral-800 backdrop-blur-sm transition hover:bg-white"
               aria-label={t("galleryNext")}
             >
               <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                 <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
               </svg>
             </button>
-            <p className="pointer-events-none absolute bottom-3 left-1/2 -translate-x-1/2 rounded-full bg-neutral-950/55 px-3 py-1 text-xs font-medium tabular-nums text-white backdrop-blur-sm">
+            <p className="pointer-events-none absolute bottom-3 left-1/2 -translate-x-1/2 rounded-md bg-neutral-950/55 px-3 py-1 text-xs font-medium tabular-nums text-white backdrop-blur-sm">
               {t("galleryCounter", { current: slideIndex + 1, total: n })}
             </p>
           </>
@@ -140,10 +140,10 @@ export function ProductGallery({ slug, sources }: Props) {
                 aria-selected={active}
                 aria-label={t("galleryGoTo", { n: i + 1 })}
                 onClick={() => setSlide(i)}
-                className={`relative h-16 w-16 shrink-0 overflow-hidden rounded-xl ring-2 transition sm:h-20 sm:w-20 ${
+                className={`relative h-16 w-16 shrink-0 overflow-hidden rounded-lg border-2 transition sm:h-20 sm:w-20 ${
                   active
-                    ? "ring-blue-600 ring-offset-2"
-                    : "ring-transparent ring-offset-0 opacity-80 hover:opacity-100"
+                    ? "border-neutral-900"
+                    : "border-transparent opacity-70 hover:opacity-100"
                 }`}
               >
                 <Image
diff --git a/src/components/SiteChrome.tsx b/src/components/SiteChrome.tsx
index 68ded49..f8a013a 100644
--- a/src/components/SiteChrome.tsx
+++ b/src/components/SiteChrome.tsx
@@ -5,7 +5,7 @@ import { StickyCallBar } from "@/components/StickyCallBar";
 
 export async function SiteChrome({ children }: { children: ReactNode }) {
   return (
-    <div className="flex min-h-screen flex-col pb-24 sm:pb-28">
+    <div className="flex min-h-screen flex-col">
       <Header />
       <main className="flex-1">{children}</main>
       <Footer />
diff --git a/src/components/StickyCallBar.tsx b/src/components/StickyCallBar.tsx
index f1b87ff..44d1803 100644
--- a/src/components/StickyCallBar.tsx
+++ b/src/components/StickyCallBar.tsx
@@ -14,7 +14,7 @@ export function StickyCallBar() {
     >
       <a
         href={telHref(publicContactPhone)}
-        className="flex h-14 w-14 items-center justify-center rounded-full bg-blue-600 text-white shadow-xl shadow-blue-600/35 transition hover:bg-blue-700"
+        className="flex h-14 w-14 items-center justify-center rounded-full bg-neutral-900 text-white transition hover:bg-neutral-800"
         aria-label={t("call")}
       >
         <svg