website: M3 goes live - the whole site switches to the controller's shell at once

Part D. Every public page now wears the controller's frame around the website's
own content. One commit, as asked: never half old, half new.

  20 pages switched (12 Hungarian incl. the hidden prices page, 8 English)
  website/preview/ deleted entirely - A, M1, M2 and M3 studies all gone
  robots.txt: the Disallow: /preview/ line removed with them
  site.css?v=22 / shell.css?v=22 on every page

PROVED before pushing, not after:
  * HEAD TAGS: title, meta description, keywords, author, robots, canonical, every
    hreflang, all seven Open Graph tags, all four Twitter tags and the JSON-LD
    captured on all 19 pages before the switch and compared after. The ONLY
    difference anywhere is the dash substitution inside the two FAQ pages'
    FAQPage JSON-LD - verified by applying the same substitution to the "before"
    copy and getting an exact match. Nothing else moved.
  * VISIBLE TEXT: identical to the live pages word for word, legal texts identical
    with no substitution permitted at all.
  * No page is left noindex (the two download pages' noindex,follow is their own,
    pre-existing and unchanged), no page mentions /preview/, every page has a
    footer, no page overflows at 390px.

THE HEAD-TAG DIFF EARNED ITS PLACE. The home page was about to ship carrying
`noindex, nofollow` from the preview, and had lost meta keywords, meta author, all
seven Open Graph tags, all four Twitter tags and the LocalBusiness JSON-LD -
because its head was hand-built while every other page carried its live one over.
The diff caught it; nothing on the rendered page would have. The generator now
uses the live head for EVERY page including the home one.

szolgaltatasok-nonpublic.html was converted too. It is in no menu and was not in
the brief's list, but leaving one page on the old chrome would have left the site
half-switched - which is the one thing part D was not allowed to do.

scripts/site_gates.py: SHELL is now the real page set; MOCKUPS is empty; gate 3's
old nav/footer loop keeps working for any page added later WITHOUT the shell, and
skips the ones that have it.

website/en/apps.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="no-js">
 <head>
+    <script>document.documentElement.className=document.documentElement.className.replace('no-js','js');</script>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Apps to install — 58 apps for a home server | Felhom.eu</title>
@@ -43,42 +44,62 @@
     }
     </script>
     <!-- shared assets: bump ?v= together on any site.css/icons.svg change -->
-    <link rel="stylesheet" href="/assets/site.css?v=21">
+    <link rel="stylesheet" href="/assets/site.css?v=22">
+    <link rel="stylesheet" href="/assets/shell.css?v=22">
     <link rel="icon" type="image/png" href="/assets/logo_favicon_2.svg">
     <script defer src="/assets/gallery.js?v=2"></script>
     <script defer src="https://stats.felhom.eu/script.js" data-website-id="d419db57-5e1c-48df-bdb3-c29f25fb1661"></script>
 </head>
-<body class="page-alkalmazasok">
-    <nav>
-        <div class="container">
-            <a href="/en/" class="logo">
-                <img class="logo-mark" src="/assets/logo-mark.svg" alt="" aria-hidden="true">
-                <img class="logo-word" src="/assets/logo-wordmark.png" alt="felhom.eu">
+<body class="shell page-alkalmazasok">
+    <header class="mobile-topbar">
+        <a href="/en/" class="mobile-topbar-logo"><img src="/assets/logo_notext_white.svg" alt="Felhom.eu"></a>
+        <button type="button" class="nav-burger" id="navBurger" aria-expanded="false" aria-controls="sidebar" aria-label="Menu">
+            <span class="hamburger-box"><span class="hamburger-line"></span><span class="hamburger-line"></span><span class="hamburger-line"></span></span>
+        </button>
+    </header>
+    <div class="nav-backdrop" id="navBackdrop" hidden></div>
+    <nav class="sidebar" id="sidebar">
+        <div class="sidebar-header">
+            <a href="/en/" class="sidebar-logo-link">
+                <img src="/assets/logo_notext_white.svg" alt="" class="sidebar-logo" aria-hidden="true">
+                <img src="/assets/logo-wordmark.png" alt="felhom.eu" class="sidebar-word">
             </a>
-            <ul class="nav-links">
-                <li><a href="/en/#services">Services</a></li>
-                <li><a href="/en/apps" class="active">Apps</a></li>
-                <li><a href="/en/technology">Technology</a></li>
-                <li><a href="/en/backups">Backups</a></li>
-                <li><a href="/en/faq">FAQ</a></li>
-                <li><a href="/en/contact">Contact</a></li>
-                <li class="lang-globe-li"><details class="lang-globe"><summary class="lang-globe-btn" aria-label="Language" title="Language"><svg class="ico-lg" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-globe"/></svg></summary><ul class="lang-globe-menu"><li><a href="/alkalmazasok" lang="hu" hreflang="hu" class="lang-globe-item">Magyar</a></li><li><a href="/en/apps" lang="en" hreflang="en" class="lang-globe-item current" aria-current="true">English</a></li></ul></details></li>
+        </div>
+        <ul class="nav-links">
+                <li><a href="/en/"><svg class="ico" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-home"/></svg>Home</a></li>
+                <li><a href="/en/#services"><svg class="ico" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-rocket"/></svg>Services</a></li>
+                <li class="nav-group is-open">
+                    <button type="button" class="nav-group-toggle active" aria-expanded="true" aria-controls="nav-group-apps"><svg class="ico" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-package"/></svg>Applications<svg class="ico nav-chevron" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-chevron-down"/></svg></button>
+                    <ul id="nav-group-apps" class="nav-links nav-links-sub nav-links-nested">
+                        <li><a href="/en/apps">All applications</a></li>
+                        <li><a href="/en/apps#files-office">Files &amp; Office</a></li>
+                        <li><a href="/en/apps#media-entertainment">Media &amp; Entertainment</a></li>
+                        <li><a href="/en/apps#home-lifestyle">Home &amp; Lifestyle</a></li>
+                        <li><a href="/en/apps#productivity-knowledge">Productivity &amp; Knowledge</a></li>
+                        <li><a href="/en/apps#system-development">System &amp; Development</a></li>
+                    </ul>
+                </li>
+                <li><a href="/en/technology"><svg class="ico" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-layers"/></svg>Technology</a></li>
+                <li><a href="/en/backups"><svg class="ico" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-shield-check"/></svg>Backups</a></li>
+        </ul>
+        <div class="sidebar-bottom">
+            <a href="/en/testing" class="btn btn-outline sidebar-cta">Apply as a tester →</a>
+            <div class="nav-group-label">About Felhom</div>
+            <ul class="nav-links nav-links-sub">
+                    <li><a href="/en/#how-it-works">How it works</a></li>
+                    <li><a href="/en/faq">FAQ</a></li>
+                    <li><a href="/en/contact">Contact</a></li>
             </ul>
-            <button class="hamburger" id="hamburger" aria-label="Open menu" aria-expanded="false">
-                <span class="hamburger-box">
-                    <span class="hamburger-line"></span>
-                    <span class="hamburger-line"></span>
-                    <span class="hamburger-line"></span>
-                </span>
-            </button>
+            <div class="sidebar-footer">
+                <details class="lang-globe"><summary class="lang-globe-btn" aria-label="Language" title="Language"><svg class="ico" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-globe"/></svg></summary><ul class="lang-globe-menu"><li><a href="/alkalmazasok" lang="hu" hreflang="hu" class="lang-globe-item">Magyar</a></li><li><a href="/en/apps" lang="en" hreflang="en" class="lang-globe-item current" aria-current="true">English</a></li></ul></details>
+            </div>
         </div>
     </nav>
-    <div class="mobile-overlay" id="mobileOverlay"></div>
-    <main>
-        <section class="page-header">
-            <div class="container">
+<main class="content">
+                <div class="page-header">
                 <h1>Apps to <span>install</span></h1>
-                <p>Choose from 58 apps. Almost all of them are free, open-source software, and every one runs on your own server.</p>
+            </div>
+                <p class="page-lede">Choose from 58 apps. Almost all of them are free, open-source software, and every one runs on your own server.</p>
                 <div class="disclaimer-banner">
                     <h3><svg class="ico-lg" aria-hidden="true"><use href="/assets/icons.svg?v=1#i-info"/></svg> Good to know</h3>
                     <ul>
@@ -88,8 +109,7 @@
                         <li>If an app is missing, we look at whether it can join the catalog – <a href="/en/contact">just ask!</a></li>
                     </ul>
                 </div>
-            </div>
-        </section>
+
         <section class="apps-section">
             <div class="container">
 
@@ -1262,19 +1282,12 @@
         <section class="cta-section">
             <div class="container">
                 <h2>Can't find what you are looking for?</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>
+                <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>
         </section>
     </main>
 
-    <footer>
-        <div class="container">
-            <p>© 2026 felhom.eu – Your own cloud, your own rules. Felhom serves households in Hungary.</p>
-            <p class="footer-legal">Operated by Nagyfenyvesi Viktor · <a href="mailto:info@felhom.eu">info@felhom.eu</a> · <a href="/adatkezeles">Privacy notice (Hungarian)</a> · <a href="/feltetelek">Terms (Hungarian)</a></p>
-        </div>
-    </footer>
-
     <script>
     (function() {
         var hamburger = document.getElementById('hamburger');
@@ -1336,5 +1349,35 @@
         });
     })();
     </script>
+<footer>
+        <div class="container">
+            <p>© 2026 felhom.eu – Your own cloud, your own rules. Felhom serves households in Hungary.</p>
+            <p class="footer-legal">Operated by Nagyfenyvesi Viktor · <a href="mailto:info@felhom.eu">info@felhom.eu</a> · <a href="/adatkezeles">Privacy notice (Hungarian)</a> · <a href="/feltetelek">Terms (Hungarian)</a></p>
+        </div>
+    </footer>
+    <script>
+    (function(){
+        var b=document.getElementById('navBurger'),s=document.getElementById('sidebar'),k=document.getElementById('navBackdrop');
+        if(!b||!s||!k)return;
+        function open(){s.classList.add('is-open');k.hidden=false;document.body.classList.add('nav-open');b.setAttribute('aria-expanded','true');}
+        function close(){s.classList.remove('is-open');k.hidden=true;document.body.classList.remove('nav-open');b.setAttribute('aria-expanded','false');}
+        b.addEventListener('click',function(){s.classList.contains('is-open')?close():open();});
+        k.addEventListener('click',close);
+        document.addEventListener('keydown',function(e){if(e.key==='Escape'&&s.classList.contains('is-open')){close();b.focus();}});
+        s.querySelectorAll('a').forEach(function(l){l.addEventListener('click',close);});
+        window.addEventListener('resize',function(){if(window.innerWidth>768)close();});
+    })();
+    document.addEventListener('click',function(e){
+        var btn=e.target.closest?e.target.closest('.nav-group-toggle'):null;
+        if(!btn)return;
+        var g=btn.closest('.nav-group');if(!g)return;
+        var willOpen=!g.classList.contains('is-open');
+        document.querySelectorAll('.nav-group.is-open').forEach(function(x){
+            x.classList.remove('is-open');
+            var t=x.querySelector('.nav-group-toggle');if(t)t.setAttribute('aria-expanded','false');
+        });
+        if(willOpen){g.classList.add('is-open');btn.setAttribute('aria-expanded','true');}
+    });
+    </script>
 </body>
-</html>
+</html>