/* =====================================================================
   d1 v3 - partea COMUNA celor trei variante
   ---------------------------------------------------------------------
   Aici stă tot ce a fost aprobat: fundalul violet-fucsia, antetul pe doua
   coloane, selectoarele pătrate, cursorul si coloana de decizie din stânga.
   Fiecare variantă îşi ține in <style>-ul propriu DOAR designul coloanei
   din dreapta (conținutul pachetului), care e ce comparam.
   ===================================================================== */


/* --- Fundalul, portat din WibePress (secțiunea jobs) ------------------
   Nuanta de baza 280: al doilea strat iese la 302, adica fucsia. */

/* PORTAT IN WHMCS: nuanta rămâne aici, dar gradientul s-a mutat pe
   section#main-body, in lab404-pg-pagina.css. In prototip era body::before,
   adica un copil al lui body, deci fundalul lui body stătea SUB el. Aici nu
   putem pune o clasa pe <body> din sablonul formularului, iar un element
   fixed cu z-index negativ ingropat in pagina se deseneaza sub fundalurile
   parintilor nepoziționați - si body si section#main-body sunt opace in tema,
   deci il acopereau complet. Vezi comentariul de la mutare. */
.lab404-pachete { --sec-h: 280; }

.scena {
    position: relative;
    padding: var(--sp-12) 0 var(--sp-24);
}


/* --- Ierarhia de mărimi ----------------------------------------------
   Doua trepte mari, nu trei: numarul de pe cursor e eroul, iar titlul si
   prețul stau pe aceeasi treapta. Trei mărimi fluide cu curbe diferite se
   incrucișează si ajung sa arate egale la o anumita lățime. */

.lab404-pachete {
    --t-mare: clamp(1.9rem, 1.2rem + 2.4vw, 2.6rem);
    --t-erou: clamp(2.8rem, 1.6rem + 4.2vw, 4.6rem);
}


/* --- Antetul: titlu stânga, descriere dreapta -------------------------
   Pe o singura coloana titlul se rupea in doua rânduri si rămânea o
   jumatate de ecran goala in dreapta. Aşezate una langa alta, se umple
   lățimea si descrierea nu mai trebuie ingustata artificial. */

.antet-grup {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    /* Descrierea la jumatatea inaltimii titlului. In prototip era "end", adica
       aliniate pe marginea de jos - cu titlul pe trei rânduri si descrierea pe
       doua, descrierea parea lasata prea jos. */
    align-items: center;
    margin-bottom: var(--sp-8);
    padding-bottom: var(--sp-8);
    border-bottom: 1px solid var(--line-soft);
}

@media (max-width: 860px) {
    .antet-grup { grid-template-columns: 1fr; gap: var(--sp-4); align-items: start; }
}

.titlu-grup {
    font-size: var(--t-mare);
    /* In prototip greutatea venea din valoarea implicita a browserului pentru
       <h1> (bold). Tema WHMCS o rescrie cu 500 in theme.min.css, deci aici o
       cerem explicit, ca titlul sa arate la fel de gros ca in design. */
    font-weight: 700;
    margin: 0;
    /* Titlurile din baza au lungimi foarte diferite: Web ocupa 3 rânduri,
       WordPress 4, PrestaShop 5. Fara rezervare, antetul sare cu ~90px la
       fiecare schimbare de serviciu si se vede clar. Rezerv 4 rânduri, cat
       ocupa cel mai lung titlu de tip "Alege pachetul ... afacerea!". */
    min-height: calc(4 * 1.1em);
    transition: opacity .2s var(--ease-out);
}

@media (max-width: 860px) {
    /* Pe o coloana titlul are toata lățimea, deci se rupe mai putin */
    .titlu-grup { min-height: 0; }
}

.descriere-grup {
    color: var(--ink-2);
    /* Fara max-width in ch: coloana o limiteaza oricum, iar taglinele din
       baza sunt de lungimi foarte diferite. */
    max-width: none;
    margin: 0;
    transition: opacity .2s var(--ease-out);
}

.titlu-grup.schimba,
.descriere-grup.schimba { opacity: 0; }


/* --- Selectoarele: designul .notch-box de pe homepage -----------------
   Casete PĂTRATE, cu colțul din dreapta-sus tăiat, text uppercase greu si
   o dâră de lumina peste cea activa. Stau SUB descriere. */

.servicii {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: var(--sp-16);
}

.servicii :is(a, button) {
    text-decoration: none;
    position: relative;
    flex: 1 1 200px;
    min-width: 0;
    padding: 1.5rem 2rem;
    background: rgba(10, 15, 25, .7);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 0;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: var(--t-lg);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
    transition: border-color .4s cubic-bezier(.19, 1, .22, 1),
                background-color .4s cubic-bezier(.19, 1, .22, 1),
                box-shadow .4s cubic-bezier(.19, 1, .22, 1);
}

@supports (backdrop-filter: blur(1px)) {
    .servicii :is(a, button) { backdrop-filter: blur(15px); }
}

.servicii :is(a, button)::after {
    content: "";
    position: absolute;
    top: -1px;
    right: -1px;
    border-style: solid;
    border-width: 0 15px 15px 0;
    border-color: transparent var(--bg) transparent transparent;
    transition: border-color .3s;
}

.servicii :is(a, button):hover { border-color: rgba(255, 255, 255, .24); }

.servicii :is(a, button)[aria-pressed="true"] {
    border-color: var(--cyan);
    background: rgba(6, 182, 212, .1);
    box-shadow: 0 0 40px rgba(6, 182, 212, .2);
}

.servicii :is(a, button)[aria-pressed="true"]::after {
    border-color: transparent var(--cyan) transparent transparent;
}

/* :not(.scan) e important: .scan e si el span copil direct, iar fara
   excludere primea si el z-index 5 si, fiind ultimul in DOM, dâra de lumina
   se desena PESTE text. */
.servicii :is(a, button) > span:not(.scan) { position: relative; z-index: 5; }

.servicii :is(a, button) .nume-serviciu { display: block; }

.servicii .scan {
    position: absolute;
    inset: 0;
    z-index: 4;
    background: linear-gradient(110deg, transparent 20%,
                rgba(6, 182, 212, .1) 40%, rgba(6, 182, 212, .2) 50%,
                rgba(6, 182, 212, .1) 60%, transparent 80%);
    background-size: 200% 100%;
    opacity: 0;
    transition: opacity .3s;
    pointer-events: none;
}

.servicii :is(a, button)[aria-pressed="true"] .scan { opacity: 1; }

/* Curge doar pe desktop, si doar daca nu s-a cerut mai putina miscare */
@media (min-width: 992px) and (prefers-reduced-motion: no-preference) {
    .servicii :is(a, button)[aria-pressed="true"] .scan { animation: scanare 3s linear infinite; }
}

@keyframes scanare {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

@media (max-width: 620px) {
    .servicii :is(a, button) {
        flex: 1 1 100%;
        padding: 1.1rem 1rem;
        font-size: var(--t-base);
        letter-spacing: 1.5px;
    }
}


/* --- Cursorul --------------------------------------------------------
   Un input[range] nativ nu plimba bulina pe toata lățimea: centrul ei sta
   intre jumatate-de-bulina si (lățime - jumatate-de-bulina). Deci linia,
   umplerea si reperele se deseneaza toate pe CURSA REALA a bulinei, ca sa
   cada toate pe aceeasi poziție. Altfel decalajul ajunge la 14px. */

.eticheta-cursor {
    font-size: var(--t-sm);
    font-weight: 500;
    color: var(--ink-3);
    margin: 0 0 var(--sp-4);
}

/* Ascuns vizual, dar citit de cititoarele de ecran */
.doar-citit-de-ecran {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.cursor-zona { margin-bottom: var(--sp-8); }

.numar-mare { display: flex; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-6); }

.numar-mare output {
    font-family: var(--font-display);
    font-size: var(--t-erou);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.03em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.numar-mare .unitate { font-size: var(--t-base); color: var(--ink-3); max-width: 16ch; line-height: 1.35; }

.pista {
    --bulina: 28px;
    position: relative;
    padding-bottom: calc(var(--sp-8) + var(--sp-2));
}

.pista::before,
.pista::after {
    content: "";
    position: absolute;
    top: calc(var(--bulina) / 2 - 2px);
    left: calc(var(--bulina) / 2);
    right: calc(var(--bulina) / 2);
    height: 4px;
    border-radius: 4px;
    pointer-events: none;
}

.pista::before { background: rgba(255, 255, 255, .1); }

.pista::after {
    background: var(--cyan);
    box-shadow: 0 0 16px rgba(6, 182, 212, .4);
    transform-origin: left;
    transform: scaleX(var(--parte, 0));
    transition: transform .3s var(--ease-out);
}

.pista input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    z-index: var(--z-raised);
    display: block;
    width: 100%;
    height: var(--bulina);
    margin: 0;
    background: transparent;
    cursor: grab;
}

.pista input[type="range"]:active { cursor: grabbing; }

.pista input[type="range"]::-webkit-slider-runnable-track { height: var(--bulina); background: transparent; }
.pista input[type="range"]::-moz-range-track { height: var(--bulina); background: transparent; }

.pista input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: var(--bulina);
    height: var(--bulina);
    border-radius: 50%;
    background: var(--ink);
    border: 5px solid var(--bg);
    box-shadow: 0 0 0 1px var(--cyan), 0 0 22px rgba(6, 182, 212, .55);
    cursor: grab;
}

.pista input[type="range"]::-moz-range-thumb {
    width: var(--bulina);
    height: var(--bulina);
    box-sizing: border-box;
    border-radius: 50%;
    background: var(--ink);
    border: 5px solid var(--bg);
    box-shadow: 0 0 0 1px var(--cyan), 0 0 22px rgba(6, 182, 212, .55);
}

.statii {
    position: absolute;
    top: var(--bulina);
    left: 0;
    right: 0;
    height: var(--sp-8);
}

.statie {
    position: absolute;
    top: 0;
    left: calc(var(--bulina) / 2 + var(--p, 0) * (100% - var(--bulina)));
    transform: translateX(-50%);
    text-align: center;
    font-size: var(--t-xs);
    color: var(--ink-4);
    white-space: nowrap;
    transition: color .25s var(--ease-out);
}

.statie::before {
    content: "";
    display: block;
    width: 1px;
    height: 12px;
    margin: 0 auto var(--sp-2);
    background: var(--line-strong);
    transform: scaleY(.7);
    transform-origin: bottom;
    transition: background-color .25s var(--ease-out), transform .25s var(--ease-out);
}

/* Etichetele atinse: cyan CU lumina in jur */
.statie.atins {
    color: var(--cyan-light);
    text-shadow: 0 0 12px rgba(6, 182, 212, .55);
}

.statie.atins::before {
    background: var(--cyan);
    transform: scaleY(1);
    box-shadow: 0 0 8px rgba(6, 182, 212, .8);
}

.statie.curent {
    color: var(--cyan-pale);
    font-weight: 700;
    text-shadow: 0 0 16px rgba(6, 182, 212, .85);
}

.statie.curent::before { opacity: 0; }

/* "(recomandat)" sub al doilea pachet din fiecare gamă: alegerea uzuala,
   marcata discret cu albastrul brandului. Nu ingroasa eticheta, ca sa nu
   concureze cu valoarea de deasupra. */
.statie .recomandat {
    display: block;
    margin-top: 2px;
    font-family: var(--font-body);
    font-size: var(--t-xs);
    font-weight: 500;
    color: var(--cyan-light);
    text-shadow: none;
}

.statie.curent .recomandat { color: var(--cyan-pale); }


/* --- Cele doua coloane, despartite de divider ------------------------ */

.pachet {
    display: grid;
    grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
    border-top: 1px solid var(--line);
    padding-top: var(--sp-8);
}

.coloana-dreapta {
    border-left: 1px solid var(--line);
    padding-left: clamp(1.5rem, 4vw, 3.5rem);
}

.coloana-stanga { padding-right: clamp(1.5rem, 4vw, 3rem); }

@media (max-width: 900px) {
    .pachet { grid-template-columns: 1fr; }
    .coloana-dreapta {
        border-left: 0;
        border-top: 1px solid var(--line);
        padding-left: 0;
        padding-top: var(--sp-8);
        margin-top: var(--sp-8);
    }
    .coloana-stanga { padding-right: 0; }
}


/* --- Coloana de decizie (stânga) ------------------------------------- */

/* Coloana din stânga: elementele distribuite uniform de gap, fara grupări
   care le string sus si fara margin-top:auto care impingea butonul la baza.
   Numele si pilula stau intr-un bloc comun, cu divider sub amândouă. */
.coloana-stanga {
    display: flex;
    flex-direction: column;
    gap: var(--sp-8);
}

.grup-decizie { margin-top: 0; }

/* Numele planului: pe aceeasi treapta cu prețul. Sunt cele doua lucruri
   care identifica oferta, si stau departe pe verticala, deci nu se bat.
   Prețul rămâne cel dominant prin greutate 700 si cifre tabulare. */
/* Blocul de identitate: nume mare, pilula dedesubt, divider sub amândouă */
.plan-nume {
    padding-bottom: var(--sp-6);
    border-bottom: 1px solid var(--line);
}

.plan-nume h2 {
    font-size: var(--t-3xl);
    font-weight: 700;
    letter-spacing: -.025em;
    margin: 0 0 var(--sp-3);
    transition: opacity .18s var(--ease-out);
}

.plan-nume h2.schimba { opacity: 0; }

/* Cuvintele cu cratima nu se rup: "Business E-mail – Basic" ieșea "Business E-" / "mail
   – Basic", fiindca browserul poate rupe dupa orice cratima. Invelisul il pune JS-ul
   (numeCuCratimeLegate), nu se atinge textul din baza. */
.plan-nume h2 .nu-rupe { white-space: nowrap; }

.eticheta-grup {
    display: inline-block;
    font-size: var(--t-xs);
    font-weight: 500;
    color: var(--ink-4);
    border: 1px solid var(--line);
    border-radius: 100px;
    padding: .2rem .7rem;
}

/* Butonul si nota sunt UN singur copil de flex, altfel gap-ul coloanei
   (2rem) se aseaza intre ele si nota pluteste departe de buton. */
.actiuni { margin: 0; }
.actiuni .btn-comanda { margin-bottom: var(--sp-2); }

/* Nota de sub buton pe fontul de brand, nu pe cel de text: e o linie de
   voce, nu interfata. Pentru varianta mono: var(--font-mono). */
.nota {
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: .02em;
}

.potrivire {
    color: var(--ink-2);
    font-size: var(--t-lg);
    line-height: 1.5;
    margin: 0;
    max-width: 30ch;
}

/* Prețul si echivalentul in lei sunt o singura unitate: le tin intr-un bloc,
   ca gap-ul coloanei (2rem) sa nu se aseze intre ele. Spatierea dintre
   elementele coloanei vine acum doar din gap, nu din margini care se adună. */
.bloc-pret { }

.pret { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-1); }

.pret .val {
    font-family: var(--font-display);
    font-size: var(--t-mare);
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -.03em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.pret .per { color: var(--ink-3); font-size: var(--t-sm); }
.lei-linie { font-size: var(--t-sm); color: var(--ink-4); margin: 0; }


/* Butonul: exact stilul din pricing-grid de pe gazduire-web.html
   (.btn.btn-primary + .price-card .order-btn din public-staging/style.css):
   gradient cyan → violet, text alb, font Inter la 600, radius 12px,
   lățime completa. */
.btn-comanda {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    width: 100%;
    padding: .7rem 1.2rem;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #06b6d4 0%, #8b5cf6 100%);
    color: #fff;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0;
    cursor: pointer;
    transition: transform .4s cubic-bezier(.4, 0, .2, 1);

    /* Eticheta se rupe pe doua rânduri daca nu incape. Era `white-space: nowrap` pe un
       buton cu `width: 100%`, ceea ce inseamna ca textul NU putea sa se rupa, dar cutia
       nu putea sa creasca - deci ieșea afara din buton. Masurat pe /store/gazduire-wordpress
       cu coloana la 260px: textul 267px, deci 47px de text peste marginea butonului, pe
       fundal. Se intampla la orice titlu lung, deci si pe celelalte pagini.
       Butonul crește in inalțime, textul rămâne inauntru. */
    white-space: normal;
    text-align: center;
    text-wrap: balance;
    line-height: 1.3;
}

/* Butonul nu are halo cyan nici in repaus, nici pe hover. Doar se ridica 2px.

   In doi pasi am ajuns aici, si merita scris de ce. Intai crestea pe hover, de la
   0 10px 20px -5px la 0 15px 30px -5px, ambele rgba(6,182,212,.4): se lățea cu 50%
   si sarea in ochi. Am scos crestera si am pastrat umbra de repaus, ca butonul sa
   arate ca inainte cand stai departe de el.
   Nu a fost de ajuns: pe butonul asta, care e width: 100%, aceeasi umbra se intinde
   pe toata lățimea cardului si nu se mai citeste ca umbra, ci ca o pata albastra sub
   buton - permanenta, nu doar pe hover. Butonul "Contul meu" din antet are aceleasi
   valori si acolo nu deranjeaza, fiindca e lat de ~140px. Deci nu valoarea era
   greșita, ci lățimea pe care o folosim.
   Gradientul rămâne: culoarea e in buton, nu in jurul lui. */
/* Si textul rămâne alb la hover. Butonul e un <a>, iar pentru linkuri exista doua reguli
   `a:hover` cu culoare - una in tema parinte (nexus/theme.min.css) si una a noastra - iar
   `a:hover` cantărește 0-1-1, adica mai mult decat `.btn-comanda` (0-1-0). Deci butonul
   isi declara alb degeaba: la hover textul lui devenea bleu-deschis, pe fundal cyan-violet,
   exact cand e atins. `a.btn-comanda:hover` face 0-2-0 si intoarce albul.
   Nu se rezolva excluzand butonul din regulile de link: una din ele e in tema parinte,
   care nu e a noastra si se schimba la fiecare actualizare de WHMCS. */
.btn-comanda:hover {
    transform: translateY(-2px);
}

a.btn-comanda:hover,
a.btn-comanda:focus { color: #fff; }

/* .actiuni e definit mai sus (l.419) cu margin: 0 - spatierea coloanei vine
   doar din gap. Regula duplicata de aici punea inapoi 12px si se aduna. */
.nota { font-size: var(--t-xs); color: var(--ink-4); display: block; text-align: center; }

/* --- Garanția de 30 de zile, sub nota -------------------------------
   Portata din public-staging/index.html (.pay-guarantee), FARA pastila: acolo e singura
   linie sub un rând de logo-uri de plata si are nevoie sa arate ca insigna, cu chenar
   verde si umbra. Aici sta sub buton, intr-o coloana ingusta - o a doua pastila sub un
   buton plin ar concura cu el. Rămân scutul si textul, pe fontul mono al site-ului,
   la fel ca acolo.

   Apare doar la găzduirea partajata si la e-mail (vezi conditia din products.tpl): la
   VPS-uri si la n8n nu se da garanție, fiindca acolo serviciul e altfel. Deci regula de
   mai jos n-are nevoie de nicio variantă pe familie - amandoua familiile in care se vede
   au coloana cu gap 32px. */
.coloana-stanga .garantie {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    /* 8px sub nota. Coloana pune 32px de gap intre copii, deci diferenta se scade aici:
       scrisa ca socoteala, nu ca -24px, ca sa se vada de unde vine. */
    margin-top: calc(var(--sp-2) - var(--sp-8));
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    line-height: 1.5;
    color: var(--ink-3);
}

.coloana-stanga .garantie svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    fill: none;
    stroke: var(--ok);
    stroke-width: 2;
}

.coloana-stanga .garantie b { color: var(--ok); font-weight: 700; }


/* --- Titlurile de secțiune din dreapta (comune celor trei variante) --- */

/* Titlurile de secțiune: mai luminoase decât erau (ink-4 la 12px se citea
   greu), dar NEUTRE, nu cyan. Motivul: albastrul brandului duce deja cinci
   sarcini pe pagina asta - etichetele cursorului, "(recomandat)", "de la
   Web Advanced", umplerea barei si selectorul activ. Daca il pun si pe
   titluri, nu mai inseamna nimic. Le fac sa se citeasca drept etichete prin
   litere rărite, nu prin culoare.
   Daca vrei totuși cyan: color: var(--cyan-light) pe rândul de mai jos. */
.titlu-sectiune {
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--ink-3);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--line-soft);
    margin: 0 0 var(--sp-4);
}

.titlu-sectiune + .titlu-sectiune,
.varianta-bloc + .titlu-sectiune { margin-top: var(--sp-8); }


/* Bara variantei, ca sa se vada care e care */
.bara-varianta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-bottom: var(--sp-8);
    font-size: var(--t-sm);
}

.bara-varianta a {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: .35rem .8rem;
    color: var(--ink-3);
    transition: color .2s var(--ease-out), border-color .2s var(--ease-out);
}

.bara-varianta a:hover { color: var(--ink); border-color: var(--line-strong); }

.bara-varianta a[aria-current="page"] {
    border-color: var(--cyan);
    background: rgba(6, 182, 212, .1);
    color: var(--cyan-pale);
}

/* --- Bare sub rândurile care cresc (doar la VPS) ----------------------
   La găzduire si la e-mail creste o singura resursa, deci cifra spune tot. La VPS cresc
   patru odata si NU la fel: nucleele si memoria se dubleaza la fiecare trepta, discul
   face 4x apoi 1,5x. Proporția aia nu se vede din "160GB → 240GB", se vede din bara.
   Umbra din spate e treapta anterioara, deci se vede si cat a crescut, nu doar cat e.
   Se umple cu scaleX, nu cu width: patru bare animate pe lățime ar recalcula asezarea
   la fiecare cadru, iar tema face la fel pentru umplerea cursorului. */
.lista-pachet .rand-bara {
    grid-column: 1 / -1;
    position: relative;
    height: 8px;
    /* Fara margine: aerul de deasupra barei vine din row-gap-ul rândului (8px), ca in
       mockup. Am avut aici 20px, pusi ca sa ajung la un gol de 33px masurat pe mockup - dar
       masurasem primul rând la o lățime la care eticheta lui se rupea pe doua rânduri, deci
       nu masuram golul, ci al doilea rând de text. La lățime egala golul e 15px. */
    margin-top: 0;
    border-radius: 999px;
    background: rgba(148, 163, 184, .12);
    overflow: hidden;
}

.lista-pachet .rand-umple,
.lista-pachet .rand-fantoma {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    transform-origin: left center;
    transform: scaleX(var(--f, 0));
    transition: transform .45s var(--ease-out);
}

.lista-pachet .rand-fantoma { background: rgba(255, 255, 255, .10); }

.lista-pachet .rand-umple {
    background: linear-gradient(90deg, var(--cyan) 0%, var(--violet) 100%);
}


/* =====================================================================
   ICONITA GAMEI, in fila de serviciu
   ---------------------------------------------------------------------
   Aceleasi iconite ca in meniul principal. Omul le vede acolo prima data si le
   regaseste aici: fila nu mai e un dreptunghi cu majuscule, ci gama pe care o
   stie deja.

   Fila devine un rand: iconita la stanga, numele la dreapta, grupul centrat in
   dreptunghi. Textul pierde "text-align: center" - centrat cu o iconita in fata,
   randul de sus si cel de jos ar fi iesit fiecare pe alt ax.
   ===================================================================== */

.servicii :is(a, button) > span:not(.scan) {
    display: flex;
    align-items: center;
    /* La stanga, nu centrat: centrat, grupul lasa un gol de 73px intre marginea
       filei si iconita - masurat - iar fila arata ca si cum textul ar pluti in
       mijloc. Asa, iconita incepe exact de la padding-ul filei. */
    justify-content: flex-start;
    gap: 1rem;
    text-align: left;
}

.servicii .serv-icon {
    flex: none;
    width: 56px;
    height: 56px;
    object-fit: contain;
}

/* Logo-ul WordPress are aer in jurul lui. MASURAT, nu ghicit: am desenat fiecare
   iconita pe o panza si am cautat cutia pixelilor opaci -

     wp.png          desen pe  67% x 73%  din imagine
     server.png      100% x 100%
     prestashop.svg  100% x 100%

   Deci la aceeasi cutie de 56px, WordPress arata 37px de desen si celelalte 56.
   Cutia lui urca la 80px, ca desenul sa iasa ~54 x 58 - adica echivalent cu 56 de
   desen plin. Marginea negativa de 12px ii scade la loc din spatiu exact cat a
   crescut cutia, deci randul si inaltimea filei raman neschimbate: creste doar
   ce se vede. */
.servicii .serv-icon-wp { width: 80px; height: 80px; margin: -12px; }

/* Dulapul de servere: acelasi desen, doua palete - ca in meniu. */
.servicii .serv-rack-violet {
    --rack-fata: #8b5cf6;
    --rack-umbra: #3b2a72;
    --rack-leduri: #d8c8ff;
    --rack-fanta: #6a4fc0;
}

.servicii .serv-rack-portocaliu {
    --rack-fata: #fb923c;
    --rack-umbra: #7a3d12;
    --rack-leduri: #ffe3c7;
    --rack-fanta: #d97430;
}

/* Sub 560px iconita ar strange textul pe doua randuri rupte urat; ramane doar
   numele, ca inainte. */
@media (max-width: 560px) {
    .servicii .serv-icon { display: none; }
    .servicii :is(a, button) > span:not(.scan) { text-align: center; }
}

/* La VPS, continutul filei sta pe mijloc.
   ---------------------------------------------------------------------
   Asezarea e aceeasi peste tot - iconita, apoi numele - dar filele VPS sunt
   mult mai late: masurat, 469px fata de 309px la gazduire, fiindca acolo sunt
   doua game, nu trei, iar ele impart acelasi rand. La stanga, perechea
   iconita-nume lasa in dreapta un gol cat inca o fila, si fila arata golita.

   Deci nu se schimba regula, ci se recunoaste ca la doua file e alt spatiu:
   grupul se centreaza si golul se imparte egal in stanga si in dreapta. */
.lab404-pachete[data-familie="vps"] .servicii :is(a, button) > span:not(.scan) {
    justify-content: center;
}
