.hero-wrap {
  padding: 56px 0 30px;
  background: radial-gradient(circle at 10% 0%, #f3f7ff 0, #ffffff 48%);
}
.hero-wrap h1 { font-family: "Yeseva One", serif; font-size: 42px; margin: 0 0 8px; }
.hero-wrap p { color: #5f6d87; font-size: 18px; margin: 0; }
.cards { padding: 16px 0 38px; }

.community-card {
  padding: 16px;
  margin-bottom: 16px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.community-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(23,39,66,.08); }
.community-card h3 { font-size: 24px; }
.community-card p { color: #67758f; margin: 0 0 10px; min-height: 34px; }
.meta { font-size: 13px; color: #48556d; margin-bottom: 12px; }

.city-title {
  margin: 0 0 10px;
}

.city-name-btn {
  display: block;
  width: 100%;
  padding: 10px 14px;
  border-radius: 999px;
  color: #23324a;
  text-decoration: none;
  font-weight: 900;
  letter-spacing: .2px;
  line-height: 1.2;
  text-align: center;
  border: 1px solid rgba(186, 198, 220, 0.72);
  box-shadow: 0 10px 20px rgba(148, 163, 184, 0.18);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

.cards .row > div:nth-child(8n+1) .city-name-btn { background: linear-gradient(90deg, #cde9ff, #d8d4ff); }
.cards .row > div:nth-child(8n+2) .city-name-btn { background: linear-gradient(90deg, #ffd5e1, #fcd5ff); }
.cards .row > div:nth-child(8n+3) .city-name-btn { background: linear-gradient(90deg, #d7f7e6, #ecfccb); }
.cards .row > div:nth-child(8n+4) .city-name-btn { background: linear-gradient(90deg, #ffe7c2, #ffd6bf); }
.cards .row > div:nth-child(8n+5) .city-name-btn { background: linear-gradient(90deg, #e6ddff, #f5d0fe); }
.cards .row > div:nth-child(8n+6) .city-name-btn { background: linear-gradient(90deg, #cffafe, #ccfbf1); }
.cards .row > div:nth-child(8n+7) .city-name-btn { background: linear-gradient(90deg, #fff0b8, #ffd9e6); }
.cards .row > div:nth-child(8n) .city-name-btn { background: linear-gradient(90deg, #d7e7ff, #e9d5ff); }

.city-name-btn:hover,
.city-name-btn:focus-visible {
  color: #1f2a44;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(148, 163, 184, 0.24);
  filter: saturate(1.04) brightness(1.01);
}

.mini-head {
  margin: 12px 0 8px;
  font-weight: 700;
  color: #2b3d5a;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.mini-list li { padding: 6px 0; font-size: 13px; }

.overview-line { display: flex; gap: 12px; margin-bottom: 10px; }
.overview-box {
  flex: 1 1 0;
  padding: 8px 10px;
}
.overview-num { font-size: 22px; }
.overview-lbl { font-size: 12px; margin-top: 4px; }

.btn-open {
  display: inline-block;
  background: linear-gradient(90deg, #cde9ff, #d8d4ff);
  color: #23324a;
  border: 1px solid rgba(186, 198, 220, 0.72);
  padding: 8px 12px;
  border-radius: 4px;
  text-decoration: none;
}
.btn-open:hover,
.btn-open:focus-visible {
  color: #1f2a44;
  text-decoration: none;
  box-shadow: 0 10px 20px rgba(148, 163, 184, 0.2);
}