/* ============================================================
   Orbital Galaxy Hero — דף הבית
   ממודר תחת .ohero כדי לא להתנגש עם main.css
   כל ה-JS חיצוני (assets/js/hero-orbital.js) — תואם CSP
   ============================================================ */
.ohero{position:relative;min-height:100vh;display:flex;align-items:center;padding:7rem 0 4rem;overflow:hidden;
  background:radial-gradient(120% 85% at 50% 40%,rgba(99,102,241,.07),transparent 60%)}
.ohero #ohero-galaxy{position:absolute;inset:0;z-index:0;pointer-events:none}
/* readability veil — מכהה את צד הטקסט כדי שהמלל יישאר ברור מעל הגלקסיה */
.ohero .o-veil{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(to left,rgba(5,8,16,.9),rgba(5,8,16,.5) 42%,transparent 72%),
  linear-gradient(to bottom,transparent 55%,rgba(5,8,16,.55))}
.ohero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:
  radial-gradient(45% 95% at 0% 50%,rgba(56,189,248,.16),transparent 70%),
  radial-gradient(45% 95% at 100% 50%,rgba(168,85,247,.15),transparent 70%)}
.ohero .o-glow{position:absolute;border-radius:50%;filter:blur(120px);pointer-events:none;z-index:0}
.ohero .o-glow.a{width:620px;height:620px;background:rgba(99,102,241,.24);top:-120px;inset-inline-start:-120px}
.ohero .o-glow.b{width:540px;height:540px;background:rgba(56,189,248,.16);bottom:-160px;inset-inline-end:-90px}
.ohero .o-wrap{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:0 1.5rem;width:100%;
  display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center}

/* ===== טקסט ===== */
.ohero .o-copy{animation:oh-up .8s cubic-bezier(.2,.8,.2,1) both}
@keyframes oh-up{from{opacity:0;transform:translateY(24px)}}
.ohero .o-badge{display:inline-flex;align-items:center;gap:.5rem;font-size:.82rem;font-weight:500;color:#a5b4fc;
  background:rgba(99,102,241,.1);border:1px solid rgba(99,102,241,.3);padding:.45rem 1rem;border-radius:99px;margin-bottom:1.5rem}
.ohero .o-badge .d{width:7px;height:7px;border-radius:50%;background:#38bdf8;box-shadow:0 0 10px #38bdf8}
.ohero h1{font-size:clamp(2.2rem,4.4vw,3.5rem);font-weight:700;line-height:1.12;letter-spacing:-.02em;color:#f1f5fb;text-shadow:0 2px 18px rgba(0,0,0,.75);margin:0}
.ohero h1 .grad{background:linear-gradient(90deg,#38bdf8,#6366f1,#a855f7);-webkit-background-clip:text;background-clip:text;color:transparent}
.ohero .o-sub{color:#cbd5e1;font-size:clamp(1rem,1.4vw,1.18rem);font-weight:300;max-width:34rem;margin:1.4rem 0 2rem;line-height:1.85;text-shadow:0 1px 12px rgba(0,0,0,.7)}
.ohero .o-ctas{display:flex;gap:.9rem;flex-wrap:wrap}
.ohero .o-btn{font-family:inherit;font-size:1rem;font-weight:500;padding:.85rem 1.8rem;border-radius:99px;cursor:pointer;border:none;transition:transform .25s,box-shadow .25s;text-decoration:none;display:inline-flex;align-items:center;gap:.5rem}
.ohero .o-btn-p{background:linear-gradient(90deg,#38bdf8,#6366f1);color:#fff;box-shadow:0 10px 30px rgba(99,102,241,.4)}
.ohero .o-btn-p:hover{transform:translateY(-3px);box-shadow:0 16px 44px rgba(99,102,241,.55)}
.ohero .o-btn-g{background:rgba(255,255,255,.04);color:#f1f5fb;border:1px solid rgba(255,255,255,.12)}
.ohero .o-btn-g:hover{background:rgba(255,255,255,.08)}

/* ===== אורביטלי ===== */
.ohero .orbital{position:relative;width:100%;aspect-ratio:1/1;max-width:560px;margin:0 auto;animation:oh-up 1s .15s cubic-bezier(.2,.8,.2,1) both}
.ohero .core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:74px;height:74px;border-radius:50%;z-index:20;
  background:linear-gradient(135deg,#a855f7,#6366f1,#22d3ee);display:flex;align-items:center;justify-content:center;animation:oh-cpulse 3s infinite}
@keyframes oh-cpulse{50%{opacity:.75}}
.ohero .core .dot{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.85)}
.ohero .ping{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;border:1.5px solid rgba(255,255,255,.22);z-index:19}
.ohero .ping.p1{width:96px;height:96px;animation:oh-ping 3s infinite}
.ohero .ping.p2{width:120px;height:120px;animation:oh-ping 3s 1s infinite}
@keyframes oh-ping{0%{transform:translate(-50%,-50%) scale(.7);opacity:.8}80%,100%{transform:translate(-50%,-50%) scale(1.9);opacity:0}}
.ohero .orbit-ring{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(255,255,255,.1)}
.ohero .node{position:absolute;left:50%;top:50%;display:flex;flex-direction:column;align-items:center;gap:.4rem;cursor:pointer;
  transition:opacity .4s, z-index 0s;will-change:transform}
.ohero .node .bub{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:#0c1322;border:2px solid rgba(255,255,255,.35);transition:transform .3s,background .3s,border-color .3s,box-shadow .3s}
.ohero .node .bub svg{width:20px;height:20px;stroke:#cbd5e1;fill:none;stroke-width:1.8}
.ohero .node .lbl{font-size:.78rem;font-weight:500;color:rgba(255,255,255,.75);white-space:nowrap;transition:color .3s,transform .3s}
.ohero .node:hover .bub,.ohero .node.active .bub{background:linear-gradient(135deg,#38bdf8,#6366f1);border-color:#fff;transform:scale(1.18);box-shadow:0 0 24px rgba(56,189,248,.6)}
.ohero .node:hover .bub svg,.ohero .node.active .bub svg{stroke:#fff}
.ohero .node:hover .lbl,.ohero .node.active .lbl{color:#fff;transform:scale(1.06)}

/* dim non-selected nodes when a detail is open */
.ohero .orbital.has-sel .node{opacity:.5!important}
.ohero .orbital.has-sel .node.sel{opacity:1!important}
/* selected node -> white filled */
.ohero .node.sel .bub{background:#fff!important;border-color:#fff!important;box-shadow:0 0 30px rgba(255,255,255,.5)!important;transform:scale(1.05)!important}
.ohero .node.sel .bub svg{stroke:#0c1322!important}
.ohero .node.sel .lbl{color:#fff!important;font-weight:700}

/* detail card */
.ohero .detail{position:absolute;left:50%;top:20%;transform:translateX(-50%) scale(.94);
  width:55%;max-width:250px;background:rgba(10,11,16,.92);border:1px solid rgba(255,255,255,.12);border-radius:13px;
  padding:.95rem 1.05rem;z-index:30;text-align:start;opacity:0;visibility:hidden;transition:opacity .3s,transform .3s;
  box-shadow:0 24px 70px rgba(0,0,0,.7)}
.ohero .detail.show{opacity:1;visibility:visible;transform:translateX(-50%) scale(1)}
.ohero .detail::before{content:"";position:absolute;top:-26px;left:50%;transform:translateX(-50%);width:1px;height:26px;background:rgba(255,255,255,.35)}
.ohero .d-top{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.ohero .pill{border:1px solid rgba(255,255,255,.4);border-radius:99px;padding:.16rem .8rem;font-size:.66rem;font-weight:700;letter-spacing:.06em;color:#fff;white-space:nowrap}
.ohero .date{font-size:.76rem;color:#9ca3af;letter-spacing:.04em;white-space:nowrap}
.ohero .ghost{font-size:1.25rem;font-weight:700;color:rgba(255,255,255,.16);margin:.35rem 0 .12rem;line-height:1.15}
.ohero .d-desc{font-size:.82rem;color:#d1d5db;line-height:1.55;margin:0}
.ohero .d-hr{border:0;border-top:1px solid rgba(255,255,255,.1);margin:.85rem 0}
.ohero .d-energy{display:flex;align-items:center;justify-content:space-between;font-size:.82rem;color:#e5e7eb}
.ohero .d-energy .pct{font-weight:600}
.ohero .mi{width:14px;height:14px;display:inline-block;vertical-align:-2px;margin-inline-end:.3rem;fill:none;stroke:currentColor;stroke-width:2}
.ohero .bar{height:4px;border-radius:99px;background:rgba(255,255,255,.12);margin-top:.55rem;overflow:hidden}
.ohero .bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#38bdf8,#6366f1,#a855f7);transition:width .5s}
.ohero .d-conn{font-size:.7rem;letter-spacing:.07em;color:#9ca3af;font-weight:600;margin-bottom:.55rem}
.ohero .d-rel{display:flex;flex-wrap:wrap;gap:.4rem}
.ohero .rel{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.18);border-radius:7px;padding:.32rem .65rem;
  font-size:.76rem;color:#e5e7eb;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:.35rem;transition:.2s}
.ohero .rel:hover{background:rgba(255,255,255,.12);color:#fff}
.ohero .rel .ar{opacity:.6;font-size:.8rem}

@media(max-width:920px){
  .ohero{padding:6rem 0 3rem}
  .ohero .o-wrap{grid-template-columns:1fr;gap:2.5rem;text-align:center}
  .ohero .o-copy .o-ctas{justify-content:center}
  .ohero .orbital{max-width:420px}
  .ohero .o-veil{background:linear-gradient(to bottom,rgba(5,8,16,.55),rgba(5,8,16,.35) 40%,rgba(5,8,16,.8))}
}