/* ==========================================================
   TechPanda — Career Assessment Quiz
   ========================================================== */
:root{
  --navy:#16317E;
  --navy-dark:#0F1F5C;
  --green:#179E56;
  --green-light:#EAF8F0;
  --blue-light:#EEF3FF;
  --bg:#F7F9FC;
  --text:#172033;
  --text-secondary:#5F6B7A;
  --border:#DDE3EC;
  --white:#FFFFFF;
  --radius:14px;
  --shadow: 0 8px 24px rgba(15,31,92,0.08);
  --danger:#D64545;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Inter',sans-serif;
  color:var(--text);
  background:linear-gradient(180deg,var(--blue-light) 0%, var(--bg) 100%);
  min-height:100vh;
  line-height:1.6;
}
h1,h2{font-family:'Plus Jakarta Sans',sans-serif; color:var(--navy); line-height:1.3; margin:0 0 10px;}
p{margin:0 0 12px; color:var(--text-secondary);}
button{font-family:inherit;}
input{font-family:inherit;}

.quiz-shell{
  max-width:620px;
  margin:0 auto;
  min-height:100vh;
  background:var(--white);
  box-shadow:0 0 60px rgba(15,31,92,.06);
  display:flex;
  flex-direction:column;
  padding-bottom:96px; /* space for sticky nav bar */
  position:relative;
  z-index:2;
}

/* ---------- Background decoration ---------- */
.bg-decor{
  position:fixed;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}
.float-item{
  position:absolute;
  font-size:34px;
  opacity:.16;
  filter:grayscale(.15);
  animation:floatDrift 9s ease-in-out infinite;
}
.fi-1{top:8%;  left:6%;  font-size:40px; animation-delay:0s;}
.fi-2{top:18%; right:8%; font-size:36px; animation-delay:.6s;}
.fi-3{top:38%; left:4%;  font-size:30px; animation-delay:1.2s;}
.fi-4{top:58%; right:5%; font-size:32px; animation-delay:1.8s;}
.fi-5{top:72%; left:8%;  font-size:38px; animation-delay:2.4s;}
.fi-6{top:82%; right:10%;font-size:30px; animation-delay:3s;}
.fi-7{top:4%;  right:32%;font-size:28px; animation-delay:1.5s;}
.fi-8{top:92%; left:30%; font-size:30px; animation-delay:.9s;}

@keyframes floatDrift{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-22px) rotate(8deg); }
}

.blob{
  position:absolute;
  border-radius:50%;
  filter:blur(60px);
  opacity:.35;
}
.blob-1{
  width:340px; height:340px; top:-100px; left:-120px;
  background:radial-gradient(circle, var(--green-light), transparent 70%);
}
.blob-2{
  width:420px; height:420px; bottom:-140px; right:-140px;
  background:radial-gradient(circle, var(--blue-light), transparent 70%);
}

@media (prefers-reduced-motion: reduce){
  .float-item{animation:none;}
}
@media (max-width:600px){
  .float-item{font-size:24px !important; opacity:.12;}
}

/* ---------- Confetti canvas ---------- */
#confettiCanvas{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:999;
}

/* ---------- Header ---------- */
.quiz-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 20px;
  border-bottom:1px solid var(--border);
  position:sticky;
  top:0;
  background:var(--white);
  z-index:20;
}
.back-btn{
  display:flex; align-items:center; gap:4px;
  background:none; border:none; color:var(--text-secondary);
  font-size:14px; font-weight:600; cursor:pointer; padding:6px 4px;
}
.back-btn:hover{color:var(--navy);}
.brand{font-family:'Plus Jakarta Sans'; font-weight:800; font-size:18px; color:var(--navy);}
.brand span{color:var(--green);}
.header-spacer{width:52px;}

/* ---------- Progress ---------- */
.progress-wrap{padding:14px 20px 0;}
.progress-track{
  height:8px; background:var(--blue-light); border-radius:999px; overflow:hidden;
}
.progress-fill{
  height:100%; width:0%; border-radius:999px;
  background:linear-gradient(90deg,var(--green),var(--navy));
  transition:width .35s ease;
}
.progress-label{
  text-align:right; font-size:12px; color:var(--text-secondary); margin-top:6px; font-weight:600;
}

/* ---------- Main / steps ---------- */
.quiz-main{flex:1; padding:24px 20px 20px;}
.q-step{display:none; animation:fadeIn .35s ease;}
.q-step.active{display:block;}
@keyframes fadeIn{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);}}

.intro-badge{
  display:inline-block; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--navy); background:var(--blue-light); border:1px solid #D7E1FB;
  padding:6px 14px; border-radius:999px; margin-bottom:16px;
}
.intro-text{font-size:15.5px; margin-bottom:26px;}
.trust-line{font-size:12.5px; text-align:center; margin-top:16px; color:var(--text-secondary);}

.q-tag{
  display:inline-block; font-size:12px; font-weight:700; color:var(--green);
  text-transform:uppercase; letter-spacing:.04em; margin-bottom:8px;
}
.q-title{font-size:21px; font-weight:800; margin-bottom:4px;}
.q-sub{font-size:13.5px; margin-bottom:16px;}
.req{color:var(--danger); font-size:14px;}

/* ---------- Options ---------- */
.opt-grid{display:flex; flex-direction:column; gap:10px; margin-top:16px;}
.opt-card{
  display:flex; align-items:center; gap:12px;
  border:2px solid var(--border); border-radius:12px;
  padding:14px 16px; cursor:pointer; transition:all .15s ease;
  background:var(--white); position:relative;
}
.opt-card:hover{border-color:var(--navy); background:var(--blue-light);}
.opt-card input{position:absolute; opacity:0; width:0; height:0;}
.opt-mark{
  flex-shrink:0; width:30px; height:30px; border-radius:50%;
  background:var(--blue-light); color:var(--navy);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:800; transition:all .15s ease;
}
.opt-text{font-size:14.5px; font-weight:600; color:var(--text);}

.opt-card input:checked ~ .opt-mark,
.opt-card:has(input:checked) .opt-mark{
  background:var(--navy); color:#fff;
}
.opt-card:has(input:checked){
  border-color:var(--navy);
  background:var(--blue-light);
  box-shadow:0 4px 14px rgba(22,49,126,.12);
}
.opt-card:has(input[type="checkbox"]:checked) .opt-mark{background:var(--green);}
.opt-card:has(input[type="checkbox"]:checked){border-color:var(--green); background:var(--green-light);}

.opt-grid-pill{flex-direction:row; flex-wrap:wrap;}
.opt-pill{flex:1 1 calc(50% - 5px); padding:12px 14px;}
.opt-pill .opt-text{font-size:13.5px;}

/* ---------- Lead form fields ---------- */
.lead-head{margin-bottom:20px;}
.field-block{margin-bottom:20px;}
.field-label{
  display:block; font-size:14px; font-weight:700; color:var(--text); margin-bottom:8px;
}
.text-input{
  width:100%; padding:13px 16px; border:2px solid var(--border); border-radius:10px;
  font-size:15px; color:var(--text); outline:none; transition:border .15s;
  background:var(--white);
}
.text-input:focus{border-color:var(--navy);}
.text-input.invalid{border-color:var(--danger);}

.consent-row{
  display:flex; align-items:flex-start; gap:10px;
  border:2px solid var(--border); border-radius:12px; padding:14px 16px;
  cursor:pointer; font-size:13px; color:var(--text-secondary);
}
.consent-row input{margin-top:3px; width:16px; height:16px; accent-color:var(--navy); flex-shrink:0;}
.consent-row a{color:var(--navy); font-weight:600;}
.consent-row:has(input:checked){border-color:var(--navy); background:var(--blue-light);}

/* ---------- Buttons ---------- */
.btn-primary{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--green); color:#fff; font-weight:700; font-size:15px;
  padding:14px 26px; border-radius:10px; border:none; cursor:pointer;
  transition:background .2s, transform .15s; min-height:48px;
}
.btn-primary:hover{background:#138047;}
.btn-primary:active{transform:scale(.98);}
.btn-primary:disabled{opacity:.6; cursor:not-allowed;}
.btn-outline{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:transparent; color:var(--navy); font-weight:700; font-size:15px;
  padding:14px 26px; border-radius:10px; border:2px solid var(--navy); cursor:pointer;
  min-height:48px; text-decoration:none;
}
.btn-outline:hover{background:var(--blue-light);}
.btn-block{width:100%;}
.spinner{animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---------- Sticky nav bar (per-step Continue/Back) ---------- */
.nav-bar{
  position:fixed; left:0; right:0; bottom:0;
  max-width:620px; margin:0 auto;
  display:flex; gap:12px;
  padding:14px 20px calc(14px + env(safe-area-inset-bottom));
  background:var(--white); border-top:1px solid var(--border);
  box-shadow:0 -6px 20px rgba(15,31,92,.08);
  z-index:30;
}
.nav-back{flex:0 0 110px;}
.nav-next{flex:1;}
.nav-bar[data-hidden="true"]{display:none;}

/* ---------- Success screen ---------- */
.success-screen{
  padding:60px 24px; text-align:center;
}
.success-icon{
  width:72px; height:72px; border-radius:50%; background:var(--green-light);
  color:var(--green); font-size:34px; font-weight:800;
  display:flex; align-items:center; justify-content:center; margin:0 auto 20px;
  border:3px solid var(--green);
}
.success-screen h2{font-size:22px; margin-bottom:10px;}
.success-screen p{font-size:14.5px; max-width:420px; margin:0 auto 26px;}
.link-home{
  display:block; margin-top:16px; font-size:13.5px; color:var(--text-secondary); text-decoration:underline;
}

/* ---------- Responsive ---------- */
@media (max-width:480px){
  .q-title{font-size:19px;}
  .opt-pill{flex:1 1 100%;}
  .quiz-shell{padding-bottom:88px;}
}

.q-step.shake{animation:shakeX .4s ease;}
@keyframes shakeX{
  10%,90%{transform:translateX(-2px);}
  20%,80%{transform:translateX(4px);}
  30%,50%,70%{transform:translateX(-8px);}
  40%,60%{transform:translateX(8px);}
}

@media (min-width:640px){
  body{padding:24px 0;}
  .quiz-shell{border-radius:20px; min-height:auto;}
  .nav-bar{border-radius:0 0 20px 20px; position:sticky;}
}