body { font-family: Arial, sans-serif; margin: 0; color: #1f2937; background: #ffffff; }
.site-header { padding: 20px; background: #fff; border-bottom: 1px solid #e2e8f0; }
.header-inner { max-width: 1100px; margin: auto; display: flex; align-items: center; gap: 20px; }
.logo { width: 150px; border-radius: 8px; }
.org-name { font-size: 28px; margin: 0; color: #2b5568; }
.nav a { margin-right: 20px; text-decoration: none; color: #2b5568; font-weight: 600; }

.hero { background: #eef5f7; padding: 60px 20px; text-align: left; }
.hero-headline { font-size: 32px; color: #2b5568; margin-bottom: 10px; }
.hero-sub { max-width: 700px; color: #4a5568; }

.values, .mission-vision { max-width: 1100px; margin: 40px auto; padding: 0 20px; }
.values h3, .mission-vision h3 { color: #2b5568; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.card { background: #f8fafc; padding: 18px; border-radius: 8px; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }

.mv-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.mission, .vision-block { background: #f8fafc; padding: 20px; border-radius: 8px; }

.content { max-width: 1100px; margin: 40px auto; padding: 0 20px; }

footer { text-align: center; padding: 20px; color: #4a5568; }