:root{
  --accent: rgb(147,171,13);
  --accent-dark: rgb(120,140,10);
  --bg: #f8f8f7;
  --card: #ffffff;
  --muted: #666;
}

*{box-sizing:border-box}
body{
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: var(--bg);
  margin:0;
  color:#222;
  -webkit-font-smoothing:antialiased;
}

.card{
  width:95%;
  max-width:520px;
  margin:36px auto;
  background:var(--card);
  border-radius:16px;
  padding:26px;
  box-shadow:0 8px 30px rgba(0,0,0,0.06);
}

.title{
  margin:0 0 14px 0;
  text-align:center;
  color:var(--accent);
  font-size:20px;
  font-weight:700;
}

.progress-wrap{margin:8px 0 18px 0}
.progress-track{background:#eee;border-radius:999px;height:28px;position:relative;overflow:hidden}
.progress-fill{
  display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-dark));
  color:#fff;text-align:center;line-height:28px;font-weight:700;transition:width .35s ease;
}

/* STEPS */
.step{display:none}
.step.active{display:block; animation:fadeIn .36s ease}

h2{margin:0 0 12px 0;font-size:18px;color:#222}
.btn-row{display:flex;gap:12px;justify-content:center;margin:16px 0}
.btn-ghost{
  background:transparent;border:2px solid var(--accent);color:var(--accent);
  padding:10px 18px;border-radius:10px;font-weight:700;cursor:pointer;
}
.btn{padding:10px 18px;border-radius:10px;border:none;cursor:pointer}
.btn.primary{background:var(--accent);color:#fff;font-weight:700}
.btn-ghost:hover{background:rgba(147,171,13,0.06)}
.btn.primary:hover{background:var(--accent-dark)}

select,input[type="text"],input[type="tel"]{
  width:100%;padding:12px;border-radius:10px;border:1px solid #e6e6e6;margin-top:8px;
  background:#fff;font-size:15px;
}

.nav{display:flex;justify-content:space-between;margin-top:18px}
.buttons{display:flex;gap:12px;justify-content:space-between;margin-top:16px}
.checkbox-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:10px}
.check{display:flex;align-items:center;gap:8px;padding:8px;border-radius:8px;border:1px solid #f0f0f0;background:#fcfcfb}
.check input{transform:scale(1.05)}

@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* responsive */
@media (max-width:480px){
  .check{font-size:14px}
  .checkbox-grid{grid-template-columns:repeat(1,1fr)}
  .card{margin:16px;padding:18px}
}