diff --git a/index.html b/index.html
index 38e3886..f985a9f 100644
--- a/index.html
+++ b/index.html
@@ -6,6 +6,7 @@
     <meta name="description" content="SocioWire maps local news, events, deals, and social posts in real time. Explore what’s happening around you." />
     <meta name="robots" content="index, follow" />
     <link rel="canonical" href="https://sociowire.com/" />
+    <link rel="sitemap" type="application/xml" title="Sitemap" href="/sitemap.xml" />
 
     <!-- Favicon -->
     <link rel="icon" href="/favicon.ico" />
@@ -45,6 +46,19 @@
         }
       }
     </script>
+    <script type="application/ld+json">
+      {
+        "@context": "https://schema.org",
+        "@graph": [
+          { "@type": "SiteNavigationElement", "name": "Live Map", "url": "https://sociowire.com/#map" },
+          { "@type": "SiteNavigationElement", "name": "SocioWall", "url": "https://sociowire.com/#wall" },
+          { "@type": "SiteNavigationElement", "name": "Islands", "url": "https://sociowire.com/#islands" },
+          { "@type": "SiteNavigationElement", "name": "About", "url": "https://sociowire.com/about.html" },
+          { "@type": "SiteNavigationElement", "name": "Contact", "url": "https://sociowire.com/contact.html" },
+          { "@type": "SiteNavigationElement", "name": "Privacy", "url": "https://sociowire.com/privacy.html" }
+        ]
+      }
+    </script>
 
     <!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-QT0P53R99H"></script>
diff --git a/public/about.html b/public/about.html
new file mode 100644
index 0000000..919e59b
--- /dev/null
+++ b/public/about.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta
+      name="description"
+      content="Learn how SocioWire maps local news, events, and community stories in real time."
+    />
+    <link rel="canonical" href="https://sociowire.com/about.html" />
+    <title>About SocioWire</title>
+    <style>
+      :root { color-scheme: light; }
+      body {
+        margin: 0;
+        font-family: "Georgia", "Times New Roman", serif;
+        background: #f8fafc;
+        color: #0f172a;
+      }
+      main {
+        max-width: 860px;
+        margin: 0 auto;
+        padding: 48px 24px 72px;
+      }
+      h1 { font-size: 34px; margin: 0 0 8px; }
+      h2 { font-size: 18px; margin: 28px 0 8px; }
+      p { line-height: 1.6; font-size: 16px; }
+      .card {
+        background: #ffffff;
+        border: 1px solid #e2e8f0;
+        border-radius: 14px;
+        padding: 20px 22px;
+        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
+      }
+      .page-header {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 12px;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 20px;
+      }
+      .logo-link {
+        font-weight: 700;
+        letter-spacing: 0.12em;
+        text-decoration: none;
+        color: #0f172a;
+        font-size: 13px;
+      }
+      .page-nav {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 12px;
+        font-size: 14px;
+      }
+      .page-nav a {
+        text-decoration: none;
+        color: #1d4ed8;
+        font-weight: 600;
+      }
+      .cta {
+        display: inline-block;
+        margin-top: 12px;
+        padding: 10px 16px;
+        border-radius: 999px;
+        background: #1d4ed8;
+        color: #ffffff;
+        text-decoration: none;
+        font-weight: 600;
+      }
+    </style>
+  </head>
+  <body>
+    <main>
+      <div class="card">
+        <div class="page-header">
+          <a class="logo-link" href="https://sociowire.com/">SOCIOWIRE</a>
+          <nav class="page-nav" aria-label="Site">
+            <a href="https://sociowire.com/islands.html">Islands</a>
+            <a href="https://sociowire.com/sociowall.html">SocioWall</a>
+            <a href="https://sociowire.com/contact.html">Contact</a>
+            <a href="https://sociowire.com/privacy.html">Privacy</a>
+          </nav>
+        </div>
+        <h1>About SocioWire</h1>
+        <p>
+          SocioWire is a live map for what is happening around you. We surface local news, events,
+          market deals, and community posts so you can discover what matters in real time.
+        </p>
+        <h2>What makes it different</h2>
+        <p>
+          Explore a location-first feed, jump into Island communities, and filter the map to focus
+          on the stories that matter most to you.
+        </p>
+        <a class="cta" href="https://sociowire.com/#map">Open the live map</a>
+      </div>
+    </main>
+  </body>
+</html>
diff --git a/public/contact.html b/public/contact.html
new file mode 100644
index 0000000..7679a64
--- /dev/null
+++ b/public/contact.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta
+      name="description"
+      content="Contact SocioWire support for help, partnerships, and community feedback."
+    />
+    <link rel="canonical" href="https://sociowire.com/contact.html" />
+    <title>Contact SocioWire</title>
+    <style>
+      :root { color-scheme: light; }
+      body {
+        margin: 0;
+        font-family: "Georgia", "Times New Roman", serif;
+        background: #f8fafc;
+        color: #0f172a;
+      }
+      main {
+        max-width: 860px;
+        margin: 0 auto;
+        padding: 48px 24px 72px;
+      }
+      h1 { font-size: 34px; margin: 0 0 8px; }
+      p { line-height: 1.6; font-size: 16px; }
+      .card {
+        background: #ffffff;
+        border: 1px solid #e2e8f0;
+        border-radius: 14px;
+        padding: 20px 22px;
+        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
+      }
+      .page-header {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 12px;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 20px;
+      }
+      .logo-link {
+        font-weight: 700;
+        letter-spacing: 0.12em;
+        text-decoration: none;
+        color: #0f172a;
+        font-size: 13px;
+      }
+      .page-nav {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 12px;
+        font-size: 14px;
+      }
+      .page-nav a {
+        text-decoration: none;
+        color: #1d4ed8;
+        font-weight: 600;
+      }
+      .cta {
+        display: inline-block;
+        margin-top: 12px;
+        padding: 10px 16px;
+        border-radius: 999px;
+        background: #1d4ed8;
+        color: #ffffff;
+        text-decoration: none;
+        font-weight: 600;
+      }
+    </style>
+  </head>
+  <body>
+    <main>
+      <div class="card">
+        <div class="page-header">
+          <a class="logo-link" href="https://sociowire.com/">SOCIOWIRE</a>
+          <nav class="page-nav" aria-label="Site">
+            <a href="https://sociowire.com/about.html">About</a>
+            <a href="https://sociowire.com/islands.html">Islands</a>
+            <a href="https://sociowire.com/sociowall.html">SocioWall</a>
+            <a href="https://sociowire.com/privacy.html">Privacy</a>
+          </nav>
+        </div>
+        <h1>Contact</h1>
+        <p>
+          Reach the SocioWire team for support, partnerships, or community feedback.
+        </p>
+        <p>
+          Email us at <a href="mailto:support@sociowire.com">support@sociowire.com</a>.
+        </p>
+        <a class="cta" href="https://sociowire.com/">Return to SocioWire</a>
+      </div>
+    </main>
+  </body>
+</html>
diff --git a/public/islands.html b/public/islands.html
new file mode 100644
index 0000000..ca62f34
--- /dev/null
+++ b/public/islands.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta
+      name="description"
+      content="SocioWire Islands are community hubs for local updates, deals, and stories."
+    />
+    <link rel="canonical" href="https://sociowire.com/islands.html" />
+    <title>SocioWire Islands</title>
+    <style>
+      :root { color-scheme: light; }
+      body {
+        margin: 0;
+        font-family: "Georgia", "Times New Roman", serif;
+        background: #f8fafc;
+        color: #0f172a;
+      }
+      main {
+        max-width: 860px;
+        margin: 0 auto;
+        padding: 48px 24px 72px;
+      }
+      h1 { font-size: 34px; margin: 0 0 8px; }
+      p { line-height: 1.6; font-size: 16px; }
+      .card {
+        background: #ffffff;
+        border: 1px solid #e2e8f0;
+        border-radius: 14px;
+        padding: 20px 22px;
+        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
+      }
+      .page-header {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 12px;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 20px;
+      }
+      .logo-link {
+        font-weight: 700;
+        letter-spacing: 0.12em;
+        text-decoration: none;
+        color: #0f172a;
+        font-size: 13px;
+      }
+      .page-nav {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 12px;
+        font-size: 14px;
+      }
+      .page-nav a {
+        text-decoration: none;
+        color: #1d4ed8;
+        font-weight: 600;
+      }
+      .cta {
+        display: inline-block;
+        margin-top: 12px;
+        padding: 10px 16px;
+        border-radius: 999px;
+        background: #1d4ed8;
+        color: #ffffff;
+        text-decoration: none;
+        font-weight: 600;
+      }
+    </style>
+  </head>
+  <body>
+    <main>
+      <div class="card">
+        <div class="page-header">
+          <a class="logo-link" href="https://sociowire.com/">SOCIOWIRE</a>
+          <nav class="page-nav" aria-label="Site">
+            <a href="https://sociowire.com/about.html">About</a>
+            <a href="https://sociowire.com/sociowall.html">SocioWall</a>
+            <a href="https://sociowire.com/contact.html">Contact</a>
+            <a href="https://sociowire.com/privacy.html">Privacy</a>
+          </nav>
+        </div>
+        <h1>Islands</h1>
+        <p>
+          Islands are community spaces that gather local updates, neighborhood stories, and deals
+          into a single feed. Pick an Island to see what people are sharing right now.
+        </p>
+        <p>
+          Use Islands to follow creators, save a local hub, or discover new areas when you travel.
+        </p>
+        <a class="cta" href="https://sociowire.com/#islands">Explore Islands on SocioWire</a>
+      </div>
+    </main>
+  </body>
+</html>
diff --git a/public/privacy.html b/public/privacy.html
index 7c5cf2a..d7a3c73 100644
--- a/public/privacy.html
+++ b/public/privacy.html
@@ -3,6 +3,11 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta
+      name="description"
+      content="SocioWire privacy policy covering data collection, usage, and your choices."
+    />
+    <link rel="canonical" href="https://sociowire.com/privacy.html" />
     <title>SocioWire Privacy Policy</title>
     <style>
       :root {
@@ -46,6 +51,32 @@
         padding: 20px 22px;
         box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
       }
+      .page-header {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 12px;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 20px;
+      }
+      .logo-link {
+        font-weight: 700;
+        letter-spacing: 0.12em;
+        text-decoration: none;
+        color: #0f172a;
+        font-size: 13px;
+      }
+      .page-nav {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 12px;
+        font-size: 14px;
+      }
+      .page-nav a {
+        text-decoration: none;
+        color: #1d4ed8;
+        font-weight: 600;
+      }
       a {
         color: #1d4ed8;
       }
@@ -54,6 +85,15 @@
   <body>
     <main>
       <div class="card">
+        <div class="page-header">
+          <a class="logo-link" href="https://sociowire.com/">SOCIOWIRE</a>
+          <nav class="page-nav" aria-label="Site">
+            <a href="https://sociowire.com/about.html">About</a>
+            <a href="https://sociowire.com/islands.html">Islands</a>
+            <a href="https://sociowire.com/sociowall.html">SocioWall</a>
+            <a href="https://sociowire.com/contact.html">Contact</a>
+          </nav>
+        </div>
         <h1>Privacy Policy</h1>
         <div class="meta">Last updated: 2025-12-27</div>
 
diff --git a/public/sitemap.xml b/public/sitemap.xml
index 0a6afae..5e4424d 100644
--- a/public/sitemap.xml
+++ b/public/sitemap.xml
@@ -6,7 +6,27 @@
     <priority>1.0</priority>
   </url>
   <url>
-    <loc>https://sociowire.com/privacy</loc>
+    <loc>https://sociowire.com/about.html</loc>
+    <changefreq>monthly</changefreq>
+    <priority>0.6</priority>
+  </url>
+  <url>
+    <loc>https://sociowire.com/islands.html</loc>
+    <changefreq>weekly</changefreq>
+    <priority>0.7</priority>
+  </url>
+  <url>
+    <loc>https://sociowire.com/sociowall.html</loc>
+    <changefreq>weekly</changefreq>
+    <priority>0.7</priority>
+  </url>
+  <url>
+    <loc>https://sociowire.com/contact.html</loc>
+    <changefreq>yearly</changefreq>
+    <priority>0.4</priority>
+  </url>
+  <url>
+    <loc>https://sociowire.com/privacy.html</loc>
     <changefreq>yearly</changefreq>
     <priority>0.3</priority>
   </url>
diff --git a/public/sociowall.html b/public/sociowall.html
new file mode 100644
index 0000000..a24a2ca
--- /dev/null
+++ b/public/sociowall.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta
+      name="description"
+      content="SocioWall is the live feed of posts and local moments on SocioWire."
+    />
+    <link rel="canonical" href="https://sociowire.com/sociowall.html" />
+    <title>SocioWall Feed</title>
+    <style>
+      :root { color-scheme: light; }
+      body {
+        margin: 0;
+        font-family: "Georgia", "Times New Roman", serif;
+        background: #f8fafc;
+        color: #0f172a;
+      }
+      main {
+        max-width: 860px;
+        margin: 0 auto;
+        padding: 48px 24px 72px;
+      }
+      h1 { font-size: 34px; margin: 0 0 8px; }
+      p { line-height: 1.6; font-size: 16px; }
+      .card {
+        background: #ffffff;
+        border: 1px solid #e2e8f0;
+        border-radius: 14px;
+        padding: 20px 22px;
+        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
+      }
+      .page-header {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 12px;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 20px;
+      }
+      .logo-link {
+        font-weight: 700;
+        letter-spacing: 0.12em;
+        text-decoration: none;
+        color: #0f172a;
+        font-size: 13px;
+      }
+      .page-nav {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 12px;
+        font-size: 14px;
+      }
+      .page-nav a {
+        text-decoration: none;
+        color: #1d4ed8;
+        font-weight: 600;
+      }
+      .cta {
+        display: inline-block;
+        margin-top: 12px;
+        padding: 10px 16px;
+        border-radius: 999px;
+        background: #1d4ed8;
+        color: #ffffff;
+        text-decoration: none;
+        font-weight: 600;
+      }
+    </style>
+  </head>
+  <body>
+    <main>
+      <div class="card">
+        <div class="page-header">
+          <a class="logo-link" href="https://sociowire.com/">SOCIOWIRE</a>
+          <nav class="page-nav" aria-label="Site">
+            <a href="https://sociowire.com/about.html">About</a>
+            <a href="https://sociowire.com/islands.html">Islands</a>
+            <a href="https://sociowire.com/contact.html">Contact</a>
+            <a href="https://sociowire.com/privacy.html">Privacy</a>
+          </nav>
+        </div>
+        <h1>SocioWall</h1>
+        <p>
+          SocioWall is the live stream of posts, deals, and news from across SocioWire. It keeps
+          you up to date without losing the local context.
+        </p>
+        <p>
+          Use SocioWall to scan recent activity, then jump to the map for a location view.
+        </p>
+        <a class="cta" href="https://sociowire.com/#wall">Open SocioWall</a>
+      </div>
+    </main>
+  </body>
+</html>
diff --git a/src/App.jsx b/src/App.jsx
index c280b31..5f54112 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -133,8 +133,36 @@ export default function App() {
       />
 
       <div className="main-shell">
-        <div className="map-shell">
-          <Suspense fallback={<div style={{ padding: 16 }}>Loading map…</div>}>
+        <div className="map-shell" id="map">
+          <Suspense
+            fallback={
+              <div className="map-page">
+                <div className="map-stage map-stage--placeholder">
+                  <div className="map-placeholder-content">
+                    <div className="map-placeholder-title">Loading map</div>
+                    <div className="map-placeholder-subtitle">Warming up tiles and live data.</div>
+                  </div>
+                  <div className="map-placeholder-overlay map-placeholder-top">
+                    <div className="map-placeholder-pill map-placeholder-pill--wide" />
+                  </div>
+                  <div className="map-placeholder-overlay map-placeholder-left">
+                    <div className="map-placeholder-pill" />
+                    <div className="map-placeholder-pill" />
+                    <div className="map-placeholder-pill" />
+                  </div>
+                  <div className="map-placeholder-overlay map-placeholder-right">
+                    <div className="map-placeholder-pill" />
+                    <div className="map-placeholder-pill" />
+                  </div>
+                  <div className="map-placeholder-overlay map-placeholder-bottom">
+                    <div className="map-placeholder-chip" />
+                    <div className="map-placeholder-chip" />
+                    <div className="map-placeholder-chip" />
+                  </div>
+                </div>
+              </div>
+            }
+          >
             <MapView
               theme={theme}
               onPostsState={handlePostsState}
@@ -150,7 +178,7 @@ export default function App() {
         {/* BELOW THE MAP (page scroll like Facebook) */}
         <div className="below-stage">
           <div className="below-row">
-            <div className="sociowall-panel">
+            <div className="sociowall-panel" id="wall">
               <div className="sociowall-header">SOCIOWALL</div>
               <PostList
                 posts={wallPosts}
@@ -166,6 +194,20 @@ export default function App() {
 
         <div style={{ height: 18 }} />
 
+        <section className="seo-section" id="islands">
+          <div className="seo-card">
+            <div className="seo-kicker">Communities</div>
+            <h2>Explore Islands</h2>
+            <p>
+              Islands are local hubs where people share updates, deals, and stories in one place.
+              Browse nearby islands or jump into a new community to see what is trending.
+            </p>
+            <button className="seo-cta" type="button" onClick={handleOpenUniverse}>
+              Open Islands
+            </button>
+          </div>
+        </section>
+
         {/* Bouton Contacts flottant en bas à droite */}
         <button className="contacts-float-btn" onClick={() => setShowContactsList(!showContactsList)}>
           <span className="contact-icon">👥</span>
@@ -196,6 +238,21 @@ export default function App() {
         </div>
       </div>
 
+      <footer className="sw-footer">
+        <div className="sw-footer-inner">
+          <div className="sw-footer-brand">SOCIOWIRE</div>
+          <nav className="sw-footer-nav" aria-label="Site">
+            <a href="/">Home</a>
+            <a href="/#map">Live Map</a>
+            <a href="/#wall">SocioWall</a>
+            <a href="/#islands">Islands</a>
+            <a href="/about.html">About</a>
+            <a href="/contact.html">Contact</a>
+            <a href="/privacy.html">Privacy</a>
+          </nav>
+        </div>
+      </footer>
+
       {/* Island Universe Modal */}
       {showUniverse && (
         <IslandUniverse
diff --git a/src/styles/layout.css b/src/styles/layout.css
index 26d2af5..2d57804 100644
--- a/src/styles/layout.css
+++ b/src/styles/layout.css
@@ -1,6 +1,88 @@
 .app-root{ min-height:100vh; display:flex; flex-direction:column; }
 .main-shell{ flex: 1 0 auto; display:block; padding:0; }
 .map-shell{ position:relative; width:100%; height:auto; overflow:visible; border:none; background:transparent; }
+.seo-section {
+  padding: 0 20px 36px;
+}
+
+.seo-card {
+  max-width: 980px;
+  margin: 0 auto;
+  padding: 26px 28px;
+  border-radius: 18px;
+  border: 1px solid rgba(59, 130, 246, 0.4);
+  background: rgba(4, 12, 32, 0.7);
+  box-shadow: 0 18px 38px rgba(2, 6, 23, 0.35);
+}
+
+.seo-kicker {
+  text-transform: uppercase;
+  font-size: 12px;
+  letter-spacing: 0.22em;
+  color: rgba(148, 163, 184, 0.9);
+  font-weight: 600;
+}
+
+.seo-card h2 {
+  margin: 10px 0 8px;
+  font-size: 24px;
+}
+
+.seo-card p {
+  margin: 0 0 16px;
+  color: rgba(226, 232, 240, 0.9);
+  line-height: 1.6;
+}
+
+.seo-cta {
+  border: none;
+  border-radius: 999px;
+  padding: 10px 18px;
+  font-weight: 600;
+  background: #38bdf8;
+  color: #0f172a;
+  cursor: pointer;
+}
+
+.sw-footer {
+  border-top: 1px solid rgba(59, 130, 246, 0.25);
+  background: rgba(2, 8, 23, 0.9);
+  padding: 24px 16px 36px;
+}
+
+.sw-footer-inner {
+  max-width: 1080px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  align-items: center;
+}
+
+.sw-footer-brand {
+  font-weight: 700;
+  letter-spacing: 0.18em;
+  font-size: 13px;
+  color: rgba(226, 232, 240, 0.85);
+}
+
+.sw-footer-nav {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 14px;
+  justify-content: center;
+}
+
+.sw-footer-nav a {
+  color: rgba(226, 232, 240, 0.9);
+  text-decoration: none;
+  font-weight: 500;
+  font-size: 14px;
+}
+
+.sw-footer-nav a:hover {
+  color: #38bdf8;
+}
 
 /* Bouton Contacts flottant en bas à droite */
 .contacts-float-btn {
diff --git a/src/styles/map.css b/src/styles/map.css
index e235679..ec0c014 100644
--- a/src/styles/map.css
+++ b/src/styles/map.css
@@ -17,6 +17,104 @@
   overflow: hidden;
 }
 
+.map-stage--placeholder{
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  background:
+    radial-gradient(circle at 20% 20%, rgba(56,189,248,0.2), transparent 45%),
+    radial-gradient(circle at 80% 30%, rgba(14,116,144,0.25), transparent 40%),
+    linear-gradient(135deg, rgba(2,6,23,0.9), rgba(6,14,36,0.95));
+  border: 1px solid rgba(56,189,248,0.25);
+}
+
+.map-placeholder-content{
+  text-align:center;
+  padding: 16px 20px;
+  border-radius: 16px;
+  background: rgba(2, 6, 23, 0.5);
+  border: 1px solid rgba(148, 163, 184, 0.25);
+  color: #e2e8f0;
+  box-shadow: 0 14px 30px rgba(2,6,23,0.4);
+}
+
+.map-placeholder-title{
+  font-size: 18px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+}
+
+.map-placeholder-subtitle{
+  margin-top: 6px;
+  font-size: 13px;
+  color: rgba(226, 232, 240, 0.75);
+}
+
+.map-placeholder-overlay{
+  position:absolute;
+  display:flex;
+  gap: 10px;
+  z-index: 2;
+  opacity: 0.85;
+}
+
+.map-placeholder-top{
+  top: 16px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.map-placeholder-left{
+  left: 16px;
+  top: 50%;
+  transform: translateY(-50%);
+  flex-direction: column;
+}
+
+.map-placeholder-right{
+  right: 16px;
+  top: 50%;
+  transform: translateY(-50%);
+  flex-direction: column;
+}
+
+.map-placeholder-bottom{
+  left: 50%;
+  bottom: 18px;
+  transform: translateX(-50%);
+}
+
+.map-placeholder-pill{
+  width: 42px;
+  height: 42px;
+  border-radius: 14px;
+  background: linear-gradient(135deg, rgba(148,163,184,0.15), rgba(56,189,248,0.25));
+  border: 1px solid rgba(148, 163, 184, 0.25);
+  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.4);
+  animation: map-skel-pulse 1.6s ease-in-out infinite;
+}
+
+.map-placeholder-pill--wide{
+  width: min(520px, calc(100vw - 72px));
+  height: 48px;
+  border-radius: 18px;
+}
+
+.map-placeholder-chip{
+  width: 84px;
+  height: 30px;
+  border-radius: 999px;
+  background: linear-gradient(135deg, rgba(148,163,184,0.18), rgba(14,116,144,0.25));
+  border: 1px solid rgba(148, 163, 184, 0.25);
+  animation: map-skel-pulse 1.6s ease-in-out infinite;
+}
+
+@keyframes map-skel-pulse{
+  0%{ opacity: 0.5; }
+  50%{ opacity: 1; }
+  100%{ opacity: 0.6; }
+}
+
 /* Landscape: vh is small, reduce min height */
 @media (orientation: landscape){
   :root{ --sw-below-overlap: 22px; }
diff --git a/src/styles/theme.css b/src/styles/theme.css
index 5d27ffe..b8a7eaf 100644
--- a/src/styles/theme.css
+++ b/src/styles/theme.css
@@ -19,3 +19,23 @@ body[data-theme="light"] .post-pin--expanded .post-card {
   border-color: rgba(148, 163, 184, 0.9);
   color:#111827;
 }
+
+body[data-theme="light"] .seo-card {
+  background: rgba(248, 250, 252, 0.98);
+  border-color: rgba(148, 163, 184, 0.7);
+  color: #111827;
+}
+
+body[data-theme="light"] .seo-card p {
+  color: rgba(30, 41, 59, 0.85);
+}
+
+body[data-theme="light"] .sw-footer {
+  background: rgba(226, 232, 240, 0.95);
+  border-top-color: rgba(148, 163, 184, 0.6);
+}
+
+body[data-theme="light"] .sw-footer-nav a,
+body[data-theme="light"] .sw-footer-brand {
+  color: rgba(15, 23, 42, 0.8);
+}
