[verified] Replace site branding and icons with approved logo kit

web/src/app/brand.css

@@ -0,0 +1,21 @@
+/* Official light lockup for the site's light-only surfaces. Its SVG contains
+   the approved RTL composition and outlined IBM Plex Sans Arabic wordmark. */
+#site img.logo-lockup {
+  display: block;
+  width: 152px;
+  height: 60px;
+  max-width: none;
+  object-fit: contain;
+  flex: none;
+  transform: none;
+  filter: none;
+  background: none;
+  border-radius: 0;
+}
+@media (max-width: 640px) {
+  #site .site-header img.logo-lockup,
+  #site .menu-head img.logo-lockup {
+    width: 132px;
+    height: 52px;
+  }
+}

web/src/app/layout.tsx

@@ -4,6 +4,7 @@ import './globals.css'
 import './polish.css'
 import './design.css'
 import './color-trial.css'
+import './brand.css'
 
 /* Bundle Readex Pro's Arabic/Latin variable font so builds never fetch Google Fonts. */
 const sans = localFont({
@@ -13,13 +14,23 @@ const sans = localFont({
 })
 
 /* The design is light-only: stop browsers' forced dark modes from repainting it. */
-export const viewport: Viewport = { colorScheme: 'only light', themeColor: '#ffffff' }
+export const viewport: Viewport = { colorScheme: 'only light', themeColor: '#131519' }
 
 export const metadata: Metadata = {
   metadataBase: new URL(process.env.NEXT_PUBLIC_SITE_URL ?? 'https://anwarpi.ai'),
   title: { default: 'أنور پآي — محتوى الذكاء الاصطناعي العملي بالعربية', template: '%s — أنور پآي' },
   description: 'محتوى عربي عملي عن الذكاء الاصطناعي: تشغيل النماذج محليًا، وبناء الوكلاء، والأتمتة وRAG. استكشف تجارب أنور پآي وشروحات الأدوات بخطوات قابلة للتطبيق.',
   alternates: { canonical: './' },
+  manifest: '/site.webmanifest',
+  icons: {
+    icon: [
+      { url: '/favicon.ico', sizes: '48x48' },
+      { url: '/favicon.svg', type: 'image/svg+xml' },
+      { url: '/favicon-32.png', sizes: '32x32', type: 'image/png' },
+      { url: '/favicon-16.png', sizes: '16x16', type: 'image/png' },
+    ],
+    apple: [{ url: '/apple-touch-icon.png', sizes: '180x180' }],
+  },
   openGraph: {
     type: 'website',
     siteName: 'أنور پآي',

web/src/components/brand-logo.tsx

@@ -0,0 +1,13 @@
+/* The approved wordmark is outlined in the supplied SVG; never retype it. */
+export default function BrandLogo() {
+  return (
+    // eslint-disable-next-line @next/next/no-img-element
+    <img
+      className="logo-lockup"
+      src="/brand/anwarpy-horizontal-light.svg"
+      alt="أنور پآي"
+      width={152}
+      height={60}
+    />
+  )
+}

web/src/components/footer.tsx

@@ -1,4 +1,5 @@
 import Link from 'next/link'
+import BrandLogo from './brand-logo'
 
 /* Footer — brand column + three link columns. */
 export default function Footer() {
@@ -8,9 +9,7 @@ export default function Footer() {
         <div className="footer-grid">
           <div>
             <Link className="logo" href="/">
-              {/* eslint-disable-next-line @next/next/no-img-element */}
-              <img className="logo-mark" src="/brand/mark-light.svg" alt="" width={36} height={32} />
-              أنور پآي
+              <BrandLogo />
             </Link>
             <p>محتوى عربي عملي لتعلّم الذكاء الاصطناعي والوكلاء.</p>
           </div>

web/src/components/site-menu.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect } from 'react'
 import Link from 'next/link'
+import BrandLogo from './brand-logo'
 import { usePathname } from 'next/navigation'
 import { SITE_LINKS } from './site-links'
 import AccountLink from './account-link'
@@ -71,9 +72,7 @@ export default function SiteMenu({
       <div className="menu-drawer" role="dialog" aria-modal="true" aria-label="قائمة أنور پآي">
         <div className="menu-head">
           <Link className="logo" href="/">
-            {/* eslint-disable-next-line @next/next/no-img-element */}
-            <img className="logo-mark" src="/brand/mark-light.svg" alt="" width={36} height={32} />
-            أنور پآي
+            <BrandLogo />
           </Link>
           <button className="icon-btn" type="button" aria-label="إغلاق القائمة" data-menu-close>×</button>
         </div>

web/src/components/topnav.tsx

@@ -1,4 +1,5 @@
 import Link from 'next/link'
+import BrandLogo from './brand-logo'
 import NavLinks from './nav-links'
 import SiteMenu from './site-menu'
 import AccountLink from './account-link'
@@ -12,9 +13,7 @@ export default function Topnav({ viewer }: { viewer?: { email: string } | null }
       <header className="topnav site-header" data-od-id="topnav">
         <div className="container nav-inner">
           <Link className="logo" href="/" data-od-id="brand">
-            {/* eslint-disable-next-line @next/next/no-img-element */}
-            <img className="logo-mark" src="/brand/mark-light.svg" alt="" width={36} height={32} />
-            أنور پآي
+            <BrandLogo />
           </Link>
           <NavLinks links={SITE_LINKS} />
           <div className="nav-tools">