:root {
  --brand-blue: #007AFF;
  --brand-red: #FF3B30;
  --bg: #f8f8f6;
  --ink: #1f2937;
  --logo-size: 23px;
}
body { background: var(--bg); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Inter, 'Helvetica Neue', Arial, system-ui, sans-serif; }
.wrap { max-width: 1040px; margin: 0 auto; padding: 24px; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand { display:flex; align-items:center; gap:12px; font-weight:700; font-size:20px; }
.brand svg { width:28px; height:28px; }
.nav a { margin-left:16px; text-decoration:none; color: var(--ink); opacity:.8; }
.nav a:hover { opacity:1; }
.hero { margin-top: 32px; border-radius: 20px; padding: 48px 28px; background: linear-gradient(180deg, rgba(0,122,255,.08), rgba(255,255,255,0)); }
.hero h1 { font-size: clamp(28px, 5vw, 48px); line-height:1.1; margin:0 0 12px; }
.hero p.lead { font-size: clamp(16px, 2.4vw, 20px); margin: 0 0 20px; opacity:.9; }
.cta { display:flex; flex-wrap:wrap; gap:12px; margin-top: 10px; }
.btn { border:0; border-radius: 999px; padding: 12px 18px; font-weight:600; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:10px; }
.btn.primary { background: var(--brand-blue); color:white; }
.btn.secondary { background: white; color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.06); border: 1px solid rgba(0,0,0,.08); height: 46px}
.badges { display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }
.badge-pill { border-radius: 999px; padding:6px 10px; background:#fff; border:1px solid rgba(0,0,0,.08); font-size:12px; }
.gallery { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:14px; margin-top:28px; }
.shot { background:white; border-radius: 16px; padding:10px; box-shadow: 0 6px 20px rgba(0,0,0,.06); border:1px solid rgba(0,0,0,.06); }
.shot img { width:100%; height:auto; border-radius: 12px; display:block; }
.features { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:16px; margin-top:28px; }
.feature { background:white; border-radius:16px; padding:18px; border:1px solid rgba(0,0,0,.06); box-shadow: 0 4px 12px rgba(0,0,0,.04); }
.feature h3 { margin:0 0 6px; }
.tagline { color: var(--brand-blue); font-weight:700; }
footer { margin: 40px 0 20px; opacity:.7; font-size:14px; }
.appstore-badge { display:inline-flex;}
@media (prefers-color-scheme: dark) {
  body { background: #0e1116; color: #e5e7eb; }
  .hero { background: linear-gradient(180deg, rgba(10,132,255,.14), rgba(0,0,0,0)); }
  .shot, .feature { background:#0f1319; border-color:#1f2937; }
  .btn.secondary { background:#0f1319; color:#e5e7eb; border-color:#1f2937; }
  .badge-pill { background:#0f1319; border-color:#1f2937; }
}
.brand svg,
.brand img.brand-logo {
  width: var(--logo-size);
  height: var(--logo-size);
  flex: 0 0 var(--logo-size);
  object-fit: contain;   /* keep aspect ratio */
  display: block;        /* avoids baseline gaps */
}

/* default: side-by-side */
.topbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.nav{ display:flex; gap:16px; }

/* stack on phones */
@media (max-width: 640px){
  .topbar{ flex-wrap: wrap; }
  .topbar .brand{ flex: 1 0 100%; }   /* brand takes full row */
  .topbar .nav{ width: 100%; margin-top: 8px; }
}
@media (prefers-color-scheme: dark){
  .topbar .nav a{ color:#e5e7eb; opacity:1; }
}