/* ============================================================
   SiloV · מקטעים שהוחזרו מהדף שבאוויר (3.9.2026):
   1. יומן השיחות החי (כרטיס ניתוח שיחה + אקורדיון תרחישים)
   2. מעגל המערכות (לוגואים שסובבים סביב ליבת Voice AI)
   הצבעים דרך אסימוני הערכה הבהירה. נטען אחרי theme-light.css.
   ============================================================ */
:root{
  --lav-600:#8B5CF6; --lav-700:#7C4DEE; --lav-800:#5B2FC9; --lav-900:#4A249F;
  --ink-2:#4A4566; --ink-3:#645E7D; --ease:cubic-bezier(.22,.7,.3,1);
}

/* ---------- 1. יומן השיחות החי ---------- */
.acc-card{
  background:#fff; border:1px solid var(--line); border-radius:24px; padding:28px; color:var(--ink);
  display:flex; flex-direction:row; gap:32px; align-items:stretch;
  box-shadow:0 16px 44px rgba(90,58,180,.09);
}
.acc-visual{
  flex:0 0 45%; background:linear-gradient(160deg,var(--lav-050) 0%,var(--lav-100) 100%); border-radius:18px;
  display:flex; align-items:center; justify-content:center; padding:26px; min-height:470px; order:1;
}
.flow-stage{position:relative; width:100%; display:flex; align-items:center; justify-content:center}
.flow{
  display:none; width:100%; max-width:400px; flex-direction:column;
  background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden;
  box-shadow:0 14px 36px rgba(90,58,180,.13);
}
.flow.on{display:flex}
.log-head{display:flex; align-items:center; gap:10px; padding:13px 16px; background:linear-gradient(120deg,var(--lav-900),var(--lav-800)); color:#fff}
.log-head .live{width:8px; height:8px; border-radius:50%; background:#6EE7A8; flex:0 0 auto; box-shadow:0 0 0 0 rgba(110,231,168,.7); animation:live-pulse 2s ease-out infinite}
@keyframes live-pulse{0%{box-shadow:0 0 0 0 rgba(110,231,168,.7)} 70%{box-shadow:0 0 0 8px rgba(110,231,168,0)} 100%{box-shadow:0 0 0 0 rgba(110,231,168,0)}}
.log-head b{font-size:13.5px; font-weight:500; flex:1}
.log-head .dur{font-size:12px; color:var(--lav-100); direction:ltr; font-variant-numeric:tabular-nums}
.wave{display:flex; align-items:flex-end; gap:1.5px; direction:ltr; height:42px; padding:16px 16px 0}
.wave i{flex:1; border-radius:2px; background:var(--lav-200); min-height:2px; height:calc(var(--h) * 100%); transform:scaleY(.05); transform-origin:bottom}
.flow.on .wave i{animation:wv .3s var(--ease) forwards; animation-delay:calc(var(--i) * 14ms)}
@keyframes wv{60%{transform:scaleY(1.14)} 100%{transform:scaleY(1)}}
.wave-axis{position:relative; direction:ltr; height:14px; margin:6px 16px 0; border-top:1px solid var(--lav-200)}
.wave-axis b{position:absolute; top:-5px; width:9px; height:9px; border-radius:50%; margin-left:-4.5px; background:var(--lav-600); border:2px solid #fff; transform:scale(0)}
.flow.on .wave-axis b{animation:mk .32s var(--ease) forwards; animation-delay:calc(.18s + var(--i) * .19s)}
@keyframes mk{60%{transform:scale(1.4)} 100%{transform:scale(1)}}
.tl{padding:3px 16px 11px}
.tl div{display:flex; gap:11px; padding:6.5px 0; font-size:12.6px; line-height:1.45; color:var(--ink); font-weight:400; opacity:0; transform:translateY(6px)}
.flow.on .tl div{animation:row-in .4s var(--ease) forwards; animation-delay:calc(.24s + var(--i) * .19s)}
@keyframes row-in{to{opacity:1; transform:none}}
.tl div span{flex:0 0 34px; font-size:11px; color:var(--ink-3); direction:ltr; text-align:left; font-variant-numeric:tabular-nums; padding-top:1px}
.an{display:flex; align-items:center; gap:14px; padding:13px 16px; border-top:1px solid var(--line)}
.an-bars{flex:1; min-width:0}
.an-row{display:flex; align-items:center; gap:8px; margin-bottom:9px; opacity:0}
.an-row:last-child{margin-bottom:0}
.flow.on .an-row{animation:fade-in .4s var(--ease) forwards; animation-delay:calc(1.18s + var(--i) * .13s)}
@keyframes fade-in{to{opacity:1}}
.an-row b{flex:0 0 68px; font-size:11.4px; font-weight:400; color:var(--ink-2)}
.an-bar{flex:1; height:5px; border-radius:3px; background:var(--lav-200); overflow:hidden}
.an-bar i{display:block; height:100%; width:0; border-radius:3px; background:linear-gradient(90deg,var(--lav),var(--lav-700))}
.flow.on .an-bar i{animation:bar .75s var(--ease) forwards; animation-delay:calc(1.22s + var(--i) * .13s)}
@keyframes bar{to{width:var(--w)}}
.an-row em{flex:0 0 17px; font-style:normal; font-size:11px; color:var(--lav-700); direction:ltr; text-align:left; font-variant-numeric:tabular-nums}
.ring{position:relative; flex:0 0 76px; height:76px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px}
.ring svg{position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg)}
.ring circle{fill:none; stroke-width:4; stroke-linecap:round}
.ring .rbg{stroke:var(--lav-100)}
.ring .rfg{stroke:var(--lav-700); stroke-dasharray:119.4; stroke-dashoffset:119.4; transition:stroke-dashoffset 1s var(--ease)}
.ring .count{font-size:21px; font-weight:600; color:var(--lav-800); line-height:1; min-width:0}
.ring small{font-size:8.6px; color:var(--ink-3); font-weight:400; letter-spacing:.02em}
.qt{position:relative; padding:12px 36px 13px 16px; border-top:1px solid var(--line); background:var(--lav-050); font-size:12.5px; line-height:1.6; color:var(--lav-800); font-weight:400; opacity:0; transform:translateY(6px)}
.flow.on .qt{animation:row-in .45s var(--ease) 1.72s forwards}
.qt::before{content:"\201D"; position:absolute; right:14px; top:10px; font-size:26px; line-height:1; color:var(--lav-200); font-family:Georgia,'Times New Roman',serif}
.log-foot{display:flex; align-items:center; gap:9px; padding:12px 16px; background:var(--lav-050); border-top:1px solid var(--line); font-size:12.8px; font-weight:500; color:var(--lav-800)}
.qt + .log-foot{border-top-color:rgba(124,77,238,.13)}
.log-foot .tick{
  width:18px; height:18px; border-radius:50%; flex:0 0 auto; background:var(--lav-700);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size:11px; background-position:center; background-repeat:no-repeat;
}
.log-foot .saved{margin-right:auto; font-weight:400; color:var(--ink-3); font-size:11.5px}
.flow-stage.hold .flow *{animation-play-state:paused}
.flow-stage.hold .flow .live{animation-play-state:running}

.acc-list{flex:1; display:flex; flex-direction:column; justify-content:center; gap:4px; order:2}
.acc-item{display:flex; gap:18px; align-items:flex-start; padding:15px 16px; cursor:pointer; border-radius:14px; transition:background .3s var(--ease)}
.acc-item:hover, .acc-item.open{background:var(--lav-050)}
.acc-icon{flex:0 0 62px; height:62px; border-radius:50%; border:1px solid var(--lav-200); background:#fff; display:flex; align-items:center; justify-content:center; transition:border-color .3s var(--ease), box-shadow .3s var(--ease)}
.acc-icon img{width:32px; height:32px}
.acc-body{flex:1; text-align:right}
.acc-body h3{font-size:16.5px; font-weight:600; line-height:1.32; color:var(--lav-700); margin-bottom:5px; letter-spacing:0}
.acc-body .acc-sub{font-size:14px; font-weight:500; color:var(--ink); line-height:1.45}
.acc-detail{max-height:0; overflow:hidden; transition:max-height .45s var(--ease)}
.acc-item.open .acc-detail{max-height:420px}
.acc-detail p{font-size:13.4px; line-height:21px; color:var(--ink-2); font-weight:400; margin:11px 0 12px}
.acc-impact{display:inline-block; background:var(--lav-100); color:var(--lav-800); font-size:12.5px; border-radius:8px; padding:9px 14px; line-height:1.35; font-weight:400}
.acc-item.open .acc-icon{border-color:var(--lav); box-shadow:0 0 0 4px rgba(167,139,250,.16)}
@media (max-width:900px){
  .acc-card{flex-direction:column; padding:18px; gap:18px}
  .acc-visual{flex:none; min-height:0; padding:18px}
  .acc-item{padding:12px 10px; gap:12px}
  .acc-icon{flex:0 0 48px; height:48px} .acc-icon img{width:26px; height:26px}
}

/* ---------- 2. מעגל המערכות ---------- */
.orbit-wrap{display:flex; justify-content:center; padding:34px 0 10px; overflow:hidden; overflow:clip}
.orbit{
  --r-in:clamp(84px,20.5vw,166px); --r-out:clamp(134px,33vw,268px);
  --n-in:clamp(42px,9.4vw,66px); --n-out:clamp(36px,8vw,56px); --core:clamp(96px,21vw,164px);
  position:relative; width:calc(var(--r-out)*2 + var(--n-out) + 40px); height:calc(var(--r-out)*2 + var(--n-out) + 40px); max-width:100%;
}
.orbit-track{position:absolute; top:50%; left:50%; border-radius:50%; border:1px dashed var(--lav-200); pointer-events:none}
.o-in{width:calc(var(--r-in)*2); height:calc(var(--r-in)*2); margin:calc(var(--r-in)*-1) 0 0 calc(var(--r-in)*-1)}
.o-out{width:calc(var(--r-out)*2); height:calc(var(--r-out)*2); margin:calc(var(--r-out)*-1) 0 0 calc(var(--r-out)*-1)}
.orbit-core{
  position:absolute; top:50%; left:50%; width:var(--core); height:var(--core); margin:calc(var(--core)/-2) 0 0 calc(var(--core)/-2);
  border-radius:clamp(16px,4vw,22px); background:linear-gradient(145deg,var(--lav-900),var(--lav-800) 60%,var(--lav-700));
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  box-shadow:0 18px 40px rgba(100,56,214,.34), inset 0 1px 0 rgba(255,255,255,.35); z-index:3;
}
.orbit-core::before{content:""; position:absolute; inset:9px; border-radius:12px; border:1px solid rgba(255,255,255,.26)}
.die-label{color:#fff; font-size:clamp(15px,3.4vw,23px); font-weight:600; letter-spacing:.01em; direction:ltr}
.die-sub{color:#fff; font-size:clamp(10px,2.1vw,12.5px); font-weight:400; text-align:center}
.orbit-pulse{
  position:absolute; top:50%; left:50%; width:var(--core); height:var(--core); margin:calc(var(--core)/-2) 0 0 calc(var(--core)/-2);
  border-radius:50%; border:1.5px solid var(--lav); opacity:0; z-index:1; pointer-events:none; animation:orbWave 5.4s var(--ease) infinite;
}
.orbit-pulse.p2{animation-delay:1.8s} .orbit-pulse.p3{animation-delay:3.6s}
@keyframes orbWave{0%{transform:scale(.86); opacity:0} 14%{opacity:.42} 100%{transform:scale(2.35); opacity:0}}
.orbit-ring{position:absolute; inset:0; z-index:2; pointer-events:none}
.ring-in{animation:orbCW 62s linear infinite} .ring-in .ospin{animation:orbCCW 62s linear infinite}
.ring-out{animation:orbCCW 84s linear infinite} .ring-out .ospin{animation:orbCW 84s linear infinite}
.orbit-wrap.off *{animation-play-state:paused !important}
@keyframes orbCW{to{transform:rotate(360deg)}} @keyframes orbCCW{to{transform:rotate(-360deg)}}
.onode{position:absolute; top:50%; left:50%; width:var(--n); height:var(--n); margin:calc(var(--n)/-2) 0 0 calc(var(--n)/-2); transform:rotate(var(--a)) translateY(calc(var(--r)*-1)) rotate(calc(var(--a)*-1))}
.ring-in .onode{--n:var(--n-in); --r:var(--r-in)} .ring-out .onode{--n:var(--n-out); --r:var(--r-out)}
.ospin{width:100%; height:100%; position:relative}
.olg{position:absolute; inset:0; border-radius:50%; background:#fff; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(91,47,201,.13); transition:transform .25s var(--ease), box-shadow .25s var(--ease); cursor:default; pointer-events:auto}
.olg img{width:56%; height:56%; object-fit:contain; pointer-events:none}
.olg .oname{position:absolute; inset-inline:0; top:calc(100% + 6px); text-align:center; font-size:11px; color:var(--ink-3); white-space:nowrap; opacity:0; transition:opacity .2s}
.olg:hover .oname{opacity:1}
.olg::after{content:""; position:absolute; inset:-1px; border-radius:50%; border:2px solid var(--lav); opacity:0; pointer-events:none; animation:orbNode 6.4s var(--ease) infinite; animation-delay:var(--d,0s)}
@keyframes orbNode{0%{transform:scale(1); opacity:0} 5%{transform:scale(1); opacity:.6} 24%,100%{transform:scale(1.55); opacity:0}}
.orbit:hover .orbit-ring, .orbit:hover .ospin, .orbit:hover .olg::after{animation-play-state:paused}
.olg:hover{transform:scale(1.14); box-shadow:0 14px 30px rgba(91,47,201,.26), 0 0 0 8px rgba(167,139,250,.22)}
.orbit-note{text-align:center; color:var(--dim); margin:18px auto 0; max-width:56ch}
.infra-row{display:grid; grid-template-columns:repeat(4,1fr); gap:26px 30px; margin-top:44px}
.infra-item{position:relative; padding-inline-start:17px}
.infra-item::before{content:""; position:absolute; inset-inline-start:0; top:5px; bottom:5px; width:3px; border-radius:3px; background:linear-gradient(180deg,var(--lav),var(--lav-200))}
.infra-item h3{font-size:1.03rem; font-weight:600; line-height:1.35; color:var(--lav-700); margin-bottom:8px; letter-spacing:0}
.infra-item p{font-size:.9rem; line-height:1.6; color:var(--ink-2)}
@media (max-width:900px){ .infra-row{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .infra-row{grid-template-columns:1fr} }

@media (prefers-reduced-motion:reduce){
  .wave i, .wave-axis b, .tl div, .an-row, .an-bar i, .qt{opacity:1 !important; transform:none !important; animation:none !important}
  .an-bar i{width:var(--w) !important}
  .log-head .live{animation:none} .ring .rfg{transition:none}
  .orbit-ring, .ospin, .olg::after, .orbit-pulse{animation:none !important}
}