.spq-scope {
  --spq-black: #231f20;
  --spq-hotpink: #ec168f;
  --spq-pink2: #ff4fb3;
  --spq-softpink: #fff0f8;
  --spq-light: #f7f7f8;
  --spq-text: #1f2937;
  --spq-muted: #64748b;
  --spq-white: #ffffff;
  --spq-radius: 24px;
  --spq-shadow: 0 20px 60px rgba(23, 35, 63, 0.14);
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--spq-text);
  background: radial-gradient(circle at top left, rgba(236,22,143,.13), transparent 34%), linear-gradient(180deg, #ffffff 0%, #f7f7f8 100%);
  min-height: 100vh;
}
.spq-scope * { box-sizing: border-box; }
.spq-page { max-width: 1120px; margin: 0 auto; padding: 28px; }
.spq-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; gap: 16px; }
.spq-brand { display: flex; align-items: center; gap: 12px; }
.spq-logo-mark { width: 70px; height: 70px; border-radius: 50%; object-fit: contain; background: white; box-shadow: 0 8px 22px rgba(35,31,32,.12); }
.spq-brandline { display:flex; flex-direction:column; line-height:1.15; font-weight: 800; color: var(--spq-black); }
.spq-brandline span:last-child { font-size:12px; color:var(--spq-hotpink); }
.spq-pill { display: inline-flex; align-items: center; border-radius: 999px; background: rgba(255,255,255,.72); padding: 9px 14px; font-size: 14px; font-weight: 700; border: 1px solid rgba(36,84,166,.12); color: var(--spq-black); }
.spq-hero { display: grid; grid-template-columns: 1.08fr .92fr; gap: 26px; }
.spq-card { background: rgba(255,255,255,.86); border: 1px solid rgba(36,84,166,.12); border-radius: var(--spq-radius); box-shadow: var(--spq-shadow); overflow: hidden; }
.spq-intro { padding: 40px; border-left: 10px solid var(--spq-hotpink); position: relative; }
.spq-intro-logo { width:96px; height:96px; border-radius:50%; margin-bottom:18px; }
.spq-scope h1 { margin: 0 0 16px; font-size: 58px; line-height: .98; color: var(--spq-black); letter-spacing: -.055em; }
.spq-highlight { color: var(--spq-hotpink); }
.spq-lead { margin: 0 0 24px; color: #42526e; font-size: 18px; line-height: 1.55; }
.spq-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 24px 0; }
.spq-scope label { display: block; font-size: 13px; font-weight: 800; color: var(--spq-black); margin-bottom: 7px; }
.spq-scope input { width: 100%; border: 1px solid #d8e0eb; border-radius: 14px; padding: 13px; outline: none; background: white; color: var(--spq-text); }
.spq-primary { width: 100%; background: linear-gradient(135deg, var(--spq-hotpink), var(--spq-pink2)); color: white; border: 0; border-radius: 999px; padding: 15px 25px; font-weight: 800; cursor: pointer; transition: transform .15s ease; }
.spq-primary:hover { transform: translateY(-1px); }
.spq-secondary { background: #eef4fb; color: var(--spq-black); border: 0; border-radius: 999px; padding: 15px 25px; font-weight: 800; cursor: pointer; }
.spq-scale-card { padding: 30px; background: linear-gradient(160deg, var(--spq-black), #213764); color: white; position: relative; }
.spq-scale-card:after { content: ""; position: absolute; width: 180px; height: 180px; border-radius: 999px; right: -65px; bottom: -55px; background: rgba(245,185,66,.28); }
.spq-scale-card h2 { color: white; margin-top: 0; }
.spq-scale-item { display: flex; justify-content: space-between; padding: 12px; border-radius: 16px; background: rgba(255,255,255,.12); margin-bottom: 10px; }
.spq-quiz-wrap, .spq-result-wrap { display: none; margin-top: 26px; }
.spq-card-inner { padding: 40px; }
.spq-question { font-size: clamp(24px, 3vw, 36px); font-weight: 800; margin-bottom: 24px; color: var(--spq-black); }
.spq-answers { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.spq-answer { min-height: 110px; border: 2px solid #dce6f2; border-radius: 20px; background: white; cursor: pointer; text-align: center; display: grid; place-items: center; transition: all 0.2s; color: var(--spq-black); padding: 10px; }
.spq-answer:hover { border-color: var(--spq-hotpink); transform: translateY(-1px); }
.spq-answer-number { font-size:28px; font-weight:900; display:block; }
.spq-answer-label { font-size:12px; font-weight:800; color:#64748b; }
.spq-back-wrap { margin-top:20px; }
.spq-result-inner { padding:40px; text-align:center; }
.spq-result-logo { width:80px; height:80px; margin-bottom:20px; }
.spq-score-ring { margin: 22px auto; width: 190px; height: 190px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--spq-pink2) 0deg, var(--spq-pink2) var(--angle, 0deg), #e7edf5 var(--angle, 0deg), #e7edf5 360deg); position: relative; }
.spq-score-ring:before { content:""; position:absolute; inset: 16px; background:white; border-radius:50%; }
.spq-score-inner { position:relative; z-index:1; }
.spq-score-inner small { font-weight:800; color:var(--spq-muted); }
.spq-score-value { position: relative; z-index: 1; font-size: 42px; font-weight: 900; color: var(--spq-black); }
.spq-result-badge { display: inline-flex; padding: 10px 16px; background: var(--spq-softpink); color: var(--spq-black); border-radius: 999px; font-weight: 900; margin-bottom: 16px; }
.spq-result-title { font-size: 56px; margin:0; color:var(--spq-black); }
.spq-result-copy { font-size: 18px; line-height: 1.55; color: #42526e; max-width:760px; margin:0 auto; }
.spq-next-box { text-align: left; background: #f8fafc; border-radius: 20px; padding: 25px; border: 1px solid #e4ebf4; margin-top: 24px; }
.spq-next-box h3 { margin-top: 0; color: var(--spq-black); }
.spq-footer-powered { margin-top: 28px; display:flex; align-items:center; gap:12px; color:var(--spq-muted); font-size:13px; font-weight:700; }
.spq-footer-powered:before { content:""; width:30px; height:1px; background:#cfcbd0; display:block; }
.spq-centered { justify-content:center; }
.spq-thank-you { margin-top:30px; }
.spq-thank-you p { font-weight:800; color:var(--spq-hotpink); font-size:20px; margin-bottom:5px; }
.spq-thank-you a { color:var(--spq-muted); text-decoration:none; font-weight:700; }
.spq-confetti-piece { position: fixed; top: -12px; width: 10px; height: 16px; z-index: 9999; animation: spqConfettiFall 2.8s linear forwards; }
@keyframes spqConfettiFall { to { transform: translateY(105vh) rotate(720deg); } }
@media (max-width: 850px) {
  .spq-hero { grid-template-columns: 1fr !important; gap: 16px; }
  .spq-scope h1 { font-size: 38px !important; }
  .spq-answers { grid-template-columns: 1fr !important; gap: 10px; }
  .spq-answer { min-height: 80px !important; }
  .spq-intro { padding: 26px !important; border-left: none !important; border-top: 8px solid var(--spq-hotpink); }
  .spq-page { padding: 12px !important; }
  .spq-form-grid { grid-template-columns: 1fr !important; }
  .spq-topbar { align-items: flex-start; flex-direction: column; }
  .spq-pill { font-size: 12px; }
  .spq-result-title { font-size: 38px; }
  .spq-card-inner, .spq-result-inner { padding: 26px; }
}