:root {
  --bg: #fdfdfd;
  --card: #f9f9f9;
  --text: #000;
  --brand: #5aa1ff;
  --brand-2: #78f0c4;
  --shadow: 0 4px 12px rgba(0,0,0,0.08);
  --radius: 8px;
}

body {
  margin: 0;
  font-family: 'Segoe UI', Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}

.hero {
  text-align: center;
  padding: 80px 20px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
}

.btn-box {
  display: inline-block;
  padding: 12px 24px;
  margin: 8px;
  border-radius: var(--radius);
  background: #fff;
  color: var(--brand);
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: all 0.2s ease;
}
.btn-box:hover {
  background: var(--brand-2);
  color: #000;
}

.section {
  max-width: 900px;
  margin: 2rem auto;
  padding: 0 1rem;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
  text-align: center;
}

.footer {
  background: #111;
  color: #fff;
  text-align: center;
  padding: 20px;
  margin-top: 40px;
}
:root {
  --bg: #fdfdfd;
  --card: #f9f9f9;
  --text: #000;
  --brand: #5aa1ff;
  --brand-2: #78f0c4;
  --shadow: 0 4px 12px rgba(0,0,0,0.08);
  --radius: 8px;
}

body { margin:0; font-family:'Segoe UI',Arial,sans-serif; background:var(--bg); color:var(--text); }
.hero { text-align:center; padding:80px 20px; background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff; }
.btn-box { display:inline-block; padding:12px 24px; margin:8px; border-radius:var(--radius); background:#fff; color:var(--brand); font-weight:600; text-decoration:none; box-shadow:var(--shadow); transition:all 0.2s ease; }
.btn-box:hover { background:var(--brand-2); color:#000; }
.wizard { max-width:700px; margin:3rem auto; background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:2rem; text-align:center; }
.wizard input,.wizard select { width:80%; padding:12px; margin:12px 0; border:1px solid #ccc; border-radius:var(--radius); }
.progress-wrapper { margin-bottom:1.5rem; }
.progress-icons { display:flex; justify-content:space-between; margin-bottom:0.5rem; }
.progress-icons div { text-align:center; flex:1; color:#aaa; }
.progress-icons .active { color:var(--brand); font-weight:bold; }
.progress-container { width:100%; background:#eee; border-radius:var(--radius); overflow:hidden; height:12px; }
.progress-bar { height:12px; width:0%; background:var(--brand); transition:width 0.4s ease; }
.dashboard { max-width:900px; margin:3rem auto; display:none; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px; }
.card { background:var(--card); padding:20px; border-radius:var(--radius); box-shadow:var(--shadow); text-align:center; }
.footer { background:#111; color:#fff; text-align:center; padding:20px; margin-top:40px; }