* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color: #1f2d3d;
  background: #f4f7fb;
  line-height: 1.6;
}

.container { max-width: 960px; margin: 0 auto; padding: 0 20px; }

.hero {
  background: linear-gradient(135deg, #0b4f6c 0%, #118ab2 100%);
  color: #fff;
  text-align: center;
  padding: 80px 20px;
}

.hero h1 { font-size: 2.6rem; margin-bottom: 16px; }
.hero p { font-size: 1.15rem; max-width: 640px; margin: 0 auto 28px; opacity: .95; }

.btn {
  display: inline-block;
  background: #fff;
  color: #0b4f6c;
  padding: 12px 28px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
}

.btn:hover { background: #e6f4f8; }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  padding: 40px 0;
}

.card {
  background: #fff;
  border: 1px solid #dce4ed;
  border-radius: 10px;
  padding: 24px;
}

.card h2 { color: #0b4f6c; margin-bottom: 10px; font-size: 1.25rem; }

.tips { padding: 20px 0 40px; }
.tips h2 { margin-bottom: 14px; color: #0b4f6c; }
.tips ul { padding-left: 22px; }
.tips li { margin-bottom: 8px; }

footer {
  text-align: center;
  padding: 24px 20px;
  background: #0b4f6c;
  color: #cfe8f2;
  font-size: .9rem;
}