Orbit — Mobile App Landing

<header class="ob-hero px-3 pt-3 pb-5">
  <nav class="container d-flex align-items-center py-2">
    <span class="fw-bold fs-5"><i class="bi bi-rocket-takeoff me-1"></i>Atlas Go</span>
    <div class="ms-auto d-none d-md-flex gap-4 small opacity-75"><a class="text-white text-decoration-none" href="#features">Features</a><a class="text-white text-decoration-none" href="#faq">FAQ</a></div>
    <a class="btn btn-light btn-sm fw-semibold ms-3 rounded-pill px-3" href="#download">Get the app</a>
  </nav>
  <div class="container py-4"><div class="row align-items-center g-5">
    <div class="col-lg-6">
      <span class="badge rounded-pill text-bg-light mb-3" style="color:var(--ob-a)"><i class="bi bi-star-fill me-1"></i>4.9 · convertatlas.org</span>
      <h1 class="fw-bold mb-3" style="font-size:clamp(2.1rem,5vw,3.2rem);letter-spacing:-.02em">Your dev toolkit,<br>in your pocket.</h1>
      <p class="opacity-75 mb-4" style="max-width:440px">Atlas Go puts the ConvertAtlas toolkit on your phone: converters, snippets and cheatsheets — offline, fast and free.</p>
      <div class="d-flex flex-wrap gap-2" id="download"><a class="ob-store" href="#"><i class="bi bi-apple fs-5"></i><span><small class="d-block opacity-75" style="font-size:.62rem">Download on the</small>App Store</span></a><a class="ob-store" href="#"><i class="bi bi-google-play fs-5"></i><span><small class="d-block opacity-75" style="font-size:.62rem">Get it on</small>Google Play</span></a></div>
    </div>
    <div class="col-lg-6">
      <div class="ob-phone"><div class="ob-screen">
        <div class="ob-notch"></div>
        <div class="p-3 d-grid gap-2">
          <div class="text-center my-2"><div class="ob-ring"><span>76%</span></div><small class="text-secondary d-block mt-1">Today's toolkit</small></div>
          <div class="ob-bubble d-flex justify-content-between align-items-center"><span>🔧 JSON formatter</span><i class="bi bi-check-circle-fill" style="color:#16a34a"></i></div>
          <div class="ob-bubble d-flex justify-content-between align-items-center"><span>🎨 Color converter</span><i class="bi bi-check-circle-fill" style="color:#16a34a"></i></div>
          <div class="ob-bubble d-flex justify-content-between align-items-center"><span>📋 Regex tester</span><span class="text-secondary small">5/8</span></div>
          <div class="ob-bubble d-flex justify-content-between align-items-center"><span>📚 Flexbox cheatsheet</span><span class="text-secondary small">⏰ 22:30</span></div>
        </div>
      </div></div>
    </div>
  </div></div>
</header>
<section id="features" class="container py-5">
  <h2 class="fw-bold text-center mb-4">Built for builders</h2>
  <div class="row g-4 text-center">
    <div class="col-md-3 col-6"><div class="ob-feat-ico mx-auto mb-2"><i class="bi bi-bell"></i></div><h6 class="fw-bold">60+ tools</h6><p class="small text-secondary mb-0">Every converter you reach for daily.</p></div>
    <div class="col-md-3 col-6"><div class="ob-feat-ico mx-auto mb-2"><i class="bi bi-fire"></i></div><h6 class="fw-bold">Offline</h6><p class="small text-secondary mb-0">Everything works without a connection.</p></div>
    <div class="col-md-3 col-6"><div class="ob-feat-ico mx-auto mb-2"><i class="bi bi-graph-up"></i></div><h6 class="fw-bold">Snippets</h6><p class="small text-secondary mb-0">435+ components, copy in one tap.</p></div>
    <div class="col-md-3 col-6"><div class="ob-feat-ico mx-auto mb-2"><i class="bi bi-cloud-moon"></i></div><h6 class="fw-bold">Private</h6><p class="small text-secondary mb-0">Your data stays on your device.</p></div>
  </div>
</section>
<section class="container py-3"><div class="ob-stats p-4 p-md-5"><div class="row text-center g-3">
  <div class="col-4"><div class="h3 fw-bold mb-0">60+</div><small class="opacity-75">Tools</small></div>
  <div class="col-4"><div class="h3 fw-bold mb-0">435+</div><small class="opacity-75">Snippets</small></div>
  <div class="col-4"><div class="h3 fw-bold mb-0">4.9★</div><small class="opacity-75">Avg. rating</small></div>
</div></div></section>
<section id="faq" class="container py-5" style="max-width:680px">
  <h2 class="fw-bold text-center mb-4">Questions, answered</h2>
  <details class="ob-faq" open><summary>Is Atlas Go free?</summary><p>Yes — like convertatlas.org itself, the core toolkit is free. Pro adds offline template downloads and sync.</p></details>
  <details class="ob-faq"><summary>Does it work offline?</summary><p>Completely. Everything is stored on-device; sync is optional and end-to-end encrypted.</p></details>
  <details class="ob-faq"><summary>Android and iOS?</summary><p>Both, with feature parity. The web version is always at convertatlas.org.</p></details>
</section>
<footer class="py-4 text-center small text-secondary border-top">
  <i class="bi bi-rocket-takeoff me-1" style="color:var(--ob-a)"></i>Atlas Go © 2026 · Built with <a href="https://convertatlas.org" class="fw-semibold text-decoration-none" style="color:var(--ob-a)">ConvertAtlas</a>
</footer>

:root{--ob-a:#0c8fc4;--ob-b:#5dd6ff;--ob-ink:#0e1726}
body{font-family:system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--ob-ink);background:#fff}
.ob-hero{background:linear-gradient(160deg,#07243a,#0c8fc4 70%,#5dd6ff);color:#fff;border-radius:0 0 38px 38px}
.ob-store{background:#0e1726;color:#fff;border-radius:12px;padding:.55rem 1.1rem;text-decoration:none;display:inline-flex;align-items:center;gap:8px;font-size:.85rem}
.ob-store:hover{background:#1f2c44;color:#fff}
.ob-phone{width:248px;height:500px;border-radius:42px;background:#0e1726;padding:12px;box-shadow:0 40px 90px rgba(7,36,58,.45);margin:0 auto}
.ob-screen{background:linear-gradient(180deg,#eaf7fd,#fff);border-radius:32px;height:100%;overflow:hidden;display:flex;flex-direction:column}
.ob-notch{width:90px;height:22px;background:#0e1726;border-radius:0 0 14px 14px;margin:0 auto}
.ob-bubble{background:#fff;border-radius:14px;box-shadow:0 4px 14px rgba(7,36,58,.08);padding:10px 12px;font-size:.72rem}
.ob-ring{width:74px;height:74px;border-radius:50%;background:conic-gradient(var(--ob-a) 0 76%,#e3eef5 76% 100%);display:grid;place-items:center;margin:0 auto}
.ob-ring>span{width:56px;height:56px;border-radius:50%;background:#fff;display:grid;place-items:center;font-weight:800;color:var(--ob-a)}
.ob-feat-ico{width:50px;height:50px;border-radius:15px;display:grid;place-items:center;font-size:22px;background:#e6f6fd;color:var(--ob-a)}
.ob-stats{background:#07243a;color:#fff;border-radius:24px}
details.ob-faq{border:1px solid #e3eef5;border-radius:14px;padding:14px 18px;background:#fff}
details.ob-faq+details.ob-faq{margin-top:10px}
details.ob-faq summary{font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
details.ob-faq summary::after{content:"+";font-weight:700;color:var(--ob-a);font-size:1.2rem}
details.ob-faq[open] summary::after{content:"−"}
details.ob-faq p{margin:10px 0 0;font-size:.88rem;color:#5c6f80}