.hq-section{background:radial-gradient(ellipse at 95% 25%,#e8e1ff 0,transparent 46%),linear-gradient(135deg,#fff8ed,#fff5fa 55%,#f5f3ff);padding-block:clamp(3rem,6vw,5.5rem)}
.hq-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,4vw,4rem);align-items:center}
.hq-copy .home-section-title{font-size:clamp(2rem,3.5vw,3.15rem);line-height:1.1;margin-top:1rem}
.hq-intro{margin-top:1.25rem;font-size:1.05rem;max-width:35rem}.hq-intro strong{color:#6d28d9}
.hq-steps{display:grid;gap:1.1rem;margin:1.6rem 0}.hq-step{display:flex;gap:.9rem;align-items:flex-start}.hq-step-number{display:grid;place-items:center;flex-shrink:0;width:2.1rem;height:2.1rem;border-radius:12px;border:1px solid #e9d5ff;background:#ede9fe;color:#6d28d9;font-size:.85rem;font-weight:900}.hq-step:nth-child(2) .hq-step-number{background:#ffedd5;border-color:#fed7aa;color:#9a3412}.hq-step:nth-child(3) .hq-step-number{background:#d1fae5;border-color:#a7f3d0;color:#065f46}.hq-step h3{font-size:.98rem;font-weight:900;line-height:1.4;color:#253250;margin:0}.hq-step p{font-size:.9rem;line-height:1.65;color:#60708a;margin:.2rem 0 0}
.hq-actions{display:flex;flex-wrap:wrap;gap:.65rem}.hq-actions .home-primary{gap:.6rem}.hq-browse{display:inline-block;margin-top:1rem;font-size:.85rem;font-weight:800;color:#6d28d9;text-underline-offset:4px}.hq-browse:hover{text-decoration:underline}
.hq-showcase{min-width:0}.hq-preview-label{text-align:center;font-size:.85rem;font-weight:850;color:#6b3c91;margin-bottom:1rem}.hq-spark{color:#ed7b31;font-size:1.4rem;vertical-align:middle;margin-right:.35rem}
.hq-preview{border:7px solid #fff;border-radius:28px;overflow:hidden;box-shadow:0 24px 65px #543c7824,0 0 0 1px #e9d5ff;background:#fff}
.hq-preview-toolbar{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.85rem 1rem;background:#fff}.hq-brand{font-size:.9rem;color:#713bb5;font-weight:800;white-space:nowrap}.hq-brand strong{font-size:1.12rem;letter-spacing:-.04em}.hq-brand>span{color:#f97316;margin-left:.15rem}.hq-demo-label{border-radius:999px;background:#f3e8ff;color:#7e22ce;font-size:.65rem;font-weight:850;padding:.35rem .65rem;white-space:nowrap}
.hq-scene{position:relative;isolation:isolate;overflow:hidden;text-align:center;background:radial-gradient(circle at 12% 18%,#7067c155,transparent 30%),radial-gradient(circle at 90% 83%,#345ebc77,transparent 40%),#101a38;color:#fff;padding:2rem 1rem 1rem;min-height:380px}.hq-scene:before{content:"";position:absolute;z-index:-1;inset:0;opacity:.5;background-image:radial-gradient(#fff 1px,transparent 1px),radial-gradient(#c4b5fd 1px,transparent 1px);background-position:4px 8px,41px 31px;background-size:63px 77px,97px 109px}
.hq-mission{font-size:.65rem;font-weight:900;letter-spacing:.24em;color:#c4b5fd}.hq-scene h3{font-size:clamp(1.35rem,2.3vw,2rem);font-weight:900;line-height:1.22;margin:.8rem 0 .5rem;color:#fff}.hq-hint{font-size:.8rem;color:#cbd5e1;margin:0}
.hq-planets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;align-items:center;margin:1.25rem 0 .5rem}.hq-planet{display:grid;place-items:center;min-width:0;aspect-ratio:1/1.15;border:2px solid transparent;border-radius:18px;background:#ffffff08;padding:.5rem;cursor:pointer;transition:background .18s,transform .18s,border-color .18s}.hq-planet:hover{background:#ffffff14;transform:translateY(-4px)}.hq-planet:focus-visible{outline:3px solid #fde68a;outline-offset:3px}.hq-planet img{display:block;width:100%;height:auto;max-height:155px;object-fit:contain;filter:drop-shadow(0 8px 12px #0004)}.hq-planet.is-correct{border-color:#6ee7b7;background:#10b98126}.hq-planet.is-wrong{border-color:#fdba74;background:#fb923c1a}
.hq-feedback{min-height:3.2rem;display:grid;place-items:center;font-size:.85rem;font-weight:750;line-height:1.5;color:#ddd6fe;padding:.4rem}.hq-showcase.is-complete .hq-feedback{color:#a7f3d0}.hq-reset{border:0;background:transparent;color:#ddd6fe;text-decoration:underline;text-underline-offset:4px;font-size:.75rem;font-weight:750;padding:.25rem .6rem;cursor:pointer}.hq-reset[hidden]{display:none}.hq-reset:focus-visible{outline:2px solid #fde68a;outline-offset:2px;border-radius:6px}
.hq-celebration{pointer-events:none;position:absolute;inset:0;display:none}.hq-showcase.is-complete .hq-celebration{display:block}.hq-celebration span{position:absolute;color:#fde68a;font-size:1.4rem;animation:hq-sparkle .8s ease-out both}.hq-celebration span:nth-child(1){left:10%;top:20%}.hq-celebration span:nth-child(2){right:10%;top:30%;color:#f9a8d4}.hq-celebration span:nth-child(3){left:17%;bottom:15%;color:#c4b5fd}.hq-celebration span:nth-child(4){right:15%;bottom:15%}
.hq-activity-types{display:flex;justify-content:center;flex-wrap:wrap;gap:.45rem;margin:1.2rem 0 .6rem}.hq-activity-types span{border:1px solid #e9d5ff;background:#ffffffb8;border-radius:999px;padding:.35rem .7rem;font-size:.72rem;font-weight:800;color:#684386}.hq-preview-note{text-align:center;color:#7c6c8c;font-size:.8rem;margin:.7rem 0 0}
@keyframes hq-sparkle{from{opacity:0;transform:scale(.4) rotate(-30deg)}to{opacity:1;transform:scale(1) rotate(0)}}
@media(max-width:850px){.hq-grid{grid-template-columns:1fr;gap:2.5rem}.hq-copy{max-width:640px;margin:auto}.hq-showcase{width:min(100%,560px);margin:auto}.hq-copy .home-section-title{font-size:clamp(2rem,7vw,3rem)}.hq-scene h3{font-size:clamp(1.4rem,5vw,2rem)}}
@media(max-width:420px){.hq-actions>a{width:100%}.hq-preview{border-width:5px;border-radius:22px}.hq-preview-toolbar{padding:.7rem}.hq-scene{padding:1.5rem .65rem .8rem;min-height:340px}.hq-planets{gap:.3rem}.hq-planet{padding:.25rem;border-radius:12px}.hq-preview-label{font-size:.78rem}.hq-feedback{font-size:.78rem}.hq-activity-types span{font-size:.68rem}}
@media(prefers-reduced-motion:reduce){.hq-planet{transition:none}.hq-planet:hover{transform:none}.hq-celebration span{animation:none}}