/* Download — clean, dark, official badges.
 *
 * Two-column: a tall portrait phone-screenshot on one side
 * (using a real screenshot from `assets/qlean-app-pic/`) and
 * the call-out / store badges on the other. Badges are the real
 * Apple "Download on the App Store" SVG and the Google
 * "Get it on Google Play" PNG, both in their black variants.
 */

.download {
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  border-block: 1px solid var(--line);
}

.download__layout {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}

.download__phone {
  position: relative;
  justify-self: center;
  width: min(100%, 320px);
}
.download__phone img {
  width: 100%;
  border-radius: 36px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.download__copy h2 { margin-block: var(--sp-4) var(--sp-3); }
.download__copy p {
  color: var(--text-2);
  font-size: var(--fs-lead);
  line-height: 1.65;
  max-width: 52ch;
}

.download__badges {
  display: flex;
  gap: 16px;
  margin-block-start: var(--sp-6);
  flex-wrap: wrap;
}

/* The official badges render at the platform-recommended size.
 * Both are clickable links that open the store listing in a new
 * tab (URLs to be supplied; `#` for now). The wrapper applies a
 * lift on hover without touching the badge artwork. */
.store-badge {
  display: inline-block;
  line-height: 0;
  transition: transform var(--t-base) var(--ease-out),
              filter var(--t-base) var(--ease-out);
}
.store-badge:hover { transform: translateY(-3px); filter: brightness(1.06); }
.store-badge img,
.store-badge svg {
  height: 56px;
  width: auto;
  display: block;
}

.download__note {
  margin-block-start: var(--sp-5);
  color: var(--text-4);
  font-size: 0.85rem;
}