/* ==========================================================================
   ZAR Studio — strat de utilitare
   Tot ce e greu de reprodus din interfața Elementor stă aici.
   Clasele se aplică din Advanced → CSS Classes pe container.
   ========================================================================== */

:root {
  --z-white:  #FFFFFF;
  --z-grey:   #F3F4F5;
  --z-ink:    #1A2E35;
  --z-orange: #D4521A;
  --z-teal:   #5BBFB5;
}

/* --- dungile diagonale din thumbnail-uri (zero imagini) ------------------ */
.z-stripe {
  background-image: repeating-linear-gradient(135deg,
    var(--z-grey) 0 8px, var(--z-white) 8px 16px);
}
.z-stripe--ink {
  background-image: repeating-linear-gradient(135deg,
    rgba(255, 255, 255, .14) 0 8px, rgba(255, 255, 255, .05) 8px 16px);
}
.z-stripe--wide {
  background-image: repeating-linear-gradient(135deg,
    var(--z-white) 0 9px, var(--z-grey) 9px 18px);
}

/* --- cercurile din hero (fără DOM suplimentar) --------------------------- */
.z-hero {
  background-image:
    radial-gradient(circle 280px at 50% 492px, rgba(212, 82, 26, .07) 0 280px, transparent 281px),
    radial-gradient(circle 430px at 50% 522px, var(--z-grey)          0 430px, transparent 431px);
  overflow: hidden;
}

/* --- cardurile înclinate din hero --------------------------------------- */
.z-tilt-1 { transform: rotate(-7deg) translateY(28px); }
.z-tilt-2 { transform: rotate(  5deg) translateY(96px); }
.z-tilt-3 { transform: rotate( -4deg) translateY(88px); }
.z-tilt-4 { transform: rotate(  8deg) translateY(10px); }
.z-lift   { box-shadow: 0 24px 50px -18px rgba(14, 14, 12, .28); }

/* --- tabelul de comparație ---------------------------------------------- */
.e-con.z-trow {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr);
  align-items: center;
  border-radius: 16px;
}
.e-con.z-trow--alt { background-color: var(--z-grey); }
.e-con.z-trow > .e-con-inner { display: contents; }
.e-con.z-trow > *:not(:first-child),
.e-con.z-trow > .e-con-inner > *:not(:first-child) { text-align: center; }

/* --- header sticky + ancore --------------------------------------------- */
/* Sticky trebuie pus pe wrapper-ul <header>, nu pe containerul din interior:
   containerul e la fel de înalt ca părintele lui, deci n-are unde să „lipească". */
.elementor-location-header {
  position: sticky;
  top: 0;
  z-index: 50;
}
body.admin-bar .elementor-location-header { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .elementor-location-header { top: 46px; }
}

.z-header {
  position: relative;
  z-index: 50;
  background-color: rgba(255, 255, 255, .88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
:target { scroll-margin-top: 104px; }

/* --- mobil --------------------------------------------------------------- */
@media (max-width: 1024px) {
  .z-hero { background-image: none; }
  .z-tilt-1 { transform: rotate(-4deg); }
  .z-tilt-3 { transform: rotate( 4deg); }
  .z-tilt-2, .z-tilt-4 { display: none; }
  .z-lift { box-shadow: 0 20px 40px -16px rgba(14, 14, 12, .28); }
  :target { scroll-margin-top: 84px; }
}

/* --- header: logo | pill | CTA, fiecare la lățimea conținutului ---------- */
.z-header .e-con-inner { flex-wrap: nowrap; }
.z-header .e-con-inner > .e-con { flex: 0 0 auto; width: auto; }
.z-header .elementor-nav-menu { flex-wrap: nowrap; }
.z-header .elementor-nav-menu--main .elementor-item {
  padding: 8px 20px;
  border-radius: 999px;
  font-family: Outfit, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--z-ink);
}
.z-header .elementor-nav-menu--main .elementor-item:hover,
.z-header .elementor-nav-menu--main .elementor-item:focus,
.z-header .elementor-nav-menu--main .elementor-item.highlighted {
  background-color: var(--z-white);
  color: var(--z-ink);
}
.z-header .elementor-nav-menu--main > li { margin: 0 2px; }

/* --- footer: lockup și copyright la lățimea conținutului ----------------- */
.elementor-location-footer .e-con-inner > .e-con { width: auto; }

@media (max-width: 1024px) {
  .z-header .e-con-inner > .e-con:last-child { margin-left: auto; }
}

/* --- mobil: pill-ul devine doar buton de meniu, butoanele din hero se întind */
@media (max-width: 1024px) {
  .z-navpill { background-color: transparent; padding: 0; }
  .z-hero .elementor-widget-button { width: 100%; }
  .z-hero .elementor-widget-button .elementor-button { width: 100%; }
  .z-hero .elementor-button[href$="#portofoliu"] { background-color: var(--z-grey); }
  .elementor-location-footer .e-con-inner > .e-con { width: 100%; }
}

/* --- corecții finale mobil ---------------------------------------------- */
@media (max-width: 1024px) {
  .z-header .e-con-inner { flex-wrap: nowrap !important; gap: 8px; }
  .z-header .e-con-inner > .e-con:first-child { margin-right: auto; }
  .z-header .e-con-inner > .e-con:last-child { order: 2; margin-left: 0; }
  .z-navpill { order: 3; }
  .z-hero .elementor-button[href$="portofoliu"] { background-color: var(--z-grey) !important; }
  .z-hero .elementor-button[href$="portofoliu"]:hover { background-color: var(--z-ink) !important; }
}

/* --- hover pe navigație: pill alb, text ink (fără pointer-ul Elementor) --- */
.z-header .elementor-nav-menu--main .elementor-item:before,
.z-header .elementor-nav-menu--main .elementor-item:after { display: none !important; }
.z-header .elementor-nav-menu--main .elementor-item,
.z-header .elementor-nav-menu--main .elementor-item:visited {
  color: var(--z-ink) !important;
  background-color: transparent;
  transition: background-color .18s ease, color .18s ease;
}
.z-header .elementor-nav-menu--main .elementor-item:hover,
.z-header .elementor-nav-menu--main .elementor-item:focus,
.z-header .elementor-nav-menu--main .elementor-item.highlighted,
.z-header .elementor-nav-menu--main .elementor-item.elementor-item-active {
  background-color: var(--z-white) !important;
  color: var(--z-ink) !important;
}
.z-header .elementor-nav-menu--main .elementor-item:focus-visible {
  outline: 2px solid var(--z-orange);
  outline-offset: 2px;
}

/* --- avatarul din testimoniale -------------------------------------------- */
.z-av {
  flex: 0 0 44px !important;
  width: 44px !important;
  height: 44px !important;
  min-height: 0 !important;
  padding: 0 !important;
  border-radius: 999px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.z-av > .e-con-inner {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; padding: 0;
}
.z-av .elementor-widget-heading { padding: 0 !important; margin: 0 !important; line-height: 0; }
.z-av + .e-con {
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0;
  padding: 0 !important;
}
.e-con:has(> .z-av) { flex-wrap: nowrap; padding: 0 !important; }
/* Autorul stă lipit de baza cardului, ca cele trei carduri să se alinieze. */
#testimoniale .e-con:has(> .z-av) {
  margin-top: auto !important;
  padding-top: 28px !important;
}

/* --- banda de clienți: logo-urile respiră, dar nu se împrăștie ------------ */
#clienti .e-con { row-gap: 18px; }
@media (max-width: 767px) {
  #clienti .elementor-widget-heading { padding: 0 !important; }
}

/* --- iconițele din cardurile de servicii ---------------------------------- */
.z-svc {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
}
.z-svc > .e-con-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0;
}
.z-svc .elementor-widget-icon { padding: 0 !important; margin: 0 !important; line-height: 0; width: auto !important; }
.z-svc .elementor-icon { display: block; padding: 0; line-height: 1; }
.z-svc .elementor-icon i { line-height: 1; }

/* --- bifele din secțiunea „Valori" -----------------------------------------
   Widget-ul HTML își aduce propriul padding, iar containerul avea lățime
   fixă pe desktop și 100% pe mobil — de aici bara lată și înaltă.
   Aici e pătrat cu colțuri rotunjite, aceeași dimensiune peste tot.          */
.z-check {
  flex: 0 0 30px !important;
  width: 30px !important;
  height: 30px !important;
  min-height: 0 !important;
  padding: 0 !important;
  border-radius: 10px !important;
  background-color: rgba(91, 191, 181, .18);
  display: flex !important;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  margin-top: 1px !important;
}
.z-check > .e-con-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0;
}
.z-check .elementor-widget-html {
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 0;
}
.z-check .elementor-widget-container { line-height: 0; }
.z-check svg { display: block; width: 15px; height: 15px; }

/* Textul de lângă bifă: pornește de la lățime zero și crește, altfel
   containerul Elementor îl ține la 100% și rândul se rupe pe telefon. */
.z-check + .e-con {
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0;
}
/* Elementor pune 10px padding pe fiecare container și lasă marginea ultimului
   paragraf — împreună adăugau ~54px de gol sub fiecare valoare. */
.e-con:has(> .z-check) {
  flex-wrap: nowrap;
  padding: 0 !important;
}
.z-check + .e-con { padding: 0 !important; }
.z-check + .e-con p:last-child { margin-bottom: 0; }

@media (max-width: 1024px) {
  .z-check {
    flex-basis: 28px !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 9px !important;
  }
  .z-check svg { width: 14px; height: 14px; }
}

/* --- apariția secțiunilor la derulare --------------------------------------
   Clasa .z-motion e pusă de zar-motion.js din <head>, deci fără JS (sau cu
   „reduce motion") conținutul rămâne pur și simplu vizibil.                  */
.z-motion .z-reveal {
  opacity: 0;
  transform: translateY(20px);
  will-change: opacity, transform;
}
.z-motion .z-reveal.z-in {
  opacity: 1;
  transform: none;
  transition: opacity .72s cubic-bezier(.22, .61, .36, 1),
              transform .72s cubic-bezier(.22, .61, .36, 1);
  will-change: auto;
}
@media (prefers-reduced-motion: reduce) {
  .z-motion .z-reveal { opacity: 1; transform: none; transition: none; }
}

/* --- ancore ---------------------------------------------------------------
   Elementor animează el scroll-ul spre ancore. Dacă html are
   scroll-behavior: smooth, cele două se anulează reciproc și linkul nu mai
   sare nicăieri. Lăsăm scroll-ul nativ pe auto și îl facem Elementor.       */
html { scroll-behavior: auto !important; }

/* --- meniul mobil: se deschide peste conținut, nu împinge header-ul -------
   Implicit Elementor lasă lista drop-down în flux, așa că la deschidere
   împinge tot ce urmează. O scoatem din flux și o ancorăm sub header.       */
@media (max-width: 1024px) {
  .z-header .e-con,
  .z-header .e-con-inner,
  .z-header .elementor-widget-nav-menu,
  .z-header .elementor-widget-nav-menu .elementor-widget-container { position: static; }

  .z-header .elementor-nav-menu--dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    margin-top: 0 !important;
    overscroll-behavior: contain;
    background-color: var(--z-white);
    border-top: 1px solid rgba(26, 46, 53, .08);
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    box-shadow: 0 24px 44px -20px rgba(14, 14, 12, .30);
    z-index: 60;
  }
  .z-header .elementor-nav-menu--dropdown .elementor-nav-menu {
    max-height: 76vh;
    overflow-y: auto;
  }

  .z-header .elementor-nav-menu--dropdown .elementor-item {
    padding: 18px 24px;
    border-radius: 0;
    font-family: Outfit, sans-serif;
    font-weight: 500;
    font-size: 17px;
    line-height: 24px;
    color: var(--z-ink);
  }
  .z-header .elementor-nav-menu--dropdown li + li > .elementor-item {
    border-top: 1px solid rgba(26, 46, 53, .07);
  }
  .z-header .elementor-nav-menu--dropdown .elementor-item:hover,
  .z-header .elementor-nav-menu--dropdown .elementor-item:focus,
  .z-header .elementor-nav-menu--dropdown .elementor-item.elementor-item-active {
    background-color: var(--z-grey) !important;
    color: var(--z-ink) !important;
  }

  /* butonul de meniu: fără fundal, doar iconul */
  .z-header .elementor-menu-toggle { background-color: transparent; }
}

/* --- carduri de proiect clickabile în întregime ---------------------------
   Elementor 4.x nu mai randează link-ul de container ca <a>, așa că linkul
   stă pe titlu și îl întindem peste tot cardul (stretched link).            */
.z-card { position: relative; transition: background-color .25s ease; }
.z-card a { color: inherit; text-decoration: none; }
.z-card a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 24px;
}
.z-card:hover { background-color: #E8EAEC; }
.z-card:hover a { color: var(--z-orange); }
.z-card:focus-within { outline: 2px solid var(--z-orange); outline-offset: 3px; }

/* --- butoanele nu se rup pe două rânduri pe desktop ---------------------- */
@media (min-width: 1025px) {
  .elementor-widget-button .elementor-button { white-space: nowrap; }
}

/* --- ramă de telefon pentru capturile de aplicație -------------------------
   Ecranul iPhone are 393×852 pt. Tot ce se vede aici — bezel, insulă, bară de
   status, indicator de home, butoane laterale — e desenat față de lățimea
   ecranului (--sw), ca rama să rămână corectă la orice dimensiune.           */

.zar-mock {
  --sw: min(var(--sw0, 300px), 60vw);
  --bz: calc(var(--sw) * .0305);          /* rama de sticlă, 12pt          */
  --rs: calc(var(--sw) * .14);            /* colțul ecranului, 55pt        */
  --btn: calc(var(--sw) * .0092);         /* butoanele laterale            */

  display: block;
  margin: 0 auto;
  width: calc(var(--sw) + var(--bz) * 2);
  flex: 0 0 auto;
}

.zar-mock__body {
  position: relative;
  padding: var(--bz);
  border-radius: calc(var(--rs) + var(--bz));
  background:
    linear-gradient(148deg,
      #8d949c  0%,
      #4a5057 11%,
      #23272b 26%,
      #1b1e21 52%,
      #2b3035 72%,
      #6f767d 88%,
      #262a2e 100%);
  box-shadow:
    0 42px 70px -34px rgba(16, 28, 33, .48),
    0 8px 18px -10px rgba(16, 28, 33, .30),
    inset 0 0 0 1px rgba(255, 255, 255, .16);
}

/* butoanele ies puțin în afara ramei, ca pe aparatul real */
.zar-mock__btn {
  position: absolute;
  width: var(--btn);
  border-radius: calc(var(--btn) / 2);
  background: linear-gradient(90deg, #6d747b, #2a2e32);
}

.zar-mock__btn--actiune { left: calc(var(--btn) * -1); top: 15.5%; height: 3.4%; }
.zar-mock__btn--vol-sus { left: calc(var(--btn) * -1); top: 22.0%; height: 5.6%; }
.zar-mock__btn--vol-jos { left: calc(var(--btn) * -1); top: 29.2%; height: 5.6%; }

.zar-mock__btn--pornire {
  right: calc(var(--btn) * -1);
  top: 24.0%;
  height: 8.6%;
  background: linear-gradient(270deg, #6d747b, #2a2e32);
}

.zar-mock__screen {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 393 / 852;
  border-radius: var(--rs);
  background: var(--mock-sus, #fff);
  isolation: isolate;
}

/* captura propriu-zisă; ce depășește deschiderea se derulează */
.zar-mock__roll {
  will-change: transform;
  transform: translate3d(0, calc(var(--p, 0) * var(--roll-shift, 0%)), 0);
}

.zar-mock__roll img {
  display: block;
  width: var(--roll-w, 100%);
  height: auto;
  margin-left: var(--roll-ml, 0);
  max-width: none;
  border-radius: 0;
}

/* bara de status stă peste ecran, pe culoarea luată din captură */
.zar-mock__status {
  position: absolute;
  inset: 0 0 auto 0;
  height: calc(var(--sw) * .1373);        /* 54pt */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(var(--sw) * .056) 0 calc(var(--sw) * .076);
  padding-top: calc(var(--sw) * .028);
  background: var(--mock-sus, #fff);
  color: #000;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  font-size: calc(var(--sw) * .0394);     /* 15.5pt */
  font-weight: 600;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
  z-index: 2;
}

.zar-mock--sus-alb .zar-mock__status { color: #fff; }

.zar-mock__icons {
  width: calc(var(--sw) * .1985);
  height: auto;
  display: block;
}

.zar-mock__island {
  position: absolute;
  z-index: 3;
  top: calc(var(--sw) * .028);            /* 11pt */
  left: 50%;
  transform: translateX(-50%);
  width: calc(var(--sw) * .318);          /* 125pt */
  height: calc(var(--sw) * .0916);        /* 36pt  */
  border-radius: 999px;
  background: #000;
}



/* fără mișcare: arătăm capul ecranului, fără derulare */
@media (prefers-reduced-motion: reduce) {
  .zar-mock__roll { transform: none; }
}

@media (max-width: 767px) {
  .zar-mock { --sw: min(var(--sw0, 300px), 62vw); }
  .zar-mock__body { box-shadow: 0 24px 44px -26px rgba(16, 28, 33, .42), inset 0 0 0 1px rgba(255, 255, 255, .16); }
}

/* Elementor pune `figure { margin: 0 }` cu 4 clase în selector, așa că rama nu
   se centrează singură. Centrăm din părinte — nu intrăm în cursa specificității. */
.elementor-shortcode:has(> .zar-mock) { display: flex; justify-content: center; }
html body .elementor .elementor-widget .zar-mock.zar-mock { margin-inline: auto; }

/* --- ecranele de aplicație ------------------------------------------------
   Capturile vin cu colțuri rotunjite și fundal transparent. O umbră de cutie
   ar desena un dreptunghi în jurul lor, deci folosim drop-shadow, care urmează
   forma reală. Două straturi: unul lung și moale, care așază ecranul în pagină,
   unul scurt, care îi ține conturul.                                        */
.zar-ecran img {
  filter:
    drop-shadow(0 18px 28px rgba(16, 28, 33, .13))
    drop-shadow(0 3px 6px rgba(16, 28, 33, .07));
}

@media (max-width: 767px) {
  .zar-ecran img {
    filter:
      drop-shadow(0 12px 20px rgba(16, 28, 33, .12))
      drop-shadow(0 2px 4px rgba(16, 28, 33, .06));
  }
}

/* --- iconițe -------------------------------------------------------------- */
.zar-icon { display: block; }

/* --- galerie de clipuri ---------------------------------------------------
   Clipurile sunt verticale, 9:16. Pe desktop stau pe un rând, pe tabletă câte
   două, pe telefon unul singur, lat cât ecranul. Fișierul video se descarcă
   abia la click — până atunci se vede doar afișul.                          */

.zar-clipuri {
  display: grid;
  grid-template-columns: repeat(var(--col, 3), minmax(0, 1fr));
  gap: 20px;
  width: 100%;
}

@media (max-width: 1024px) {
  .zar-clipuri { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}

@media (max-width: 640px) {
  .zar-clipuri { grid-template-columns: 1fr; gap: 16px; }
}

.zar-clip {
  position: relative;
  margin: 0;
  aspect-ratio: var(--raport, 9 / 16);
  border-radius: 16px;
  overflow: hidden;
  /* Longhand, nu shorthand: un var() într-un shorthand cade tot dacă nu
     rezolvă exact cum trebuie, iar afișul dispărea cu totul. */
  background-color: #1A2E35;
  box-shadow: 0 14px 28px -18px rgba(16, 28, 33, .45);
}

.zar-clip__afis {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity .2s ease;
}

html body .zar-clip.is-on .zar-clip__afis { opacity: 0; pointer-events: none; }

.zar-clip__v {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: transparent;
}

/* butonul de play dispare odată ce clipul a pornit */
/* Tema colorează orice <button> cu portocaliul de accent, cu specificitate mai
   mare decât o clasă simplă — de-aia butonul acoperea afișul. */
html body .zar-clip .zar-clip__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  background: rgba(16, 28, 33, .16);
  background-image: none;
  box-shadow: none;
  color: #FFFFFF;
  transition: background-color .2s ease, opacity .2s ease;
}

.zar-clip__play svg {
  width: 26px;
  height: 26px;
  margin-left: 3px;                 /* triunghiul pare centrat abia decalat */
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .35));
}

.zar-clip__play::before {
  content: "";
  position: absolute;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(16, 28, 33, .55);
  backdrop-filter: blur(2px);
  transition: transform .2s ease, background-color .2s ease;
}

.zar-clip__play svg { position: relative; }

html body .zar-clip .zar-clip__play:hover { background: rgba(16, 28, 33, .10); }
.zar-clip__play:hover::before { transform: scale(1.06); background: rgba(212, 82, 26, .92); }
html body .zar-clip .zar-clip__play:focus-visible { outline: 2px solid #D4521A; outline-offset: -4px; }

html body .zar-clip.is-on .zar-clip__play { opacity: 0; pointer-events: none; }

.zar-clip__durata {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(16, 28, 33, .62);
  color: #FFFFFF;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  line-height: 16px;
  letter-spacing: .02em;
  pointer-events: none;
  transition: opacity .2s ease;
}

.zar-clip.is-on .zar-clip__durata { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .zar-clip__play, .zar-clip__play::before, .zar-clip__durata { transition: none; }
}

/* --- banda de logo-uri de parteneri ---------------------------------------
   Logo-urile au proporții foarte diferite (de la 1,4:1 la 6,8:1). Un singur
   plafon de înălțime ar face wordmark-urile lungi să pară uriașe, iar unul de
   lățime ar face mărcile pătrate minuscule. Două plafoane deodată le aduc pe
   toate la aceeași greutate optică.                                          */

html body .z-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 32px 56px;
  width: 100%;
}

html body .z-logos > .elementor-widget-image {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  display: block;
}

/* Înălțime explicită, nu `auto`: într-un rând flexibil, o imagine cu lățime și
   înălțime auto într-un container care se dimensionează după ea nu are de unde
   să-și afle mărimea, iar două dintre logo-uri ajungeau la zero. Cu înălțimea
   fixată, lățimea iese din proporție, iar plafonul de lățime o taie pe cea a
   wordmark-urilor lungi — `contain` le centrează în caseta rămasă. */
html body .z-logos.z-logos .elementor-widget-image img {
  display: block;
  flex: none;
  width: auto;
  height: var(--logo-h, 52px);
  max-width: var(--logo-w, 168px);
  max-height: none;
  object-fit: contain;
  object-position: center;
}

@media (max-width: 1024px) {
  html body .z-logos { gap: 28px 44px; --logo-h: 44px; --logo-w: 140px; }
}

@media (max-width: 767px) {
  html body .z-logos { gap: 24px 32px; --logo-h: 36px; --logo-w: 116px; }
}

/* Mărcile aproape pătrate au mai mult aer în jurul semnului, deci la aceeași
   înălțime par mai mici decât un wordmark lung. Le ridicăm puțin; pe cele foarte
   lungi le coborâm, pentru că oricum se opresc în plafonul de lățime.        */
html body .z-logos .z-logo--compact.elementor-widget-image img { height: calc(var(--logo-h, 52px) * 1.2); }
html body .z-logos .z-logo--lat.elementor-widget-image img     { height: calc(var(--logo-h, 52px) * 0.92); }

/* --- pătratul cu iconiță --------------------------------------------------
   Pe mobil containerul se întindea pe toată lățimea și pătratul devenea o bară
   de 227×36. Aici rămâne pătrat, la fel peste tot.                           */
html body .z-icon-box {
  flex: 0 0 36px !important;
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  align-self: flex-start !important;
  padding: 0 !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html body .z-icon-box > .e-con-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0;
}

html body .z-icon-box .elementor-widget { padding: 0 !important; margin: 0 !important; line-height: 0; width: auto !important; }

/* --- poze de galerie ------------------------------------------------------
   Ca fundal cu `cover`, o poză se taie diferit la fiecare lățime de ecran.
   Aici se vede întreagă, iar containerul își ia înălțimea de la ea.          */
html body .z-foto {
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  align-self: flex-start;
}

html body .z-foto .elementor-widget-image,
html body .z-foto .elementor-widget-image .elementor-widget-container { width: 100%; }

html body .z-foto .elementor-widget-image img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

/* Într-un rând, pozele cu proporții diferite se aliniază sus, nu se întind. */
html body .e-con:has(> .z-foto) { align-items: flex-start; }

/* --- logo-urile de parteneri, toate în aceeași nuanță ---------------------
   `brightness(0)` le face siluete pline, indiferent de culorile din fiecare
   fișier; opacitatea dă nuanța. Așa arată ca un set, nu ca cinci fișiere
   adunate de la cinci clienți.                                              */
html body .z-logos.z-logos .elementor-widget-image img {
  filter: brightness(0) saturate(100%);
  opacity: .58;
  transition: opacity .2s ease;
}

html body .z-logos .elementor-widget-image:hover img { opacity: .85; }

@media (prefers-reduced-motion: reduce) {
  html body .z-logos.z-logos .elementor-widget-image img { transition: none; }
}

/* --- două poze pe un rând: aceeași înălțime, fără să tăiem ----------------
   Cele două machete au proporții diferite (1:1 și 1,29:1), deci una ieșea mai
   scurtă și rândul părea decalat. Le întindem containerele la aceeași înălțime
   și centrăm poza mai scurtă în ea. Fundalul containerului e griul din panoul
   machetelor, așa că banda rămasă nu se vede — și, spre deosebire de o
   proporție impusă, nicio poză nu se micșorează.                            */

html body .e-con:has(> .z-foto:nth-child(2)):not(:has(> .z-foto:nth-child(3))) {
  align-items: stretch;
}

html body .e-con:has(> .z-foto:nth-child(2)):not(:has(> .z-foto:nth-child(3))) > .z-foto {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 20px;
  background-color: #E9E9E9;
}

html body .e-con:has(> .z-foto:nth-child(2)):not(:has(> .z-foto:nth-child(3))) > .z-foto .elementor-widget-image img {
  border-radius: 0;
}

@media (max-width: 767px) {
  /* Pe telefon stau una sub alta, deci n-au ce egaliza. */
  html body .e-con:has(> .z-foto:nth-child(2)):not(:has(> .z-foto:nth-child(3))) > .z-foto {
    align-self: flex-start;
    background-color: transparent;
  }
  html body .e-con:has(> .z-foto:nth-child(2)):not(:has(> .z-foto:nth-child(3))) > .z-foto .elementor-widget-image img {
    border-radius: 20px;
  }
}

/* --- trei poze pe un rând: aceeași înălțime, fără să tăiem ----------------
   Trei poze cu proporții diferite ies la aceeași înălțime doar dacă lățimile
   lor stau în raportul proporțiilor. Lățimea exactă a fiecăreia vine din
   plugin (`flex: <proporție> 1 0`, scrisă în linie), pentru că depinde de
   fișier. Aici rămâne doar ce e la fel pentru toate.                        */

html body .e-con:has(> .z-foto:nth-child(3)) {
  align-items: flex-start;
  flex-wrap: nowrap;
}

html body .e-con:has(> .z-foto:nth-child(3)) > .z-foto {
  min-width: 0;
}

html body .e-con:has(> .z-foto:nth-child(3)) > .z-foto .elementor-widget-image img {
  width: 100%;
  height: auto;
  border-radius: 20px;
}

@media (max-width: 767px) {
  /* Pe telefon stau una sub alta: fiecare pe toată lățimea. */
  html body .e-con:has(> .z-foto:nth-child(3)) {
    flex-wrap: wrap;
  }
  html body .e-con:has(> .z-foto:nth-child(3)) > .z-foto {
    flex: 1 1 100% !important;
  }
}

/* --- cardurile din portofoliu: coperta și alinierea rândurilor ------------
   Cele două coperți vin din fișiere cu proporții diferite (1.43 și 1.78). Ca
   să înceapă textul la aceeași înălțime în ambele carduri, coperta stă acum
   într-o cutie fixă de 16:10, iar poza intră întreagă în ea (`contain`) — nu
   tăiem nimic. Banda rămasă ia culoarea marginii pozei, așa că nu se vede.

   Restul cardului: titlul stă lipit de coperta, iar cifra și butonul sunt
   ancorate jos. Diferența de lungime a textului rămâne la mijloc, unde nu se
   observă, în loc să decaleze tot ce urmează.                                */

html body .e-con:has(> .z-card) { align-items: stretch; }
html body .e-con:has(> .z-card) > .z-card { height: auto; }

html body .z-coperta {
  min-height: 0;
  padding: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 16px;
  background-color: #EDEEF0;
}

html body .z-coperta .elementor-widget-image,
html body .z-coperta .elementor-widget-image > .elementor-widget-container {
  width: 100%;
  height: 100%;
}

/* Coperțile umplu cadrul, ca pe pagina de start: trei plăci identice, fără
   margini colorate diferit de la un proiect la altul. */
html body .z-coperta img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
}

/* Anul nu se rupe în două rânduri: „2023 — prezent” lângă „2025”. */
html body .z-an { white-space: nowrap; }

/* Cifra și butonul, ancorate la baza cardului. */
html body .z-card > .z-card__stat { margin-top: auto; }

/* Titlul, serviciile și anul ocupă aceeași înălțime în toate cardurile, ca
   descrierea să pornească de la aceeași linie chiar dacă un titlu se rupe în
   două rânduri și altul nu. */
@media (min-width: 1025px) {
  html body .z-card > .z-card__cap { min-height: 180px; }
}

/* Pe tabletă, cardul e îngust: anul de lângă titlu îi fura din lățime și
   „Arra Medical Center" se rupea în două rânduri, iar Physio Flow nu. Aici
   anul urcă deasupra titlului, la fel în ambele carduri, iar titlul primește
   toată lățimea. */
@media (max-width: 1024px) {
  html body .z-card .z-card__cap {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 6px;
  }

  html body .z-card .z-card__cap h2.elementor-heading-title {
    font-size: 22px;
    line-height: 1.22;
  }
}

/* Carduri de aceeași înălțime pe rând: rândul se întinde, cardul umple. */
html body .e-con:has(> .z-egal) { align-items: stretch; }
html body .e-con > .z-egal { flex: 1 1 0; align-self: stretch; }
@media (max-width: 767px) {
  html body .e-con > .z-egal { flex: 0 0 auto; }
}

/* Pagina de start, „Proiecte recente": banda de sus are aceeași proporție ca
   pe pagina de portofoliu, ca poza să intre întreagă și cele trei carduri să
   arate la fel. */
html body #portofoliu .z-card > .z-stripe {
  aspect-ratio: 16 / 9;
  min-height: 0;
  background-size: cover;
  background-position: center;
}

/* Anul nu se rupe („din 2023"), iar titlul ocupă două rânduri în toate
   cardurile, ca serviciile să pornească de la aceeași linie. */
html body #portofoliu .z-card div.elementor-heading-title { white-space: nowrap; }

@media (min-width: 1025px) {
  html body #portofoliu .z-card h3.elementor-heading-title { min-height: 62px; }
}

/* --- comutatorul de limbă din meniu --------------------------------------
   E o intrare de meniu ca oricare alta, ca să moștenească singură stilul și
   comportamentul pe mobil, dar arată ca o etichetă, nu ca o pagină.         */
html body .z-header .elementor-nav-menu--main .z-lang > .elementor-item {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  border: 1px solid rgba(26, 46, 53, .18);
  padding: 6px 12px;
  margin-left: 6px;
}
html body .z-header .elementor-nav-menu--main .z-lang > .elementor-item:hover,
html body .z-header .elementor-nav-menu--main .z-lang > .elementor-item:focus {
  border-color: var(--z-ink);
  background-color: var(--z-white) !important;
}

/* --- perechile de capturi, când coloana e prea îngustă --------------------
   Două coloane de lățime fixă într-un rând fără ruptură: pe desktop încap, pe
   tabletă coloana de text se strânge sub suma lor și ieșeau din ecran. Fără
   prag de media query: `flex-wrap: wrap` rupe rândul doar când chiar nu
   încape, deci pe ecran mare nu schimbă nimic.                              */
html body .z-perechi {
  flex-wrap: wrap;
}
html body .z-perechi > .e-con {
  max-width: 100%;
}
html body .z-perechi > .e-con img {
  max-width: 100%;
  height: auto;
}

/* --- ceața de la marginile benzii ----------------------------------------
   Logo-urile nu se mai taie brusc la margine: intră într-o ceață care crește
   spre exterior, ca în componenta de la care ai pornit. Sunt patru straturi
   suprapuse de fiecare parte, fiecare cu un blur mai mare și dezvelit pe o
   fâșie mai îngustă lângă margine — cu unul singur s-ar vedea linia unde
   începe blurul. Peste ele, un degrade în culoarea fundalului, ca logo-ul să
   se stingă de tot, nu doar să devină o pată neclară.

   Straturile le pune JS-ul (un element are doar două pseudo-elemente, iar
   aici trebuie patru de fiecare parte).                                    */
html body .z-logos.z-marquee { position: relative; }

html body .z-marquee__ceata {
  position: absolute;
  top: -2px;
  bottom: -2px;
  /* Mai lată decât pe cezarpixel, și dinadins: acolo sunt șapte logo-uri pe
     aceeași lățime de bandă, aici cinci, cu spații mult mai mari între ele. Cu
     ceața îngustă, marginea cădea des exact într-un gol și părea că efectul
     lipsește. Aici trebuie să fie destul de lată cât să prindă mereu un logo. */
  width: clamp(110px, 19%, 270px);
  pointer-events: none;
  z-index: 3;
}
html body .z-marquee__ceata--stanga  { left: 0; }
html body .z-marquee__ceata--dreapta { right: 0; transform: scaleX(-1); }

html body .z-marquee__strat {
  position: absolute;
  inset: 0;
}

/* De la marginea benzii spre interior: blur tot mai mic, fâșie tot mai lată. */
html body .z-marquee__strat--1 {
  -webkit-backdrop-filter: blur(0.8px); backdrop-filter: blur(0.8px);
  -webkit-mask-image: linear-gradient(to right, #000 0 55%, transparent 100%);
          mask-image: linear-gradient(to right, #000 0 55%, transparent 100%);
}
html body .z-marquee__strat--2 {
  -webkit-backdrop-filter: blur(2.4px); backdrop-filter: blur(2.4px);
  -webkit-mask-image: linear-gradient(to right, #000 0 35%, transparent 72%);
          mask-image: linear-gradient(to right, #000 0 35%, transparent 72%);
}
html body .z-marquee__strat--3 {
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  -webkit-mask-image: linear-gradient(to right, #000 0 18%, transparent 48%);
          mask-image: linear-gradient(to right, #000 0 18%, transparent 48%);
}
html body .z-marquee__strat--4 {
  -webkit-backdrop-filter: blur(13px); backdrop-filter: blur(13px);
  -webkit-mask-image: linear-gradient(to right, #000 0 6%, transparent 26%);
          mask-image: linear-gradient(to right, #000 0 6%, transparent 26%);
}

/* Stingerea în culoarea fundalului secțiunii. */
html body .z-marquee__ceata::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
    var(--z-banda-fond, #fff) 0%,
    rgba(255, 255, 255, .82) 34%,
    rgba(255, 255, 255, 0) 100%);
}

/* Pe ecrane mici ceața ar mânca jumătate din bandă. */
@media (max-width: 767px) {
  html body .z-marquee__ceata { width: clamp(48px, 12%, 90px); }
  html body .z-marquee__strat--4 { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
}

/* Fără mișcare, banda se derulează cu degetul: ceața n-ar face decât să
   ascundă ce vrea omul să vadă. */
@media (prefers-reduced-motion: reduce) {
  html body .z-marquee__ceata { display: none; }
}

/* --- eticheta de an din cardul de proiect ---------------------------------
   Stă în același rând cu titlul și, fiind pe `nowrap`, se lăsa strânsă la mai
   puțin decât îi trebuie: „din 2023" ieșea tăiat. E o etichetă scurtă, deci nu
   are de ce să cedeze spațiu.                                                */
html body .z-card > .e-con > .elementor-widget-heading:last-child {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
}

/* --- bara juridică de sub subsol ------------------------------------------
   Datele firmei, legăturile către paginile obligatorii și calea către ANPC.
   O pun sub subsolul din Theme Builder, nu în el: rămâne acolo indiferent ce
   schimbi în șablon și e aceeași pe toate paginile, inclusiv pe cele engleze.

   Nu e loc de design — e loc de citit. Text mic, contrast suficient, nimic
   care să concureze cu subsolul propriu-zis.                                */
html body .zar-legal {
  background: var(--z-ink, #161616);
  color: rgba(255, 255, 255, .62);
  font-size: 12px;
  line-height: 1.7;
  padding: 18px 24px;
}
html body .zar-legal__in {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 28px;
}
html body .zar-legal__firma {
  margin: 0;
  flex: 1 1 320px;
}
html body .zar-legal__linkuri {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}
html body .zar-legal a {
  color: rgba(255, 255, 255, .78);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .24);
}
html body .zar-legal a:hover,
html body .zar-legal a:focus {
  color: #fff;
  border-bottom-color: #fff;
}
html body .zar-legal__anpc {
  white-space: nowrap;
}
/* Pictograma oficială SAL. Vine cu fundal alb și nu se poate colora, deci n-am
   ce să fac să se topească în bara neagră — o las la lățimea la care se citește
   scrisul din ea și îi scot linia de sub link, care ar arăta ca o eroare.     */
html body .zar-legal__anpc--imagine {
  border-bottom: 0;
  display: inline-flex;
  flex-shrink: 0;
  line-height: 0;
  border-radius: 4px;
  overflow: hidden;
  opacity: .92;
  transition: opacity .18s ease;
}
html body .zar-legal__anpc--imagine:hover,
html body .zar-legal__anpc--imagine:focus {
  border-bottom: 0;
  opacity: 1;
}
html body .zar-legal__anpc--imagine img {
  display: block;
  width: 200px;
  height: auto;
}
@media (max-width: 767px) {
  html body .zar-legal__anpc--imagine img {
    width: 168px;
  }
}


/* Paginile juridice: text lung, fără Elementor. Lățime de citit, nu de ecran. */
html body.zar-legal-pagina .site-main {
  max-width: 760px;
  margin-inline: auto;
  padding-block: 8px 64px;
}
html body.zar-legal-pagina .site-main h2 {
  margin-top: 40px;
}
html body .cp-legal-data {
  margin-top: 32px;
  font-size: 13px;
  opacity: .7;
}

/* --- banda de clienți ca slider continuu ---------------------------------
   Pista o mută JS-ul, cadru cu cadru (vezi zar-motion.js). Aici rămâne doar
   cutia: un rând care nu se rupe, tăiat la margini. Am scos degradeul de la
   capete — logo-urile se stingeau înainte să ajungă la margine, iar ce vrei
   să se vadă e că ies din cadru și vin altele din partea cealaltă.          */
html body .z-logos.z-marquee {
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 0;
  overflow: hidden;
  -webkit-mask-image: none;
          mask-image: none;
}

html body .z-marquee .z-marquee__track {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 56px;
  width: max-content;
  will-change: transform;
  animation: z-marquee var(--z-dur, 20s) linear infinite;
}

/* Pista merge exact cât face un set plus spațiul de după el. Setul următor e
   identic, deci cadrul de dinainte de salt arată la fel cu cel de după și
   cusătura nu se vede. `--z-shift` îl scrie JS-ul după ce măsoară. Fără el nu
   pornesc nimic: mai bine o bandă statică decât una care sare aiurea. */
@keyframes z-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-1 * var(--z-shift, 0px)), 0, 0); }
}

html body .z-marquee .z-marquee__copy {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 56px;
}

html body .z-marquee .elementor-widget-image {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  display: block;
}

@media (max-width: 1024px) {
  html body .z-marquee .z-marquee__track,
  html body .z-marquee .z-marquee__copy { gap: 44px; }
}

@media (max-width: 767px) {
  html body .z-marquee .z-marquee__track,
  html body .z-marquee .z-marquee__copy { gap: 32px; }
}

/* Cine a cerut mai puțină mișcare primește o bandă pe care o derulează singur. */
@media (prefers-reduced-motion: reduce) {
  html body .z-logos.z-marquee {
    overflow-x: auto;
    scrollbar-width: none;
  }
  html body .z-logos.z-marquee::-webkit-scrollbar { display: none; }
}

/* --- eticheta de an din cardul de proiect ---------------------------------
   Stă în același rând cu titlul și, fiind pe `nowrap`, se lăsa strânsă la mai
   puțin decât îi trebuie: „din 2023" ieșea tăiat. E o etichetă scurtă, deci nu
   are de ce să cedeze spațiu.                                                */
html body .z-card > .e-con > .elementor-widget-heading:last-child {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
}

/* --- bara juridică de sub subsol ------------------------------------------
   Datele firmei, legăturile către paginile obligatorii și calea către ANPC.
   O pun sub subsolul din Theme Builder, nu în el: rămâne acolo indiferent ce
   schimbi în șablon și e aceeași pe toate paginile, inclusiv pe cele engleze.

   Nu e loc de design — e loc de citit. Text mic, contrast suficient, nimic
   care să concureze cu subsolul propriu-zis.                                */
html body .zar-legal {
  background: var(--z-ink, #161616);
  color: rgba(255, 255, 255, .62);
  font-size: 12px;
  line-height: 1.7;
  padding: 18px 24px;
}
html body .zar-legal__in {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 28px;
}
html body .zar-legal__firma {
  margin: 0;
  flex: 1 1 320px;
}
html body .zar-legal__linkuri {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}
html body .zar-legal a {
  color: rgba(255, 255, 255, .78);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .24);
}
html body .zar-legal a:hover,
html body .zar-legal a:focus {
  color: #fff;
  border-bottom-color: #fff;
}
html body .zar-legal__anpc {
  white-space: nowrap;
}
/* Pictograma oficială SAL. Vine cu fundal alb și nu se poate colora, deci n-am
   ce să fac să se topească în bara neagră — o las la lățimea la care se citește
   scrisul din ea și îi scot linia de sub link, care ar arăta ca o eroare.     */
html body .zar-legal__anpc--imagine {
  border-bottom: 0;
  display: inline-flex;
  flex-shrink: 0;
  line-height: 0;
  border-radius: 4px;
  overflow: hidden;
  opacity: .92;
  transition: opacity .18s ease;
}
html body .zar-legal__anpc--imagine:hover,
html body .zar-legal__anpc--imagine:focus {
  border-bottom: 0;
  opacity: 1;
}
html body .zar-legal__anpc--imagine img {
  display: block;
  width: 200px;
  height: auto;
}
@media (max-width: 767px) {
  html body .zar-legal__anpc--imagine img {
    width: 168px;
  }
}


/* Paginile juridice: text lung, fără Elementor. Lățime de citit, nu de ecran. */
html body.zar-legal-pagina .site-main {
  max-width: 760px;
  margin-inline: auto;
  padding-block: 8px 64px;
}
html body.zar-legal-pagina .site-main h2 {
  margin-top: 40px;
}
html body .cp-legal-data {
  margin-top: 32px;
  font-size: 13px;
  opacity: .7;
}

/* --- banda de clienți ca slider continuu ---------------------------------
   Pista ține două copii identice ale setului de logo-uri. Animația o duce
   exact cât face o copie plus spațiul dintre ele (`--z-shift`, măsurat în JS
   după ce se încarcă imaginile), deci momentul în care sare înapoi la zero
   arată identic cu cadrul dinainte. Marginile se sting într-un degrade, ca
   logo-urile să nu apară și să dispară tăiate brusc.                        */
html body .z-logos.z-marquee {
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 72px, #000 calc(100% - 72px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 72px, #000 calc(100% - 72px), transparent 100%);
}

html body .z-marquee .z-marquee__track {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 56px;
  width: max-content;
  animation: z-marquee var(--z-dur, 34s) linear infinite;
}

html body .z-marquee .z-marquee__copy {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 56px;
}

html body .z-marquee .elementor-widget-image {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  display: block;
}

@keyframes z-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-1 * var(--z-shift, 50%)), 0, 0); }
}

/* Se oprea și sub cursor, nu doar la focus din tastatură. Suna frumos, dar în
   practică omul derulează până la bandă, lasă mouse-ul pe ea și banda îngheață
   — arată exact ca și cum n-ar merge deloc. Pentru un rând de logo-uri, care nu
   e nici de citit, nici de apăsat, pauza la hover nu aduce nimic. O păstrez
   doar la focus, unde chiar folosește cuiva care navighează din tastatură. */
html body .z-marquee:focus-within .z-marquee__track {
  animation-play-state: paused;
}

@media (max-width: 1024px) {
  html body .z-marquee .z-marquee__track,
  html body .z-marquee .z-marquee__copy { gap: 44px; }
  html body .z-logos.z-marquee {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  }
}

@media (max-width: 767px) {
  html body .z-marquee .z-marquee__track,
  html body .z-marquee .z-marquee__copy { gap: 32px; }
  html body .z-logos.z-marquee {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  }
}

/* Cine a cerut mai puțină mișcare primește o bandă pe care o derulează singur. */
@media (prefers-reduced-motion: reduce) {
  html body .z-marquee .z-marquee__track { animation: none; }
  html body .z-logos.z-marquee {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: none;
            mask-image: none;
  }
  html body .z-logos.z-marquee::-webkit-scrollbar { display: none; }
}

/* Traseele Lucide folosite ca mască, o singură dată. Culoarea din SVG nu
   contează — la mască se citește doar unde s-a desenat ceva. */
:root {
  --z-ic-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --z-ic-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}

:root { --z-tick: #5BBFB5; }

/* --- tabelul de comparație: aliniere și iconițe Lucide ---------------------
   Două lucruri, amândouă vizibile în captura pe care mi-a trimis-o.

   1. Alinierea. Rândul de antet începea cu o celulă goală, ca titlurile să
      cadă sub coloanele lor. Curățenia de containere goale pe care am rulat-o
      mai devreme a măturat-o — era un container fără copii, exact tiparul pe
      care îl căuta — și tot antetul a alunecat o coloană la dreapta. Nu pun
      celula goală la loc, fiindcă ar putea fi măturată din nou: îi spun în
      schimb primului titlu să înceapă din coloana a doua, dar numai când
      rândul chiar are patru celule în loc de cinci. Acolo unde celula goală
      există (zar-studio), regula nu se aplică.

   2. Iconițele. Bifa era desenată de mână, iar „nu" era o linie de dialog
      tipografică. Le înlocuiesc cu traseele Lucide (licență ISC) — aceleași
      pe care le folosesc și în restul site-ului — desenate ca mască peste
      culoarea textului, ca să nu fiu nevoit să rescriu conținutul paginii.  */

.e-con.z-trow:first-child:not(:has(> :nth-child(5))) > *:first-child,
.e-con.z-trow:first-child > .e-con-inner:not(:has(> :nth-child(5))) > *:first-child {
  grid-column: 2;
}

/* bifa — widget-ul HTML nu are întotdeauna un `.elementor-widget-container`
   înăuntru, așa că desenez direct pe el. */
html body .e-con.z-trow .elementor-widget-html svg { display: none; }
html body .e-con.z-trow .elementor-widget-html {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  color: var(--z-tick, #A8CB1C);
}
html body .e-con.z-trow .elementor-widget-html > .elementor-widget-container {
  display: none;
}
html body .e-con.z-trow .elementor-widget-html::after {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask: var(--z-ic-check) center / contain no-repeat;
          mask: var(--z-ic-check) center / contain no-repeat;
}

/* „nu" — minus, nu linie de dialog */
html body .e-con.z-trow:not(:first-child) > *:not(:first-child) .elementor-heading-title,
html body .e-con.z-trow:not(:first-child) > .e-con-inner > *:not(:first-child) .elementor-heading-title {
  font-size: 0;
  line-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
html body .e-con.z-trow:not(:first-child) > *:not(:first-child) .elementor-heading-title::after,
html body .e-con.z-trow:not(:first-child) > .e-con-inner > *:not(:first-child) .elementor-heading-title::after {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: var(--z-ic-minus) center / contain no-repeat;
          mask: var(--z-ic-minus) center / contain no-repeat;
}