website: the two-tone headings are back, and the home page's sections are ruled apart

Two notes from the operator, 2026-10-12: the white/blue heading split was lost
in the M3 switch and should return everywhere, the apps page categories
included; and the home page's sections ran into one another.

- 41 headings get their <span> back (home 5+5, apps 6+6, FAQ 6+7, services 3+3).
  The style never went away - site.css has styled `h2 span` blue all along; the
  M3 rewrite dropped the markup. No text changed: the span wraps words that were
  already there. The three home headings that predate M3 are split where they
  were split then.
- Apps and FAQ categories are new to the treatment: a name with an & splits
  there, a phrase on its last words. Five one-word headings stay plain.
- The home page's sections get a 1px --line rule with 2.75rem of air on each
  side, so it sits centred in the gap; the first also parts the hero from the
  page. Home page only.
- Blue on the page background measures 7.9:1 - AA at any size.
- site.css ?v=28.

website/en/apps.html

@@ -46,7 +46,7 @@
     <link rel="preload" as="font" type="font/woff2" crossorigin href="/assets/fonts/pjs-latin.woff2">
     <link rel="preload" as="font" type="font/woff2" crossorigin href="/assets/fonts/pjs-latin-ext.woff2">
     <!-- shared assets: bump ?v= together on any site.css/icons.svg change -->
-    <link rel="stylesheet" href="/assets/site.css?v=27">
+    <link rel="stylesheet" href="/assets/site.css?v=28">
     <link rel="stylesheet" href="/assets/shell.css?v=25">
     <link rel="icon" type="image/png" href="/assets/logo_favicon_2.svg">
     <script defer src="/assets/gallery.js?v=2"></script>
@@ -121,7 +121,7 @@
                 <div class="category-section" id="files">
                     <div class="category-header">
                         <span class="category-icon"><svg class="ico-lg" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-folder"/></svg></span>
-                        <h2>Files & Office</h2>
+                        <h2>Files & <span>Office</span></h2>
                         <span class="app-count">6 apps + 1 built in</span>
                     </div>
                     <div class="app-grid">
@@ -263,7 +263,7 @@
                 <div class="category-section" id="media">
                     <div class="category-header">
                         <span class="category-icon"><svg class="ico-lg" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-tv"/></svg></span>
-                        <h2>Media & Entertainment</h2>
+                        <h2>Media & <span>Entertainment</span></h2>
                         <span class="app-count">15 apps</span>
                     </div>
                     <div class="app-grid">
@@ -539,7 +539,7 @@
                 <div class="category-section" id="home">
                     <div class="category-header">
                         <span class="category-icon"><svg class="ico-lg" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-home"/></svg></span>
-                        <h2>Home & Lifestyle</h2>
+                        <h2>Home & <span>Lifestyle</span></h2>
                         <span class="app-count">14 apps</span>
                     </div>
                     <div class="app-grid">
@@ -851,7 +851,7 @@
                 <div class="category-section" id="productivity">
                     <div class="category-header">
                         <span class="category-icon"><svg class="ico-lg" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-chart-column"/></svg></span>
-                        <h2>Productivity & Knowledge</h2>
+                        <h2>Productivity & <span>Knowledge</span></h2>
                         <span class="app-count">12 apps</span>
                     </div>
                     <div class="app-grid">
@@ -1083,7 +1083,7 @@
                 <div class="category-section" id="system">
                     <div class="category-header">
                         <span class="category-icon"><svg class="ico-lg" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-wrench"/></svg></span>
-                        <h2>System & Development</h2>
+                        <h2>System & <span>Development</span></h2>
                         <span class="app-count">9 apps</span>
                     </div>
                     <div class="app-grid">
@@ -1283,7 +1283,7 @@
         <!-- CTA Section -->
         <section class="cta-section">
             <div class="container">
-                <h2>Can't find what you are looking for?</h2>
+                <h2>Can't find <span>what you are looking for?</span></h2>
                 <p>This is the whole catalog. If you need something specific, get in touch – we will look at whether the right app can join it.</p>
                 <a href="/en/contact" class="cta-button">Get in touch →</a>
             </div>