.mobile-apps {
  padding: 48px 0;
  background: var(--surface, #fff);
}

.mobile-apps-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(270px, 340px);
  align-items: center;
  gap: 48px;
  padding: clamp(28px, 5vw, 64px);
  border-radius: 28px;
  color: #fff;
  background: radial-gradient(ellipse at top right, #138ac866, transparent 65%),
    linear-gradient(115deg, var(--blue, #003580), #075b9e);
}

.mobile-apps-kicker {
  display: block;
  margin-bottom: 12px;
  color: #d4e9ff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.mobile-apps-copy h2 {
  margin: 0 0 16px;
  color: inherit;
  font-size: clamp(28px, 3.5vw, 44px);
  line-height: 1.16;
  letter-spacing: -.035em;
}

.mobile-apps-copy p {
  max-width: 560px;
  margin: 0;
  color: #e0edfc;
  font-size: 16px;
  line-height: 1.7;
}

.mobile-apps-stores {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.mobile-apps-store {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 82px;
  padding: 16px 22px;
  border: 1px solid #ffffff45;
  border-radius: 16px;
  color: var(--blue, #003580);
  background: #fff;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}

.mobile-apps-store > i:first-child { width: 30px; font-size: 32px; text-align: center; }
.mobile-apps-store > span:first-of-type { min-width: 0; }
.mobile-apps-store small { display: block; font-size: 12px; line-height: 1.5; }
.mobile-apps-store strong { display: block; font-size: 23px; font-weight: 700; line-height: 1.25; }
.mobile-apps-store .mobile-apps-arrow { margin-left: auto; font-size: 15px; }
.mobile-apps-store[href]:hover { transform: translateY(-2px); box-shadow: 0 8px 22px #001c4c40; }
.mobile-apps-store[href]:focus-visible { outline: 3px solid var(--yellow, #ffd500); outline-offset: 4px; }
.mobile-apps-store-disabled { color: #e0edfc; background: #ffffff0d; }
.mobile-apps-soon { margin-left: auto; padding: 4px 9px; border-radius: 20px; background: #ffffff12; font-size: 11px; white-space: nowrap; }

@media (max-width: 760px) {
  .mobile-apps { padding: 28px 0; }
  .mobile-apps-panel { grid-template-columns: minmax(0, 1fr); gap: 28px; border-radius: 22px; }
  .mobile-apps-stores { width: 100%; max-width: 400px; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-apps-store { transition: none; }
}
