:root{
  --bg-start:#fde9b6;
  --bg-end:#fffaf0;
  --brand:#ffc033;
  --brand-strong:#ffb114;
  --ink:#081532;
  --muted:#5e6b85;
  --card:#ffffff;
  --shadow:0 10px 24px rgba(10, 22, 50, .08);
  --radius:18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Poppins, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink);
  background: radial-gradient(1200px 600px at 50% 45%, var(--bg-end) 0%, var(--bg-start) 100%);
  display:flex;align-items:center;justify-content:center;
}

.container{width:min(100%, 1100px);padding:32px 20px}
.progress{
  display:flex;gap:28px;justify-content:space-between;max-width:760px;margin:0 auto 56px;
}
.bar{flex:1;height:8px;border-radius:999px;background:#fff;position:relative;box-shadow:inset 0 0 0 2px rgba(0,0,0,.03)}
.bar.fill::after{content:"";position:absolute;left:0;top:0;height:100%;width:74%;background:var(--brand);border-radius:inherit}
.bar.done{background:var(--brand)}

.meta{font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;text-align:center;margin-bottom:8px}

.title{
  margin:6px auto 28px;max-width:980px;text-align:center;line-height:1.4;
  font-size:35px;font-weight:700;
}

.options{max-width:720px;margin:32px auto;display:grid;gap:16px}

.opt{
  display:flex;align-items:center;gap:14px;padding:18px 20px;border-radius:999px;background:var(--card);
  box-shadow:var(--shadow);border:2px solid transparent;transition:border-color .2s ease, transform .05s ease;
}
.opt:hover{border-color:#ffe29a;transform:translateY(-1px)}

.opt input{appearance:none;-webkit-appearance:none;width:20px;height:20px;border-radius:50%;outline:none;border:2px solid #c9d0e3;display:grid;place-content:center;position:relative}
.opt input::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--brand);transform:scale(0);transition:transform .15s ease}
.opt input:checked{border-color:var(--brand)}
.opt input:checked::after{transform:scale(1)}

.label{font-size:18px}

.actions{display:flex;gap:20px;justify-content:center;margin-top:34px}

.btn{
  appearance:none;border:none;cursor:pointer;font-weight:700;font-size:16px;
  padding:16px 26px;border-radius:999px;background:var(--brand);color:#081532;box-shadow:var(--shadow);
  transition:transform .06s ease, background .2s ease;
}
.btn:hover{background:var(--brand-strong);}
.btn:active{transform:translateY(1px)}

@media (max-width:768px){
  .container{padding:20px 15px}
  .progress{gap:15px;margin-bottom:30px}
  .title{font-size:28px;margin:15px auto 20px}
  .options{gap:12px;margin:20px auto}
  .opt{padding:15px;gap:10px}
  .label{font-size:16px}
  .actions{flex-direction:column;gap:15px;margin-top:25px}
  .btn{padding:14px 24px;font-size:15px}
  
  /* Phone input tablet responsive */
  .phone-container{gap:10px}
  .form-group input, .form-group select{padding:14px;font-size:16px}
}

@media (max-width:480px){
  .container{padding:15px 10px}
  .progress{gap:8px;margin-bottom:25px}
  .bar{height:6px}
  .title{font-size:24px;line-height:1.3}
  .meta{font-size:12px}
  .opt{padding:12px;border-radius:12px}
  .label{font-size:15px}
  .btn{padding:12px 20px;font-size:14px}
  
  /* Phone input responsive */
  .phone-container{flex-direction:column;gap:8px}
  .phone-container select{width:100%;margin-bottom:8px}
  .phone-container input{width:100%}
  .form-group{margin-bottom:15px}
  .form-group input, .form-group select{font-size:16px;padding:12px}
}

/* Modal Styles */
.modal-overlay{
  position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);
  display:flex;align-items:center;justify-content:center;z-index:1000;
}
.modal{
  background:var(--card);border-radius:20px;padding:40px;max-width:500px;width:90%;
  box-shadow:0 20px 40px rgba(0,0,0,0.2);text-align:center;animation:modalSlide 0.3s ease;
}
@keyframes modalSlide{
  from{transform:translateY(-50px);opacity:0}
  to{transform:translateY(0);opacity:1}
}
.modal h2{color:var(--ink);margin-bottom:20px;font-size:28px}
.modal p{color:var(--muted);margin-bottom:30px;font-size:16px;line-height:1.5}
.modal-buttons{display:flex;gap:15px;justify-content:center}
.modal-btn{padding:15px 30px;border:none;border-radius:25px;font-weight:700;cursor:pointer;font-size:16px;transition:transform 0.2s ease}
.modal-btn:hover{transform:translateY(-2px)}
.modal-btn.primary{background:var(--brand);color:var(--ink)}
.modal-btn.secondary{background:#e2e8f0;color:var(--muted)}