.hero { text-align: center; padding: 8px 0 4px; }
.hero .logo { border-radius: 22px; margin: 0 auto 10px; display: block; }
.hero h1 { font-size: 34px; }
.hero .lead { text-align: left; }
.cta { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 16px 0 0; }
.btn {
  display: inline-block; padding: 11px 18px; border-radius: 999px;
  border: 1px solid var(--accent); color: var(--accent);
  text-decoration: none; font-weight: 600; font-size: 14px;
}
.btn.primary { background: var(--accent); color: var(--bg); }
.shots {
  display: flex; gap: 14px; overflow-x: auto; padding: 22px 2px 8px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
.shots img {
  flex: 0 0 auto; width: 220px; height: auto; border-radius: 18px;
  border: 1px solid var(--rule); scroll-snap-align: start;
}
.pillars li strong { display: inline; }
.features { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 18px; }
@media (min-width: 720px) { .shots { justify-content: center; overflow-x: visible; } }