Redesign download section for world-class UX

- Add GitHub Invertocat icon to hero Download APK button
- Simplify download section to "Also available on"
- Remove card-based layout in favor of store badges
- Add F-Droid badge (grayed, coming soon)
- Keep IzzyOnDroid badge (live)
- Cleaner visual hierarchy: hero CTA > store alternatives

Author: one-kash

index.html

@@ -327,67 +327,24 @@
 
         /* Download Section */
         .download {
-            padding: 6rem 2rem;
+            padding: 4rem 2rem;
             text-align: center;
             background: var(--bg-card);
         }
 
         .download h2 {
-            font-size: clamp(2rem, 5vw, 3rem);
-            margin-bottom: 1rem;
-        }
-
-        .download-subtitle {
-            color: var(--text-secondary);
-            font-size: 1.1rem;
-            margin-bottom: 3rem;
-        }
-
-        .download-options {
-            display: flex;
-            gap: 1.5rem;
-            justify-content: center;
-            flex-wrap: wrap;
-            max-width: 800px;
-            margin: 0 auto;
-        }
-
-        .download-card {
-            background: var(--bg-elevated);
-            border: 1px solid var(--border);
-            border-radius: 16px;
-            padding: 2rem;
-            min-width: 220px;
-            text-decoration: none;
-            color: var(--text-primary);
-            transition: all 0.2s;
-        }
-
-        .download-card:hover {
-            border-color: var(--accent);
-            transform: translateY(-4px);
-        }
-
-        .download-card-icon {
-            font-size: 2.5rem;
-            margin-bottom: 1rem;
-        }
-
-        .download-card h3 {
-            font-size: 1.1rem;
-            margin-bottom: 0.25rem;
-        }
-
-        .download-card p {
+            font-size: 1.5rem;
+            font-weight: 500;
             color: var(--text-secondary);
-            font-size: 0.85rem;
+            margin-bottom: 2rem;
         }
 
         .store-badges {
             display: flex;
-            gap: 1rem;
+            gap: 2rem;
             justify-content: center;
-            margin-top: 2rem;
+            align-items: flex-start;
+            flex-wrap: wrap;
         }
 
         .store-badges a {
@@ -403,6 +360,26 @@
             height: 60px;
         }
 
+        .badge-coming-soon {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 0.5rem;
+            opacity: 0.4;
+        }
+
+        .badge-coming-soon img {
+            height: 60px;
+            filter: grayscale(100%);
+        }
+
+        .badge-coming-soon span {
+            font-size: 0.75rem;
+            color: var(--text-muted);
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+        }
+
         /* Footer */
         footer {
             padding: 3rem 2rem;
@@ -492,6 +469,9 @@ <h1>The calendar that respects your privacy</h1>
         </p>
         <div class="cta-buttons">
             <a href="https://github.com/KashCal/KashCal/releases/latest" class="btn btn-primary">
+                <svg viewBox="0 0 16 16" width="20" height="20" fill="currentColor" aria-hidden="true">
+                    <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
+                </svg>
                 Download APK
             </a>
             <a href="https://github.com/KashCal/KashCal" class="btn btn-secondary">
@@ -610,26 +590,19 @@ <h3>No Account</h3>
     </section>
 
     <section class="download" id="download">
-        <h2>Get KashCal</h2>
-        <p class="download-subtitle">Free, forever. No strings attached.</p>
-        <div class="download-options">
-            <a href="https://github.com/KashCal/KashCal/releases/latest" class="download-card">
-                <div class="download-card-icon">📦</div>
-                <h3>GitHub Releases</h3>
-                <p>Download APK directly</p>
-            </a>
-            <a href="#" class="download-card" style="opacity: 0.6; pointer-events: none;">
-                <div class="download-card-icon">🤖</div>
-                <h3>F-Droid</h3>
-                <p>Coming soon</p>
-            </a>
-        </div>
+        <h2>Also available on</h2>
         <div class="store-badges">
             <a href="https://apt.izzysoft.de/fdroid/index/apk/org.onekash.kashcal">
                 <img src="https://gitlab.com/IzzyOnDroid/repo/-/raw/master/assets/IzzyOnDroidButtonGreyBorder_nofont.png"
                      alt="Get it on IzzyOnDroid"
                      height="60">
             </a>
+            <div class="badge-coming-soon">
+                <img src="https://f-droid.org/assets/fdroid-logo-text_S0MUfk_FsnAYL7n2MQye-34IoSNm6QM6xYjDnMqkufo=.svg"
+                     alt="F-Droid"
+                     height="60">
+                <span>Coming soon</span>
+            </div>
         </div>
     </section>