* { 

  box-sizing: border-box; 

} 

 

body { 

  margin: 0; 

  font-family: Arial, Helvetica, sans-serif; 

  background: #f6f8fb; 

  color: #1d1d1f; 

  line-height: 1.6; 

} 

 

.hero { 

  min-height: 100vh; 

  background: 

    linear-gradient(rgba(10, 35, 66, 0.75), rgba(10, 35, 66, 0.75)), 

    url("https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1600&q=80"); 

  background-size: cover; 

  background-position: center; 

  color: white; 

  padding: 24px; 

} 

 

.nav { 

  display: flex; 

  justify-content: space-between; 

  align-items: center; 

  max-width: 1100px; 

  margin: 0 auto; 

} 

 

.logo { 

  font-size: 1.4rem; 

  font-weight: 800; 

  letter-spacing: 0.5px; 

} 

 

.nav-button, 

.button { 

  display: inline-block; 

  text-decoration: none; 

  border-radius: 999px; 

  font-weight: 700; 

} 

 

.nav-button { 

  color: white; 

  border: 2px solid white; 

  padding: 10px 18px; 

} 

 

.hero-content { 

  max-width: 900px; 

  margin: 140px auto 0; 

} 

 

.eyebrow { 

  text-transform: uppercase; 

  letter-spacing: 2px; 

  font-size: 0.85rem; 

  color: #f2c94c; 

  font-weight: 800; 

} 

 

h1 { 

  font-size: clamp(2.7rem, 7vw, 5.8rem); 

  line-height: 1; 

  margin: 16px 0; 

} 

 

.hero-text { 

  max-width: 700px; 

  font-size: 1.2rem; 

} 

 

.hero-actions { 

  display: flex; 

  gap: 14px; 

  flex-wrap: wrap; 

  margin-top: 28px; 

} 

 

.button { 

  padding: 14px 22px; 

} 

 

.primary { 

  background: #f2c94c; 

  color: #111; 

} 

 

.secondary { 

  border: 2px solid white; 

  color: white; 

} 

 

.section { 

  max-width: 900px; 

  margin: 0 auto; 

  padding: 80px 24px; 

} 

 

.section h2 { 

  font-size: 2.3rem; 

  margin-bottom: 12px; 

} 

 

.dark { 

  max-width: none; 

  background: #1f3a5f; 

  color: white; 

  text-align: center; 

} 

 

footer { 

  text-align: center; 

  padding: 24px; 

  background: #111; 

  color: white;