/* ==========================================================================
   AI readiness quiz (diagnostic-ia.html)
   ========================================================================== */

.quiz-section{
  position:relative; overflow:hidden;
  padding:clamp(48px,7vw,96px) 0 clamp(64px,9vw,120px);
  min-height:calc(100vh - 140px);
}
.quiz{max-width:820px; margin:0 auto; position:relative; z-index:1; scroll-margin-top:100px;}
.quiz-axes{display:flex; flex-wrap:wrap; gap:10px; margin:1.6em 0 2.2em;}

/* question */
.quiz-progress{height:6px; border-radius:999px; background:var(--gray-200); overflow:hidden; margin-bottom:22px;}
.quiz-progress span{
  display:block; height:100%; width:0; border-radius:inherit;
  background:linear-gradient(90deg, var(--purple-500), var(--coral-500));
  transition:width .5s var(--ease);
}
.quiz-meta{
  display:flex; justify-content:space-between; gap:16px; margin-bottom:18px;
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.04em; color:var(--text-soft);
}
.quiz-axis{color:var(--purple-500);}
.quiz-q{font-size:clamp(1.4rem,2.6vw,2rem); margin-bottom:1.1em; outline:none;}
.quiz-options{display:grid; gap:12px;}
.quiz-option{
  display:flex; align-items:center; gap:14px; text-align:left; width:100%;
  padding:16px 18px; border-radius:14px; cursor:pointer;
  border:1.5px solid var(--line); background:#fff;
  font:inherit; font-size:1rem; color:var(--text);
  transition:border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.quiz-option:hover:not(:disabled){border-color:var(--purple-300); transform:translateX(4px);}
.quiz-option:disabled{cursor:default;}
.quiz-option.selected{border-color:var(--purple-500); background:var(--purple-050);}
.quiz-key{
  width:30px; height:30px; border-radius:8px; flex:none;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:.8rem; font-weight:600;
  background:var(--bg-soft); color:var(--text-soft);
  transition:background .2s, color .2s;
}
.quiz-option.selected .quiz-key{background:var(--purple-500); color:#fff;}
.quiz-back{margin-top:22px; background:none; border:none; cursor:pointer; padding:.4em 0; font-weight:600; color:var(--text-soft);}
.quiz-back:hover{color:var(--purple-500);}
.quiz-screen:not([hidden]){animation:quiz-in .45s var(--ease);}
@keyframes quiz-in{from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:none;}}

/* result */
.qr-grid{display:grid; grid-template-columns:220px 1fr; gap:clamp(28px,5vw,56px); align-items:center; margin-bottom:36px;}
@media (max-width:680px){ .qr-grid{grid-template-columns:1fr; justify-items:start;} }
.qr-score{position:relative; width:220px; text-align:center;}
.qr-score svg{width:220px; height:220px; transform:rotate(-90deg);}
.qr-ring-bg{fill:none; stroke:var(--gray-200); stroke-width:10;}
.qr-ring{
  fill:none; stroke:var(--purple-500); stroke-width:10; stroke-linecap:round;
  stroke-dasharray:100; stroke-dashoffset:100;
  transition:stroke-dashoffset 1.2s var(--ease);
}
.quiz-result.animate .qr-ring{stroke-dashoffset:calc(100 - var(--s));}
.qr-score-num{position:absolute; top:0; left:0; width:220px; height:220px; display:flex; flex-direction:column; align-items:center; justify-content:center;}
.qr-score-num b{font-family:var(--font-display); font-size:3.4rem; font-weight:800; color:var(--text); line-height:1;}
.qr-score-num span{font-family:var(--font-mono); font-size:.85rem; color:var(--text-soft); margin-top:4px;}
.qr-score-label{font-family:var(--font-mono); font-size:.76rem; letter-spacing:.06em; margin:10px 0 0;}

.qr-axes{display:grid; gap:14px; margin-top:20px;}
.qr-axis-head{display:flex; justify-content:space-between; font-size:.88rem; font-weight:600; margin-bottom:6px;}
.qr-axis-head b{font-family:var(--font-mono); font-weight:500; color:var(--text-soft);}
.qr-track{height:8px; border-radius:999px; background:var(--gray-200); overflow:hidden;}
.qr-track i{
  display:block; height:100%; width:var(--v); border-radius:inherit; background:var(--purple-500);
  transform:scaleX(0); transform-origin:left; transition:transform 1.1s var(--ease);
}
.qr-axis.is-weak .qr-track i{background:var(--coral-500);}
.quiz-result.animate .qr-track i{transform:scaleX(1);}

.qr-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:32px;}
@media (max-width:760px){ .qr-cards{grid-template-columns:1fr;} }
.qr-card{padding:20px; border-radius:14px; border:1px solid var(--line); background:#fff;}
.qr-card p{margin:0; font-size:.92rem;}
.qr-card-k{display:block; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.05em; color:var(--purple-500); margin-bottom:8px; text-transform:uppercase;}
.qr-card-focus{border-color:var(--coral-100); background:#FFF6F7;}
.qr-card-focus .qr-card-k{color:var(--coral-500);}
.qr-card-service{transition:border-color .2s, transform .2s;}
.qr-card-service:hover{border-color:var(--purple-300); transform:translateY(-3px);}
.qr-card-service strong{color:var(--purple-500);}
.qr-actions{display:flex; flex-wrap:wrap; gap:14px;}

@media (prefers-reduced-motion: reduce){
  .qr-ring, .qr-track i{transition:none;}
}