.demo-page{background-color:var(--canvas);color:var(--ink);height:100vh;overflow:hidden}.demo-layout{height:calc(100vh - 60px);margin-top:60px;display:flex}.demo-sidebar{border-right:1px solid var(--canvas-line);background-color:#050505;flex-direction:column;width:320px;display:flex;overflow-y:auto}.demo-sidebar-header{border-bottom:1px solid var(--canvas-line);justify-content:space-between;align-items:center;padding:1.5rem;display:flex}.demo-sidebar-header h4{color:var(--ink);font-family:var(--font-display);margin-bottom:.5rem}.demo-sidebar-header p{color:var(--ink-faint);margin:0;font-size:.85rem}.demo-nav{margin:0;padding:0;list-style:none}.demo-nav li{border-bottom:1px solid #ffffff0d}.demo-nav a{color:var(--ink-dim);font-family:var(--font-data);white-space:nowrap;text-overflow:ellipsis;align-items:center;padding:1rem 1.5rem;font-size:.85rem;text-decoration:none;transition:all .2s;display:flex;overflow:hidden}.demo-nav a span{min-width:50px;margin-right:.75rem;display:inline-block}.demo-nav a:hover{color:var(--ink);background-color:#ffffff05}.demo-nav a.active{color:var(--gold);border-left:3px solid var(--gold);background-color:#c9a84c0d}.demo-nav-group{color:var(--ink-dim);letter-spacing:.08em;font-size:.7rem;font-weight:600;font-family:var(--font-data);text-transform:uppercase;padding:1rem 1.5rem .5rem}.demo-nav a{position:relative}.demo-nav a.active:after{content:"";background:var(--gold);border-radius:50%;width:6px;height:6px;animation:1.8s ease-in-out infinite sf-pulse;position:absolute;top:50%;right:1.25rem;transform:translateY(-50%);box-shadow:0 0 8px 2px #c9a84c99}@keyframes sf-pulse{0%,to{opacity:1;box-shadow:0 0 8px 2px #c9a84c99}50%{opacity:.55;box-shadow:0 0 14px 4px #c9a84c59}}.demo-stage{position:relative}.demo-stage:before{content:"";pointer-events:none;opacity:.6;z-index:0;background-image:linear-gradient(#c9a84c0b 1px,#0000 1px),linear-gradient(90deg,#c9a84c0b 1px,#0000 1px);background-size:32px 32px;position:absolute;inset:0;-webkit-mask-image:radial-gradient(80% 60% at 50% 0,#000 40%,#0000 100%);mask-image:radial-gradient(80% 60% at 50% 0,#000 40%,#0000 100%)}.demo-stage>*{z-index:1;position:relative}.demo-main{flex-direction:column;flex:1;display:flex;position:relative;overflow-y:auto}.demo-disclaimer{color:var(--gold);font-size:.85rem;font-family:var(--font-data);background-color:#c9a84c1a;border-bottom:1px solid #c9a84c33;padding:.75rem 2rem}.demo-content{flex-direction:column;flex:1;width:100%;max-width:1200px;margin:0 auto;padding:3rem 4rem;display:flex}.demo-header{margin-bottom:2rem}.demo-id{font-family:var(--font-data);color:var(--gold);margin-bottom:1rem;font-size:.85rem}.demo-title{font-family:var(--font-display);margin-bottom:1rem;font-size:2.5rem}.demo-desc{color:var(--ink-dim);max-width:800px;font-size:1.1rem;line-height:1.6}.demo-stage{border:1px solid var(--canvas-line);background-color:#000;border-radius:8px;flex-direction:column;flex:1;padding:2rem;display:flex;position:relative;overflow:hidden;box-shadow:0 10px 40px #00000080}.demo-nav-open-btn{color:var(--gold);font-family:var(--font-data);cursor:pointer;background:#c9a84c14;border:1px solid #c9a84c4d;border-radius:6px;align-items:center;gap:.4rem;min-height:44px;padding:.6rem .9rem;font-size:.78rem;display:none}.demo-nav-close-btn{border:1px solid var(--canvas-line);color:var(--ink-dim);cursor:pointer;background:0 0;border-radius:6px;justify-content:center;align-items:center;width:36px;height:36px;font-size:1rem;line-height:1;display:none}.demo-nav-backdrop{display:none}@media (max-width:900px){.demo-page{height:100vh;overflow:hidden}.demo-layout{height:calc(100vh - 60px);margin-top:60px;display:block;position:relative}.demo-main{height:100%;overflow-y:auto}.demo-nav-open-btn{display:inline-flex}.demo-nav-backdrop{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:40;opacity:0;pointer-events:none;background:#0009;transition:opacity .28s;display:block;position:fixed;inset:60px 0 0}.demo-nav-backdrop.is-open{opacity:1;pointer-events:auto}.demo-sidebar{z-index:50;width:85%;max-width:340px;transition:transform .32s cubic-bezier(.4,0,.2,1);position:fixed;top:60px;bottom:0;left:0;transform:translate(-100%);box-shadow:8px 0 32px #00000080}.demo-sidebar.is-open{transform:translate(0)}.demo-sidebar-header{justify-content:space-between;align-items:flex-start;gap:1rem;padding:1rem 1.25rem;display:flex}.demo-sidebar-header h4{font-size:1rem}.demo-sidebar-header p{font-size:.78rem}.demo-nav-close-btn{flex-shrink:0;display:flex}.demo-nav-group{padding:.75rem 1.25rem .4rem}.demo-nav a{min-height:44px;padding:.85rem 1.25rem;font-size:.85rem}.demo-content{padding:1.5rem 1.25rem}.demo-title{font-size:1.75rem}.demo-desc{font-size:1rem}.demo-stage{padding:1rem;overflow-y:auto}.app-window[style]{flex-direction:column!important;gap:1.5rem!important}.mock-mobile-screen{transform-origin:top;max-width:100%;transform:scale(.9)!important}}.term-window{font-family:var(--font-data);color:#fff;flex-direction:column;height:100%;font-size:.9rem;line-height:1.5;display:flex}.term-line{opacity:0;margin-bottom:.5rem;animation:.3s forwards fade-in}.term-success{color:var(--whatsapp)}.term-error{color:#f44}.term-highlight{color:var(--gold)}@keyframes fade-in{to{opacity:1}}.demo-split{grid-template-columns:1fr 1fr;gap:2rem;height:100%;display:grid}.demo-pane{background:#080808;border:1px solid #1a1a1a;border-radius:4px;padding:1.5rem;overflow-y:auto}.demo-pane-header{font-family:var(--font-data);color:var(--ink-faint);text-transform:uppercase;border-bottom:1px solid #1a1a1a;margin-bottom:1rem;padding-bottom:.5rem;font-size:.75rem}.mock-email{background:#111;border-left:2px solid #0000;border-radius:4px;margin-bottom:1rem;padding:1rem;transition:all .3s}.mock-email.processing{border-left-color:var(--gold);background:#151510}.mock-email.done{border-left-color:var(--whatsapp);opacity:.6}.mock-email-subject{margin-bottom:.25rem;font-weight:700}.mock-email-body{color:var(--ink-dim);font-size:.85rem}.app-window{color:#fff;background-color:#0f1012;border:1px solid #2a2a2a;border-radius:8px;flex-direction:column;height:100%;font-family:Instrument Sans,sans-serif;display:flex;overflow:hidden;box-shadow:0 8px 30px #00000080}.app-header{background-color:#16181a;border-bottom:1px solid #2a2a2a;justify-content:space-between;align-items:center;padding:1rem 1.5rem;display:flex}.app-header h3{color:var(--gold);margin:0;font-size:1.1rem;font-weight:600}.mock-mobile-screen{color:#111;background-color:#fff;border:8px solid #2a2a2a;border-radius:36px;width:320px;height:600px;margin:0 auto;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;position:relative;overflow:hidden}.mock-mobile-header{text-align:center;background:#f8f9fa;border-bottom:1px solid #eee;padding:2.5rem 1rem 1rem;font-weight:600;box-shadow:0 2px 4px #00000005}.chat-container{flex-direction:column;gap:1rem;height:calc(100% - 80px);padding:1rem;display:flex;overflow-y:auto}.chat-bubble{opacity:0;border-radius:18px;max-width:80%;padding:.75rem 1rem;font-size:.9rem;line-height:1.4;animation:.3s cubic-bezier(.175,.885,.32,1.275) forwards pop-in;transform:scale(.9)}.chat-received{color:#111;background:#e9ecef;border-bottom-left-radius:4px;align-self:flex-start}.chat-sent{background:var(--whatsapp,#25d366);color:#fff;border-bottom-right-radius:4px;align-self:flex-end}@keyframes pop-in{0%{opacity:0;transform:scale(.92)translateY(6px)}to{opacity:1;transform:scale(1)translateY(0)}}.demo-stage-wrapper button:not(:disabled){cursor:pointer;transition:transform .15s,filter .15s,opacity .15s}.demo-stage-wrapper button:not(:disabled):hover{filter:brightness(1.08)}.demo-stage-wrapper button:not(:disabled):active{transform:scale(.97)}.demo-stage-wrapper button:disabled{cursor:default}.demo-stage-wrapper button:not(.status-pill){min-height:40px}@media (max-width:640px){.demo-stage-wrapper button:not(.status-pill){min-height:44px}}.kanban-board{gap:1rem;height:100%;padding:1.5rem;display:flex;overflow-x:auto}.kanban-col{background:#16181a;border-radius:6px;flex-direction:column;flex:0 0 280px;display:flex}.kanban-col-header{border-bottom:2px solid #2a2a2a;justify-content:space-between;padding:1rem;font-size:.9rem;font-weight:600;display:flex}.kanban-card{background:#22252a;border:1px solid #333;border-radius:4px;margin:.5rem;padding:1rem;transition:transform .2s;box-shadow:0 2px 4px #0003}.data-table{border-collapse:collapse;width:100%}.data-table th,.data-table td{text-align:left;border-bottom:1px solid #2a2a2a;padding:1rem}.data-table th{color:var(--ink-faint);text-transform:uppercase;letter-spacing:.05em;font-size:.75rem}.status-pill{text-transform:uppercase;border-radius:50px;padding:.25rem .75rem;font-size:.75rem;font-weight:600;display:inline-block}.status-green{color:#25d366;background:#25d36626}.status-amber{color:#f5a623;background:#f5a62326}.status-red{color:#d0021b;background:#d0021b26}.map-container{background-color:#0f1012;background-image:linear-gradient(#2a2a2a 1px,#0000 1px),linear-gradient(90deg,#2a2a2a 1px,#0000 1px);background-position:0 0;background-repeat:repeat;background-size:40px 40px;background-attachment:scroll;background-origin:padding-box;background-clip:border-box;width:100%;height:100%;position:relative}.map-pin{border-radius:50%;width:12px;height:12px;position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 0 4px #ffffff1a}.pin-pulse{animation:2s infinite pulse-ring}@keyframes pulse-ring{0%{box-shadow:0 0 #c9a84cb3}70%{box-shadow:0 0 0 15px #c9a84c00}to{box-shadow:0 0 #c9a84c00}}