:root {
  --primary:#007bff;
  --bg:#f8f9fa;
  --surface:#fff;
  --border:#e1e5ef;
  --muted:#666;
  --success:#16a34a;
  --danger:#d9534f;
  --warning:#ff9800;
}

body {
  margin:0;
  background:var(--bg);
  font-family:Arial, sans-serif;
}

.header {
  background:var(--primary);
  color:#fff;
  padding:1.2rem;
}

.header-inner {
  max-width:1200px;
  margin:auto;
  text-align:center;
}

.container {
  max-width:1200px;
  margin:1rem auto;
  padding:0 1rem;
}

.card {
  background:var(--surface);
  border-radius:10px;
  padding:1rem;
  border:1px solid var(--border);
  margin-bottom:1rem;
}

.section-title {
  text-align:center;
  color:var(--primary);
  margin-bottom:0.8rem;
}

.checker-box {
  display:flex;
  flex-direction:column;
  gap:0.8rem;
}

input[type=password] {
  padding:0.6rem;
  border-radius:6px;
  border:1px solid var(--border);
  width:100%;
  font-size:1rem;
}

.strength-meter {
  width:100%;
  height:10px;
  background:#eaeaea;
  border-radius:6px;
  overflow:hidden;
}

#strengthBar {
  height:100%;
  width:0%;
  transition:width 0.3s, background 0.3s;
}

.strength-label {
  font-weight:bold;
}

.steps-grid, .benefits-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px,1fr));
  gap:0.8rem;
}

.step, .benefit {
  background:#f8faff;
  padding:0.8rem;
  border-radius:8px;
  border:1px solid var(--border);
}

.step-number {
  width:32px;
  height:32px;
  border-radius:50%;
  background:var(--primary);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:6px;
}

.faq-item {
  margin-bottom:0.6rem;
}

.faq-question {
  width:100%;
  padding:0.6rem;
  text-align:left;
  background:#eef3ff;
  border:1px solid var(--border);
  border-radius:6px;
  cursor:pointer;
  font-weight:600;
}

.faq-answer {
  display:none;
  padding:0.6rem;
  border-left:3px solid var(--primary);
  background:white;
  margin-top:4px;
}

.faq-item.active .faq-answer {
  display:block;
}

.footer {
  text-align:center;
  padding:1rem;
  color:var(--muted);
}

.btn-outline {
  border:1px solid var(--border);
  background:#fff;
  padding:0.4rem 0.8rem;
  border-radius:6px;
  cursor:pointer;
}

.small-btn {
  font-size:0.85rem;
}