/* ===== hx: hero + diagrama de sub hero (Home, light). =====
   Textele, linkurile, culorile, fonturile si spatiile se editeaza in Elementor (widgeturi native).
   Aici: fundalul animat (canvas), animatiile de intrare, linia/punctele diagramei si headerul deschis doar pe Home. */
.hx-hero.e-con{position:relative;isolation:isolate;overflow:clip}
.hx-hero>.hx-bg{position:absolute!important;inset:0;z-index:0;margin:0!important;width:auto!important;max-width:none!important;pointer-events:none}
.hx-hero>.hx-bg>.elementor-widget-container{position:absolute;inset:0}
.hx-bg .hx-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.2s cubic-bezier(.165,.84,.44,1)}
.hx-bg.is-ready .hx-canvas{opacity:1}
.hx-hero .hx-inner.e-con{position:relative;z-index:1}
.hx-hero .hx-stage.e-con{pointer-events:none}
.hx-hero .hx-cta .elementor-button,.hx-hero .hx-pill .elementor-button{transition:background-color .3s,color .3s,border-color .3s,box-shadow .3s,transform .3s cubic-bezier(.23,1,.32,1)}
.hx-hero .hx-cta .elementor-button{box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 10px 24px -10px rgba(19,5,40,.55),0 0 0 1px rgba(19,5,40,.9)}
.hx-hero .hx-pill .elementor-button{box-shadow:0 0 0 4px rgba(141,83,222,.06),0 6px 18px -8px rgba(91,8,187,.35)}
@media (hover:hover) and (pointer:fine){
  .hx-hero .hx-cta .elementor-button:hover{transform:translateY(-2px)}
  .hx-hero .hx-pill .elementor-button:hover{transform:translateY(-1px)}
  .hx-hero .hx-pill .elementor-button:hover .elementor-button-icon{transform:translateX(3px)}
}
.hx-hero .hx-pill .elementor-button-icon{transition:transform .3s cubic-bezier(.23,1,.32,1)}

/* Intrarea textelor din hero: clasa globală aopy-rv („Aopy · CSS global”). hx-show rămâne pentru diagramă. */
@keyframes hx-show{to{opacity:1;transform:none}}

/* ===== Diagrama: Catalog -> Aopy -> Module ===== */
.hx-panel.e-con{position:relative}
.hx-panel .hx-conn.e-con{position:relative;flex:1 1 0;min-width:24px;height:24px;min-height:0;padding:0}
.hx-panel .hx-conn.e-con::before{content:"";position:absolute;top:50%;left:6px;right:6px;width:auto;height:2px;margin-top:-1px;border:0;opacity:1;mix-blend-mode:normal;border-radius:2px;background:repeating-linear-gradient(90deg,#d2cedd 0 6px,transparent 6px 12px)}
.hx-panel .hx-node.e-con{position:relative}
.hx-panel .hx-node.e-con::after{content:"";position:absolute;inset:-28px;width:auto;height:auto;border:0;mix-blend-mode:normal;border-radius:50%;background:radial-gradient(closest-side,rgba(162,116,232,.38),transparent);opacity:.7;z-index:-1;pointer-events:none}
.hx-panel .hx-node img{display:block;margin:auto}
.hx-panel .hx-prod.e-con,.hx-panel .hx-mod.e-con,.hx-panel .hx-cat-head.e-con{flex-wrap:nowrap}
.hx-panel .hx-ptext.e-con,.hx-panel .hx-mtext.e-con{flex:1 1 0;min-width:0;width:auto}
.hx-panel .hx-mdesc p,.hx-panel p.elementor-heading-title{margin:0}
.hx-panel .hx-prod.e-con,.hx-panel .hx-mod.e-con{transition:border-color .4s cubic-bezier(.23,1,.32,1),background-color .4s cubic-bezier(.23,1,.32,1),box-shadow .4s cubic-bezier(.23,1,.32,1)}
.hx-panel .hx-mod.e-con.is-lit{border-color:#5b08bb!important;background-color:#f6f2fd!important;box-shadow:0 0 0 3px rgba(91,8,187,.12),0 10px 24px -14px rgba(91,8,187,.6)}
.hx-panel .hx-mod.is-lit .elementor-icon{background-color:#5b08bb!important;color:#fff!important;fill:#fff!important}
.hx-panel .hx-mod.is-lit .elementor-icon svg,.hx-panel .hx-mod.is-lit .elementor-icon i{color:#fff!important;fill:#fff!important}
.hx-panel .hx-mod .elementor-icon{transition:background-color .4s,color .4s}
.hx-panel .hx-prod.e-con.is-pick{box-shadow:0 0 0 6px rgba(91,8,187,.16)!important}
.hx-panel .hx-node.e-con.is-hit{transform:scale(1.06)}
.hx-panel .hx-node.e-con{transition:transform .5s cubic-bezier(.23,1,.32,1)}
.hx-fx{position:absolute;inset:0;z-index:5;pointer-events:none}
.hx-fx .hx-token{position:absolute;top:0;left:0;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:8px;opacity:0;background-size:cover;background-position:center;box-shadow:0 0 0 3px rgba(162,116,232,.35),0 12px 28px -6px rgba(91,8,187,.6)}
.hx-fx .hx-dot{position:absolute;top:0;left:0;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;opacity:0;background:#8d53de;box-shadow:0 0 0 3px rgba(141,83,222,.22),0 0 14px 3px rgba(141,83,222,.55)}
.hx-fx .hx-ripple{position:absolute;top:0;left:0;border:1.5px solid #a274e8;border-radius:32px;opacity:0}
.hx-motion .hx-panel.hx-pv{opacity:0;transform:translateY(28px) scale(.97)}
.hx-motion .hx-panel.hx-pv.is-in{opacity:1;transform:none;transition:opacity .9s cubic-bezier(.215,.61,.355,1),transform 1.1s cubic-bezier(.165,.84,.44,1)}
.hx-motion:not(.hx-live) .hx-panel.hx-pv{animation:hx-show .01s 2.5s forwards}
@media (max-width:1024px){
  .hx-panel .hx-conn.e-con{flex:none;width:24px;min-width:0;height:40px}
  .hx-panel .hx-conn.e-con::before{top:6px;bottom:6px;left:50%;right:auto;width:2px;height:auto;margin:0 0 0 -1px;background:repeating-linear-gradient(180deg,#d2cedd 0 6px,transparent 6px 12px)}
  .hx-panel .hx-node.e-con::after{inset:-20px}
}

@media (prefers-reduced-motion:reduce){
  .hx-hero *,.hx-panel *,.hx-panel{animation:none!important;transition:none!important}
}