*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:#000;
  color:#e6edf3;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:720px;margin:0 auto;padding:24px 16px;}

/* card */
.card{
  background:#0a1612;
  border:1px solid #16241d;
  border-radius:16px;
  padding:32px 28px;
  box-shadow:0 0 0 1px rgba(34,197,94,.04), 0 20px 50px rgba(0,0,0,.6);
}

/* persistent header */
.card-header{margin-bottom:18px;text-align:center}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11px;font-weight:700;letter-spacing:.14em;
  color:#22c55e;text-transform:uppercase;
  margin-bottom:14px;
}
.eyebrow .dot{
  width:6px;height:6px;border-radius:50%;background:#22c55e;
  box-shadow:0 0 8px rgba(34,197,94,.7);
}
h1{
  font-size:30px;line-height:1.2;
  font-weight:800;color:#fff;
  margin:0 0 14px;
  letter-spacing:-.01em;
}
.lead{
  font-size:15px;line-height:1.55;
  color:#9aa6b2;
  margin:0 auto 16px;
  max-width:560px;
}
.lead .hl,.hl{color:#22c55e;font-weight:700}
.social-proof{
  display:inline-flex;align-items:center;gap:8px;
  background:#0f1f19;
  border:1px solid #1c2f26;
  padding:8px 14px;border-radius:999px;
  font-size:13px;color:#cbd5d1;
}
.social-proof strong{color:#fff;font-weight:700}
.social-proof .dot{
  width:7px;height:7px;border-radius:50%;background:#22c55e;
  box-shadow:0 0 0 0 rgba(34,197,94,.6);
  animation:pulse 1.6s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}
  70%{box-shadow:0 0 0 8px rgba(34,197,94,0)}
  100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}
}

/* progress (persistent across questions + results) */
.progress-block{margin:18px 0 18px}
.progress-row{margin:0 0 8px}
.progress-bar{
  width:100%;height:3px;
  background:#15241d;
  border-radius:999px;overflow:hidden;
}
.progress-fill{
  height:100%;width:0%;
  background:#22c55e;
  box-shadow:0 0 8px rgba(34,197,94,.6);
  border-radius:999px;
  transition:width .5s ease;
}
.qmeta{
  display:flex;justify-content:space-between;align-items:center;
  font-size:13px;color:#7b8794;
}
.qpct{font-weight:700;color:#9aa6b2}

/* screens */
.screen{display:none;animation:fade .35s ease}
.screen.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* questions */
.qpill{
  display:inline-block;
  background:rgba(34,197,94,.12);
  border:1px solid rgba(34,197,94,.35);
  color:#22c55e;
  font-size:12px;font-weight:800;letter-spacing:.08em;
  padding:6px 12px;border-radius:6px;
  margin-bottom:14px;
}
.qtext{
  font-size:22px;line-height:1.35;font-weight:800;
  color:#fff;margin:0 0 18px;
}

/* answers */
.answers{display:flex;flex-direction:column;gap:10px}
.ans{
  display:flex;align-items:center;gap:14px;
  text-align:left;
  padding:14px 16px;
  border-radius:10px;
  border:1px solid #1c2f26;
  background:#0c1a15;
  cursor:pointer;
  font-family:inherit;
  font-size:15px;font-weight:500;color:#e6edf3;
  transition:all .15s ease;
}
.ans:hover{border-color:#22c55e;background:#0f2419}
.ans.selected{border-color:#22c55e;background:#102a1f}
.ans .letter{
  flex:0 0 28px;height:28px;
  display:inline-flex;align-items:center;justify-content:center;
  background:#152620;
  border:1px solid #1c2f26;
  border-radius:6px;
  font-size:12px;font-weight:800;color:#9aa6b2;
}
.ans:hover .letter,.ans.selected .letter{
  background:#0f2419;border-color:#22c55e;color:#22c55e;
}

/* cta */
.cta{
  display:block;width:100%;border:0;cursor:pointer;
  background:#22c55e;
  color:#04140b;font-weight:800;font-size:16px;
  font-family:inherit;
  padding:16px 18px;border-radius:10px;
  box-shadow:0 0 0 1px rgba(34,197,94,.3), 0 8px 22px rgba(34,197,94,.25);
  transition:transform .08s ease, box-shadow .2s ease, background .2s ease;
  margin-top:8px;
}
.cta:hover{background:#16a34a;transform:translateY(-1px);box-shadow:0 0 0 1px rgba(34,197,94,.4),0 10px 26px rgba(34,197,94,.35)}
.cta:active{transform:translateY(0)}
.cta-bright{
  background:#3aff8a;
  color:#04140b;
  font-size:17px;
  padding:18px 18px;
  box-shadow:0 0 0 1px rgba(58,255,138,.4), 0 10px 30px rgba(58,255,138,.4);
}
.cta-bright:hover{background:#22e074;box-shadow:0 0 0 1px rgba(58,255,138,.5),0 14px 36px rgba(58,255,138,.5)}
.fineprint{font-size:12px;color:#5a6470;text-align:center;margin:14px 0 0}

/* analyzing */
h2.centered,#analyzing h2{text-align:center}
h2{font-size:20px;line-height:1.3;margin:0 0 16px;font-weight:800;color:#fff}
.spinner{
  width:44px;height:44px;border-radius:50%;
  border:3px solid #15241d;border-top-color:#22c55e;
  margin:8px auto 18px;animation:spin .9s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.checklist{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-direction:column;gap:10px}
.checklist li{
  display:flex;align-items:center;gap:12px;
  background:#0c1a15;border:1px solid #1c2f26;
  border-radius:10px;padding:12px 14px;
  font-size:14px;font-weight:600;color:#9aa6b2;
  transition:all .3s ease;
}
.checklist li.done{background:#102a1f;border-color:#22c55e;color:#e6edf3}
.checklist .chk{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;
  background:#15241d;color:#5a6470;font-size:13px;font-weight:800;
}
.checklist li.done .chk{background:#22c55e;color:#04140b}

/* results */
.results-top{text-align:center;margin-bottom:18px}
.badge{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(34,197,94,.12);
  border:1px solid rgba(34,197,94,.4);
  color:#22c55e;
  font-size:12px;font-weight:800;letter-spacing:.08em;
  padding:7px 14px;border-radius:8px;
  margin:0 0 14px;
}
.results-headline{
  font-size:24px;line-height:1.3;font-weight:800;color:#fff;
  margin:0 0 10px;
}
.results-sub{
  font-size:13px;color:#9aa6b2;line-height:1.5;
  margin:0 auto;max-width:520px;
}

.daily-card{
  background:linear-gradient(180deg,#0d2218 0%,#0a1a13 100%);
  border:1px solid rgba(34,197,94,.35);
  border-radius:14px;
  padding:22px 18px;text-align:center;
  margin:18px 0 12px;
  box-shadow:inset 0 0 60px rgba(34,197,94,.05);
}
.daily-label{
  font-size:11px;font-weight:700;letter-spacing:.14em;
  color:#9aa6b2;text-transform:uppercase;
  margin-bottom:6px;
}
.big-number{
  font-size:64px;font-weight:900;color:#22c55e;
  letter-spacing:-.03em;line-height:1;margin:6px 0 6px;
  text-shadow:0 0 30px rgba(34,197,94,.4);
}
.per{color:#9aa6b2;font-size:13px;font-weight:600}
.per #projWeek{color:#22c55e;font-weight:800}

.proj-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  margin:0 0 14px;
}
.proj-cell{
  background:#0c1a15;border:1px solid #1c2f26;
  border-radius:12px;padding:18px 14px;text-align:center;
}
.proj-num{
  font-size:26px;font-weight:900;color:#22c55e;
  letter-spacing:-.02em;line-height:1;margin-bottom:6px;
}
.proj-label{font-size:13px;color:#9aa6b2;font-weight:600}

.profile-box{
  background:#0c1a15;border:1px solid #1c2f26;
  border-radius:12px;padding:14px 16px;margin:0 0 12px;
}
.profile-title{
  font-size:11px;font-weight:700;letter-spacing:.12em;
  color:#9aa6b2;text-transform:uppercase;margin-bottom:8px;
}
.profile-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.profile-list li{
  display:flex;align-items:center;gap:8px;
  font-size:14px;color:#cbd5d1;font-weight:500;
}
.profile-list .tick{color:#22c55e;font-weight:800}
.profile-list strong{color:#fff;font-weight:700}
.profile-list strong.hl{color:#22c55e}

.top-earner{
  display:flex;align-items:center;gap:10px;
  background:#0c1a15;border:1px solid #1c2f26;
  border-radius:10px;padding:12px 14px;
  font-size:13px;color:#cbd5d1;
  margin:0 0 14px;
}
.top-earner .dot{
  width:7px;height:7px;border-radius:50%;background:#22c55e;
  box-shadow:0 0 0 0 rgba(34,197,94,.6);
  animation:pulse 1.6s infinite;flex:0 0 7px;
}
.top-earner strong{color:#22c55e;font-weight:700}

.timer-box{
  text-align:center;margin:0 0 14px;
}
.timer-label{font-size:12px;color:#9aa6b2;font-weight:600;margin-bottom:2px}
.timer{
  font-size:30px;font-weight:900;color:#fbbf24;
  font-variant-numeric:tabular-nums;letter-spacing:.04em;
}

/* footer */
.foot{text-align:center;padding:18px 4px;color:#3f4855;font-size:11px}
.foot p{margin:0}

@media (max-width:480px){
  .wrap{padding:16px 12px}
  .card{padding:24px 18px}
  h1{font-size:24px}
  .qtext{font-size:19px}
  .results-headline{font-size:20px}
  .big-number{font-size:50px}
  .proj-num{font-size:22px}
}