.demo-section{background:var(--paper);padding:56px 0 96px}.demo-meta{flex-wrap:wrap;justify-content:space-between;align-items:end;gap:16px;margin-bottom:28px;display:flex}.demo-meta-left{flex:1;min-width:280px}.demo-meta-eyebrow{color:var(--brand-500);letter-spacing:.1em;text-transform:uppercase;align-items:center;gap:10px;margin-bottom:14px;font-size:12px;font-weight:600;display:inline-flex}.demo-meta-eyebrow:before{content:"";background:var(--brand-500);width:24px;height:1px}.demo-meta h2{letter-spacing:-.02em;color:var(--ink);margin-bottom:12px;font-size:clamp(28px,3.4vw,38px);font-weight:600;line-height:1.1}.demo-meta-sub{color:var(--slate-600);max-width:560px;font-size:15.5px;line-height:1.55}.demo-meta-actions{align-items:center;gap:10px;display:flex}.demo-action-btn{background:var(--paper);border:1px solid var(--slate-200);min-height:44px;color:var(--ink);cursor:pointer;font-size:clamp(13px,.9rem,14.5px);font-weight:500;font-family:var(--font);border-radius:999px;align-items:center;gap:8px;padding:12px 20px;transition:all .2s;display:inline-flex}.demo-action-btn:hover{border-color:var(--brand-300);transform:translateY(-1px)}.demo-action-btn svg{color:var(--brand-500)}.demo-action-btn-secondary{background:var(--slate-50);border-color:var(--slate-300);color:var(--slate-700)}.demo-action-btn-secondary:hover{background:var(--slate-100);border-color:var(--slate-400)}.demo-action-btn-secondary svg{color:var(--slate-500)}.device-frame{background:var(--ink);border-radius:20px;padding:14px;position:relative;box-shadow:0 1px #0f14240f,0 30px 60px #0f142429,0 12px 24px #5b6cff1a}.device-frame-bar{align-items:center;gap:8px;padding:6px 8px 12px;display:flex}.device-dot{background:#fff3;border-radius:50%;width:11px;height:11px}.device-dot.red{background:#ff5f57}.device-dot.yellow{background:#5b6cff}.device-dot.green{background:#28c840}.device-url{color:#ffffffb3;text-align:center;background:#ffffff14;border-radius:7px;flex:1;justify-content:center;align-items:center;gap:6px;margin-left:24px;margin-right:60px;padding:5px 14px;font-size:11.5px;font-weight:500;display:flex}.device-url svg{color:var(--success)}.device-iframe-wrap{background:var(--paper);border-radius:10px;position:relative;overflow:hidden}.pos-iframe{border:0;width:100%;height:760px;display:block}.demo-hint{text-align:center;color:var(--slate-500);justify-content:center;align-items:center;gap:8px;width:100%;margin-top:16px;font-size:13px;display:inline-flex}.demo-hint kbd{background:var(--canvas);border:1px solid var(--slate-200);font-family:var(--font);color:var(--ink);border-radius:5px;padding:2px 8px;font-size:11.5px;font-weight:600}.annotations{background:var(--canvas);padding:96px 0}.ann-grid{grid-template-columns:repeat(3,1fr);gap:24px;display:grid}.ann{background:var(--paper);border:1px solid var(--slate-200);border-radius:var(--radius-lg);padding:32px;transition:all .2s}.ann:hover{border-color:var(--brand-300);box-shadow:var(--shadow-md);transform:translateY(-2px)}.ann-icon{background:var(--brand-50);width:44px;height:44px;color:var(--brand-500);border-radius:11px;place-items:center;margin-bottom:18px;display:grid}.ann h3{color:var(--ink);margin-bottom:8px;font-size:18px;font-weight:600}.ann p{color:var(--slate-600);font-size:clamp(15px,1rem,16px);line-height:1.6}@media (max-width:1024px){.pos-iframe{height:680px}.ann-grid{grid-template-columns:1fr}.device-url{margin:0 8px}}@media (max-width:700px){.device-frame{border-radius:14px;padding:10px}.device-frame-bar{padding:4px 4px 10px}.device-dot{width:9px;height:9px}.device-url{margin-left:4px;padding:4px 10px;font-size:10.5px}.demo-meta-actions{flex-wrap:wrap;width:100%}.pos-iframe{height:680px}.demo-meta-sub{font-size:16px}}@media (max-width:390px){.pos-iframe{height:520px}.ann{padding:24px 18px}.demo-hint{font-size:12px}}