/* Ulgio demo-spektakl F1 — sekcja #demo (tor C). Dokladany do /style.css, nic w nim nie zmienia. */
#demo{background:linear-gradient(135deg,#2F1C6A 0%,#673DE6 100%);color:#fff;padding:72px 24px;}
#demo{scroll-margin-top:84px;}
#demo [hidden]{display:none !important;}
@media (max-width:640px){#demo{padding:48px 18px;}}
#demo .demo-wrap{max-width:var(--max-w,1180px);margin:0 auto;}
#demo .demo-head{text-align:center;max-width:820px;margin:0 auto 28px;}
#demo .demo-eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.16);color:#fff;font-weight:600;font-size:14px;padding:8px 16px;border-radius:999px;margin-bottom:18px;}
#demo .demo-eyebrow .demo-pulse{width:9px;height:9px;border-radius:50%;background:#7CFFB2;box-shadow:0 0 0 0 rgba(124,255,178,.7);animation:demoPulse 2s infinite;}
#demo h2{color:#fff;font-size:clamp(28px,4vw,44px);font-weight:800;letter-spacing:-.03em;line-height:1.15;}
#demo .demo-sub{color:rgba(255,255,255,.88);font-size:19px;margin-top:14px;}
#demo .demo-actions{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:26px;}
#demo .demo-cta{min-height:68px;padding:20px 40px;border-radius:16px;border:none;background:#fff;color:#2F1C6A;font-size:clamp(18px,2.4vw,24px);font-weight:800;letter-spacing:-.01em;cursor:pointer;box-shadow:0 12px 34px rgba(0,0,0,.28);transition:transform .18s ease,box-shadow .18s ease;max-width:100%;}
#demo .demo-cta:hover:not([disabled]){transform:translateY(-2px);box-shadow:0 16px 40px rgba(0,0,0,.34);}
#demo .demo-cta:focus-visible{outline:3px solid #7CFFB2;outline-offset:3px;}
#demo .demo-cta[disabled]{opacity:.65;cursor:progress;}
#demo[data-stage="live"] .demo-cta{background:#FF5C6C;color:#fff;}
#demo[data-stage="live"] .demo-consent,#demo[data-stage="live"] .demo-note,#demo[data-stage="ended"] .demo-consent,#demo[data-stage="ended"] .demo-note{display:none;}
#demo .demo-consent{display:flex;align-items:flex-start;gap:10px;max-width:640px;font-size:14px;color:rgba(255,255,255,.9);text-align:left;line-height:1.5;}
#demo .demo-consent input{width:20px;height:20px;margin:2px 0 0;flex:0 0 auto;accent-color:#7CFFB2;cursor:pointer;}
#demo .demo-consent a{text-decoration:underline;}
#demo .demo-note{font-size:14px;color:rgba(255,255,255,.72);}
#demo .demo-alert{background:#FFE9EC;color:#8A1020;border-radius:12px;padding:12px 16px;font-size:15px;font-weight:600;max-width:640px;}
#demo .demo-live{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:30px;align-items:start;}
@media (max-width:900px){#demo .demo-live{grid-template-columns:1fr;}}
#demo .demo-card{background:#fff;color:var(--text,#1D1E20);border-radius:20px;padding:20px 22px;box-shadow:0 12px 34px rgba(20,10,60,.28);}
#demo .demo-card h3{font-size:17px;font-weight:800;color:var(--primary-dark,#2F1C6A);margin-bottom:6px;}
#demo .demo-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--border,#EDEDF2);padding-bottom:12px;margin-bottom:12px;}
#demo .demo-statusline{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--text-secondary,#55575D);}
#demo .demo-dot{width:10px;height:10px;border-radius:50%;background:#C9CAD1;flex:0 0 auto;}
#demo .demo-dot.connecting{background:#F5A623;animation:demoPulse 1.6s infinite;}
#demo .demo-dot.speaking{background:#673DE6;animation:demoPulse 1.2s infinite;}
#demo .demo-dot.listening{background:#23B26D;animation:demoPulse 2s infinite;}
#demo .demo-dot.ended{background:#C9CAD1;}
#demo .demo-timer{font-variant-numeric:tabular-nums;font-weight:700;color:var(--primary-dark,#2F1C6A);}
#demo .demo-timer-label{font-size:13px;color:var(--text-secondary,#55575D);font-weight:600;margin-right:6px;}
#demo .demo-transcript{height:360px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding-right:6px;}
@media (max-width:900px){#demo .demo-transcript{height:260px;}}
#demo .demo-msg{max-width:88%;border-radius:14px;padding:10px 14px;font-size:15px;line-height:1.5;}
#demo .demo-msg-ai{background:var(--primary-tint,#F2EFFB);align-self:flex-start;border-bottom-left-radius:4px;}
#demo .demo-msg-user{background:#F1F3F7;align-self:flex-end;border-bottom-right-radius:4px;}
#demo .demo-msg-who{display:block;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-secondary,#55575D);margin-bottom:2px;}
#demo .demo-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:9px 0;border-bottom:1px solid var(--border,#EDEDF2);}
#demo .demo-row:last-child{border-bottom:none;}
#demo .demo-label{font-size:13px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--text-secondary,#55575D);flex:0 0 auto;}
#demo .demo-val{font-size:16px;font-weight:600;text-align:right;overflow-wrap:anywhere;}
#demo .demo-val.is-empty{color:#C6C7D0;font-weight:500;letter-spacing:.12em;}
#demo .demo-block{padding:12px 0;border-bottom:1px solid var(--border,#EDEDF2);}
#demo .demo-block:last-of-type{border-bottom:none;}
#demo .demo-block .demo-label{display:block;margin-bottom:8px;}
#demo .demo-needs{display:flex;flex-direction:column;gap:8px;}
#demo .demo-need{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#F7F6FD;border-radius:10px;padding:9px 12px;font-size:15px;font-weight:600;}
#demo .demo-empty{color:#C6C7D0;letter-spacing:.12em;}
#demo .demo-tag{background:var(--primary,#673DE6);color:#fff;font-size:12px;font-weight:700;border-radius:999px;padding:3px 10px;white-space:nowrap;}
#demo table.demo-quote{width:100%;border-collapse:collapse;font-size:15px;}
#demo table.demo-quote td{padding:7px 0;border-bottom:1px dashed var(--border,#EDEDF2);}
#demo table.demo-quote td.demo-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600;}
#demo .demo-total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:10px;font-size:18px;font-weight:800;color:var(--primary-dark,#2F1C6A);}
#demo .demo-foot{font-size:12px;color:var(--text-secondary,#55575D);margin-top:6px;line-height:1.45;}
#demo .demo-end{margin-top:24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;}
#demo .demo-end-note{color:rgba(255,255,255,.9);font-size:17px;max-width:620px;}
#demo .demo-end-ctas{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;}
#demo .demo-btn-white{background:#fff;color:#2F1C6A;border:none;border-radius:12px;padding:15px 26px;font-weight:700;font-size:16px;cursor:pointer;}
#demo .demo-btn-outline{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.6);border-radius:12px;padding:15px 26px;font-weight:700;font-size:16px;cursor:pointer;}
#demo .demo-btn-white:hover,#demo .demo-btn-outline:hover{transform:translateY(-2px);}
#demo .is-flash{animation:demoFlash 1.2s ease-out;}
@keyframes demoFlash{0%{background:#DFF7E8;box-shadow:inset 0 0 0 2px #23B26D;}100%{background:transparent;box-shadow:inset 0 0 0 0 rgba(35,178,109,0);}}
@keyframes demoPulse{0%{box-shadow:0 0 0 0 rgba(124,255,178,.6);}70%{box-shadow:0 0 0 10px rgba(124,255,178,0);}100%{box-shadow:0 0 0 0 rgba(124,255,178,0);}}
@media (prefers-reduced-motion:reduce){#demo .is-flash,#demo .demo-dot,#demo .demo-pulse{animation:none;}}