body { font-family: system-ui, sans-serif; margin: 0; text-align: center; color: #1a2e1a; background: #f6faf6; }
header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem; background: #2d5a3d; color: #fff; }
header h1 { margin: 0; font-size: 1.4rem; }
.btn { display: inline-block; margin-top: 1rem; padding: 0.8rem 1.6rem; background: #3fa34d; color: #fff; border: none; border-radius: 6px; text-decoration: none; cursor: pointer; font-size: 1rem; }
header .btn { margin-top: 0; }
main section { max-width: 900px; margin: 2rem auto; padding: 0 1rem; }

/* hero: text + image card side by side */
.hero { display: flex; gap: 2rem; align-items: center; text-align: left; }
.hero-text { flex: 1; }
.hero-card { flex: 1; background: #fff; border-radius: 12px; padding: 0.6rem; box-shadow: 0 2px 12px rgba(0,0,0,0.12); }
.hero-card img { width: 100%; border-radius: 8px; display: block; }

/* spotlight: mirror of hero — slideshow left, text right */
.about { display: flex; gap: 2rem; align-items: center; text-align: left; }
.about-text { flex: 1; }
.about-text ul { list-style: none; padding: 0; margin: 1rem 0 0; }
.about-text li { margin: 0.4rem 0; }
.slideshow-card { flex: 1; position: relative; background: #fff; border-radius: 12px; padding: 0.6rem; box-shadow: 0 2px 12px rgba(0,0,0,0.12); }
.pill { position: absolute; top: -0.8rem; left: 1rem; background: #2d5a3d; color: #fff; font-size: 0.75rem; padding: 0.2rem 0.7rem; border-radius: 999px; }

/* spotlight slideshow: images slide and pass */
.slideshow { overflow: hidden; border-radius: 8px; height: 240px; }
.track { display: flex; width: 400%; height: 100%; animation: slide 16s linear infinite; }
.track img { width: 25%; height: 240px; object-fit: cover; display: block; }
.slideshow-card:hover .track { animation-play-state: paused; }
@media (max-width: 700px) { .hero, .about { flex-direction: column; text-align: center; } }
@keyframes slide {
  0%, 20% { transform: translateX(0); }
  25%, 45% { transform: translateX(-25%); }
  50%, 70% { transform: translateX(-50%); }
  75%, 95% { transform: translateX(-75%); }
  100% { transform: translateX(-75%); }
}

.amounts button { margin: 0.3rem; padding: 0.6rem 1.2rem; cursor: pointer; }
#custom { display: block; margin: 1rem auto; padding: 0.6rem; width: 220px; }
footer { padding: 2rem; color: #666; }