/* Demo site: Progress Consulting look (noche, esmeralda, coral, Schibsted Grotesk) */
@font-face{font-family:"Schibsted Grotesk";src:url(/fonts/schibsted-grotesk-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Schibsted Grotesk";src:url(/fonts/schibsted-grotesk-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Schibsted Grotesk";src:url(/fonts/schibsted-grotesk-800.woff2) format("woff2");font-weight:800;font-display:swap}
:root{
  --paper:#eef2f0;--surface:#fff;--surface-2:#f6f9f7;--sunken:#e6ece9;
  --ink:#0e1a17;--ink-2:#2e3d38;--muted:#566660;--faint:#8b9a94;--rule:#dfe6e2;--rule-2:#c9d4cf;
  --ok:#0b6e4f;--ok-bg:#d7efe5;--bad:#a51d2d;--bad-bg:#fbe2e3;--coral:#ff5b3a;--coral-bg:#ffe8e1;
  --noche:#0f1d19;--noche-2:#1a2d27;--noche-3:#2d4a40;--niebla:#a9bdb5;--clara:#e9f1ee;--esm:#3ccf96;
  --font:"Schibsted Grotesk","Segoe UI",system-ui,-apple-system,sans-serif;
  --r:18px;--pill:99px;--ease:cubic-bezier(.16,1,.3,1);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --paper:#0a1411;--surface:#111e1a;--surface-2:#15241f;--sunken:#0d1815;
  --ink:#e9f1ee;--ink-2:#c5d4ce;--muted:#93a8a0;--faint:#647a72;--rule:#1f332c;--rule-2:#2d4a40;
  --ok:#3ccf96;--ok-bg:#0f2a21;--bad:#ff7c84;--bad-bg:#33161a;--coral-bg:#3a1a12;
  --noche:#07100d;--noche-2:#13221d;--noche-3:#24403a;color-scheme:dark;
}}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:400 15px/1.5 var(--font);-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.02em}
.hidden{display:none!important}
:focus-visible{outline:2px solid var(--coral);outline-offset:2px;border-radius:8px}
button{font:600 15px/1 var(--font);cursor:pointer;border-radius:var(--pill);height:44px;padding:0 20px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);display:inline-flex;align-items:center;gap:8px;justify-content:center;transition:background-color .15s,border-color .15s,transform .08s}
button:active{transform:translateY(1px)}
button:disabled{opacity:.45;cursor:default}
button.go{background:var(--ok);border-color:var(--ok);color:#fff}
button.go:hover:not(:disabled){background:#095c42}
button.alt{background:transparent;color:var(--ink);border-color:var(--rule-2)}
button.alt:hover:not(:disabled){border-color:var(--ink)}
button.end{background:var(--coral);border-color:var(--coral);color:var(--noche)}
button.ghost{background:none;border:0;color:var(--niebla);height:auto;padding:6px 10px;font-size:13.5px}
button.ghost:hover{color:#fff}
input{font:400 15px var(--font);color:var(--ink);background:var(--surface);border:1px solid var(--rule-2);border-radius:12px;height:46px;padding:0 14px;width:100%}
input:focus{outline:none;border-color:var(--ok);box-shadow:0 0 0 3px var(--ok-bg)}
label{display:block;font-weight:600;font-size:13.5px;margin:14px 0 6px}
svg{display:block}

/* header */
.top{background:var(--noche);color:var(--clara)}
.bar{max-width:1180px;margin:0 auto;padding:0 20px;height:68px;display:flex;align-items:center;gap:16px}
.logo{height:34px;width:auto}
.brand-t{display:flex;flex-direction:column;line-height:1.15;padding-left:16px;border-left:1px solid var(--noche-3)}
.brand-t b{font-size:16px;color:#fff}
.brand-t span{font-size:12.5px;color:var(--niebla)}
.grow{flex:1}

/* hero */
.hero{background:var(--noche);color:var(--clara);padding:28px 20px 56px}
.hero-in{max-width:1180px;margin:0 auto}
.hero h1{font-size:clamp(28px,4.4vw,46px);line-height:1.05;color:#fff;max-width:18ch}
.hero h1 em{font-style:normal;color:var(--esm)}
.hero p{color:var(--niebla);max-width:60ch;margin:14px 0 0;font-size:16px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.chip{border:1px solid var(--noche-3);color:var(--clara);background:transparent;height:34px;padding:0 14px;font-size:13.5px}
.chip.on{background:var(--esm);border-color:var(--esm);color:var(--noche)}

/* agent grid */
main{max-width:1180px;margin:-30px auto 0;padding:0 20px 80px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}
.agent{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:20px;display:flex;flex-direction:column;gap:10px;box-shadow:0 18px 40px -30px rgba(14,26,23,.5);animation:up .4s var(--ease) both}
@keyframes up{from{opacity:0;transform:translateY(8px)}}
.agent .co{display:flex;align-items:center;gap:10px}
.mono{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-weight:800;font-size:17px;color:#fff;flex:none}
.agent .co b{display:block;font-size:13px;color:var(--muted);font-weight:600;letter-spacing:.02em;text-transform:uppercase}
.agent h3{font-size:19px}
.agent .uc{font-weight:600;color:var(--ink-2)}
.agent p{margin:0;color:var(--muted);font-size:14px;flex:1}
.agent .acts{display:flex;gap:8px;margin-top:6px}
.agent .acts button{flex:1;height:40px;font-size:14px;padding:0 12px}
.empty{background:var(--surface);border:1px dashed var(--rule-2);border-radius:var(--r);padding:28px;color:var(--muted)}

/* stage (a running demo) */
.stage{position:fixed;inset:0;z-index:50;background:rgba(7,16,13,.6);backdrop-filter:blur(6px);display:grid;place-items:center;padding:16px;animation:fade .2s ease}
@keyframes fade{from{opacity:0}}
.panel{width:min(720px,100%);max-height:calc(100vh - 32px);display:flex;flex-direction:column;background:var(--surface);border-radius:24px;overflow:hidden;box-shadow:0 30px 80px -20px rgba(0,0,0,.6)}
.panel-h{background:var(--noche);color:var(--clara);padding:18px 20px;display:flex;align-items:center;gap:12px}
.panel-h .who{flex:1;min-width:0}
.panel-h .who b{display:block;color:#fff;font-size:17px}
.panel-h .who span{color:var(--niebla);font-size:13px}
.state{font-size:12.5px;font-weight:600;color:var(--noche);background:var(--esm);border-radius:var(--pill);padding:5px 10px;white-space:nowrap}
.state.wait{background:var(--noche-3);color:var(--clara)}
.state.off{background:var(--coral)}
.timer{font-variant-numeric:tabular-nums;color:var(--niebla);font-size:13px}
.orb-wrap{display:grid;place-items:center;padding:30px 0 10px;background:linear-gradient(var(--noche),var(--surface))}
.orb{width:150px;height:150px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#7ff0c4,var(--esm) 45%,#0b6e4f 100%);box-shadow:0 0 0 0 rgba(60,207,150,.4);transition:transform .12s ease}
.orb.agent{animation:pulse 1.1s ease-in-out infinite}
.orb.user{background:radial-gradient(circle at 35% 30%,#ffc2b3,var(--coral) 50%,#c23a1e 100%)}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(60,207,150,.45)}50%{box-shadow:0 0 0 22px rgba(60,207,150,0)}}
.orb-cap{margin-top:14px;color:var(--muted);font-size:14px;min-height:21px}
.log{flex:1;overflow-y:auto;padding:16px 20px;display:flex;flex-direction:column;gap:8px;min-height:180px;background:var(--surface)}
.bub{max-width:80%;padding:10px 14px;border-radius:16px;font-size:15px;line-height:1.4;white-space:pre-wrap;word-wrap:break-word;animation:up .25s var(--ease) both}
.bub.bot{align-self:flex-start;background:var(--surface-2);border:1px solid var(--rule);border-bottom-left-radius:6px}
.bub.me{align-self:flex-end;background:var(--ok);color:#fff;border-bottom-right-radius:6px}
.bub.sys{align-self:center;background:none;color:var(--faint);font-size:13px;padding:2px}
.bub.typing{color:var(--muted)}
.bub.typing::after{content:"";display:inline-block;width:1.2em;text-align:left;animation:dots 1.2s steps(4) infinite}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
.panel-f{border-top:1px solid var(--rule);padding:14px 16px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:var(--surface)}
.panel-f form{display:flex;gap:8px;flex:1 1 320px}
.panel-f .opt{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted);margin:0;font-weight:400}
.panel-f .opt input{width:auto;height:auto}
.err{color:var(--bad);font-size:14px}

/* login */
.login{min-height:100vh;display:grid;grid-template-rows:auto 1fr}
.login .box{display:grid;place-items:center;padding:24px 16px}
.login .card{width:min(400px,100%);background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:28px}
.login .card p{color:var(--muted);margin:6px 0 4px}
.login button{width:100%;margin-top:20px}

@media (max-width:560px){
  .bar{height:60px}.brand-t span{display:none}
  .panel{max-height:calc(100vh - 16px)}
  .orb{width:110px;height:110px}
}
.speak{display:flex;align-items:center;gap:10px;color:var(--niebla);font-weight:400;font-size:14px;margin-top:18px}
.speak input{width:18px;height:18px;accent-color:var(--esm)}
.setup{padding:18px 20px;overflow-y:auto;flex:1}
.setup-lead{margin:0 0 6px;color:var(--muted);font-size:14px}
.vars{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.vars .wide{grid-column:1/-1}
.vars input{height:42px}
.setup-f{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-top:14px}
.ghost2{background:none;border:0;color:var(--ok);height:auto;padding:0;font-size:13.5px;text-decoration:underline;text-underline-offset:3px}
.speak2{display:flex;align-items:center;gap:8px;margin:0;font-weight:400;font-size:13.5px;color:var(--muted)}
.speak2 input{width:16px;height:16px;accent-color:var(--ok)}
.agent .tag{font-size:12.5px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.03em}
@media (max-width:560px){.vars{grid-template-columns:1fr}}