index.html

---
layout: default
title_full: GitHub Store — Open-Source App Store for GitHub Releases
description: Free, open-source app store for GitHub releases. F-Droid + Obtainium alternative for Android, Linux, macOS, Windows. Auto-update, silent install, China-friendly mirrors.
keywords: github store, github releases app store, f-droid alternative, obtainium alternative, install android apps from github, open source app store, apk auto update, kotlin multiplatform, compose multiplatform, china mirror
homepage: true
---

<!-- ═══ Hero ═══ -->
<section class="hero">
    <div class="hero__bg">
        <div class="hero__grid"></div>
        <div class="hero__orb hero__orb--1"></div>
        <div class="hero__orb hero__orb--2"></div>
        <div class="hero__orb hero__orb--3"></div>
    </div>
    <div class="container">
        <div class="hero__content">
            <div class="hero__text">
                <div class="hero__badge">
                    <span class="hero__badge__dot"></span>
                    Open Source &amp; Free Forever
                </div>
                <h1 class="hero__title">The app store for<br><em>GitHub releases</em></h1>
                <p class="hero__subtitle">
                    Discover, install, and update open-source software directly from GitHub. One-click installs for Android, Linux, macOS, and Windows — no more hunting through release pages.
                </p>
                <div class="hero__actions">
                    <a href="/download/" class="btn btn--filled">
                        <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M5 20h14v-2H5v2zM19 9h-4V3H9v6H5l7 7 7-7z"/></svg>
                        Download
                    </a>
                    <a href="/features/" class="btn btn--tonal">
                        Explore features
                    </a>
                    <a href="https://github.com/OpenHub-Store/Github-Store" class="btn btn--outlined" target="_blank" rel="noopener">
                        <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34-.46-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.87 1.52 2.34 1.07 2.91.83.09-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.92 0-1.11.38-2 1.03-2.71-.1-.25-.45-1.29.1-2.64 0 0 .84-.27 2.75 1.02.79-.22 1.65-.33 2.5-.33.85 0 1.71.11 2.5.33 1.91-1.29 2.75-1.02 2.75-1.02.55 1.35.2 2.39.1 2.64.65.71 1.03 1.6 1.03 2.71 0 3.82-2.34 4.66-4.57 4.91.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2Z"/></svg>
                        Source
                    </a>
                </div>
                <div class="hero__stats">
                    <div class="hero__stat">
                        <span class="hero__stat__value" data-count="260000" data-suffix="+">0</span>
                        <span class="hero__stat__label">Updates served</span>
                    </div>
                    <div class="hero__stat">
                        <span class="hero__stat__value" data-count="12710" data-suffix="+">0</span>
                        <span class="hero__stat__label">GitHub Stars</span>
                    </div>
                    <div class="hero__stat">
                        <span class="hero__stat__value" data-count="4" data-suffix="">0</span>
                        <span class="hero__stat__label">Platforms</span>
                    </div>
                </div>
            </div>
            <div class="hero__visual">
                <div class="hero__phone-glow"></div>
                <div class="hero__chip hero__chip--1">
                    <span class="chip__icon chip__icon--teal"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M5 20h14v-2H5v2zM19 9h-4V3H9v6H5l7 7 7-7z"/></svg></span>
                    One-click install
                </div>
                <div class="hero__chip hero__chip--2">
                    <span class="chip__icon chip__icon--blue"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg></span>
                    Update available
                </div>
                <div class="hero__chip hero__chip--3">
                    <span class="chip__icon chip__icon--warm"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg></span>
                    12K+ stars
                </div>
                <div class="hero__phone">
                    <div class="hero__phone-frame">
                        <picture>
                            <source type="image/webp"
                                    srcset="/assets/images/hero/01-320w.webp 320w, /assets/images/hero/01-640w.webp 640w, /assets/images/hero/01-960w.webp 960w"
                                    sizes="(max-width: 640px) 50vw, 280px">
                            <img src="/assets/images/hero/01-640w.jpg"
                                 srcset="/assets/images/hero/01-320w.jpg 320w, /assets/images/hero/01-640w.jpg 640w, /assets/images/hero/01-960w.jpg 960w"
                                 sizes="(max-width: 640px) 50vw, 280px"
                                 alt="GitHub Store mobile app discover screen with trending GitHub release apps"
                                 width="320" height="694"
                                 loading="eager" fetchpriority="high" decoding="async">
                        </picture>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- ═══ Platforms ═══ -->
<div class="platforms">
    <div class="container">
        <div class="platforms__track">
            <span class="platforms__label">Available on</span>
            <span class="platform-chip"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M17.523 2l-5.478 9.483h-.049L6.477 2H2.192l7.711 12.218L2 22h4.357l5.737-9.832h.049L17.856 22h4.336l-8.039-12.14L22 2z"/></svg> Android</span>
            <span class="platform-chip"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M3 12V6.75l6-1.32v6.48L3 12zm17-9v8.75l-10 .15V5.21L20 3zM3 13l6 .09v6.81l-6-1.15V13zm7 .25V20.1l10 1.9V13.4l-10-.15z"/></svg> Windows</span>
            <span class="platform-chip"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.37 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/></svg> macOS</span>
            <span class="platform-chip"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12.504 0c-.155 0-.311.002-.465.014C8.51.147 5.352 2.396 3.65 5.616c-1.7 3.22-1.663 7.16.241 10.283C5.742 18.82 8.79 20.832 12.104 21c.157.005.313.008.467.008 3.17 0 6.093-1.696 7.78-4.403 1.686-2.707 1.898-6.12.562-9.073-1.337-2.953-4.068-5.03-7.244-5.517A11.3 11.3 0 0 0 12.504 0z"/></svg> Linux</span>
        </div>
    </div>
</div>

<!-- ═══ Comparison ═══ -->
<section class="comparison container" id="comparison" aria-labelledby="comparison-heading">
    <div class="section-header reveal">
        <p class="section-header__overline">Comparison</p>
        <h2 class="section-header__title" id="comparison-heading">How GitHub Store compares</h2>
        <p class="section-header__subtitle">Looking for an <strong>F-Droid alternative</strong>, <strong>Obtainium alternative</strong>, or a way to install Android apps directly from GitHub? GitHub Store turns any GitHub release into a one-tap install across all your devices.</p>
    </div>
    <div class="comparison__scroller" role="region" aria-label="Feature comparison table">
        <table class="comparison__table">
            <thead>
                <tr>
                    <th scope="col">Feature</th>
                    <th scope="col" class="comparison__own">GitHub Store</th>
                    <th scope="col">Obtainium</th>
                    <th scope="col">F-Droid</th>
                    <th scope="col">Aurora Store</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">Open source</th>
                    <td class="comparison__own"><span class="cmp-yes" aria-label="yes">✓</span> Apache-2.0</td>
                    <td><span class="cmp-yes" aria-label="yes">✓</span></td>
                    <td><span class="cmp-yes" aria-label="yes">✓</span></td>
                    <td><span class="cmp-yes" aria-label="yes">✓</span></td>
                </tr>
                <tr>
                    <th scope="row">Cross-platform (Desktop too)</th>
                    <td class="comparison__own"><span class="cmp-yes" aria-label="yes">✓</span> Win, macOS, Linux, Android</td>
                    <td><span class="cmp-no" aria-label="no">✕</span> Android only</td>
                    <td><span class="cmp-no" aria-label="no">✕</span> Android only</td>
                    <td><span class="cmp-no" aria-label="no">✕</span> Android only</td>
                </tr>
                <tr>
                    <th scope="row">Discover new apps</th>
                    <td class="comparison__own"><span class="cmp-yes" aria-label="yes">✓</span> Trending, popular, hot</td>
                    <td><span class="cmp-no" aria-label="no">✕</span> Manual repo URL</td>
                    <td><span class="cmp-yes" aria-label="yes">✓</span> Curated</td>
                    <td><span class="cmp-yes" aria-label="yes">✓</span> Play Store mirror</td>
                </tr>
                <tr>
                    <th scope="row">Silent install (Shizuku/Dhizuku)</th>
                    <td class="comparison__own"><span class="cmp-yes" aria-label="yes">✓</span></td>
                    <td><span class="cmp-yes" aria-label="yes">✓</span> Shizuku</td>
                    <td><span class="cmp-yes" aria-label="yes">✓</span></td>
                    <td><span class="cmp-no" aria-label="no">✕</span></td>
                </tr>
                <tr>
                    <th scope="row">China mirror system</th>
                    <td class="comparison__own"><span class="cmp-yes" aria-label="yes">✓</span> Multi-source race + SHA-256 verify</td>
                    <td><span class="cmp-no" aria-label="no">✕</span></td>
                    <td><span class="cmp-partial" aria-label="partial">~</span> Limited</td>
                    <td><span class="cmp-partial" aria-label="partial">~</span> Limited</td>
                </tr>
                <tr>
                    <th scope="row">Direct GitHub releases</th>
                    <td class="comparison__own"><span class="cmp-yes" aria-label="yes">✓</span> Native</td>
                    <td><span class="cmp-yes" aria-label="yes">✓</span> Native</td>
                    <td><span class="cmp-no" aria-label="no">✕</span> Curated only</td>
                    <td><span class="cmp-no" aria-label="no">✕</span> Play only</td>
                </tr>
                <tr>
                    <th scope="row">Library import from Obtainium</th>
                    <td class="comparison__own"><span class="cmp-yes" aria-label="yes">✓</span></td>
                    <td><span class="cmp-na" aria-label="not applicable">—</span></td>
                    <td><span class="cmp-no" aria-label="no">✕</span></td>
                    <td><span class="cmp-no" aria-label="no">✕</span></td>
                </tr>
            </tbody>
        </table>
    </div>
</section>

<!-- ═══ FAQ ═══ -->
<section class="faq container" id="faq" aria-labelledby="faq-heading">
    <div class="section-header reveal">
        <p class="section-header__overline">FAQ</p>
        <h2 class="section-header__title" id="faq-heading">Frequently Asked Questions</h2>
    </div>
    <div class="faq__list">
        <details class="faq__item">
            <summary><h3>What is GitHub Store?</h3><span class="faq__chev" aria-hidden="true">+</span></summary>
            <p>GitHub Store is a free, open-source app store for GitHub releases. It works on Android, Windows, macOS, and Linux. License: Apache-2.0.</p>
        </details>
        <details class="faq__item">
            <summary><h3>Is GitHub Store free?</h3><span class="faq__chev" aria-hidden="true">+</span></summary>
            <p>Yes. The app, the source code, and the backend are all open source under Apache 2.0.</p>
        </details>
        <details class="faq__item">
            <summary><h3>How is GitHub Store different from F-Droid?</h3><span class="faq__chev" aria-hidden="true">+</span></summary>
            <p>F-Droid only includes apps in its curated FOSS-only repository. GitHub Store discovers and installs apps directly from GitHub releases — including apps not in F-Droid.</p>
        </details>
        <details class="faq__item">
            <summary><h3>How is GitHub Store different from Obtainium?</h3><span class="faq__chev" aria-hidden="true">+</span></summary>
            <p>Obtainium is a power-user updater for tracked GitHub repos. GitHub Store adds a discovery layer (browse trending, popular, hot releases), an install layer (Shizuku/Dhizuku silent install), and works on Desktop too. You can import your Obtainium library with one tap.</p>
        </details>
        <details class="faq__item">
            <summary><h3>Does GitHub Store work in China?</h3><span class="faq__chev" aria-hidden="true">+</span></summary>
            <p>Yes. The mirror system and backend OAuth proxy work around GitHub throttling on Chinese networks.</p>
        </details>
    </div>
</section>

<!-- ═══ Latest Blog ═══ -->
<section class="latest-news container" aria-labelledby="latest-news-heading">
    <header class="latest-news__header">
        <h2 id="latest-news-heading">From the blog</h2>
        <a href="/blog/" class="latest-news__more">All posts →</a>
    </header>
    <ul class="latest-news__items">
        {% assign latest = site.news | sort: "date" | reverse | slice: 0, 3 %}
        {% for post in latest %}
        <li>
            <time datetime="{{ post.date | date_to_xmlschema }}">
                {{ post.date | date: "%b %-d, %Y" }}
            </time>
            <a href="{{ post.url }}">{{ post.title }}</a>
            {% if post.description %}<p>{{ post.description }}</p>{% endif %}
        </li>
        {% endfor %}
    </ul>
</section>

<!-- ═══ Features ═══ -->
<section class="features" id="features">
    <div class="container">
        <div class="section-header reveal">
            <p class="section-header__overline">Features</p>
            <h2 class="section-header__title">Everything you need, nothing you don't</h2>
            <p class="section-header__subtitle">GitHub Store strips away the complexity of finding and installing open-source software.</p>
        </div>
        <div class="features__grid reveal-stagger">
            <div class="feature-card reveal">
                <div class="feature-card__icon">
                    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
                </div>
                <h3 class="feature-card__title">Smart Discovery</h3>
                <p class="feature-card__desc">Browse trending, hot releases, and most popular repos. Only apps with real installable binaries for your platform are shown — zero source-only noise.</p>
            </div>
            <div class="feature-card reveal">
                <div class="feature-card__icon">
                    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M5 20h14v-2H5v2zM19 9h-4V3H9v6H5l7 7 7-7z"/></svg>
                </div>
                <h3 class="feature-card__title">One-Click Installs</h3>
                <p class="feature-card__desc">Tap install and the correct binary downloads and hands off to your OS — APK on Android, EXE on Windows, DMG on macOS, AppImage or DEB on Linux.</p>
            </div>
            <div class="feature-card reveal">
                <div class="feature-card__icon">
                    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M21 10.12h-6.78l2.74-2.82c-2.73-2.7-7.15-2.8-9.88-.1-2.73 2.71-2.73 7.08 0 9.79s7.15 2.71 9.88 0C18.32 15.65 19 14.08 19 12.1h2c0 1.98-.88 4.55-2.64 6.29-3.51 3.48-9.21 3.48-12.72 0-3.5-3.47-3.53-9.11-.02-12.58s9.14-3.49 12.65 0L21 3v7.12zM12.5 8v4.25l3.5 2.08-.72 1.21L11 13V8h1.5z"/></svg>
                </div>
                <h3 class="feature-card__title">Update Tracking</h3>
                <p class="feature-card__desc">Remembers what you installed and highlights new releases automatically. Stay current without manually checking GitHub repos ever again.</p>
            </div>
        </div>
    </div>
</section>

<!-- ═══ How It Works ═══ -->
<section class="how-it-works" id="how-it-works">
    <div class="container">
        <div class="section-header reveal">
            <p class="section-header__overline">How It Works</p>
            <h2 class="section-header__title">From discovery to install in seconds</h2>
        </div>
        <div class="steps reveal-stagger" id="stepsContainer">
            <div class="steps__line" id="stepsLine"></div>
            <div class="step reveal">
                <div class="step__number">1</div>
                <h3 class="step__title">Browse</h3>
                <p class="step__desc">Explore trending, new, and popular apps curated for your platform.</p>
            </div>
            <div class="step reveal">
                <div class="step__number">2</div>
                <h3 class="step__title">Discover</h3>
                <p class="step__desc">Read READMEs, changelogs, and stats — all in one clean interface.</p>
            </div>
            <div class="step reveal">
                <div class="step__number">3</div>
                <h3 class="step__title">Install</h3>
                <p class="step__desc">One tap downloads the right binary and hands it to your OS installer.</p>
            </div>
            <div class="step reveal">
                <div class="step__number">4</div>
                <h3 class="step__title">Stay Updated</h3>
                <p class="step__desc">New release notifications — update with a single tap, every time.</p>
            </div>
        </div>
    </div>
</section>

<!-- ═══ Get Listed ═══ -->
<section class="get-listed" id="developers">
    <div class="container">
        <div class="get-listed__card reveal-scale">
            <div>
                <h2 class="get-listed__title">Get your app listed</h2>
                <p class="get-listed__desc">No manual submission needed. GitHub Store uses the public Search API — if your project meets these conditions, it appears automatically.</p>
                <a href="https://github.com/OpenHub-Store/Github-Store/wiki" class="get-listed__btn" target="_blank" rel="noopener">
                    Read the Wiki
                    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
                </a>
            </div>
            <div>
                <ul class="checklist">
                    <li><span class="check-icon"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg></span> Public repository on GitHub</li>
                    <li><span class="check-icon"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg></span> At least one published, non-draft release</li>
                    <li><span class="check-icon"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg></span> Installable assets (.apk, .exe, .msi, .dmg, .pkg, .deb, .rpm, .AppImage)</li>
                    <li><span class="check-icon"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg></span> Relevant topics and description for discoverability</li>
                </ul>
            </div>
        </div>
    </div>
</section>

<!-- ═══ About ═══ -->
<section class="about container" id="about" aria-labelledby="about-heading">
    <div class="section-header reveal">
        <p class="section-header__overline">About</p>
        <h2 class="section-header__title" id="about-heading">About GitHub Store</h2>
    </div>
    <div class="about__grid">
        <div class="about__card reveal">
            <p class="about__lede">A one-developer indie project building a cross-platform, open-source app store for GitHub releases — Android, Windows, macOS, Linux. Apache-2.0. No tracking, no account, no ads.</p>
        </div>
        <ul class="about__facts reveal-stagger">
            <li class="about__fact reveal">
                <span class="about__fact__label">Created</span>
                <span class="about__fact__value">November 2025</span>
                <span class="about__fact__sub">by Usmon Narzullayev (17, Uzbekistan)</span>
            </li>
            <li class="about__fact reveal">
                <span class="about__fact__label">License</span>
                <span class="about__fact__value">Apache-2.0</span>
                <span class="about__fact__sub">App, source, and backend</span>
            </li>
            <li class="about__fact reveal">
                <span class="about__fact__label">Tech stack</span>
                <span class="about__fact__value">Kotlin Multiplatform</span>
                <span class="about__fact__sub">+ Compose Multiplatform</span>
            </li>
            <li class="about__fact reveal">
                <span class="about__fact__label">Platforms</span>
                <span class="about__fact__value">4</span>
                <span class="about__fact__sub">Android, Windows, macOS, Linux</span>
            </li>
            <li class="about__fact reveal">
                <span class="about__fact__label">Updates served</span>
                <span class="about__fact__value">260,000+</span>
                <span class="about__fact__sub">since launch</span>
            </li>
            <li class="about__fact reveal">
                <span class="about__fact__label">GitHub stars</span>
                <span class="about__fact__value">12,710</span>
                <span class="about__fact__sub">at <a href="https://github.com/OpenHub-Store/GitHub-Store" target="_blank" rel="noopener">OpenHub-Store/GitHub-Store</a></span>
            </li>
            <li class="about__fact reveal">
                <span class="about__fact__label">Languages</span>
                <span class="about__fact__value">13</span>
                <span class="about__fact__sub">en, ar, bn, zh-Hans, es, fr, hi, it, ja, ko, pl, ru, tr</span>
            </li>
            <li class="about__fact reveal">
                <span class="about__fact__label">Backend</span>
                <span class="about__fact__value">Open source</span>
                <span class="about__fact__sub">Apache-2.0 · self-hostable</span>
            </li>
        </ul>
    </div>
</section>

<!-- ═══ Newsletter ═══ -->
<section class="newsletter-section container" aria-labelledby="newsletter-heading">
    <div class="newsletter-section__inner reveal" id="newsletter-heading">
        {% include newsletter.html id="home" title="Stay in the loop" subtitle="Founder essays, comparison guides, and release notes. Roughly one email every 2 weeks. No spam, no tracking, no selling your address." %}
    </div>
</section>

<!-- ═══ CTA ═══ -->
<section class="cta">
    <div class="cta__glow"></div>
    <div class="container">
        <div class="cta__inner reveal">
            <h2 class="cta__title">Ready to try GitHub Store?</h2>
            <p class="cta__desc">100% free, no ads, no tracking. Join 100,000+ users who discover and install open-source software the easy way — and connect with the community on Discord.</p>
            <div class="cta__buttons">
                <a href="/download/" class="btn btn--filled">
                    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M5 20h14v-2H5v2zM19 9h-4V3H9v6H5l7 7 7-7z"/></svg>
                    Download
                </a>
                <a href="/sponsors/" class="btn btn--tonal">Sponsor the project</a>
                <a href="https://discord.gg/x9Cvh2Z9qS" class="btn btn--outlined" target="_blank" rel="noopener">
                    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03z"/></svg>
                    Join Discord
                </a>
            </div>
        </div>
    </div>
</section>

<script>
(() => {
    /* ─── Steps Timeline ─── */
    const stepsC = document.getElementById('stepsContainer');
    const stepsLine = document.getElementById('stepsLine');
    if (stepsC && stepsLine) {
        const steps = stepsC.querySelectorAll('.step');
        const stepsObs = new IntersectionObserver(entries => {
            entries.forEach(e => {
                if (e.isIntersecting) {
                    stepsLine.classList.add('animate');
                    steps.forEach((s, i) => setTimeout(() => s.classList.add('active'), 400 + i * 400));
                    stepsObs.unobserve(e.target);
                }
            });
        }, { threshold: 0.3 });
        stepsObs.observe(stepsC);
    }

    /* ─── Animated Counters ─── */
    const counters = document.querySelectorAll('[data-count]');
    let countersDone = false;
    function fmtNum(n) { return n >= 1000 ? (n / 1000).toFixed(n >= 10000 ? 0 : 1).replace(/\.0$/, '') + 'K' : String(n); }
    function animateCounters() {
        if (countersDone) return; countersDone = true;
        counters.forEach(el => {
            const target = +el.dataset.count, suffix = el.dataset.suffix || '', dur = 1800, start = performance.now();
            (function tick(now) {
                const t = Math.min((now - start) / dur, 1);
                el.textContent = fmtNum(Math.round((1 - Math.pow(1 - t, 3)) * target)) + suffix;
                if (t < 1) requestAnimationFrame(tick);
            })(start);
        });
    }
    const statsObs = new IntersectionObserver(entries => {
        entries.forEach(e => { if (e.isIntersecting) { animateCounters(); statsObs.unobserve(e.target); } });
    }, { threshold: 0.5 });
    counters.forEach(el => statsObs.observe(el));

    /* ─── Parallax Orbs (mouse-follow, desktop only) ─── */
    if (!matchMedia('(pointer: coarse)').matches) {
        let mx = 0, my = 0;
        document.addEventListener('mousemove', e => { mx = (e.clientX / innerWidth - 0.5) * 2; my = (e.clientY / innerHeight - 0.5) * 2; }, { passive: true });
        const orbs = document.querySelectorAll('.hero__orb');
        (function pTick() {
            orbs.forEach((o, i) => { const f = (i + 1) * 14; o.style.transform = `translate(${mx * f}px, ${my * f}px)`; });
            requestAnimationFrame(pTick);
        })();
    }
})();
</script>