/* The home page only. */

.stage { position: relative; overflow: hidden; }
/* Two soft lights behind the fold — the app's navy and gold, barely there. */
.glow { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .22;
        pointer-events: none; z-index: 0; }
.glow.gold { width: 34rem; height: 34rem; background: var(--gold-soft);
             inset-block-start: -12rem; inset-inline-start: -10rem; }
.glow.navy { width: 30rem; height: 30rem; background: #3C6E8F;
             inset-block-start: 10rem; inset-inline-end: -12rem; }
@media (prefers-color-scheme: dark) { .glow { opacity: .16; } }

.inner { position: relative; z-index: 1; max-width: 64rem; margin: 0 auto;
         padding: 2.6rem 1.25rem 0; }

.top { display: grid; gap: 2.4rem; grid-template-columns: 1fr; }
@media (min-width: 62rem) { .top { grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; } }

/* The mark is the first thing anybody sees, and it is the product's face —
   worth the room. It steps down on a narrow screen so it does not push the
   headline below the fold. */
.intro .logo { width: 132px; height: 132px; border-radius: 32px; display: block; }
@media (max-width: 40rem) { .intro .logo { width: 104px; height: 104px; border-radius: 26px; } }
.intro h1 { font-size: clamp(2rem, 5vw, 2.7rem); line-height: 1.08;
            letter-spacing: -.03em; margin: 1rem 0 .3rem; text-wrap: balance; }
.tagline { font-size: 1.12rem; color: var(--gold); margin: 0 0 .9rem; font-weight: 550; }
.desc { color: var(--dim); margin: 0; font-size: 1.02rem; }

/* ── What it does ── */
.feats { display: grid; gap: 1.1rem; margin: 0 0 1.8rem; }
.feat { display: flex; gap: .85rem; align-items: flex-start; }
.feat h3 { margin: 0 0 .15rem; font-size: 1rem; }
.feat p { margin: 0; color: var(--dim); font-size: .94rem; }
.fi { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px;
      display: grid; place-items: center; background: var(--surface);
      border: 1px solid var(--rule); }
.fi svg { width: 20px; height: 20px; }
.fi.g { color: var(--gold); }
.fi.n { color: #3C6E8F; }
@media (prefers-color-scheme: dark) { .fi.n { color: #7FB2D3; } }

/* ── Download ── */
.get { border-top: 1px solid var(--rule); padding-top: 1.3rem; }
.get-label { display: block; font-size: .88rem; color: var(--dim); margin-bottom: .6rem; }
.badges { display: flex; gap: .7rem; flex-wrap: wrap; }
.badge {
  display: inline-flex; align-items: center; gap: .6rem; text-decoration: none;
  background: var(--navy); color: #fff; border-radius: 12px;
  padding: .55rem 1rem .6rem; line-height: 1.15;
}
.badge:hover { filter: brightness(1.15); }
.badge svg { width: 26px; height: 26px; flex: 0 0 auto; }
.b-small { font-size: .68rem; opacity: .85; }
.b-big { font-size: 1.06rem; font-weight: 600; letter-spacing: -.01em; }

/* ── Screenshots ── */
.shots { margin: 2.8rem 0 0; }
.shots-track {
  display: flex; gap: 1rem; overflow-x: auto; padding: 0 0 1.6rem;
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
.shots-track::-webkit-scrollbar { display: none; }
.shot { flex: 0 0 auto; width: 232px; scroll-snap-align: center; text-align: center; }
.shot img { width: 232px; border-radius: 20px; border: 1px solid var(--rule);
            display: block; background: var(--surface); }
.shot span { display: block; margin-top: .5rem; font-size: .84rem; color: var(--dim); }