/* Версия квиза для встраивания попапом на одноэкранник copy.html —
   те же классы/логика, что и в квиз/js/quiz.js, но без полноэкранного body-фона:
   всё это рендерится внутри модального окна поверх обычной страницы сайта. */
:root{
  --brand:#17191d;
  --brand-dark:#050506;
  --accent:#ffc30d;
  --accent-dark:#e6af00;
  --ink:#16181b;
  --muted:#6a6f76;
  --line:#e7e7e9;
  --radius:16px;
}

.quiz-overlay{position:fixed;inset:0;background:rgba(5,5,6,.75);display:none;align-items:center;justify-content:center;z-index:200;padding:20px}
.quiz-overlay.show{display:flex}
.quiz-overlay .wrap{max-width:480px;width:100%;max-height:92vh;overflow:auto;background:linear-gradient(160deg,var(--brand-dark),var(--brand) 60%);border-radius:20px;padding:20px;position:relative}
.quiz-close{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;background:#fff;color:#111;border:none;font-size:20px;line-height:1;cursor:pointer;z-index:2;display:flex;align-items:center;justify-content:center}

.quiz-overlay img{max-width:100%;display:block}
.quiz-overlay .card{background:#fff;border-radius:var(--radius);padding:26px;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.quiz-overlay .hero-img{border-radius:12px;height:170px;object-fit:cover;width:100%;margin-bottom:18px}
.quiz-overlay .offer-badge{display:inline-block;background:#fff6db;color:#8a6c00;font-weight:700;font-size:13px;padding:7px 14px;border-radius:999px;margin-bottom:12px}
.quiz-overlay h1{font-size:24px;margin:0 0 10px;line-height:1.25}
.quiz-overlay .sub{color:var(--muted);font-size:15px;margin-bottom:20px}

.quiz-overlay .btn{display:flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:999px;padding:16px 24px;font-weight:800;font-size:17px;cursor:pointer;width:100%}
.quiz-overlay .btn-accent{background:var(--accent);color:#111;box-shadow:0 10px 24px rgba(0,0,0,.25)}
.quiz-overlay .btn-accent:hover{background:var(--accent-dark)}

.quiz-overlay .gain-box{display:flex;align-items:center;justify-content:space-between;background:#faf6e8;border:1px solid #f0e3ae;border-radius:12px;padding:12px 16px;margin-bottom:18px}
.quiz-overlay .gain-box .gain-label{font-size:13px;color:var(--muted)}
.quiz-overlay .gain-box .gain-value{font-size:20px;font-weight:800;color:var(--accent-dark)}

.quiz-overlay .founder-mini{display:flex;align-items:center;gap:12px;margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.quiz-overlay .founder-mini .avatar{width:44px;height:44px;border-radius:50%;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;flex-shrink:0}
.quiz-overlay .founder-mini .name{font-weight:700;font-size:14px}
.quiz-overlay .founder-mini .role{color:var(--muted);font-size:12px}

.quiz-overlay .progress{height:6px;background:var(--line);border-radius:6px;overflow:hidden;margin-bottom:22px}
.quiz-overlay .progress-bar{height:100%;background:var(--accent);width:0%;transition:.3s width}

.quiz-overlay .step{display:none}
.quiz-overlay .step.active{display:block;animation:qfade .25s ease}
@keyframes qfade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.quiz-overlay .q-title{font-size:19px;font-weight:800;margin-bottom:16px}
.quiz-overlay .options{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.quiz-overlay .opt{border:2px solid var(--line);border-radius:12px;padding:14px 16px;font-weight:600;cursor:pointer;transition:.15s}
.quiz-overlay .opt:hover{border-color:var(--brand)}
.quiz-overlay .opt.selected{border-color:var(--brand);background:var(--brand);color:#fff}

.quiz-overlay .field{margin-bottom:14px}
.quiz-overlay .field input{width:100%;padding:15px 16px;border:1px solid var(--line);border-radius:10px;font-size:16px;font-family:inherit}
.quiz-overlay .field input:focus{outline:2px solid var(--brand)}

.quiz-overlay .step-footer{margin-top:auto;display:flex;flex-direction:column;gap:8px}
.quiz-overlay .back-link{text-align:center;color:var(--muted);font-size:14px;cursor:pointer;margin-top:6px}

.quiz-overlay .trust{display:flex;justify-content:space-between;gap:8px;margin-top:20px;font-size:12px;color:var(--muted);text-align:center}
.quiz-overlay .trust div{flex:1}

.quiz-overlay .final{text-align:center}
.quiz-overlay .final .ico{font-size:48px;margin-bottom:14px}