:root {
  --bg: #ffffff;
  --card: #f5f5f7;
  --text: #1d1d1f;
  --muted: #6e6e73;
  --link: #0066cc;
  --rule: #d2d2d7;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.47;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

.site-header, main, .site-footer { max-width: 980px; margin: 0 auto; padding: 0 22px; }

.site-header { padding-top: 22px; padding-bottom: 22px; }
.wordmark { color: var(--text); font-weight: 600; font-size: 21px; letter-spacing: -0.01em; }
.wordmark:hover { text-decoration: none; }

.hero { padding: 112px 0 96px; }
.hero h1 {
  margin: 0;
  max-width: 820px;
  font-size: clamp(40px, 6.4vw, 72px);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.apps { padding-bottom: 120px; }
.app {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  background: var(--card);
  border-radius: 28px;
  padding: 48px;
}
.app-icon { width: 128px; height: 128px; border-radius: 28px; flex: none; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.app-body h2 { margin: 0; font-size: 32px; line-height: 1.12; font-weight: 700; letter-spacing: -0.02em; }
.subtitle { margin: 6px 0 0; color: var(--muted); font-size: 19px; }
.desc { margin: 20px 0 0; max-width: 560px; }
.platforms { margin: 12px 0 0; color: var(--muted); font-size: 14px; }
.actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-top: 28px; }
.badge { display: inline-block; line-height: 0; }
.badge:hover { opacity: .85; }
.more { font-size: 17px; }

.coming { margin: 40px 0 0; color: var(--muted); }

.site-footer {
  padding-top: 20px;
  padding-bottom: 40px;
  color: var(--muted);
  font-size: 12px;
}
.site-footer p { margin: 0 0 6px; }
.site-footer::before { content: ""; display: block; border-top: 1px solid var(--rule); margin-bottom: 20px; }

@media (max-width: 640px) {
  body { font-size: 16px; }
  .site-header, main, .site-footer { padding-left: 16px; padding-right: 16px; }
  .hero { padding: 64px 0 56px; }
  .app { flex-direction: column; gap: 24px; padding: 28px 24px; border-radius: 22px; }
  .app-icon { width: 96px; height: 96px; border-radius: 22px; }
  .app-body h2 { font-size: 26px; }
  .subtitle { font-size: 17px; }
  .apps { padding-bottom: 72px; }
}