* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', sans-serif; line-height: 1.6; color: #111827; background-color: #f3f4f6; }
a { color: #f97316; text-decoration: none; }
a:hover { text-decoration: underline; }

.hero { position: relative; width: 100%; height: 430px; overflow: hidden; }
.hero-image { width: 100%; height: 100%; object-fit: cover; object-position: center 98%; filter: brightness(95%); }
.hero-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: #fff; max-width: 900px; padding: 1rem; }
.hero-overlay h1 { font-size: 2.2rem; margin-bottom: 0.5rem; text-shadow: 0 2px 4px rgba(0,0,0,0.7), 0 0 10px rgba(0,0,0,0.5); }
.hero-overlay p { font-size: 1.2rem; margin-bottom: 1rem; text-shadow: 0 2px 4px rgba(0,0,0,0.7), 0 0 10px rgba(0,0,0,0.5); }

.cta-button { 
  background: linear-gradient(90deg, #ff9500, #ff7b00); 
  color: #fff; 
  padding: 0.85rem 2rem; 
  border-radius: 8px; 
  font-weight: 700; 
  border: 2px solid #fff; 
  box-shadow: 0 6px 18px rgba(0,0,0,0.70), 0 0 14px rgba(255,149,0,0.55); 
  transition: transform 0.2s, box-shadow 0.2s; 
  margin-top: 2rem; 
  display: inline-block; 
  text-decoration: none; 
  font-size: 1.1rem;
}
.cta-button:hover { 
  transform: scale(1.05); 
  box-shadow: 0 6px 16px rgba(0,0,0,0.55), 0 0 18px rgba(255,149,0,0.8); 
}

.content { max-width: 1000px; margin: 2rem auto; padding: 0 1.5rem 2rem 1.5rem; background: #fff; border-radius: 1rem; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.content h2 { font-size: 1.6rem; margin: 1.5rem 0 1rem; color: #15573e; text-align: center; }
.content p { font-size: 1.05rem; margin-bottom: 1rem; color: #374151; }
.center { text-align: center; }

.site-footer { text-align: center; padding: 1rem; background: #f9fafb; font-size: 0.9rem; color: #555; margin-top: 3rem; }

@media (max-width: 700px) {
  .hero-overlay { max-width: 97%; padding: 0 0.4rem; }
  .hero-overlay h1 { font-size: 1.7rem; }
  .hero-overlay p { font-size: 1rem; line-height: 1.4; }
}