/*  RemoMedia — punte către marcajul Elementor
    ------------------------------------------------------------------
    `theme.css` descrie sistemul de design pe marcaj scris de mână.
    Elementor generează altă structură: widgetul are un înveliș, iar
    elementul real stă înăuntru cu stilurile lui.

    Fișierul acesta leagă cele două. Nu conține design nou — doar
    traduce ce e deja în theme.css către clasele Elementor.
    Se încarcă ultimul, ca să învingă kitul.
    ------------------------------------------------------------------ */

/* Fundalul paginii urmează tema, nu o valoare fixă din kitul Elementor.
   Fără regula asta, comutatorul întunecat/deschis schimbă totul în afară de
   fundal, iar textul devine ilizibil. */
body,
body.elementor-page,
body.elementor-kit-4{background-color:var(--stone) !important; color:var(--ink)}

/* Culorile globale ale kitului sunt salvate ca și constante de temă DESCHISĂ
   (#14161A pentru text, #E4E4DE pentru fundal). Orice widget care le
   folosește — etichetele de formular, de exemplu — iese ilizibil pe tema
   întunecată. Le legăm de variabilele temei, ca să urmeze comutatorul.
   Selectorul pe atribut acoperă orice id de kit, local sau în producție. */
body[class*="elementor-kit-"]{
  --e-global-color-primary:var(--build);
  --e-global-color-secondary:var(--grow);
  --e-global-color-text:var(--ink);
  --e-global-color-accent:var(--stone);
  --e-global-color-rmsheet:var(--sheet);
  --e-global-color-rmrule:var(--rule);
  --e-global-color-rmmuted:var(--muted);
}

/* ---------------- valorile implicite ale Elementorului ---------------- */

/* Elementor pune pe FIECARE container 10px padding și 20px gap. Designul
   nostru își gestionează singur spațierea, iar aceste valori o dublează:
   antetul iese 89px în loc de 69, secțiunile capătă margini laterale
   nedorite, iar ritmul vertical se dilată peste tot.
   Le ducem la zero; clasele din design le pun la loc unde chiar trebuie. */
.elementor-element.e-con,
.elementor-element.e-con.e-parent,
.elementor-element.e-con.e-child{
  --padding-block-start:0px; --padding-block-end:0px;
  --padding-inline-start:0px; --padding-inline-end:0px;
  --gap:0px; --row-gap:0px; --column-gap:0px;
}

/* Gap-urile din design, puse înapoi acolo unde chiar există. Le enumerăm
   explicit, ca să nu depindem de valoarea implicită a constructorului. */
.col-64{--row-gap:22px; --gap:22px; gap:22px}
.spec-corp{--row-gap:20px; --gap:20px; gap:20px}
.sp-sectiune > .wrap,.sp-mica > .wrap{--row-gap:18px; --gap:18px; gap:18px}
.head-in{--column-gap:20px; --gap:20px; gap:20px}
.rand-hero{--column-gap:56px; --gap:56px; gap:clamp(32px,4.6vw,56px)}
.cta-in{--gap:26px; gap:26px}
.foot-grid{--gap:34px; gap:34px}
.foot-col{--row-gap:4px; --gap:4px; gap:4px}
.actiuni{--column-gap:12px; --gap:12px; gap:12px; display:flex !important;
         --flex-direction:row; flex-direction:row !important; flex-wrap:wrap;
         --width:auto; width:auto !important}

/* Containerele „boxed" își învelesc copiii într-un `.e-con-inner`. Direcția,
   gap-ul și alinierea rămân pe învelișul exterior și se aplică pe un singur
   copil — adică pe nimic. Le trecem mai departe. */
.e-con-boxed > .e-con-inner{
  display:flex;
  flex-direction:inherit;
  gap:inherit;
  align-items:inherit;
  justify-content:inherit;
  flex-wrap:inherit;
  width:100%;
}

/* ---------------- reguli generale de moștenire ---------------- */

/* Titlul propriu-zis stă în interiorul widgetului; fără asta, tot ce
   punem pe înveliș se oprește acolo. */
.elementor-widget-heading .elementor-heading-title{
  color:inherit; font:inherit; letter-spacing:inherit; line-height:inherit;
  font-variation-settings:inherit; text-transform:inherit; margin:0;
}

/* Editorul de text adaugă marginile lui la paragrafe. */
.elementor-widget-text-editor p:first-child{margin-top:0}
.elementor-widget-text-editor p:last-child{margin-bottom:0}

/* Elementor pune spațiu între widgeturi; îl controlăm noi, din containere. */
.elementor-widget:not(:last-child){margin-block-end:0}

/* Widgetul de buton își adaugă înălțime peste buton (înveliș 67px pentru un
   buton de 45px). Îl strângem la conținut. */
.elementor-widget-button,
.elementor-widget-button > .elementor-widget-container,
.elementor-widget-button .elementor-button-wrapper{line-height:0}
.elementor-widget-button .elementor-button{line-height:1.62}

/* ---------------- antet ---------------- */

/* `position:sticky` pe .site-head nu are efect: părintele lui,
   învelișul Theme Builder, e exact cât antetul de înalt, deci nu există
   spațiu în care să rămână lipit. Lipicios trebuie să fie învelișul,
   care e copil direct al lui <body>. */
header.elementor-location-header{position:sticky; top:0; z-index:60}

.site-head{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--stone) 90%, transparent);
  backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid var(--rule);
}
/* theme.css fixează 68px pentru marcajul din preview; aici bara trebuie să
   poată crește dacă totuși ceva se împachetează — altfel copiii ies din antet
   peste conținut, cum se întâmpla pe telefon. */
.head-in{height:auto; min-height:68px; padding-block:8px; gap:20px}
.head-in > *{flex-shrink:0}

/* Blocul de brand din Theme Builder: containerul fără clasă de dinaintea
   meniului. Logo lângă nume, pe un singur rând, la orice lățime — pe telefon
   Elementor îl așeza implicit pe coloană (logo peste nume). */
.head-in > .e-con:first-child{
  --flex-direction:row; flex-direction:row !important;
  align-items:center; --column-gap:11px; --gap:11px; gap:11px;
  --width:auto; width:auto !important; flex:0 0 auto !important;
}
/* Inclusiv widgetul de logo: Elementor îi cere 100% lățime, deci umplea
   rândul singur și împingea numele dedesubt. */
.head-in > .e-con:first-child{flex-wrap:nowrap}
.head-in > .e-con:first-child > *{
  --width:auto; width:auto !important; flex:0 0 auto !important;
}
.head-in > .e-con:first-child > .e-con{
  --flex-direction:column; flex-direction:column !important;
  --gap:0px; gap:0;
}

.bname .elementor-heading-title{
  font-size:17.5px; font-weight:800; color:var(--ink);
  font-variation-settings:'wdth' 112,'wght' 800; letter-spacing:-.02em; line-height:1.6;
}
.btag .elementor-heading-title{
  font-family:var(--mono); font-size:9px; font-weight:500; color:var(--muted);
  letter-spacing:.24em; text-transform:uppercase; line-height:1.62;
}
.bname,.btag{line-height:0; white-space:nowrap}
/* Blocul cu numele nu are voie să se strângă sub textul lui: „STUDIO DIGITAL"
   se rupea pe două rânduri. */
.bwrap,.brand > .e-con,.brand{flex:0 0 auto !important; --width:auto; width:auto !important}

/* meniul principal */
.mainnav{flex-shrink:0}
.mainnav .elementor-nav-menu{gap:2px; flex-wrap:nowrap}
.mainnav .elementor-nav-menu > li{white-space:nowrap}
.mainnav .elementor-nav-menu a.elementor-item{
  font-family:var(--sans); font-size:14.5px; font-weight:500; color:var(--ink-2);
  padding:9px 14px; letter-spacing:0; text-transform:none;
}
.mainnav .elementor-nav-menu a.elementor-item:hover,
.mainnav .elementor-nav-menu a.elementor-item.elementor-item-active{
  color:var(--ink); background:transparent;
}
.mainnav .elementor-nav-menu--main .elementor-item:before,
.mainnav .elementor-nav-menu--main .elementor-item:after{
  border-color:var(--accent) !important;
}
.mainnav .elementor-nav-menu--dropdown{
  background:var(--sheet); border:1px solid var(--rule); box-shadow:var(--shadow-2);
  min-width:230px;
}
.mainnav .elementor-nav-menu--dropdown a.elementor-sub-item{
  font-family:var(--sans); font-size:14px; font-weight:500; color:var(--ink-2);
  padding:11px 16px; text-transform:none; letter-spacing:0;
}
.mainnav .elementor-nav-menu--dropdown a.elementor-sub-item:hover{
  background:var(--sheet-2); color:var(--ink);
}
/* Submeniul trebuie să iasă din bara de antet, nu să fie tăiat de ea. */
.site-head,.head-in,.mainnav,.mainnav .elementor-nav-menu{overflow:visible}

/* theme.css ascunde .mainnav sub 1040px, pentru că în preview acolo există
   un burger separat. În WordPress hamburgerul e ÎN widgetul de meniu, deci
   widgetul trebuie să rămână vizibil la orice lățime; Elementor decide
   singur ce arată înăuntru (meniul plin sau hamburgerul). */
.mainnav{display:flex !important; align-items:center}

/* Hamburgerul Elementor, adus la forma burgerului din design.
   Fără `display` aici: Elementor îl ascunde singur peste pragul lui, iar o
   valoare pusă de noi ar învinge-o și l-ar arăta și pe desktop, lângă
   meniul plin. Regula de afișare stă în pragul de mai jos. */
.mainnav .elementor-menu-toggle{
  width:42px; height:42px; place-items:center; margin-left:auto;
  border:1px solid var(--rule); border-radius:1px; background:transparent;
  color:var(--ink-2); cursor:pointer; padding:0;
  transition:border-color .22s, color .22s;
}
.mainnav .elementor-menu-toggle:hover,
.mainnav .elementor-menu-toggle.elementor-active{border-color:var(--ink); color:var(--ink)}
.mainnav .elementor-menu-toggle svg{width:20px; height:20px; fill:currentColor}
.mainnav .elementor-menu-toggle i{font-size:20px}
.mainnav .elementor-menu-toggle:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* Pe lățimile cu hamburger (Elementor comută la ≤1024): brandul la stânga,
   hamburgerul și comutatorul de temă grupate la dreapta, toate pe un rând. */
@media(max-width:1024px){
  .head-in{justify-content:flex-start; gap:12px}
  .head-in > .e-con:nth-child(2){margin-left:auto; flex:0 0 auto !important}

  /* Aici — și numai aici — hamburgerul are voie să apară. */
  .mainnav .elementor-menu-toggle{display:grid}

  /* Meniul deschis nu e un dropdown plutitor, ci sertarul din design:
     lipit sub antet, pe toată lățimea, cu legături mari.
     Peste tot mai jos selectorul e `nav.…--dropdown`, nu clasa singură:
     `elementor-nav-menu--dropdown` stă și pe `<ul class="sub-menu">`, adică
     pe submeniul de hover de pe desktop. */
  .mainnav nav.elementor-nav-menu--dropdown{
    position:fixed !important; top:69px !important; left:0 !important; right:0 !important;
    width:auto !important; min-width:0 !important; margin:0 !important;
    max-height:calc(100vh - 69px); overflow-y:auto;
    background:var(--stone); border:none; border-top:1px solid var(--rule);
    box-shadow:var(--shadow-2); padding:8px var(--gutter) 30px;
  }
  .mainnav nav.elementor-nav-menu--dropdown a.elementor-item,
  .mainnav nav.elementor-nav-menu--dropdown a.elementor-sub-item{
    display:block; padding:15px 0; border-bottom:1px solid var(--rule-soft);
    background:transparent; color:var(--ink);
    font-family:var(--sans); font-size:18px; font-weight:600;
    font-variation-settings:'wdth' 106,'wght' 600;
  }
  .mainnav nav.elementor-nav-menu--dropdown a.elementor-item:hover,
  .mainnav nav.elementor-nav-menu--dropdown a.elementor-item.elementor-item-active{
    color:var(--accent); background:transparent;
  }

  /* Intrarea cu submeniu („Servicii"). Săgeata e un `<span>` din INTERIORUL
     legăturii, nu un frate al ei — de aceea legătura e cea care trebuie să
     devină flex. Altfel săgeata cade pe un rând al ei, sub titlu, neagră și
     nestilizată, și rândul crește la 103px. */
  .mainnav nav.elementor-nav-menu--dropdown a.has-submenu{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
  }
  .mainnav nav.elementor-nav-menu--dropdown .sub-arrow{
    display:grid; place-items:center; width:32px; height:32px; flex:none;
    margin:0; padding:0; border:none; background:transparent; color:var(--muted);
  }
  .mainnav nav.elementor-nav-menu--dropdown .sub-arrow i,
  .mainnav nav.elementor-nav-menu--dropdown .sub-arrow svg{
    font-size:13px; width:13px; height:13px; fill:currentColor;
    transition:transform .22s var(--ease);
  }
  .mainnav nav.elementor-nav-menu--dropdown a[aria-expanded="true"] .sub-arrow svg,
  .mainnav nav.elementor-nav-menu--dropdown a[aria-expanded="true"] .sub-arrow i{
    transform:rotate(180deg);
  }

  /* Submeniul desfășurat: retras spre dreapta și mai mic, ca să se vadă că
     atârnă de „Servicii", nu că e o intrare de nivel principal. */
  /* Fără chenarul, fundalul și umbra dropdownului de desktop: în sertar
     submeniul e o listă retrasă, nu un panou care plutește. */
  .mainnav nav.elementor-nav-menu--dropdown ul.sub-menu{
    padding:0 0 0 16px; margin:0 0 6px;
    background:transparent; box-shadow:none;
    border:none; border-left:1px solid var(--rule);
  }
  .mainnav nav.elementor-nav-menu--dropdown ul.sub-menu a.elementor-sub-item{
    font-size:15.5px; font-weight:500; padding:12px 0; color:var(--ink-2);
  }
  .mainnav nav.elementor-nav-menu--dropdown ul.sub-menu li:last-child a{border-bottom:none}

  /* Copia butonului de ofertă, adăugată la finalul sertarului. */
  .mainnav nav.elementor-nav-menu--dropdown a.sertar-cta{
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    margin-top:24px; padding:14px 24px; border:1px solid var(--accent);
    background:var(--accent); color:var(--accent-on);
    font-family:var(--sans); font-size:15px; font-weight:600; line-height:1.62;
    text-decoration:none; border-radius:1px;
  }
}

/* ---------------- butoane ---------------- */

/* Clasa de buton stă pe învelișul widgetului, dar forma o poartă `<a>`-ul
   dinăuntru. Fără asta, chenarul și fundalul apar de două ori, iar învelișul
   se întinde pe toată lățimea. */
.elementor-widget-button.btn,
.elementor-widget-button[class*="btn--"]{
  border:none !important; background:none !important; padding:0 !important;
  width:auto !important; --width:auto; align-self:flex-start;
}

.elementor-widget-button .elementor-button{
  display:inline-flex; align-items:center; gap:10px; justify-content:center;
  padding:14px 24px; border-radius:1px; border:1px solid var(--ink);
  background:var(--ink); color:var(--stone);
  font-family:var(--sans); font-size:15px; font-weight:600; letter-spacing:0;
  /* Elementor pune line-height 1 pe buton; designul are 1.62, de unde
     diferența de 9px în înălțime. */
  line-height:1.62; text-transform:none; fill:currentColor;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease),
             background .2s, color .2s, border-color .2s;
}
.elementor-widget-button .elementor-button:hover{
  transform:translateY(-2px); box-shadow:var(--shadow-1);
}
.btn--accent .elementor-button{
  background:var(--accent); border-color:var(--accent); color:var(--accent-on);
}
.btn--line .elementor-button{
  background:transparent; border-color:var(--rule); color:var(--ink);
}
.btn--line .elementor-button:hover{border-color:var(--ink)}
.btn--sm .elementor-button{padding:10px 18px; font-size:14px}
.cta .elementor-widget-button .elementor-button{
  background:var(--accent); border-color:var(--accent); color:var(--accent-on);
}

/* ---------------- pastila și eticheta ---------------- */

/* Widgeturile Elementor sunt bloc pe toată lățimea; pastila trebuie să se
   strângă la conținutul ei. */
/* Clasa stă pe învelișul widgetului, iar chenarul și fundalul le poartă
   elementul dinăuntru — altfel apar de două ori. */
.pill{width:auto !important; align-self:flex-start; line-height:0;
      border:none !important; background:none !important; padding:0 !important}
.pill .elementor-heading-title{
  display:inline-flex; align-items:center; gap:8px; padding:6px 13px;
  border:1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  background:var(--accent-wash); color:var(--accent);
  font-family:var(--mono); font-size:11px; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase;
}
.code .elementor-heading-title{
  font-family:var(--mono); font-size:11.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}

/* ---------------- text ---------------- */

.lead .elementor-widget-container{
  font-size:clamp(17px,1.5vw,19.5px); line-height:1.6; color:var(--ink-2); max-width:62ch;
}
.p-sm .elementor-widget-container{font-size:14px; line-height:1.62; color:var(--muted)}

/* ---------------- subsol ---------------- */

.site-foot{border-top:1px solid var(--rule); padding-block:44px 34px}
.foot-col .elementor-heading-title{
  font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted); margin-bottom:6px;
}
/* 8px sus și jos, nu 5: cu 5 legătura are 33px, sub pragul la care se
   nimerește cu degetul. */
.foot-col a{
  display:block; padding:8px 0; text-decoration:none; color:var(--ink-2);
  font-size:14.5px; transition:color .2s;
}
.foot-col a:hover{color:var(--accent)}
.foot-grid{align-items:flex-start}
.foot-bar{padding-top:24px; border-top:1px solid var(--rule); margin-top:38px}

/* ---------------- bandă de final ---------------- */

.cta{
  position:relative; overflow:hidden; background:var(--ink); color:var(--stone);
  padding:clamp(36px,5.4vw,66px);
}
.cta .elementor-heading-title{color:var(--stone)}
.cta .elementor-widget-text-editor{color:color-mix(in srgb, var(--stone) 70%, transparent)}
.cta-in{gap:26px}
@media(min-width:900px){
  .cta-in{flex-direction:row; align-items:center; justify-content:space-between; gap:44px}
}

/* ---------------- formularul ---------------- */

/* Culorile poartă !important pentru că șablonul paginii de contact are
   valori salvate în setările widgetului (fundal alb, text de kit), scoase de
   Elementor în CSS-ul per-pagină, cu specificitate mai mare decât a punții. */
.elementor-field-group .elementor-field-label{
  font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.11em;
  text-transform:uppercase; color:var(--muted) !important; margin-bottom:7px;
}
.elementor-field-group .elementor-field{
  font-family:var(--sans); font-size:15px; padding:13px 14px;
  background:var(--sheet) !important; border:1px solid var(--rule) !important;
  color:var(--ink) !important; border-radius:1px;
}
.elementor-field-group .elementor-field::placeholder{color:var(--muted)}
.elementor-field-group .elementor-field:focus{
  outline:none; border-color:var(--accent) !important;
  box-shadow:0 0 0 3px var(--accent-wash);
}
/* Textul de lângă bifa GDPR folosea culoarea de text a kitului. */
.elementor-field-subgroup label{
  font-family:var(--sans); font-size:14px; font-weight:400; line-height:1.55;
  letter-spacing:0; text-transform:none; color:var(--ink-2) !important;
}
/* La `select`, clasa `.elementor-field` stă pe învelișul din jur, iar
   `<select>`-ul dinăuntru rămâne alb, cum îl desenează browserul. Rezultatul
   era o casetă albă într-o ramă întunecată. Rama o poartă învelișul; câmpul
   propriu-zis devine transparent. */
.elementor-field-group .elementor-select-wrapper{padding:0}
.elementor-field-group .elementor-select-wrapper select{
  background:transparent !important; border:none !important;
  color:var(--ink) !important; font-family:var(--sans); font-size:15px;
  padding:13px 34px 13px 14px; width:100%;
}
.elementor-field-group .elementor-select-wrapper select:focus{outline:none}
.elementor-field-group .elementor-select-wrapper::before{color:var(--muted)}
/* Lista deschisă a select-ului o desenează sistemul, nu pagina: fără
   culori explicite, pe tema întunecată ieșea text alb pe alb. */
.elementor-field-group .elementor-select-wrapper select option{
  background:var(--sheet); color:var(--ink);
}

/* Butonul de trimitere lua tipografia „accent" a kitului (mono, majuscule) și
   culorile lui. În design e butonul obișnuit, în culoarea de accent. */
.elementor-form .elementor-field-type-submit .elementor-button{
  background:var(--accent) !important; border:1px solid var(--accent) !important;
  color:var(--accent-on) !important;
  font-family:var(--sans) !important; font-size:15px !important; font-weight:600;
  letter-spacing:0 !important; text-transform:none !important;
}
.elementor-form .elementor-field-type-submit .elementor-button:hover{
  transform:translateY(-2px); box-shadow:var(--shadow-1);
}

/* ---------------- logo ---------------- */

/* Umplutura verticală nu se vede — bara de antet are oricum 68px — dar duce
   zona de atins a mărcii de la 30 la 42px. */
.logo{display:inline-flex; align-items:center; color:var(--ink);
      text-decoration:none; padding-block:6px}
.logo svg{width:30px; height:30px; display:block}
.logo .logo-propriu{max-width:120px; height:auto; display:block}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; color:inherit}

/* ---------------- ajustări de imagine ---------------- */

.elementor-widget-theme-site-logo img{max-width:30px; height:auto}
.spec-fig .elementor-widget-container{min-height:0}
.spec .elementor-widget-image:empty{display:none}


/* ---------------- rândurile de serviciu ---------------- */

/* Ies dintr-o scurtătură, deci Elementor nu le știe; culorile de link ale
   kitului le-ar face albastre. */
.svc h3{color:var(--ink); margin:0}
.svc:hover h3{color:var(--ink)}
.svc .p-sm{color:var(--muted)}
.svc-code{color:var(--svc-accent)}

/* ---------------- etichetele din hero ---------------- */

.hero-tags .elementor-widget-container p{
  display:flex; flex-wrap:wrap; gap:8px; margin:0;
}
.hero-tags span{
  font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted);
  border:1px solid var(--rule); padding:6px 11px;
}

/* ---------------- cifrele de pe prima pagină ---------------- */

.figs{border-block:1px solid var(--rule)}
.fig{padding:26px 22px 28px; border-right:1px solid var(--rule); flex:1}
.fig:last-child{border-right:none}
.fig-val .elementor-heading-title{
  font-size:clamp(30px,3.8vw,44px); line-height:1; font-weight:800;
  font-variation-settings:'wdth' 114,'wght' 800; letter-spacing:-.035em;
  color:var(--ink); font-variant-numeric:tabular-nums;
}


/* ---------------- filtrele din portofoliu ---------------- */

/* Sunt <button>, iar kitul Elementor stilizează toate butoanele. */
.filters .filter{
  font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; padding:9px 15px;
  border:1px solid var(--rule); background:transparent; color:var(--muted);
  border-radius:1px; cursor:pointer; transition:all .22s;
}
.filters .filter:hover{border-color:var(--ink); color:var(--ink); background:transparent}
.filters .filter[aria-pressed="true"]{
  background:var(--ink); border-color:var(--ink); color:var(--stone);
}
.work.hide{display:none}


/* ---------------- planșa de serviciu ---------------- */

.spec{background:var(--sheet); border:1px solid var(--rule); box-shadow:var(--shadow-2)}
.spec-top{
  padding:13px 16px; border-bottom:1px solid var(--rule); background:var(--sheet-2);
}
.spec-corp{padding:22px}
.spec-fig{
  border:1px solid var(--rule); background:var(--stone);
  overflow:hidden; line-height:0;
}
.spec-fig svg,.spec-fig img{width:100%; height:auto; display:block}
.code--accent .elementor-heading-title{color:var(--accent)}


/* =====================================================================
   ARANJAREA
   Elementor 4 pune containerele pe grid și nu mai expune direcția flex ca
   setare simplă. În loc să ne luptăm cu el, îi lăsăm structura și facem
   aranjarea aici, cu aceleași reguli ca în preview. Clasele sunt cele pe
   care le pui în câmpul „CSS Classes".
   ===================================================================== */

/* Elementor ține direcția și lățimea în variabile inline pe element
   (`--flex-direction`, `--width`), iar `flex-direction: var(--flex-direction)`
   le citește. O clasă obișnuită nu le poate învinge — trebuie schimbate
   variabilele, nu proprietățile. */
.wrap,.head-in,.hero-grid,.rand-hero,.foot-grid,.foot-col,.cta-in,
.spec,.spec-top,.spec-corp,.figs,.fig,.plan-head{
  display:flex !important;
}
.wrap,.spec,.spec-corp,.foot-col,.fig{--flex-direction:column}
.head-in,.rand-hero,.hero-grid,.foot-grid,.cta-in,.figs,.spec-top,.plan-head{
  --flex-direction:row;
}

/* --- lățimea de citit --- */
.wrap{
  flex-direction:column !important; width:100%;
  max-width:var(--maxw); margin-inline:auto;
  padding-inline:var(--gutter); gap:0;
}

/* --- rânduri --- */
.head-in,.rand-hero,.hero-grid,.foot-grid,.cta-in,.figs,.spec-top,.plan-head{
  flex-direction:row !important;
}
.spec,.spec-corp,.foot-col,.fig{flex-direction:column !important}

.head-in{align-items:center; justify-content:space-between; gap:20px;
         min-height:68px; flex-wrap:wrap; padding-block:0}
/* Fiecare bloc se strânge la conținutul lui. Cheia e `--width:auto`:
   containerele Elementor cer implicit 100% lățime, deci fără asta fiecare
   bloc ocupă un rând întreg. */
.head-in > *{--width:auto; width:auto !important; flex:0 1 auto !important; min-width:0}
.cap-dreapta{--flex-direction:row; flex-direction:row !important; display:flex !important;
             align-items:center; --column-gap:10px; --gap:10px; gap:10px;
             flex:0 0 auto !important; flex-wrap:nowrap}
/* Butonul din antet nu are voie să se rupă pe mai multe rânduri: e ultimul
   element din bară, deci el cedează primul când spațiul se strânge. */
.head-cta .elementor-button{white-space:nowrap}
.head-cta{flex:0 0 auto !important}
/* Meniul e cel care cedează spațiu, nu butonul. */
.mainnav{flex:0 1 auto !important; min-width:0}
/* Fără overflow ascuns aici: ar tăia submeniul care se deschide la hover. */
.mainnav{overflow:visible}
/* Ca în preview: butonul de ofertă rămâne în antet de la 760px în sus și
   dispare doar pe telefon, unde nu încape lângă brand. */
@media(max-width:759px){ .head-cta{display:none} }
.spec-top{align-items:center; justify-content:space-between}
.plan-head{align-items:flex-start; justify-content:space-between; gap:12px}

/* --- hero: două coloane, ca în preview --- */
.rand-hero{gap:clamp(32px,4.6vw,56px); align-items:center}
@media(min-width:1000px){
  .rand-hero > .col-64{--width:56%; flex:0 0 56% !important; max-width:56%}
  .rand-hero > .col-36{--width:40%; flex:0 0 40% !important; max-width:40%}
}
/* Fără !important regula pierdea în fața lui `row !important` din rândul de
   bază, iar hero-ul rămânea pe două coloane strânse între 768 și 999px. */
@media(max-width:999px){
  .rand-hero{--flex-direction:column; flex-direction:column !important; align-items:stretch}
  .rand-hero > *{--width:100%; flex:1 1 auto !important; max-width:100%}
}

/* --- cifrele --- */
.figs{flex-direction:row; flex-wrap:wrap; border-block:1px solid var(--rule); width:100%}
/* min-width mare împingea cifrele pe câte un rând întreg pe telefon;
   în design stau două pe rând, ca în grila din preview. */
.fig{--width:auto; flex:1 1 40% !important; min-width:0;
     padding:26px 22px 28px; border-right:1px solid var(--rule)}
/* Ca în theme.css: pe telefon una sub alta, altfel explicația de sub cifră
   rămâne pe 131px, adică două cuvinte pe rând. */
@media(max-width:519px){
  .fig{flex:1 1 100% !important; border-right:none; padding-inline:0}
  .fig:not(:last-child){border-bottom:1px solid var(--rule)}
}
@media(min-width:860px){
  .fig{flex:1 1 0 !important; min-width:0}
  .fig:last-child{border-right:none}
}

/* --- subsol --- */
.foot-grid{flex-wrap:wrap; gap:34px; align-items:flex-start}
.foot-col{flex:1 1 180px !important}
.foot-col:first-child{flex:1.5 1 260px !important}
.foot-bar{display:flex; flex-wrap:wrap; gap:14px; align-items:center;
          justify-content:space-between; padding-top:24px;
          border-top:1px solid var(--rule); margin-top:38px}

/* --- banda de final --- */
.cta-in{flex-wrap:wrap; gap:26px; align-items:center; justify-content:space-between}
@media(max-width:899px){ .cta-in{flex-direction:column; align-items:flex-start} }

/* --- ritmul vertical --- */
.sp-sectiune{padding-block:clamp(54px,7.5vw,102px)}
.sp-mica{padding-block:clamp(32px,4vw,54px)}
.sp-sectiune > .wrap > *,.sp-mica > .wrap > *{margin-block:0}
.sp-sectiune > .wrap,.sp-mica > .wrap{gap:18px}
.head-in{gap:20px}
.rand-hero{gap:clamp(32px,4.6vw,56px)}
.cta-in{gap:26px}
.foot-grid{gap:34px}
.hero-tags .elementor-widget-container p{gap:8px}

/* Titlul de secțiune: eticheta, titlul și descrierea stau strâns. */
.sp-sectiune > .wrap > .code{margin-bottom:-6px}
.sp-sectiune > .wrap > .elementor-widget-shortcode{margin-top:16px}

/* Elementor pune lățime 100% pe fiecare widget; scurtăturile o folosesc. */
.elementor-widget-shortcode,.elementor-widget-shortcode > .elementor-widget-container{width:100%}


/* ---------------- planșa rotativă ---------------- */

.spec-carusel{overflow:hidden}
/* Umplutura stă pe planșă, nu și pe corp: cu 26px în ambele locuri, textul
   ajungea la 174px lățime pe un telefon de 320 — trei cuvinte pe rând. */
.spec-carusel .spec-body{position:relative; min-height:412px; padding:0}
.spec-slide{
  position:absolute; inset:0; padding:26px; display:flex; flex-direction:column; gap:16px;
  opacity:0; transform:translateY(10px); pointer-events:none;
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.spec-slide.on{opacity:1; transform:none; pointer-events:auto}
.spec-slide .spec-fig{height:126px; flex:none}
.spec-slide .t-2{margin:8px 0 0}
.spec-slide .p-sm{margin-top:9px}
.spec-meta{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px;
  margin-top:auto; padding-top:14px; border-top:1px dashed var(--rule);
}
.spec-meta .code{display:block; margin-bottom:3px}
.spec-meta b{font-size:14px; font-weight:600; font-variation-settings:'wdth' 102,'wght' 600}
.spec-dots{display:flex; gap:6px; padding:0 26px 22px; margin-block:-18px}
/* Bara se vede de 3px, dar butonul are 39px, ca să poată fi atins cu
   degetul. Diferența e umplutură transparentă: `background-clip:content-box`
   pictează doar caseta de conținut, adică exact linia. */
.spec-dot{
  flex:1; height:39px; padding-block:18px; box-sizing:border-box;
  background:var(--rule); background-clip:content-box;
  border:none; cursor:pointer; position:relative; border-radius:1px;
}
.spec-dot:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.spec-dot i{position:absolute; inset:18px 0; background:var(--accent);
            transform:scaleX(0); transform-origin:left}
.spec-dot.active i{animation:rm-umple 5.2s linear forwards}
@keyframes rm-umple{to{transform:scaleX(1)}}
@media (prefers-reduced-motion: reduce){ .spec-dot.active i{transform:scaleX(1); animation:none} }


/* ---------------- animații de intrare ---------------- */

/* Elementele din primul ecran nu așteaptă derularea: apar în secvență, la
   încărcare. Cele de mai jos folosesc `.rv`, care se declanșează la scroll. */
.rise{opacity:0; transform:translateY(16px); animation:rm-urca .72s var(--ease) forwards}
@keyframes rm-urca{to{opacity:1; transform:none}}
.dl1{animation-delay:.06s} .dl2{animation-delay:.14s} .dl3{animation-delay:.22s}
.dl4{animation-delay:.30s} .dl5{animation-delay:.38s} .dl6{animation-delay:.46s}

@media (prefers-reduced-motion: reduce){
  .rise{opacity:1 !important; transform:none !important; animation:none}
}

/* ---------------- pașii de proces, în constructor ---------------- */

/* Structura vine din containere Elementor, nu din scurtătură, ca să poți
   edita fiecare pas. Grila e aceeași ca în design. */
.flow{border-top:1px solid var(--rule)}
.flow-item{
  display:grid !important; grid-template-columns:minmax(0,auto) minmax(0,1fr);
  gap:6px 18px; align-items:start; padding-block:24px;
  border-bottom:1px solid var(--rule); transition:padding-left .3s var(--ease);
}
.flow-item:hover{padding-left:12px}
.flow-item > *:nth-child(2),.flow-item > *:nth-child(3){grid-column:2}
@media(min-width:880px){
  .flow-item{grid-template-columns:70px 250px minmax(0,1fr); gap:30px; align-items:center}
  .flow-item > *:nth-child(2){grid-column:2}
  .flow-item > *:nth-child(3){grid-column:3}
}
.flow-n .elementor-heading-title{
  font-family:var(--mono); font-size:12.5px; font-weight:600;
  color:var(--accent); letter-spacing:.1em;
}

/* ---------------- cardurile din constructor ---------------- */

.grid-3{
  display:grid !important; gap:1px; background:var(--rule);
  border:1px solid var(--rule); grid-template-columns:1fr;
}
@media(min-width:640px){ .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(min-width:1000px){ .grid-3{grid-template-columns:repeat(3,minmax(0,1fr))} }
.grid-3 > .cell{background:var(--sheet); padding:28px 24px 30px}
.cell .cell-ico{width:44px; height:44px; flex:none}
.cell > .code{margin-top:auto; padding-top:13px; border-top:1px dashed var(--rule)}


/* ---------------- accentele din text ---------------- */

/* Cuvintele colorate din titlul principal: albastru pentru ce construim,
   portocaliu pentru ce creștem. Culoarea poartă înțelesul, nu decorează. */
.split{color:var(--build)}
.split-2{color:var(--grow)}

/* Partea evidențiată dintr-o cifră. */
.fig-val em{font-style:normal; color:var(--accent)}

/* Punctul care pulsează din pastilă. */
.pill .pip{
  display:inline-block; width:6px; height:6px; margin-right:8px;
  background:currentColor; border-radius:50%; vertical-align:middle;
  animation:rm-puls 2.2s ease-in-out infinite;
}
@keyframes rm-puls{0%,100%{opacity:1} 50%{opacity:.22}}
@media (prefers-reduced-motion: reduce){ .pill .pip{animation:none} }


/* ---------------- comutatorul de temă ---------------- */

.tema-comutator{
  display:inline-grid; place-items:center; width:38px; height:38px;
  border:1px solid var(--rule); background:transparent; color:var(--ink-2);
  cursor:pointer; border-radius:1px; padding:0; flex:none;
  transition:border-color .22s, color .22s, transform .22s var(--ease);
}
.tema-comutator:hover{border-color:var(--ink); color:var(--ink); transform:translateY(-1px)}
.tema-comutator:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.tema-comutator svg{width:17px; height:17px; grid-area:1/1; transition:opacity .22s, transform .22s var(--ease)}

/* Pe întuneric arătăm soarele — adică unde te duce apăsarea. */
.tema-soare{opacity:1; transform:none}
.tema-luna{opacity:0; transform:rotate(-40deg)}
:root[data-theme="light"] .tema-soare{opacity:0; transform:rotate(40deg)}
:root[data-theme="light"] .tema-luna{opacity:1; transform:none}

@media (prefers-reduced-motion: reduce){ .tema-comutator,.tema-comutator svg{transition:none} }


/* ---------------- lista de articole ---------------- */

.articole{display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule)}
@media(min-width:700px){ .articole{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(min-width:1060px){ .articole{grid-template-columns:repeat(3,minmax(0,1fr))} }

.articol{
  display:flex; flex-direction:column; gap:12px;
  background:var(--sheet); padding:30px 26px 32px;
  text-decoration:none; color:inherit; transition:background .3s;
}
.articol:hover{background:var(--sheet-2)}
.articol:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
.articol h3{margin:0; color:var(--ink)}
.articol .p{flex:1}
.articol .code--accent{margin-top:auto; padding-top:14px; border-top:1px dashed var(--rule)}

/* ---------------- paginare ---------------- */

.paginare{display:flex; flex-wrap:wrap; gap:8px; margin-top:28px}
.paginare .page-numbers{
  display:inline-grid; place-items:center; min-width:40px; height:40px; padding:0 12px;
  border:1px solid var(--rule); color:var(--ink-2); text-decoration:none;
  font-family:var(--mono); font-size:13px; transition:all .22s;
}
.paginare .page-numbers:hover{border-color:var(--ink); color:var(--ink)}
.paginare .page-numbers.current{background:var(--ink); border-color:var(--ink); color:var(--stone)}