/* Hands-on demos and the "Összeköthető" strip. Loaded only on pages that show them. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.demo-panel{min-height:380px;color:var(--szoveg)}
.demo-panel button{font:inherit;cursor:pointer}
.demo-fej{max-width:760px;margin-bottom:28px}
.demo-fej p{color:var(--halvany);font-size:1.08rem}

/* Compact block with tabs */
.demo-fulsor{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 18px}
.demo-fulsor button{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#DADEE3;font:600 .95rem var(--sans);cursor:pointer;transition:background .2s,color .2s}
.demo-fulsor button svg{width:18px;height:18px}
.demo-fulsor button[aria-selected=true]{background:var(--menta);border-color:var(--menta);color:var(--petrol)}
.demo-lap{background:var(--papir);border-radius:var(--r-lg);padding:22px;box-shadow:0 30px 80px rgba(0,0,0,.25)}
.demo-lap-cim{margin:0 0 16px;color:var(--halvany);font-size:.98rem}
.demo-lap-cim b{color:var(--petrol)}
.demo-tovabb{display:flex;gap:12px;flex-wrap:wrap;margin:24px 0 0}
@media (max-width:560px){.demo-lap{padding:14px;border-radius:20px}.demo-fulsor{flex-wrap:nowrap;overflow-x:auto;margin-left:-4px;padding:0 4px 4px;scrollbar-width:none}.demo-fulsor button{flex:0 0 auto;padding:9px 13px}}

/* 1. Chat */
.dc{background:#fff;border:1px solid var(--vonal);border-radius:var(--r);display:flex;flex-direction:column;max-width:720px;margin:0 auto;overflow:hidden;box-shadow:var(--arnyek)}
.dc-fej{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--petrol);color:#fff}
.dc-fej img{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid var(--menta)}
.dc-fej div{flex:1;min-width:0}.dc-fej b{display:block;line-height:1.2}.dc-fej small{color:#B3B9C2;font-size:.8rem}
.dc-uj{flex:none;font:600 .8rem var(--sans);background:transparent;border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:999px;padding:6px 12px;font-size:.82rem}
.dc-lista{height:320px;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:linear-gradient(180deg,#F8F9FA,#fff);overscroll-behavior:contain}
.dc-b{max-width:84%;padding:10px 14px;border-radius:16px;font-size:.95rem;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
.dc-b--ai{background:var(--menta-soft);color:var(--petrol);border-bottom-left-radius:4px;align-self:flex-start}
.dc-b--p{background:var(--petrol);color:#fff;border-bottom-right-radius:4px;align-self:flex-end}
.dc-hiba{background:#FFE9E2;color:#8A2F17}
.dc-gepel{display:flex;gap:4px;padding:14px}.dc-gepel i{width:7px;height:7px;border-radius:50%;background:var(--menta);animation:dcpont 1s infinite}
.dc-gepel i:nth-child(2){animation-delay:.15s}.dc-gepel i:nth-child(3){animation-delay:.3s}
@keyframes dcpont{0%,80%,100%{opacity:.3;transform:none}40%{opacity:1;transform:translateY(-3px)}}
.dc-foglalas{align-self:stretch;border:2px solid var(--menta);border-radius:14px;padding:12px 14px;display:grid;gap:2px;background:#fff;font-size:.92rem;animation:dkbe .5s}
.dc-foglalas b{color:#B8430A;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em}
.dc-foglalas button{justify-self:start;margin-top:8px;background:var(--petrol);color:#fff;border:0;border-radius:999px;padding:7px 14px;font-size:.88rem}
.dc-megj{margin:0;padding:8px 16px 0;font-size:.8rem;color:var(--halvany)}
.dc-chipek{display:flex;gap:6px;flex-wrap:wrap;padding:8px 16px 0}
.dc-chipek button{text-align:left;font-family:var(--sans);border:1px solid var(--vonal);background:#fff;border-radius:999px;padding:6px 12px;font-size:.85rem;color:var(--petrol)}
.dc-chipek button:hover{border-color:var(--menta)}
.dc-urlap{display:flex;gap:8px;padding:12px 16px 16px}
.dc-urlap input{flex:1;min-width:0;border:1px solid var(--vonal);border-radius:999px;padding:11px 16px;font:16px var(--sans);color:var(--szoveg)}
.dc-urlap input:focus{outline:2px solid var(--menta);outline-offset:1px}
.dc-urlap button{border:0;background:var(--korall);color:#fff;border-radius:999px;padding:0 18px;font-weight:700}
.dc-urlap button:disabled{opacity:.5}
@media (max-width:560px){.dc-lista{height:300px;padding:12px}.dc-b{max-width:90%}.dc-fej small{display:none}.dc-fej{gap:10px;padding:12px}.dc-fej b{font-size:.95rem}}

/* 2. Receptionist */
.dr{display:grid;grid-template-columns:1.15fr .85fr;gap:20px;align-items:start}
.dr-hivas{background:var(--petrol);color:#DADEE3;border-radius:var(--r);padding:20px;box-shadow:var(--arnyek)}
.dr-fej{display:flex;align-items:center;gap:12px}
.dr-fej img{width:48px;height:48px;border-radius:50%;object-fit:cover;border:2px solid var(--menta)}
.dr-fej div{flex:1;min-width:0}.dr-fej b{color:#fff;display:block}.dr-fej small{color:#B3B9C2}
.dr-ido{font-variant-numeric:tabular-nums;color:var(--menta-2);font-weight:700}
.dr-hullam{display:flex;align-items:center;gap:3px;height:36px;margin:14px 0}
.dr-hullam i{flex:1;height:4px;border-radius:2px;background:rgba(255,154,92,.35);transition:height .2s}
.dr-el .dr-hullam i{animation:drhullam 1.1s ease-in-out infinite}
.dr-beszel .dr-hullam i{background:var(--menta-2)}
.dr-hullam i:nth-child(3n){animation-delay:.2s}.dr-hullam i:nth-child(4n){animation-delay:.45s}.dr-hullam i:nth-child(5n){animation-delay:.7s}
@keyframes drhullam{0%,100%{height:4px}50%{height:30px}}
.dr-valaszto{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.dr-valaszto button{border:1px solid rgba(255,255,255,.2);background:transparent;color:#DADEE3;border-radius:999px;padding:6px 12px;font-size:.85rem}
.dr-valaszto button[aria-pressed=true]{background:rgba(255,106,26,.2);border-color:var(--menta);color:#fff}
.dr-sorok{display:flex;flex-direction:column;gap:8px;min-height:280px}
.dr-b{max-width:88%;padding:9px 13px;border-radius:14px;font-size:.93rem;line-height:1.45;opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s}
.dr-b.lat{opacity:1;transform:none}
.dr-b small{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;opacity:.7}
.dr-b--ai{background:rgba(255,106,26,.16);color:#FFF1E8;border-bottom-left-radius:4px}
.dr-b--p{background:#fff;color:var(--petrol);align-self:flex-end;border-bottom-right-radius:4px}
.dr-esemeny{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:6px}
.dr-esemeny li{background:rgba(255,255,255,.06);border-left:3px solid var(--menta);border-radius:8px;padding:7px 10px;font-size:.88rem;animation:dkbe .4s}
.dr-ujra{margin-top:14px;color:#fff;border-color:rgba(255,255,255,.3)}
.dr-oldal{display:grid;gap:16px}
.dr-kartya{background:#fff;border:1px solid var(--vonal);border-radius:var(--r);padding:20px;box-shadow:var(--arnyek)}
.dr-kartya h3{font-size:1.15rem;margin-bottom:6px}.dr-kartya p{color:var(--halvany);font-size:.93rem}
.dr-urlap label{display:grid;gap:4px;font-size:.88rem;font-weight:600;margin-bottom:10px;color:var(--petrol)}
.dr-urlap input:not([type=checkbox]){border:1px solid var(--vonal);border-radius:10px;padding:10px 12px;font:16px var(--sans);width:100%}
.dr-urlap .dr-pipa{display:flex;gap:8px;align-items:flex-start;font-weight:400}
.dr-urlap .dr-pipa input{margin-top:5px}
.dr-mez{position:absolute;left:-9999px;width:1px;height:1px}
.dr-uzenet{margin:10px 0 0;font-size:.9rem;min-height:1.2em}
.dr-uzenet.ok{color:#B8430A}.dr-uzenet.hiba{color:#B23A1C}
@media (max-width:900px){.dr{grid-template-columns:1fr}}

/* 3. CRM */
.dk{position:relative}
.dk-fej{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.dk-cimke{background:#FFF1EC;color:#A3401F;border-radius:999px;padding:4px 12px;font-size:.8rem;font-weight:700}
.dk-tipp{color:var(--halvany);font-size:.88rem;flex:1}
.dk-vissza{border:1px solid var(--vonal);background:#fff;border-radius:999px;padding:6px 12px;font-size:.85rem;color:var(--petrol)}
.dk-tabla{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.dk-osz{background:#ECEEF1;border-radius:16px;padding:10px;min-height:260px;transition:background .2s,box-shadow .2s}
.dk-osz.dk-cel{background:var(--menta-soft);box-shadow:inset 0 0 0 2px var(--menta)}
.dk-osz h3{font:700 .88rem var(--sans);color:var(--petrol);margin:4px 4px 10px;display:flex;justify-content:space-between}
.dk-db{background:#fff;border-radius:999px;padding:0 8px;font-size:.78rem}
.dk-kartyak{display:grid;gap:8px}
.dk-k{position:relative;text-align:left;background:#fff;border:1px solid var(--vonal);border-radius:12px;padding:10px 12px 10px 26px;display:grid;gap:1px;color:var(--szoveg);font-size:.86rem;box-shadow:0 1px 2px rgba(22,24,29,.06);cursor:grab;user-select:none;-webkit-user-select:none;transition:box-shadow .2s,transform .2s}
.dk-k:hover{box-shadow:0 6px 18px rgba(22,24,29,.12)}
.dk-k b{color:var(--petrol);font-size:.93rem}
.dk-k small{color:#B8430A;font-weight:700}
.dk-k em{font-style:normal;color:var(--halvany);font-size:.76rem}
.dk-fogo{position:absolute;left:6px;top:50%;width:12px;height:22px;margin-top:-11px;touch-action:none;background:radial-gradient(circle,#A8AEB8 1.5px,transparent 2px) 0 0/6px 6px;cursor:grab}
.dk-k--huz{opacity:.35}
.dk-k--uj{border-color:var(--korall);box-shadow:0 0 0 3px rgba(255,106,26,.25);animation:dkbe .6s}
.dk-szellem{position:fixed;left:0;top:0;z-index:200;pointer-events:none;box-shadow:0 18px 40px rgba(22,24,29,.25);opacity:.95}
.dk-ures{color:var(--halvany);font-size:.8rem;text-align:center;border:1px dashed #C9CDD3;border-radius:12px;padding:16px 8px;margin:0}
.dk--friss .dk-cimke::after{content:" · új kártya érkezett";color:var(--korall)}
.dk-reszlet{position:absolute;right:0;top:44px;width:min(340px,100%);background:#fff;border:1px solid var(--vonal);border-radius:var(--r);padding:18px;box-shadow:0 30px 70px rgba(22,24,29,.25);z-index:5;animation:dkbe .3s}
.dk-r-fej{display:flex;justify-content:space-between;gap:8px;margin-bottom:10px}
.dk-r-fej b{display:block;font-family:var(--serif);font-size:1.25rem;color:var(--petrol)}.dk-r-fej small{color:var(--halvany)}
.dk-bezar{border:0;background:#ECEEF1;border-radius:50%;width:34px;height:34px;font-size:1.2rem;line-height:1;color:var(--petrol)}
.dk-reszlet dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:.9rem;margin:0 0 12px}
.dk-reszlet dt{color:var(--halvany)}.dk-reszlet dd{margin:0;font-weight:600}
.dk-reszlet label{display:grid;gap:4px;font-size:.85rem;font-weight:600;color:var(--petrol)}
.dk-reszlet select{border:1px solid var(--vonal);border-radius:10px;padding:8px 10px;font:16px var(--sans)}
.dk-r-gombok{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0}
.dk-r-gombok button{border:1px solid var(--menta);background:var(--menta-soft);color:var(--petrol);border-radius:999px;padding:6px 12px;font-size:.84rem}
.dk-reszlet h4{margin:6px 0 4px;font-size:.85rem;color:var(--halvany)}
.dk-reszlet ol{margin:0;padding-left:18px;font-size:.85rem;display:grid;gap:3px}
@keyframes dkbe{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (max-width:900px){.dk-tabla{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){
  .dk-tabla{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;padding-bottom:6px;margin:0 -4px;padding-left:4px;padding-right:4px}
  .dk-osz{flex:0 0 78%;scroll-snap-align:start;min-height:220px}
  .dk-tipp{flex-basis:100%;order:3}
  .dk-reszlet{position:fixed;left:12px;right:12px;bottom:12px;top:auto;width:auto;max-height:75vh;overflow:auto;z-index:150}
}

/* 4. Automation */
.da{display:grid;grid-template-columns:1fr 300px;gap:24px;align-items:start}
.da-vezerlo{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.da-ag{display:inline-flex;background:#ECEEF1;border-radius:999px;padding:4px}
.da-ag button{border:0;background:transparent;border-radius:999px;padding:8px 14px;font-weight:600;color:var(--halvany)}
.da-ag button[aria-checked=true]{background:#fff;color:var(--petrol);box-shadow:0 1px 4px rgba(22,24,29,.12)}
.da-lepesek{list-style:none;margin:0;padding:0 0 0 18px;border-left:2px solid var(--vonal);display:grid;gap:8px}
.da-lepesek li{position:relative}
.da-lepesek li::before{content:"";position:absolute;left:-26px;top:16px;width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid var(--vonal);transition:background .3s,border-color .3s}
.da-lepesek li.kesz::before{background:var(--menta);border-color:var(--menta)}
.da-lepesek li.akt::before{background:var(--korall);border-color:var(--korall);box-shadow:0 0 0 5px rgba(255,106,26,.2)}
.da-lepesek button{width:100%;text-align:left;background:#fff;border:1px solid var(--vonal);border-radius:12px;padding:10px 14px;display:grid;grid-template-columns:1fr auto;gap:0 10px;color:var(--szoveg)}
.da-lepesek li.akt button{border-color:var(--korall)}
.da-ido{grid-column:1/-1;font-size:.76rem;color:var(--halvany);text-transform:uppercase;letter-spacing:.05em}
.da-lepesek b{color:var(--petrol)}
.da-csat{font-size:.78rem;background:var(--menta-soft);color:var(--petrol);border-radius:999px;padding:1px 8px;align-self:center}
.da-osszeg{margin:14px 0 0;font-weight:700;color:var(--petrol);min-height:1.4em}
.da-telefon{background:var(--petrol);border-radius:36px;padding:12px;box-shadow:0 30px 60px rgba(22,24,29,.25)}
.da-kijelzo{background:#F3F4F6;border-radius:26px;overflow:hidden;height:420px;display:flex;flex-direction:column}
.da-sav{background:#fff;padding:14px 16px 10px;text-align:center;border-bottom:1px solid var(--vonal)}
.da-sav b{display:block;color:var(--petrol);font-size:.95rem}.da-sav small{color:var(--halvany);font-size:.75rem}
.da-uzenetek{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:10px}
.da-ures{color:var(--halvany);font-size:.88rem;text-align:center;margin:auto 0}
.da-m{background:#fff;border-radius:16px 16px 16px 4px;padding:10px 12px;font-size:.86rem;line-height:1.45;box-shadow:0 1px 2px rgba(22,24,29,.08);opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s}
.da-m.lat{opacity:1;transform:none}
.da-m small{display:block;color:#B8430A;font-weight:700;font-size:.72rem;margin-bottom:2px}
.da-m--mail{border-left:3px solid var(--petrol)}
.da-m--crm{background:#FFF1EC}.da-m--crm small{color:#A3401F}
@media (max-width:900px){.da{grid-template-columns:1fr}.da-telefon{max-width:340px;margin:0 auto;width:100%}.da-kijelzo{height:360px}}

/* "Összeköthető" strip: name chips, no logos */
.integracio{padding:44px 0;background:#fff;border-top:1px solid var(--vonal);border-bottom:1px solid var(--vonal);overflow:hidden}
.integracio-fej{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;margin-bottom:18px}
.integracio-cim{font:800 .82rem var(--sans);text-transform:uppercase;letter-spacing:.12em;color:var(--menta);margin:0}
.integracio-fej p{margin:0;color:var(--halvany);font-size:.92rem;flex:1;min-width:240px}
.integracio-sav{display:flex;width:max-content;animation:intsav 48s linear infinite}
.integracio-sav:hover{animation-play-state:paused}
.integracio-lista{display:flex;gap:10px;list-style:none;margin:0;padding:0 10px 0 0}
.integracio-lista li{white-space:nowrap;border:1px solid var(--vonal);border-radius:999px;padding:8px 16px;font-weight:700;color:var(--petrol);background:var(--papir);font-size:.92rem}
.integracio--sotet{background:var(--petrol);border-color:transparent}
.integracio--sotet .integracio-lista li{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#FFF1E8}
.integracio--sotet .integracio-fej p{color:#B3B9C2}
@keyframes intsav{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.integracio-sav{animation:none;width:auto}.integracio-lista{flex-wrap:wrap;padding:0 20px}.integracio-lista[aria-hidden=true]{display:none}}
/* Plate number chip on CRM cards (synthetic data) */
.dk-rsz{justify-self:start;font-style:normal;font:700 .74rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;color:#16181D;background:#fff;border:1.5px solid #16181D;border-left:7px solid #1F4FB3;border-radius:4px;padding:3px 6px 3px 5px;margin:2px 0}
.dk-reszlet .dk-ures{margin:0 0 8px}