.hero { position: relative; min-height: 100vh; background: url('https://images.unsplash.com/photo-1593113598332-cd288d649433?w=1200') center/cover no-repeat; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; }
.hero-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.55); }
.hero-content { position: relative; z-index: 2; max-width: 800px; padding: 20px; }
.hero-content h1 { font-size: 3.5rem; font-family: var(--font-heading); line-height: 1.2; }
.hero-sub { font-size: 1.8rem; font-weight: 300; margin: 10px 0; }
.hero-text { font-size: 1.1rem; margin-bottom: 30px; opacity: 0.9; }
.hero-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.scroll-indicator { margin-top: 60px; font-size: 2rem; animation: bounce 2s infinite; }
@keyframes bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(10px)} }

.impact-counters { background: var(--color-primary); padding: 50px 0; color: #fff; }
.counter-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; text-align: center; }
.counter-item { font-size: 1.2rem; }
.counter-number { font-size: 2.8rem; font-weight: 700; display: inline-block; }

.problem { position: relative; min-height: 60vh; display: flex; align-items: center; justify-content: center; text-align: center; background: var(--color-bg-light); }
.problem-split { display: flex; width: 100%; height: 50vh; }
.problem-image { flex: 1; background-size: cover; background-position: center; }
.food-waste { background-image: url('https://images.unsplash.com/photo-1590779033100-9f60a05a013d?w=600'); }
.hunger { background-image: url('https://images.unsplash.com/photo-1488521787991-ed7bbaae773c?w=600'); }
.problem-text { position: absolute; background: rgba(26,58,42,0.85); color: #fff; padding: 40px; border-radius: 12px; max-width: 700px; }
.problem-text h2 { font-size: 2rem; }

.how-it-works { padding: 60px 0; background: #fff; text-align: center; }
.steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 30px; margin-top: 30px; }
.step { background: var(--color-bg-light); padding: 30px 20px; border-radius: 12px; }
.step span { font-size: 2.5rem; display: block; }

.donate-categories { padding: 60px 0; background: var(--color-bg-light); text-align: center; }
.category-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 16px; margin-top: 30px; }
.category-card { background: #fff; padding: 20px; border-radius: 12px; box-shadow: 0 4px 8px rgba(0,0,0,0.05); transition: 0.2s; font-weight: 600; }
.category-card:hover { transform: translateY(-6px); box-shadow: 0 10px 20px rgba(0,0,0,0.08); }

.impact-stories, .featured-ngos, .latest-blog { padding: 60px 0; background: #fff; text-align: center; }
.story-grid, .ngo-grid, .blog-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin: 30px 0; }
.story-card, .ngo-card, .blog-card { background: var(--color-bg-light); border-radius: 12px; padding: 20px; text-align: left; transition: 0.2s; }
.story-card:hover, .ngo-card:hover, .blog-card:hover { transform: translateY(-4px); box-shadow: 0 8px 16px rgba(0,0,0,0.06); }

.app-download { background: var(--color-primary); color: #fff; padding: 80px 0; }
.app-download-inner { display: flex; align-items: center; gap: 60px; flex-wrap: wrap; }
.app-text { flex: 1; }
.app-text h2 { font-size: 2.8rem; }
.app-features { list-style: none; padding: 0; margin: 20px 0; }
.app-features li { padding: 6px 0; font-size: 1.1rem; }
.app-mockup { font-size: 8rem; flex: 1; text-align: center; }
.app-store-muted { opacity: 0.6; margin-top: 10px; }

.volunteer-cta { position: relative; min-height: 50vh; background: url('https://images.unsplash.com/photo-1593113598332-cd288d649433?w=1200') center/cover no-repeat; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; }
.volunteer-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.55); }
.volunteer-content { position: relative; z-index: 2; padding: 40px; }
.volunteer-content h2 { font-size: 2.8rem; }

.partners { padding: 40px 0; background: #fff; text-align: center; }
.partner-logos { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; margin-top: 20px; font-size: 1.2rem; color: #999; }
.partner-logos span { filter: grayscale(1); transition: 0.3s; }
.partner-logos span:hover { filter: grayscale(0); }

.view-all { margin-top: 20px; }

@media (max-width: 768px) {
  .hero-content h1 { font-size: 2.4rem; }
  .counter-grid { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .category-grid { grid-template-columns: repeat(3,1fr); }
  .story-grid, .ngo-grid, .blog-grid { grid-template-columns: 1fr; }
  .app-download-inner { flex-direction: column; text-align: center; }
  .problem-split { flex-direction: column; height: 40vh; }
}