/* ============ переменные ============ */
:root{
  --paper:#F6F1E6;
  --paper-alt:#EEE5D3;
  --paper-line:#DDD0B5;
  --ink:#2A2318;
  --ink-soft:#6E6252;
  --ink-faint:#9C8F7A;
  --accent:#B5502F;
  --accent-ink:#F6F1E6;

  --c-beglec:#8C4A2B;
  --c-nabludatel:#33607F;
  --c-molchun:#4B7350;
  --c-perfekcionist:#C17A22;
  --c-ugodnik:#7A4A85;

  --radius:14px;
  --shadow-soft:0 2px 10px rgba(42,35,24,.06);
  --shadow-lift:0 12px 28px rgba(42,35,24,.14);
}

@media (prefers-color-scheme: dark){
  :root{
    --paper:#211B14;
    --paper-alt:#2A2318;
    --paper-line:#3C3122;
    --ink:#F1E7D4;
    --ink-soft:#C1B29A;
    --ink-faint:#8A7C66;
    --accent:#E38257;
    --accent-ink:#211B14;

    --c-beglec:#D98A5E;
    --c-nabludatel:#6FA6C7;
    --c-molchun:#7DB489;
    --c-perfekcionist:#E3A855;
    --c-ugodnik:#B487BE;

    --shadow-soft:0 2px 12px rgba(0,0,0,.35);
    --shadow-lift:0 14px 32px rgba(0,0,0,.45);
  }
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Karla", -apple-system, sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.display{
  font-family:"Fraunces", serif;
  font-weight:600;
  letter-spacing:-0.01em;
  margin:0;
}
.display em{
  font-style:italic;
  font-weight:400;
  color:var(--accent);
}
.display--h1{
  font-size:clamp(2.2rem, 7vw, 3.4rem);
  line-height:1.08;
}

h1,h2,h3{ font-family:"Fraunces", serif; font-weight:600; }

/* ============ фактурный шум ============ */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:999;
  opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark){ .grain{ opacity:.08; mix-blend-mode:overlay; } }

/* ============ раскладка ============ */
.container{
  max-width:640px;
  margin:0 auto;
  padding:0 24px;
}

.screen{ display:none; min-height:100vh; padding:56px 0 80px; }
.screen.is-active{ display:block; }

/* ============ появление на входном экране ============ */
.reveal{
  opacity:0; transform:translateY(14px);
  animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards;
}
.reveal:nth-child(1){ animation-delay:.02s; }
.reveal:nth-child(2){ animation-delay:.10s; }
.reveal:nth-child(3){ animation-delay:.18s; }
.reveal:nth-child(4){ animation-delay:.26s; }
.reveal:nth-child(5){ animation-delay:.34s; }
.reveal:nth-child(6){ animation-delay:.42s; }
.reveal:nth-child(7){ animation-delay:.50s; }
.reveal:nth-child(8){ animation-delay:.58s; }
@keyframes rise{ to{ opacity:1; transform:none; } }

/* ============ бейдж ============ */
.badge{
  display:inline-block;
  font-family:"Karla", sans-serif;
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--ink-soft);
  border:1.5px dashed var(--paper-line);
  border-radius:999px;
  padding:7px 16px;
  margin-bottom:22px;
  transform:rotate(-1.5deg);
}

.lead{ font-size:1.12rem; color:var(--ink); }
p{ margin:0 0 18px; color:var(--ink); }
strong{ font-weight:700; }

/* ============ блок "после теста" ============ */
.callout{
  background:var(--paper-alt);
  border-radius:var(--radius);
  padding:22px 24px 6px;
  margin:28px 0;
  border-left:4px solid var(--accent);
}
.callout h2{
  font-size:1rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  margin:0 0 12px;
}
.callout ul{ margin:0; padding:0 0 16px 20px; }
.callout li{ margin-bottom:8px; }

/* ============ легенда типов ============ */
.legend{
  display:flex; flex-wrap:wrap; gap:10px 18px;
  margin:26px 0;
  padding:16px 0;
  border-top:1px solid var(--paper-line);
  border-bottom:1px solid var(--paper-line);
}
.legend-item{ display:flex; align-items:center; gap:8px; font-size:.92rem; color:var(--ink-soft); }
.dot{
  width:13px; height:13px; border-radius:50%;
  background:var(--c);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--c) 18%, transparent);
  flex:none;
}

/* ============ инструкция ============ */
.instruction{
  border:1.5px dashed var(--paper-line);
  border-radius:var(--radius);
  padding:20px 22px 4px;
  margin-bottom:34px;
}
.instruction h3{ font-size:1.02rem; margin:0 0 10px; }
.instruction p{ color:var(--ink-soft); }

/* ============ кнопки ============ */
.btn{
  font-family:"Karla", sans-serif;
  font-weight:700;
  font-size:1rem;
  border-radius:999px;
  border:none;
  cursor:pointer;
  padding:14px 26px;
  transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease, background .18s ease;
}
.btn-primary{
  background:var(--ink);
  color:var(--paper);
  box-shadow:var(--shadow-soft);
}
.btn-primary:hover:not(:disabled){ transform:translateY(-2px); box-shadow:var(--shadow-lift); }
.btn-primary:active:not(:disabled){ transform:translateY(0); }
.btn-primary:disabled{ opacity:.35; cursor:not-allowed; box-shadow:none; }

.btn-large{ padding:16px 34px; font-size:1.05rem; width:100%; }

.btn-ghost{
  background:transparent;
  color:var(--ink-soft);
  padding:14px 10px;
}
.btn-ghost:hover{ color:var(--ink); }
.btn-ghost:disabled{ opacity:0; pointer-events:none; }

.link-btn{
  display:block; margin:28px auto 0;
  background:none; border:none; cursor:pointer;
  font-family:"Karla", sans-serif;
  font-size:.92rem; color:var(--ink-faint);
  text-decoration:underline; text-underline-offset:3px;
}
.link-btn:hover{ color:var(--ink-soft); }

/* ============ экран вопросов ============ */
.quiz-top{
  position:sticky; top:0; z-index:10;
  background:var(--paper);
  padding-top:20px;
  border-bottom:1px solid var(--paper-line);
}
.quiz-top__inner{ padding-bottom:14px; }
.progress-track{
  height:6px; border-radius:999px;
  background:var(--paper-alt);
  overflow:hidden;
  margin-bottom:10px;
}
.progress-fill{
  height:100%; border-radius:999px;
  width:0%;
  background:linear-gradient(90deg, var(--c-beglec), var(--c-nabludatel), var(--c-molchun), var(--c-perfekcionist), var(--c-ugodnik));
  transition:width .45s cubic-bezier(.2,.7,.2,1);
}
.q-counter{
  font-size:.82rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-faint);
}

.quiz-body{ padding-top:34px; }
.question{
  font-size:clamp(1.4rem, 4.4vw, 1.85rem);
  line-height:1.28;
  margin:0 0 30px;
}
.question.q-anim, .options.q-anim{ animation:qslide .45s cubic-bezier(.2,.7,.2,1); }
@keyframes qslide{ from{ opacity:0; transform:translateX(18px); } to{ opacity:1; transform:none; } }

.options{ display:flex; flex-direction:column; gap:12px; }
.option{
  display:flex; align-items:flex-start; gap:14px;
  background:var(--paper-alt);
  border:1.5px solid var(--paper-line);
  border-radius:var(--radius);
  padding:15px 18px;
  cursor:pointer;
  transition:border-color .16s ease, transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.option:hover{ transform:translateY(-1px); box-shadow:var(--shadow-soft); border-color:var(--ink-faint); }
.option input{ position:absolute; opacity:0; width:0; height:0; }
.option .box{
  flex:none; width:22px; height:22px; margin-top:1px;
  border-radius:7px; border:2px solid var(--ink-faint);
  display:flex; align-items:center; justify-content:center;
  transition:background .16s ease, border-color .16s ease;
}
.option .box svg{ opacity:0; transform:scale(.5); transition:opacity .12s ease, transform .12s ease; }
.option input:checked + .box{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.option input:checked + .box svg{ opacity:1; transform:scale(1); }
.option:has(input:checked){
  background:color-mix(in srgb, var(--ink) 8%, var(--paper-alt));
  border-color:var(--ink);
}
.option .txt{ padding-top:1px; }

.quiz-nav{
  position:sticky; bottom:0;
  background:linear-gradient(0deg, var(--paper) 55%, transparent);
  padding-top:26px;
}
.quiz-nav__inner{ display:flex; align-items:center; justify-content:space-between; padding-bottom:22px; }

/* ============ экран результата ============ */
.screen--result .container{ text-align:left; }
.result-container{ padding-top:12px; }
.result-dot{
  width:52px; height:52px; border-radius:50%;
  background:var(--rc);
  margin-bottom:18px;
  box-shadow:0 0 0 8px color-mix(in srgb, var(--rc) 14%, transparent);
  animation:pop .6s cubic-bezier(.2,.7,.2,1);
}
@keyframes pop{ from{ transform:scale(.4); opacity:0; } to{ transform:scale(1); opacity:1; } }
.result-kicker{
  font-size:.8rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:8px;
}
.result-name{ color:var(--rc); margin-bottom:14px; }
.result-vuln{
  display:inline-block;
  font-weight:700; font-size:.9rem;
  border:1.5px solid var(--rc); color:var(--rc);
  border-radius:999px; padding:7px 16px;
  margin-bottom:26px;
}
.result-text p{ font-size:1.04rem; }

.cta-card{
  margin-top:30px;
  background:color-mix(in srgb, var(--rc) 12%, var(--paper-alt));
  border-radius:var(--radius);
  padding:26px 26px 28px;
  border:1px solid color-mix(in srgb, var(--rc) 30%, var(--paper-line));
}
.cta-card h3{ margin:0 0 10px; font-size:1.15rem; }
.cta-card p{ color:var(--ink-soft); margin-bottom:20px; }
.cta-card .btn-primary{ background:var(--rc); color:#fff; }

@media (max-width:480px){
  .container{ padding:0 20px; }
  .screen{ padding:40px 0 60px; }
}