:root {
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #182c2d;
  background: #f7f8f5;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; display: flex; flex-direction: column; }
main { width: min(100%, 760px); margin: auto; padding: 48px 24px; text-align: center; }
.logo { display: block; width: 240px; max-width: 80%; height: auto; margin: 0 auto; }
h1 { font-size: clamp(38px, 7vw, 64px); line-height: 1.08; letter-spacing: -.05em; font-weight: 650; margin: 0 0 26px; }
.description { max-width: 540px; margin: 0 auto; font-size: 18px; line-height: 1.7; color: #5b6967; }
.stores { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 38px; }
.store { position: relative; }
button { display: flex; align-items: center; gap: 12px; min-width: 190px; padding: 12px 20px; border: 1px solid #d5dcd7; border-radius: 12px; background: #edf0ec; color: #66716c; font: inherit; text-align: left; cursor: not-allowed; }
button svg { width: 27px; height: 30px; flex-shrink: 0; }
button svg:first-child:not([fill]) { fill: currentColor; }
button small { display: block; font-size: 10px; line-height: 1.5; }
button strong { display: block; font-weight: 600; font-size: 19px; line-height: 1.3; }
button:focus-visible { outline: 2px solid #008c95; outline-offset: 4px; }
.tooltip { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); z-index: 1; width: max-content; max-width: 260px; padding: 9px 12px; border-radius: 7px; background: #182c2d; color: white; font-size: 12px; visibility: hidden; }
.store:hover .tooltip, .store:focus-within .tooltip { visibility: visible; }
.app-preview { --preview-height: 340px; height: var(--preview-height); margin: 20px -24px 32px; padding-top: 42px; overflow: hidden; mask-image: linear-gradient(to bottom, #000 80%, transparent); }
.device { width: 390px; max-width: 76%; margin: 0 auto; padding: 8px; border: 2px solid #8c9291; border-radius: 56px; background: #1c2021; box-shadow: 12px 18px 40px #182c2d26, inset 0 0 0 2px #424848; transform: rotate(-9deg); transform-origin: 50% calc((var(--preview-height) - 42px) / 2); }
.device img { display: block; width: 100%; height: auto; border-radius: 46px; }
@media (max-width: 480px) {
  main { padding-top: 40px; }
  .logo { width: 210px; }
  .description { font-size: 16px; }
  .stores { flex-direction: column; align-items: center; }
  .app-preview { --preview-height: 265px; margin-top: 24px; }
  .device { padding: 6px; border-radius: 43px; }
  .device img { border-radius: 35px; }
}