:root{--brand-font:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--brand-radius:16px;--c-primary:#6366f1;--c-video:#8b5cf6;--c-warn:#f59e0b;--c-success:#10b981;--c-danger:#ef4444;--card-accent:var(--c-primary)}.qm{font-family:var(--brand-font);margin:0 auto;max-width:1280px;padding:2rem 1.25rem 3rem;position:relative}.qm__stage{inset:0;overflow:hidden;pointer-events:none;position:absolute;z-index:0}.qm__mesh{background:radial-gradient(60% 50% at 0 0, color-mix(in srgb, var(--c-primary) 12%, #0000) 0, #0000 60%),radial-gradient(50% 60% at 100% 10%, color-mix(in srgb, var(--c-video) 10%, #0000) 0, #0000 60%),radial-gradient(50% 60% at 0 100%, color-mix(in srgb, var(--c-warn) 12%, #0000) 0, #0000 60%),radial-gradient(60% 50% at 100% 100%, color-mix(in srgb, var(--c-success) 12%, #0000) 0, #0000 60%);filter:blur(30px) saturate(1.1);inset:-10%;opacity:.6;position:absolute}.qm__gridbg{background:linear-gradient(180deg, #ffffffe6, #ffffffe6),radial-gradient(circle at 20% 0, #6366f10a, #0000 40%),repeating-linear-gradient(0deg, #0206170a, #0206170a 1px, #0000 0, #0000 40px),repeating-linear-gradient(90deg, #0206170a, #0206170a 1px, #0000 0, #0000 40px);inset:0}.orb,.qm__gridbg{position:absolute}.orb{animation:float 16s ease-in-out infinite;border-radius:50%;filter:blur(50px) saturate(1.05);height:460px;mix-blend-mode:multiply;opacity:.35;width:460px}.orb--a{animation-delay:0s;background:color-mix(in srgb, var(--c-primary) 22%, #fff);left:-120px;top:-140px}.orb--b{animation-delay:2s;background:color-mix(in srgb, var(--c-video) 22%, #fff);right:-160px;top:80px}.orb--c{animation-delay:4s;background:color-mix(in srgb, var(--c-warn) 22%, #fff);bottom:-180px;left:20%}@keyframes float{0%,to{transform:translateZ(0) scale(1)}50%{transform:translate3d(0, -12px, 0) scale(1.02)}}.qm__head{align-items:end;display:grid;gap:1.25rem;grid-template-columns:1fr auto;margin-bottom:1.25rem;position:relative;z-index:1}.qm__brand{align-items:center;display:flex;gap:.9rem;min-width:0}.qm__logo{border-radius:12px;box-shadow:0 6px 18px #0f172a0f;flex-shrink:0;height:36px;object-fit:contain;width:36px}.qm__titles{display:grid;gap:.4rem}.qm__title{color:#0b0f19;font-size:2.1rem;font-weight:900;letter-spacing:.2px;line-height:1.05;margin:0}.qm__subtitle{color:#475569;font-size:1rem;font-weight:600;margin:0}.qm__legend{align-items:center;color:#374151;display:flex;flex-wrap:wrap;font-size:.85rem;gap:.6rem}.qm__legend-item{align-items:center;background:#fff;border:1px solid #e5e7eb;border-radius:999px;box-shadow:0 4px 12px #0f172a0f;display:inline-flex;gap:.4rem;padding:.35rem .6rem}.dot{border-radius:50%;display:inline-block;height:10px;width:10px}.dot--instructor{background:var(--c-success)}.dot--classic{background:var(--c-warn)}.dot--video{background:var(--c-video)}.dot--livegm{background:var(--c-danger)}.qm__grid{display:grid;gap:1.25rem;margin-top:1rem;position:relative;z-index:1}.qm__grid--mosaic{grid-auto-rows:1fr;grid-template-areas:"instructor instructor livegm livegm" "classic    video      livegm livegm";grid-template-columns:repeat(4, 1fr)}.qm__grid--compact{grid-template-columns:1fr 1fr}@media(max-width:1024px){.qm__grid--mosaic{grid-template-areas:"livegm livegm" "instructor instructor" "classic video";grid-template-columns:repeat(2, 1fr)}}@media(max-width:940px){.qm__grid--mosaic{grid-template-areas:"instructor" "livegm" "classic" "video";grid-template-columns:1fr}}.qm__card{background:#fff;border:1px solid #e5e7eb;border-radius:var(--brand-radius);box-shadow:0 10px 24px #0f172a0f;color:#0f172a;display:flex;flex-direction:column;isolation:isolate;min-height:320px;overflow:clip;position:relative;transition:transform .25s ease,box-shadow .25s ease,border-color .2s ease,background .2s ease}.qm__card:hover{background:linear-gradient(180deg, #fff, #fffdf7);border-color:var(--c-primary);box-shadow:0 18px 36px #0f172a1f;transform:translateY(-6px) perspective(800px) rotateX(1.2deg)}.qm__card.is-active{background:radial-gradient(90% 70% at 110% -10%, color-mix(in srgb, var(--c-primary) 10%, #fff) 0, #0000 65%),#fff;border-color:var(--c-primary);box-shadow:0 0 0 2px color-mix(in srgb, var(--c-primary) 28%, #0000),0 24px 48px #0f172a24}.card--instructor{grid-area:instructor;min-height:360px}.card--livegm{grid-area:livegm;min-height:740px}.card--classic{grid-area:classic;min-height:360px}.card--video{grid-area:video;min-height:360px}.qm__art{inset:0;pointer-events:none;position:absolute;z-index:1}.qm__art--side{height:100%;left:auto;right:0;width:min(54%,620px)}.qm__art--side .qm__art-img{bottom:0;filter:drop-shadow(0 12px 18px rgba(2, 6, 23, .14));height:100%;max-width:100%;object-fit:contain;opacity:.22;position:absolute;right:0;top:0;transform:translateZ(0)}.qm__art--side:before{background:linear-gradient(90deg, #fffffffa, #fffffff5 22%, #ffffffd6 34%, #ffffff73 58%, #ffffff14 78%, #fff0);content:"";inset:0;position:absolute}.qm__art--dominant{height:100%;width:100%}.qm__art--dominant .qm__art-img{filter:saturate(1.03) contrast(1.02);height:100%;object-fit:cover;opacity:.18;width:100%}.qm__art--dominant:before{background:linear-gradient(120deg, #fffffffa, #ffffffe6 14%, #ffffffc2 26%, #ffffff4d 54%, #fff0 76%);content:"";inset:0;position:absolute}@media(max-width:768px){.qm__art--side{width:60%}.card--livegm{min-height:520px}}.sel{border-radius:inherit;inset:0;pointer-events:none;position:absolute}.sel--halo{background:radial-gradient(80% 60% at 50% 0, color-mix(in srgb, var(--c-primary) 24%, #0000) 0, #0000 60%);filter:blur(14px);opacity:.9;z-index:0}.sel--beam{background:linear-gradient(90deg, #0000 0, #ffffffd9 30%, #0000 60%),linear-gradient(90deg, #0000 0, color-mix(in srgb, var(--c-primary) 35%, #0000) 30%, #0000 60%);border-radius:0;height:140%;left:-20%;mix-blend-mode:screen;top:-20%;transform:rotate(12deg);width:140%;z-index:2}.sel--ring{background:conic-gradient(from 0deg, color-mix(in srgb, var(--c-primary) 70%, #fff) 0, color-mix(in srgb, var(--c-primary) 30%, #fff) 25%, color-mix(in srgb, var(--c-primary) 70%, #fff) 50%, color-mix(in srgb, var(--c-primary) 30%, #fff) 75%, color-mix(in srgb, var(--c-primary) 70%, #fff) 100%);border-radius:calc(var(--brand-radius) - 6px);margin:6px;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.85;padding:2px;z-index:1}.qm__popular{align-items:center;background:#fff;border:1px solid var(--c-primary);border-radius:999px;box-shadow:0 8px 20px #0f172a1a;color:var(--c-primary);display:inline-flex;font-size:.75rem;font-weight:800;gap:.35rem;letter-spacing:.2px;padding:.35rem .6rem;position:absolute;right:10px;top:10px;z-index:3}.qm__card-head{padding:1rem 1rem .5rem;z-index:3}.qm__chip{align-items:center;background:#fff;border:1px solid var(--card-accent);border-radius:999px;box-shadow:0 4px 12px #0f172a0f;color:#0f172a;display:inline-flex;font-size:.8rem;gap:.6rem;letter-spacing:.2px;padding:.44rem .7rem}.qm__chip-icon{background:var(--card-accent);border-radius:999px;color:#fff;display:grid;height:24px;place-items:center;width:24px}.qm__body{display:flex;flex-direction:column;gap:.6rem;margin-top:auto;padding:.75rem 1rem 1rem;position:relative;z-index:3}.qm__name{color:#0b0f19;font-size:1.28rem;font-weight:900;letter-spacing:.2px;margin:0}.qm__subtitle2{color:#334155;font-weight:700;line-height:1.5}.qm__desc,.qm__subtitle2{font-size:.98rem;margin:0}.qm__desc{color:#64748b;line-height:1.65}.clamp-2{-webkit-line-clamp:2}.clamp-2,.clamp-4{-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.clamp-4{-webkit-line-clamp:4}.qm__hint{font-size:.9rem;margin-top:.2rem;opacity:.95}.qm__cta,.qm__hint{font-weight:900;letter-spacing:.2px}.qm__cta{align-items:center;align-self:stretch;background:var(--c-primary);border:1px solid #0000000f;border-radius:calc(var(--brand-radius) - 6px);box-shadow:0 12px 24px #0f172a1f;color:#fff;cursor:pointer;display:inline-flex;gap:.5rem;justify-content:center;margin-top:.7rem;padding:.9rem 1rem;transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}.qm__cta:hover{box-shadow:0 16px 28px #0f172a2e;transform:translateY(-1px)}.qm__cta--active{background:#111827;border-color:#111827}.qm__mark{background:#fff;border:1px solid var(--c-primary);border-radius:999px;box-shadow:0 8px 18px #0f172a1a;color:var(--c-primary);display:grid;height:32px;left:12px;place-items:center;position:absolute;top:12px;width:32px;z-index:4}.qm__upgrade{margin-top:1.25rem;position:relative;text-align:center;z-index:1}.qm__upgrade-btn{background:#111827;border:1px solid #1f2937;border-radius:var(--brand-radius);box-shadow:0 8px 18px #0000002e;color:#e5e7eb;display:inline-block;font-weight:800;letter-spacing:.2px;padding:.9rem 1.6rem;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.qm__upgrade-btn:hover{border-color:#273245;box-shadow:0 12px 24px #0000003d;transform:translateY(-1px)}@media(max-width:900px){.qm__head{align-items:start;grid-template-columns:1fr}.qm__legend{order:2}}@media(max-width:768px){.qm{padding:1.25rem 1rem 2rem}.qm__title{font-size:1.7rem}.qm__subtitle{font-size:.95rem}.card--livegm{min-height:520px}.qm__desc{font-size:.95rem}}@media(prefers-reduced-motion:reduce){.orb,.qm__card,.qm__cta,.sel--beam,.sel--ring{animation:none !important;transition:none !important}}.qm__pro{align-items:center;background:#fff;border:1px solid #ef4444;border-radius:999px;box-shadow:0 8px 20px #0f172a1a;color:#ef4444;display:inline-flex;font-size:.75rem;font-weight:800;gap:.35rem;letter-spacing:.2px;padding:.35rem .6rem;position:absolute;right:10px;top:10px;z-index:3}.qm__card.is-locked{cursor:not-allowed}.qm__card.is-locked .qm__cta{background:#111827;border-color:#111827}.qm__upgrade-modal-overlay{align-items:center;backdrop-filter:blur(4px);background:#0f172a8c;display:flex;inset:0;justify-content:center;padding:16px;position:fixed;z-index:9999}.qm__upgrade-modal{background:#fff;border:1px solid #f59e0b;border-radius:14px;box-shadow:0 20px 60px #f59e0b40;max-width:520px;padding:18px;width:100%}.qm__upgrade-head{align-items:center;display:flex;gap:10px;margin-bottom:8px}.qm__upgrade-icon{background:#ef4444;border-radius:999px;color:#fff;display:grid;font-size:.95rem;height:32px;place-items:center;width:32px}.qm__upgrade-head h4{color:#0b0f19;font-size:1rem;font-weight:900;margin:0}.qm__upgrade-desc{color:#374151;font-size:.95rem;margin:8px 0 14px}.qm__upgrade-actions{align-items:center;display:flex;gap:10px;justify-content:flex-end}.qm__upgrade-primary{align-items:center;background:linear-gradient(135deg, #f59e0b, #d97706);border-radius:10px;box-shadow:0 12px 24px #f59e0b4d;color:#fff;display:inline-flex;font-weight:900;gap:8px;justify-content:center;padding:10px 14px;text-decoration:none}.qm__upgrade-primary:hover{transform:translateY(-1px)}.qm__upgrade-cancel{background:#fff;border:1px solid #e5e7eb;border-radius:10px;color:#374151;cursor:pointer;font-weight:700;padding:10px 14px}
