* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  background: var(--bg, #fff); color: var(--ink, #111114);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }

.info-page {
  max-width: 480px; margin: 0 auto;
  padding: calc(var(--safe-t) + 8px) var(--s-5) calc(var(--safe-b) + 40px);
  min-height: 100dvh;
}

.info-top { display: flex; align-items: center; gap: 8px; height: 48px; }
.info-back {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bg-soft); color: var(--ink); transition: transform .15s var(--spring);
}
.info-back:active { transform: scale(.9); }
.info-top h1 { font-size: 18px; font-weight: 800; letter-spacing: -.01em; }

.info-id { text-align: center; padding: var(--s-5) 0 var(--s-6); }
.info-logo { width: 76px; height: 76px; border-radius: 20px; box-shadow: 0 8px 22px rgba(0,0,0,.14); }
.info-id h2 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin-top: var(--s-3); }
.info-sub { font-size: 13.5px; color: var(--ink-3); margin-top: 4px; line-height: 1.4; }

.info-card {
  background: var(--bg-soft); border-radius: var(--r-lg, 20px); overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(17,17,20,.05);
}
.info-row {
  display: flex; align-items: center; gap: 13px; padding: 15px 16px;
  border-bottom: 1px solid rgba(17,17,20,.06);
}
.info-row:last-child { border-bottom: none; }
a.info-row:active { background: rgba(17,17,20,.04); }
.info-ic {
  flex: 0 0 38px; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: #fff; color: var(--accent); box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.info-ic svg { width: 19px; height: 19px; }
.info-txt { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.info-txt b { font-size: 14.5px; font-weight: 700; }
.info-txt small { font-size: 13px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.info-go { color: var(--ink-3); font-size: 20px; font-weight: 600; }

.info-socials { display: flex; justify-content: center; gap: 14px; margin-top: var(--s-6); }
.info-soc {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bg-soft); color: var(--ink); transition: transform .15s var(--spring);
}
.info-soc svg { width: 22px; height: 22px; }
.info-soc:active { transform: scale(.9); }

.info-cta {
  display: block; text-align: center; margin-top: var(--s-6);
  background: var(--accent); color: var(--accent-ink, #fff);
  font-weight: 800; font-size: 16px; padding: 16px; border-radius: var(--r-pill);
  box-shadow: 0 6px 18px rgba(255,90,31,.35); transition: transform .15s var(--spring);
}
.info-cta:active { transform: scale(.97); }
.info-halal { text-align: center; font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin-top: var(--s-5); }
.info-legal { text-align: center; font-size: 12px; color: var(--ink-3); margin-top: var(--s-2); }