chore: remove redundant comments and boilerplate across codebase

Strip doc comments, section dividers, HTML comments, and Flutter
template boilerplate that add no informational value. No logic or
behavior changes.

site/index.html

@@ -7,7 +7,6 @@
   <meta name="description" content="Mobile music utility built with Flutter and Go. High-quality audio management for your personal library.">
   <meta name="theme-color" content="#0a0a0a">
 
-  <!-- Open Graph -->
   <meta property="og:title" content="SpotiFLAC Mobile">
   <meta property="og:description" content="Mobile music utility built with Flutter and Go. High-quality audio management for your personal library.">
   <meta property="og:image" content="icon.png">
@@ -15,7 +14,6 @@
 
   <link rel="icon" href="icon.png" type="image/png">
 
-  <!-- Google Sans Flex -->
   <style>
     @font-face { font-family: 'Google Sans Flex'; font-style: normal; font-display: swap; font-weight: 400; src: url(https://cdn.jsdelivr.net/fontsource/fonts/google-sans-flex@latest/latin-400-normal.woff2) format('woff2'); }
     @font-face { font-family: 'Google Sans Flex'; font-style: normal; font-display: swap; font-weight: 500; src: url(https://cdn.jsdelivr.net/fontsource/fonts/google-sans-flex@latest/latin-500-normal.woff2) format('woff2'); }
@@ -25,7 +23,6 @@
   </style>
 
   <style>
-    /* ── M3 AMOLED surface ramp ── */
     :root {
       --green: #1DB954;
       --green-dim: #1aa34a;
@@ -54,7 +51,6 @@
     a { color: var(--green); text-decoration: none; }
     a:hover { text-decoration: underline; }
 
-    /* ── NAV ── */
     nav {
       position: fixed; top: 0; left: 0; right: 0; z-index: 100;
       background: rgba(18,18,18,.78);
@@ -92,7 +88,6 @@
       font-family: inherit; color: #555; line-height: 1.4; margin-left: 2px;
     }
 
-    /* ── HERO ── */
     .hero {
       min-height: 100vh;
       display: flex; flex-direction: column; align-items: center; justify-content: center;
@@ -121,13 +116,11 @@
     .btn-secondary { background: var(--bg-card); color: var(--text); }
     .btn-secondary:hover { background: var(--bg-card-hover); text-decoration: none; }
 
-    /* ── SECTIONS ── */
     section { padding: 80px 24px; }
     .section-inner { max-width: var(--max-w); margin: auto; }
     .section-title { font-size: 1.8rem; font-weight: 700; text-align: center; margin-bottom: 12px; }
     .section-sub { text-align: center; color: var(--text-dim); max-width: 560px; margin: 0 auto 48px; }
 
-    /* ── FEATURES ── */
     .features-grid {
       display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
       gap: 12px;
@@ -146,7 +139,6 @@
     .feature-card h3 { font-size: 1.05rem; margin-bottom: 6px; }
     .feature-card p { color: var(--text-dim); font-size: .9rem; }
 
-    /* ── FAQ ── */
     .faq-list { max-width: 700px; margin: auto; display: flex; flex-direction: column; gap: 8px; }
     .faq-item {
       background: var(--bg-card); border-radius: 16px;
@@ -161,7 +153,6 @@
     .faq-item[open] summary::after { content: "\2212"; }
     .faq-item .faq-answer { padding: 0 20px 18px; color: var(--text-dim); font-size: .92rem; line-height: 1.7; }
 
-    /* ── FOOTER ── */
     footer {
       background: var(--surface);
       padding: 40px 24px; text-align: center;
@@ -172,7 +163,6 @@
     .footer-links a:hover { color: var(--text); }
     .footer-copy { color: #555; font-size: .8rem; }
 
-    /* ── MOBILE MENU ── */
     .nav-burger {
       display: none; width: 40px; height: 40px; border-radius: 12px;
       background: none; border: none; cursor: pointer;
@@ -240,7 +230,6 @@
     }
     .mobile-menu .mobile-icons a svg { width: 20px; height: 20px; fill: currentColor; }
 
-    /* ── MOBILE ── */
     @media (max-width: 640px) {
       .nav-links { display: none; }
       .nav-burger { display: flex; }
@@ -248,7 +237,6 @@
       section { padding: 60px 16px; }
     }
 
-    /* ── HERO MOCKUPS ── */
     .hero-mockups {
       display: flex; gap: 20px; justify-content: center; align-items: flex-end;
       margin-top: 48px; perspective: 800px;
@@ -277,10 +265,8 @@
       .phone-frame.phone-center { width: 200px; }
     }
 
-    /* ── SVG ICONS ── */
     .icon-svg { width: 20px; height: 20px; fill: currentColor; }
 
-    /* ── SEARCH MODAL ── */
     .search-overlay {
       position: fixed; inset: 0; background: rgba(0,0,0,.6);
       z-index: 300; opacity: 0; pointer-events: none;
@@ -353,7 +339,6 @@
 </head>
 <body>
 
-<!-- NAV -->
 <nav>
   <div class="nav-inner">
     <a class="nav-brand" href="#">
@@ -381,7 +366,6 @@
   </div>
 </nav>
 
-<!-- MOBILE MENU -->
 <div class="mobile-overlay" id="mobileOverlay" onclick="toggleMenu()"></div>
 <div class="mobile-menu" id="mobileMenu">
   <a href="#features">Features</a>
@@ -401,7 +385,6 @@
   </div>
 </div>
 
-<!-- HERO -->
 <section class="hero">
   <h1>Spoti<span>FLAC</span> Mobile</h1>
   <p>Mobile music utility built with Flutter and Go. High-quality audio management for your personal library.</p>
@@ -433,7 +416,6 @@
   </div>
 </section>
 
-<!-- FEATURES -->
 <section id="features">
   <div class="section-inner">
     <h2 class="section-title">Features</h2>
@@ -486,7 +468,6 @@
 </section>
 
 
-<!-- FAQ -->
 <section id="faq">
   <div class="section-inner">
     <h2 class="section-title">FAQ</h2>
@@ -524,7 +505,6 @@
   </div>
 </section>
 
-<!-- SEARCH MODAL -->
 <div class="search-overlay" id="searchOverlay" onclick="if(event.target===this)closeSearch()">
   <div class="search-modal">
     <div class="search-header">
@@ -543,7 +523,6 @@
   </div>
 </div>
 
-<!-- FOOTER -->
 <footer>
   <div class="footer-inner">
     <div class="footer-links">
@@ -573,7 +552,6 @@ document.getElementById('mobileMenu').addEventListener('click', function(e) {
 });
 </script>
 <script>
-/* ── DOCS SEARCH ── */
 (function() {
   var overlay = document.getElementById('searchOverlay');
   var input = document.getElementById('searchInput');