/* ==========================================================================
   Aopy · CSS global
   Stilurile comune întregului site (componente cu același aspect și aceeași logică
   pe mai multe pagini). Se încarcă pe toate paginile, în <head>.
   Stilurile unei singure pagini stau în snippetul paginii (ex. „Aopy · Home · CSS”)
   sau în widgetul HTML al secțiunii, dacă sunt unice.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Highlight gradient animat
   Folosire în titluri: <span class="aopy-hl">cuvinte</span>; pe fundal închis
   adaugă și aopy-hl-dark. (Mutat din Home, widgetul a6 4037935.)
   -------------------------------------------------------------------------- */
/* Highlight gradient animat (același efect ca pe Module). În titlu: <span class="aopy-hl">cuvinte</span>; pe fundal închis adaugă și aopy-hl-dark. */
body .aopy-hl{background-image:linear-gradient(100deg,#5b08bb 0%,#8d53de 40%,#c026d3 60%,#5b08bb 85%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone;animation:aopy-shine 7s linear infinite}
body .aopy-hl.aopy-hl-dark{background-image:linear-gradient(100deg,#c4a6f2 0%,#8d53de 35%,#f0abfc 55%,#c4a6f2 80%)}
@keyframes aopy-shine{to{background-position:-220% 0}}
@media (prefers-reduced-motion:reduce){body .aopy-hl{animation:none}}


/* --------------------------------------------------------------------------
   Eyebrow: eticheta mică de deasupra titlurilor, cu punct care pulsează
   Se pune pe un widget Heading (Advanced → CSS Classes). Textul, culoarea,
   fontul și (la aopy-eyebrow) pastila se setează în Elementor.
     aopy-eyebrow        punct care pulsează (Home, Module, Contact)
     aopy-eyebrow-pill   pastila desenată din CSS (sticlă, pentru fundal închis)
                         (Despre noi, ROAS); punctul e același peste tot
     aopy-eyebrow-light  + aopy-eyebrow-pill pe fundal deschis (alb, contur mov)
     aopy-eyebrow-pxl    același aspect pe widgetul Heading al temei (pxl_heading)
   -------------------------------------------------------------------------- */
.aopy-eyebrow .elementor-heading-title{display:inline-flex;align-items:center;gap:8px}
.aopy-eyebrow .elementor-heading-title::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none;animation:aopy-dot 2.4s ease-in-out infinite}
@keyframes aopy-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}

.aopy-eyebrow-pill .elementor-heading-title{display:inline-flex;align-items:center;gap:10px;padding:8px 14px 8px 12px;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:rgba(255,255,255,.05);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.aopy-eyebrow-pill .elementor-heading-title::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:currentColor;animation:aopy-dot 2.4s ease-in-out infinite}
.aopy-eyebrow-pill.aopy-eyebrow-light .elementor-heading-title{border-color:#ddccf8;background:#fff}

.aopy-eyebrow-pxl .pxl-item--subtitle.px-sub-title-default{align-items:center;padding:8px 14px 8px 12px;border:1px solid #ddccf8;border-radius:999px;background:#fff;font-size:13px!important;line-height:1.2}
.aopy-eyebrow-pxl .pxl-item--subtext{display:inline-flex;align-items:center;flex-wrap:wrap}
/* margin în loc de gap: la unele titluri textul e împărțit în cuvinte (split text) */
.aopy-eyebrow-pxl .pxl-item--subtext::before{content:'';flex:none;width:6px;height:6px;margin-right:10px;border-radius:50%;background:currentColor;animation:aopy-dot 2.4s ease-in-out infinite}

@media (prefers-reduced-motion:reduce){
  .aopy-eyebrow .elementor-heading-title::before,
  .aopy-eyebrow-pill .elementor-heading-title::before,
  .aopy-eyebrow-pxl .pxl-item--subtext::before{animation:none}
}

/* Eyebrow evidențiat (feedback 21.10): bold, puțin mai mare, contur cu o lumină
   mov care se rotește. Se aplică pe toate cele 3 variante de mai sus.
   Pastila e pe: widget (aopy-eyebrow), titlu (aopy-eyebrow-pill), subtitlul temei (aopy-eyebrow-pxl). */
@property --aopy-eb-a{syntax:'<angle>';inherits:false;initial-value:0deg}
.aopy-eyebrow .elementor-heading-title,
.aopy-eyebrow-pill .elementor-heading-title,
.aopy-eyebrow-pxl .pxl-item--subtitle.px-sub-title-default,
.aopy-eyebrow-pxl .pxl-item--subtext,
.aopy-eyebrow-pxl .pxl-item--subtitle *{font-size:14px!important;font-weight:700!important}
.aopy-eyebrow.elementor-element,
.aopy-eyebrow-pill .elementor-heading-title,
.aopy-eyebrow-pxl .pxl-item--subtitle.px-sub-title-default{position:relative;padding:9px 16px 9px 14px!important}
/* Același contur animat pe orice alt element rotunjit: clasa aopy-ring (ex. bara modulelor de pe /module/) */
.aopy-ring.elementor-element{position:relative}
.aopy-eyebrow.elementor-element::after,
.aopy-eyebrow-pill .elementor-heading-title::after,
.aopy-eyebrow-pxl .pxl-item--subtitle.px-sub-title-default::after,
.aopy-ring.elementor-element::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:conic-gradient(from var(--aopy-eb-a),transparent 0deg,transparent 200deg,#8d53de 270deg,#c026d3 310deg,#5b08bb 345deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:aopy-eb-spin 4s linear infinite}
@keyframes aopy-eb-spin{to{--aopy-eb-a:360deg}}
@media (prefers-reduced-motion:reduce){
  .aopy-eyebrow.elementor-element::after,
  .aopy-eyebrow-pill .elementor-heading-title::after,
  .aopy-eyebrow-pxl .pxl-item--subtitle.px-sub-title-default::after,
  .aopy-ring.elementor-element::after{animation:none;background:linear-gradient(100deg,#5b08bb,#c026d3)}
}


/* --------------------------------------------------------------------------
   Cifre live (Home hero, Prețuri): aopy-count pe Heading-ul cu cifră (cifrele
   nu „sar” cât numără), aopy-live pe eticheta cu punct verde care pulsează.
   Numărătoarea e în „Aopy · JS global”.
   -------------------------------------------------------------------------- */
.aopy-count .elementor-heading-title{font-variant-numeric:tabular-nums}
.aopy-live .elementor-heading-title::before{content:"";display:inline-block;width:6px;height:6px;margin:0 7px 1px 0;border-radius:50%;background:#13a35a;box-shadow:0 0 0 0 rgba(19,163,90,.45);vertical-align:middle;animation:aopy-live 2.4s ease-out infinite}
@keyframes aopy-live{0%{box-shadow:0 0 0 0 rgba(19,163,90,.45)}70%,100%{box-shadow:0 0 0 7px rgba(19,163,90,0)}}
@media (prefers-reduced-motion:reduce){.aopy-live .elementor-heading-title::before{animation:none}}


/* --------------------------------------------------------------------------
   Apariție la scroll (aopy-rv): același efect ca pe Home și Module
   Pune clasa aopy-rv pe un widget sau container (Advanced → CSS Classes).
   Elementul urcă 24px și apare în 0,7s când intră în ecran; frații care au și
   ei aopy-rv apar unul după altul, la 0,08s distanță. Pornirea e în
   „Aopy · JS global”. Dacă JS nu pornește, totul apare singur după 2,5s.
   În editorul Elementor și cu „reduce motion” elementele stau vizibile.
   -------------------------------------------------------------------------- */
.aopy-rv{opacity:0;transform:translateY(24px);animation:aopy-rv-show 0s 2.5s forwards}
html.aopy-rv-live .aopy-rv{animation:none;transition:opacity .7s cubic-bezier(.215,.61,.355,1),transform .7s cubic-bezier(.215,.61,.355,1)}
.aopy-rv.is-in{opacity:1;transform:none}
@keyframes aopy-rv-show{to{opacity:1;transform:none}}
.elementor-editor-active .aopy-rv{opacity:1;transform:none;animation:none}
@media (prefers-reduced-motion:reduce){.aopy-rv{opacity:1;transform:none;animation:none;transition:none}}


/* --------------------------------------------------------------------------
   Formular simplu (aopy-form): același aspect ca formularul de pe Contact
   Clasa aopy-form se pune pe widgetul Form (Advanced → CSS Classes). Culorile,
   fonturile, colțurile și butonul pill se setează în Elementor; aici stau doar
   câmpurile mai înalte, focusul mov, căsuța de acord și mesajele.
   (Folosit pe formularele de ștergere și export al datelor.)
   -------------------------------------------------------------------------- */
.aopy-form .elementor-field-group:not(.elementor-field-type-acceptance) > label.elementor-field-label{display:block}
.aopy-form .elementor-field-textual{min-height:50px;padding:12px 16px!important;transition:border-color .2s,box-shadow .2s}
.aopy-form textarea.elementor-field-textual{min-height:120px;resize:vertical}
.aopy-form .elementor-field-textual:focus{border-color:#8D53DE!important;box-shadow:0 0 0 4px rgba(141,83,222,.14);outline:none}
.aopy-form .elementor-field-group > label.elementor-field-label,.aopy-form .elementor-field-option label{text-transform:none!important;letter-spacing:normal!important;font-family:var(--aopy-ff-body)!important}
.aopy-form .elementor-field-subgroup{background:none!important;border:0!important;border-radius:0!important;padding:0!important;box-shadow:none!important}
.aopy-form .elementor-field-type-acceptance .elementor-field-option{display:flex;align-items:flex-start;gap:10px}
.aopy-form .elementor-field-type-acceptance input{flex:none;width:18px;height:18px;margin:2px 0 0;accent-color:#5B08BB}
.aopy-form .elementor-field-type-acceptance .elementor-field-option label{font-size:14px!important;font-weight:400!important;color:#4A4458!important;line-height:1.5}
.aopy-form .elementor-field-type-acceptance a{color:#5B08BB;text-decoration:underline;text-underline-offset:2px}
.aopy-form .elementor-field-type-acceptance > label.elementor-field-label{display:none!important}
.aopy-form .e-form__buttons{margin-top:6px}
.aopy-form .elementor-button{text-transform:none!important;letter-spacing:normal!important}
.aopy-form .elementor-button .elementor-button-icon{transition:transform .45s cubic-bezier(.23,1,.32,1)}
@media (hover:hover) and (pointer:fine){.aopy-form .elementor-button:hover .elementor-button-icon{transform:translateX(3px)}}
.aopy-form .elementor-message{font-family:var(--aopy-ff-body);font-size:15px;margin-top:14px}


/* --------------------------------------------------------------------------
   Banda de logo-uri (aopy-logos): Home, landing-uri
   aopy-logos = container cu câte un container aopy-logo pentru fiecare client
   (în el: widget Image cu logo-ul sau, până vin logo-urile, un Heading).
   Folosită pe Home (Trust – clients) și pe cele 5 landing-uri.
   Pe site banda curge încet în buclă și se oprește la hover; în editor și cu
   „reduce motion” logo-urile stau pe rânduri, fără mișcare.
   -------------------------------------------------------------------------- */
.aopy-logos.e-con{flex-wrap:wrap;justify-content:center}
.aopy-logo.e-con{flex:none;transition:border-color .3s,box-shadow .3s}
.aopy-logo .elementor-widget-image img{display:block;max-height:36px;width:auto;max-width:100%;object-fit:contain}
.aopy-logo .elementor-widget{width:auto}
html.aopy-mq-on .aopy-logos.is-marquee{flex-wrap:nowrap!important;justify-content:flex-start!important;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.aopy-logos-track{display:flex;flex:none;gap:inherit;width:max-content;animation:aopy-marquee var(--aopy-mq,40s) linear infinite}
.aopy-logos-track > .e-con{flex:none}
@media (hover:hover) and (pointer:fine){.aopy-logos:hover .aopy-logos-track{animation-play-state:paused}}
@keyframes aopy-marquee{to{transform:translate3d(calc(-50% - var(--aopy-mq-gap,8px)),0,0)}}