* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #0f172a; background: #f8fafc; line-height: 1.7; }
a { text-decoration: none; color: inherit; }
.container { max-width: 1180px; margin: 0 auto; padding: 0 18px; }
.hero { background: linear-gradient(135deg, #0f172a, #1e40af); color: #fff; padding: 72px 0; }
.hero h1 { font-size: 44px; margin: 0 0 14px; }
.hero-home { color: #bfdbfe; }
.grid { display: grid; gap: 18px; }
.city-grid { grid-template-columns: repeat(4, 1fr); padding: 42px 0; }
.card { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 18px; }
.selected-city-card { margin: 42px 0; }
.card h2, .card h3 { margin: 0 0 8px; }
.muted { color: #64748b; }
.btn { display: inline-flex; margin-top: 14px; background: #1e40af; color: #fff; padding: 10px 16px; border-radius: 8px; font-weight: 800; }
.footer { background: #020617; color: #94a3b8; padding: 28px 0; }

@media (max-width: 860px) {
  .city-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 34px; }
}