* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: "Segoe UI", system-ui, sans-serif;
  background: #EEF3F8; color: #2E3A4E; line-height: 1.6;
}
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

.hero {
  background: linear-gradient(135deg, #1F3A5F, #2E4A74);
  color: #fff; padding: 44px 0 36px;
}
.hero .eyebrow {
  text-transform: uppercase; letter-spacing: .12em; font-size: .78rem;
  color: #FFD98A; margin-bottom: 10px;
}
.hero h1 { font-size: clamp(1.6rem, 4vw, 2.3rem); margin-bottom: 12px; }
.hero .sub { opacity: .92; max-width: 720px; font-size: 1.02rem; }
.badge {
  display: inline-block; margin-top: 16px; background: rgba(255,217,138,.16);
  border: 1px solid #FFD98A; color: #FFD98A; border-radius: 999px;
  padding: 4px 14px; font-size: .78rem;
}

main { padding: 34px 0 48px; }
section { margin-bottom: 44px; }
h2 { color: #1F3A5F; font-size: 1.25rem; margin-bottom: 6px; }
.muted { color: #667286; font-size: .92rem; margin-bottom: 16px; }
.small { font-size: .8rem; }

.theme-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.theme-tab {
  background: #fff; border: 1px solid #D8E0EA; border-radius: 999px;
  padding: 8px 16px; font-size: .88rem; color: #1F3A5F; cursor: pointer;
  transition: all .12s;
}
.theme-tab:hover { border-color: #1F3A5F; }
.theme-tab.active { background: #1F3A5F; color: #fff; border-color: #1F3A5F; }

.kt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.card {
  background: #fff; border: 1px solid #D8E0EA; border-radius: 12px;
  padding: 18px; box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.card h3 { color: #1F3A5F; font-size: .95rem; margin-bottom: 10px; }
.card canvas { width: 100%; height: auto; border-radius: 8px; background: #FAFCFE; }
.finding { font-size: .95rem; }
.cite { color: #8895A8; font-size: .75rem; margin-top: 8px; }
.note, .activity { font-size: .92rem; }
.note { border-left: 3px solid #B8860B; padding-left: 10px; }
.activity { border-left: 3px solid #2E7D5B; padding-left: 10px; }

.resource-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.resource {
  background: #fff; border: 1px solid #D8E0EA; border-radius: 12px; padding: 16px;
  position: relative;
}
.resource h4 { color: #1F3A5F; font-size: .92rem; margin-bottom: 6px; }
.resource p { font-size: .84rem; color: #667286; }
.tag {
  position: absolute; top: 12px; right: 12px; font-size: .7rem; font-weight: 600;
  background: #E8EEF6; color: #1F3A5F; border-radius: 6px; padding: 2px 8px;
}

.impact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 14px; }
.metric {
  background: #fff; border: 1px solid #D8E0EA; border-radius: 12px;
  padding: 18px; text-align: center;
}
.metric-num { display: block; font-size: 1.7rem; font-weight: 700; color: #1F3A5F; }
.metric-label { font-size: .8rem; color: #667286; }

footer {
  background: #1F3A5F; color: #B9C6D8; text-align: center;
  padding: 18px 20px; font-size: .8rem;
}

@media (max-width: 640px) {
  .kt-grid { grid-template-columns: 1fr; }
}