/* ===== hx-eco: Ecosistem (integrări + preview în monitor), Home light =====
   Textele, logourile, iconițele, imaginile ecranelor și culorile se editează în Elementor.
   Ordinea iconițelor = ordinea ecranelor (Iconiță 2 deschide Ecran 2).
   Aici: poziția ecranului în ramă, schimbarea ecranelor, tooltip-ul iconițelor, intrarea secțiunii. */
.hx-eco{--hx-eco-ease:cubic-bezier(.215,.61,.355,1);--hx-eco-snap:cubic-bezier(.23,1,.32,1);--hx-eco-soft:cubic-bezier(.165,.84,.44,1)}
.hx-eco .hx-eco-title .elementor-heading-title{text-wrap:balance}

/* monitor: rama (imagine) deasupra, ecranele dedesubt, în dreptunghiul transparent al ramei */
.hx-eco .hx-eco-mon.e-con{position:relative;isolation:isolate}
.hx-eco .hx-eco-frame{position:relative;z-index:2;pointer-events:none;margin:0!important;width:100%}
.hx-eco .hx-eco-frame img{display:block;width:100%;height:auto}
.hx-eco .hx-eco-screens.e-con{position:absolute!important;z-index:1;left:calc(8.85% - 1px);top:calc(8.5% - 1px);width:calc(82.36% + 2px)!important;height:calc(64.65% + 2px)!important;min-height:0!important;padding:0!important;margin:0!important;overflow:hidden;background:#F7F5FB}
.hx-eco .hx-eco-screen.e-con{position:absolute!important;inset:0;width:auto!important;height:auto!important;min-height:0!important;margin:0!important;opacity:0;transform:scale(1.03);transition:opacity .55s var(--hx-eco-ease),transform .9s var(--hx-eco-soft)}
.hx-eco .hx-eco-screen.e-con:first-child{opacity:1;transform:none}
.hx-eco.hx-eco-js .hx-eco-screen.e-con{opacity:0;transform:scale(1.03);z-index:0}
.hx-eco.hx-eco-js .hx-eco-screen.e-con.is-on{opacity:1;transform:none;z-index:1}
/* în editor: ecranul selectat în Navigator apare peste celelalte */
.elementor-editor-active .hx-eco .hx-eco-screen.e-con.elementor-element-editable{opacity:1;transform:none;z-index:3}

/* bara cu iconițe */
.hx-eco .hx-eco-dock.e-con{position:relative;box-shadow:0 12px 32px -16px rgba(91,8,187,.4)}
.hx-eco .hx-eco-tab.e-con{position:relative;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .35s var(--hx-eco-snap)}
.hx-eco .hx-eco-tab .elementor-icon{display:flex}
.hx-eco .hx-eco-tab .elementor-icon i,.hx-eco .hx-eco-tab .elementor-icon svg{transition:color .3s,fill .3s}
.hx-eco .hx-eco-tab.is-on{background-color:#5B08BB!important}
.hx-eco .hx-eco-tab.is-on .elementor-icon,.hx-eco .hx-eco-tab.is-on .elementor-icon i{color:#fff!important}
.hx-eco .hx-eco-tab.is-on .elementor-icon svg{fill:#fff!important}
.hx-eco .hx-eco-tab:focus-visible{outline:2px solid #8D53DE;outline-offset:2px}
.hx-eco .hx-eco-lbl{position:absolute!important;left:50%;bottom:calc(100% + 14px);width:max-content!important;max-width:none!important;margin:0!important;white-space:nowrap;pointer-events:none;opacity:0;transform:translate(-50%,6px);transition:opacity .3s var(--hx-eco-snap),transform .4s var(--hx-eco-snap);box-shadow:0 8px 20px -10px rgba(19,5,40,.6);z-index:4}
.hx-eco .hx-eco-tab.is-on .hx-eco-lbl{opacity:1;transform:translate(-50%,0)}
@media (hover:hover) and (pointer:fine){
  .hx-eco .hx-eco-tab:not(.is-on):hover{background-color:#F6F2FD}
  .hx-eco .hx-eco-tab:not(.is-on):hover .elementor-icon,.hx-eco .hx-eco-tab:not(.is-on):hover .elementor-icon i{color:#5B08BB!important}
  .hx-eco .hx-eco-tab:not(.is-on):hover .elementor-icon svg{fill:#5B08BB!important}
  .hx-eco .hx-eco-tab:hover .hx-eco-lbl{opacity:1;transform:translate(-50%,0)}
  .hx-eco .hx-eco-dock:hover .hx-eco-tab.is-on:not(:hover) .hx-eco-lbl{opacity:0;transform:translate(-50%,6px)}
  :is(.hx-eco,.hx-int) .hx-eco-chip.e-con{transition:transform .35s var(--hx-eco-snap),box-shadow .35s var(--hx-eco-snap)}
  :is(.hx-eco,.hx-int) .hx-eco-chip.e-con:not(.hx-eco-soon):hover{transform:translateY(-2px);box-shadow:0 8px 18px -10px rgba(91,8,187,.45)}
}
/* chips, iconițe și bara au lățimea conținutului (implicit Elementor dă 100%) */
:is(.hx-eco,.hx-int) .hx-eco-chip.e-con,.hx-eco .hx-eco-tab.e-con,.hx-eco .hx-eco-dock.e-con{--width:auto;width:auto;max-width:100%}
/* rândul din „Pornești în trei pași”: a6 resetează containerele (display:block, padding 0), aici le dăm înapoi valorile din Elementor */
.a6-page .a6_HowToStart_chips.hx-int>.hx-eco-chip.e-con{display:var(--display);padding:var(--padding-top) var(--padding-right) var(--padding-bottom) var(--padding-left);gap:var(--row-gap) var(--column-gap);align-items:center}
.a6-page .hx-int .hx-eco-badge .elementor-heading-title{display:inline-block;padding:4px 8px;background-color:#E9E7EF;border-radius:999px}
:is(.hx-eco,.hx-int) .hx-eco-chip .hx-eco-logo{flex:none}
:is(.hx-eco,.hx-int) .hx-eco-soon .hx-eco-logo{opacity:.5}
:is(.hx-eco,.hx-int) .hx-eco-chip .hx-eco-logo img{display:block}

/* intrare: titlul și cardurile folosesc aopy-rv (global); aici rămân doar chipurile */
.hx-motion .hx-eco .hx-eco-chip.e-con{opacity:0;transform:translateY(10px) scale(.96)}
.hx-motion .hx-eco.is-in .hx-eco-chip.e-con{opacity:1;transform:none;transition:opacity .6s var(--hx-eco-ease),transform .7s var(--hx-eco-snap)}
.hx-motion .hx-eco .hx-eco-mon.e-con{opacity:0;transform:translateY(36px) scale(.95)}
.hx-motion .hx-eco.is-in .hx-eco-mon.e-con{opacity:1;transform:none;transition:opacity 1s var(--hx-eco-ease) .15s,transform 1.2s var(--hx-eco-soft) .15s}
.hx-motion .hx-eco .hx-eco-screens.e-con::after{content:"";position:absolute;inset:0;width:auto;height:auto;border:0;mix-blend-mode:normal;background:#fff;opacity:1;z-index:5;pointer-events:none}
.hx-motion .hx-eco.is-in .hx-eco-screens.e-con::after{opacity:0;transition:opacity 1.2s var(--hx-eco-ease) .7s}

@media (max-width:767px){
  .a6-page .a6_HowToStart_chips.hx-int.e-con{flex-wrap:nowrap;justify-content:flex-start;max-width:100%;width:100%;padding-left:16px!important}
  .hx-eco .hx-eco-chips.e-con,.a6-page .a6_HowToStart_chips.hx-int.e-con{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding-right:18px!important;-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent)}
  .hx-eco .hx-eco-chips.e-con::-webkit-scrollbar,.a6-page .hx-int.e-con::-webkit-scrollbar{display:none}
  .hx-eco .hx-eco-lbl{bottom:auto;top:calc(100% + 12px);transform:translate(-50%,-6px)}
  .hx-eco .hx-eco-tab:first-child .hx-eco-lbl{left:0;transform:translate(0,-6px)}
  .hx-eco .hx-eco-tab:last-child .hx-eco-lbl{left:auto;right:0;transform:translate(0,-6px)}
  .hx-eco .hx-eco-tab.is-on .hx-eco-lbl{transform:translate(-50%,0)}
  .hx-eco .hx-eco-tab.is-on:first-child .hx-eco-lbl,.hx-eco .hx-eco-tab.is-on:last-child .hx-eco-lbl{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .hx-eco *,.hx-eco *::before,.hx-eco *::after{animation:none!important;transition:none!important}
}