/* ═══════════════════════════════════════════════════════════════════════════
   /app/ — "دانلود اپلیکیشن". Page-scoped layer on top of the landing theme.

   Separate file for the same reason about.css, pages.css, crypto.css and
   home-prices.css are: css/style.min.css is a GENERATED bundle whose build
   script is not in this repo yet, so adding rules to index.css edits a source
   the served bundle is not rebuilt from — the page renders unstyled with
   nothing failing anywhere. Linked via `pagecss`, which now takes a list.

   Additive only. Tokens, .glass, .section*/.divider/.reveal/.stagger-child and
   the .btn-* family come from the bundle unchanged.

   RTL: the document is dir="rtl". Directional values are LOGICAL properties.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── HERO ─── */
.ap-hero { padding: 60px 0 48px; position: relative; }
.ap-hero::before {
  content: '';
  position: absolute;
  inset-block-start: -130px;
  inset-inline-end: -60px;
  width: 600px; height: 420px;
  background: radial-gradient(circle, rgba(61,123,255,0.15), transparent 66%);
  filter: blur(28px);
  pointer-events: none;
  z-index: 0;
}
.ap-hero > .container { position: relative; z-index: 1; }

.ap-crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 26px;
}
.ap-crumb a { color: var(--text-sub); text-decoration: none; transition: color 180ms; }
.ap-crumb a:hover { color: var(--blue2); }
.ap-crumb-sep { opacity: 0.4; }
.ap-crumb [aria-current] { color: var(--text); font-weight: 600; }

.ap-h1 {
  font-size: clamp(30px, 4.2vw, 50px);
  font-weight: 900;
  letter-spacing: -1px;
  line-height: 1.2;
  color: var(--text);
  margin: 0 0 16px;
}
/* Same padding/negative-margin pair as .hero-h1 .gradient-text in index.css and
   for the same reason: background-clip paints only inside the element box, so
   glyph ascenders and descenders outside it receive no paint and vanish. */
.ap-h1 .gradient-text {
  background: linear-gradient(90deg, #5C86FF 0%, #9945ff 50%, #00e5c8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  padding-block: 0.16em;
  margin-block: -0.16em;
}
.ap-lead {
  font-size: 16.5px;
  line-height: 1.9;
  color: var(--text-sub);
  max-width: 620px;
  margin: 0 0 18px;
}
.ap-version {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 100px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-sub);
}

/* ─── THE TWO PLATFORM CARDS ───
   Equal width, side by side from md. They are deliberately NOT stacked with
   Android first on desktop: putting them level is what tells a visitor at a
   glance that one route is a download and the other is a procedure. */
.ap-platforms { padding-top: 56px; }
.ap-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}
.ap-card {
  border-radius: var(--radius-lg);
  padding: 30px 26px;
  position: relative;
  overflow: hidden;
  /* Column so the step list can be pushed to the bottom and the two cards line
     their lists up even when the descriptions differ in length. */
  display: flex;
  flex-direction: column;
}
.ap-card::before {
  content: '';
  position: absolute;
  inset-block-start: -70px;
  inset-inline-end: -70px;
  width: 220px; height: 220px;
  border-radius: 50%;
  opacity: 0.08;
  pointer-events: none;
}
.ap-android::before { background: radial-gradient(circle, #00e5c8, transparent); }
.ap-ios::before     { background: radial-gradient(circle, #9945ff, transparent); }
.ap-card > * { position: relative; }

.ap-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.ap-os-icon {
  width: 52px; height: 52px;
  flex: 0 0 auto;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
}
.ap-os-icon svg { width: 26px; height: 26px; }
.ap-android .ap-os-icon { background: rgba(0,229,200,0.10);  box-shadow: 0 0 0 1px rgba(0,229,200,0.18); color: var(--teal); }
.ap-ios     .ap-os-icon { background: rgba(153,69,255,0.12); box-shadow: 0 0 0 1px rgba(153,69,255,0.2);  color: var(--violet); }
.ap-os-name { font-size: 21px; font-weight: 800; color: var(--text); margin: 0; letter-spacing: -0.4px; }
.ap-os-sub  { font-size: 13px; color: var(--text-muted); margin: 4px 0 0; }
.ap-os-desc { font-size: 14.5px; line-height: 1.9; color: var(--text-sub); margin: 0 0 22px; }

.ap-dl { align-self: flex-start; }
.ap-dl-note { font-size: 12.5px; color: var(--text-muted); margin-top: 10px; }

/* ─── STEP LIST ───
   A real <ol>, renumbered in Persian by hand rather than with a counter: the
   markers have to sit in a circle that the list-item marker cannot style, and
   an author writing a new step should see the number they are adding. */
.ap-steps {
  list-style: none;
  margin: 26px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--border);
  display: grid;
  gap: 14px;
  /* Pushed to the bottom so both cards' lists start on the same line. */
  margin-top: auto;
}
.ap-steps li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--text-sub);
}
.ap-step-n {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  margin-top: 3px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: var(--text);
  background: rgba(255,255,255,0.07);
  box-shadow: 0 0 0 1px var(--border);
}

.ap-alt {
  display: inline-block;
  margin-top: 18px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--blue2);
  text-decoration: none;
}
.ap-alt:hover { text-decoration: underline; }

/* ─── FAQ ─── */
.ap-faq-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.ap-faq-item {
  border-radius: 20px;
  padding: 24px;
}
.ap-q { font-size: 16px; font-weight: 800; color: var(--text); margin: 0 0 10px; letter-spacing: -0.3px; }
.ap-a { font-size: 14px; line-height: 1.9; color: var(--text-sub); margin: 0; }

/* ─── RESPONSIVE ─── */
@media (min-width: 768px) {
  .ap-grid     { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ap-faq-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
  .ap-hero     { padding: 80px 0 56px; }
  .ap-card     { padding: 34px 30px; }
}