:root {
  --max: 720px;
  --hero-gap: 0.1rem;
  --circle-gap: 0.5rem;
  --square-gap: 0.5rem;
  --tagline-gap: 0.1rem;
  --email-gap: 0.2rem;
}
* { box-sizing: border-box; }

body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  margin: 0; padding: 0;
  background: #FFFFFF; color: #111827; line-height: 1.5; text-align: center;
}

.wrap { max-width: var(--max); margin: 0 auto; padding: 1.5rem; }
header.wrap { padding-bottom: 0; }
main.wrap { padding-top: 0; }

h1, h2, p, section { margin: 0; }

.store-img {
  max-width: 220px;
  display: block;
  margin: 0 auto var(--hero-gap);
  border-radius: 12px;
}

h1 {
  font-size: clamp(2rem, 5vw, 2.5rem);
  margin-bottom: var(--hero-gap);
}

.tagline { opacity: .8; }
.tagline + .tagline { margin-top: var(--tagline-gap); }
.tagline:last-of-type { margin-bottom: var(--circle-gap); }

.links {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: var(--circle-gap);
}
.links h2 { margin-bottom: var(--circle-gap); }

.email { margin-top: var(--circle-gap); }
.email h2 { margin-bottom: var(--email-gap); }

.btn {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.9rem 1.2rem; border-radius: 0.75rem; text-decoration: none; font-weight: 600;
  background: #e5e7eb; color: #111827; transition: background 0.2s; width: 240px; max-width: 100%;
}
.btn + .btn { margin-top: var(--square-gap); }
.btn img { width: 24px; height: 24px; }
.btn:hover { background: #d1d5db; }

.btn.bricklink { background: #ffe600; color: #000; }
.btn.bricklink:hover { background: #ffeb66; }
.btn.brickowl { background: #0099cc; color: #fff; }
.btn.brickowl:hover { background: #00b4f0; }

.foot { margin-top: 3rem; opacity: .7; font-size: 0.85rem; }