.hero { display: grid; grid-template-columns: 1fr 300px; gap: 32px; align-items: center;
        padding: 24px 8px 8px; }
.hero-text { text-align: left; }
.hero img { border-radius: 22px; }
.hero h1 { font-size: 40px; margin: 14px 0 8px; }
.lead { font-size: 20px; line-height: 1.5; margin: 0 0 20px; }
.btn.soon { display: inline-block; cursor: default; }
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 28px 0; }
.features .card h2 { margin: 0 0 6px; }
.features .card p { margin: 0; }
footer { text-align: center; color: var(--soft); font-size: 15px; line-height: 2; }
.needs { margin: 0 0 24px; } .needs h2 { margin: 0 0 6px; }
.gallery { width: 300px; }
.shots { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; border-radius: 22px;
         scrollbar-width: none; box-shadow: 0 8px 24px rgba(18, 59, 54, .16); }
.shots::-webkit-scrollbar { display: none; }
.shots img { flex: 0 0 100%; width: 100%; height: auto; scroll-snap-align: center; }
.arrows { display: flex; justify-content: center; gap: 12px; margin-top: 12px; }
.arrow { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--card);
         color: var(--text); font: 700 26px/1 system-ui, sans-serif; cursor: pointer;
         box-shadow: 0 3px 10px rgba(18, 59, 54, .12); }
@media (max-width: 700px) {
  .hero { grid-template-columns: 1fr; gap: 20px; }
  .hero-text { text-align: center; }
  .gallery { width: min(280px, 80vw); margin: 0 auto; }
}
.logo { width: 160px; height: 160px; border-radius: 36px; }
@media (max-width: 700px) { .logo { width: 128px; height: 128px; border-radius: 30px; } }
main.wide { max-width: 1000px; }
.wide .hero { grid-template-columns: 1fr 380px; gap: 48px; }
.wide .gallery { width: 380px; }
.wide .hero h1 { font-size: 52px; }
.wide .lead { font-size: 22px; }
.wide .features { grid-template-columns: 1fr 1fr; }
@media (max-width: 760px) {
  .wide .hero { grid-template-columns: 1fr; gap: 20px; }
  .wide .gallery { width: min(300px, 82vw); }
  .wide .hero h1 { font-size: 40px; }
  .wide .lead { font-size: 20px; }
  .wide .features { grid-template-columns: 1fr; }
}