.real-product{max-width:1120px;margin-top:52px}
.demo-window{border:1px solid #d6dfed;border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 25px 80px #14396c1e,0 0 0 7px #ffffff90}
.demo-window-bar{display:flex;align-items:center;gap:18px;padding:12px 18px;background:#fafcff;border-bottom:1px solid #e3eaf4;color:#536882;font-size:12px}
.demo-window-bar .demo-bar-icon{width:16px;height:14px;object-fit:contain;vertical-align:-2px;margin-right:4px}
.demo-window-bar b{font-weight:400;color:#90a0b5}
.window-dots{display:flex;gap:5px}
.window-dots i{width:7px;height:7px;border-radius:50%;background:#d9e3ef}
.window-dots i:first-child{background:#d5cfff}
.window-dots i:nth-child(2){background:#acd7ff}
.window-dots i:nth-child(3){background:#a8e7d5}
.demo-window-bar>button{margin-left:auto;background:transparent;border:1px solid #dfe8f4;border-radius:6px;padding:5px 10px;color:#5e7390;font-size:11px}

.real-stage{aspect-ratio:1414/762;position:relative;overflow:hidden;background:#f8fafc;container-type:inline-size;isolation:isolate}
.real-shot{position:absolute;width:100%;height:100%;object-fit:fill;left:0;top:0;opacity:0;font-size:0;color:transparent;transition:opacity .48s cubic-bezier(.22,1,.36,1);z-index:0;pointer-events:none}
.real-shot.current{opacity:1;z-index:1}
.real-shot.scene-enter{animation:demo-scene-enter .45s cubic-bezier(.2,.8,.2,1) both}
.real-shot.scene-exit{animation:demo-scene-exit .35s cubic-bezier(.4,0,.2,1) both;z-index:1}

.real-menu{position:absolute;inset:0 auto 0 0;width:5.7%;background:#fff;z-index:6;border-right:1px solid #e3e7ef;overflow:hidden;transition:width .48s cubic-bezier(.22,1,.36,1) .1s,box-shadow .48s;display:flex;flex-direction:column}
.real-menu.expanded,.real-menu.auto-expand{width:20.5%;box-shadow:12px 0 25px #15274217;transition-delay:0s}
.real-menu button{color:#89a0bb;background:transparent;border:0}
.real-menu-brand{display:flex;align-items:center;gap:1.2cqw;height:9.8%;flex-shrink:0;padding:0 1.32cqw;white-space:nowrap;cursor:pointer}
.menu-mark{background:transparent;border-radius:.6cqw;display:grid;place-items:center;width:2.8cqw;height:2.8cqw;flex-shrink:0;box-shadow:0 .4cqw 1cqw #1258DC25}
.menu-mark img{width:100%;height:100%;object-fit:contain;border-radius:.6cqw;display:block}
.menu-mark svg{width:1.9cqw;height:1.9cqw}
.real-menu-brand strong{display:flex;align-items:center;font-size:1.2cqw;color:#10253D;letter-spacing:-.03em}
.menu-brand-wordmark{height:1.9cqw;width:auto;max-width:8.8cqw;object-fit:contain;display:block}
.real-company{display:flex;align-items:center;gap:1.15cqw;white-space:nowrap;height:8.5%;flex-shrink:0;margin-bottom:2cqw;padding-left:1.4cqw}
.real-company>span{display:grid;place-items:center;flex-shrink:0;width:2.65cqw;height:2.65cqw;background:#e9e7ff;color:#5743fd;border:1px solid #d5d6ff;border-radius:.6cqw;font-size:1.1cqw}
.real-company strong{font-size:1.1cqw;display:block;font-weight:600}
.real-company small{font-size:.8cqw;color:#8176ff;display:block}
.real-menu-items{display:flex;flex-direction:column;gap:.55cqw;padding:0 .72cqw}
.real-menu-items>button{display:flex;align-items:center;gap:1.5cqw;padding:.77cqw 1.15cqw;text-align:left;white-space:nowrap;border-radius:.9cqw;font-size:1cqw;min-height:3.2cqw;transition:background .2s,color .2s}
.real-menu-items>button>svg{width:1.4cqw;height:1.4cqw;flex-shrink:0}
.real-menu-items>button.active{background:#efedff;color:#5137ff}
.real-menu-items>button:hover{background:#f4f6fc;color:#5137ff}
.real-menu-items>button span{color:#527092}
.real-menu-items>button.active span{color:#5137ff}
.real-menu-bottom{display:flex;align-items:center;gap:1.4cqw;margin-top:auto;padding:1.2cqw 1.4cqw;white-space:nowrap;font-size:1cqw}
.menu-user{display:grid;place-items:center;width:2.6cqw;height:2.6cqw;flex-shrink:0;background:#f0f3fa;border-radius:50%;color:#8ca0b9}
.menu-user svg{width:1.6cqw;height:1.6cqw}
.demo-spotlight{display:none!important}

/* Cursor & Visual Click Effects */
.demo-cursor{
  position:absolute;
  left:13%;
  top:18%;
  z-index:8;
  width:2.1cqw;
  height:2.8cqw;
  pointer-events:none;
  transform-origin:2px 2px;
  will-change:left,top,transform;
  filter:drop-shadow(0 3px 6px rgba(19,43,73,.38));
  transition:filter .2s ease;
}
.demo-cursor>svg{
  height:100%;
  width:100%;
  fill:#132b49;
  stroke:white;
  stroke-width:1.7;
  transform-origin:2px 2px;
  transition:transform .12s cubic-bezier(.2,.8,.2,1);
}
.demo-cursor i{
  position:absolute;
  top:-1.2cqw;
  left:-1.2cqw;
  width:2.6cqw;
  height:2.6cqw;
  border-radius:50%;
  background:radial-gradient(circle,rgba(7,105,239,.35) 0%,rgba(7,105,239,.08) 55%,transparent 75%);
  border:none!important;
  outline:none!important;
  opacity:0;
  pointer-events:none;
  box-shadow:none!important;
}
.demo-cursor.click i{
  animation:demo-click .55s cubic-bezier(.2,.8,.3,1) both;
}
.demo-cursor.click>svg{
  animation:cursor-press .42s cubic-bezier(.2,.8,.3,1) both;
}

@keyframes demo-click{
  0%{opacity:.85;transform:scale(.3)}
  50%{opacity:.35;transform:scale(1.5)}
  100%{opacity:0;transform:scale(2.2)}
}
@keyframes cursor-press{
  0%{transform:scale(1)}
  35%{transform:scale(.86) translate(1px,1.5px)}
  100%{transform:scale(1)}
}

.stage-tap-ripple{
  position:absolute;
  width:3.2cqw;
  height:3.2cqw;
  border-radius:50%;
  background:radial-gradient(circle,rgba(7,105,239,.4) 0%,rgba(7,105,239,.1) 50%,transparent 70%);
  border:none!important;
  outline:none!important;
  box-shadow:none!important;
  pointer-events:none;
  transform:translate(-50%,-50%) scale(.2);
  animation:stage-ripple-pop .45s cubic-bezier(.2,.8,.2,1) forwards;
  z-index:10;
}
@keyframes stage-ripple-pop{
  0%{opacity:1;transform:translate(-50%,-50%) scale(.2)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(2.8)}
}

/* Interactive Overlay Layers */
.demo-interactive-layer{
  position:absolute;
  inset:0;
  z-index:3;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .25s ease,visibility 0s .25s;
}
.real-stage[data-active-scene="0"] .demo-kanban-layer,
.real-stage[data-active-scene="1"] .demo-insights-layer,
.real-stage[data-active-scene="2"] .demo-flows-layer,
.real-stage[data-active-scene="3"] .demo-automations-layer,
.real-stage[data-active-scene="4"] .demo-chat-layer{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity .25s ease,visibility 0s 0s;
}

.real-stage *:focus,
.real-stage *:focus-visible,
.real-stage button:focus,
.real-stage button:focus-visible,
.real-stage [tabindex]:focus,
.real-stage [tabindex]:focus-visible,
.demo-kanban-card:focus,
.demo-kpi-card:focus,
.demo-flow-node:focus,
#demo-flow-card:focus,
.demo-node-switch:focus,
.demo-chat-input-box:focus,
.demo-chat-input-box:focus-visible{
  outline:none!important;
  -webkit-tap-highlight-color:transparent!important;
}

/* 1. Kanban Interactive Card (Scene 0) with Spring Motion Transitions */
.demo-kanban-card{
  position:absolute;
  border-radius:clamp(7px, .65cqw, 10px);
  cursor:grab;
  box-sizing:border-box;
  pointer-events:auto;
  outline:none!important;
  border:none!important;
  background:transparent;
  box-shadow:none!important;
  transition:left .55s cubic-bezier(.34, 1.45, .64, 1),
             top .48s cubic-bezier(.34, 1.45, .64, 1),
             transform .32s cubic-bezier(.22, 1, .36, 1),
             box-shadow .32s cubic-bezier(.22, 1, .36, 1),
             opacity .2s ease;
  will-change:left,top,transform,box-shadow;
  user-select:none;
  -webkit-user-select:none;
  touch-action:pan-y;
  -webkit-tap-highlight-color:transparent!important;
}
.demo-kanban-card:hover,
.demo-kanban-card.is-hovered{
  transform:translateY(-0.35cqw) scale(1.015);
  box-shadow:0 .6cqw 1.8cqw rgba(18,48,84,.16), 0 .15cqw .5cqw rgba(18,48,84,.08)!important;
  z-index:15;
}
.demo-kanban-card.is-active,
.demo-kanban-card.is-selected{
  transform:translateY(-0.25cqw);
  box-shadow:0 .5cqw 1.5cqw rgba(18,48,84,.14), 0 .1cqw .4cqw rgba(18,48,84,.08)!important;
  z-index:14;
}

/* -------------------------------------------------------------
   FEEDBACK VISUAL DE TOQUE / PRESSÃO: #demo-kanban-card (Mobile & Touch)
   ------------------------------------------------------------- */
#demo-kanban-card{
  cursor:grab;
  touch-action:pan-y;
  -webkit-tap-highlight-color:transparent!important;
}

/* Estado de Toque e Pressão no card #demo-kanban-card (Mobile Touch, Pointerdown e :active) */
#demo-kanban-card:active,
#demo-kanban-card.is-pressed,
#demo-kanban-card[data-pressed="true"],
.demo-kanban-card:active,
.demo-kanban-card.is-pressed,
.demo-kanban-card[data-pressed="true"]{
  transform:translateY(2px) scale(0.975)!important;
  box-shadow:0 0 0 3px #1258DC, 0 8px 24px rgba(18,88,220,.35)!important;
  z-index:50!important;
  transition:transform .09s cubic-bezier(.2, .9, .3, 1),
             box-shadow .09s cubic-bezier(.2, .9, .3, 1)!important;
}

#demo-kanban-card:active .kanban-card-surface,
#demo-kanban-card.is-pressed .kanban-card-surface,
#demo-kanban-card[data-pressed="true"] .kanban-card-surface,
.demo-kanban-card:active .kanban-card-surface,
.demo-kanban-card.is-pressed .kanban-card-surface,
.demo-kanban-card[data-pressed="true"] .kanban-card-surface{
  opacity:1!important;
  background:#F3F7FF!important;
  border-color:#1258DC!important;
  box-shadow:inset 0 0 0 1px rgba(18,88,220,.2), 0 2px 10px rgba(18,88,220,.15)!important;
}

/* Efeito Ripple Tátil ao tocar ou pressionar #demo-kanban-card */
#demo-kanban-card .kanban-card-surface::after,
.demo-kanban-card .kanban-card-surface::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:radial-gradient(circle at center, rgba(18,88,220,.24) 0%, rgba(18,88,220,0) 72%);
  opacity:0;
  transform:scale(0.85);
  transition:opacity .18s ease, transform .22s cubic-bezier(.2,.9,.3,1);
  pointer-events:none;
}

#demo-kanban-card:active .kanban-card-surface::after,
#demo-kanban-card.is-pressed .kanban-card-surface::after,
#demo-kanban-card[data-pressed="true"] .kanban-card-surface::after,
.demo-kanban-card:active .kanban-card-surface::after,
.demo-kanban-card.is-pressed .kanban-card-surface::after,
.demo-kanban-card[data-pressed="true"] .kanban-card-surface::after{
  opacity:1;
  transform:scale(1.02);
}

/* Transição de Voo / Movimento entre colunas (Spring Lift & Flight) */
.demo-kanban-card.is-moving{
  z-index:60!important;
  cursor:grabbing;
  transform:scale(1.055) translateY(-0.95cqw);
  box-shadow:0 1.4cqw 3.6cqw rgba(16,37,61,.28), 0 .4cqw 1.2cqw rgba(18,88,220,.32)!important;
  transition:left .55s cubic-bezier(.34, 1.45, .64, 1),
             top .48s cubic-bezier(.34, 1.45, .64, 1),
             transform .35s cubic-bezier(.22, 1, .36, 1),
             box-shadow .35s cubic-bezier(.22, 1, .36, 1)!important;
}

/* Inclinação dinâmica em voo conforme a direção da coluna */
.demo-kanban-card.is-moving.move-dir-right{
  transform:scale(1.06) translateY(-1.1cqw) rotate(2.2deg)!important;
}
.demo-kanban-card.is-moving.move-dir-left{
  transform:scale(1.06) translateY(-1.1cqw) rotate(-2.2deg)!important;
}

/* Borda iluminada no card durante a travessia */
.demo-kanban-card.is-moving .kanban-card-surface{
  border-color:#1258DC!important;
  box-shadow:0 0 0 1px rgba(18,88,220,.3), inset 0 0 12px rgba(18,88,220,.05)!important;
}

.demo-kanban-card.is-dragging{
  z-index:70!important;
  cursor:grabbing;
  transform:scale(1.065) translateY(-1cqw) rotate(-2deg);
  box-shadow:0 1.5cqw 3.8cqw rgba(16,37,61,.32), 0 .4cqw 1.2cqw rgba(18,88,220,.3)!important;
  transition:transform .12s ease, box-shadow .12s ease!important;
}

/* Animação de Aterrissagem com amortecimento elástico multi-etapa (Spring Settle) */
.demo-kanban-card.is-landed{
  animation:kanbanCardSpringLand .62s cubic-bezier(.16, 1, .3, 1) both!important;
}
@keyframes kanbanCardSpringLand{
  0%{transform:scale(1.055) translateY(-0.85cqw) rotate(1.4deg)}
  35%{transform:scale(0.975, 1.025) translateY(0.2cqw) rotate(-0.5deg);box-shadow:0 0 0 3px rgba(16,168,120,.45), 0 .8cqw 2.2cqw rgba(16,37,61,.22)!important}
  65%{transform:scale(1.015, 0.985) translateY(-0.08cqw) rotate(0.2deg)}
  85%{transform:scale(0.995, 1.005) translateY(0.03cqw) rotate(0deg)}
  100%{transform:scale(1) translateY(0) rotate(0deg)}
}

/* Transição viva da etiqueta de status (Chip Morph) */
.kanban-chip.chip-transitioning{
  animation:chipMorphPulse .45s cubic-bezier(.2, .9, .3, 1.2) both;
}
@keyframes chipMorphPulse{
  0%{transform:scale(0.88);opacity:0.6}
  50%{transform:scale(1.08);opacity:1}
  100%{transform:scale(1);opacity:1}
}

/* Card Face Completo (Revelado quando movido, hovered, ou selecionado) */
.kanban-card-surface{
  position:absolute;
  inset:0;
  background:#FFFFFF;
  border:1px solid #DCE4EF;
  border-radius:clamp(7px, .65cqw, 10px);
  box-shadow:0 .2cqw .8cqw rgba(16,37,61,.08);
  padding:.4cqw .5cqw;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  box-sizing:border-box;
  opacity:0;
  transition:opacity .24s ease, border-color .24s ease, box-shadow .24s ease;
  pointer-events:auto;
}
.demo-kanban-card.is-moved .kanban-card-surface,
.demo-kanban-card.is-moving .kanban-card-surface,
.demo-kanban-card.is-dragging .kanban-card-surface,
.demo-kanban-card:hover .kanban-card-surface,
.demo-kanban-card.is-selected .kanban-card-surface,
.demo-kanban-layer.has-moves .kanban-card-surface{
  opacity:1;
}

.kanban-card-header-bar{
  display:flex;
  align-items:center;
  gap:.3cqw;
}
.kanban-avatar-box{
  position:relative;
  width:clamp(18px, 1.4cqw, 24px);
  height:clamp(18px, 1.4cqw, 24px);
  flex-shrink:0;
}
.kanban-avatar{
  width:100%;
  height:100%;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:clamp(7.5px, .55cqw, 10px);
  font-weight:750;
  color:#1258DC;
  background:#EDF3FD;
}
.kanban-avatar.avatar-coral{color:#E11D48;background:#FFE4E6}
.kanban-avatar.avatar-green{color:#059669;background:#D1FAE5}
.kanban-avatar.avatar-purple{color:#7C3AED;background:#EDE9FE}

.kanban-channel-badge{
  position:absolute;
  bottom:-2px;
  right:-2px;
  width:clamp(8px, .55cqw, 11px);
  height:clamp(8px, .55cqw, 11px);
  background:#10A878;
  border-radius:50%;
  border:1.5px solid #FFFFFF;
  display:grid;
  place-items:center;
  color:#FFFFFF;
}
.kanban-channel-badge svg{
  width:100%;
  height:100%;
  padding:1px;
  stroke:currentColor;
}
.kanban-meta-box{
  flex:1;
  min-width:0;
}
.kanban-name{
  display:block;
  font-size:clamp(9px, .68cqw, 12px);
  font-weight:700;
  color:#10253D;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  line-height:1.2;
}
.kanban-sub{
  display:block;
  font-size:clamp(7px, .5cqw, 9.5px);
  color:#64748B;
  white-space:nowrap;
}
.kanban-move-actions{
  display:flex;
  gap:.2cqw;
  opacity:0;
  transition:opacity .2s ease;
}
.demo-kanban-card:hover .kanban-move-actions,
.demo-kanban-card.is-selected .kanban-move-actions{
  opacity:1;
}
.kanban-shift-btn{
  width:clamp(16px, 1.15cqw, 20px);
  height:clamp(16px, 1.15cqw, 20px);
  border-radius:4px;
  border:1px solid #CBD5E1;
  background:#F8FAFC;
  color:#334155;
  font-size:clamp(7px, .5cqw, 9px);
  cursor:pointer;
  display:grid;
  place-items:center;
  padding:0;
  transition:all .15s ease;
}
.kanban-shift-btn:hover{
  background:#1258DC;
  color:#FFFFFF;
  border-color:#1258DC;
}
.kanban-card-status-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.3cqw;
  margin:.2cqw 0;
}
.kanban-chip{
  display:inline-flex;
  align-items:center;
  gap:.2cqw;
  padding:.12cqw .35cqw;
  border-radius:9999px;
  font-size:clamp(7px, .5cqw, 9px);
  font-weight:650;
  background:#EDF3FD;
  color:#1D4ED8;
  border:1px solid #BFDBFE;
  white-space:nowrap;
}
.kanban-chip.status-atendimento{
  background:#FEF3C7;
  color:#B45309;
  border-color:#FDE68A;
}
.kanban-chip.status-concluida{
  background:#D1FAE5;
  color:#065F46;
  border-color:#A7F3D0;
}
.kanban-chip.status-negociacao{
  background:#EDE9FE;
  color:#6D28D9;
  border-color:#DDD6FE;
}
.kanban-agent{
  font-size:clamp(7px, .5cqw, 9px);
  color:#475569;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:.2cqw;
  white-space:nowrap;
}
.kanban-agent .agent-dot{
  width:clamp(4px, .3cqw, 6px);
  height:clamp(4px, .3cqw, 6px);
  border-radius:50%;
  background:#1258DC;
}
.kanban-snippet{
  margin:0;
  font-size:clamp(7px, .52cqw, 9.5px);
  color:#64748B;
  background:#F8FAFC;
  border-radius:4px;
  padding:.2cqw .35cqw;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  border-left:2px solid #CBD5E1;
}

/* Slot Fantasma no local original da coluna */
.kanban-ghost-slot{
  position:absolute;
  border-radius:clamp(7px, .65cqw, 10px);
  border:1.5px dashed #94A3B8;
  background:rgba(248, 250, 252, 0.88);
  backdrop-filter:blur(3px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  color:#64748B;
  font-size:clamp(7.5px, .52cqw, 10px);
  font-weight:600;
  pointer-events:none;
  z-index:2;
  animation:ghostSlotFadeIn .32s cubic-bezier(.16, 1, .3, 1) both, ghostSlotPulse 2.4s ease-in-out infinite alternate!important;
}
@keyframes ghostSlotFadeIn{
  from{opacity:0;transform:scale(.96)}
  to{opacity:1;transform:scale(1)}
}
@keyframes ghostSlotPulse{
  0%{border-color:#94A3B8;background:rgba(248, 250, 252, 0.88)}
  100%{border-color:#1258DC;background:rgba(237, 243, 253, 0.94)}
}
.kanban-ghost-slot span{
  font-size:clamp(6.5px, .46cqw, 9px);
  opacity:.85;
}

/* Alvos de soltura das colunas (Drop Targets) */
.kanban-column-drop-zone{
  position:absolute;
  top:22%;
  bottom:6%;
  width:21%;
  border-radius:clamp(8px, .8cqw, 14px);
  border:2px dashed transparent;
  pointer-events:none;
  transition:border-color .22s ease, background-color .22s ease;
  z-index:4;
}
.kanban-column-drop-zone.is-active-target{
  border-color:#1258DC;
  background:rgba(18, 88, 220, 0.08);
  box-shadow:inset 0 0 20px rgba(18, 88, 220, 0.12);
}
.kanban-column-drop-zone.is-target-receiving{
  border-color:rgba(18, 88, 220, 0.7);
  background:rgba(18, 88, 220, 0.08);
  box-shadow:inset 0 0 24px rgba(18, 88, 220, 0.16);
  animation:targetDropPulse .5s ease-in-out infinite alternate;
}
@keyframes targetDropPulse{
  0%{opacity:.55}
  100%{opacity:1}
}

.demo-kanban-card.card-pulse-update{
  animation:kanbanBatchPulse .45s cubic-bezier(.16,1,.3,1) both;
}
@keyframes kanbanBatchPulse{
  0%{transform:scale(1)}
  40%{transform:scale(1.03) translateY(-2px);box-shadow:0 0 0 2px #10A878,0 .6cqw 1.5cqw rgba(16,185,129,.3)!important}
  100%{transform:scale(1)}
}
.kanban-active-chip{
  display:inline-flex;
  align-items:center;
  gap:.3cqw;
  background:#eff6ff;
  color:#1d4ed8;
  border:1px solid #bfdbfe;
  border-radius:9999px;
  padding:.2cqw .5cqw;
  font-size:.6cqw;
  font-weight:650;
  box-shadow:0 .2cqw .6cqw rgba(29,78,216,.14);
  opacity:1;
  transition:all .2s ease;
  pointer-events:none;
  white-space:nowrap;
}
.active-dot{
  width:.36cqw;
  height:.36cqw;
  border-radius:50%;
  background:#1258DC;
  box-shadow:0 0 .3cqw rgba(7,105,239,.75);
  flex-shrink:0;
}
.active-dot.dot-blue{background:#3b82f6;box-shadow:0 0 .3cqw rgba(59,130,246,.75)}
.active-dot.dot-yellow{background:#eab308;box-shadow:0 0 .3cqw rgba(234,179,8,.75)}
.active-dot.dot-purple{background:#8b5cf6;box-shadow:0 0 .3cqw rgba(139,92,246,.75)}
.active-dot.dot-green{background:#10A878;box-shadow:0 0 .3cqw rgba(16,185,129,.75)}
.active-dot.dot-gray{background:#94a3b8;box-shadow:0 0 .3cqw rgba(148,163,184,.75)}

/* Kanban Quick Actions (Bulk Operations Toolbar) */
.kanban-quick-actions-bar{
  display:none!important;
}
.kanban-quick-actions-bar.has-selection{
  border-color:#93c5fd;
  background:#ffffff;
  box-shadow:0 4px 16px rgba(7,105,239,.16),0 0 0 1px #bfdbfe;
}
.quick-actions-left{
  display:flex;
  align-items:center;
  gap:clamp(6px, .75cqw, 12px);
}
.quick-select-all{
  display:inline-flex;
  align-items:center;
  gap:clamp(4px, .45cqw, 8px);
  cursor:pointer;
  user-select:none;
}
.quick-select-all input{
  position:absolute;
  opacity:0;
  pointer-events:none;
  width:0;
  height:0;
}
.quick-checkbox-custom{
  width:clamp(14px, 1.2cqw, 18px);
  height:clamp(14px, 1.2cqw, 18px);
  border-radius:clamp(3px, .3cqw, 5px);
  border:1.5px solid #94a3b8;
  background:#fff;
  display:grid;
  place-items:center;
  color:#fff;
  transition:all .18s ease;
}
.quick-checkbox-custom svg{
  width:clamp(9px, .8cqw, 13px);
  height:clamp(9px, .8cqw, 13px);
  stroke:currentColor;
  opacity:0;
  transform:scale(.5);
  transition:all .18s cubic-bezier(.16,1,.3,1);
}
.quick-select-all input:checked + .quick-checkbox-custom{
  background:#1258DC;
  border-color:#1258DC;
}
.quick-select-all input:checked + .quick-checkbox-custom svg{
  opacity:1;
  transform:scale(1);
}
.quick-select-all input:indeterminate + .quick-checkbox-custom{
  background:#1258DC;
  border-color:#1258DC;
}
.quick-select-all input:indeterminate + .quick-checkbox-custom svg{
  opacity:1;
  transform:scale(1);
}
.quick-actions-title{
  font-size:clamp(11px, .78cqw, 13.5px);
  font-weight:700;
  color:#152c4a;
  letter-spacing:-.01em;
  display:inline-flex;
  align-items:center;
  gap:clamp(2px, .3cqw, 5px);
}
.quick-selection-pill{
  font-size:clamp(10px, .65cqw, 12px);
  color:#64748b;
  background:#f1f5f9;
  border:1px solid #e2e8f0;
  border-radius:9999px;
  padding:clamp(2px, .14cqw, 4px) clamp(6px, .55cqw, 10px);
  transition:all .2s ease;
}
.has-selection .quick-selection-pill{
  background:#eff6ff;
  color:#1d4ed8;
  border-color:#bfdbfe;
  font-weight:600;
}
.quick-actions-buttons{
  display:flex;
  align-items:center;
  gap:clamp(4px, .4cqw, 8px);
}
.quick-action-dropdown-wrap{
  position:relative;
}
.quick-action-btn{
  display:inline-flex;
  align-items:center;
  gap:clamp(4px, .35cqw, 7px);
  height:clamp(24px, 2.6cqw, 32px);
  padding:0 clamp(6px, .7cqw, 12px);
  border:1px solid #e2e8f0;
  border-radius:clamp(4px, .45cqw, 8px);
  background:#fff;
  color:#334155;
  font-size:clamp(10px, .7cqw, 12.5px);
  font-weight:600;
  cursor:pointer;
  transition:all .18s ease;
  white-space:nowrap;
  outline:none!important;
}
.quick-action-btn svg{
  width:clamp(12px, .95cqw, 16px);
  height:clamp(12px, .95cqw, 16px);
  color:#64748b;
  flex-shrink:0;
}
.quick-action-btn .quick-chevron{
  font-size:clamp(8px, .5cqw, 10px);
  color:#94a3b8;
  font-style:normal;
  transition:transform .2s ease;
}
.quick-action-btn:hover{
  background:#f8fafc;
  border-color:#cbd5e1;
  color:#0f172a;
}
.quick-action-btn[aria-expanded="true"]{
  background:#eff6ff;
  border-color:#93c5fd;
  color:#1d4ed8;
}
.quick-action-btn[aria-expanded="true"] .quick-chevron{
  transform:rotate(180deg);
}
.has-selection .quick-action-btn.is-active-bulk{
  background:#eff6ff;
  border-color:#93c5fd;
  color:#1d4ed8;
  font-weight:650;
  box-shadow:0 2px 6px rgba(37,99,235,.12);
}
.has-selection .quick-action-btn.is-active-bulk svg{
  color:#2563eb;
}
.quick-action-btn.btn-ghost{
  border-color:transparent;
  background:transparent;
  color:#64748b;
  font-size:clamp(9.5px, .65cqw, 12px);
  padding:0 clamp(4px, .4cqw, 8px);
}
.quick-action-btn.btn-ghost:hover{
  background:#f1f5f9;
  color:#0f172a;
}

/* Quick Dropdown Popover Panels */
.quick-dropdown-panel{
  position:absolute;
  top:calc(100% + 4px);
  left:0;
  min-width:clamp(160px, 14cqw, 230px);
  background:#ffffff;
  border:1px solid #e2e8f0;
  border-radius:clamp(6px, .55cqw, 10px);
  padding:clamp(4px, .3cqw, 8px);
  box-shadow:0 8px 25px rgba(15,23,42,.15);
  z-index:45;
  display:flex;
  flex-direction:column;
  gap:2px;
  animation:quickDropPop .2s cubic-bezier(.16,1,.3,1) both;
}
.quick-actions-buttons .quick-action-dropdown-wrap:last-of-type .quick-dropdown-panel,
.quick-actions-buttons .quick-action-dropdown-wrap:nth-last-child(2) .quick-dropdown-panel{
  left:auto;
  right:0;
}
.quick-dropdown-panel[hidden]{
  display:none!important;
}
.quick-dropdown-header{
  font-size:clamp(9.5px, .6cqw, 11px);
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#94a3b8;
  padding:clamp(3px, .25cqw, 6px) clamp(6px, .45cqw, 8px);
}
.quick-dropdown-item{
  display:flex;
  align-items:center;
  gap:clamp(6px, .45cqw, 10px);
  padding:clamp(5px, .35cqw, 8px) clamp(8px, .45cqw, 12px);
  border-radius:clamp(4px, .35cqw, 6px);
  border:0;
  background:transparent;
  color:#1e293b;
  font-size:clamp(11px, .7cqw, 13px);
  text-align:left;
  cursor:pointer;
  width:100%;
  transition:background-color .15s ease,color .15s ease;
}
.quick-dropdown-item:hover{
  background:#f1f5f9;
  color:#1258DC;
}
.status-dot{
  width:clamp(6px, .45cqw, 8px);
  height:clamp(6px, .45cqw, 8px);
  border-radius:50%;
  flex-shrink:0;
}
.mini-agent-avatar{
  width:clamp(16px, 1.2cqw, 20px);
  height:clamp(16px, 1.2cqw, 20px);
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:clamp(8px, .52cqw, 10px);
  font-weight:700;
  flex-shrink:0;
}
.avatar-coral{background:#ffe5dc;color:#b57560}
.avatar-blue{background:#dceaff;color:#5981b3}
.avatar-purple{background:#ebe4ff;color:#8c77b4}
.avatar-green{background:#dcfce7;color:#15803d}
.tag-color-dot{
  width:clamp(5px, .4cqw, 7px);
  height:clamp(5px, .4cqw, 7px);
  border-radius:50%;
  flex-shrink:0;
}
.dot-gold{background:#eab308}
.dot-red{background:#ef4444}

/* 2. KPI / Insights Interactive Card (Scene 1) */
.demo-kpi-card{
  position:absolute;
  border-radius:.6cqw;
  cursor:pointer;
  box-sizing:border-box;
  pointer-events:auto;
  outline:none!important;
  border:none!important;
  background:transparent!important;
  box-shadow:none!important;
  transition:transform .24s cubic-bezier(.34,1.56,.64,1);
}
.demo-kpi-card-inner{
  position:relative;
  width:100%;
  height:100%;
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  padding:.3cqw .4cqw;
  box-sizing:border-box;
}
.kpi-card-preview{
  display:none!important;
}
.demo-kpi-card.is-hovered,
.demo-kpi-card.is-active,
.demo-kpi-card.is-counting{
  background:transparent!important;
  border:none!important;
  outline:none!important;
  box-shadow:none!important;
}
.demo-kpi-card:active{
  transform:scale(.98);
}
.kpi-active-chip{
  display:inline-flex;
  align-items:center;
  gap:.3cqw;
  background:#eff6ff;
  color:#1d4ed8;
  border:1px solid #bfdbfe;
  border-radius:9999px;
  padding:.22cqw .6cqw;
  font-size:.66cqw;
  font-weight:650;
  box-shadow:0 .2cqw .6cqw rgba(29,78,216,.14);
  opacity:0;
  transform:translateY(4px) scale(.92);
  transition:opacity .25s ease,transform .32s cubic-bezier(.34,1.56,.64,1);
  pointer-events:none;
  white-space:nowrap;
}
.demo-kpi-card.is-active .kpi-active-chip{
  opacity:1;
  transform:translateY(0) scale(1);
}

/* 3. Automation Toggle Switches (Scene 3) */
.demo-toggle-row{
  position:absolute;
  display:flex;
  align-items:center;
  background:#fff;
  padding:2px 4px;
  border-radius:9999px;
  box-sizing:border-box;
}
.demo-switch{
  display:inline-flex;
  align-items:center;
  gap:.45cqw;
  background:transparent;
  border:0;
  padding:0;
  cursor:pointer;
  border-radius:.35cqw;
  outline:none;
  transition:transform .22s cubic-bezier(.34,1.56,.64,1);
  user-select:none;
  font-family:inherit;
  width:100%;
}
.demo-switch.is-hovered,
.demo-switch:hover{
  transform:scale(1.08);
}
.demo-switch:active{
  transform:scale(.95);
}
.switch-track{
  position:relative;
  width:2.32cqw;
  height:1.32cqw;
  border-radius:9999px;
  background:#1258DC;
  transition:background-color .28s cubic-bezier(.4,0,.2,1);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.15);
  flex-shrink:0;
}
.switch-thumb{
  position:absolute;
  top:.13cqw;
  left:.13cqw;
  width:1.06cqw;
  height:1.06cqw;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.3);
  transition:transform .32s cubic-bezier(.34,1.56,.64,1);
}
.demo-switch.is-active .switch-track{
  background:#1258DC;
}
.demo-switch.is-active .switch-thumb{
  transform:translateX(1.01cqw);
}
.demo-switch.is-inactive .switch-track{
  background:#cbd5e1;
}
.demo-switch.is-inactive .switch-thumb{
  transform:translateX(0);
}
.switch-status{
  display:inline-flex;
  align-items:center;
  gap:.3cqw;
  font-size:.74cqw;
  font-weight:600;
  min-width:2.4cqw;
  white-space:nowrap;
  line-height:1;
}
.status-dot{
  width:.38cqw;
  height:.38cqw;
  border-radius:50%;
  background:#1258DC;
  transition:background-color .25s ease,box-shadow .25s ease;
  flex-shrink:0;
}
.demo-switch.is-active .status-dot{
  background:#1258DC;
  box-shadow:0 0 .4cqw rgba(7,105,239,.75);
}
.demo-switch.is-active .status-text{
  color:#1258DC;
}
.demo-switch.is-inactive .status-dot{
  background:#94a3b8;
  box-shadow:none;
}
.demo-switch.is-inactive .status-text{
  color:#64748b;
}

/* 4. Flows Interactive Node (Scene 2) */
.demo-flow-node{
  position:absolute;
  border-radius:.8cqw;
  pointer-events:auto;
  background:transparent;
  box-sizing:border-box;
  box-shadow:none!important;
  border:none!important;
  outline:none!important;
}
.demo-node-switch{
  position:absolute;
  top:.8cqw;
  right:.8cqw;
  display:inline-flex;
  align-items:center;
  gap:.4cqw;
  background:#fff;
  border:1px solid #e2e8f0;
  padding:.22cqw .55cqw;
  border-radius:9999px;
  cursor:pointer;
  box-shadow:0 1px 3px rgba(0,0,0,.08);
  transition:transform .2s ease;
  outline:none!important;
  font-family:inherit;
}
.demo-node-switch.is-hovered,
.demo-node-switch:hover{
  transform:scale(1.06);
  border-color:#e2e8f0!important;
  box-shadow:0 1px 4px rgba(0,0,0,.12)!important;
}
.demo-node-switch:active{
  transform:scale(.95);
}
.node-switch-track{
  position:relative;
  width:1.95cqw;
  height:1.05cqw;
  border-radius:9999px;
  background:#1258DC;
  transition:background-color .28s ease;
  flex-shrink:0;
}
.node-switch-thumb{
  position:absolute;
  top:.12cqw;
  left:.14cqw;
  width:.81cqw;
  height:.81cqw;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.25);
  transition:transform .32s cubic-bezier(.34,1.56,.64,1);
}
.demo-node-switch.is-active .node-switch-track{
  background:#1258DC;
}
.demo-node-switch.is-active .node-switch-thumb{
  transform:translateX(.86cqw);
}
.demo-node-switch.is-inactive .node-switch-track{
  background:#cbd5e1;
}
.demo-node-switch.is-inactive .node-switch-thumb{
  transform:translateX(0);
}
.node-switch-label{
  display:inline-flex;
  align-items:center;
  gap:.3cqw;
  font-size:.72cqw;
  font-weight:650;
}
.demo-node-switch.is-active .node-status-text{
  color:#1258DC;
}
.demo-node-switch.is-inactive .node-status-text{
  color:#64748b;
}

/* 5. Chat Input Box (Scene 4) */
.demo-chat-input-box{
  position:absolute;
  left:32.3%;
  top:92.1%;
  width:60%;
  height:5.3%;
  display:flex;
  align-items:center;
  background:transparent!important;
  border-radius:.45cqw;
  padding:0 1.1cqw;
  box-sizing:border-box;
  cursor:text;
  user-select:none;
  outline:none!important;
  border:none!important;
  box-shadow:none!important;
  overflow:hidden;
  z-index:4;
}
.demo-chat-input-box.is-hovered,
.demo-chat-input-box.is-active,
.demo-chat-input-box.is-typing{
  border:none!important;
  outline:none!important;
  box-shadow:none!important;
  background:transparent!important;
}
.chat-placeholder{
  color:#94a3b8;
  font-size:.88cqw;
  font-family:inherit;
  pointer-events:none;
  white-space:nowrap;
  line-height:1;
  display:inline-block;
}
.demo-chat-input-box.is-typing .chat-placeholder,
.demo-chat-input-box.is-active .chat-placeholder{
  display:none!important;
}
.chat-typed-text{
  color:#0f172a;
  font-size:.88cqw;
  font-family:inherit;
  font-weight:500;
  white-space:nowrap;
  letter-spacing:-.01em;
  line-height:1;
  max-width:100%;
  overflow:hidden;
  text-overflow:clip;
}
.chat-caret{
  width:1.5px;
  height:1.2cqw;
  background:#1258DC;
  margin-left:2px;
  display:none;
  flex-shrink:0;
}
.demo-chat-input-box.is-active .chat-caret,
.demo-chat-input-box.is-typing .chat-caret{
  display:inline-block;
  animation:chat-blink .75s step-end infinite;
}
@keyframes chat-blink{
  0%,100%{opacity:1}
  50%{opacity:0}
}

/* Floating Toast Notification */
.demo-toast{
  position:absolute;
  bottom:3.2%;
  left:50%;
  transform:translateX(-50%) translateY(14px);
  background:#13253b;
  color:#fff;
  padding:.55cqw 1.2cqw;
  border-radius:9999px;
  font-size:.82cqw;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:.55cqw;
  box-shadow:0 .8cqw 2.2cqw rgba(14,28,48,.35);
  opacity:0;
  pointer-events:none;
  transition:opacity .28s ease,transform .28s cubic-bezier(.34,1.56,.64,1);
  z-index:9;
  white-space:nowrap;
}
.demo-toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}
.demo-toast .toast-dot{
  width:.5cqw;
  height:.5cqw;
  border-radius:50%;
  background:#1258DC;
  transition:background-color .2s ease;
}
.demo-toast.inactive .toast-dot{
  background:#94a3b8;
}

.real-scene-label{
  position:absolute;
  bottom:2.8%;
  right:2.1%;
  z-index:4;
  background:#172d49;
  color:#fff;
  padding:.75cqw 1.1cqw;
  border-radius:.7cqw;
  font-size:.9cqw;
  font-weight:550;
  box-shadow:0 4px 14px #25355520;
}
.animated-metric{
  display:none;
  position:absolute;
  z-index:2;
  top:43.5%;
  height:4.3%;
  width:8.8%;
  background:white;
  color:#102942;
  font-size:1.82cqw;
  font-weight:700;
  line-height:1.25;
  letter-spacing:-.035em;
}
.metric-received{left:10.8%}
.metric-served{left:22.65%}
.metric-resolution{left:34.5%}
.real-stage[data-active-scene="1"] .animated-metric{display:block}

.demo-kpi-card.is-counting{
  border:none!important;
  outline:none!important;
  box-shadow:none!important;
  background:transparent!important;
}
.demo-kpi-card.count-complete{
  animation:kpi-pop-finish .36s cubic-bezier(.34,1.56,.64,1);
}
@keyframes kpi-pop-finish{
  0%{transform:scale(1)}
  50%{transform:scale(1.03) translateY(-2px)}
  100%{transform:scale(1)}
}

.demo-story{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:21px 25px;
  border-top:1px solid #e5eaf3;
  gap:25px;
}
.demo-story>div{
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:14px;
}
.demo-story>div>span{
  font-size:11px;
  color:#8da0b6;
  grid-row:1/3;
  padding-top:4px;
  font-variant-numeric:tabular-nums;
}
.demo-story strong{font-size:17px;letter-spacing:-.35px;line-height:1.4}
.demo-story p{font-size:13px;color:#778ca4;margin-top:4px}
.demo-story>button{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:40px;
  border:1px solid #dee7f2;
  background:#f8fbff;
  color:#526c8e;
  padding:9px 13px;
  border-radius:8px;
  font-size:12px;
  flex-shrink:0;
  transition:all .18s ease;
}
.demo-story>button:hover{
  background:#edf4fe;
  color:#1258DC;
  border-color:#b9d5fb;
}
.pause-symbol{font-size:15px;line-height:1}

.demo-chapters{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  border-top:1px solid #e8eef5;
}
.demo-chapters button{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  position:relative;
  border:0;
  border-right:1px solid #e8eef5;
  background:#fafcff;
  color:#7e92a9;
  font-size:12px;
  padding:16px 6px;
  overflow:hidden;
  transition:color .18s,background .18s;
  cursor:pointer;
}
.demo-chapters button:last-child{border-right:0}
.demo-chapters button svg{width:16px;height:16px}
.demo-chapters button:hover{
  color:#1258DC;
  background:#f5f8ff;
}
.demo-chapters button.active{
  color:#1258DC;
  background:#f1f6ff;
  font-weight:650;
}
.demo-chapters button i{
  position:absolute;
  left:0;
  bottom:0;
  height:3px;
  background:#1258DC;
  width:100%;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .08s linear;
}
.demo-chapters button.active i{
  transform:scaleX(var(--demo-progress,0));
}
.real-caption{font-size:10px}
.real-product.is-paused .demo-cursor,.real-product.is-paused .demo-spotlight{opacity:0!important}

/* Mobile Preview */
.real-mobile-preview{position:relative;display:flex;flex-direction:column;align-items:center;perspective:1200px}
.real-phone{width:326px;max-width:100%;border:11px solid #142236;border-radius:46px;background:#fff;box-shadow:0 30px 80px rgba(18,48,84,.28),0 10px 26px rgba(18,48,84,.15),0 0 0 1px rgba(255,255,255,.25);position:relative;overflow:hidden;transform-style:preserve-3d;will-change:transform;transition:transform .28s cubic-bezier(.22,1,.36,1),box-shadow .28s ease;animation:phone-ambient-float 6.5s cubic-bezier(.45,.05,.55,.95) infinite alternate}
.real-mobile-preview.is-paused .real-phone{animation-play-state:paused}
.phone-reflection{position:absolute;top:0;left:0;right:0;height:52%;background:linear-gradient(135deg,rgba(255,255,255,.35) 0%,rgba(255,255,255,.08) 32%,transparent 58%);pointer-events:none;z-index:9;border-radius:35px 35px 0 0}
.phone-top{display:flex;align-items:center;justify-content:space-between;padding:10px 20px 4px;font-size:12px;font-weight:700;color:#172b47;position:relative;z-index:8;background:#fff;user-select:none}
.phone-clock{font-variant-numeric:tabular-nums;letter-spacing:-.2px}
.phone-island{position:absolute;left:50%;top:8px;transform:translateX(-50%);width:76px;height:18px;background:#0c1624;border-radius:20px;z-index:10;display:flex;align-items:center;justify-content:flex-end;padding-right:7px;box-shadow:0 1px 3px rgba(0,0,0,.35);transition:width .35s cubic-bezier(.34,1.56,.64,1)}
.island-camera{width:7px;height:7px;border-radius:50%;background:#172a42;box-shadow:inset 0 0 2px #0a111a}
.phone-status-icons{display:flex;align-items:center;gap:5px;color:#172b47}
.phone-sig,.phone-wifi{width:13px;height:11px;fill:currentColor}
.phone-bat{font-size:11px;line-height:1}
.phone-brand{display:flex;align-items:center;justify-content:space-between;padding:10px 18px;border-bottom:1px solid #edf1f7;font-size:17px;background:#fff;z-index:8;position:relative;user-select:none}
.phone-brand>span{font-weight:500;letter-spacing:-.5px;color:#152c4a}
.phone-brand b{color:var(--blue);font-weight:800}
.phone-header-actions{display:flex;align-items:center;gap:8px}
.phone-live-indicator{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:650;color:#15803d;background:#ecfdf5;border:1px solid #a7f3d0;padding:2px 7px;border-radius:12px}
.live-dot{width:5px;height:5px;border-radius:50%;background:#10A878;animation:pulse-live 1.8s ease-in-out infinite}
.phone-brand button{font-size:13px;border:0;border-radius:6px;background:#f1f3ff;color:#6955dd;width:29px;height:27px;letter-spacing:0;display:grid;place-items:center;cursor:pointer;transition:background .15s,transform .15s}
.phone-brand button:hover{background:#e3e7ff;transform:scale(1.05)}
.mobile-capture-window{height:500px;position:relative;overflow:hidden;background:#f8fafc;cursor:grab;user-select:none;touch-action:pan-y}
.mobile-capture-window:active{cursor:grabbing}
.mobile-real-image{position:absolute;max-width:none;display:block;width:416%;height:auto;left:-27%;top:0;font-size:0;color:transparent;transition:opacity .35s ease;will-change:transform;pointer-events:none}
.mobile-capture-window[data-mobile-scene="1"] .mobile-real-image{width:435%;left:-41%;top:-132px}
.mobile-capture-window[data-mobile-scene="2"] .mobile-real-image{width:370%;left:-35%;top:-202px}
.mobile-touch-pointer{position:absolute;width:34px;height:34px;left:65%;top:74%;z-index:6;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(0.6);transition:opacity .22s ease,transform .22s cubic-bezier(.22,1,.36,1);will-change:transform,left,top,opacity}
.touch-ring{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,rgba(7,105,239,.35) 0%,rgba(7,105,239,.08) 65%,transparent 75%);border:none!important;box-shadow:none!important}
.touch-core{position:absolute;inset:9px;border-radius:50%;background:rgba(255,255,255,.96);box-shadow:0 2px 6px rgba(0,0,0,.25)}
.touch-ripple{position:absolute;inset:-6px;border-radius:50%;background:radial-gradient(circle,rgba(7,105,239,.25) 0%,transparent 70%);border:none!important;opacity:0;transform:scale(0.8)}
.mobile-touch-pointer.is-active{opacity:1;transform:translate(-50%,-50%) scale(1)}
.mobile-touch-pointer.is-pressing{transform:translate(-50%,-50%) scale(0.86)}
.mobile-touch-pointer.is-tapping .touch-ripple{animation:mobile-ripple .5s cubic-bezier(.2,.8,.2,1)}
.mobile-dynamic-banner{position:absolute;top:10px;left:12px;right:12px;background:rgba(255,255,255,.94);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(220,230,242,.92);border-radius:16px;padding:10px 12px;display:flex;align-items:center;gap:10px;box-shadow:0 14px 34px rgba(18,48,84,.18),0 2px 8px rgba(18,48,84,.08);z-index:7;transform:translateY(-80px) scale(0.92);opacity:0;pointer-events:none;transition:transform .45s cubic-bezier(.34,1.45,.64,1),opacity .3s ease}
.mobile-dynamic-banner.is-showing{transform:translateY(0) scale(1);opacity:1}
.dynamic-banner-icon{width:32px;height:32px;border-radius:10px;background:linear-gradient(135deg,#10A878,#10A878);color:#fff;display:grid;place-items:center;flex-shrink:0;box-shadow:0 3px 8px rgba(34,197,94,.35)}
.dynamic-banner-icon svg{width:17px;height:17px}
.dynamic-banner-text{flex:1;min-width:0;line-height:1.25}
.dynamic-banner-text strong{display:block;font-size:11px;color:#162a45;font-weight:700}
.dynamic-banner-text span{display:block;font-size:10px;color:#5a708a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.dynamic-banner-badge{font-size:9px;color:#8ba0b7;font-weight:600;align-self:flex-start;padding-top:2px}
.mobile-home-indicator{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:120px;height:4px;border-radius:10px;background:#172c4735;z-index:6;pointer-events:none}
.real-phone-nav{display:flex;background:#fff;border-top:1px solid #e4eaf4;padding:6px 8px 10px;gap:6px;position:relative;z-index:8;user-select:none}
.real-phone-nav button{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;border:0;background:transparent;font-size:10px;font-weight:500;color:#899bb2;padding:8px 4px;border-radius:10px;cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent;transform-origin:center center;transition:background-color .18s ease,color .18s ease,transform .16s cubic-bezier(.34,1.56,.64,1)}
.real-phone-nav button>*{position:relative;z-index:2;pointer-events:none}
.real-phone-nav button svg{width:19px;height:19px;transform-origin:center center;transition:transform .22s cubic-bezier(.34,1.56,.64,1),color .18s ease}
.real-phone-nav button:hover{color:#553cfb;background:rgba(241,239,255,.5)}
.real-phone-nav button.active{background:#f1efff;color:#553cfb;font-weight:700}
.real-phone-nav button.active svg{transform:scale(1.12)}
.real-phone-nav button:active,.real-phone-nav button.is-pressing{transform:scale(.89)!important;background:#ebe8ff!important;transition:transform .06s cubic-bezier(.2,.8,.2,1)!important}
.real-phone-nav button:active svg,.real-phone-nav button.is-pressing svg{transform:scale(.92)!important;transition:transform .06s cubic-bezier(.2,.8,.2,1)!important}
.real-phone-nav button.is-haptic-tap{animation:phone-nav-haptic .36s cubic-bezier(.34,1.6,.64,1) both}
.real-phone-nav button.is-haptic-tap svg{animation:phone-icon-pop .36s cubic-bezier(.34,1.6,.64,1) both}
@keyframes phone-nav-haptic{0%{transform:scale(1)}25%{transform:scale(.88)}65%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes phone-icon-pop{0%{transform:scale(1)}30%{transform:scale(.82)}70%{transform:scale(1.24)}100%{transform:scale(1.12)}}
.phone-nav-ripple{position:absolute;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(85,60,251,.38) 0%,rgba(85,60,251,.15) 55%,transparent 75%);transform:translate(-50%,-50%) scale(0);animation:phone-ripple-spread .42s cubic-bezier(.15,.85,.25,1) forwards;z-index:1}
@keyframes phone-ripple-spread{0%{width:0;height:0;opacity:1;transform:translate(-50%,-50%) scale(0)}100%{width:150px;height:150px;opacity:0;transform:translate(-50%,-50%) scale(1)}}
.real-mobile-preview.is-paused .real-phone{animation-play-state:paused}

#screenshot-dialog{max-width:1300px;width:96vw;padding:38px 12px 12px;max-height:94vh;border-radius:14px}
#screenshot-dialog .close-dialog{top:0}
#screenshot-dialog p{text-align:center;font-size:12px;margin:12px 0 0;color:#8292a7}
.screenshot-scroll{overflow:auto;max-height:78vh;background:#f7f9fc}
.screenshot-scroll img{display:block;width:100%;height:auto}
.demo-window-bar button:hover,.demo-story button:hover{color:#5743df;border-color:#b7adf6}
.demo-window button:focus-visible{outline:2px solid #6048ff;outline-offset:-3px}
.real-mobile-preview .mobile-caption{line-height:1.6}

@keyframes phone-ambient-float{0%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-8px) rotate(-.85deg)}100%{transform:translateY(4px) rotate(.7deg)}}
@keyframes mobile-ripple{0%{opacity:1;transform:scale(.7)}100%{opacity:0;transform:scale(2.2)}}
@keyframes pulse-live{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(1.4)}}

/* Labels enter only after the drawer has room, and leave before it closes. */
.real-menu-brand strong,.real-company>div,.real-menu-items>button>span,.real-menu-bottom>span:last-child{opacity:0;visibility:hidden;transform:translateX(-.5cqw);transition:opacity .09s ease,transform .18s ease,visibility 0s .1s}
.real-menu:is(.expanded,.auto-expand) .real-menu-brand strong,
.real-menu:is(.expanded,.auto-expand) .real-company>div,
.real-menu:is(.expanded,.auto-expand) .real-menu-items>button>span,
.real-menu:is(.expanded,.auto-expand) .real-menu-bottom>span:last-child{opacity:1;visibility:visible;transform:translateX(0);transition:opacity .18s ease .32s,transform .24s ease .32s,visibility 0s .32s}
.real-menu-items>button{flex-shrink:0;min-width:0}
.real-menu-items>button>span{flex-shrink:0}

/* Presentation motion */
.animation-ready .demo-window{opacity:0;transform:translateY(22px) scale(.975)}
.animation-ready.has-entered .demo-window{animation:demo-window-open .82s cubic-bezier(.22,1,.36,1) forwards}

.stage-skeleton{position:absolute;inset:0;z-index:3;background:#f8fafc;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s;overflow:hidden}
.stage-skeleton.is-active{opacity:.95;visibility:visible}
.skeleton-shimmer-sweep{position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0) 15%,rgba(255,255,255,.85) 50%,rgba(255,255,255,0) 85%,transparent 100%);transform:translateX(-100%);animation:stage-shimmer-sweep .75s cubic-bezier(.4,0,.2,1) infinite;z-index:3;pointer-events:none}
@keyframes stage-shimmer-sweep{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.skeleton-layout{position:absolute;inset:0;padding:1.8cqw 2.2cqw 1.8cqw 7.8cqw;display:flex;flex-direction:column;gap:1.5cqw;z-index:1}
.skeleton-block{background:#e2e8f0;border-radius:.5cqw;position:relative;overflow:hidden}
.skeleton-top-bar{display:flex;align-items:center;gap:1.2cqw;height:3.2cqw;padding-bottom:.8cqw;border-bottom:1px solid #e2e8f0}
.skeleton-pill-brand{width:14cqw;height:2cqw;border-radius:.6cqw;background:#cbd5e1}
.skeleton-pill-search{width:22cqw;height:1.8cqw;border-radius:1cqw;background:#e2e8f0}
.skeleton-pill-action{margin-left:auto;width:9cqw;height:1.8cqw;border-radius:.6cqw;background:#cbd5e1}
.skeleton-content-area{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:1.5cqw}
.skeleton-col{background:rgba(226,232,240,.4);border-radius:.8cqw;padding:1cqw;display:flex;flex-direction:column;gap:.9cqw}
.skeleton-header{height:1.6cqw;width:60%;background:#cbd5e1;border-radius:.4cqw}
.skeleton-card{height:6cqw;background:#fff;border:1px solid #e2e8f0;border-radius:.6cqw;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.skeleton-card.sm{height:4.2cqw}
.skeleton-card.md{height:5.4cqw}
.skeleton-card.lg{height:7.2cqw}

.real-stage.is-switching::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:5;
  pointer-events:none;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);
  transform:translate3d(-100%,0,0);
  animation:demo-screen-sweep .4s ease-out both;
}

.demo-boot{position:absolute;inset:0;z-index:12;display:flex;align-items:center;justify-content:center;gap:1.1cqw;background:linear-gradient(145deg,#f7f6ff,#fff 54%,#f2f8ff);opacity:0;pointer-events:none}
.has-entered .demo-boot{animation:demo-boot 1.65s ease both}
.demo-boot-mark{width:4.1cqw;height:4.1cqw;border-radius:1.15cqw;display:grid;place-items:center;color:#fff;background:transparent;box-shadow:0 1.2cqw 2.6cqw #1258DC35;animation:demo-boot-mark 1.2s cubic-bezier(.22,1,.36,1) both}
.demo-boot-mark img{width:100%;height:100%;object-fit:contain;border-radius:1.15cqw;display:block}
.demo-boot-mark svg{width:2.5cqw;height:2.5cqw}
.demo-boot-copy{display:flex;flex-direction:column;gap:.2cqw}
.demo-boot-copy strong{font-size:1.45cqw;color:#162b47}
.demo-boot-copy small{font-size:.78cqw;color:#7d8ea5}
.demo-boot>i{position:absolute;width:9cqw;height:.32cqw;border-radius:9px;background:#e7e9f6;transform:translateY(4.7cqw);overflow:hidden}
.demo-boot>i::after{content:"";display:block;width:45%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#1258DC,#10A878);animation:demo-boot-progress 1.15s .2s ease-in-out both}
.demo-chapters button.active svg{animation:demo-tab-pop .45s cubic-bezier(.2,.8,.2,1)}

@keyframes demo-window-open{0%{opacity:0;transform:translateY(22px) scale(.975);box-shadow:0 8px 25px #14396c0e}100%{opacity:1;transform:none}}
@keyframes demo-boot{0%{opacity:1}68%{opacity:1}100%{opacity:0;visibility:hidden}}
@keyframes demo-boot-mark{0%{opacity:0;transform:scale(.7) rotate(-8deg)}45%,100%{opacity:1;transform:none}}
@keyframes demo-boot-progress{0%{transform:translateX(-110%)}100%{transform:translateX(225%)}}
@keyframes demo-scene-enter{0%{opacity:0;filter:blur(3px);transform:scale(.995)}100%{opacity:1;filter:blur(0);transform:scale(1)}}
@keyframes demo-scene-exit{0%{opacity:1;filter:blur(0);transform:scale(1)}100%{opacity:0;filter:blur(2px);transform:scale(1.005)}}
@keyframes demo-screen-sweep{0%{transform:translate3d(-100%,0,0);opacity:0}30%{opacity:1}100%{transform:translate3d(100%,0,0);opacity:0}}
@keyframes demo-tab-pop{0%{transform:scale(.78)}70%{transform:scale(1.12)}100%{transform:none}}

@media(max-width:760px){
  .real-product{margin-top:35px}
  .demo-window{border-radius:13px;box-shadow:0 15px 35px #14396c16,0 0 0 4px #ffffff90}
  .demo-window-bar{font-size:10px;gap:9px;padding:10px 11px}
  .demo-window-bar b{display:none}
  .window-dots{gap:4px}
  .window-dots i{width:5px;height:5px}
  .demo-window-bar>button{font-size:10px;padding:5px 7px}
  .real-stage{aspect-ratio:1.6}
  .real-shot{object-fit:contain;background:#f8fafc}
  .real-menu{width:5.7%;height:86%;top:7%}
  .demo-cursor{display:none}
  .demo-spotlight{display:none}
  .animated-metric{display:none!important}
  .real-scene-label{bottom:2%;font-size:1.9cqw;padding:1.2cqw 1.8cqw}
  .demo-story{padding:16px 12px;gap:10px}
  .demo-story>div{column-gap:8px}
  .demo-story>div>span{font-size:9px;grid-row:1/2;padding-top:3px}
  .demo-story strong{font-size:13px;letter-spacing:-.2px}
  .demo-story p{font-size:11px;grid-column:1/3;line-height:1.6;margin-top:7px}
  .demo-story>button{width:34px;height:34px;min-height:34px;padding:6px}
  .demo-story .play-text{display:none}
  .demo-chapters button{font-size:9px;flex-direction:column;gap:5px;padding:12px 2px}
  .demo-chapters button svg{width:15px;height:15px}
  .real-caption{font-size:9px;gap:4px}
  .kanban-quick-actions-bar{left:5.8%;width:92%;top:8%;min-height:28px;padding:0 6px;gap:4px}
  .quick-actions-left{gap:5px}
  .quick-actions-title{font-size:10px}
  .quick-selection-pill{font-size:9px;padding:1px 5px}
  .quick-actions-buttons{gap:3px}
  .quick-action-btn{height:22px;padding:0 5px;font-size:9.5px;gap:3px}
  .quick-action-btn svg{width:10px;height:10px}
  .quick-dropdown-panel{min-width:145px;top:calc(100% + 2px)}
  .quick-dropdown-item{padding:4px 6px;font-size:10px}
  .real-menu-items>button{padding:.77cqw 1.15cqw}
  .real-phone{width:322px}
  .mobile-capture-window{height:490px}
  .screenshot-scroll img{width:1100px;max-width:none}
  #screenshot-dialog p{font-size:11px}
  #demo-kanban-card,
  .demo-kanban-card{
    touch-action:pan-y!important;
    -webkit-tap-highlight-color:transparent!important;
  }
  #demo-kanban-card .kanban-card-surface,
  .demo-kanban-card .kanban-card-surface{
    opacity:1!important;
    box-shadow:0 2px 8px rgba(16,37,61,.1)!important;
  }
  #demo-kanban-card .kanban-move-actions,
  .demo-kanban-card .kanban-move-actions{
    opacity:1!important;
  }
  #demo-kanban-card .kanban-shift-btn,
  .demo-kanban-card .kanban-shift-btn{
    width:22px!important;
    height:22px!important;
    font-size:10px!important;
    background:#EFF6FF!important;
    border-color:#BFDBFE!important;
    color:#1E40AF!important;
  }
  #demo-kanban-card:active,
  #demo-kanban-card.is-pressed,
  #demo-kanban-card[data-pressed="true"]{
    transform:translateY(2px) scale(0.96)!important;
    box-shadow:0 0 0 3px #1258DC, 0 6px 18px rgba(18,88,220,.32)!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .real-shot,.real-menu,.demo-spotlight,.demo-cursor{transition:none}
  .demo-cursor,.demo-spotlight,.mobile-tap{display:none!important}
  .mobile-capture-window .mobile-real-image{animation:none!important}
  .demo-chapters button i{display:none}
  .real-menu,.real-menu *{transition:none!important}
  .animation-ready .demo-window{opacity:1;transform:none}
  .demo-boot{display:none}
  .stage-skeleton,.skeleton-shimmer-sweep{display:none!important}
  .real-shot,.real-shot.scene-enter,.real-shot.scene-exit,.real-stage.is-switching::after,.demo-chapters button.active svg{animation:none!important;transform:none;filter:none}
}