:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  min-height: 100vh;
  display: grid;
  grid-template-rows: 1fr auto;
  color: #fff;
  background:
    radial-gradient(circle at 50% 35%, rgba(0, 153, 255, .18), transparent 34rem),
    radial-gradient(circle at 50% 100%, rgba(0, 82, 204, .12), transparent 32rem),
    #020b1c;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,190,255,.035), transparent 35%, rgba(0,0,0,.2));
}
.hero {
  min-height: calc(100vh - 64px);
  display: grid;
  place-items: center;
  padding: 56px 24px 28px;
}
.content { width: min(940px, 100%); text-align: center; }
.logo {
  display: block;
  width: min(860px, 94vw);
  height: auto;
  margin: 0 auto 38px;
  filter: drop-shadow(0 0 18px rgba(0, 178, 255, .22));
}
.copy h1 {
  margin: 0;
  font-size: clamp(1.85rem, 4vw, 3rem);
  line-height: 1.08;
  letter-spacing: -.035em;
}
.copy h1 span { color: #16bfff; }
.copy p {
  margin: 13px 0 0;
  color: #aebdd3;
  font-size: clamp(1rem, 2vw, 1.15rem);
}
.stores {
  margin-top: 32px;
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.store-button {
  width: 205px;
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 17px;
  color: white;
  text-decoration: none;
  text-align: left;
  background: #050505;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 11px;
  box-shadow: 0 8px 28px rgba(0,0,0,.3);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.store-button:hover,
.store-button:focus-visible {
  transform: translateY(-3px);
  border-color: #39c8ff;
  box-shadow: 0 10px 34px rgba(0, 163, 255, .25);
  outline: none;
}
.apple-icon { width: 34px; height: 40px; flex: 0 0 auto; color: #fff; }
.play-icon { width: 34px; height: 40px; flex: 0 0 auto; }
.store-text { display: flex; flex-direction: column; line-height: 1; }
.store-text small { font-size: 10px; letter-spacing: .01em; margin-bottom: 4px; }
.store-text strong { font-size: 22px; font-weight: 500; letter-spacing: -.02em; white-space: nowrap; }
.availability { margin: 23px 0 0; color: #7186a5; font-size: .9rem; }
footer { padding: 26px 24px 32px; text-align: center; color: #8195b1; font-size: 1rem; font-weight: 500; border-top: 1px solid rgba(0, 174, 255, .18); }
@media (max-width: 520px) {
  .hero { padding: 34px 18px 20px; }
  .logo { width: 100%; margin-bottom: 32px; }
  .stores { flex-direction: column; align-items: center; gap: 12px; }
  .store-button { width: min(230px, 100%); }
}

/* Desktop viewport fit: keep the complete landing page within one screen. */
@media (min-width: 521px) {
  html, body { height: 100%; overflow: hidden; }
  body { min-height: 100dvh; height: 100dvh; grid-template-rows: minmax(0, 1fr) auto; }
  .hero { min-height: 0; height: 100%; padding: clamp(18px, 3vh, 38px) 24px clamp(12px, 2vh, 24px); }
  .logo { width: min(760px, 82vw, 88vh); margin-bottom: clamp(18px, 3vh, 32px); }
  .copy h1 { font-size: clamp(1.85rem, min(3.2vw, 5vh), 2.75rem); }
  .copy p { margin-top: clamp(8px, 1.4vh, 13px); }
  .stores { margin-top: clamp(18px, 3vh, 28px); }
  .availability { margin-top: clamp(14px, 2.2vh, 21px); }
  footer { padding: clamp(14px, 2vh, 20px) 24px; }
}