/* Qvren — live "livre" hero canvas. Self-contained styles for the orbital
   free-routing animation embedded in the landing hero + step media. */
.av-canvas{position:relative;overflow:hidden;border-radius:16px;background:radial-gradient(var(--grid-dot,rgba(99,102,241,.06)) 1.4px,transparent 1.4px);background-size:26px 26px;background-color:#FBFBFE}
.av-canvas{--voice:#0D9488;--egress:#DB2777;--skill-http:#4F7DF9;--skill-capture:#06B6D4;--skill-rag:#A855F7;--skill-handoff:#F97316;--trace-active:#2563EB;--trace-done:#16A34A;--trace-error:#EF4444;--node-w:216px}
.av-svg{position:absolute;inset:0;overflow:visible;pointer-events:none}
.av-halo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 50% 50%,rgba(139,92,246,.16) 0%,rgba(99,102,241,.10) 38%,rgba(99,102,241,.03) 66%,transparent 74%);transition:opacity .5s var(--ease-out,cubic-bezier(.2,.8,.2,1)),width .55s var(--ease-out,cubic-bezier(.2,.8,.2,1)),height .55s var(--ease-out,cubic-bezier(.2,.8,.2,1));pointer-events:none}
.av-node{position:absolute;box-sizing:border-box;transform:translate(-50%,-50%);transition:left .55s var(--ease-out,cubic-bezier(.2,.8,.2,1)),top .55s var(--ease-out,cubic-bezier(.2,.8,.2,1)),box-shadow .2s var(--ease-out),border-color .2s var(--ease-out);z-index:2}
.av-node.interactive{cursor:pointer}
.av-node .card{width:var(--node-w);background:var(--bg-surface,#fff);border:1.5px solid var(--border-strong,#DEE0EC);border-radius:16px;box-shadow:var(--shadow-card,0 1px 2px rgba(30,27,57,.04),0 4px 16px rgba(30,27,57,.05));padding:12px 13px;box-sizing:border-box}
.card-top{display:flex;align-items:center;gap:10px}
.av-node .ico{width:34px;height:34px;border-radius:10px;flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.av-node .ico svg{width:18px;height:18px}
.n-name{font-size:14px;font-weight:700;letter-spacing:-.01em;line-height:1.15}
.n-role{font-size:10.5px;color:var(--text-muted,#9A9AB5);font-family:var(--font-mono,"JetBrains Mono",monospace);margin-top:2px;letter-spacing:-.02em}
.n-attach{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.chip{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:999px;font-size:11px;font-weight:600;font-family:var(--font-mono,monospace);background:var(--bg-surface-2,#F2F3FB);color:var(--text-secondary,#64648B);letter-spacing:-.02em}
.chip .dot{width:6px;height:6px;border-radius:50%}
.hub{width:244px;padding:15px 16px;border-radius:20px;background:var(--gradient-primary,linear-gradient(135deg,#6366F1,#8B5CF6));box-shadow:0 18px 42px -10px rgba(99,102,241,.55),0 2px 8px rgba(99,102,241,.3);color:#fff;border:none;position:relative}
.hub .n-name{font-size:17px}
.hub .n-role{color:rgba(255,255,255,.82)}
.hub .ico{background:rgba(255,255,255,.18);color:#fff;width:38px;height:38px}
.hub .ico svg{width:20px;height:20px}
.hub-badge{display:inline-flex;align-items:center;gap:6px;margin-top:12px;height:24px;padding:0 10px;border-radius:999px;background:rgba(255,255,255,.16);color:#fff;font-size:11px;font-weight:700;letter-spacing:.01em;backdrop-filter:blur(4px)}
.hub-badge svg{width:13px;height:13px}
.hub-ring{position:absolute;inset:-5px;border-radius:24px;border:2px solid rgba(139,92,246,.35);pointer-events:none}
.pill{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 13px 0 10px;border-radius:999px;background:var(--bg-surface,#fff);border:1.5px solid var(--border-strong,#DEE0EC);box-shadow:var(--shadow-card);font-family:var(--font-mono,monospace);font-size:12px;font-weight:600;color:var(--text-primary,#1E1B39);white-space:nowrap}
.pill .pdot{width:20px;height:20px;border-radius:7px;display:flex;align-items:center;justify-content:center}
.pill .pdot svg{width:12px;height:12px}
.pill .ptag{font-size:9.5px;color:var(--text-muted,#9A9AB5);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.av-node.interactive:hover .card{border-color:var(--brand-indigo,#6366F1);box-shadow:var(--shadow-glow,0 12px 32px rgba(99,102,241,.16))}
.av-node.interactive:hover{z-index:6}
.st-selected .card{border-color:var(--brand-indigo,#6366F1);box-shadow:0 0 0 3px rgba(99,102,241,.18),var(--shadow-glow,0 12px 32px rgba(99,102,241,.16))}
.tr-done .card,.tr-done.pill{border-color:var(--trace-done,#16A34A);box-shadow:0 0 0 2px rgba(22,163,74,.16)}
.tr-done .ico{outline:2px solid rgba(22,163,74,.35)}
.tr-active .card,.tr-active.pill{border-color:var(--trace-active,#2563EB);box-shadow:0 0 0 3px rgba(37,99,235,.18);animation:avPulse 1.4s var(--ease-out,cubic-bezier(.2,.8,.2,1)) infinite}
.tr-error .card,.tr-error.pill{border-color:var(--trace-error,#EF4444);box-shadow:0 0 0 3px rgba(239,68,68,.18)}
.tr-badge{position:absolute;top:-11px;right:-8px;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;z-index:3;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.tr-badge svg{width:13px;height:13px}
@keyframes avPulse{0%{box-shadow:0 0 0 0 rgba(37,99,235,.35),0 0 0 3px rgba(37,99,235,.18)}70%{box-shadow:0 0 0 14px rgba(37,99,235,0),0 0 0 3px rgba(37,99,235,.18)}100%{box-shadow:0 0 0 0 rgba(37,99,235,0),0 0 0 3px rgba(37,99,235,.18)}}
@keyframes avFlow{to{stroke-dashoffset:-28}}
@keyframes avRingSpin{to{transform:rotate(360deg)}}
@keyframes avLive{0%,100%{opacity:1}50%{opacity:.35}}
.mode-chip{position:absolute;top:16px;left:16px;z-index:8;display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 14px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:-.01em;box-shadow:var(--shadow-card);border:1px solid var(--border,#ECEDF5);background:#fff}
.mode-chip svg{width:14px;height:14px}
.mode-chip .lg{width:7px;height:7px;border-radius:50%}

/* ---- hero toolbar (mode toggle + play) ---- */
.hero-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--border,#ECEDF5);background:rgba(255,255,255,.8);backdrop-filter:blur(10px)}
.hero-toolbar .tb-label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted,#9A9AB5)}
.hero-toolbar .tb-spacer{flex:1}
.seg{display:inline-flex;background:var(--bg-surface-2,#F2F3FB);border-radius:12px;padding:3px;gap:2px}
.seg button{border:none;background:transparent;cursor:pointer;font:inherit;font-size:12.5px;font-weight:700;color:var(--text-secondary,#64648B);padding:7px 14px;border-radius:9px;display:inline-flex;align-items:center;gap:7px;transition:all .18s var(--ease-out)}
.seg button svg{width:15px;height:15px}
.seg.mode button.on{background:var(--gradient-primary);color:#fff;box-shadow:var(--shadow-primary,0 10px 24px -6px rgba(99,102,241,.5))}
.hero-toolbar .tbtn{border:none;cursor:pointer;font:inherit;font-size:13px;font-weight:700;border-radius:11px;padding:9px 16px;display:inline-flex;align-items:center;gap:8px;transition:all .18s var(--ease-out)}
.hero-toolbar .tbtn svg{width:16px;height:16px}
.tbtn-primary{background:var(--gradient-primary);color:#fff;box-shadow:var(--shadow-primary,0 10px 24px -6px rgba(99,102,241,.5))}
.tbtn-primary:hover{filter:brightness(1.04)}

/* ---- responsive scaler: keeps the 1120×620 canvas crisp at any width ---- */
.hero-scaler{position:relative;width:100%;overflow:hidden}
.hero-scaler .av-canvas{border:none;border-radius:0;transform-origin:top left}

/* ---- PT | EN language toggle (nav) ---- */
.lang-toggle{display:inline-flex;align-items:center;gap:2px;background:var(--bg-surface-2,#F2F3FB);border:1px solid var(--border,#ECEDF5);border-radius:10px;padding:2px}
.lang-toggle button{border:none;background:transparent;cursor:pointer;font:inherit;font-size:12.5px;font-weight:700;letter-spacing:.02em;color:var(--text-muted,#9A9AB5);padding:6px 10px;border-radius:8px;transition:all .18s var(--ease-out,cubic-bezier(.2,.8,.2,1))}
.lang-toggle button:hover{color:var(--text-secondary,#64648B)}
.lang-toggle button.on{background:#fff;color:var(--brand-indigo,#6366F1);box-shadow:0 1px 3px rgba(30,27,57,.1)}

@media (prefers-reduced-motion:reduce){
  .tr-active .card,.tr-active.pill{animation:none}
  .mode-chip .lg{animation:none!important}
}