/* ==========================================================================
   Plenia — site de prezentare
   Refolosește tokens-urile din app.css și adaugă doar ce ține de marketing.

   Ordinea secțiunilor: fundamente → antet → hero și formular → dovezi →
   conținut → încheiere → footer → elemente flotante → responsive.
   ========================================================================== */

:root {
    --site-max: 1200px;
    --site-narrow: 780px;

    --display-lg: clamp(2.1rem, 1.35rem + 2.9vw, 3.5rem);
    --display-md: clamp(1.7rem, 1.25rem + 1.9vw, 2.6rem);
    --display-sm: clamp(1.35rem, 1.1rem + 1.1vw, 1.85rem);
    --lead: clamp(1rem, 0.95rem + 0.35vw, 1.2rem);

    --section-y: clamp(3.5rem, 2.2rem + 4.5vw, 6rem);

    /* Banda închisă la culoare rămâne identică în ambele teme: este semnalul
       de autoritate al paginii și nu trebuie să se piardă pe fundal deschis.
       De la identitatea aurie încoace este negrul siglei, cu aurul pe post de
       accent — nu smarald. Textul rămâne alb (16,6:1), iar cel secundar urcă la
       un bej cald care ține 10:1. */
    --band-bg: #12100a;
    --band-gradient: linear-gradient(135deg, #08070a 0%, #17140d 55%, #241f13 130%);
    --band-text: #ffffff;
    --band-muted: #d8cfb8;
    --band-border: rgb(232 201 107 / 0.26);

    /* Secțiunile alternante primesc un ton cald, nu gri: pagina respiră mai viu. */
    --tint-sunken: #faf7f0;
}

/* Banda se definește prin diferența față de pagină, nu prin culoarea ei. Pe
   fundal deschis asta înseamnă să coboare în negru; pe fundal închis trebuie să
   urce, altfel negru-pe-negru o face să dispară exact acolo unde ar trebui să
   oprească privirea. Aurul rămâne același în ambele direcții. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --tint-sunken: var(--bg-sunken);
        --band-bg: #241f14;
        --band-gradient: linear-gradient(135deg, #1a160e 0%, #241f14 55%, #322a19 130%);
        --band-muted: #ded5bd;
        --band-border: rgb(232 201 107 / 0.34);
    }
}
:root[data-theme="dark"] {
    --tint-sunken: var(--bg-sunken);
    --band-bg: #241f14;
    --band-gradient: linear-gradient(135deg, #1a160e 0%, #241f14 55%, #322a19 130%);
    --band-muted: #ded5bd;
    --band-border: rgb(232 201 107 / 0.34);
}

.site { font-size: 1rem; line-height: 1.6; }
.site h1, .site h2, .site h3 { letter-spacing: -0.022em; }

.shell {
    width: 100%;
    max-width: var(--site-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--sp-5);
    padding-right: var(--sp-5);
}

/* Ancorele din meniu nu trebuie să ajungă sub antetul lipit de sus. */
.site section[id], .site .lead-form[id] { scroll-margin-top: calc(72px + var(--sp-6)); }

.section { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.section--tight { padding-top: calc(var(--section-y) * 0.62); padding-bottom: calc(var(--section-y) * 0.62); }
.section--sunken { background: var(--tint-sunken); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

.section__head { max-width: 62ch; margin-bottom: var(--sp-10); }
.section__head--center { margin-left: auto; margin-right: auto; text-align: center; }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-3);
    font-size: var(--text-sm);
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-600);
}

.section__title { font-size: var(--display-md); line-height: 1.15; margin-bottom: var(--sp-4); }
.section__lead { font-size: var(--lead); color: var(--text-muted); }

/* Butoane specifice site-ului */
.btn--lg { height: 48px; padding: 0 var(--sp-6); font-size: var(--text-md); font-weight: 600; }
.btn--block { width: 100%; }
.btn--wa { background: #1f9c4d; color: #fff; }
.btn--wa:hover { background: #1b8843; }

/* Bară utilitară ========================================================== */

.utility-bar {
    background: var(--accent-50);
    color: var(--text);
    border-bottom: 1px solid var(--accent-100);
    font-size: var(--text-sm);
}
.utility-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-5);
    min-height: 38px;
    padding-top: var(--sp-2);
    padding-bottom: var(--sp-2);
}
.utility-bar__claim { display: inline-flex; align-items: center; gap: var(--sp-2); }
.utility-bar__claim svg { color: var(--success); flex-shrink: 0; }
.utility-bar__links { display: flex; align-items: center; gap: var(--sp-5); }
.utility-bar__links a {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    color: var(--accent-700);
    font-weight: 600;
    white-space: nowrap;
}
.utility-bar__links a:hover { color: var(--accent-600); }

/* Header public ============================================================ */

.site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--bg-topbar);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
}

.site-header__inner {
    display: flex;
    align-items: center;
    gap: var(--sp-6);
    height: 72px;
}

.site-brand { display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; }
.site-brand:hover { text-decoration: none; }
.site-brand .brand__mark { width: 34px; height: 34px; font-size: var(--text-lg); }
.site-brand .brand__name { font-size: var(--text-lg); }
.site-brand--full .brand__mark { width: 40px; height: 40px; }
.site-brand--full .brand__name { line-height: 1.15; }

/* Comutator de temă. Site-ul pornește pe întuneric, dar cine citește mult pe
   fundal deschis trebuie să poată trece dincolo — și să rămână acolo. */
.theme-toggle {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    color: var(--text-muted);
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.theme-toggle:hover { color: var(--accent-600); border-color: var(--border-strong); background: var(--bg-hover); }
.theme-toggle:focus-visible { outline: none; box-shadow: var(--ring); }

.site-nav { display: flex; align-items: center; gap: var(--sp-1); margin-left: auto; }

.site-nav__link {
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-md);
    color: var(--text);
    font-size: var(--text-md);
    font-weight: 500;
    transition: background var(--transition), color var(--transition);
}
.site-nav__link:hover { background: var(--bg-hover); color: var(--text-strong); text-decoration: none; }
.site-nav__link.is-active { color: var(--accent-700); background: var(--bg-active); }

/* CTA-ul din navigație apare doar în meniul mobil; pe desktop există deja unul în bara de acțiuni. */
.site-nav .site-nav__cta { display: none; }

/* Meniuri derulante din antet ============================================== */

.site-menu { position: relative; }
.site-menu__trigger {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    font: inherit;
    font-size: var(--text-md);
    font-weight: 500;
    color: var(--text);
    background: none;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
}
.site-menu__trigger:hover { background: var(--bg-hover); color: var(--text-strong); }
.site-menu__trigger.is-active { color: var(--accent-700); background: var(--bg-active); }
.site-menu__trigger:focus-visible { outline: none; box-shadow: var(--ring); }
.site-menu__trigger svg { transition: transform var(--transition); }
.site-menu__trigger[aria-expanded="true"] svg { transform: rotate(180deg); }

.site-menu__panel {
    position: absolute;
    top: calc(100% + var(--sp-2));
    left: 50%;
    transform: translateX(-50%);
    /* Prima linie este rezerva pentru browserele fără min(); a doua o
       suprascrie oriunde funcția există. `max-width` ține panoul în ecran. */
    width: 560px;
    width: min(560px, 92vw);
    max-width: calc(100vw - 2 * var(--sp-5));
    padding: var(--sp-2);
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-1);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}
.site-menu__panel[data-open] { display: grid; }

/* Meniul de resurse are intrări scurte și stă mai spre marginea din dreapta:
   pe o singură coloană se citește mai repede și nu împinge panoul în afara ecranului. */
.site-menu__panel--narrow {
    width: 300px;
    width: min(300px, 92vw);
    grid-template-columns: minmax(0, 1fr);
    left: auto;
    right: 0;
    transform: none;
}

.site-menu__item {
    display: flex;
    gap: var(--sp-3);
    padding: var(--sp-3);
    border-radius: var(--radius-md);
    color: var(--text);
    transition: background var(--transition);
}
.site-menu__item:hover { background: var(--bg-hover); text-decoration: none; }
.site-menu__item.is-active { background: var(--bg-active); }
.site-menu__item.is-active .site-menu__title { color: var(--accent-700); }

/* Ultima intrare din meniu nu este o verticală, ci oferta de dezvoltare la
   comandă. Conturul punctat o separă de listă fără să o retrogradeze. */
.site-menu__item--custom { border: 1px dashed var(--border-strong); }
.site-menu__item--custom.is-active { border-style: solid; border-color: var(--accent-500); background: var(--bg-hover); }
.site-menu__item--custom .site-menu__icon { background: var(--bg-sunken); color: var(--text-muted); }

.site-menu__icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius);
    background: var(--accent-50);
    color: var(--accent-600);
    flex-shrink: 0;
}
.site-menu__title { display: block; font-size: var(--text-md); font-weight: 600; color: var(--text-strong); }
.site-menu__text { display: block; font-size: var(--text-sm); color: var(--text-muted); }

.site-header__actions { display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; }

.phone-link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--text-strong);
    white-space: nowrap;
}
.phone-link:hover { color: var(--accent-600); text-decoration: none; }

.site-header__toggle {
    display: none;
    place-items: center;
    width: 40px;
    height: 40px;
    background: none;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    color: var(--text-strong);
    cursor: pointer;
}

/* Hero ===================================================================== */

.hero {
    position: relative;
    overflow: hidden;
    padding-top: clamp(2.5rem, 1.6rem + 4vw, 4.5rem);
    padding-bottom: clamp(2.5rem, 1.6rem + 4vw, 4.5rem);
    background:
        radial-gradient(820px 430px at 86% -12%, var(--accent-100), transparent 60%),
        radial-gradient(560px 360px at 0% 108%, var(--cta-soft), transparent 62%),
        linear-gradient(180deg, var(--tint-sunken), var(--bg-app) 62%);
    border-bottom: 1px solid var(--border);
}

/* Caroiaj discret: dă paginii un aer de produs tehnic, fără să distragă. */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, var(--border) 1px, transparent 1px),
        linear-gradient(to bottom, var(--border) 1px, transparent 1px);
    background-size: 64px 64px;
    opacity: 0.32;
    -webkit-mask-image: radial-gradient(760px 420px at 20% 0%, #000, transparent 78%);
    mask-image: radial-gradient(760px 420px at 20% 0%, #000, transparent 78%);
    pointer-events: none;
}

.hero__grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 430px);
    gap: clamp(2rem, 1rem + 3vw, 3.5rem);
    align-items: start;
}

.hero__copy { padding-top: var(--sp-4); }

.hero__title { font-size: var(--display-lg); line-height: 1.08; margin-bottom: var(--sp-4); }
.hero__title em { font-style: normal; color: var(--accent-600); }

/* Semnătura de brand, aceeași promisiune ca în siglă. Linia din stânga o ține
   legată de titlu în loc să pară un rând de text rătăcit. */
.hero__signature {
    margin-bottom: var(--sp-5);
    padding-left: var(--sp-3);
    border-left: 2px solid var(--accent-500);
    font-size: var(--lead);
    font-style: italic;
    font-weight: 500;
    color: var(--accent-600);
}

.hero__lead { font-size: var(--lead); color: var(--text-muted); margin-bottom: var(--sp-6); max-width: 54ch; }

.hero__points { list-style: none; margin: 0 0 var(--sp-7); padding: 0; display: grid; gap: var(--sp-3); max-width: 54ch; }
.hero__points li { display: flex; gap: var(--sp-3); font-size: var(--text-md); color: var(--text); }
.hero__points strong { color: var(--text-strong); font-weight: 650; }
.hero__point-icon {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    margin-top: 1px;
    border-radius: var(--radius-full);
    background: var(--success-soft);
    color: var(--success);
}

.hero__tags { list-style: none; margin: 0 0 var(--sp-7); padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.hero__tags li {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    background: var(--bg-surface);
    font-size: var(--text-sm);
    font-weight: 550;
    color: var(--text);
}
.hero__tags svg { color: var(--success); }

.hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.hero__phone { border: 1px solid transparent; }
.hero__phone:hover { border-color: var(--border-strong); }

.hero__form { position: relative; }

/* Formularul de cerere ===================================================== */

.lead-form {
    position: relative;
    padding: clamp(1.25rem, 0.9rem + 1.2vw, 1.75rem);
    background: var(--bg-surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

/* Banda de accent de sus marchează formularul ca element principal al paginii. */
.lead-form::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: linear-gradient(90deg, var(--cta-500), var(--cta-700));
}

.lead-form__head { margin-bottom: var(--sp-5); }
.lead-form__title { font-size: var(--text-xl); line-height: 1.25; margin-bottom: var(--sp-2); }
.lead-form__sub { font-size: var(--text-md); color: var(--text-muted); }

.lead-form .alert { margin-bottom: var(--sp-5); }

.lead-form__trust {
    list-style: none;
    margin: var(--sp-5) 0 0;
    padding: var(--sp-4) 0 0;
    border-top: 1px solid var(--border);
    display: grid;
    gap: var(--sp-2);
}
.lead-form__trust li {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--text-sm);
    color: var(--text-muted);
}
.lead-form__trust svg { color: var(--success); flex-shrink: 0; }

.lead-form__alt { margin-top: var(--sp-4); font-size: var(--text-sm); color: var(--text-muted); }

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-4); }
.form-grid .field--full { grid-column: 1 / -1; }

.lead-form--compact .form-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

.field__req { color: var(--danger); }
.field__opt { font-weight: 450; color: var(--text-subtle); }

.input--lg, .select--lg { height: 46px; font-size: var(--text-md); }

.textarea {
    width: 100%;
    min-height: 118px;
    padding: var(--sp-3);
    font: inherit;
    font-size: var(--text-md);
    color: var(--text-strong);
    background: var(--bg-surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    resize: vertical;
}
.textarea:focus { border-color: var(--accent-500); outline: none; box-shadow: var(--ring); }

.check { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: var(--text-sm); color: var(--text-muted); }
.check input { width: 17px; height: 17px; margin-top: 2px; flex-shrink: 0; accent-color: var(--accent-500); }

.field__error { font-size: var(--text-sm); color: var(--danger); font-weight: 550; }
.input.has-error, .select.has-error, .textarea.has-error { border-color: var(--danger); }

.alert {
    display: flex;
    gap: var(--sp-3);
    padding: var(--sp-4);
    border-radius: var(--radius-md);
    font-size: var(--text-md);
}
.alert svg { flex-shrink: 0; }
.alert--error { background: var(--danger-soft); color: var(--danger); }
.alert--success { background: var(--success-soft); color: var(--success); }

/* Honeypot: vizibil doar pentru roboți */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Banda de dovezi ========================================================== */

.proof-band {
    padding-top: var(--sp-8);
    padding-bottom: var(--sp-8);
    background: var(--band-gradient);
    color: var(--band-text);
}
.proof-band--slim { padding-top: var(--sp-5); padding-bottom: var(--sp-5); }

.proof-band__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--sp-6);
    padding-bottom: var(--sp-6);
    margin-bottom: var(--sp-6);
    border-bottom: 1px solid var(--band-border);
}

.proof-stat { display: grid; gap: var(--sp-1); }
.proof-stat__value {
    font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    color: #fff;
}
.proof-stat__label { font-size: var(--text-sm); color: var(--band-muted); max-width: 26ch; }

.proof-band__chips { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); justify-content: center; }
.proof-band__chips span {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4);
    border: 1px solid var(--band-border);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 550;
    color: var(--band-text);
}
.proof-band__chips svg { color: #e8c96b; }

/* Carduri de soluții ======================================================= */

.solutions { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: var(--sp-5); }

.solution {
    display: flex;
    flex-direction: column;
    padding: var(--sp-6);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
}
.solution:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); transform: translateY(-2px); text-decoration: none; }

/* Ultimul card nu este o verticală, ci locul liber de lângă ele. Conturul
   punctat spune asta dintr-o privire, la fel ca intrarea din meniu. */
.solution--custom { border-style: dashed; border-color: var(--accent-500); background: var(--bg-app); }
.solution--custom:hover { border-style: solid; }

/* Ilustrații */
.art { display: block; width: 100%; height: auto; }

.solution__art {
    margin: calc(var(--sp-6) * -1) calc(var(--sp-6) * -1) var(--sp-5);
    padding: var(--sp-4) var(--sp-4) 0;
    background: linear-gradient(180deg, var(--accent-50), transparent);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    overflow: hidden;
}
.solution__art .art { max-width: 100%; }

.art-band {
    max-width: 520px;
    margin: 0 auto var(--sp-10);
    padding: var(--sp-5);
    background: linear-gradient(180deg, var(--accent-50), transparent);
    border-radius: var(--radius-lg);
}
.art-band .art { max-height: 320px; margin: 0 auto; }

.solution__title { font-size: var(--text-lg); margin-bottom: var(--sp-2); }
.solution__text { color: var(--text-muted); font-size: var(--text-md); margin-bottom: var(--sp-5); flex: 1; }
.solution__more { display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: 600; color: var(--accent-600); font-size: var(--text-md); }
.solution:hover .solution__more { gap: var(--sp-3); }

/* ERP la comandă =========================================================== */

/* Secțiunea vine imediat după cardurile de soluții, adică exact acolo unde
   vizitatorul constată că domeniul lui lipsește. Ca să nu pară o continuare a
   listei, argumentul stă în stânga, iar procesul într-un panou întunecat —
   aceeași bandă de autoritate folosită și în restul paginii. */
.custom-erp {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    gap: clamp(2rem, 1rem + 3vw, 3.5rem);
    align-items: start;
}

.custom-erp__copy .section__title { max-width: 20ch; }
.custom-erp__copy .section__lead { max-width: 54ch; margin-bottom: var(--sp-6); }

/* Exemplele de domenii: cine se recunoaște într-una dintre ele înțelege din
   privire că oferta îl include, fără să citească tot textul. */
.custom-erp__tags {
    list-style: none;
    margin: 0 0 var(--sp-7);
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}
.custom-erp__tags li {
    padding: var(--sp-2) var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    background: var(--bg-surface);
    font-size: var(--text-sm);
    font-weight: 550;
    color: var(--text);
}
.custom-erp__tags--center { justify-content: center; margin-bottom: 0; }

.custom-erp__tags li.custom-erp__tags-more {
    border-style: dashed;
    border-color: var(--accent-500);
    background: transparent;
    color: var(--accent-600);
}

.custom-erp__panel {
    padding: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
    border: 1px solid var(--band-border);
    border-radius: var(--radius-lg);
    background: var(--band-gradient);
    background-color: var(--band-bg);
    box-shadow: var(--shadow-lg);
}

.custom-erp__panel-title {
    display: block;
    margin-bottom: var(--sp-6);
    font-size: var(--text-sm);
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--brand-500);
}

.custom-erp__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-5); }

.custom-erp__step { display: flex; gap: var(--sp-4); }
.custom-erp__step strong { display: block; color: var(--band-text); font-size: var(--text-md); }
.custom-erp__step p { margin-top: var(--sp-2); color: var(--band-muted); font-size: var(--text-md); }

.custom-erp__num {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid var(--band-border);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 680;
    font-variant-numeric: tabular-nums;
    color: var(--brand-500);
}

/* Termenul stă lângă titlu, nu în text: durata este a doua întrebare pe care
   o pune oricine se gândește la o dezvoltare la comandă. */
.custom-erp__meta {
    display: block;
    margin-top: var(--sp-1);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--brand-500);
}

.custom-erp__features { margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); }

/* Platforma pe viu ========================================================= */

.showcase {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: clamp(2rem, 1rem + 3vw, 3.5rem);
    align-items: center;
    margin-bottom: var(--sp-12);
}

.showcase__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-6); }
.showcase__list li { display: flex; gap: var(--sp-4); }
.showcase__list strong { display: block; font-size: var(--text-md); font-weight: 650; color: var(--text-strong); margin-bottom: var(--sp-1); }
.showcase__list p { color: var(--text-muted); font-size: var(--text-md); }
.showcase__icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    background: var(--accent-50);
    color: var(--accent-600);
}

/* Mockup de produs */
.mock {
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.mock__bar {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    background: var(--bg-sunken);
    border-bottom: 1px solid var(--border);
}
.mock__dot { width: 9px; height: 9px; border-radius: var(--radius-full); background: var(--border-strong); }
.mock__url {
    margin-left: var(--sp-3);
    padding: 2px var(--sp-3);
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    color: var(--text-muted);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
}

.mock__body { display: grid; grid-template-columns: 132px minmax(0, 1fr); min-height: 300px; }

.mock__side { padding: var(--sp-3); border-right: 1px solid var(--border); background: var(--bg-sidebar); }
.mock__side-row {
    height: 8px;
    margin-bottom: var(--sp-3);
    border-radius: var(--radius-full);
    background: var(--bg-sunken);
}
.mock__side-row--active { background: var(--accent-100); }
.mock__side-row:nth-child(2) { width: 82%; }
.mock__side-row:nth-child(3) { width: 64%; }
.mock__side-row:nth-child(4) { width: 74%; }
.mock__side-row:nth-child(5) { width: 56%; }
.mock__side-row:nth-child(6) { width: 70%; }

.mock__main { padding: var(--sp-4); display: grid; gap: var(--sp-3); align-content: start; }
.mock__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.mock__kpi { padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-surface); }
.mock__kpi-label { height: 6px; width: 68%; border-radius: var(--radius-full); background: var(--bg-sunken); margin-bottom: var(--sp-3); }
.mock__kpi-value { font-size: var(--text-xl); font-weight: 680; color: var(--text-strong); letter-spacing: -0.02em; }
.mock__kpi-trend { font-size: var(--text-xs); font-weight: 600; color: var(--success); }

.mock__chart {
    display: flex;
    align-items: flex-end;
    gap: var(--sp-2);
    height: 92px;
    padding: var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}
.mock__bar-col { flex: 1; border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: var(--accent-500); }
.mock__bar-col:nth-child(odd) { opacity: 0.55; }

.mock__rows { display: grid; gap: var(--sp-2); }
.mock__row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.mock__row-avatar { width: 18px; height: 18px; border-radius: var(--radius-full); background: var(--accent-100); flex-shrink: 0; }
.mock__row-line { height: 6px; flex: 1; border-radius: var(--radius-full); background: var(--bg-sunken); }
.mock__row-pill { width: 44px; height: 12px; border-radius: var(--radius-full); background: var(--success-soft); flex-shrink: 0; }

/* Piloni & funcționalități ================================================= */

.pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: var(--sp-6); }

.pillar__icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-bottom: var(--sp-4);
    border-radius: var(--radius-md);
    background: var(--accent-50);
    color: var(--accent-600);
}
.pillar__title { font-size: var(--text-lg); margin-bottom: var(--sp-2); }
.pillar__text { color: var(--text-muted); }

.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--sp-5); }

.feature {
    padding: var(--sp-5);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.feature__head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.feature__icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius);
    background: var(--accent-50);
    color: var(--accent-600);
    flex-shrink: 0;
}
.feature__title { font-size: var(--text-md); font-weight: 650; color: var(--text-strong); }
.feature__text { color: var(--text-muted); font-size: var(--text-md); }

/* Referințe ================================================================ */

.logo-wall {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--sp-4);
    margin-bottom: var(--sp-10);
}
.logo-wall__item {
    display: grid;
    gap: var(--sp-1);
    padding: var(--sp-5);
    text-align: center;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.logo-wall__name { font-weight: 650; color: var(--text-strong); }
.logo-wall__detail { font-size: var(--text-sm); color: var(--text-muted); }

.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--sp-5); }
.quote {
    margin: 0;
    padding: var(--sp-6);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent-500);
    border-radius: var(--radius-lg);
}
.quote blockquote { margin: 0 0 var(--sp-5); font-size: var(--text-lg); line-height: 1.55; color: var(--text-strong); }
.quote figcaption { display: grid; gap: 2px; }
.quote__name { font-weight: 650; color: var(--text-strong); font-size: var(--text-md); }
.quote__role { font-size: var(--text-sm); color: var(--text-muted); }

/* Liste de probleme / rezultate ============================================ */

.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(2rem, 1rem + 3vw, 3.5rem); align-items: start; }

.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
.checklist li { display: flex; gap: var(--sp-3); font-size: var(--text-md); }
.checklist__mark {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
    margin-top: 1px;
}
.checklist--problem .checklist__mark { background: var(--danger-soft); color: var(--danger); }
.checklist--outcome .checklist__mark { background: var(--success-soft); color: var(--success); }

/* Harta modulelor ========================================================== */

.module-map { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-5); }
.module-map__col {
    padding: var(--sp-5);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.module-map__head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.module-map__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.module-map__list a {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--text-md);
    color: var(--text);
}
.module-map__list a:hover { color: var(--accent-600); }
.module-map__list svg { color: var(--text-subtle); }

/* Pe pagina de ERP la comandă lista descrie ce se poate construi, nu module
   care există deja — deci nu are unde duce un link. */
.module-map__list--static li { display: flex; gap: var(--sp-2); font-size: var(--text-md); color: var(--text); }
.module-map__list--static svg { color: var(--success); flex-shrink: 0; margin-top: 4px; }

/* Pași ===================================================================== */

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--sp-6); }

.step__num {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-bottom: var(--sp-4);
    border-radius: var(--radius-md);
    background: var(--brand-gradient);
    color: var(--accent-contrast);
    font-weight: 700;
    font-size: var(--text-md);
    font-variant-numeric: tabular-nums;
}
.step__title { font-size: var(--text-lg); margin-bottom: var(--sp-2); }
.step__text { color: var(--text-muted); }

/* Durata sau livrabilul etapei, scos din text: la o dezvoltare la comandă
   „cât durează" este a doua întrebare, imediat după „cât costă". Bronzul, nu
   aurul: pe fundal deschis aurul are 2,1:1 și dispare. */
.step__meta {
    display: block;
    margin-bottom: var(--sp-2);
    font-size: var(--text-xs);
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent-600);
}

/* Pașii următori (contact și mulțumire) */
.next-card {
    padding: var(--sp-5);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.next-card__title { font-size: var(--text-md); font-weight: 650; margin-bottom: var(--sp-4); }

.next-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); counter-reset: none; }
.next-list li { display: flex; gap: var(--sp-3); }
.next-list strong { display: block; font-size: var(--text-md); color: var(--text-strong); font-weight: 600; }
.next-list p { font-size: var(--text-sm); color: var(--text-muted); }
.next-list__num {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    background: var(--accent-50);
    color: var(--accent-700);
    font-size: var(--text-sm);
    font-weight: 700;
}
.next-list--center {
    max-width: 480px;
    margin: var(--sp-8) auto 0;
    text-align: left;
}

.privacy-note {
    display: flex;
    gap: var(--sp-3);
    padding: var(--sp-4);
    border-radius: var(--radius-md);
    background: var(--bg-sunken);
    font-size: var(--text-sm);
    color: var(--text-muted);
}
.privacy-note svg { color: var(--success); flex-shrink: 0; }

/* Pachete ================================================================== */

.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--sp-5); align-items: start; }

.plan {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--sp-6);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
}

/* Pachetul recomandat iese în față: este ancora față de care se compară celelalte. */
.plan--featured {
    border-color: var(--cta-500);
    box-shadow: var(--shadow-md);
}
.plan--featured::before {
    content: "";
    position: absolute;
    inset: -1px -1px auto;
    height: 3px;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: linear-gradient(90deg, var(--cta-500), var(--cta-700));
}

.plan__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    align-self: flex-start;
    margin-bottom: var(--sp-3);
    padding: var(--sp-1) var(--sp-3);
    border-radius: var(--radius-full);
    background: var(--cta-soft);
    color: var(--cta-700);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.plan__name { font-size: var(--text-xl); margin-bottom: var(--sp-2); }
.plan__tagline { color: var(--text-muted); font-size: var(--text-md); margin-bottom: var(--sp-5); }

.plan__price {
    display: grid;
    gap: var(--sp-1);
    padding: var(--sp-4) 0;
    margin-bottom: var(--sp-5);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.plan__price-note { font-size: var(--text-lg); font-weight: 650; color: var(--text-strong); }
.plan__audience { font-size: var(--text-sm); color: var(--text-muted); }

.plan__features { list-style: none; margin: 0 0 var(--sp-5); padding: 0; display: grid; gap: var(--sp-3); flex: 1; }
.plan__features li { display: flex; gap: var(--sp-3); font-size: var(--text-md); color: var(--text); }
.plan__features svg { color: var(--success); flex-shrink: 0; margin-top: 3px; }

.plan__gain {
    display: flex;
    gap: var(--sp-3);
    padding: var(--sp-4);
    margin-bottom: var(--sp-5);
    border-radius: var(--radius-md);
    background: var(--accent-50);
    font-size: var(--text-sm);
    color: var(--accent-700);
}
.plan__gain svg { flex-shrink: 0; margin-top: 2px; }

.included {
    display: grid;
    gap: var(--sp-4);
    margin-top: var(--sp-8);
    padding: var(--sp-5) var(--sp-6);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-lg);
}
.included__title { display: flex; align-items: center; gap: var(--sp-3); font-weight: 650; color: var(--text-strong); }
.included__title svg { color: var(--accent-600); }
.included ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); }
.included li { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-md); color: var(--text-muted); }
.included svg { color: var(--success); }

.plans-head__trust {
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3) var(--sp-6);
    max-width: 62ch;
    margin-inline: auto;
    border-top: none;
    padding-top: 0;
}

/* Calculator de cost ======================================================= */

.calc {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 1rem + 2vw, 3rem);
    padding: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.calc__inputs { display: grid; gap: var(--sp-6); align-content: center; }
.calc__field { display: grid; gap: var(--sp-3); }
.calc__field .field__label { display: flex; justify-content: space-between; gap: var(--sp-4); }
.calc__field strong { color: var(--accent-600); font-variant-numeric: tabular-nums; }

.calc__range { width: 100%; accent-color: var(--accent-500); }

.calc__result {
    display: grid;
    align-content: center;
    gap: var(--sp-2);
    padding: var(--sp-6);
    border-radius: var(--radius-lg);
    background: var(--band-gradient);
    color: var(--band-text);
    text-align: center;
}
.calc__value {
    font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.75rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    color: #fff;
}
.calc__label { font-size: var(--text-md); color: var(--band-muted); }
.calc__year { margin-bottom: var(--sp-5); font-size: var(--text-md); color: var(--band-text); font-variant-numeric: tabular-nums; }
.calc__note { margin-top: var(--sp-3); font-size: var(--text-xs); color: var(--band-muted); }

/* Pe banda închisă butonul rămâne butonul de acțiune al site-ului: aurul are
   9:1 pe negru, deci nu are nevoie de o variantă proprie. Regula rămâne scrisă
   aici pentru că banda și-a mai schimbat o dată fundalul. */
.calc__result .btn--primary { background: var(--cta-500); color: var(--cta-contrast); }
.calc__result .btn--primary:hover { background: var(--cta-600); }

/* Extinderi ================================================================ */

.feature--addon { display: flex; flex-direction: column; }
.feature--addon .feature__text { flex: 1; margin-bottom: var(--sp-4); }
.feature__link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--accent-600);
}
.feature__link:hover { gap: var(--sp-3); text-decoration: none; }

.addon-picker {
    padding: var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-sunken);
}
.addon-picker__summary {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--text-strong);
    cursor: pointer;
    list-style: none;
}
.addon-picker__summary::-webkit-details-marker { display: none; }
.addon-picker__summary svg { margin-left: auto; color: var(--text-subtle); transition: transform var(--transition); }
.addon-picker[open] .addon-picker__summary svg { transform: rotate(180deg); }

.addon-picker__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--sp-2);
    margin-top: var(--sp-4);
}
.addon-check {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-surface);
    font-size: var(--text-sm);
    color: var(--text);
    cursor: pointer;
}
.addon-check:hover { border-color: var(--border-strong); }
.addon-check input { width: 16px; height: 16px; margin-top: 1px; flex-shrink: 0; accent-color: var(--accent-500); }

/* Comparație =============================================================== */

.compare {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.compare__row {
    display: grid;
    grid-template-columns: minmax(140px, 0.8fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--sp-5);
    padding: var(--sp-5) var(--sp-6);
    border-top: 1px solid var(--border);
}
.compare__row:first-child { border-top: none; }
.compare__row--head { background: var(--bg-sunken); padding-top: var(--sp-4); padding-bottom: var(--sp-4); }

.compare__col-title { font-size: var(--text-sm); font-weight: 650; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-subtle); }
.compare__col-title--us { color: var(--accent-600); }

.compare__topic { font-weight: 650; color: var(--text-strong); font-size: var(--text-md); }
.compare__generic, .compare__us { display: flex; gap: var(--sp-3); font-size: var(--text-md); }
.compare__generic { color: var(--text-muted); }
.compare__generic svg { color: var(--text-subtle); flex-shrink: 0; margin-top: 2px; }
.compare__us { color: var(--text); }
.compare__us svg { color: var(--success); flex-shrink: 0; margin-top: 2px; }

/* Cross-sell între verticale =============================================== */

.cross-sell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    gap: clamp(1.5rem, 1rem + 2vw, 3rem);
    padding: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
}
.cross-sell__title { font-size: var(--display-sm); margin-bottom: var(--sp-3); }
.cross-sell__text { color: var(--text-muted); margin-bottom: var(--sp-5); }

.cross-sell__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); align-content: center; }
.cross-sell__list a {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text);
}
.cross-sell__list a:hover { border-color: var(--border-strong); background: var(--bg-hover); text-decoration: none; }
.cross-sell__list strong { display: block; font-size: var(--text-md); color: var(--text-strong); }
.cross-sell__list span span { font-size: var(--text-sm); color: var(--text-muted); }
.cross-sell__list > li > a > svg:last-child { margin-left: auto; color: var(--text-subtle); }
.cross-sell__icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius);
    background: var(--accent-50);
    color: var(--accent-600);
    flex-shrink: 0;
}

.steps--stacked { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }

.preselect {
    display: inline-flex;
    gap: var(--sp-3);
    margin-top: var(--sp-5);
    padding: var(--sp-4);
    border-radius: var(--radius-md);
    background: var(--success-soft);
    color: var(--text);
    font-size: var(--text-sm);
    text-align: left;
}
.preselect svg { color: var(--success); flex-shrink: 0; margin-top: 2px; }


/* Iconițe multicolore ====================================================== */
/* O pagină lungă în care fiecare iconiță are aceeași culoare arată moartă.
   Tonurile se aplică ciclic, după poziția din listă. Primul este aurul de
   brand; al treilea a fost mutat de pe chihlimbar pe portocaliu, pentru că
   lângă aur galbenul nu se mai citea ca un ton separat. */

.tint-1 { background: #faf4e4; color: #7a5f22; }
.tint-2 { background: #dcf6f2; color: #0f766e; }
.tint-3 { background: #fdf0e6; color: #c2410c; }
.tint-4 { background: #f2ecfe; color: #6d28d9; }
.tint-5 { background: #e4f7eb; color: #15803d; }
.tint-6 { background: #fdeaf0; color: #be1e5b; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .tint-1 { background: rgb(213 174 83 / 0.18); color: #e2bf62; }
    :root:not([data-theme="light"]) .tint-2 { background: rgb(45 212 191 / 0.18); color: #5ee0d0; }
    :root:not([data-theme="light"]) .tint-3 { background: rgb(234 88 12 / 0.18); color: #fdae6b; }
    :root:not([data-theme="light"]) .tint-4 { background: rgb(167 139 250 / 0.18); color: #bda4fc; }
    :root:not([data-theme="light"]) .tint-5 { background: rgb(74 222 128 / 0.18); color: #74e59c; }
    :root:not([data-theme="light"]) .tint-6 { background: rgb(244 114 158 / 0.18); color: #f79ac0; }
}
:root[data-theme="dark"] .tint-1 { background: rgb(213 174 83 / 0.18); color: #e2bf62; }
:root[data-theme="dark"] .tint-2 { background: rgb(45 212 191 / 0.18); color: #5ee0d0; }
:root[data-theme="dark"] .tint-3 { background: rgb(234 88 12 / 0.18); color: #fdae6b; }
:root[data-theme="dark"] .tint-4 { background: rgb(167 139 250 / 0.18); color: #bda4fc; }
:root[data-theme="dark"] .tint-5 { background: rgb(74 222 128 / 0.18); color: #74e59c; }
:root[data-theme="dark"] .tint-6 { background: rgb(244 114 158 / 0.18); color: #f79ac0; }

/* Bandă CTA ================================================================ */

/* Banda folosea degradeul de accent cu text alb. Nu mai poate: pe tema închisă
   --accent-600/700 sunt aur deschis, iar albul ar cădea la 1,4:1. Trece pe
   negrul de autoritate, identic în ambele teme, ca banda de dovezi. */
.cta-band {
    padding: clamp(2.5rem, 1.6rem + 3.4vw, 4rem);
    border-radius: var(--radius-lg);
    background: var(--band-gradient);
    color: var(--band-text);
    text-align: center;
    border: 1px solid var(--band-border);
}
.cta-band h2 { color: #fff; font-size: var(--display-sm); margin-bottom: var(--sp-3); }
.cta-band p { color: rgb(255 255 255 / 0.86); font-size: var(--lead); max-width: 60ch; margin-left: auto; margin-right: auto; margin-bottom: var(--sp-6); }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; }

.btn--on-accent { background: var(--cta-500); color: var(--cta-contrast); }
.btn--on-accent:hover { background: var(--cta-600); }
.btn--outline-light { background: transparent; color: #fff; border-color: rgb(255 255 255 / 0.5); }
.btn--outline-light:hover { background: rgb(255 255 255 / 0.12); border-color: #fff; }

/* Încheiere: argument + formular =========================================== */

.closing {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
    gap: clamp(2rem, 1rem + 3vw, 3.5rem);
    align-items: start;
}
.closing__copy .section__lead { margin-bottom: var(--sp-8); }

/* Casetă de contact lateral ================================================ */

.contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: clamp(2rem, 1rem + 3vw, 3.5rem);
    align-items: start;
}

.contact-aside { display: grid; gap: var(--sp-5); align-content: start; }

.contact-item { display: flex; gap: var(--sp-3); }
.contact-item__icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: var(--accent-50);
    color: var(--accent-600);
    flex-shrink: 0;
}
.contact-item__label { font-size: var(--text-sm); color: var(--text-muted); }
.contact-item__value { font-size: var(--text-lg); font-weight: 650; color: var(--text-strong); }
.contact-item__value a { color: inherit; }

/* Ghid pentru cumpărători ================================================== */

.guide-head { max-width: var(--site-narrow); }
.guide-intro { margin-top: var(--sp-5); color: var(--text); font-size: var(--text-md); }

.guide-group__head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-6); }
.guide-group__title { font-size: var(--display-sm); }

.guide-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--sp-5);
}

.guide-item {
    padding: var(--sp-5);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.guide-item__q { font-size: var(--text-lg); margin-bottom: var(--sp-3); }
.guide-item__num { color: var(--accent-600); font-variant-numeric: tabular-nums; }
.guide-item__why { color: var(--text-muted); font-size: var(--text-md); margin-bottom: var(--sp-4); }

/* Semnalul de alarmă este partea utilă a ghidului: întrebarea singură nu ajută
   pe cineva care nu știe ce răspuns ar trebui să-l îngrijoreze. */
.guide-item__flag {
    padding: var(--sp-3) var(--sp-4);
    border-left: 3px solid var(--danger);
    border-radius: 0 var(--radius) var(--radius) 0;
    background: var(--danger-soft);
    color: var(--text);
    font-size: var(--text-sm);
}
.guide-item__flag > span {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-1);
    font-weight: 650;
    color: var(--danger);
}

.guide-capture {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    gap: clamp(2rem, 1rem + 3vw, 3.5rem);
    align-items: start;
}
.guide-capture__trust { margin-top: var(--sp-6); }

/* Întrebări frecvente ====================================================== */

.faq { display: grid; gap: var(--sp-3); max-width: var(--site-narrow); margin-left: auto; margin-right: auto; }
.faq__item {
    padding: var(--sp-5);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.faq__item[open] { border-color: var(--border-strong); box-shadow: var(--shadow-xs); }

.faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    font-size: var(--text-md);
    font-weight: 650;
    color: var(--text-strong);
    cursor: pointer;
    list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q svg { color: var(--text-subtle); flex-shrink: 0; transition: transform var(--transition); }
.faq__item[open] .faq__q svg { transform: rotate(180deg); }

.faq__a { margin-top: var(--sp-3); color: var(--text-muted); }

.faq__more { margin-top: var(--sp-6); text-align: center; font-size: var(--text-md); color: var(--text-muted); }

/* Pagina de mulțumire ====================================================== */

.thanks {
    max-width: var(--site-narrow);
    margin-inline: auto;
    padding: clamp(1.75rem, 1.2rem + 2vw, 3rem);
    text-align: center;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.thanks__mark {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    margin: 0 auto var(--sp-5);
    border-radius: var(--radius-full);
    background: var(--success-soft);
    color: var(--success);
}
.thanks__lead { margin-inline: auto; max-width: 52ch; }
.thanks__alert { margin-top: var(--sp-6); text-align: left; }
.thanks__actions { margin-top: var(--sp-8); }

/* Footer =================================================================== */

.site-footer {
    padding-top: var(--section-y);
    padding-bottom: var(--sp-8);
    background: var(--bg-sunken);
    border-top: 1px solid var(--border);
}

.footer-grid {
    display: grid;
    grid-template-columns: minmax(240px, 1.4fr) repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--sp-8);
    margin-bottom: var(--sp-10);
}

.footer-col__title {
    margin-bottom: var(--sp-4);
    font-size: var(--text-sm);
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-subtle);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.footer-col a { color: var(--text-muted); font-size: var(--text-md); }
.footer-col a:hover { color: var(--text-strong); text-decoration: none; }

.footer-about { color: var(--text-muted); font-size: var(--text-md); max-width: 42ch; margin-top: var(--sp-4); margin-bottom: var(--sp-4); }

.footer-compliance {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-4);
    margin-top: var(--sp-5);
    font-size: var(--text-sm);
    color: var(--text-muted);
}
.footer-compliance span { display: inline-flex; align-items: center; gap: var(--sp-2); }
.footer-compliance svg { color: var(--accent-600); }

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3) var(--sp-5);
    justify-content: space-between;
    align-items: center;
    padding-top: var(--sp-6);
    border-top: 1px solid var(--border);
    font-size: var(--text-sm);
    color: var(--text-muted);
}

/* Elemente flotante ======================================================== */

.wa-float {
    position: fixed;
    right: clamp(1rem, 0.5rem + 1.5vw, 1.75rem);
    bottom: clamp(1rem, 0.5rem + 1.5vw, 1.75rem);
    z-index: 50;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    height: 52px;
    padding: 0 var(--sp-5);
    border-radius: var(--radius-full);
    background: #1f9c4d;
    color: #fff;
    font-weight: 600;
    box-shadow: var(--shadow-lg);
    transition: background var(--transition), transform var(--transition);
}
.wa-float:hover { background: #1b8843; transform: translateY(-1px); text-decoration: none; }

/* Bara de acțiuni de pe telefon: apare doar sub 900px (vezi mai jos). */
.mobile-cta {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    gap: var(--sp-2);
    padding: var(--sp-3);
    padding-bottom: max(var(--sp-3), env(safe-area-inset-bottom));
    background: var(--bg-surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -8px 24px rgb(15 23 42 / 0.10);
}
.mobile-cta__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    flex: 1;
    height: 44px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-strong);
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--text-strong);
    white-space: nowrap;
}
.mobile-cta__item:hover { text-decoration: none; }
.mobile-cta__item--wa { background: #1f9c4d; border-color: #1f9c4d; color: #fff; }
.mobile-cta__item--primary { background: var(--cta-500); border-color: var(--cta-500); color: var(--cta-contrast); }

/* Conținut juridic ========================================================= */

.prose { max-width: var(--site-narrow); }
.prose h2 { font-size: var(--display-sm); margin-top: var(--sp-8); margin-bottom: var(--sp-4); }
.prose h3 { font-size: var(--text-lg); margin-top: var(--sp-6); margin-bottom: var(--sp-3); }
.prose p, .prose li { color: var(--text); font-size: var(--text-md); }
.prose ul { padding-left: var(--sp-5); display: grid; gap: var(--sp-2); margin-top: var(--sp-3); margin-bottom: var(--sp-3); }

/* Responsive =============================================================== */

@media (max-width: 1100px) {
    .hero__grid { grid-template-columns: minmax(0, 1fr); }
    .hero__copy { padding-top: 0; }
    .hero__form { max-width: 560px; }
    .showcase { grid-template-columns: minmax(0, 1fr); }
    .closing, .contact-layout, .calc, .cross-sell, .custom-erp, .guide-capture { grid-template-columns: minmax(0, 1fr); }
    .mock__body { min-height: 240px; }
}

@media (max-width: 900px) {
    .utility-bar__claim { display: none; }
    .utility-bar__inner { justify-content: center; }

    .site-nav, .site-header__actions .btn { display: none; }
    .site-header__toggle { display: grid; }
    .site-header__inner { gap: var(--sp-3); height: 64px; }

    .site-nav[data-open] {
        display: grid;
        position: absolute;
        top: 64px;
        left: 0;
        right: 0;
        padding: var(--sp-4);
        gap: var(--sp-1);
        background: var(--bg-surface);
        border-bottom: 1px solid var(--border);
        box-shadow: var(--shadow-lg);
    }
    .site-nav[data-open] .site-menu { width: 100%; }

    /* În meniul de pe telefon panourile nu mai plutesc: se desfac în loc, sub
       butonul lor. Regula prinde ambele meniuri, inclusiv cel îngust, care pe
       desktop e ancorat la dreapta. */
    .site-nav[data-open] .site-menu__panel {
        position: static;
        transform: none;
        width: 100%;
        max-width: none;
        box-shadow: none;
        border: none;
        padding: 0;
        margin-top: var(--sp-2);
    }
    .site-nav[data-open] .site-menu__panel[data-open] { grid-template-columns: minmax(0, 1fr); }
    .site-nav[data-open] .site-menu__trigger { width: 100%; justify-content: space-between; }
    .site-nav[data-open] .site-nav__cta { display: inline-flex; margin-top: var(--sp-3); }

    /* Acțiunile de contact trec în bara fixă de jos, iar butonul flotant dispare. */
    .mobile-cta { display: flex; }
    .wa-float { display: none; }
    .site-footer { padding-bottom: 5.5rem; }
}

@media (max-width: 620px) {
    .mock__kpis { grid-template-columns: repeat(2, 1fr); }
    .mock__side { display: none; }
    .mock__body { grid-template-columns: 1fr; }
    .proof-band__stats { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); }

    /* Tabelul de comparație devine trei rânduri per temă. */
    .compare__row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
    .compare__row--head { display: none; }
    .compare__generic > span::before { content: "Platformă generică: "; font-weight: 600; }
    .compare__us > span::before { content: "Plenia: "; font-weight: 600; color: var(--accent-600); }
    .mobile-cta__item { font-size: var(--text-sm); padding: 0 var(--sp-2); }

    /* La lățimea asta taglineul ar rupe rândul siglei. Rămâne în footer, unde
       are loc, și în sigla propriu-zisă. */
    .site-header .brand__tagline { display: none; }
    .site-brand--full .brand__mark { width: 34px; height: 34px; }
}

@media (prefers-reduced-motion: reduce) {
    .solution:hover { transform: none; }
    .wa-float:hover { transform: none; }
}