.demo-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px;background:#232f3a8c;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:demoFadeIn .25s ease both}.demo-card{position:relative;width:100%;max-width:468px;background:var(--surface, #fff);color:var(--fg, #22303d);border:1px solid var(--border, #e2e8ee);border-radius:16px;padding:clamp(26px,4vw,38px);box-shadow:0 30px 70px #16304547;animation:demoRise .3s ease both}.demo-badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-body, sans-serif);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink, #2f4d6b);background:var(--surface-2, #eef2f6);border-radius:999px;padding:6px 13px;margin-bottom:18px}.demo-badge svg{color:var(--accent, #33597f)}.demo-card h2{font-family:var(--font-display, Georgia, serif);font-weight:400;font-size:clamp(24px,3.4vw,30px);line-height:1.15;letter-spacing:-.02em;margin:0 0 14px;color:var(--fg, #22303d)}.demo-card p{font-family:var(--font-body, sans-serif);font-size:15.5px;line-height:1.6;color:var(--muted, #5a6b7b);margin:0 0 14px}.demo-card p:last-of-type{margin-bottom:24px}.demo-card p b{color:var(--fg, #22303d);font-weight:600}.demo-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.demo-btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-body, sans-serif);font-weight:600;font-size:15px;border-radius:var(--radius, 10px);padding:13px 22px;cursor:pointer;text-decoration:none;border:1px solid transparent;transition:background .2s ease,border-color .2s ease,transform .15s ease}.demo-btn-primary{background:var(--accent, #33597f);color:#fff}.demo-btn-primary:hover{background:var(--accent-ink, #2f4d6b)}.demo-btn-primary:active{transform:translateY(1px)}.demo-btn-ghost{background:transparent;color:var(--accent-ink, #2f4d6b);border-color:var(--border, #e2e8ee)}.demo-btn-ghost:hover{border-color:var(--accent, #33597f)}.demo-close{position:absolute;top:14px;right:14px;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--border, #e2e8ee);border-radius:9px;color:var(--muted, #5a6b7b);cursor:pointer}.demo-close:hover{color:var(--fg, #22303d);border-color:var(--accent, #33597f)}.demo-foot{margin:18px 0 0;font-size:12.5px;color:var(--muted, #5a6b7b)}@keyframes demoFadeIn{0%{opacity:0}to{opacity:1}}@keyframes demoRise{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@media (prefers-reduced-motion: reduce){.demo-overlay,.demo-card{animation:none!important}.demo-btn:active{transform:none}}