/*
 * Pagina de pachete (pachete.html): un configurator, nu o lista de preturi.
 *
 * Se incarca DUPA acasa.css si foloseste tot ce e acolo: tokenurile, antetul,
 * subsolul, logo-ul SVG, stelele din fundal, butoanele .cc-btn si aparitia
 * [data-reveal]. Aici stau doar piesele paginii, toate cu prefixul `pc-`.
 *
 * Povestea paginii e in trei capitole — intelegi, configurezi, construim — si
 * complexitatea pachetelor se vede, nu se enumera: un bloc mai inalt in hero,
 * o pagina care se asambleaza, pagini legate intre ele, un site legat de
 * serviciile lui, apoi un sistem intreg.
 *
 * Pagina nu afiseaza preturi, intentionat (vezi pachete-date.js).
 *
 * Clase pe <html>, puse de pachete.js:
 *   .pc-js      scriptul ruleaza; abia atunci ascundem ce se anima. Fara el,
 *               toate scenele sunt desenate complet si toate detaliile deschise.
 *   .pc-scroll  ecran lat si destul de inalt, fara „miscare redusa": scenele
 *               lipite pe ecran se construiesc odata cu derularea. Altfel
 *               (telefon, tableta, ecran scund) fiecare scena se anima o
 *               singura data, cand ajunge pe ecran.
 */

.pc-pagina {
    --sina-h: 52px;
    --pc-gutter: 24px;
    --pc-fir: rgba(255, 255, 255, .09);
    --pc-fir-tare: rgba(255, 255, 255, .18);
}

@media (max-width: 820px) {
    .pc-pagina {
        --sina-h: 48px;
        --pc-gutter: 20px;
    }
}

/* Folosita o clipa de pachete.js cand schimba modul: valorile de pornire se
   pun fara tranzitie, altfel scenele deja vizibile ar clipi. */
html.pc-fara-tranzitii .pc-pagina *,
html.pc-fara-tranzitii .pc-pagina *::before,
html.pc-fara-tranzitii .pc-pagina *::after {
    transition: none !important;
}

/* ==================== piese comune ==================== */

.pc-eticheta {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    font-family: var(--cc-font-mono);
    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--cc-text-estompat);
}

.pc-eticheta b {
    font-weight: 500;
    color: var(--cc-turcoaz);
}

.pc-eticheta-fir {
    width: 40px;
    height: 1px;
    background: currentColor;
    opacity: .5;
}

.pc-accent {
    background: var(--cc-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.pc-titlu-mare {
    margin: 20px 0 0;
    font-family: var(--cc-font-titlu);
    font-size: clamp(40px, 6.2vw, 96px);
    line-height: .96;
    letter-spacing: -.045em;
    color: var(--cc-alb-cald);
    text-wrap: balance;
}

.pc-titlu-mic {
    margin: 18px 0 0;
    font-family: var(--cc-font-titlu);
    font-size: clamp(26px, 3vw, 40px);
    line-height: 1.08;
    letter-spacing: -.03em;
    color: var(--cc-text);
}

.pc-cap-text {
    margin: 22px 0 0;
    max-width: 640px;
    font-size: clamp(16px, 1.35vw, 18px);
    line-height: 1.65;
    color: var(--cc-text-2);
}

.pc-cap-text strong {
    font-weight: 500;
    color: var(--cc-text);
}

.pc-bloc {
    max-width: var(--cc-latime);
    margin: 0 auto;
    padding: clamp(96px, 14vh, 160px) var(--pc-gutter);
}

.pc-butoane {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 40px;
}

.pc-butoane--stanga {
    justify-content: flex-start;
    margin-top: 28px;
}

.pc-cu-sageata {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.pc-sageata {
    display: inline-block;
    transition: transform .45s var(--cc-ease);
}

a:hover .pc-sageata,
a:focus-visible .pc-sageata {
    transform: translateX(5px);
}

.pc-link-mono {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--pc-fir-tare);
    font-family: var(--cc-font-mono);
    font-size: 13px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--cc-text);
    transition: color .3s, border-color .3s;
}

.pc-link-mono:hover {
    color: var(--cc-turcoaz);
    border-color: currentColor;
}

/* Titlurile mari urca din spatele unei margini, rand cu rand. Pe randuri, nu
   pe litere: textul e inlocuit intreg la schimbarea limbii, iar literele
   impartite in <span> s-ar pierde. */
.pc-rand {
    display: block;
    overflow: hidden;
    padding: 0 .06em .09em 0;
    margin-bottom: -.09em;
}

.pc-rand > span {
    display: block;
}

html.cc-gata:not(.cc-static) .pc-linii[data-reveal] {
    opacity: 1;
}

html.cc-gata:not(.cc-static) .pc-linii[data-reveal] .pc-rand > span {
    transform: translateY(110%);
}

html.cc-gata:not(.cc-static) .pc-linii[data-reveal].este-vizibil {
    animation: none;
}

html.cc-gata:not(.cc-static) .pc-linii[data-reveal].este-vizibil .pc-rand > span {
    animation: pcRand 1.05s var(--cc-ease) both;
}

html.cc-gata:not(.cc-static) .pc-linii[data-reveal].este-vizibil .pc-rand + .pc-rand > span {
    animation-delay: .09s;
}

@keyframes pcRand {
    from {
        transform: translateY(110%);
    }

    to {
        transform: none;
    }
}

@keyframes pcIntra {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* ==================== hero ==================== */

.pc-hero {
    position: relative;
}

.pc-hero-scena {
    position: relative;
    max-width: var(--cc-latime);
    margin: 0 auto;
    padding: clamp(40px, 7vh, 72px) var(--pc-gutter) clamp(56px, 9vh, 96px);
    display: flex;
    flex-direction: column;
}

/* Titlul are tot randul: in engleza „we building?" e mult mai lung decat
   „construim?" si, stramtat langa text, se rupea pe trei randuri. Textul mic
   sta in dreapta, in dreptul primului rand („Ce" / „What are" sunt scurte),
   nu dedesubt — un rand in plus ar fi furat din inaltimea blocurilor. */
.pc-hero-cap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 420px);
    align-items: start;
    gap: 18px 56px;
}

.pc-hero-cap .pc-eticheta {
    grid-column: 1 / -1;
}

.pc-hero-titlu {
    grid-row: 2;
    grid-column: 1 / -1;
    margin-top: 10px;
    font-family: var(--cc-font-titlu);
    font-weight: 700;
    font-size: clamp(60px, 10.4vw, 160px);
    line-height: .86;
    letter-spacing: -.058em;
    color: var(--cc-alb-cald);
}

.pc-hero-sub {
    position: relative;
    grid-row: 2;
    grid-column: 2;
    margin: clamp(14px, 1.6vw, 26px) 0 0;
    font-size: clamp(15px, 1.35vw, 18px);
    line-height: 1.6;
    color: var(--cc-text-2);
}

/*
 * Cele patru directii, ca o linie de orizont: fiecare bloc e mai inalt decat
 * precedentul si are mai multe „etaje" (liniile orizontale din fundal). Asa se
 * vede de la prima privire ca pachetele sunt trepte de complexitate, nu patru
 * carduri egale dintre care alegi dupa gust.
 */
.pc-directii {
    list-style: none;
    margin: clamp(48px, 8vh, 80px) 0 0;
    padding: 0;
    display: flex;
    align-items: flex-end;
    gap: 12px;
    border-bottom: 1px solid var(--pc-fir-tare);
}

.pc-directie {
    flex: 1 1 0;
    min-width: 0;
    height: calc(200px + var(--nivel) * 40px);
}

.pc-directie-link {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding: clamp(14px, 1.6vw, 22px);
    overflow: hidden;
    border: 1px solid var(--pc-fir);
    border-bottom: 0;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012));
    color: var(--cc-text);
    transition: border-color .45s, background-color .45s, box-shadow .45s;
}

.pc-directie-link:focus-visible {
    outline-offset: -3px;
}

/* Etajele: cu cat nivelul e mai mare, cu atat sunt mai dese. */
.pc-directie-link::before,
.pc-harta-mica li::before {
    --etaj: calc(72px / var(--nivel));
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: repeating-linear-gradient(180deg,
            transparent 0 calc(var(--etaj) - 1px),
            rgba(255, 255, 255, .05) calc(var(--etaj) - 1px) var(--etaj));
    -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 90%);
    mask-image: linear-gradient(to top, #000 10%, transparent 90%);
    pointer-events: none;
}

/* De la nivelul 3 apar si coloanele: structura devine grila. Alfa negativ
   (nivelurile 1 si 2) inseamna linii invizibile. */
.pc-directie-link::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: repeating-linear-gradient(90deg,
            transparent 0 calc(25% - 1px),
            rgba(255, 255, 255, calc((var(--nivel) - 2) * .035)) calc(25% - 1px) 25%);
    -webkit-mask-image: linear-gradient(to top, #000, transparent 80%);
    mask-image: linear-gradient(to top, #000, transparent 80%);
    pointer-events: none;
}

.pc-directie[data-pachet="aplicatii-custom"] .pc-directie-link {
    border-color: rgba(160, 120, 255, .28);
    background: linear-gradient(180deg, rgba(160, 120, 255, .12), rgba(124, 233, 224, .025));
}

.pc-directie-link:hover {
    color: var(--cc-text);
    border-color: rgba(124, 233, 224, .45);
    background-color: rgba(124, 233, 224, .04);
}

.pc-directie.este-recomandat .pc-directie-link {
    border-color: rgba(124, 233, 224, .6);
    box-shadow: inset 0 2px 0 var(--cc-turcoaz);
}

.pc-directie-sus {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.pc-directie-nr {
    font-family: var(--cc-font-titlu);
    font-weight: 700;
    font-size: clamp(40px, 4.6vw, 68px);
    line-height: .9;
    letter-spacing: -.05em;
    color: transparent;
    -webkit-text-stroke: 1px rgba(244, 244, 240, .42);
}

.pc-directie-sageata {
    font-size: 18px;
    color: var(--cc-text-slab);
    transition: color .3s, transform .45s var(--cc-ease);
}

.pc-directie-link:hover .pc-directie-sageata,
.pc-directie-link:focus-visible .pc-directie-sageata {
    color: var(--cc-turcoaz);
    transform: translate(3px, 3px);
}

.pc-directie-jos {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.pc-directie-nume {
    font-family: var(--cc-font-titlu);
    font-weight: 600;
    font-size: clamp(19px, 1.9vw, 26px);
    line-height: 1.1;
    letter-spacing: -.025em;
    color: var(--cc-alb-cald);
}

.pc-directie-nivel {
    font-family: var(--cc-font-mono);
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cc-turcoaz);
}

.pc-directie-termen {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid var(--pc-fir);
    font-size: 13px;
    color: var(--cc-text-2);
}

.pc-directie-termen > span:first-child {
    font-family: var(--cc-font-mono);
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cc-text-estompat);
}

.pc-bare {
    display: flex;
    gap: 4px;
    margin-top: 8px;
}

.pc-bare i {
    width: 16px;
    height: 3px;
    background: rgba(255, 255, 255, .14);
}

.pc-bare i.plin {
    background: var(--cc-gradient);
}

.pc-indiciu {
    display: none;
}

/*
 * Pe ecran lat, hero-ul e o scena lipita: titlul sta, iar blocurile urca din
 * linia de jos pe masura ce derulezi (`--r`, 0–1, pus de pachete.js pe fiecare
 * bloc; `--hp` e progresul intregii scene). `overflow: hidden` pe lista e
 * „pamantul" din care ies.
 */
html.pc-scroll .pc-hero {
    height: 210vh;
}

html.pc-scroll .pc-hero-scena {
    position: sticky;
    top: var(--nav-height);
    height: calc(100vh - var(--nav-height));
    padding-bottom: 0;
}

html.pc-scroll .pc-hero-cap {
    transform: translateY(calc(var(--hp, 0) * -22px));
}

html.pc-scroll .pc-directii {
    flex: 1;
    min-height: 0;
    margin-top: clamp(24px, 4vh, 48px);
    overflow: hidden;
}

html.pc-scroll .pc-directie-link {
    padding-block: clamp(12px, 1.3vw, 20px);
}

html.pc-scroll .pc-directie {
    height: calc(56% + var(--nivel) * 11%);
    transform: translateY(calc((1 - var(--r, 1)) * 102%));
}

html.pc-scroll .pc-indiciu {
    position: absolute;
    left: 50%;
    bottom: 18%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    font-family: var(--cc-font-mono);
    font-size: 11px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--cc-text-estompat);
    transform: translateX(-50%);
    opacity: calc(1 - var(--hp, 0) * 7);
}

.pc-indiciu-sageata {
    animation: pcPlutire 2.2s ease-in-out infinite;
}

@keyframes pcPlutire {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(6px);
    }
}

/* ==================== bara dintre pachete ==================== */

.pc-sina {
    position: sticky;
    top: var(--nav-height);
    z-index: 40;
    height: var(--sina-h);
    border-top: 1px solid var(--pc-fir);
    border-bottom: 1px solid var(--pc-fir);
    background: rgba(6, 6, 13, .8);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

html:not(.pc-js) .pc-sina {
    display: none;
}

.pc-sina-interior {
    max-width: var(--cc-latime);
    height: 100%;
    margin: 0 auto;
    padding: 0 var(--pc-gutter);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pc-sina-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 0 16px;
    border-left: 1px solid var(--pc-fir);
    font-family: var(--cc-font-mono);
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--cc-text-estompat);
    transition: color .3s, background-color .3s;
}

.pc-sina-link:last-child {
    border-right: 1px solid var(--pc-fir);
}

/* Cat din pachet ai citit. */
.pc-sina-link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--cc-gradient);
    transform-origin: left center;
    transform: scaleX(var(--f, 0));
}

.pc-sina-link:hover,
.pc-sina-link.este-activ {
    color: var(--cc-text);
}

.pc-sina-link.este-activ {
    background: rgba(255, 255, 255, .035);
}

.pc-sina-nr {
    color: var(--cc-turcoaz);
}

.pc-sina-nume {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pc-sina-link.este-recomandat::before {
    content: '';
    flex: none;
    order: 3;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cc-turcoaz);
    box-shadow: 0 0 10px rgba(124, 233, 224, .9);
}

/* ==================== pachetele ==================== */

.pc-capitol-interior {
    max-width: var(--cc-latime);
    margin: 0 auto;
    padding: clamp(88px, 13vh, 150px) var(--pc-gutter) clamp(24px, 4vh, 48px);
}

.pc-pachet {
    position: relative;
    border-top: 1px solid var(--pc-fir);
}

.pc-capitol + .pc-pachet {
    border-top: 0;
}

/*
 * Doua coloane asimetrice: textul intr-una, scena in cealalta, alternand de la
 * un pachet la altul. Scena ocupa ambele randuri, ca sa poata sta lipita pe
 * ecran cat citesti si detaliile.
 */
.pc-pachet-grila {
    position: relative;
    isolation: isolate;
    max-width: var(--cc-latime);
    margin: 0 auto;
    padding: clamp(80px, 12vh, 140px) var(--pc-gutter);
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "text vizual"
        "detalii vizual";
    column-gap: clamp(36px, 6vw, 96px);
    align-items: start;
}

.pc-pachet--invers .pc-pachet-grila {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas:
        "vizual text"
        "vizual detalii";
}

.pc-pachet-text {
    grid-area: text;
}

.pc-pachet-detalii {
    grid-area: detalii;
    margin-top: 36px;
}

.pc-pachet-vizual {
    grid-area: vizual;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

html.pc-scroll .pc-pachet-grila {
    min-height: 180vh;
}

html.pc-scroll .pc-pachet-vizual {
    position: sticky;
    top: calc(var(--nav-height) + var(--sina-h));
    height: calc(100vh - var(--nav-height) - var(--sina-h));
    align-self: start;
}

/* Cifra uriasa din spatele titlului, doar contur. */
.pc-pachet-nr {
    position: absolute;
    top: clamp(20px, 5vh, 60px);
    left: calc(var(--pc-gutter) - .05em);
    z-index: -1;
    font-family: var(--cc-font-titlu);
    font-weight: 700;
    font-size: clamp(150px, 24vw, 360px);
    line-height: .8;
    letter-spacing: -.07em;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, .07);
    pointer-events: none;
    user-select: none;
}

.pc-pachet--invers .pc-pachet-nr {
    left: auto;
    right: var(--pc-gutter);
}

html.pc-scroll .pc-pachet-nr {
    transform: translateY(calc(var(--pk, 0) * -90px));
}

.pc-pachet-index {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: var(--cc-font-mono);
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--cc-turcoaz);
}

.pc-pachet-index > span:first-child {
    color: var(--cc-text-estompat);
}

.pc-pachet-index-fir {
    flex: none;
    width: clamp(40px, 6vw, 88px);
    height: 1px;
    background: linear-gradient(90deg, var(--cc-turcoaz), rgba(124, 233, 224, 0));
}

.pc-pachet-nume {
    margin: 22px 0 0;
    font-family: var(--cc-font-titlu);
    font-size: clamp(46px, 6vw, 92px);
    line-height: .92;
    letter-spacing: -.05em;
    color: var(--cc-alb-cald);
    text-wrap: balance;
}

.pc-pachet-insigna,
.pc-recomandat {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 20px 8px 0 0;
    padding: 5px 12px;
    border-radius: 999px;
    font-family: var(--cc-font-mono);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.pc-pachet-insigna {
    border: 1px solid var(--pc-fir-tare);
    color: var(--cc-text-2);
}

.pc-recomandat {
    display: none;
    background: rgba(124, 233, 224, .12);
    color: var(--cc-turcoaz);
}

.pc-recomandat::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.pc-pachet.este-recomandat .pc-recomandat {
    display: inline-flex;
    animation: pcIntra .5s var(--cc-ease) both;
}

.pc-pachet-rol {
    margin: 28px 0 0;
    max-width: 34em;
    font-size: clamp(16px, 1.4vw, 19px);
    line-height: 1.65;
    color: var(--cc-text-2);
}

/* Termenul si „potrivit pentru": raspunsurile rapide, mereu la vedere. */
.pc-fise {
    margin: 36px 0 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    border-top: 1px solid var(--pc-fir-tare);
}

.pc-fise > div {
    padding: 18px 20px 0 0;
}

.pc-fise > div + div {
    padding-left: 20px;
    border-left: 1px solid var(--pc-fir);
}

.pc-fise dt {
    font-family: var(--cc-font-mono);
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--cc-text-estompat);
}

.pc-fise dd {
    margin: 10px 0 0;
}

.pc-fise-mare {
    display: block;
    font-family: var(--cc-font-titlu);
    font-weight: 600;
    font-size: clamp(22px, 2.1vw, 30px);
    line-height: 1.1;
    letter-spacing: -.025em;
    color: var(--cc-alb-cald);
}

.pc-fise-mic {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--cc-text-estompat);
}

.pc-fise-text {
    font-size: 15px;
    line-height: 1.55;
    color: var(--cc-text-2);
}

/* --- ce include si ce nu --- */

.pc-detalii {
    border-top: 1px solid var(--pc-fir);
    border-bottom: 1px solid var(--pc-fir);
}

.pc-detalii-buton {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 20px 0;
    border: 0;
    background: none;
    color: var(--cc-text);
    font-family: var(--cc-font-mono);
    font-size: 13px;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-align: left;
    cursor: pointer;
    transition: color .3s;
}

.pc-detalii-buton:hover {
    color: var(--cc-turcoaz);
}

.pc-plus {
    position: relative;
    flex: none;
    width: 32px;
    height: 32px;
    border: 1px solid var(--pc-fir-tare);
    border-radius: 50%;
    transition: border-color .3s, transform .5s var(--cc-ease);
}

.pc-plus::before,
.pc-plus::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 12px;
    height: 1px;
    margin: -.5px 0 0 -6px;
    background: currentColor;
    transition: transform .5s var(--cc-ease);
}

.pc-plus::after {
    transform: rotate(90deg);
}

.pc-detalii.este-deschis .pc-plus {
    border-color: var(--cc-turcoaz);
    transform: rotate(180deg);
}

.pc-detalii.este-deschis .pc-plus::after {
    transform: rotate(0deg);
}

/* Fara JavaScript butonul nu face nimic, iar listele stau deschise. */
html:not(.pc-js) .pc-plus {
    display: none;
}

.pc-detalii-corp {
    display: grid;
    grid-template-rows: 1fr;
}

html.pc-js .pc-detalii-corp {
    grid-template-rows: 0fr;
    transition: grid-template-rows .65s var(--cc-ease);
}

html.pc-js .pc-detalii.este-deschis .pc-detalii-corp {
    grid-template-rows: 1fr;
}

.pc-detalii-interior {
    min-height: 0;
    overflow: hidden;
}

/* Inchis = ascuns si pentru cititoarele de ecran, dupa ce se strange. */
html.pc-js .pc-detalii:not(.este-deschis) .pc-detalii-interior {
    visibility: hidden;
    transition: visibility 0s .65s;
}

.pc-detalii-coloane {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px 28px;
    padding: 0 0 28px;
}

html.pc-js .pc-detalii-coloane {
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .35s, transform .6s var(--cc-ease);
}

html.pc-js .pc-detalii.este-deschis .pc-detalii-coloane {
    opacity: 1;
    transform: none;
    transition-delay: .12s;
}

.pc-coloana-titlu {
    margin: 18px 0 10px;
    font-family: var(--cc-font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--cc-turcoaz);
}

div:has(> .pc-lista--nu) > .pc-coloana-titlu {
    color: var(--cc-text-estompat);
}

.pc-lista {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pc-lista li {
    position: relative;
    padding: 10px 0 10px 26px;
    border-top: 1px solid rgba(255, 255, 255, .055);
    font-size: 15px;
    line-height: 1.55;
    color: var(--cc-text-2);
}

.pc-lista li strong {
    font-weight: 500;
    color: var(--cc-text);
}

.pc-lista--da li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 21px;
    width: 12px;
    height: 1px;
    background: var(--cc-turcoaz);
}

.pc-lista--nu li {
    color: var(--cc-text-estompat);
}

/* Un cerc taiat: „nu intra", fara o iconita incarcata. */
.pc-lista--nu li::before {
    content: '';
    position: absolute;
    left: 1px;
    top: 16px;
    width: 10px;
    height: 10px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 50%;
    background: linear-gradient(135deg, transparent 46%, rgba(255, 255, 255, .28) 46% 56%, transparent 56%);
}

.pc-lista--pasi {
    counter-reset: pas;
}

.pc-lista--pasi li {
    counter-increment: pas;
    padding-left: 40px;
}

.pc-lista--pasi li::before {
    content: counter(pas, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 12px;
    font-family: var(--cc-font-mono);
    font-size: 12px;
    color: var(--cc-turcoaz);
}

.pc-pachet-actiuni {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 28px;
    margin-top: 32px;
}

.pc-pachet-actiuni .cc-btn {
    padding: 15px 26px;
    font-size: 15px;
}

/* ==================== scenele ==================== */

.pc-scena {
    position: relative;
    width: 100%;
}

.pc-scena-nota {
    margin: 18px 0 0;
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--cc-font-mono);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cc-text-estompat);
}

.pc-scena-nota::before {
    content: '';
    width: 24px;
    height: 1px;
    background: currentColor;
}

/* Pe ecran scund scena se micsoreaza ca sa incapa intreaga sub bara. */
html.pc-scroll .pc-scena--landing,
html.pc-scroll .pc-scena--harta {
    width: min(100%, calc((100vh - var(--nav-height) - var(--sina-h) - 170px) * 1.39));
}

html.pc-scroll .pc-scena--eco {
    width: min(100%, calc((100vh - var(--nav-height) - var(--sina-h) - 150px) * 1.2));
}

/* --- 01: o pagina care se construieste sectiune cu sectiune --- */

.pc-etape {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    font-family: var(--cc-font-mono);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--cc-text-estompat);
}

.pc-etape li {
    transition: color .4s;
}

.pc-etape b {
    margin-right: 4px;
    font-weight: 400;
}

html.pc-js .pc-etape li {
    color: rgba(255, 255, 255, .2);
}

html.pc-js .pc-etape li.este-activ {
    color: var(--cc-text-estompat);
}

html.pc-js .pc-etape li.este-curent {
    color: var(--cc-turcoaz);
}

.pc-browser {
    position: relative;
    display: flex;
    flex-direction: column;
    aspect-ratio: 16 / 11;
    overflow: hidden;
    border: 1px solid var(--pc-fir-tare);
    border-radius: 10px;
    background: rgba(9, 9, 18, .9);
    box-shadow: 0 50px 120px -50px rgba(0, 0, 0, .9);
    clip-path: inset(0 0 0 0 round 10px);
    transition: clip-path 1s var(--cc-ease), box-shadow .8s, border-color .8s;
}

/* Etapa 1, cadrul: fereastra se deschide din coltul de sus. */
html.pc-js .pc-browser:not(.este-activ) {
    clip-path: inset(0 100% 100% 0 round 10px);
}

.pc-browser-bara {
    flex: none;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 34px;
    padding: 0 12px;
    border-bottom: 1px solid var(--pc-fir);
}

.pc-browser-puncte {
    display: flex;
    gap: 6px;
}

.pc-browser-puncte i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
}

.pc-browser-adresa {
    flex: 1;
    max-width: 55%;
    height: 20px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, .05);
    font-family: var(--cc-font-mono);
    font-size: 10.5px;
    white-space: nowrap;
    color: var(--cc-text-estompat);
}

.pc-lacat {
    position: relative;
    flex: none;
    width: 7px;
    height: 6px;
    margin-top: 3px;
    border: 1px solid currentColor;
    border-radius: 1px;
}

.pc-lacat::before {
    content: '';
    position: absolute;
    left: 0;
    top: -5px;
    width: 3px;
    height: 4px;
    border: 1px solid currentColor;
    border-bottom: 0;
    border-radius: 3px 3px 0 0;
}

.pc-browser-live {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--cc-font-mono);
    font-size: 10px;
    letter-spacing: .14em;
    color: var(--cc-turcoaz);
    transition: opacity .5s;
}

.pc-browser-live::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 8px currentColor;
    animation: pcClipire 1.8s ease-in-out infinite;
}

html.pc-js .pc-browser-live:not(.este-activ) {
    opacity: 0;
}

@keyframes pcClipire {
    50% {
        opacity: .35;
    }
}

.pc-browser-corp {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-rows: 11% 36% 24% 1fr;
    gap: 10px;
    padding: 12px;
}

.pc-wf {
    position: relative;
    min-height: 0;
    display: flex;
    border: 1px dashed rgba(255, 255, 255, .16);
    border-radius: 6px;
    transition: opacity .7s var(--cc-ease), transform .7s var(--cc-ease), border-color .6s, background-color .6s;
}

html.pc-js .pc-wf:not(.este-activ) {
    opacity: 0;
    transform: translateY(16px) scale(.98);
}

.pc-wf-nav {
    align-items: center;
    gap: 10px;
    padding: 0 3%;
}

.pc-wf-nav b {
    width: 16%;
    height: 32%;
    border-radius: 3px;
    background: rgba(255, 255, 255, .28);
}

.pc-wf-nav span {
    width: 8%;
    height: 16%;
    border-radius: 2px;
    background: rgba(255, 255, 255, .13);
}

.pc-wf-nav span:first-of-type {
    margin-left: auto;
}

.pc-wf-nav em {
    width: 12%;
    height: 44%;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
}

.pc-wf-hero {
    gap: 4%;
    padding: 3.5%;
}

.pc-wf-hero > div,
.pc-wf-contact > div {
    flex: 1.2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 7%;
}

.pc-wf-hero b {
    width: 90%;
    height: 12%;
    border-radius: 3px;
    background: rgba(255, 255, 255, .3);
}

.pc-wf-hero b + b {
    width: 62%;
}

.pc-wf-hero i,
.pc-wf-contact i {
    width: 80%;
    height: 5%;
    border-radius: 2px;
    background: rgba(255, 255, 255, .12);
}

.pc-wf-hero i + i,
.pc-wf-contact i + i {
    width: 55%;
}

.pc-wf-hero em,
.pc-wf-contact em {
    width: 34%;
    height: 14%;
    margin-top: 3%;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 999px;
}

.pc-wf-poza {
    flex: 1;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 4px;
    background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 10px);
}

.pc-wf-servicii {
    gap: 3%;
    padding: 3%;
}

.pc-wf-servicii span {
    position: relative;
    flex: 1;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 4px;
}

.pc-wf-servicii span::before {
    content: '';
    position: absolute;
    left: 12%;
    top: 18%;
    width: 18%;
    aspect-ratio: 1;
    border-radius: 4px;
    background: rgba(255, 255, 255, .14);
}

.pc-wf-servicii span::after {
    content: '';
    position: absolute;
    left: 12%;
    right: 22%;
    bottom: 22%;
    height: 8%;
    border-radius: 2px;
    background: rgba(255, 255, 255, .1);
}

.pc-wf-contact {
    gap: 4%;
    padding: 3%;
}

.pc-wf-contact > div {
    flex: 1;
}

.pc-wf-contact b {
    width: 55%;
    height: 14%;
    border-radius: 3px;
    background: rgba(255, 255, 255, .26);
}

.pc-wf-harta {
    position: relative;
    flex: 1;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 4px;
    background:
        linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 14px 14px,
        linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 14px 14px;
}

.pc-wf-harta::after {
    content: '';
    position: absolute;
    left: 55%;
    top: 36%;
    width: 11px;
    height: 11px;
    border-radius: 50% 50% 50% 0;
    background: rgba(255, 255, 255, .35);
    transform: rotate(-45deg);
}

/* Etapa 6: pagina e online. Schita devine site — culoare, butoane pline. */
.pc-scena--landing.este-live .pc-browser,
html:not(.pc-js) .pc-browser {
    border-color: rgba(124, 233, 224, .35);
    box-shadow: 0 0 0 1px rgba(124, 233, 224, .08), 0 50px 140px -40px rgba(124, 233, 224, .28);
}

.pc-scena--landing.este-live .pc-wf,
html:not(.pc-js) .pc-wf {
    border-style: solid;
    border-color: rgba(255, 255, 255, .07);
    background-color: rgba(255, 255, 255, .02);
}

.pc-scena--landing.este-live .pc-wf-hero b:first-child,
html:not(.pc-js) .pc-wf-hero b:first-child {
    background: var(--cc-gradient);
}

.pc-scena--landing.este-live .pc-wf em,
html:not(.pc-js) .pc-wf em {
    border-color: transparent;
    background: var(--cc-alb-cald);
}

.pc-scena--landing.este-live .pc-wf-poza,
html:not(.pc-js) .pc-wf-poza {
    background:
        radial-gradient(60% 70% at 70% 30%, rgba(160, 120, 255, .32), transparent 70%),
        linear-gradient(135deg, rgba(124, 233, 224, .22), rgba(160, 120, 255, .12));
}

.pc-scena--landing.este-live .pc-wf-servicii span::before,
html:not(.pc-js) .pc-wf-servicii span::before {
    background: linear-gradient(135deg, var(--cc-turcoaz), var(--cc-violet));
    opacity: .75;
}

.pc-scena--landing.este-live .pc-wf-harta::after,
html:not(.pc-js) .pc-wf-harta::after {
    background: var(--cc-turcoaz);
}

/* In modul simplu toata scena se construieste odata, in trepte. */
html.pc-js:not(.pc-scroll) .pc-scena--landing [data-e="2"] {
    transition-delay: .3s;
}

html.pc-js:not(.pc-scroll) .pc-scena--landing [data-e="3"] {
    transition-delay: .55s;
}

html.pc-js:not(.pc-scroll) .pc-scena--landing [data-e="4"] {
    transition-delay: .8s;
}

html.pc-js:not(.pc-scroll) .pc-scena--landing [data-e="5"] {
    transition-delay: 1.05s;
}

html.pc-js:not(.pc-scroll) .pc-scena--landing [data-e="6"] {
    transition-delay: 1.35s;
}

/* --- 02: o pagina devine un site intreg --- */

/*
 * Toate masuratorile sunt in `cqw` (procente din latimea scenei), ca desenul
 * sa ramana proportionat la orice marime. `--k` (0–1) vine din pachete.js;
 * `--ki` il decaleaza pe fiecare pagina, ca ele sa plece pe rand. La `--k: 0`
 * cele patru pagini stau stranse sub „Acasa”: o singura pagina.
 */
.pc-scena--harta,
.pc-scena--eco {
    --k: 1;
    container-type: inline-size;
    margin-bottom: 44px;
}

.pc-scena--harta {
    aspect-ratio: 100 / 72;
}

.pc-scena--harta .pc-scena-nota,
.pc-scena--eco .pc-scena-nota {
    position: absolute;
    left: 0;
    top: 100%;
    margin-top: 16px;
}

.pc-harta-fire,
.pc-eco-fire {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.pc-harta-fire path {
    --kl: clamp(0, (var(--k) - .3 - var(--i) * .1) * 2.6, 1);
    fill: none;
    stroke: rgba(124, 233, 224, .55);
    stroke-width: .25;
    stroke-dasharray: 1 1;
    stroke-dashoffset: calc(1 - var(--kl));
}

html.pc-js:not(.pc-scroll) .pc-harta-fire path {
    transition: stroke-dashoffset 1s var(--cc-ease) calc(.55s + var(--i) * .12s);
}

.pc-foaie {
    --y: 53;
    --ki: clamp(0, (var(--k) - .05 - var(--i) * .1) * 2.4, 1);
    position: absolute;
    left: calc(var(--x) * 1cqw);
    top: calc(var(--y) * 1cqw);
    z-index: calc(4 - var(--i));
    width: 21cqw;
    height: 25cqw;
    display: flex;
    flex-direction: column;
    gap: 1.2cqw;
    padding: 1.5cqw;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 1cqw;
    background: #0b0b16;
    box-shadow: 0 2cqw 5cqw -2cqw rgba(0, 0, 0, .8);
    translate: -50% -50%;
    transform:
        translate(calc((1 - var(--ki)) * (50 - var(--x)) * 1cqw),
            calc((1 - var(--ki)) * ((13 - var(--y)) * 1cqw + (var(--i) + 1) * 1.1cqw))) scale(calc(.8 + .2 * var(--ki)));
}

html.pc-js:not(.pc-scroll) .pc-foaie {
    transition: transform 1.1s var(--cc-ease) calc(var(--i) * .1s);
}

.pc-foaie--acasa {
    --x: 50;
    --y: 13;
    --i: -1;
    z-index: 6;
    width: 30cqw;
    height: 20cqw;
    border-color: rgba(124, 233, 224, .45);
    transform: none;
}

.pc-foaie-bara {
    flex: none;
    display: flex;
    gap: .6cqw;
}

.pc-foaie-bara i {
    width: .9cqw;
    height: .9cqw;
    border-radius: 50%;
    background: rgba(255, 255, 255, .22);
}

.pc-foaie-nume {
    font-family: var(--cc-font-mono);
    font-size: max(8px, 1.65cqw);
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--cc-text);
}

.pc-foaie-rand {
    flex: none;
    height: .8cqw;
    border-radius: 1px;
    background: rgba(255, 255, 255, .12);
}

.pc-foaie-rand--scurt {
    width: 60%;
}

.pc-foaie-bloc {
    flex: 1;
    min-height: 2cqw;
    border-radius: .6cqw;
    background: linear-gradient(135deg, rgba(124, 233, 224, .16), rgba(160, 120, 255, .14));
}

.pc-foaie-bloc--harta {
    background:
        linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px) 0 0 / 1.4cqw 1.4cqw,
        linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px) 0 0 / 1.4cqw 1.4cqw;
}

.pc-foaie-grila {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .8cqw;
}

.pc-foaie-grila i {
    border-radius: .4cqw;
    background: rgba(255, 255, 255, .08);
}

/* --- 03: site-ul, legat de tot ce il face gasit --- */

.pc-scena--eco {
    aspect-ratio: 100 / 80;
}

.pc-eco-orbita {
    fill: none;
    stroke: rgba(255, 255, 255, .07);
    stroke-width: .2;
    stroke-dasharray: .6 .9;
}

.pc-eco-fir {
    --kl: clamp(0, (var(--k) - .2 - var(--i) * .12) * 3, 1);
    fill: none;
    stroke: rgba(255, 255, 255, .25);
    stroke-width: .25;
    stroke-dasharray: 1 1;
    stroke-dashoffset: calc(1 - var(--kl));
}

/* Un punct de lumina care pleaca din site spre fiecare serviciu, dupa ce
   reteaua e completa. */
.pc-eco-puls {
    fill: none;
    stroke: var(--cc-turcoaz);
    stroke-width: .7;
    stroke-linecap: round;
    stroke-dasharray: .05 .95;
    stroke-dashoffset: 1;
    opacity: 0;
    transition: opacity .6s;
}

.pc-scena--eco.este-complet .pc-eco-puls,
html:not(.pc-js) .pc-eco-puls {
    opacity: .9;
    animation: pcPuls 2.6s linear infinite;
    animation-delay: calc(var(--i) * -.65s);
}

@keyframes pcPuls {
    from {
        stroke-dashoffset: 1;
    }

    to {
        stroke-dashoffset: 0;
    }
}

.pc-eco-centru {
    --kc: clamp(0, var(--k) * 5, 1);
    position: absolute;
    left: 50cqw;
    top: 40cqw;
    z-index: 2;
    width: 30cqw;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .8cqw;
    padding: 2cqw 2cqw 2.4cqw;
    border: 1px solid rgba(124, 233, 224, .4);
    border-radius: 1.4cqw;
    background: #0a0a15;
    text-align: center;
    /* Paginile din spate, desenate din umbre: „pana la 10 pagini". */
    box-shadow:
        1.2cqw -1.2cqw 0 -1px #0a0a15,
        1.2cqw -1.2cqw 0 0 rgba(255, 255, 255, .14),
        2.4cqw -2.4cqw 0 -1px #0a0a15,
        2.4cqw -2.4cqw 0 0 rgba(255, 255, 255, .07);
    translate: -50% -50%;
    opacity: calc(.3 + .7 * var(--kc));
    transform: scale(calc(.92 + .08 * var(--kc)));
}

.pc-eco-browser {
    width: 100%;
    height: 9cqw;
    margin-bottom: .6cqw;
    display: flex;
    flex-direction: column;
    gap: .8cqw;
    padding: 1cqw;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: .8cqw;
}

.pc-eco-centru b {
    font-family: var(--cc-font-titlu);
    font-weight: 600;
    font-size: max(13px, 2.6cqw);
    letter-spacing: -.02em;
    color: var(--cc-alb-cald);
}

.pc-eco-centru > span:last-child {
    font-family: var(--cc-font-mono);
    font-size: max(9px, 1.5cqw);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cc-text-estompat);
}

.pc-eco-nod {
    --kn: clamp(0, (var(--k) - .35 - var(--i) * .12) * 3.2, 1);
    position: absolute;
    left: calc(var(--x) * 1cqw);
    top: calc(var(--y) * 1cqw);
    z-index: 2;
    width: 26cqw;
    display: flex;
    flex-direction: column;
    gap: .6cqw;
    padding: 1.6cqw 3.4cqw 1.6cqw 1.8cqw;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 1cqw;
    background: #0a0a15;
    translate: -50% -50%;
    opacity: var(--kn);
    transform:
        translate(calc((1 - var(--kn)) * (50 - var(--x)) * .35cqw), calc((1 - var(--kn)) * (40 - var(--y)) * .35cqw)) scale(calc(.9 + .1 * var(--kn)));
}

.pc-eco-nod::before {
    content: '';
    position: absolute;
    top: 1.8cqw;
    right: 1.6cqw;
    width: .9cqw;
    height: .9cqw;
    border-radius: 50%;
    background: var(--cc-turcoaz);
    box-shadow: 0 0 1.2cqw var(--cc-turcoaz);
}

.pc-eco-nod b {
    font-family: var(--cc-font-mono);
    font-weight: 500;
    font-size: max(10px, 1.8cqw);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--cc-alb-cald);
}

.pc-eco-nod span {
    font-size: max(10px, 1.6cqw);
    line-height: 1.35;
    color: var(--cc-text-estompat);
}

html.pc-js:not(.pc-scroll) .pc-eco-centru {
    transition: opacity .6s, transform .8s var(--cc-ease);
}

html.pc-js:not(.pc-scroll) .pc-eco-fir {
    transition: stroke-dashoffset .9s var(--cc-ease) calc(.2s + var(--i) * .15s);
}

html.pc-js:not(.pc-scroll) .pc-eco-nod {
    transition: opacity .8s, transform 1s var(--cc-ease);
    transition-delay: calc(.45s + var(--i) * .15s);
}

/* ==================== 04: aplicatii / custom ==================== */

/* Punctul culminant: alt fundal, alta compozitie. Nu mai e o pagina, e un
   sistem, asa ca scena ocupa toata latimea. */
.pc-pachet--custom {
    border-top: 1px solid rgba(160, 120, 255, .22);
    background:
        radial-gradient(70% 55% at 72% 18%, rgba(160, 120, 255, .09), transparent 70%),
        radial-gradient(50% 40% at 12% 85%, rgba(124, 233, 224, .05), transparent 70%),
        linear-gradient(180deg, #05050b, #07070f);
}

.pc-custom-pista {
    position: relative;
}

html.pc-scroll .pc-custom-pista {
    height: 230vh;
}

.pc-custom-scena {
    max-width: var(--cc-latime);
    margin: 0 auto;
    padding: clamp(88px, 13vh, 150px) var(--pc-gutter) 48px;
}

html.pc-scroll .pc-custom-scena {
    position: sticky;
    top: calc(var(--nav-height) + var(--sina-h));
    height: calc(100vh - var(--nav-height) - var(--sina-h));
    padding-top: 24px;
    padding-bottom: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.pc-custom-cap {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 28px clamp(36px, 6vw, 96px);
    align-items: end;
}

.pc-custom-nume {
    font-size: clamp(46px, 6.4vw, 104px);
}

.pc-custom-afirmatie {
    margin: 24px 0 0;
    max-width: 20em;
    font-family: var(--cc-font-titlu);
    font-weight: 500;
    font-size: clamp(20px, 2.1vw, 30px);
    line-height: 1.25;
    letter-spacing: -.02em;
    color: var(--cc-text);
}

.pc-custom-afirmatie em {
    font-style: normal;
    background: var(--cc-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.pc-custom-cap .pc-pachet-rol {
    margin-top: 0;
}

.pc-custom-cap .pc-fise {
    margin-top: 24px;
}

/*
 * Sistemul: utilizator → aplicatie → API → baza de date → panou. Legaturile si
 * pachetele de date care circula pe ele sunt pseudo-elemente ale fiecarui nod,
 * deci aceeasi schema se intoarce pe verticala pe telefon doar din CSS.
 */
.pc-sistem {
    --k: 1;
    --gol: clamp(18px, 2.6vw, 40px);
    margin-top: clamp(36px, 6vh, 64px);
}

.pc-noduri {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--gol);
}

.pc-nod {
    --kn: clamp(0, (var(--k) - .04 - var(--i) * .13) * 3.5, 1);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 16px 16px;
    border: 1px solid rgba(124, 233, 224, calc(.08 + .28 * var(--kn)));
    border-radius: 6px;
    background: rgba(9, 9, 18, .92);
    opacity: calc(.18 + .82 * var(--kn));
    transform: translateY(calc((1 - var(--kn)) * 16px));
}

html.pc-js:not(.pc-scroll) .pc-nod {
    transition: opacity .7s, transform .9s var(--cc-ease), border-color .7s;
    transition-delay: calc(var(--i) * .16s);
}

.pc-nod-ic {
    width: 24px;
    height: 24px;
    margin-bottom: 8px;
    fill: none;
    stroke: var(--cc-turcoaz);
    stroke: color-mix(in srgb, var(--cc-violet) calc(var(--i) * 25%), var(--cc-turcoaz));
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pc-nod-nume {
    font-family: var(--cc-font-titlu);
    font-weight: 600;
    font-size: clamp(15px, 1.3vw, 18px);
    line-height: 1.2;
    letter-spacing: -.015em;
    color: var(--cc-alb-cald);
}

.pc-nod-meta {
    font-family: var(--cc-font-mono);
    font-size: 10.5px;
    letter-spacing: .06em;
    color: var(--cc-text-estompat);
}

.pc-nod + .pc-nod::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 100%;
    width: var(--gol);
    height: 1px;
    background: linear-gradient(90deg, rgba(124, 233, 224, .6), rgba(160, 120, 255, .6));
    transform-origin: left center;
    transform: scaleX(var(--kn));
}

html.pc-js:not(.pc-scroll) .pc-nod + .pc-nod::before {
    transition: transform .8s var(--cc-ease);
    transition-delay: calc(var(--i) * .16s);
}

.pc-nod + .pc-nod::after {
    content: '';
    position: absolute;
    top: calc(50% - 3px);
    right: calc(100% + var(--gol) - 6px);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cc-turcoaz);
    box-shadow: 0 0 10px rgba(124, 233, 224, .9);
    opacity: 0;
}

.pc-sistem.este-complet .pc-nod + .pc-nod::after,
html:not(.pc-js) .pc-nod + .pc-nod::after {
    animation: pcPachet 2.2s cubic-bezier(.45, 0, .55, 1) infinite;
    animation-delay: calc(var(--i) * .3s);
}

@keyframes pcPachet {
    0% {
        opacity: 0;
        transform: translateX(0);
    }

    15%,
    85% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translateX(calc(var(--gol) - 6px));
    }
}

@keyframes pcPachetV {
    0% {
        opacity: 0;
        transform: translateY(0);
    }

    15%,
    85% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translateY(calc(var(--gol) - 6px));
    }
}

.pc-capabilitati {
    list-style: none;
    margin: 22px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pc-capabilitati li {
    padding: 7px 14px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 999px;
    font-family: var(--cc-font-mono);
    font-size: 11.5px;
    letter-spacing: .04em;
    color: var(--cc-text-slab);
    transition: color .5s, border-color .5s, background-color .5s;
}

.pc-capabilitati li.este-activ,
html:not(.pc-js) .pc-capabilitati li {
    border-color: rgba(160, 120, 255, .38);
    background-color: rgba(160, 120, 255, .07);
    color: var(--cc-text);
}

/* Pe ecran scund etichetele nu mai incap langa schema; lista completa e
   oricum imediat dedesubt. */
@media (max-height: 820px) {
    html.pc-scroll .pc-capabilitati {
        display: none;
    }

    html.pc-scroll .pc-custom-cap .pc-fise {
        margin-top: 16px;
    }
}

.pc-custom-jos {
    max-width: var(--cc-latime);
    margin: 0 auto;
    padding: clamp(40px, 6vh, 72px) var(--pc-gutter) clamp(96px, 14vh, 150px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px clamp(36px, 6vw, 96px);
    border-top: 1px solid rgba(255, 255, 255, .06);
}

.pc-exemple {
    margin: 24px 0 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--cc-text-2);
}

.pc-exemple strong {
    font-weight: 500;
    color: var(--cc-text);
}

/* ==================== nu stii ce sa alegi ==================== */

/* Fara JavaScript intrebarea nu poate raspunde, deci nu o aratam. */
html:not(.pc-js) .pc-alege {
    display: none;
}

.pc-alege-grila {
    margin-top: clamp(40px, 7vh, 72px);
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(24px, 4vw, 64px);
    align-items: start;
}

.pc-intrebare {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.pc-intrebare legend {
    margin-bottom: 8px;
    padding: 0;
    font-family: var(--cc-font-mono);
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--cc-text-estompat);
}

.pc-optiune {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 8px;
    padding: 17px 18px;
    border: 1px solid var(--pc-fir);
    border-radius: 6px;
    background: rgba(255, 255, 255, .015);
    cursor: pointer;
    transition: border-color .35s, background-color .35s;
}

.pc-optiune:hover {
    border-color: var(--pc-fir-tare);
    background-color: rgba(255, 255, 255, .035);
}

/* Radio-ul real ramane in pagina (tastatura, cititoare de ecran), doar invizibil. */
.pc-optiune input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.pc-optiune-litera {
    flex: none;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--pc-fir-tare);
    border-radius: 50%;
    font-family: var(--cc-font-mono);
    font-size: 12px;
    color: var(--cc-text-2);
    transition: background-color .35s, border-color .35s, color .35s;
}

.pc-optiune input:focus-visible ~ .pc-optiune-litera {
    outline: 2px solid var(--cc-turcoaz);
    outline-offset: 3px;
}

.pc-optiune-text {
    font-family: var(--cc-font-titlu);
    font-size: clamp(16px, 1.4vw, 19px);
    line-height: 1.3;
    letter-spacing: -.01em;
    color: var(--cc-text);
}

.pc-optiune-sageata {
    margin-left: auto;
    color: var(--cc-turcoaz);
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .35s, transform .45s var(--cc-ease);
}

.pc-optiune.este-ales {
    border-color: rgba(124, 233, 224, .55);
    background-color: rgba(124, 233, 224, .06);
}

.pc-optiune.este-ales .pc-optiune-litera {
    border-color: var(--cc-turcoaz);
    background-color: var(--cc-turcoaz);
    color: var(--cc-fundal);
}

.pc-optiune.este-ales .pc-optiune-sageata {
    opacity: 1;
    transform: none;
}

.pc-rezultat {
    position: relative;
    padding: clamp(22px, 3vw, 40px);
    border: 1px solid var(--pc-fir);
    border-radius: 8px;
    background: linear-gradient(160deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .01));
}

/* Ecoul liniei de orizont din hero: alegerea aprinde blocul ei. */
.pc-harta-mica {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 132px;
    border-bottom: 1px solid var(--pc-fir-tare);
}

.pc-harta-mica li {
    position: relative;
    isolation: isolate;
    flex: 1 1 0;
    min-width: 0;
    height: calc(30% + var(--nivel) * 17.5%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .12);
    border-bottom: 0;
    border-radius: 3px 3px 0 0;
    font-family: var(--cc-font-mono);
    font-size: 10.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--cc-text-estompat);
    transition: opacity .5s, border-color .5s, background-color .5s, color .5s;
}

.pc-hm-nume {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.pc-rezultat.are-alegere .pc-harta-mica li {
    opacity: .3;
}

.pc-rezultat.are-alegere .pc-harta-mica li.este-ales {
    opacity: 1;
    border-color: rgba(124, 233, 224, .6);
    background-color: rgba(124, 233, 224, .1);
    color: var(--cc-alb-cald);
}

.pc-rezultat-gol {
    margin: 24px 0 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--cc-text-estompat);
}

.pc-rezultat.are-alegere .pc-rezultat-gol {
    display: none;
}

.pc-rezultat-panou {
    margin-top: 26px;
    animation: pcIntra .55s var(--cc-ease) both;
}

.pc-rezultat-nume {
    margin: 14px 0 0;
    font-family: var(--cc-font-titlu);
    font-size: clamp(32px, 3.6vw, 52px);
    line-height: 1;
    letter-spacing: -.04em;
    color: var(--cc-alb-cald);
}

.pc-rezultat-text {
    margin: 14px 0 0;
    max-width: 36em;
    font-size: 16.5px;
    line-height: 1.6;
    color: var(--cc-text-2);
}

.pc-rezultat-termen {
    margin: 18px 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 12px;
}

.pc-rezultat-termen > span:first-child {
    font-family: var(--cc-font-mono);
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--cc-text-estompat);
}

.pc-rezultat-termen-val {
    font-family: var(--cc-font-titlu);
    font-weight: 600;
    font-size: 20px;
    letter-spacing: -.02em;
    color: var(--cc-alb-cald);
}

/* ==================== ce influenteaza costul ==================== */

.pc-factori-grila {
    margin-top: clamp(40px, 7vh, 72px);
    padding-top: 40px;
    display: grid;
    grid-template-columns: minmax(220px, 4fr) minmax(0, 8fr);
    gap: 32px clamp(32px, 6vw, 96px);
    border-top: 1px solid var(--pc-fir-tare);
}

.pc-arbore-radacina {
    margin: 0 0 4px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--cc-font-mono);
    font-size: 13px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--cc-alb-cald);
}

.pc-arbore-radacina::before {
    content: '';
    width: 9px;
    height: 9px;
    border: 1px solid var(--cc-turcoaz);
    transform: rotate(45deg);
}

.pc-arbore-ramuri {
    display: flex;
    flex-direction: column;
    padding-left: 3px;
}

.pc-ramura {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    border: 0;
    background: none;
    font-family: var(--cc-font-mono);
    font-size: 14px;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-align: left;
    color: var(--cc-text-estompat);
    cursor: pointer;
    transition: color .3s;
}

.pc-ramura-fir {
    letter-spacing: 0;
    color: rgba(255, 255, 255, .24);
    transition: color .3s;
}

.pc-ramura:hover {
    color: var(--cc-text);
}

.pc-ramura[aria-selected="true"],
.pc-ramura[aria-selected="true"] .pc-ramura-fir {
    color: var(--cc-turcoaz);
}

.pc-ramura[aria-selected="true"]::after {
    content: '';
    width: 28px;
    height: 1px;
    background: currentColor;
}

/* Panourile stau unul peste altul in aceeasi celula: inaltimea zonei e a
   celui mai lung, deci textul de dedesubt nu sare cand treci de la unul la altul. */
.pc-factor-panouri {
    display: grid;
}

.pc-factor {
    grid-area: 1 / 1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px clamp(20px, 3vw, 40px);
    align-items: start;
}

html.pc-js .pc-factor {
    transition: opacity .45s, transform .6s var(--cc-ease), visibility 0s;
}

html.pc-js .pc-factor:not(.este-activ) {
    visibility: hidden;
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity .25s, transform .4s, visibility 0s .25s;
}

html:not(.pc-js) .pc-factor-panouri {
    gap: 48px;
}

html:not(.pc-js) .pc-factor {
    grid-area: auto;
}

.pc-factor-index {
    padding-top: .9em;
    font-family: var(--cc-font-mono);
    font-size: 13px;
    color: var(--cc-turcoaz);
}

.pc-factor h3 {
    margin: 0;
    font-family: var(--cc-font-titlu);
    font-size: clamp(34px, 4.2vw, 64px);
    line-height: 1;
    letter-spacing: -.045em;
    color: var(--cc-alb-cald);
}

.pc-factor p {
    margin: 18px 0 0;
    max-width: 32em;
    font-size: clamp(16px, 1.4vw, 19px);
    line-height: 1.6;
    color: var(--cc-text-2);
}

.pc-factor .pc-scala {
    max-width: none;
    margin-top: 34px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-family: var(--cc-font-mono);
    font-size: 12px;
    line-height: 1;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--cc-text-estompat);
}

.pc-scala span {
    padding: 8px 13px;
    border: 1px solid var(--pc-fir-tare);
    border-radius: 999px;
    white-space: nowrap;
}

.pc-scala span:last-child {
    border-color: rgba(160, 120, 255, .45);
    color: var(--cc-text);
}

.pc-scala--etichete span {
    border-color: rgba(160, 120, 255, .3);
    color: var(--cc-text);
}

.pc-scala i {
    flex: 1 1 24px;
    min-width: 24px;
    height: 1px;
    background: linear-gradient(90deg, rgba(124, 233, 224, .7), rgba(160, 120, 255, .7));
    transform-origin: left center;
}

.pc-factor.este-activ .pc-scala i {
    animation: pcFir .9s var(--cc-ease) .1s both;
}

@keyframes pcFir {
    from {
        transform: scaleX(0);
    }
}

/* ==================== costuri externe ==================== */

.pc-externe {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 32px clamp(32px, 6vw, 96px);
    align-items: start;
    padding-block: clamp(72px, 11vh, 120px);
}

.pc-externe-text {
    margin: 16px 0 0;
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--cc-text-2);
}

.pc-tabel-cadru {
    overflow-x: auto;
    padding: 6px 22px 2px;
    border: 1px solid var(--pc-fir);
    border-radius: 6px;
    background: rgba(255, 255, 255, .015);
}

.pc-tabel {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--cc-font-mono);
    font-size: 13px;
}

.pc-tabel th {
    padding: 14px 16px 12px 0;
    border-bottom: 1px solid var(--pc-fir-tare);
    font-weight: 400;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-align: left;
    color: var(--cc-text-estompat);
}

.pc-tabel td {
    padding: 18px 16px 18px 0;
    border-bottom: 1px solid var(--pc-fir);
    vertical-align: baseline;
    color: var(--cc-text-2);
}

.pc-tabel tr:last-child td {
    border-bottom: 0;
}

.pc-tabel td:first-child {
    font-size: 14px;
    color: var(--cc-alb-cald);
}

.pc-tabel td strong {
    font-weight: 500;
    color: var(--cc-turcoaz);
}

.pc-tabel th:last-child,
.pc-tabel td:last-child {
    padding-right: 0;
    text-align: right;
    white-space: nowrap;
}

.pc-tabel td:last-child {
    color: var(--cc-alb-cald);
}

/* ==================== procesul ==================== */

.pc-cronologie {
    position: relative;
    margin-top: clamp(48px, 8vh, 80px);
}

/* Firul merge de la centrul primului cerc la centrul ultimului. Capatul
   (`--fir-dreapta`, pe telefon `--fir-jos`) il masoara pachete.js, fiindca
   depinde de latimea coloanelor si de lungimea textelor; inainte, firul trecea
   de ultimul pas pana la marginea sectiunii. Fara JavaScript tine toata latimea. */
.pc-cronologie-fir {
    position: absolute;
    left: 28px;
    right: var(--fir-dreapta, 0px);
    top: 28px;
    height: 1px;
    background: rgba(255, 255, 255, .1);
}

.pc-cronologie-fir i {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--cc-gradient);
    box-shadow: 0 0 12px rgba(124, 233, 224, .6);
    transform-origin: left center;
    transform: scaleX(var(--p, 1));
}

html.pc-js:not(.pc-scroll) .pc-cronologie-fir i {
    transition: transform 1.8s var(--cc-ease);
}

.pc-etape-proiect {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(24px, 3vw, 44px);
}

.pc-etapa {
    transition: opacity .6s;
}

html.pc-js .pc-etapa:not(.este-activ) {
    opacity: .35;
}

.pc-etapa-nr {
    position: relative;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border: 1px solid var(--pc-fir-tare);
    border-radius: 50%;
    background: var(--cc-fundal);
    font-family: var(--cc-font-mono);
    font-size: 13px;
    color: var(--cc-text-estompat);
    transition: background-color .5s, color .5s, border-color .5s, box-shadow .5s;
}

.pc-etapa.este-activ .pc-etapa-nr,
html:not(.pc-js) .pc-etapa-nr {
    border-color: var(--cc-alb-cald);
    background: var(--cc-alb-cald);
    color: var(--cc-fundal);
    box-shadow: 0 0 0 6px rgba(244, 244, 240, .06);
}

html.pc-js:not(.pc-scroll) .pc-etapa:nth-child(2),
html.pc-js:not(.pc-scroll) .pc-etapa:nth-child(2) .pc-etapa-nr {
    transition-delay: .4s;
}

html.pc-js:not(.pc-scroll) .pc-etapa:nth-child(3),
html.pc-js:not(.pc-scroll) .pc-etapa:nth-child(3) .pc-etapa-nr {
    transition-delay: .8s;
}

html.pc-js:not(.pc-scroll) .pc-etapa:nth-child(4),
html.pc-js:not(.pc-scroll) .pc-etapa:nth-child(4) .pc-etapa-nr {
    transition-delay: 1.2s;
}

.pc-etapa h3 {
    margin: 30px 0 0;
    font-family: var(--cc-font-titlu);
    font-weight: 600;
    font-size: clamp(24px, 2.3vw, 34px);
    letter-spacing: -.03em;
    color: var(--cc-alb-cald);
}

.pc-etapa p {
    margin: 12px 0 0;
    max-width: 22em;
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--cc-text-2);
}

/* ==================== bine de stiut ==================== */

.pc-termeni-lista {
    list-style: none;
    margin: clamp(40px, 7vh, 72px) 0 0;
    padding: 0;
    border-top: 1px solid var(--pc-fir-tare);
}

.pc-termen {
    display: grid;
    grid-template-columns: minmax(0, 3.2fr) minmax(0, 2.6fr) minmax(0, 6.2fr);
    gap: 12px clamp(24px, 4vw, 56px);
    align-items: baseline;
    padding: clamp(24px, 3.6vh, 36px) 0;
    border-bottom: 1px solid var(--pc-fir);
}

.pc-termen-cifra {
    margin: 0;
    font-family: var(--cc-font-titlu);
    font-weight: 600;
    font-size: clamp(38px, 4.4vw, 64px);
    line-height: .95;
    letter-spacing: -.05em;
    color: var(--cc-alb-cald);
}

.pc-termen-cifra small {
    display: block;
    margin-top: 10px;
    font-family: var(--cc-font-mono);
    font-weight: 400;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cc-text-estompat);
}

.pc-termen-cifra--text {
    font-family: var(--cc-font-mono);
    font-weight: 400;
    font-size: 13px;
    line-height: 1.6;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cc-turcoaz);
}

.pc-termen h3 {
    margin: 0;
    font-family: var(--cc-font-titlu);
    font-weight: 600;
    font-size: clamp(22px, 2vw, 28px);
    letter-spacing: -.02em;
    color: var(--cc-alb-cald);
}

.pc-termen-text {
    margin: 0;
    font-size: clamp(16px, 1.35vw, 18px);
    line-height: 1.65;
    color: var(--cc-text-2);
}

/* Nu flex: textul are un <strong> in el, iar intr-un flex fiecare bucata
   devine coloana ei. */
.pc-anunt {
    position: relative;
    margin: 36px 0 0;
    padding-left: 20px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--cc-text-estompat);
}

.pc-anunt::before {
    content: '';
    position: absolute;
    left: 0;
    top: .6em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cc-turcoaz);
}

.pc-anunt strong {
    font-weight: 500;
    color: var(--cc-text);
}

/* ==================== finalul ==================== */

.pc-final {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(120px, 20vh, 220px) var(--pc-gutter) clamp(110px, 18vh, 200px);
    border-top: 1px solid var(--pc-fir);
    text-align: center;
}

/* Aceeasi lumina turcoaz–violet din finalul hero-ului de pe prima pagina. */
.pc-final::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(55% 45% at 50% 58%, rgba(124, 233, 224, .13), transparent 70%),
        radial-gradient(38% 38% at 64% 42%, rgba(160, 120, 255, .15), transparent 70%);
    animation: pcAurora 14s ease-in-out infinite alternate;
}

@keyframes pcAurora {
    to {
        transform: scale(1.12) translateY(-3%);
    }
}

.pc-final-interior {
    max-width: 1100px;
    margin: 0 auto;
}

.pc-final-semn {
    width: clamp(84px, 10vw, 128px);
    margin: 0 auto clamp(28px, 5vh, 44px);
}

.pc-final-titlu {
    font-family: var(--cc-font-titlu);
    font-size: clamp(56px, 10.6vw, 164px);
    line-height: .88;
    letter-spacing: -.058em;
    color: var(--cc-alb-cald);
}

.pc-final-sub {
    max-width: 520px;
    margin: 30px auto 0;
    font-size: clamp(16px, 1.5vw, 19px);
    line-height: 1.6;
    color: var(--cc-text-2);
}

/* ==================== latimi mici ==================== */

@media (max-width: 900px) {

    .pc-pachet-grila,
    .pc-pachet--invers .pc-pachet-grila {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
        grid-template-areas:
            "text"
            "vizual"
            "detalii";
    }

    .pc-pachet-vizual {
        margin-top: 52px;
    }

    .pc-pachet-detalii {
        margin-top: 12px;
    }

    .pc-pachet--invers .pc-pachet-nr {
        left: calc(var(--pc-gutter) - .05em);
        right: auto;
    }

    .pc-detalii-coloane {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .pc-custom-cap,
    .pc-custom-jos,
    .pc-alege-grila,
    .pc-factori-grila,
    .pc-externe {
        grid-template-columns: minmax(0, 1fr);
    }

    .pc-custom-cap {
        align-items: start;
    }

    .pc-termen {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    }

    .pc-termen-text {
        grid-column: 1 / -1;
    }
}

@media (max-width: 820px) {
    .pc-hero-cap {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
    }

    .pc-hero-sub {
        grid-row: 3;
        grid-column: 1;
        margin: 0;
    }

    .pc-directii {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        margin-top: 40px;
        border-bottom: 0;
    }

    .pc-directie {
        height: auto;
    }

    .pc-directie-link {
        flex-direction: row;
        align-items: center;
        /* `space-between` de pe desktop impingea spre dreapta textul scurt
           (01 si 04), iar numele nu mai incepeau pe aceeasi verticala. */
        justify-content: flex-start;
        gap: 18px;
        padding: 16px 18px;
        border-bottom: 1px solid var(--pc-fir);
        border-radius: 4px;
    }

    .pc-directie-link::before,
    .pc-directie-link::after {
        display: none;
    }

    .pc-directie-sus {
        flex: none;
        width: 52px;
    }

    .pc-directie-nr {
        font-size: 40px;
    }

    .pc-directie-sageata {
        display: none;
    }

    .pc-directie-termen {
        margin-top: 4px;
        padding-top: 8px;
    }

    .pc-sina-interior {
        display: flex;
        overflow-x: auto;
        padding: 0;
        scrollbar-width: none;
    }

    .pc-sina-interior::-webkit-scrollbar {
        display: none;
    }

    .pc-sina-link {
        flex: none;
    }

    .pc-sina-link:first-child {
        border-left: 0;
    }

    .pc-noduri {
        --gol: 26px;
        grid-template-columns: minmax(0, 1fr);
    }

    .pc-sistem {
        --gol: 26px;
    }

    .pc-nod {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        column-gap: 14px;
        padding: 14px 16px;
    }

    .pc-nod-ic {
        margin: 0;
    }

    .pc-nod-meta {
        flex-basis: 100%;
        padding-left: 38px;
    }

    .pc-nod + .pc-nod::before {
        top: auto;
        right: auto;
        bottom: 100%;
        left: 28px;
        width: 1px;
        height: var(--gol);
        background: linear-gradient(180deg, rgba(124, 233, 224, .6), rgba(160, 120, 255, .6));
        transform-origin: center top;
        transform: scaleY(var(--kn));
    }

    .pc-nod + .pc-nod::after {
        top: auto;
        right: auto;
        left: 25px;
        bottom: calc(100% + var(--gol) - 6px);
    }

    .pc-sistem.este-complet .pc-nod + .pc-nod::after,
    html:not(.pc-js) .pc-nod + .pc-nod::after {
        animation-name: pcPachetV;
    }

    .pc-cronologie-fir {
        top: 28px;
        bottom: var(--fir-jos, 0px);
        left: 28px;
        right: auto;
        width: 1px;
        height: auto;
    }

    .pc-cronologie-fir i {
        transform-origin: center top;
        transform: scaleY(var(--p, 1));
    }

    .pc-etape-proiect {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }

    .pc-etapa {
        position: relative;
        min-height: 56px;
        padding-left: 80px;
    }

    .pc-etapa-nr {
        position: absolute;
        left: 0;
        top: 0;
    }

    .pc-etapa h3 {
        margin-top: 12px;
    }
}

@media (max-width: 620px) {
    .pc-detalii-coloane {
        grid-template-columns: minmax(0, 1fr);
    }

    .pc-fise {
        grid-template-columns: minmax(0, 1fr);
    }

    .pc-fise > div + div {
        margin-top: 18px;
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid var(--pc-fir);
    }

    .pc-hm-nume {
        display: none;
    }

    .pc-harta-mica {
        height: 104px;
    }

    .pc-optiune {
        padding: 15px 14px;
        gap: 12px;
    }

    .pc-termen {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    /* Tabelul de costuri pe telefon: fiecare rand devine un bloc, cu suma in
       dreapta si furnizorul dedesubt. Capul de tabel ramane doar pentru
       cititoarele de ecran. */
    .pc-tabel-cadru {
        padding: 0 16px;
    }

    .pc-tabel thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }

    .pc-tabel tbody,
    .pc-tabel tr,
    .pc-tabel td {
        display: block;
    }

    .pc-tabel tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 6px 12px;
        padding: 16px 0;
        border-bottom: 1px solid var(--pc-fir);
    }

    .pc-tabel tr:last-child {
        border-bottom: 0;
    }

    .pc-tabel td {
        padding: 0;
        border: 0;
    }

    .pc-tabel td:nth-child(2) {
        grid-row: 2;
        grid-column: 1 / -1;
        font-size: 12px;
        color: var(--cc-text-estompat);
    }

    .pc-tabel td:last-child {
        grid-row: 1;
        grid-column: 2;
    }
}

/* ==================== miscare redusa ==================== */

@media (prefers-reduced-motion: reduce) {

    .pc-pagina *,
    .pc-pagina *::before,
    .pc-pagina *::after {
        transition-duration: 0s !important;
        transition-delay: 0s !important;
        animation: none !important;
    }

    .pc-eco-puls,
    .pc-nod + .pc-nod::after {
        opacity: 0 !important;
    }
}

/* ==================== tiparirea ==================== */

/*
 * Pagina e si documentul trimis clientilor, deci Ctrl+P → PDF trebuie sa dea
 * textul complet pe fundal alb: toate detaliile deschise, toti factorii, fara
 * scene, fara bare lipite si fara butoane.
 */
@media print {
    body {
        background: #fff;
        color: #111;
    }

    .navbar,
    .cc-progres,
    .cc-vigneta,
    .cc-stele,
    .pc-sina,
    .pc-directii,
    .pc-indiciu,
    .pc-pachet-vizual,
    .pc-pachet-nr,
    .pc-sistem,
    .pc-alege,
    .pc-detalii-buton,
    .pc-pachet-actiuni,
    .pc-arbore,
    .pc-scala,
    .pc-final,
    .cc-subsol {
        display: none !important;
    }

    .pc-pagina *,
    .pc-pagina *::before {
        color: #111 !important;
        background: transparent !important;
        box-shadow: none !important;
        text-shadow: none !important;
        -webkit-text-stroke: 0 !important;
        animation: none !important;
        transition: none !important;
    }

    .pc-pagina [data-reveal],
    .pc-pagina .pc-rand > span {
        opacity: 1 !important;
        transform: none !important;
        translate: none !important;
        filter: none !important;
    }

    html.pc-scroll .pc-hero,
    html.pc-scroll .pc-custom-pista {
        height: auto !important;
    }

    html.pc-scroll .pc-hero-scena,
    html.pc-scroll .pc-custom-scena {
        position: static !important;
        height: auto !important;
    }

    .pc-hero-scena,
    .pc-capitol-interior,
    .pc-pachet-grila,
    .pc-custom-scena,
    .pc-custom-jos,
    .pc-bloc {
        min-height: 0 !important;
        padding: 18pt 0 !important;
    }

    .pc-pachet-grila,
    .pc-custom-cap,
    .pc-custom-jos,
    .pc-factori-grila,
    .pc-externe {
        display: block !important;
    }

    .pc-hero-titlu,
    .pc-final-titlu {
        font-size: 44pt !important;
    }

    .pc-titlu-mare,
    .pc-pachet-nume {
        font-size: 28pt !important;
    }

    .pc-detalii-corp {
        grid-template-rows: 1fr !important;
    }

    .pc-detalii-interior,
    .pc-factor {
        visibility: visible !important;
        opacity: 1 !important;
    }

    .pc-detalii-coloane {
        grid-template-columns: 1fr 1fr !important;
        opacity: 1 !important;
    }

    .pc-factor-panouri {
        gap: 14pt;
    }

    .pc-factor {
        grid-area: auto !important;
    }

    .pc-pachet,
    .pc-factor,
    .pc-termen,
    .pc-etapa {
        break-inside: avoid;
    }

    .pc-pachet,
    .pc-pachet * {
        border-color: #ccc !important;
    }

    .pc-etapa {
        opacity: 1 !important;
    }
}

/* ==================== telefoane inguste si ecrane joase ==================== */

/*
 * Sub 480px diagramele au doar 280–440px latime: etichetele din ele primesc
 * mai mult loc (la 320px „Portofoliu" si „Analytics" ieseau din cutii), iar
 * titlurile mari scad cu ecranul, ca un cuvant lung („construim?") sa nu fie
 * taiat de masca randului.
 */
@media (max-width: 480px) {
    .pc-hero-titlu {
        font-size: clamp(48px, 15vw, 64px);
    }

    .pc-final-titlu {
        font-size: clamp(42px, 14vw, 64px);
    }

    .pc-titlu-mare {
        font-size: clamp(36px, 10.5vw, 48px);
    }

    .pc-foaie-nume {
        letter-spacing: 0;
    }

    .pc-eco-nod {
        width: 31cqw;
        padding-right: 1.8cqw;
    }

    .pc-eco-nod::before {
        display: none;
    }

    .pc-eco-nod b {
        letter-spacing: .03em;
    }
}

/* Tinte de atins de cel putin ~40px pe telefon: comutatorul de limba,
   legaturile din subsol si „Vezi proiectele" erau intre 18 si 29px. */
@media (max-width: 820px) {
    .pc-pagina .lang-label {
        padding: 11px 12px;
    }

    .pc-pagina .cc-subsol-linkuri {
        row-gap: 0;
    }

    .pc-pagina .cc-subsol-linkuri a {
        display: inline-block;
        padding: 12px 2px;
    }

    .pc-link-mono {
        padding-top: 14px;
    }
}

/* Telefon tinut orizontal: antetul si bara dintre pachete, amandoua lipite,
   ar acoperi aproape o treime din ecran. Bara ramane la locul ei. */
@media (max-height: 500px) and (orientation: landscape) {
    .pc-sina {
        position: relative;
        top: auto;
    }
}
/* Pe telefon bara dintre pachete e opaca, fara blur: un `backdrop-filter` pe
   o bara lipita se recalculeaza la fiecare cadru de derulare, iar pe un
   telefon slab asta se simte. Continutul oricum nu trebuie sa se vada prin ea. */
@media (max-width: 820px) {
    .pc-sina {
        background: #07070e;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}
/* Aceleasi tinte de atins si pe telefonul tinut orizontal sau pe tableta:
   acolo latimea trece de 820px, dar degetul ramane deget. */
@media (pointer: coarse) {
    .pc-pagina .nav-link {
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .pc-pagina .lang-label {
        padding: 11px 12px;
    }

    .pc-pagina .cc-subsol-linkuri {
        row-gap: 0;
    }

    .pc-pagina .cc-subsol-linkuri a {
        display: inline-block;
        padding: 12px 2px;
    }

    .pc-link-mono {
        padding-top: 14px;
    }
}

/* Bara dintre pachete pe telefon: patru nume nu incap, iar 03 si 04 ieseau
   din ecran fara niciun semn ca bara se poate derula. Acum toate patru stau pe
   ecran — pachetul curent cu numele lui, celelalte doar cu numarul; inainte de
   primul pachet, primul isi arata numele. */
@media (max-width: 760px) {
    .pc-sina-interior {
        overflow: hidden;
    }

    .pc-sina-link {
        gap: 10px;
        padding: 0 14px;
    }

    .pc-sina-nume {
        display: none;
    }

    .pc-sina-link.este-activ,
    .pc-sina-interior:not(:has(.este-activ)) .pc-sina-link:first-child {
        flex: 1 1 auto;
    }

    .pc-sina-link.este-activ .pc-sina-nume,
    .pc-sina-interior:not(:has(.este-activ)) .pc-sina-link:first-child .pc-sina-nume {
        display: block;
    }
}

/* Scala unei variabile pe telefon: pe un singur rand, „10 pagini" cadea
   singura pe randul urmator, iar liniile de legatura ramaneau atarnate si
   intrerupte. Pe coloana, etichetele stau una sub alta pe aceeasi axa, legate
   de o linie continua prin mijlocul lor, putin mai mari decat pe desktop.
   Functiile speciale raman etichete una langa alta. */
@media (max-width: 620px) {
    .pc-factor .pc-scala:not(.pc-scala--etichete) {
        width: fit-content;
        flex-direction: column;
        align-items: center;
        gap: 0;
        font-size: 13px;
    }

    /* O eticheta lunga („Se scriu sau se fotografiază”) nu incape pe un rand
       la 320px: trece pe doua, centrata, in loc sa iasa din ecran. */
    .pc-factor .pc-scala:not(.pc-scala--etichete) {
        max-width: 100%;
    }

    .pc-factor .pc-scala:not(.pc-scala--etichete) span {
        max-width: 100%;
        padding: 11px 18px;
        border-radius: 22px;
        line-height: 1.35;
        text-align: center;
        white-space: normal;
    }

    .pc-factor .pc-scala:not(.pc-scala--etichete) i {
        flex: none;
        width: 1px;
        min-width: 0;
        height: 28px;
        background: linear-gradient(180deg, rgba(124, 233, 224, .8), rgba(160, 120, 255, .8));
        transform-origin: center top;
    }

    .pc-factor.este-activ .pc-scala:not(.pc-scala--etichete) i {
        animation-name: pcFirV;
    }
}

@keyframes pcFirV {
    from {
        transform: scaleY(0);
    }
}

/* Pe desktop linia de sus a barei dintre pachete e „pamantul" din care urca
   blocurile din hero. Pe telefon blocurile sunt o lista si nu mai stau deasupra
   ei, deci linia nu mai are rost. */
@media (max-width: 820px) {
    .pc-sina {
        border-top: 0;
    }
}

/* Scala unei variabile pe telefon, cum a cerut proprietarul: toata coloana
   centrata pe mijlocul ecranului si putin mai mare. Numarul variabilei urca
   deasupra titlului, ca panoul sa aiba o singura coloana si mijlocul scalei sa
   fie mijlocul ecranului, nu al unei coloane impinse spre dreapta. */
@media (max-width: 620px) {
    .pc-factor {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .pc-factor-index {
        padding-top: 0;
    }

    .pc-factor .pc-scala:not(.pc-scala--etichete) {
        margin: 40px auto 0;
        font-size: 14px;
    }

    .pc-factor .pc-scala:not(.pc-scala--etichete) span {
        padding: 14px 24px;
        border-radius: 26px;
    }

    .pc-factor .pc-scala:not(.pc-scala--etichete) i {
        width: 2px;
        height: 36px;
    }

    .pc-factor .pc-scala--etichete {
        justify-content: center;
    }
}

/* Liniile verticale dintre 01-04 din bara lipita despart, pe desktop,
   coloanele de sub blocurile din hero. Pe telefon nu mai despart nimic. */
@media (max-width: 820px) {
    .pc-sina-link,
    .pc-sina-link:last-child {
        border-left: 0;
        border-right: 0;
    }
}