* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
}

body { 
  background: #f9fafb; 
  color: #333; 
  line-height: 1.6; 
}

/* NAVBAR */
.logo img { 
  height: 40px; 
  display: block; 
}
nav { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  padding: 16px 40px; 
  background: white; 
  box-shadow: 0 2px 8px rgba(0,0,0,0.05); 
  position: sticky; 
  top: 0; 
  z-index: 100; 
}
nav .links { 
  display: flex; 
  gap: 24px; 
}
nav .links a { 
  text-decoration: none; 
  color: #333; 
  font-weight: 500; 
  transition: color 0.2s;
}
nav .links a:hover { 
  color: #2563eb; 
}
nav .links a.active { 
  color: #2563eb; 
  font-weight: 600;
}
.menu-toggle { 
  display: none; 
  font-size: 28px; 
  cursor: pointer; 
}

/* HERO */
.hero { 
  position: relative; 
  text-align: center; 
  color: white; 
}
.hero img { 
  width: 100%; 
  height: 500px; 
  object-fit: cover; 
  filter: brightness(0.6); 
}
.hero-text { 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%); 
  width: 90%; 
}
.hero-text h1 { 
  font-size: 3rem; 
  margin-bottom: 12px; 
}
.btn-primary { 
  background: #2563eb; 
  color: white; 
  padding: 14px 28px; 
  border-radius: 8px; 
  text-decoration: none; 
  display: inline-block; 
  margin-top: 16px; 
  font-weight: 600; 
  transition: background 0.2s;
}
.btn-primary:hover { 
  background: #1e40af; 
}

/* FEATURES / GRID */
.features { 
  display: flex; 
  justify-content: center; 
  gap: 24px; 
  padding: 60px 20px; 
  flex-wrap: wrap; 
}
.feature { 
  background: white; 
  padding: 24px; 
  border-radius: 12px; 
  box-shadow: 0 2px 8px rgba(0,0,0,0.05); 
  width: 300px; 
  text-align: center; 
}

.page { 
  padding: 60px 40px; 
  max-width: 1200px; 
  margin: auto; 
}
.page h1 { 
  font-size: 2.5rem; 
  margin-bottom: 20px; 
  text-align: center;
}
.page > p {
  text-align: center;
  margin-bottom: 32px;
}

.grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
  gap: 24px; 
  margin-top: 32px; 
}

/* CARDS - CENTERED */
.card { 
  background: white; 
  padding: 24px; 
  border-radius: 12px; 
  text-align: center; 
  box-shadow: 0 2px 8px rgba(0,0,0,0.05); 
  transition: transform 0.2s; 
}
.card:hover { 
  transform: translateY(-5px); 
}
.role { 
  color: #2563eb; 
  font-weight: 600; 
  margin: 8px 0; 
}
.card .bio { 
  margin: 8px 0 16px 0; 
  color: #555;
  font-size: 0.95rem;
}
.buttons { 
  display: flex; 
  gap: 10px; 
  justify-content: center; 
  margin-top: 12px; 
  flex-wrap: wrap; 
}
.btn-email, .btn-phone { 
  padding: 10px 18px; 
  border-radius: 6px; 
  text-decoration: none; 
  font-size: 0.9rem; 
  font-weight: 600; 
  transition: opacity 0.2s;
}
.btn-email { 
  background: #2563eb; 
  color: white; 
}
.btn-phone { 
  background: #16a34a; 
  color: white; 
}
.btn-email:hover, .btn-phone:hover {
  opacity: 0.9;
}

/* CONTACT */
.contact-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
  gap: 24px; 
  margin-top: 32px; 
}
.contact-card { 
  background: white; 
  padding: 24px; 
  border-radius: 12px; 
  box-shadow: 0 2px 8px rgba(0,0,0,0.05); 
  text-align: center;
}

footer { 
  text-align: center; 
  padding: 24px; 
  background: white; 
  margin-top: 60px; 
  color: #666;
}

/* ===== MOBILE VIEW ===== */
@media (max-width: 768px) {
  nav { 
    padding: 16px 20px; 
  }
  .menu-toggle { 
    display: block; 
  }
  nav .links { 
    display: none; 
    flex-direction: column; 
    position: absolute; 
    top: 70px; 
    left: 0; 
    width: 100%; 
    background: white; 
    padding: 20px; 
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  }
  nav .links.show { 
    display: flex; 
  }
  nav .links a { 
    padding: 12px 0; 
    border-bottom: 1px solid #eee; 
  }

  .hero img { 
    height: 350px; 
  }
  .hero-text h1 { 
    font-size: 2rem; 
  }

  .features { 
    flex-direction: column; 
    align-items: center; 
    padding: 40px 20px; 
  }
  .feature { 
    width: 90%; 
  }

  .page { 
    padding: 40px 20px; 
  }
  .page h1 { 
    font-size: 2rem; 
  }
  
  .buttons { 
    flex-direction: column; 
  }
  .btn-email, .btn-phone { 
    width: 100%; 
  }
}