diff --git a/apps/website/src/app/globals.css b/apps/website/src/app/globals.css
index 1220426..170a5dc 100644
--- a/apps/website/src/app/globals.css
+++ b/apps/website/src/app/globals.css
@@ -209,6 +209,65 @@
     @apply flex h-9 w-9 items-center justify-center rounded-full border border-line-primary/20 bg-surface-page text-[10px] font-bold text-text-main transition-all duration-300 hover:border-brand-primary hover:bg-brand-primary hover:text-surface-card;
   }
 
+  .site-footer {
+    @apply relative bg-surface-page;
+    z-index: 1;
+  }
+
+  .site-footer-brand-finale {
+    @apply flex min-h-[55svh] items-center justify-center overflow-hidden border-t border-line-primary/20 bg-surface-page px-6 py-20 text-center;
+  }
+
+  .site-footer-finale-logo {
+    @apply h-auto max-h-32 w-auto max-w-[min(82vw,32rem)] object-contain;
+  }
+
+  .site-footer-finale-wordmark {
+    @apply max-w-full break-words text-5xl font-semibold uppercase text-text-main md:text-7xl;
+    letter-spacing: 0;
+  }
+
+  .site-footer-navigation {
+    @apply relative border-t border-line-primary/20 bg-surface-card px-6 py-20;
+    z-index: 3;
+  }
+
+  @media (min-width: 1024px) {
+    .global-main {
+      position: relative;
+      z-index: 2;
+      background: var(--color-surface-page);
+    }
+
+    .site-footer-with-finale {
+      padding-top: 100svh;
+    }
+
+    .site-footer-brand-finale {
+      @apply fixed inset-0 min-h-[100svh] py-24;
+      z-index: 0;
+      pointer-events: none;
+    }
+
+    .site-footer-finale-logo {
+      @apply max-h-48 max-w-[min(68vw,48rem)];
+    }
+
+    .site-footer-finale-wordmark {
+      @apply text-8xl;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .site-footer-brand-finale {
+      position: relative;
+    }
+
+    .site-footer-with-finale {
+      padding-top: 0;
+    }
+  }
+
   .ui-section-band {
     @apply px-6 py-20 md:py-24;
   }
diff --git a/apps/website/src/components/Footer.tsx b/apps/website/src/components/Footer.tsx
index 069a824..95e7b3e 100644
--- a/apps/website/src/components/Footer.tsx
+++ b/apps/website/src/components/Footer.tsx
@@ -54,138 +54,161 @@ export default function Footer({
   // Social links — use settings if available, fallback to placeholder buttons
   const hasSocialLinks = settings && (settings.facebookUrl || settings.instagramUrl || settings.tiktokUrl)
   const brandName = settings?.brandName || ''
+  const hasBrandFinale = Boolean(settings?.logoUrl || brandName.trim())
 
   return (
-    <footer className="border-t border-line-primary/20 bg-surface-card px-6 py-20 text-text-main">
-      <div className="mx-auto grid max-w-7xl grid-cols-1 gap-12 md:grid-cols-4">
+    <footer className={`site-footer text-text-main${hasBrandFinale ? ' site-footer-with-finale' : ''}`}>
+      {hasBrandFinale && (
+        <section
+          className="site-footer-brand-finale"
+          aria-label={brandName || t('footer.brand', 'Brand')}
+        >
+          {settings?.logoUrl ? (
+            <Image
+              src={settings.logoUrl}
+              alt=""
+              width={640}
+              height={240}
+              unoptimized
+              className="site-footer-finale-logo"
+            />
+          ) : (
+            <p className="site-footer-finale-wordmark">{brandName}</p>
+          )}
+        </section>
+      )}
 
-        {/* Col 1 — Brand */}
-        <div className="space-y-6">
-          <div className="text-2xl font-bold tracking-widest">
-            {settings?.logoUrl ? (
-              <Image src={settings.logoUrl} alt={brandName} width={160} height={40} unoptimized className="h-8 w-auto object-contain md:h-10" />
-            ) : (
-              brandName
-            )}
-          </div>
-          <p className="text-sm leading-relaxed ui-muted-text">
-            {resolveLocalized(settings?.footerDescription, effectiveLang) || t('footer.catchphrase')}
-          </p>
-          <div className="flex gap-4">
-            {hasSocialLinks ? (
-              <>
-                {settings!.facebookUrl && (
-                  <a
-                    href={settings!.facebookUrl}
-                    target="_blank"
-                    rel="noreferrer"
-                    className="ui-footer-social"
-                  >
-                    FB
-                  </a>
-                )}
-                {settings!.instagramUrl && (
-                  <a
-                    href={settings!.instagramUrl}
-                    target="_blank"
-                    rel="noreferrer"
-                    className="ui-footer-social"
-                  >
-                    IG
-                  </a>
-                )}
-                {settings!.tiktokUrl && (
-                  <a
-                    href={settings!.tiktokUrl}
-                    target="_blank"
-                    rel="noreferrer"
-                    className="ui-footer-social"
-                  >
-                    TT
-                  </a>
-                )}
-              </>
-            ) : (
-              ['IG', 'FB', 'TW', 'YT'].map((s) => (
-                <a
-                  key={s}
-                  href="#"
-                  className="ui-footer-social"
-                >
-                  {s}
-                </a>
-              ))
-            )}
-          </div>
-        </div>
+      <div className="site-footer-navigation">
+        <div className="mx-auto grid max-w-7xl grid-cols-1 gap-12 md:grid-cols-4">
 
-        {/* Col 2 — Explore */}
-        <div className="space-y-4">
-          <h4 className="ui-menu-title">{t('footer.explore')}</h4>
-          <div className="flex flex-col space-y-2 text-sm text-muted-text">
-            {exploreMenu.length > 0 ? (
-              exploreMenu.map((item) => (
+          {/* Col 1 — Brand */}
+          <div className="space-y-6">
+            <div className="text-2xl font-bold tracking-widest">
+              {settings?.logoUrl ? (
+                <Image src={settings.logoUrl} alt={brandName} width={160} height={40} unoptimized className="h-8 w-auto object-contain md:h-10" />
+              ) : (
+                brandName
+              )}
+            </div>
+            <p className="text-sm leading-relaxed ui-muted-text">
+              {resolveLocalized(settings?.footerDescription, effectiveLang) || t('footer.catchphrase')}
+            </p>
+            <div className="flex gap-4">
+              {hasSocialLinks ? (
+                <>
+                  {settings!.facebookUrl && (
+                    <a
+                      href={settings!.facebookUrl}
+                      target="_blank"
+                      rel="noreferrer"
+                      className="ui-footer-social"
+                    >
+                      FB
+                    </a>
+                  )}
+                  {settings!.instagramUrl && (
+                    <a
+                      href={settings!.instagramUrl}
+                      target="_blank"
+                      rel="noreferrer"
+                      className="ui-footer-social"
+                    >
+                      IG
+                    </a>
+                  )}
+                  {settings!.tiktokUrl && (
+                    <a
+                      href={settings!.tiktokUrl}
+                      target="_blank"
+                      rel="noreferrer"
+                      className="ui-footer-social"
+                    >
+                      TT
+                    </a>
+                  )}
+                </>
+              ) : (
+                ['IG', 'FB', 'TW', 'YT'].map((s) => (
+                  <a
+                    key={s}
+                    href="#"
+                    className="ui-footer-social"
+                  >
+                    {s}
+                  </a>
+                ))
+              )}
+            </div>
+          </div>
+
+          {/* Col 2 — Explore */}
+          <div className="space-y-4">
+            <h4 className="ui-menu-title">{t('footer.explore')}</h4>
+            <div className="flex flex-col space-y-2 text-sm text-muted-text">
+              {exploreMenu.length > 0 ? (
+                exploreMenu.map((item) => (
+                  <Link key={item.id} href={item.url} className="ui-footer-link">
+                    {translateMenuLabel(item)}
+                  </Link>
+                ))
+              ) : (
+                <>
+                  <Link href="/" className="ui-footer-link">{t('nav.home')}</Link>
+                  <Link href="/shop" className="ui-footer-link">{t('nav.shop')}</Link>
+                  <Link href="/scent-guide" className="ui-footer-link">{t('nav.scentGuide')}</Link>
+                  <Link href="/about" className="ui-footer-link">{t('nav.about')}</Link>
+                  <Link href="/contact" className="ui-footer-link">{t('nav.contact')}</Link>
+                  <Link href="/faq" className="ui-footer-link">{t('nav.faq')}</Link>
+                </>
+              )}
+            </div>
+          </div>
+
+          {/* Col 3 — Collections */}
+          <div className="space-y-4">
+            <h4 className="ui-menu-title">{t('nav.collections')}</h4>
+            <div className="flex flex-col space-y-2 text-sm text-muted-text">
+              {categories.map((c) => (
+                <Link key={c.id} href={`/category/${c.id}`} className="ui-footer-link">
+                  {resolveLocalized(c.name, effectiveLang)}
+                </Link>
+              ))}
+            </div>
+          </div>
+
+          {/* Col 4 — Support & Legal */}
+          <div className="space-y-4">
+            <h4 className="ui-menu-title">
+              {settings?.footerSupportHeading
+                ? (typeof settings.footerSupportHeading === 'string'
+                  ? settings.footerSupportHeading
+                  : settings.footerSupportHeading[effectiveLang]
+                    || settings.footerSupportHeading.en
+                    || 'Support & Legal')
+                : t('footer.support', 'Support & Legal')}
+            </h4>
+            <div className="flex flex-col space-y-2 text-sm text-muted-text">
+              {supportMenu.map((item) => (
                 <Link key={item.id} href={item.url} className="ui-footer-link">
                   {translateMenuLabel(item)}
                 </Link>
-              ))
-            ) : (
-              <>
-                <Link href="/" className="ui-footer-link">{t('nav.home')}</Link>
-                <Link href="/shop" className="ui-footer-link">{t('nav.shop')}</Link>
-                <Link href="/scent-guide" className="ui-footer-link">{t('nav.scentGuide')}</Link>
-                <Link href="/about" className="ui-footer-link">{t('nav.about')}</Link>
-                <Link href="/contact" className="ui-footer-link">{t('nav.contact')}</Link>
-                <Link href="/faq" className="ui-footer-link">{t('nav.faq')}</Link>
-              </>
-            )}
+              ))}
+            </div>
+
+            <div className="pt-4">
+              <p className="text-[10px] uppercase tracking-widest text-muted-text">
+                {settings?.footerCopyrightText
+                  ? (typeof settings.footerCopyrightText === 'string'
+                    ? settings.footerCopyrightText
+                    : settings.footerCopyrightText[effectiveLang]
+                      || settings.footerCopyrightText.en
+                      || `© ${new Date().getFullYear()} ${brandName}. ${t('footer.rights')}`)
+                  : `© ${new Date().getFullYear()} ${brandName}. ${t('footer.rights')}`}
+              </p>
+            </div>
           </div>
+
         </div>
-
-        {/* Col 3 — Collections */}
-        <div className="space-y-4">
-          <h4 className="ui-menu-title">{t('nav.collections')}</h4>
-          <div className="flex flex-col space-y-2 text-sm text-muted-text">
-            {categories.map((c) => (
-              <Link key={c.id} href={`/category/${c.id}`} className="ui-footer-link">
-                {resolveLocalized(c.name, effectiveLang)}
-              </Link>
-            ))}
-          </div>
-        </div>
-
-        {/* Col 4 — Support & Legal */}
-        <div className="space-y-4">
-          <h4 className="ui-menu-title">
-            {settings?.footerSupportHeading
-              ? (typeof settings.footerSupportHeading === 'string'
-                ? settings.footerSupportHeading
-                : settings.footerSupportHeading[effectiveLang]
-                  || settings.footerSupportHeading.en
-                  || 'Support & Legal')
-              : t('footer.support', 'Support & Legal')}
-          </h4>
-          <div className="flex flex-col space-y-2 text-sm text-muted-text">
-            {supportMenu.map((item) => (
-              <Link key={item.id} href={item.url} className="ui-footer-link">
-                {translateMenuLabel(item)}
-              </Link>
-            ))}
-          </div>
-
-          <div className="pt-4">
-            <p className="text-[10px] uppercase tracking-widest text-muted-text">
-              {settings?.footerCopyrightText
-                ? (typeof settings.footerCopyrightText === 'string'
-                  ? settings.footerCopyrightText
-                  : settings.footerCopyrightText[effectiveLang]
-                    || settings.footerCopyrightText.en
-                    || `© ${new Date().getFullYear()} ${brandName}. ${t('footer.rights')}`)
-                : `© ${new Date().getFullYear()} ${brandName}. ${t('footer.rights')}`}
-            </p>
-          </div>
-        </div>
-
       </div>
     </footer>
   )