From b1b41154c5b85aac2388e4cc364c44518464516b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hern=C3=A2ni=20Marques?= <hernani+magikoopa@vecirex.net>
Date: Fri, 10 Jul 2026 20:49:40 +0200
Subject: [PATCH] landings: web icons Chrome, Firefox, Opera, Ubuntu Touch

Match platforms listed on taler.net/wallet (including Ubuntu Touch).
Each mark is dual-coloured gold (#f0c86a) and blue (#3ecfbf) for
readability on dark landings. Edge/Brave removed (not listed there).

Applies to bank, exchange, and merchant wallet hubs.
---
 configs/bank-landing/index.html     | 51 +++++++++++++-------------
 configs/exchange-landing/index.html | 52 +++++++++++++--------------
 configs/merchant-landing/index.html | 56 +++++++++++++----------------
 3 files changed, 74 insertions(+), 85 deletions(-)

diff --git a/configs/bank-landing/index.html b/configs/bank-landing/index.html
index 1bc0819..b9df026 100644
--- a/configs/bank-landing/index.html
+++ b/configs/bank-landing/index.html
@@ -730,38 +730,35 @@
           <a class="app-btn hub"
              href="https://wallet.taler.net/"
              target="_blank" rel="noopener noreferrer"
-             aria-label="Web browsers (experimental): Chrome, Firefox, Edge, Brave">
-            <span class="hub-icons" aria-hidden="true" title="Chrome · Firefox · Edge · Brave">
+             aria-label="Web browsers (experimental): Chrome, Firefox, Opera, Ubuntu Touch">
+            <span class="hub-icons" aria-hidden="true" title="Chrome · Firefox · Opera · Ubuntu Touch">
+              <!-- Chrome / Chromium — gold ring, blue core -->
               <svg class="app-ico browser-ico" viewBox="0 0 24 24" role="img" aria-label="Chrome">
-                <circle cx="12" cy="12" r="10" fill="#DEE1E6"/>
-                <path fill="#EA4335" d="M12 2a10 10 0 0 1 8.66 5H12a4 4 0 0 0-3.46 2L5.1 4.1A10 10 0 0 1 12 2z"/>
-                <path fill="#FBBC04" d="M20.66 7A10 10 0 0 1 12 22l3.46-6A4 4 0 0 0 12 8h8.66z"/>
-                <path fill="#34A853" d="M5.1 4.1 8.54 9A4 4 0 0 0 12 16l-3.46 6A10 10 0 0 1 5.1 4.1z"/>
-                <circle cx="12" cy="12" r="4" fill="#fff"/>
-                <circle cx="12" cy="12" r="3.1" fill="#4285F4"/>
+                <circle cx="12" cy="12" r="10" fill="#f0c86a" opacity="0.2"/>
+                <path fill="#f0c86a" d="M12 2a10 10 0 0 1 8.66 5H12a4 4 0 0 0-3.46 2L5.1 4.1A10 10 0 0 1 12 2z"/>
+                <path fill="#f0c86a" opacity="0.75" d="M20.66 7A10 10 0 0 1 12 22l3.46-6A4 4 0 0 0 12 8h8.66z"/>
+                <path fill="#f0c86a" opacity="0.5" d="M5.1 4.1 8.54 9A4 4 0 0 0 12 16l-3.46 6A10 10 0 0 1 5.1 4.1z"/>
+                <circle cx="12" cy="12" r="4" fill="#0a1620"/>
+                <circle cx="12" cy="12" r="3.1" fill="#3ecfbf"/>
               </svg>
+              <!-- Firefox — blue body, gold accent core -->
               <svg class="app-ico browser-ico" viewBox="0 0 24 24" role="img" aria-label="Firefox">
-                <circle cx="12" cy="12.2" r="8.2" fill="#9059FF"/>
-                <path fill="#FF7139" d="M20.2 9.2c-.2-1.4-1.1-2.6-2.2-3.4.5 1.1.6 2.3.3 3.4-.9-1.6-2.5-2.6-4.4-2.6-1.3 0-2.5.4-3.4 1.1C9.3 5.4 10.9 3.8 13 3.2c-2.5.1-4.7 1.4-6.1 3.4C5.3 8.2 4.6 10.2 4.8 12.3c.3 3.9 3.5 7 7.4 7.1 3.6.1 6.7-2.2 7.7-5.5.4-1.4.4-2.9.3-4.7z"/>
-                <path fill="#FFD567" d="M12.1 9.4c1.6 0 2.9.9 3.5 2.2-.7-.4-1.5-.6-2.4-.6-2.2 0-4 1.6-4.2 3.7-.5-.8-.7-1.8-.6-2.8.4-1.5 1.8-2.5 3.7-2.5z"/>
-                <circle cx="12.2" cy="13.4" r="2.35" fill="#20123A"/>
+                <circle cx="12" cy="12.2" r="8.2" fill="#3ecfbf" opacity="0.28"/>
+                <path fill="#3ecfbf" d="M20.2 9.2c-.2-1.4-1.1-2.6-2.2-3.4.5 1.1.6 2.3.3 3.4-.9-1.6-2.5-2.6-4.4-2.6-1.3 0-2.5.4-3.4 1.1C9.3 5.4 10.9 3.8 13 3.2c-2.5.1-4.7 1.4-6.1 3.4C5.3 8.2 4.6 10.2 4.8 12.3c.3 3.9 3.5 7 7.4 7.1 3.6.1 6.7-2.2 7.7-5.5.4-1.4.4-2.9.3-4.7z"/>
+                <circle cx="12.2" cy="13.2" r="2.55" fill="#f0c86a"/>
+                <circle cx="12.2" cy="13.2" r="1.35" fill="#0a1620" opacity="0.85"/>
               </svg>
-              <svg class="app-ico browser-ico" viewBox="0 0 24 24" role="img" aria-label="Edge">
-                <defs>
-                  <linearGradient id="edge-g-bank" x1="4" y1="4" x2="20" y2="20" gradientUnits="userSpaceOnUse">
-                    <stop stop-color="#0C59A4"/>
-                    <stop offset="0.55" stop-color="#1B9DE2"/>
-                    <stop offset="1" stop-color="#36C5F0"/>
-                  </linearGradient>
-                </defs>
-                <circle cx="12" cy="12" r="10" fill="url(#edge-g-bank)"/>
-                <path fill="#fff" d="M6.2 14.6c.6 3.1 3.3 5.4 6.6 5.4 3.7 0 6.7-2.7 7.1-6.2-1.4 1.7-3.6 2.7-6 2.7-1.5 0-2.9-.4-4-1.2.6.1 1.2.2 1.8.2 3.4 0 5.9-1.9 5.9-4.6 0-.7-.2-1.3-.5-1.9-1.4-2.5-4.3-3.6-7.2-2.7C7.1 7.2 5.3 9.6 5.3 12.3c0 .8.2 1.6.5 2.3h.4z"/>
-                <path fill="#9CE4FA" opacity="0.9" d="M12.8 8.1c1.9 0 3.5 1.1 3.5 2.8 0 1.9-1.8 3.2-4.4 3.2-1.4 0-2.6-.4-3.5-1 1.5 2.1 4.1 3.2 6.7 2.8 2.2-.3 3.9-1.9 4.4-4-1.1 1.1-2.7 1.7-4.4 1.7-1.6 0-2.9-.7-2.9-1.9 0-1.1 1-1.9 2.5-2.1.4-.1.7-.3.9-.5-.8-.6-1.7-.9-2.8-.9z"/>
+              <!-- Opera — gold outer, blue inner oval -->
+              <svg class="app-ico browser-ico" viewBox="0 0 24 24" role="img" aria-label="Opera">
+                <circle cx="12" cy="12" r="9.2" fill="none" stroke="#f0c86a" stroke-width="2"/>
+                <ellipse cx="12" cy="12" rx="4.15" ry="7.1" fill="none" stroke="#3ecfbf" stroke-width="1.85"/>
               </svg>
-              <svg class="app-ico browser-ico" viewBox="0 0 24 24" role="img" aria-label="Brave">
-                <path fill="#FB542B" d="M12 2.2 4.8 5.1v5.6c0 5.1 3.4 9.8 7.2 11.1 3.8-1.3 7.2-6 7.2-11.1V5.1L12 2.2z"/>
-                <path fill="#fff" d="M12 5.1 8.1 6.7l.7 1.5L7.2 10l1.5.9L7.6 13.2l2.2.4L12 18.2l2.2-4.6 2.2-.4-1.1-2.3 1.5-.9-1.6-1.8.7-1.5L12 5.1z"/>
-                <path fill="#FB542B" d="M12 7.2 10.3 8l.5 1.1h2.4l.5-1.1L12 7.2zm-1.6 3.1L9.2 11.6l.9.5.4-1.8h-.1zm3.2 0h-.1l.4 1.8.9-.5-1.2-1.3zM10.4 13l-.5 1.1L12 16.1l2.1-2-.5-1.1h-3.2z"/>
+              <!-- Ubuntu Touch — gold center, blue satellites -->
+              <svg class="app-ico browser-ico" viewBox="0 0 24 24" role="img" aria-label="Ubuntu Touch">
+                <circle cx="12" cy="12" r="2.25" fill="#f0c86a"/>
+                <circle cx="12" cy="4.85" r="1.7" fill="#3ecfbf"/>
+                <circle cx="18.15" cy="15.55" r="1.7" fill="#3ecfbf"/>
+                <circle cx="5.85" cy="15.55" r="1.7" fill="#3ecfbf"/>
               </svg>
             </span>
             Web browsers (experimental)
diff --git a/configs/exchange-landing/index.html b/configs/exchange-landing/index.html
index e3a525d..56213b9 100644
--- a/configs/exchange-landing/index.html
+++ b/configs/exchange-landing/index.html
@@ -121,6 +121,7 @@
     .app-ico:not(.browser-ico) path,
     .app-ico:not(.browser-ico) circle,
     .app-ico:not(.browser-ico) rect { fill: currentColor; }
+    /* hub browser marks use explicit gold/blue fills in SVG */
     .app-ico.stroke-ico path, .app-ico.stroke-ico circle, .app-ico.stroke-ico rect {
       fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
     }
@@ -235,38 +236,35 @@
             <svg class="app-ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M16.7 12.6c0-2.1 1.7-3.1 1.8-3.2-1-1.4-2.5-1.6-3-1.7-1.3-.1-2.5.8-3.1.8s-1.6-.7-2.7-.7c-1.4 0-2.7.8-3.4 2.1-1.5 2.5-.4 6.3 1 8.3.7 1 1.5 2.1 2.6 2 1-.1 1.5-.7 2.8-.7s1.7.7 2.8.7 1.9-1 2.6-2c.8-1.1 1.1-2.2 1.1-2.3-.1 0-2.2-.8-2.2-3.3zm-2-6.2c.6-.7 1-1.7.9-2.7-1 .1-2.1.6-2.8 1.4-.6.7-1.1 1.7-.9 2.6 1 .1 2-.5 2.8-1.3z"/></svg>
             App Store
           </a>
-          <a class="app-btn hub" href="https://wallet.taler.net/" target="_blank" rel="noopener noreferrer" aria-label="Web browsers (experimental): Chrome, Firefox, Edge, Brave">
-            <span class="hub-icons" aria-hidden="true" title="Chrome · Firefox · Edge · Brave">
+          <a class="app-btn hub" href="https://wallet.taler.net/" target="_blank" rel="noopener noreferrer" aria-label="Web browsers (experimental): Chrome, Firefox, Opera, Ubuntu Touch">
+            <span class="hub-icons" aria-hidden="true" title="Chrome · Firefox · Opera · Ubuntu Touch">
+              <!-- Chrome / Chromium — gold ring, blue core -->
               <svg class="app-ico browser-ico" viewBox="0 0 24 24" role="img" aria-label="Chrome">
-                <circle cx="12" cy="12" r="10" fill="#DEE1E6"/>
-                <path fill="#EA4335" d="M12 2a10 10 0 0 1 8.66 5H12a4 4 0 0 0-3.46 2L5.1 4.1A10 10 0 0 1 12 2z"/>
-                <path fill="#FBBC04" d="M20.66 7A10 10 0 0 1 12 22l3.46-6A4 4 0 0 0 12 8h8.66z"/>
-                <path fill="#34A853" d="M5.1 4.1 8.54 9A4 4 0 0 0 12 16l-3.46 6A10 10 0 0 1 5.1 4.1z"/>
-                <circle cx="12" cy="12" r="4" fill="#fff"/>
-                <circle cx="12" cy="12" r="3.1" fill="#4285F4"/>
+                <circle cx="12" cy="12" r="10" fill="#f0c86a" opacity="0.2"/>
+                <path fill="#f0c86a" d="M12 2a10 10 0 0 1 8.66 5H12a4 4 0 0 0-3.46 2L5.1 4.1A10 10 0 0 1 12 2z"/>
+                <path fill="#f0c86a" opacity="0.75" d="M20.66 7A10 10 0 0 1 12 22l3.46-6A4 4 0 0 0 12 8h8.66z"/>
+                <path fill="#f0c86a" opacity="0.5" d="M5.1 4.1 8.54 9A4 4 0 0 0 12 16l-3.46 6A10 10 0 0 1 5.1 4.1z"/>
+                <circle cx="12" cy="12" r="4" fill="#0a1620"/>
+                <circle cx="12" cy="12" r="3.1" fill="#3ecfbf"/>
               </svg>
+              <!-- Firefox — blue body, gold accent core -->
               <svg class="app-ico browser-ico" viewBox="0 0 24 24" role="img" aria-label="Firefox">
-                <circle cx="12" cy="12.2" r="8.2" fill="#9059FF"/>
-                <path fill="#FF7139" d="M20.2 9.2c-.2-1.4-1.1-2.6-2.2-3.4.5 1.1.6 2.3.3 3.4-.9-1.6-2.5-2.6-4.4-2.6-1.3 0-2.5.4-3.4 1.1C9.3 5.4 10.9 3.8 13 3.2c-2.5.1-4.7 1.4-6.1 3.4C5.3 8.2 4.6 10.2 4.8 12.3c.3 3.9 3.5 7 7.4 7.1 3.6.1 6.7-2.2 7.7-5.5.4-1.4.4-2.9.3-4.7z"/>
-                <path fill="#FFD567" d="M12.1 9.4c1.6 0 2.9.9 3.5 2.2-.7-.4-1.5-.6-2.4-.6-2.2 0-4 1.6-4.2 3.7-.5-.8-.7-1.8-.6-2.8.4-1.5 1.8-2.5 3.7-2.5z"/>
-                <circle cx="12.2" cy="13.4" r="2.35" fill="#20123A"/>
+                <circle cx="12" cy="12.2" r="8.2" fill="#3ecfbf" opacity="0.28"/>
+                <path fill="#3ecfbf" d="M20.2 9.2c-.2-1.4-1.1-2.6-2.2-3.4.5 1.1.6 2.3.3 3.4-.9-1.6-2.5-2.6-4.4-2.6-1.3 0-2.5.4-3.4 1.1C9.3 5.4 10.9 3.8 13 3.2c-2.5.1-4.7 1.4-6.1 3.4C5.3 8.2 4.6 10.2 4.8 12.3c.3 3.9 3.5 7 7.4 7.1 3.6.1 6.7-2.2 7.7-5.5.4-1.4.4-2.9.3-4.7z"/>
+                <circle cx="12.2" cy="13.2" r="2.55" fill="#f0c86a"/>
+                <circle cx="12.2" cy="13.2" r="1.35" fill="#0a1620" opacity="0.85"/>
               </svg>
-              <svg class="app-ico browser-ico" viewBox="0 0 24 24" role="img" aria-label="Edge">
-                <defs>
-                  <linearGradient id="edge-g-ex" x1="4" y1="4" x2="20" y2="20" gradientUnits="userSpaceOnUse">
-                    <stop stop-color="#0C59A4"/>
-                    <stop offset="0.55" stop-color="#1B9DE2"/>
-                    <stop offset="1" stop-color="#36C5F0"/>
-                  </linearGradient>
-                </defs>
-                <circle cx="12" cy="12" r="10" fill="url(#edge-g-ex)"/>
-                <path fill="#fff" d="M6.2 14.6c.6 3.1 3.3 5.4 6.6 5.4 3.7 0 6.7-2.7 7.1-6.2-1.4 1.7-3.6 2.7-6 2.7-1.5 0-2.9-.4-4-1.2.6.1 1.2.2 1.8.2 3.4 0 5.9-1.9 5.9-4.6 0-.7-.2-1.3-.5-1.9-1.4-2.5-4.3-3.6-7.2-2.7C7.1 7.2 5.3 9.6 5.3 12.3c0 .8.2 1.6.5 2.3h.4z"/>
-                <path fill="#9CE4FA" opacity="0.9" d="M12.8 8.1c1.9 0 3.5 1.1 3.5 2.8 0 1.9-1.8 3.2-4.4 3.2-1.4 0-2.6-.4-3.5-1 1.5 2.1 4.1 3.2 6.7 2.8 2.2-.3 3.9-1.9 4.4-4-1.1 1.1-2.7 1.7-4.4 1.7-1.6 0-2.9-.7-2.9-1.9 0-1.1 1-1.9 2.5-2.1.4-.1.7-.3.9-.5-.8-.6-1.7-.9-2.8-.9z"/>
+              <!-- Opera — gold outer, blue inner oval -->
+              <svg class="app-ico browser-ico" viewBox="0 0 24 24" role="img" aria-label="Opera">
+                <circle cx="12" cy="12" r="9.2" fill="none" stroke="#f0c86a" stroke-width="2"/>
+                <ellipse cx="12" cy="12" rx="4.15" ry="7.1" fill="none" stroke="#3ecfbf" stroke-width="1.85"/>
               </svg>
-              <svg class="app-ico browser-ico" viewBox="0 0 24 24" role="img" aria-label="Brave">
-                <path fill="#FB542B" d="M12 2.2 4.8 5.1v5.6c0 5.1 3.4 9.8 7.2 11.1 3.8-1.3 7.2-6 7.2-11.1V5.1L12 2.2z"/>
-                <path fill="#fff" d="M12 5.1 8.1 6.7l.7 1.5L7.2 10l1.5.9L7.6 13.2l2.2.4L12 18.2l2.2-4.6 2.2-.4-1.1-2.3 1.5-.9-1.6-1.8.7-1.5L12 5.1z"/>
-                <path fill="#FB542B" d="M12 7.2 10.3 8l.5 1.1h2.4l.5-1.1L12 7.2zm-1.6 3.1L9.2 11.6l.9.5.4-1.8h-.1zm3.2 0h-.1l.4 1.8.9-.5-1.2-1.3zM10.4 13l-.5 1.1L12 16.1l2.1-2-.5-1.1h-3.2z"/>
+              <!-- Ubuntu Touch — gold center, blue satellites -->
+              <svg class="app-ico browser-ico" viewBox="0 0 24 24" role="img" aria-label="Ubuntu Touch">
+                <circle cx="12" cy="12" r="2.25" fill="#f0c86a"/>
+                <circle cx="12" cy="4.85" r="1.7" fill="#3ecfbf"/>
+                <circle cx="18.15" cy="15.55" r="1.7" fill="#3ecfbf"/>
+                <circle cx="5.85" cy="15.55" r="1.7" fill="#3ecfbf"/>
               </svg>
             </span>
             Web browsers (experimental)
diff --git a/configs/merchant-landing/index.html b/configs/merchant-landing/index.html
index 0cd7e53..7988862 100644
--- a/configs/merchant-landing/index.html
+++ b/configs/merchant-landing/index.html
@@ -278,6 +278,7 @@
     .app-ico:not(.browser-ico) path,
     .app-ico:not(.browser-ico) circle,
     .app-ico:not(.browser-ico) rect { fill: currentColor; }
+    /* hub browser marks use explicit gold/blue fills in SVG */
     .app-ico.stroke-ico path, .app-ico.stroke-ico circle, .app-ico.stroke-ico rect {
       fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
     }
@@ -458,42 +459,35 @@
             <svg class="app-ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M16.7 12.6c0-2.1 1.7-3.1 1.8-3.2-1-1.4-2.5-1.6-3-1.7-1.3-.1-2.5.8-3.1.8s-1.6-.7-2.7-.7c-1.4 0-2.7.8-3.4 2.1-1.5 2.5-.4 6.3 1 8.3.7 1 1.5 2.1 2.6 2 1-.1 1.5-.7 2.8-.7s1.7.7 2.8.7 1.9-1 2.6-2c.8-1.1 1.1-2.2 1.1-2.3-.1 0-2.2-.8-2.2-3.3zm-2-6.2c.6-.7 1-1.7.9-2.7-1 .1-2.1.6-2.8 1.4-.6.7-1.1 1.7-.9 2.6 1 .1 2-.5 2.8-1.3z"/></svg>
             App Store
           </a>
-          <a class="app-btn hub" href="https://wallet.taler.net/" target="_blank" rel="noopener noreferrer" aria-label="Web browsers (experimental): Chrome, Firefox, Edge, Brave">
-            <span class="hub-icons" aria-hidden="true" title="Chrome · Firefox · Edge · Brave">
-              <!-- Chrome: red / green / yellow ring + blue center -->
+          <a class="app-btn hub" href="https://wallet.taler.net/" target="_blank" rel="noopener noreferrer" aria-label="Web browsers (experimental): Chrome, Firefox, Opera, Ubuntu Touch">
+            <span class="hub-icons" aria-hidden="true" title="Chrome · Firefox · Opera · Ubuntu Touch">
+              <!-- Chrome / Chromium — gold ring, blue core -->
               <svg class="app-ico browser-ico" viewBox="0 0 24 24" role="img" aria-label="Chrome">
-                <circle cx="12" cy="12" r="10" fill="#DEE1E6"/>
-                <path fill="#EA4335" d="M12 2a10 10 0 0 1 8.66 5H12a4 4 0 0 0-3.46 2L5.1 4.1A10 10 0 0 1 12 2z"/>
-                <path fill="#FBBC04" d="M20.66 7A10 10 0 0 1 12 22l3.46-6A4 4 0 0 0 12 8h8.66z"/>
-                <path fill="#34A853" d="M5.1 4.1 8.54 9A4 4 0 0 0 12 16l-3.46 6A10 10 0 0 1 5.1 4.1z"/>
-                <circle cx="12" cy="12" r="4" fill="#fff"/>
-                <circle cx="12" cy="12" r="3.1" fill="#4285F4"/>
+                <circle cx="12" cy="12" r="10" fill="#f0c86a" opacity="0.2"/>
+                <path fill="#f0c86a" d="M12 2a10 10 0 0 1 8.66 5H12a4 4 0 0 0-3.46 2L5.1 4.1A10 10 0 0 1 12 2z"/>
+                <path fill="#f0c86a" opacity="0.75" d="M20.66 7A10 10 0 0 1 12 22l3.46-6A4 4 0 0 0 12 8h8.66z"/>
+                <path fill="#f0c86a" opacity="0.5" d="M5.1 4.1 8.54 9A4 4 0 0 0 12 16l-3.46 6A10 10 0 0 1 5.1 4.1z"/>
+                <circle cx="12" cy="12" r="4" fill="#0a1620"/>
+                <circle cx="12" cy="12" r="3.1" fill="#3ecfbf"/>
               </svg>
-              <!-- Firefox: orange fox + purple globe -->
+              <!-- Firefox — blue body, gold accent core -->
               <svg class="app-ico browser-ico" viewBox="0 0 24 24" role="img" aria-label="Firefox">
-                <circle cx="12" cy="12.2" r="8.2" fill="#9059FF"/>
-                <path fill="#FF7139" d="M20.2 9.2c-.2-1.4-1.1-2.6-2.2-3.4.5 1.1.6 2.3.3 3.4-.9-1.6-2.5-2.6-4.4-2.6-1.3 0-2.5.4-3.4 1.1C9.3 5.4 10.9 3.8 13 3.2c-2.5.1-4.7 1.4-6.1 3.4C5.3 8.2 4.6 10.2 4.8 12.3c.3 3.9 3.5 7 7.4 7.1 3.6.1 6.7-2.2 7.7-5.5.4-1.4.4-2.9.3-4.7z"/>
-                <path fill="#FFD567" d="M12.1 9.4c1.6 0 2.9.9 3.5 2.2-.7-.4-1.5-.6-2.4-.6-2.2 0-4 1.6-4.2 3.7-.5-.8-.7-1.8-.6-2.8.4-1.5 1.8-2.5 3.7-2.5z"/>
-                <circle cx="12.2" cy="13.4" r="2.35" fill="#20123A"/>
+                <circle cx="12" cy="12.2" r="8.2" fill="#3ecfbf" opacity="0.28"/>
+                <path fill="#3ecfbf" d="M20.2 9.2c-.2-1.4-1.1-2.6-2.2-3.4.5 1.1.6 2.3.3 3.4-.9-1.6-2.5-2.6-4.4-2.6-1.3 0-2.5.4-3.4 1.1C9.3 5.4 10.9 3.8 13 3.2c-2.5.1-4.7 1.4-6.1 3.4C5.3 8.2 4.6 10.2 4.8 12.3c.3 3.9 3.5 7 7.4 7.1 3.6.1 6.7-2.2 7.7-5.5.4-1.4.4-2.9.3-4.7z"/>
+                <circle cx="12.2" cy="13.2" r="2.55" fill="#f0c86a"/>
+                <circle cx="12.2" cy="13.2" r="1.35" fill="#0a1620" opacity="0.85"/>
               </svg>
-              <!-- Edge: blue wave e-shape -->
-              <svg class="app-ico browser-ico" viewBox="0 0 24 24" role="img" aria-label="Edge">
-                <defs>
-                  <linearGradient id="edge-g-merch" x1="4" y1="4" x2="20" y2="20" gradientUnits="userSpaceOnUse">
-                    <stop stop-color="#0C59A4"/>
-                    <stop offset="0.55" stop-color="#1B9DE2"/>
-                    <stop offset="1" stop-color="#36C5F0"/>
-                  </linearGradient>
-                </defs>
-                <circle cx="12" cy="12" r="10" fill="url(#edge-g-merch)"/>
-                <path fill="#fff" d="M6.2 14.6c.6 3.1 3.3 5.4 6.6 5.4 3.7 0 6.7-2.7 7.1-6.2-1.4 1.7-3.6 2.7-6 2.7-1.5 0-2.9-.4-4-1.2.6.1 1.2.2 1.8.2 3.4 0 5.9-1.9 5.9-4.6 0-.7-.2-1.3-.5-1.9-1.4-2.5-4.3-3.6-7.2-2.7C7.1 7.2 5.3 9.6 5.3 12.3c0 .8.2 1.6.5 2.3h.4z"/>
-                <path fill="#9CE4FA" opacity="0.9" d="M12.8 8.1c1.9 0 3.5 1.1 3.5 2.8 0 1.9-1.8 3.2-4.4 3.2-1.4 0-2.6-.4-3.5-1 1.5 2.1 4.1 3.2 6.7 2.8 2.2-.3 3.9-1.9 4.4-4-1.1 1.1-2.7 1.7-4.4 1.7-1.6 0-2.9-.7-2.9-1.9 0-1.1 1-1.9 2.5-2.1.4-.1.7-.3.9-.5-.8-.6-1.7-.9-2.8-.9z"/>
+              <!-- Opera — gold outer, blue inner oval -->
+              <svg class="app-ico browser-ico" viewBox="0 0 24 24" role="img" aria-label="Opera">
+                <circle cx="12" cy="12" r="9.2" fill="none" stroke="#f0c86a" stroke-width="2"/>
+                <ellipse cx="12" cy="12" rx="4.15" ry="7.1" fill="none" stroke="#3ecfbf" stroke-width="1.85"/>
               </svg>
-              <!-- Brave: orange lion / shield-ish -->
-              <svg class="app-ico browser-ico" viewBox="0 0 24 24" role="img" aria-label="Brave">
-                <path fill="#FB542B" d="M12 2.2 4.8 5.1v5.6c0 5.1 3.4 9.8 7.2 11.1 3.8-1.3 7.2-6 7.2-11.1V5.1L12 2.2z"/>
-                <path fill="#fff" d="M12 5.1 8.1 6.7l.7 1.5L7.2 10l1.5.9L7.6 13.2l2.2.4L12 18.2l2.2-4.6 2.2-.4-1.1-2.3 1.5-.9-1.6-1.8.7-1.5L12 5.1z"/>
-                <path fill="#FB542B" d="M12 7.2 10.3 8l.5 1.1h2.4l.5-1.1L12 7.2zm-1.6 3.1L9.2 11.6l.9.5.4-1.8h-.1zm3.2 0h-.1l.4 1.8.9-.5-1.2-1.3zM10.4 13l-.5 1.1L12 16.1l2.1-2-.5-1.1h-3.2z"/>
+              <!-- Ubuntu Touch — gold center, blue satellites -->
+              <svg class="app-ico browser-ico" viewBox="0 0 24 24" role="img" aria-label="Ubuntu Touch">
+                <circle cx="12" cy="12" r="2.25" fill="#f0c86a"/>
+                <circle cx="12" cy="4.85" r="1.7" fill="#3ecfbf"/>
+                <circle cx="18.15" cy="15.55" r="1.7" fill="#3ecfbf"/>
+                <circle cx="5.85" cy="15.55" r="1.7" fill="#3ecfbf"/>
               </svg>
             </span>
             Web browsers (experimental)