:root {
  /* Site-ul are o singura tema. Fara asta, browserul ar reda controalele
     de formular si barele de derulare in varianta lui intunecata. */
  color-scheme: light;
  /* Fonturi de sistem: zero fisiere, nicio dependenta externa si nicio
     problema de GDPR — Google Fonts trimite IP-ul vizitatorului catre Google,
     ceea ce o instanta germana a considerat deja o incalcare. */
  --sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: Georgia, "Times New Roman", serif;

    --blue:      #293CB7;
    --blue-deep: #1B2780;
    --magenta:   #DD2590;
    --ink:       #0E1330;
    --ink-soft:  #4A5170;
    --paper:     #FBFBFE;
    --mist:      #EBEDF7;
    --line:      #D8DCEE;
    --card:      #FFFFFF;
    --good:      #0F7B4F;
    --good-bg:   #E4F4EC;
    --warn-bg:   #FDF0E4;
    --warn:      #A85B12;

    --shadow: 0 1px 2px rgba(14,19,48,.05), 0 12px 32px -12px rgba(14,19,48,.14);
    --radius: 14px;
    --maxw: 1120px;

    --step--1: clamp(.82rem, .8rem + .1vw, .88rem);
    --step-0:  clamp(1rem, .97rem + .16vw, 1.09rem);
    --step-1:  clamp(1.2rem, 1.12rem + .38vw, 1.44rem);
    --step-2:  clamp(1.5rem, 1.34rem + .78vw, 2.05rem);
    --step-3:  clamp(1.95rem, 1.6rem + 1.72vw, 3.1rem);
    --step-4:  clamp(2.4rem, 1.75rem + 3.1vw, 4.2rem);
  }



  * { box-sizing: border-box; }
  /* Legaturile catre o sectiune din aceeasi pagina (meniul, „Generează
     raportul”, filele de tip spre formular) deruleaza lin, ca omul sa vada
     unde a ajuns. Clasa „lin” o pune scriptul din layout doar la clic:
     sosirea pe o ancora din alta pagina, cautarea din browser si derularea
     de la incarcare raman instantanee — altfel pagina s-ar deschide sus si
     ar aluneca prin tot continutul. Cine a cerut din sistem miscare redusa
     ramane la saritura. */
  @media (prefers-reduced-motion: no-preference) {
    html.lin { scroll-behavior: smooth; }
  }

  body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: var(--step-0);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3 {
    font-family: var(--sans);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.08;
    text-wrap: balance;
    margin: 0;
  }

  p { margin: 0; }
  a { color: inherit; }

  .wrap {
    width: 100%;
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: 20px;
  }

  .eyebrow {
    font-family: var(--sans);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }

  /* ---------- header ---------- */
  header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 20;
    background: transparent;
    border-bottom: 1px solid transparent;
    color: #fff;
    transition: background .25s ease, border-color .25s ease, color .25s ease;
  }
  header.solid {
    background: rgba(22, 32, 95, .92);
    backdrop-filter: blur(12px);
    border-bottom-color: rgba(255,255,255,.12);
    box-shadow: 0 8px 26px -18px rgba(0,0,0,.9);
  }
  header nav.links a { color: rgba(255,255,255,.78); }
  header nav.links a:hover { color: #fff; }
  .bar {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 66px;
  }
  @media (min-width: 780px) { .bar { gap: 20px; } }
  .logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    margin-right: auto;
  }
  .logo img { height: 26px; width: auto; display: block; }
  @media (min-width: 480px) { .logo img { height: 30px; } }
  .logo:focus-visible { outline: 3px solid var(--magenta); outline-offset: 4px; border-radius: 4px; }
  /* buton hamburger + panou, doar pe mobil */
  .menu-btn {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    flex: none;
    background: transparent;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 10px;
    cursor: pointer;
    padding: 0;
  }
  .menu-btn:focus-visible { outline: 3px solid var(--magenta); outline-offset: 2px; }
  .menu-btn span {
    display: block;
    width: 17px; height: 1.5px;
    background: #fff;
    border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease;
  }
  .menu-btn span + span { margin-top: 4px; }
  .menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
  .menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

  .panel {
    display: none;
    background: rgba(22,32,95,.98);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255,255,255,.12);
    border-bottom: 1px solid rgba(255,255,255,.12);
  }
  .panel.open { display: block; }
  .panel .wrap { display: flex; flex-direction: column; gap: 2px; padding-block: 12px 18px; }
  .panel a.item {
    color: rgba(255,255,255,.86);
    text-decoration: none;
    font-size: 1.02rem;
    padding: 13px 2px;
    border-bottom: 1px solid rgba(255,255,255,.09);
  }
  .panel a.item:last-of-type { border-bottom: 0; }
  .panel .btn { margin-top: 12px; width: 100%; }

  nav.links { display: none; gap: 26px; font-size: .95rem; }
  nav.links a { text-decoration: none; color: var(--ink-soft); }
  nav.links a:hover { color: var(--ink); }

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--sans);
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: -.01em;
    padding: 11px 20px;
    border-radius: 10px;
    border: 1px solid transparent;
    text-decoration: none;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .18s ease, background .18s ease;
  }
  .btn:focus-visible { outline: 3px solid var(--magenta); outline-offset: 2px; }
  .btn-primary { background: var(--magenta); color: #fff; }
  .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 22px -8px var(--magenta); }
  .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
  .btn-ghost:hover { border-color: var(--blue); color: var(--blue); }
  .btn-lg { padding: 14px 26px; font-size: 1.02rem; }
  .btn-sm { padding: 9px 14px; font-size: .88rem; }

  /* Butonul care asteapta raspuns de la server.
     Verificarea firmei intreaba un registru din afara si poate dura cateva
     secunde. Pana acum butonul doar se stingea, iar un buton stins care nu
     face nimic arata a buton blocat — asa se nasc apasarile duble.
     Semnul se pune in buton, adica exact unde s-a uitat omul cand a apasat;
     randul „se verifica” de dedesubt ramane, el poarta intelesul.
     Textul se face transparent, nu dispare, ca butonul sa nu-si schimbe
     latimea si pagina sa nu tresara. Cercul e acelasi cu cel de pe pagina de
     stare a comenzii — un singur fel de a spune „se lucreaza”. */
  .btn[data-asteapta] { position: relative; color: transparent; }
  .btn[data-asteapta]::after {
    content: "";
    position: absolute; inset: 0; margin: auto;
    width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid var(--line); border-top-color: var(--magenta);
    animation: stare-roteste .9s linear infinite;
  }
  /* Ca la spinnerul de pe pagina de stare: incetinit, nu oprit — oprit ar
     parea stricat, iar omul tot ar trebui sa ghiceasca daca se lucreaza. */
  @media (prefers-reduced-motion: reduce) {
    .btn[data-asteapta]::after { animation-duration: 3s; }
  }

  /* variantele de CTA din bara: scurt pe mobil, complet pe desktop.
     Regulile stau DUPA .btn, altfel display:inline-flex de acolo le anuleaza. */
  .cta-scurt { display: inline-flex; }
  .cta-lung  { display: none; }

  /* ---------- hero ---------- */
  .hero {
    position: relative;
    isolation: isolate;
    padding: 112px 0 60px;
    color: #fff;
    background:
      radial-gradient(1000px 460px at 88% -12%, rgba(221,37,144,.60), transparent 62%),
      radial-gradient(760px 520px at 2% 108%,  rgba(122,139,240,.45), transparent 66%),
      linear-gradient(168deg, #16205F 0%, #253699 46%, #2E2E9E 76%, #3D2585 100%);
  }
  /* granulatie fina, ca degradeul sa nu aiba benzi vizibile */
  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .35;
    background-image: radial-gradient(rgba(255,255,255,.10) .5px, transparent .5px);
    background-size: 3px 3px;
  }
  /* Grila fina peste albastru, ca hero-ul sa nu fie doar o culoare: linii de
     foaie de grafic, mai vizibile in dreapta-sus, langa raportul mic, si
     stinse spre margini, ca titlul din stanga sa ramana curat. Aceeasi pe
     toate paginile cu hero (ales de Andrei, 28.10.2026). */
  .hero::before,
  .fhero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
      linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px);
    background-size: 40px 40px;
    -webkit-mask-image: radial-gradient(ellipse 80% 90% at 70% 35%, #000 30%, transparent 80%);
    mask-image: radial-gradient(ellipse 80% 90% at 70% 35%, #000 30%, transparent 80%);
  }
  .hero-grid { display: grid; gap: 34px; }

  /* Alegerea sta in subsolul cardului, in locul randului care descria
     raportul: acolo ajunge exact dupa ce omul a vazut ce primeste.

     Cele doua butoane au aceeasi greutate. Unul plin langa unul conturat nu
     citeste ca doua actiuni, ci ca o stare — gramatica unui comutator, cu
     selectat si neselectat. Aici sunt doua drumuri egale.

     Pe toata latimea, unul sub altul: etichetele poarta si verbul, si publicul,
     iar la 390 de pixeli o jumatate de rand le-ar rupe pe trei randuri.

     Magenta la amandoua, nu albastru. Pe un card alb, albastrul se pierde in
     restul paginii; magenta e culoarea cu care site-ul spune "apasa aici",
     aceeasi ca pe butonul din antet. */
  .cta-pereche {
    display: grid;
    gap: 9px;
  }
  .cta-pereche .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
    line-height: 1.25;
  }
  /* In cardul din hero, perechea e subsolul cardului. */
  .excerpt .cta-pereche {
    padding: 15px 16px 17px;
    border-top: 1px solid var(--line);
    background: var(--mist);
  }
  .excerpt .cta-pereche .btn { padding: 14px; font-size: 1rem; }
  /* In blocurile finale, unde e loc, stau una langa alta. */
  @media (min-width: 620px) {
    .cta-final .cta-pereche {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      max-width: 640px;
      margin-inline: auto;
    }
  }
  .cta-final .cta-pereche { margin-top: 24px; }
  .excerpt-cta .btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -10px rgba(14,19,48,.55); }
  @media (prefers-reduced-motion: reduce) {
    .excerpt-cta .btn:hover { transform: none; }
  }
  .hero .eyebrow { color: rgba(255,255,255,.62); }
  .hero .lede { color: rgba(255,255,255,.80); }
  .hero .hero-meta { color: rgba(255,255,255,.72); }
  .hero .dot { background: #63E6A8; }

  h1 { font-size: var(--step-4); }
  h1 .accent {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    letter-spacing: -.01em;
    color: #FFB3DC;
  }
  .lede {
    margin-top: 18px;
    font-size: var(--step-1);
    color: var(--ink-soft);
    max-width: 34ch;
  }
  .hero-meta {
    margin-top: 22px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    font-size: var(--step--1);
    color: var(--ink-soft);
  }
  .hero-meta span { display: inline-flex; align-items: center; gap: 7px; }
  .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--good); }

  /* ---------- report excerpt ---------- */
  .excerpt {
    background: var(--card);
    /* Cardul isi pune propria culoare de text. Fara ea, mosteneste albul din
       hero si numele bancilor devin alb pe alb — se vedeau doar logo-urile. */
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 30px 60px -24px rgba(6,10,40,.6), 0 2px 6px rgba(6,10,40,.25);
    overflow: hidden;
  }
  .excerpt-top { background: color-mix(in srgb, var(--blue) 88%, #000); }
  .excerpt-top {
    background: var(--blue);
    color: #fff;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
  }
  .excerpt-top h3 { font-size: 1.06rem; color: #fff; }
  /* Sigla din coltul cardului: semneaza exemplul, ca sa se vada de la
     prima privire al cui e raportul. */
  .excerpt-mark { height: 20px; width: auto; flex: none; opacity: .9; }
  /* „Exemplu de raport”: sa se vada din prima ca e un exemplu, nu raportul
     omului. Galben, ca banda din rapoartele-model; nu magenta — aceea e
     culoarea cu care site-ul spune „apasa aici”, iar eticheta nu se apasa. */
  .excerpt-top .sub {
    display: inline-block;
    margin-top: 7px;
    padding: 3px 10px;
    border-radius: 999px;
    background: #FFD84D;
    color: #3A2A00;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    line-height: 1.5;
    cursor: default;
    box-shadow: 0 0 0 1px rgba(255,216,77,.7), 0 0 14px 3px rgba(255,216,77,.7);
  }
  @media (prefers-reduced-motion: no-preference) {
    .excerpt-top .sub { animation: exemplu-straluceste 2.4s ease-in-out infinite; }
  }
  @keyframes exemplu-straluceste {
    0%, 100% { box-shadow: 0 0 0 1px rgba(255,216,77,.6), 0 0 6px 1px rgba(255,216,77,.4); }
    50%      { box-shadow: 0 0 0 1px rgba(255,216,77,.95), 0 0 20px 5px rgba(255,216,77,.9); }
  }
  /* Randurile impart coloanele: pilulele au aceeasi latime pe toate randurile,
     cat cel mai lung text din limba respectiva. */
  .rowset { display: grid; grid-template-columns: auto 1fr auto; }
  .row {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    align-items: center;
    gap: 10px;
    padding: 13px 18px;
    border-top: 1px solid var(--line);
  }
  .row:first-child { border-top: 0; }
  .blogo {
    width: 26px; height: 26px;
    object-fit: contain;
    flex: none;
    /* Colturi usor rotunjite: siglele cu fundal plin, ca cea a Raiffeisen,
       ar aparea altfel ca un patrat taiat cu cutitul. */
    border-radius: 5px;
  }
  .bank { font-weight: 600; font-size: .96rem; }
  .row .detail {
    font-size: .8rem;
    color: var(--ink-soft);
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
  }
  /* Sumele din card, incetosate: se vede ca e ceva acolo, nu ce anume. */
  .row .detail-ascuns {
    filter: blur(4px);
    -webkit-user-select: none;
    user-select: none;
  }
  /* Sub randuri, cate banci mai sunt in raport, cu un lacat in fata. */
  .excerpt-lacat {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 0;
    padding: 11px 18px;
    border-top: 1px solid var(--line);
    font-size: .82rem;
    font-weight: 600;
    color: var(--ink-soft);
  }
  .excerpt-lacat svg { flex: none; color: var(--blue); }
  .pill {
    font-family: var(--sans);
    font-size: .72rem;
    font-weight: 700;
    padding: 5px 11px;
    border-radius: 999px;
    white-space: nowrap;
  }
  .pill-good { background: var(--good-bg); color: var(--good); }
  .pill-warn { background: var(--warn-bg); color: var(--warn); }
  /* Eligibilitatea si, sub ea, Detalii — ca in raportul adevarat. */
  .row-pills { display: flex; flex-direction: column; align-items: stretch; gap: 5px; }
  .row-pills .pill { text-align: center; }
  .pill-det { background: var(--mist); color: var(--blue); }
  /* „Detalii” e buton: arata spre butoanele de generare din subsolul cardului. */
  button.pill-det { border: 0; line-height: inherit; cursor: pointer; transition: background .15s ease; }
  button.pill-det:hover, button.pill-det:focus-visible { background: color-mix(in srgb, var(--blue) 14%, var(--mist)); }
  button.pill-det:focus-visible { outline: 3px solid var(--magenta); outline-offset: 2px; }
  /* Butoanele de generare, dupa „Detalii”: pulseaza de trei ori. Inelul si
     umflarea (1,5%) raman impreuna sub 15px, cat e marginea subsolului, ca
     sa nu le taie cardul nici pe tableta, unde butonul e cel mai lat. */
  @keyframes cta-puls {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--magenta) 75%, transparent); transform: scale(1); }
    30% { transform: scale(1.015); }
    100% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--magenta) 0%, transparent); transform: scale(1); }
  }
  .btn.cta-atentie { animation: cta-puls .7s ease-out 3; }
  @media (prefers-reduced-motion: reduce) {
    .btn.cta-atentie { animation: none; outline: 3px solid var(--magenta); outline-offset: 3px; }
  }
  .excerpt-foot {
    padding: 12px 18px;
    border-top: 1px solid var(--line);
    background: var(--mist);
    font-size: .78rem;
    color: var(--ink-soft);
  }

  /* ---------- paths ---------- */
  /* Sectiunile alterneaza gri si alb. Albul cade pe momentele in care omul
     trebuie sa se uite la ceva anume — alegerea PF/PJ, continutul raportului —
     iar griul leaga restul. */
  .paths { padding: 44px 0; background: var(--card); }
  .paths .path-grid { position: relative; z-index: 2; }
  .path-grid { display: grid; gap: 18px; }
  .path {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 18px;
    background: var(--blue);
    color: #fff;
    border: 1px solid transparent;
    border-radius: var(--radius);
    padding: 26px 24px 24px;
    text-decoration: none;
    overflow: hidden;
    box-shadow: 0 18px 40px -22px rgba(14,19,48,.5);
    transition: transform .18s ease, box-shadow .18s ease;
  }
  /* Fluxul pentru firme, in nuanta mai grava a aceleiasi familii: doua
     carduri albastre care nu se confunda. */
  .path-pj { background: var(--blue-deep); }
  /* Dunga de sus apare la hover: cardul raspunde, fara sa tipe in repaus. */
  .path::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--magenta);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .22s ease;
  }
  .path:hover::before { transform: scaleX(1); }
  .path:hover { transform: translateY(-3px); box-shadow: 0 26px 54px -24px rgba(14,19,48,.62); }

  .path-head { display: flex; align-items: flex-start; gap: 14px; }
  .path-icon {
    flex: none;
    width: 46px; height: 46px;
    border-radius: 12px;
    display: grid; place-items: center;
    background: rgba(255,255,255,.14);
    color: #fff;
  }
  .path-icon svg { width: 25px; height: 25px; }
  /* Fluxul pentru firme primeste nuanta mai grava a aceleiasi familii —
     diferentiere fara sa introducem o culoare noua in pagina. */
  .path h3 { font-size: var(--step-1); color: #fff; }
  .path .who { color: rgba(255,255,255,.76); font-size: .92rem; margin-top: 4px; }

  .path-types-label {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255,255,255,.6);
    margin-bottom: -6px;
  }
  /* Lista devine "ce primesti", nu o insiruire: bifa spune asta singura. */
  .path-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
  .path-list li {
    position: relative;
    padding-left: 27px;
    font-size: .95rem;
    color: rgba(255,255,255,.94);
  }
  .path-list li::before {
    content: "";
    position: absolute;
    left: 0; top: .18em;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: rgba(255,255,255,.15);
  }
  .path-list li::after {
    content: "";
    position: absolute;
    left: 6px; top: .42em;
    width: 5px; height: 9px;
    border: solid #63E6A8;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }

  .path-foot {
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,.2);
  }
  .path .price { color: #fff; }
  .path .price small { color: rgba(255,255,255,.72); }
  .path .no-strings { color: rgba(255,255,255,.72); }
  /* Garantia, in subsolul cardului de alegere. Verdele deschis ar cadea pe
     albastru, asa ca semnul imprumuta verdele folosit deja in hero. */
  .garantie-card { display: flex; align-items: flex-start; gap: 7px; }
  .garantie-card .garantie-semn { color: #63E6A8; flex: 0 0 auto; margin-top: 1px; }
  .no-strings {
    font-size: .82rem;
    color: var(--ink-soft);
    margin-top: 6px;
  }
  .path .go { display: flex; justify-content: center; align-items: center; gap: 8px; width: 100%; margin-top: 16px; }
  .price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-family: var(--sans);
    font-weight: 800;
    font-size: var(--step-2);
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
  }
  .price small { font-size: .8rem; font-weight: 600; color: var(--ink-soft); letter-spacing: 0; }
  /* Sub pret: pretul impartit la bancile analizate. */
  .pret-banca { margin-top: 4px; font-size: .82rem; color: var(--ink-soft); }
  .path .pret-banca { color: rgba(255,255,255,.72); }
  /* Ca randul garantiei: semn mic inaintea textului. Alb, nu verde, ca sa nu
     para a doua garantie. */
  .pret-banca-card { display: flex; align-items: flex-start; gap: 7px; }
  .pret-banca-card .pret-banca-semn { display: grid; place-items: center; flex: 0 0 auto; margin-top: 1px; color: #fff; }


  /* ---------- sections ---------- */
  section.block { padding: 60px 0; }
  .head { max-width: 52ch; margin-bottom: 34px; }
  .head h2 { font-size: var(--step-3); }
  .head p { margin-top: 14px; color: var(--ink-soft); font-size: var(--step-1); }

  .steps { display: grid; gap: 22px; counter-reset: s; }
  .step { display: flex; gap: 16px; align-items: flex-start; }
  .step .num {
    counter-increment: s;
    flex: none;
    width: 34px; height: 34px;
    border-radius: 9px;
    background: var(--blue);
    color: #fff;
    display: grid; place-items: center;
    font-family: var(--sans);
    font-weight: 700;
    font-size: .92rem;
  }
  .step .num::before { content: counter(s); }
  .step h3 { font-size: var(--step-1); }
  .step p { color: var(--ink-soft); margin-top: 5px; font-size: .96rem; }

  .feature-grid { display: grid; gap: 14px; }
  /* Sectiunea e alba, deci cardurile se vad prin gri: pe alb pe alb ar fi
     ramas doar chenarul. */
  .feature {
    background: var(--mist);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 20px;
  }
  .feature h3 { font-size: 1.05rem; }
  .feature p { color: var(--ink-soft); font-size: .93rem; margin-top: 6px; }
  /* Ce contine raportul: puncte cu iconita, fara cutii. Langa ele, un singur
     card albastru cu rapoartele-model — indemnul cel mai important al sectiunii. */
  .continut-coloane { display: grid; gap: 40px; }
  .avantaje { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; }
  .avantaj { display: flex; gap: 14px; align-items: flex-start; }
  .avantaj-semn {
    flex: none; width: 42px; height: 42px; border-radius: 12px;
    display: grid; place-items: center;
    background: var(--mist); color: var(--blue);
  }
  .avantaj h3 { font-size: 1.02rem; }
  .avantaj p { margin-top: 4px; color: var(--ink-soft); font-size: .92rem; line-height: 1.55; }

  .continut-modele {
    background: var(--blue-deep); color: #fff;
    border-radius: var(--radius); box-shadow: var(--shadow);
    padding: 22px 22px 24px; overflow: hidden;
  }
  .continut-modele h3 { font-size: var(--step-1); color: #fff; }
  .modele-lede { margin: 8px 0 4px; color: rgba(255,255,255,.76); font-size: .92rem; }
  .modele-grup {
    margin: 18px 0 8px; font-size: .72rem; font-weight: 700;
    letter-spacing: .11em; text-transform: uppercase; color: rgba(255,255,255,.6);
  }
  .modele-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
  .model-rand {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 11px 14px; border-radius: 10px;
    background: rgba(255,255,255,.08); color: #fff;
    text-decoration: none; font-weight: 600; font-size: .95rem;
    transition: background .16s ease;
  }
  .model-rand:hover { background: rgba(255,255,255,.16); }
  .model-rand:focus-visible { outline: 3px solid #FFB3DC; outline-offset: 2px; }
  .model-rand .sageata { color: #FFB3DC; transition: transform .16s ease; }
  .model-rand:hover .sageata { transform: translateX(3px); }

  /* Exemplele, grupate pe flux — aceeasi impartire ca in sectiunea de
     alegere de mai sus. Fiecare grup e un panou propriu, ca ochiul sa nu
     caute prin sase carduri identice. */
  .model-groups { display: grid; gap: 20px; }
  .model-group {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px;
  }
  .model-group-title {
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin: 0 0 14px;
  }
  .models { display: grid; gap: 9px; }
  .model {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 15px;
    background: var(--mist);
    border: 1px solid transparent;
    border-radius: 10px;
    text-decoration: none;
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
  }
  .model:hover { border-color: var(--blue); background: var(--card); transform: translateX(2px); }
  .model-text { display: flex; flex-direction: column; gap: 1px; }
  .model .t { font-weight: 600; font-size: .97rem; }
  .model .k { font-size: .78rem; color: var(--ink-soft); }
  .model .arrow { color: var(--blue); font-weight: 700; transition: transform .16s ease; }
  .model:hover .arrow { transform: translateX(3px); }

  details.faq {
    border-bottom: 1px solid var(--line);
    padding: 16px 0;
  }
  details.faq summary {
    cursor: pointer;
    font-family: var(--sans);
    font-weight: 600;
    font-size: 1.03rem;
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 16px;
  }
  details.faq summary::-webkit-details-marker { display: none; }
  details.faq summary { align-items: center; }
  details.faq summary::after {
    content: "+"; flex: none; width: 28px; height: 28px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--card); border: 1px solid var(--line);
    color: var(--blue); font-weight: 700; line-height: 1;
  }
  details.faq[open] summary::after { content: "–"; background: var(--blue); border-color: var(--blue); color: #fff; }
  details.faq summary:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; border-radius: 6px; }
  details.faq p { margin-top: 10px; color: var(--ink-soft); font-size: .96rem; max-width: 68ch; line-height: 1.6; }
  details.faq p a, .faq-coloane .head a { color: var(--blue); font-weight: 600; }
  /* Intrebari frecvente, pe gri: randuri despartite de linii, fara cutii. */
  .faq-coloane { display: grid; gap: 24px; }
  .faq-lista { border-top: 1px solid var(--line); }

  /* Nu mai are card propriu: e parte din aceeasi zona inchisa ca pietele,
     despartita doar printr-o linie. Un card albastru pe fundal albastru ar
     fi fost o cutie in cutie. */
  /* Chemarea finala sta acum pe gri, nu pe albastru: culorile ei vin din
     paleta obisnuita, ca oriunde altundeva pe fundal deschis. */
  .cta-final {
    padding: 48px 0 52px;
    text-align: center;
  }
  .cta-final h2 { color: var(--ink); font-size: var(--step-3); }
  .cta-final p { color: var(--ink-soft); margin-top: 12px; max-width: 46ch; margin-inline: auto; }
  .cta-final .btns { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

  footer {
    margin-top: 0;
    padding: 46px 0 52px;
    font-size: .9rem;
    background: linear-gradient(168deg, #16205F 0%, #1E2A78 100%);
    color: rgba(255,255,255,.72);
  }
  footer .logo img { height: 32px; }
  footer .foot-links a { color: rgba(255,255,255,.82); }
  footer .foot-links a:hover { color: #fff; }
  footer .fine { color: rgba(255,255,255,.58); }
  /* Conturile de retele: patrate translucide pe albastru, care se aprind la
     trecerea cursorului. Pictogramele sunt inline, deci mostenesc culoarea. */
  .foot-social { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
  .foot-social a {
    display: grid; place-items: center;
    width: 38px; height: 38px;
    border-radius: 11px;
    background: rgba(255,255,255,.09);
    border: 1px solid rgba(255,255,255,.16);
    color: rgba(255,255,255,.82);
    transition: background .16s ease, color .16s ease, transform .16s ease;
  }
  .foot-social a:hover {
    background: var(--magenta);
    border-color: var(--magenta);
    color: #fff;
    transform: translateY(-2px);
  }
  .foot-social a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
  .foot-social svg { width: 18px; height: 18px; }

  @media (prefers-reduced-motion: reduce) {
    .foot-social a:hover { transform: none; }
  }

  .foot-grid { display: grid; gap: 22px; }
  .foot-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
  /* Linkurile catre autoritati sunt obligatorii, dar nu sunt navigatie:
     stau mai discret, sub cele proprii. */
  .foot-authorities { margin-top: 12px; font-size: .82rem; }
  .foot-authorities a { color: rgba(255,255,255,.62); }
  .foot-links a { text-decoration: none; }
  .foot-links a:hover { color: var(--blue); }
  .fine { font-size: .8rem; line-height: 1.55; }
  .company {
    font-style: normal;
    font-size: .8rem;
    line-height: 1.7;
    color: rgba(255,255,255,.62);
    margin-top: 16px;
  }
  .company strong { color: rgba(255,255,255,.82); font-weight: 600; }


  /* ---------- banci ---------- */
  .banks { padding: 26px 0 30px; background: var(--mist); border-bottom: 1px solid var(--line); }
  /* Pe paginile de vanzare, sectiunea bancilor e alba: sub ea vine sectiunea
     raportului, care e gri, iar doua griuri lipite s-ar citi ca unul singur. */
  .banks-alb { background: var(--card); }
  .bank-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    justify-items: stretch;
    gap: 16px 10px;
  }
  /* Cand ultima sigla ramane singura pe randul ei — 13 banci in doua
     coloane — o intindem peste tot randul, ca sa stea centrata in loc sa
     atarne in stanga. Regula se descurca cu orice numar de banci, deci
     ramane valabila si daca lista se schimba. */
  .bank-row > .bank-chip:last-child:nth-child(odd) { grid-column: 1 / -1; }

  @media (min-width: 520px) {
    .bank-row { grid-template-columns: repeat(3, 1fr); }
    /* Pe trei coloane, "singura pe rand" inseamna altceva. */
    .bank-row > .bank-chip:last-child:nth-child(odd) { grid-column: auto; }
    .bank-row > .bank-chip:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
  }
  .bank-row img {
    height: 26px;
    width: auto;
    max-width: 116px;
    object-fit: contain;
  }
  /* Banda partenerilor de date, sub cea a bancilor. Deliberat mai mica si
     mai discreta: bancile sunt promisiunea, furnizorii sunt dovada. */
  .partners {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
  }
  /* Acelasi registru cu randul partenerilor, dar deasupra siglelor: aici
     titlul vine inaintea a treisprezece logo-uri, nu langa doua. */
  .banks-label {
    font-size: .82rem;
    color: var(--ink-soft);
    text-align: center;
    margin-bottom: 18px;
  }
  .partners-label { font-size: .82rem; color: var(--ink-soft); text-align: center; }
  .partners-row { display: inline-flex; align-items: center; gap: 26px; flex-wrap: wrap; justify-content: center; }
  .partners-row img { height: 21px; width: auto; display: block; }
  /* Termene are sigla mai lata; o aducem la aceeasi greutate optica. */
  .partners-row img[alt="Termene"] { height: 19px; }
  .partner-mark { height: 15px; width: auto; vertical-align: -2px; margin-left: 6px; }
  .partner-logos { display: flex; align-items: center; gap: 10px; flex: none; }
  .partner-logos .partner-mark { margin-left: 0; }
  /* Pe telefon siglele stau una sub alta, ca textul de langa ele sa aiba loc. */
  @media (max-width: 640px) {
    .partner-logos { flex-direction: column; align-items: flex-start; gap: 8px; }
  }
  @media (max-width: 640px) {
    .partners { flex-direction: column; gap: 14px; margin-top: 20px; padding-top: 18px; }
    .partners-row { gap: 20px; }
    .partners-row img { height: 18px; }
  }

  .bank-chip {
    display: grid;
    place-items: center;
    width: 100%;
    padding: 6px 8px;
    border-radius: 9px;
  }


  /* ---------- partener date financiare ---------- */
  .partner {
    display: flex;
    align-items: center;
    gap: 9px;
    padding-top: 14px;
    margin-top: 2px;
    border-top: 1px dashed rgba(255,255,255,.26);
    font-size: .82rem;
    color: rgba(255,255,255,.76);
    line-height: 1.4;
  }
  .risco { height: 15px; width: auto; flex: none; color: #0A62CB; }
  .risco-inline { height: 13px; width: auto; vertical-align: -1px; color: #0A62CB; }


  /* ---------- plata securizata ---------- */
  /* Cele doua bucati stau pe acelasi rand cat incap (desktop) si trec una sub
     alta cand nu (telefon). Fara punct intre ele: le desparte spatiul. */
  .pay-note {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-top: 22px;
    font-size: .86rem;
    color: var(--ink-soft);
    text-align: center;
  }
  .pay-note-rand { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 8px; }
  /* Desktop: nota si pictogramele metodelor de plata pe acelasi rand. Daca nu
     incap, trec pe randul urmator in loc sa iasa din pagina. */
  @media (min-width: 900px) {
    .plata-bloc { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 18px; margin-top: 22px; }
    .plata-bloc .pay-note, .plata-bloc .metode-plata { margin-top: 0; }
  }
  .stripe-mark { height: 19px; width: auto; vertical-align: -4px; }

  /* Metodele de plata: pictograme cand marcile oficiale exista, cuvinte pana
     atunci. Amandoua variantele stau pe acelasi rand cu restul notei. */
  .metode-plata {
    display: flex; align-items: center; justify-content: center;
    gap: 14px; flex-wrap: wrap; margin-top: 12px;
  }
  /* Marcile oficiale au proportii diferite; le aducem la aceeasi greutate
     optica dupa inaltime, nu dupa latime. */
  .metode-plata img { height: 20px; width: auto; display: block; }
  .metoda-text {
    font-size: .74rem;
    color: var(--ink-soft);
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 2px 7px;
    background: var(--card);
    white-space: nowrap;
  }

  /* ---------- presa ---------- */
  .press { background: var(--mist); border-block: 1px solid var(--line); padding: 40px 0; }
  .press-in { display: grid; gap: 20px; align-items: center; }
  .press blockquote {
    margin: 0;
    font-family: var(--sans);
    font-weight: 600;
    font-size: var(--step-2);
    line-height: 1.3;
    letter-spacing: -.02em;
    text-wrap: balance;
  }
  .press .src { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
  .jn { height: 46px; width: auto; border-radius: 4px; display: block; }
  .press a.read { font-weight: 600; color: var(--blue); text-decoration: none; font-size: .92rem; }
  .press a.read:hover { text-decoration: underline; }

  /* ---------- piete ---------- */
  /* ---------- inchiderea paginii ---------- */
  /* Pietele si indemnul final, o singura zona inchisa care curge in subsol.
     Se termina exact pe culoarea cu care incepe subsolul, ca sa nu apara o
     cusatura intre ele. */
  /* Grupul european se inchide la culoare si curge in subsol: pe deschis ar
     arata ca inca o lista de continut, desi rolul lui e de prestigiu. Cele
     doua degradeuri se intalnesc pe aceeasi culoare, deci nu se vede custura. */
  .markets-inchis {
    background: linear-gradient(180deg, #1B2780 0%, #16205F 100%);
    color: #fff;
  }
  .markets-inchis .head h2 { color: #fff; }
  .markets-inchis .head p { color: rgba(255,255,255,.76); }
  .markets-inchis .eyebrow { color: rgba(255,255,255,.6); }
  .markets-inchis .market { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.18); }
  .markets-inchis a.market:hover { border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.11); }
  .markets-inchis .market .dm { color: rgba(255,255,255,.66); }
  .markets-inchis .market .visit { color: #fff; }
  .markets-inchis .st-on { background: rgba(99,230,168,.16); color: #63E6A8; }
  .markets-inchis .st-soon { background: rgba(255,255,255,.08); color: rgba(255,255,255,.66); border-color: rgba(255,255,255,.16); }

  .bg-gri { background: var(--mist); }
  .bg-alb { background: var(--card); }
  .bg-gri-sus { border-top: 1px solid var(--line); }
  .bg-gri-jos { border-bottom: 1px solid var(--line); }

  .markets { padding: 0; }
  .markets .head { margin-bottom: 24px; }
  .market-row { display: grid; gap: 10px; }
  /* Doar pietele active sunt legaturi; cele „în curând” nu se misca la hover. */
  a.market:hover { border-color: var(--blue); transform: translateY(-1px); }
  .market {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    /* O piata activa duce catre site-ul ei, deci arata si se poarta a link. */
    text-decoration: none;
    color: inherit;
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 11px;
  }
  /* Steagurile vin in raport 4:3, ca in setul din care le-am luat: intinse
     la 3:2 ar strica proportiile fiecarui drapel. */
  .market .flag {
    width: 28px;
    height: 21px;
    border-radius: 3px;
    display: block;
    flex: none;
    box-shadow: inset 0 0 0 1px rgba(14, 19, 48, .12);
  }
  .market.soon .flag { opacity: .5; filter: saturate(.55); }
  .market .nm { font-weight: 600; }
  .market .dm { font-size: .8rem; color: var(--ink-soft); }
  .market .st {
    margin-left: auto;
    font-family: var(--sans);
    font-size: .7rem;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 999px;
    white-space: nowrap;
  }
  .market .visit {
    font-size: .8rem;
    font-weight: 600;
    color: var(--blue);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }
  .market .visit-arrow { transition: transform .16s ease; }
  a.market:hover .visit-arrow { transform: translateX(3px); }
  .st-on { background: var(--good-bg); color: var(--good); }
  .st-soon { background: var(--mist); color: var(--ink-soft); border: 1px solid var(--line); }

  @media (min-width: 780px) {
    .press-in { grid-template-columns: 1fr auto; gap: 40px; }
    .jn { height: 76px; }
    .market-row { grid-template-columns: repeat(5, 1fr); }
    .market { flex-direction: column; align-items: flex-start; gap: 9px; padding: 18px; }
    .market .st { margin-left: 0; }
    .market .visit { margin-left: auto; }
  }

  @media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
  }

  /* ---------- desktop ---------- */
  @media (min-width: 780px) {
    nav.links { display: flex; }
    .menu-btn, .panel { display: none !important; }
    .cta-scurt { display: none; }
    .cta-lung { display: inline-flex; }
    .hero { padding: 150px 0 72px; }
    .hero-grid { grid-template-columns: 1.05fr .95fr; align-items: center; gap: 54px; }
    .banks { padding: 42px 0 48px; }
    .bank-row {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 18px 40px;
    }
    .bank-chip { width: auto; padding: 8px 12px; }
    .bank-row img { height: 30px; max-width: 138px; }
    .paths { padding-top: 54px; }
    .path-grid { grid-template-columns: 1fr 1fr; }
    .steps { grid-template-columns: repeat(3, 1fr); gap: 30px; }
    .step { flex-direction: column; }
    /* Trei carduri stau pe un rand; patru se aseaza doua cate doua, ca sa nu
       ramana unul singur pe randul al doilea. */
    .feature-grid { grid-template-columns: repeat(3, 1fr); }
    .feature-grid:has(> :nth-child(4)) { grid-template-columns: repeat(2, 1fr); }
    .model-groups { grid-template-columns: 1fr 1fr; align-items: start; }
    .cta-final { padding: 64px 0 72px; margin-top: 72px; }
    .foot-grid { grid-template-columns: 1.4fr 1fr; align-items: start; }
    section.block { padding: 82px 0; }
  }


  /* ================= pagina persoane fizice ================= */

/* ================= pagina persoane fizice ================= */

  .fhero {
    /* Grila din .fhero::before sta sub continut, nu peste el. */
    position: relative;
    isolation: isolate;
    background:
      radial-gradient(900px 420px at 88% -20%, rgba(221,37,144,.5), transparent 62%),
      linear-gradient(168deg, #16205F 0%, #253699 55%, #3D2585 100%);
    color: #fff;
    /* antetul e fix si acopera 66px — hero-ul incepe sub el */
    padding: 112px 0 52px;
  }

.fhero .eyebrow { color: rgba(255,255,255,.62); }

/* Titlul paginilor de vanzare urca o treapta pe scala, la fel ca cel de pe
   prima pagina: e primul lucru care se citeste si singurul care are voie sa
   fie mare. */
.fhero h1 { font-size: var(--step-4); }

.fhero .accent { color: #FFB3DC; }

.fhero .lede { color: rgba(255,255,255,.82); margin-top: 14px; max-width: 52ch; }

.fhero-cta { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }

.fhero-note { font-size: .84rem; color: rgba(255,255,255,.66); }

/* Tipurile de credit, sub lede. Pastile discrete: numesc, nu striga. Stau
   fara eticheta — trei substantive puse la rand se inteleg singure. */
.fhero-tipuri {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px; margin-top: 18px;
}
.fhero-tipuri-et {
  font-size: .8rem; letter-spacing: .06em; text-transform: uppercase;
  font-weight: 700; color: rgba(255,255,255,.6); margin-right: 2px;
}
/* Sunt legaturi acum, nu text: coboara la formular si aleg tipul acolo.
   Fara subliniere, dar cu un raspuns la atingere — daca arata a buton,
   trebuie si sa se poarte ca unul. */
.fhero-tip {
  display: inline-block;
  font-size: .86rem; font-weight: 600; color: #fff;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px; padding: 5px 12px;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease;
}
.fhero-tip:hover, .fhero-tip:focus-visible {
  background: rgba(255,255,255,.20);
  border-color: rgba(255,255,255,.45);
}

/* Videoul de prezentare: un buton in hero, pe fundalul inchis, care il
   deschide peste pagina (vezi partials/video-prezentare). */
.video-buton {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 22px;
  padding: 6px 16px 6px 6px;
  font: inherit; font-size: .95rem; font-weight: 600; color: #fff;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.26);
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.video-buton:hover, .video-buton:focus-visible { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.5); }
.video-buton:focus-visible { outline: 3px solid var(--magenta); outline-offset: 2px; }
.video-buton-semn {
  display: grid; place-items: center; flex: none;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--magenta); color: #fff;
}
.video-buton-semn svg { margin-left: 2px; }
/* Fereastra: doar videoul, pe fundal intunecat; clicul pe fundal o inchide. */
.video-dialog {
  padding: 0; border: 0; background: transparent;
  max-width: none; max-height: none; overflow: visible;
}
.video-dialog::backdrop { background: rgba(6,10,40,.88); }
/* Browserele fara <dialog> (Safari sub 15.4): ascuns pana la deschidere,
   apoi peste pagina, ca un dialog adevarat. */
.video-dialog:not([open]) { display: none; }
.video-dialog[open] {
  position: fixed; inset: 0; margin: auto; z-index: 1000;
  width: -webkit-fit-content; width: fit-content;
  height: -webkit-fit-content; height: fit-content;
}
.video-dialog video {
  display: block;
  height: min(88vh, 960px); width: auto; max-width: 92vw;
  aspect-ratio: 9 / 16;
  border-radius: 14px;
  background: #000;
}
.video-inchide {
  position: absolute; top: 0; right: -52px;
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  border: 0; cursor: pointer;
  background: rgba(255,255,255,.14); color: #fff;
}
.video-inchide:hover, .video-inchide:focus-visible { background: rgba(255,255,255,.26); }
.video-inchide:focus-visible { outline: 3px solid var(--magenta); outline-offset: 2px; }
/* Cat e deschis, pagina din spate nu se mai deruleaza. */
html:has(.video-dialog[open]) { overflow: hidden; }
/* Pe telefon, videoul umple ecranul, ca in aplicatie, sub o fasie in care
   sta butonul de inchidere: peste video ar acoperi butonul de sunet al
   playerului de pe iPhone, din coltul de sus. */
@media (max-width: 640px) {
  .video-dialog { padding-top: 56px; }
  .video-dialog video { width: 100vw; height: calc(100vh - 56px); height: calc(100dvh - 56px); max-width: 100vw; border-radius: 0; object-fit: contain; }
  .video-inchide { top: 8px; right: 12px; }
}

/* Aceeași promisiune, lângă butonul de plată — locul unde omul ezită. */
.garantie-plata {
  margin-top: 12px; padding: 11px 13px;
  background: var(--good-bg); border-radius: 10px;
  color: #0B5B3B;
}
.garantie-plata strong { display: block; font-weight: 600; }
.garantie-plata a { color: #0B5B3B; }

/* Garanția de eligibilitate, în hero. Pe fundal albastru se așază ca o
   insignă discretă: promisiunea e tare, nu are nevoie și de culoare tare. */
.garantie {
  display: flex; align-items: center; gap: 9px;
  text-decoration: none;
  font-size: .88rem; line-height: 1.35;
  transition: background .15s, border-color .15s;
}
.garantie-semn { display: grid; place-items: center; flex: 0 0 auto; }
.garantie-text { font-weight: 600; }

/* Pe albastru, in hero: o insigna discreta. Promisiunea e destul de tare
   singura, nu are nevoie si de culoare tare. */
.garantie--inchis {
  display: inline-flex;
  margin-top: 20px; padding: 9px 14px 9px 11px;
  border: 1px solid rgba(255,255,255,.28); border-radius: 999px;
  background: rgba(255,255,255,.07);
  color: #fff;
}
.garantie--inchis:hover, .garantie--inchis:focus-visible {
  background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.45);
}
.garantie--inchis .garantie-semn { color: #63E6A8; }

/* Pe alb, ca banda care inchide cardul cu exemplul de raport. Ajunge exact
   unde omul tocmai a vazut ce primeste. */

@media (max-width: 560px) {
  .garantie--inchis { align-items: flex-start; border-radius: 14px; padding: 10px 13px; }
  .garantie { align-items: flex-start; }
  .garantie-semn { margin-top: 2px; }
}

/* Creditul fotografiei si intrebarile frecvente de sub articol. */
.articol-credit { margin-top: 8px; font-size: .78rem; color: var(--muted, #5B6478); }
.articol-intrebari { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--line); }
.articol-intrebari h3 { margin-top: 20px; }

/* Sectiunea raportului: nu descrie documentul, il arata. Cate un card pe tip
   de credit, fiecare deschizand un raport intreg. */
.raport-sec { background: var(--mist); border-block: 1px solid var(--line); }

/* Cardurile sunt argumentul sectiunii, nu o nota de subsol: arata a butoane
   si ocupa latimea, nu un rand subtire de legaturi. */
.raport-wrap { display: grid; gap: 26px; margin-top: 26px; }

/* Doua jumatati care fac lucruri diferite: una arata raportul, cealalta il
   deschide. Fara titlul lor se citeau ca un singur bloc. */
.raport-parte h3 { font-size: 1.08rem; letter-spacing: -.01em; }
.raport-parte-lede { color: var(--ink-soft); font-size: .92rem; margin: 5px 0 15px; max-width: 46ch; }

/* Pe telefon o linie desparte jumatatile; pe ecran lat, in media query, ea
   trece intre coloane. */
.raport-parte--deschide { border-top: 1px solid var(--line); padding-top: 24px; }

/* Cand captura inca lipseste, jumatatea ramasa nu mai are de ce sa se
   desparta de nimic: ia toata latimea, fara linie. */
.raport-parte--deschide:only-child { border-top: 0; padding-top: 0; }

/* Captura se opreste inainte sa manance ecranul; degradeul de jos spune ca
   documentul continua. */
.raport-wrap .model-frame img { max-height: 460px; object-fit: cover; object-position: top; }
.raport-wrap .model-fade { background: linear-gradient(to bottom, transparent, var(--card)); }

.modele { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.modele > li { display: flex; }
.modele a, .model-curand {
  display: flex; flex-direction: column; gap: 5px;
  width: 100%;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  text-decoration: none; color: inherit;
  box-shadow: var(--shadow);
}
.modele a { transition: border-color .16s ease, transform .16s ease; }
.modele a:hover { border-color: var(--blue); transform: translateY(-2px); }
.modele a:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

.model-titlu { font-family: "Archivo", sans-serif; font-weight: 800; font-size: 1.12rem; letter-spacing: -.02em; }
.model-cta {
  margin-top: auto; padding-top: 10px;
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--blue); font-weight: 700; font-size: .92rem;
}
.model-cta .demo-sageata { transition: transform .16s ease; }
.modele a:hover .demo-sageata { transform: translateX(3px); }

.model-curand { opacity: .62; }
.model-curand .demo-eticheta { margin-top: auto; padding-top: 10px; }

@media (prefers-reduced-motion: reduce) {
  .modele a:hover { transform: none; }
  .modele a:hover .demo-sageata { transform: none; }
}

/* Confidentialitatea, ca bloc: era o nota gri de subsol pe care ochiul o
   sarea, desi raspunde la ce se teme omul inainte sa-si scrie salariul. */
.confid {
  margin-top: 30px;
  background: var(--good-bg);
  border: 1px solid color-mix(in srgb, var(--good) 22%, var(--good-bg));
  border-radius: var(--radius);
  padding: 22px 22px 20px;
}
.confid h3 {
  display: flex; align-items: center; gap: 9px;
  font-size: 1.05rem; color: var(--good);
}
.confid h3 svg { flex: 0 0 auto; }
.confid ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; }
.confid li { font-size: .92rem; line-height: 1.55; color: var(--ink-soft); }
.confid li strong { display: block; color: var(--ink); font-size: .96rem; }
/* Linia il desparte de cele trei puncte: fara ea pare al patrulea rand din
   prima coloana, nu legatura intregului bloc. */
.confid-link {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--good) 20%, transparent);
  color: var(--good); font-weight: 700; font-size: .9rem; text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--good) 40%, transparent);
}
.confid-link:hover { border-bottom-color: var(--good); }

/* Cadrul capturii: umbra il ridica de pe pagina si-l face document. */
.model-frame {
  position: relative;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--card);
  box-shadow: 0 30px 60px -30px rgba(14,19,48,.45);
}
.model-frame img { display: block; width: 100%; height: auto; }
.model-fade {
  position: absolute; inset: auto 0 0 0; height: 130px;
  background: linear-gradient(to bottom, transparent, var(--card));
  pointer-events: none;
}

.demo-sageata { transition: transform .16s ease; }
.demo-eticheta {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--faint); font-weight: 700; white-space: nowrap;
}

/* formular */
  .layout { display: grid; gap: 18px; padding-top: 56px; padding-bottom: 120px; }

/* Titlul formularului are acelasi stil ca titlurile celorlalte sectiuni (.head);
   aici doar distanta pana la primul card, care vine deja cu spatiul grilei. */
.form-intro { margin-bottom: 16px; }



.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
          padding: 22px 20px; box-shadow: var(--shadow); }

.card-head { display: flex; gap: 13px; align-items: flex-start; margin-bottom: 18px; }

.card-head h2 { font-size: var(--step-1); }

.card-head p { color: var(--ink-soft); font-size: .89rem; margin-top: 3px; }

.pas { flex: none; width: 30px; height: 30px; border-radius: 9px; background: var(--blue); color: #fff;
         display: grid; place-items: center; font-family:"Archivo",sans-serif; font-weight:700; font-size:.88rem; }

.tipuri { display: grid; gap: 10px; }

.tip { text-align: left; display: grid; gap: 3px; padding: 15px 16px;
         background: var(--paper); border: 1.5px solid var(--line); border-radius: 11px;
         cursor: pointer; font: inherit; color: inherit;
         transition: border-color .15s ease, background .15s ease; }

.tip:hover { border-color: var(--blue); }

.tip.is-on { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 7%, var(--card)); }

.tip-kicker { font-family:"Archivo",sans-serif; font-size:.66rem; font-weight:700; letter-spacing:.11em;
                text-transform: uppercase; color: var(--magenta); }

.tip-title { font-family:"Archivo",sans-serif; font-weight:700; font-size:1.06rem; letter-spacing:-.02em; }

.tip-sub { font-size: .86rem; color: var(--ink-soft); line-height: 1.45; }

.grid2 { display: grid; gap: 14px; }

.camp { display: grid; gap: 6px; }

.camp label { font-size: .85rem; font-weight: 500; color: var(--ink-soft); }

.camp input, .camp select { font: inherit; font-size: 1rem; padding: 11px 13px;
    background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 9px; width: 100%; }

.camp input:focus, .camp select:focus { outline: 2px solid var(--blue); outline-offset: 1px; border-color: transparent; }

.input-money { position: relative; display: block; }

.input-money .unit { position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    font-size: .85rem; color: var(--ink-soft); pointer-events: none; }

.input-money input { padding-right: 42px; font-variant-numeric: tabular-nums; }

.bifa { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px;
          font-size: .92rem; line-height: 1.45; cursor: pointer; }

.bifa input { margin-top: 3px; accent-color: var(--blue); width: 17px; height: 17px; flex: none; }

.bifa a { color: var(--blue); }

.sub-grup { margin-top: 14px; padding-top: 16px; border-top: 1px dashed var(--line); }

.final { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
           padding: 22px 20px; box-shadow: var(--shadow); text-align: center; }

.final-pret { display: flex; align-items: baseline; justify-content: center; gap: 10px;
                margin-bottom: 16px; flex-wrap: wrap; }

.final-pret span { color: var(--ink-soft); font-size: .92rem; }

.final-pret strong { font-family:"Archivo",sans-serif; font-weight:800; font-size:1.9rem;
                       letter-spacing:-.04em; }

.final-pret .pret-banca { flex-basis: 100%; margin-top: 0; font-size: .85rem; }

.final .btn { width: 100%; }

.mic { font-size: .82rem; color: var(--ink-soft); margin-top: 12px; }

.mic.disclaimer { font-size: .76rem; padding-top: 12px; border-top: 1px solid var(--line);
                    margin-top: 14px; line-height: 1.5; }

@media (min-width: 900px) {
    .fhero { padding: 150px 0 74px; }
    .fhero h1 { font-size: var(--step-4); letter-spacing: -.03em; }
    /* Captura pe stanga, rapoartele de deschis pe dreapta, linia intre ele. */
    .raport-wrap { grid-template-columns: 1.1fr 1fr; gap: 0; align-items: start; }
    .raport-wrap .model-frame img { max-height: 520px; }
    .raport-parte { padding-right: 34px; }
    .raport-parte--deschide {
      border-top: 0; padding-top: 0;
      border-left: 1px solid var(--line);
      padding: 0 0 0 34px;
    }
    .raport-parte--deschide:only-child {
      grid-column: 1 / -1;
      border-left: 0; padding: 0;
    }
    .raport-parte--deschide:only-child .modele { grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .modele a, .model-curand { padding: 20px 22px; }
    /* Cele trei puncte pe un rand: se citesc dintr-o privire, nu pe rand. */
    .confid { padding: 26px 28px 24px; }
    .confid ul { grid-template-columns: repeat(3, 1fr); gap: 26px; }
    .layout { max-width: 780px; padding-top: 84px; padding-bottom: 80px; }
    .col-form { display: grid; gap: 20px; }
    .card, .final { padding: 26px 24px; }
    .grid2 { grid-template-columns: 1fr 1fr; gap: 16px; }
    .camp-full { grid-column: 1 / -1; }
  }


  /* ================= pagina despre noi ================= */

  .fhero-scurt { padding-bottom: 60px; }
  .fhero-scurt h1 { max-width: 20ch; }
  .fhero-scurt .lede { max-width: 58ch; margin-top: 18px; }

  .fondator { display: grid; gap: 30px; align-items: start; }
  .fondator-foto { position: relative; }
  /* Legatura de LinkedIn sta sub fotografie, unde tine loc de semnatura. */
  .linkedin-sub-foto { display: inline-flex; margin-top: 14px; }
  .fondator-foto img,
  .foto-locsalvat {
    width: 100%;
    /* Fotografia e patrata; un cadru 4/5 i-ar taia marginile degeaba. */
    aspect-ratio: 1 / 1;
    border-radius: var(--radius);
    object-fit: cover;
    display: block;
  }
  /* Locul rezervat fotografiei: arata intentionat, nu ca o imagine rupta. */
  .foto-locsalvat {
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 12px;
    background: var(--mist);
    border: 1px dashed var(--line);
    color: var(--faint);
  }
  .foto-locsalvat svg { width: 54px; height: 54px; }
  .foto-locsalvat span { font-size: .84rem; }

  .fondator-text h2 { font-size: var(--step-2); margin-top: 6px; }
  .fondator-text .rol { color: var(--ink-soft); font-size: .95rem; margin: 4px 0 18px; }
  .fondator-text p { margin-bottom: 14px; color: var(--ink-soft); }
  .citat {
    margin: 22px 0 0;
    padding: 18px 22px;
    background: var(--mist);
    border-left: 3px solid var(--magenta);
    border-radius: 0 10px 10px 0;
    font-size: 1.04rem;
    line-height: 1.6;
    color: var(--ink);
  }

  .poveste { max-width: 68ch; display: grid; gap: 16px; color: var(--ink-soft); }

  /* Cele trei temelii ale raportului: echipa, verificarea bancara, datele. */
  .temelii { display: grid; gap: 14px; }
  /* Sectiunea e alba, deci cardurile se vad prin gri — ca cele din "ce
     contine raportul", de pe prima pagina. */
  .temelie {
    background: var(--mist);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px 22px;
  }
  .temelie h3 { font-size: 1.08rem; margin-bottom: 8px; }
  .temelie p { color: var(--ink-soft); font-size: .95rem; }
  .temelii-nota { margin-top: 14px; font-size: .9rem; }
  @media (min-width: 780px) {
    .temelii { grid-template-columns: repeat(3, 1fr); }
  }

  .branduri { display: grid; gap: 16px; }
  .brand {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 22px;
    display: flex;
    flex-direction: column;
  }
  /* Brandul pe care esti acum se distinge, ca sa nu para inca un link. */
  .brand-acesta { border-color: var(--blue); background: var(--mist); }
  .brand-cap { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
  .brand h3 { font-size: 1.2rem; }
  .brand-firma { font-size: .74rem; letter-spacing: .06em; color: var(--faint); }
  .brand p { color: var(--ink-soft); font-size: .95rem; }
  .brand-link {
    margin-top: 16px;
    font-size: .88rem;
    font-weight: 600;
    color: var(--blue);
    text-decoration: none;
    display: inline-flex;
    gap: 6px;
    align-items: center;
  }
  .brand-link .arrow { transition: transform .16s ease; }
  .brand-link:hover .arrow { transform: translateX(3px); }

  @media (min-width: 780px) {
    .fondator { grid-template-columns: 340px 1fr; gap: 46px; }
    .branduri { grid-template-columns: repeat(3, 1fr); align-items: start; }
  }


  /* Cardurile de piata, in zona inchisa de la finalul homepage-ului. */

  .markets-sub {
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--faint);
    margin: 34px 0 14px;
  }
  .acte { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--line); }
  .acte h3 {
    font-size: .74rem; font-weight: 700; letter-spacing: .13em;
    text-transform: uppercase; color: var(--faint); margin-bottom: 14px;
  }
  .acte-grid { display: grid; gap: 16px; }
  .acte address {
    font-style: normal; font-size: .86rem; line-height: 1.7; color: var(--ink-soft);
  }
  .acte strong { color: var(--ink); font-weight: 600; }
  @media (min-width: 780px) { .acte-grid { grid-template-columns: 1fr 1fr; } }


  /* ================= pagina de contact ================= */

  .contact-grid { display: grid; gap: 18px; }
  .contact-bloc {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px;
  }
  .contact-bloc h2 {
    font-size: .74rem; font-weight: 700; letter-spacing: .13em;
    text-transform: uppercase; color: var(--faint); margin-bottom: 12px;
  }
  /* Emailul si adresa arata la fel: sunt doua date de contact de acelasi
     rang, iar diferenta de marime le facea sa para de importanta diferita. */
  .contact-mare,
  .contact-adresa {
    font-size: var(--step-1);
    font-weight: 700;
    color: var(--blue);
    line-height: 1.45;
    font-style: normal;
    text-decoration: none;
    word-break: break-word;
  }
  .contact-mare:hover { text-decoration: underline; }
  .contact-nota { margin-top: 10px; font-size: .84rem; color: var(--ink-soft); }

  .contact-social { margin-top: 34px; }
  .contact-social h2 {
    font-size: .74rem; font-weight: 700; letter-spacing: .13em;
    text-transform: uppercase; color: var(--faint); margin-bottom: 14px;
  }
  .social-row { display: flex; flex-wrap: wrap; gap: 10px; }
  .social {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 16px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    text-decoration: none;
    font-size: .92rem;
    font-weight: 600;
    color: var(--ink);
    transition: border-color .16s ease, transform .16s ease;
  }
  .social:hover { border-color: var(--blue); transform: translateY(-1px); }
  .social svg { width: 19px; height: 19px; color: var(--blue); flex: none; }
  .acte-eticheta { color: var(--faint); }

  @media (min-width: 780px) {
    .contact-grid { grid-template-columns: 1fr 1fr; }
  }

  /* Aceeasi caseta ca butoanele de retele de la contact, doar mai mica:
     langa un nume, un buton de dimensiune plina ar fi tipat. */
  .social-mic { padding: 8px 13px; font-size: .85rem; margin-bottom: 20px; }
  .social-mic svg { width: 16px; height: 16px; }


  /* ================= documente legale ================= */

  /* Text lung, citit rar si atent. Latime marginita si aer intre sectiuni. */
  .legal { max-width: 76ch; }
  .legal h2 {
    font-size: 1.18rem;
    margin: 34px 0 12px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
  }
  .legal h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
  .legal h3 { font-size: 1.02rem; margin: 22px 0 10px; }
  .legal p { margin-bottom: 12px; color: var(--ink-soft); }
  .legal ul { margin: 0 0 14px; padding-left: 20px; color: var(--ink-soft); }
  .legal li { margin-bottom: 7px; }
  .legal a { color: var(--blue); }


  /* ================= banner cookie-uri ================= */

  /* Fereastra sta pe centru si opreste pagina pana cand omul alege. E legal
     atata vreme cat respingerea exista si e la un singur clic: ce nu are voie
     sa se intample e sa lipseasca refuzul sau sa fie ascuns sub inca un pas. */
  .cookie-banner {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(14, 19, 48, .55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
  }
  .cookie-banner[hidden] { display: none; }

  .cookie-in {
    width: 100%;
    max-width: 480px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 26px 24px 22px;
    box-shadow: 0 30px 70px -20px rgba(14, 19, 48, .45);
    display: grid;
    gap: 16px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
  }

  .cookie-titlu { font-size: 1.06rem; font-weight: 700; margin: 0; }
  .cookie-text { font-size: .9rem; color: var(--ink-soft); line-height: 1.6; margin: 0; }
  .cookie-text a { color: var(--blue); }

  /* ATENTIE, alegere asumata de proprietar pe 2026-09-28: acceptul e un buton
     plin, iar refuzul sta la pasul al doilea, sub „Setari”. E tiparul pentru
     care CNIL a amendat Google (150 mil. EUR) si Facebook (60 mil. EUR) in
     ianuarie 2022, fiindca refuzul cerea mai multe clicuri decat acceptul.
     Riscul a fost expus si asumat; daca se schimba decizia, refuzul se mută
     inapoi langa accept si `cookie-pas-2` dispare. */
  .cookie-btns { display: grid; gap: 10px; }
  .btn-cookie {
    background: var(--card);
    color: var(--ink);
    border: 1px solid var(--ink-soft);
    font-weight: 600;
    width: 100%;
    justify-content: center;
  }
  .btn-cookie:hover { border-color: var(--blue); color: var(--blue); }

  .btn-cookie-primar {
    background: var(--magenta);
    color: #fff;
    border-color: transparent;
    font-weight: 700;
    width: 100%;
    justify-content: center;
    padding: 14px 26px;
    font-size: 1.02rem;
  }
  .btn-cookie-primar:hover { color: #fff; border-color: transparent; }

  /* Legatura catre pasul al doilea: mica, discreta, dar la vedere. */
  .cookie-setari {
    display: block;
    width: 100%;
    background: none;
    border: 0;
    padding: 2px 0 0;
    font-family: var(--sans);
    font-size: .8rem;
    color: var(--ink-soft);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    text-align: center;
  }
  .cookie-setari:hover { color: var(--blue); }

  .cookie-pas[hidden] { display: none; }

  @media (min-width: 560px) {
    .cookie-pas-2 .cookie-btns { grid-template-columns: 1fr 1fr; }
  }

  /* ================= blog ================= */

  .articole { display: grid; gap: 20px; }
  .articol-card {
    display: flex;
    flex-direction: column;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  }
  .articol-card:hover { border-color: var(--blue); transform: translateY(-3px); box-shadow: var(--shadow); }

  .articol-imagine {
    display: block;
    aspect-ratio: 16 / 9;
    background: var(--mist);
    overflow: hidden;
  }
  .articol-imagine img { width: 100%; height: 100%; object-fit: cover; display: block; }
  /* Fara imagine, o suprafata de brand in loc de un dreptunghi gol. */
  .articol-fara-imagine {
    width: 100%; height: 100%;
    display: grid; place-items: center;
    background: linear-gradient(140deg, var(--blue) 0%, var(--blue-deep) 100%);
    color: rgba(255,255,255,.34);
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: -.02em;
  }

  .articol-corp { display: flex; flex-direction: column; gap: 8px; padding: 20px; flex: 1; }
  .articol-categorie {
    font-size: .68rem; font-weight: 700; letter-spacing: .11em;
    text-transform: uppercase; color: var(--blue);
  }
  .articol-titlu { font-weight: 700; font-size: 1.06rem; line-height: 1.35; text-wrap: balance; }
  .articol-rezumat { font-size: .92rem; color: var(--ink-soft); line-height: 1.55; }
  .articol-meta { margin-top: auto; padding-top: 8px; font-size: .8rem; color: var(--faint); }

  .inapoi {
    display: inline-block;
    margin-bottom: 18px;
    font-size: .88rem;
    font-weight: 600;
    color: rgba(255,255,255,.8);
    text-decoration: none;
  }
  .inapoi:hover { color: #fff; }
  .articol-meta-mare { margin-top: 16px; font-size: .9rem; color: rgba(255,255,255,.72); }

  .articol-cover { margin: 0 0 30px; }
  .articol-cover img { width: 100%; height: auto; border-radius: var(--radius); display: block; }
  /* Textul articolului imprumuta stilul documentelor legale: aceeasi nevoie
     de latime marginita si aer intre sectiuni. */
  .articol-text { max-width: 72ch; }
  .articol-text h2 { font-size: 1.34rem; }

  .paginare { margin-top: 34px; }
  .paginare svg { width: 18px; height: 18px; }

  @media (min-width: 700px) { .articole { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1000px) { .articole { grid-template-columns: repeat(3, 1fr); } }


  /* ================= pagina persoane juridice ================= */

  /* Aici siglele furnizorilor nu mai sunt o nota de subsol, ci argumentul
     sectiunii: apar mai mari si fara linia de separare de deasupra. */
  .partners-mari { border-top: 0; margin-top: 0; padding-top: 0; justify-content: flex-start; }
  .partners-mari .partners-row img { height: 30px; }
  .partners-mari .partners-row img[alt="Termene"] { height: 27px; }
  .partners-nota { margin-top: 24px; font-size: .92rem; }

  /* Campul de CUI si butonul de validare stau pe acelasi rand pe desktop. */
  /* Aliniat sus: cand apare o eroare sub CUI, butonul ramane langa camp, nu coboara. */
  .cui-rand { display: grid; gap: 12px; align-items: start; }
  .cui-rand > .btn { min-height: 3.1rem; }
  @media (min-width: 560px) { .cui-rand { grid-template-columns: 1fr auto; } }

/* ================= formularul de comanda ================= */

/* .grid2 si .sub-grup isi pun singure display, iar asta bate atributul
   hidden al browserului. Fara regula de mai jos, campurile ipotecarului ar
   ramane vizibile la un credit de nevoi personale. */
[hidden] { display: none !important; }

.erori {
  background: var(--warn-bg); color: var(--warn);
  border-radius: 12px; padding: 12px 16px;
  font-weight: 600; font-size: .95rem;
}
.eroare-camp { color: #B42318; font-size: .82rem; margin: 2px 0 0; }
.are-eroare input, .are-eroare select { border-color: #B42318; }
.bifa.are-eroare span { color: #B42318; }

.nota-grup { font-size: .9rem; color: var(--ink-soft); margin: 0 0 12px; }

/* Rezultatul validarii firmei, chiar sub campul CUI. */
.firma-rezultat {
  margin: 12px 0 0; padding: 11px 14px; border-radius: 12px;
  background: var(--good-bg); color: var(--good);
  font-weight: 600; font-size: .92rem;
}
.firma-rezultat.eroare { background: #FDECEC; color: #B42318; }
/* Nici verde, nici rosu: omul n-a gresit nimic, doar ca firma lui e in alt
   registru. Rosul i-ar spune ca a tastat prost si l-ar pune sa caute unde
   n-are ce gasi. */
.firma-rezultat.info { background: var(--mist); color: var(--ink); font-weight: 500; }
.firma-rezultat.info a { color: var(--blue); font-weight: 700; }
/* Firma gasita: confirmarea plus datele din registru, ca semn de incredere. */
.firma-rezultat.gasita dl {
  margin: 10px 0 0; padding: 10px 0 0; border-top: 1px solid rgba(0,0,0,.08);
  display: grid; gap: 6px;
}
.firma-rezultat.gasita dl div { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 10px; }
.firma-rezultat.gasita dt { font-weight: 500; color: var(--ink-soft); }
.firma-rezultat.gasita dd { margin: 0; color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .firma-rezultat.gasita dl div { grid-template-columns: 1fr; gap: 0; }
}

.btn[disabled] { opacity: .6; cursor: progress; }

/* Cand sigla unei banci inca lipseste: numele ei, in acelasi loc, nu o
   imagine rupta. Dispare singur cand fisierul e pus in public/img/banks/. */
.sigla-text { font-weight: 700; font-size: .86rem; color: var(--ink-soft); white-space: nowrap; letter-spacing: -.01em; }
.blogo.sigla-text {
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 7px;
  background: var(--mist); color: var(--blue);
  font-size: .72rem; font-weight: 800; letter-spacing: 0;
}

/* Ce contine raportul + modele: doua coloane pe desktop. Dupa regulile de la
   900px, ca sa le poata inlocui in sectiunea asta. */
/* Punctele pe doua coloane de cand incap; fara modele, pe trei pe ecran lat. */
@media (min-width: 620px) {
  .avantaje { grid-template-columns: 1fr 1fr; gap: 28px 32px; }
}
@media (min-width: 1000px) {
  .continut-coloane:not(.cu-modele) .avantaje { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 960px) {
  .continut-coloane.cu-modele { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 56px; align-items: start; }
  .continut-coloane.cu-modele .avantaje { grid-template-columns: 1fr 1fr; }
}
/* Coloana din dreapta ramane la vedere cat derulezi prin carduri — doar unde
   ecranul e destul de inalt ca s-o cuprinda intreaga. */
@media (min-width: 960px) and (min-height: 820px) {
  .continut-coloane.cu-modele .continut-modele { position: sticky; top: 96px; }
}

/* Intrebari frecvente: titlul in stanga, intrebarile in dreapta pe desktop. */
@media (min-width: 960px) {
  .faq-coloane { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 56px; align-items: start; }
}
@media (min-width: 960px) and (min-height: 820px) {
  .faq-coloane .head { position: sticky; top: 96px; }
}

/* Hero-ul paginilor PF/PJ: text in stanga, exemplul de raport in dreapta pe
   desktop; pe telefon, exemplul sub text. */
.fhero-grid { display: grid; gap: 34px; }
@media (min-width: 900px) {
  .fhero-grid { grid-template-columns: 1.05fr .95fr; align-items: center; gap: 54px; }
}
/* Subsolul cardului de exemplu pe paginile PF/PJ: pretul, pretul pe banca
   analizata si butonul — acolo unde pe prima pagina sta alegerea PF / PJ. */
.excerpt-plata {
  display: grid; gap: 12px;
  padding: 15px 16px 17px;
  border-top: 1px solid var(--line);
  background: var(--mist);
}
.excerpt-pret { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.excerpt-pret-suma { font-family: var(--sans); font-weight: 800; font-size: 1.35rem; letter-spacing: -.02em; line-height: 1.1; color: var(--ink); }
.excerpt-pret-suma small { margin-left: 4px; font-size: .8rem; font-weight: 600; letter-spacing: 0; color: var(--ink-soft); }
.excerpt-pret-banca { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--ink-soft); }
.excerpt-pret-banca svg { flex: none; color: var(--blue); }
.excerpt-plata .btn { width: 100%; justify-content: center; padding: 14px; font-size: 1rem; }

/* Formularul PJ intr-un singur card: grupuri despartite de linii, fara pasi
   numerotati; plata in subsolul cardului, pe gri. */
.formular-unic {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
}
/* Formularul pentru firme „in lucru” (admin → Prezentare site): o singura
   caseta, in locul formularului, cu acelasi chenar ca formularul. */
.in-lucru {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 26px 22px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.in-lucru > svg { flex: none; margin-top: 2px; color: var(--blue); }
.in-lucru h2 { margin: 4px 0 10px; }
.in-lucru p { margin: 0 0 10px; color: var(--ink-soft); line-height: 1.6; }
.in-lucru .eyebrow { margin: 0; }
.in-lucru .in-lucru-data { font-weight: 700; color: var(--ink); }
.in-lucru .in-lucru-pf { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.in-lucru-pf a { color: var(--blue); font-weight: 700; text-decoration: none; }
.in-lucru-pf a:hover { text-decoration: underline; }
@media (min-width: 620px) {
  .in-lucru { padding: 32px 32px; gap: 20px; }
}
.formular-grup { padding: 22px 20px; }
.formular-grup + .formular-grup { border-top: 1px solid var(--line); }
.formular-grup-titlu { font-size: 1.05rem; margin: 0 0 14px; }
.formular-plata {
  padding: 22px 20px; text-align: center;
  border-top: 1px solid var(--line); background: var(--mist);
}
.formular-plata .btn { width: 100%; }
@media (min-width: 620px) {
  .formular-grup { padding: 26px 28px; }
  .formular-plata { padding: 24px 28px; }
  /* Tipurile de finantare unul langa altul: trei optiuni scurte, nu trei randuri lungi. */
  .tipuri-rand { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Ascuns pe ecran, dar citit de cititoarele de ecran: eticheta unui camp al
   carui rost il spune deja titlul de deasupra. */
.vizual-ascuns {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Subsolul de plata al formularului PJ: pret + buton pe un rand (desktop),
   asigurari scurte cu iconita si metodele de plata. */
.formular-plata { text-align: left; }
.plata-rand { display: grid; gap: 14px; align-items: center; }
.plata-pret { display: grid; gap: 3px; }
.plata-eticheta { font-size: .86rem; color: var(--ink-soft); }
.plata-pret strong {
  font-family: var(--sans); font-weight: 800; font-size: 2rem;
  letter-spacing: -.03em; line-height: 1.1; color: var(--ink);
}
.plata-banca { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; color: var(--ink-soft); }
.plata-banca svg { flex: none; color: var(--blue); }
.plata-banca .pret-banca { margin: 0; font-size: inherit; }
.plata-asigurari {
  list-style: none; margin: 18px 0 0; padding: 16px 0 0;
  border-top: 1px solid var(--line); display: grid; gap: 10px;
}
.plata-asigurari li { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; line-height: 1.45; color: var(--ink-soft); }
.plata-asigurari svg { flex: none; margin-top: 1px; }
/* Garantia, fara caseta verde de pe pagina PF: aici e un rand, cu semnul verde. */
.plata-asigurari .garantie-plata { margin: 0; padding: 0; background: none; border-radius: 0; color: var(--ink); font-weight: 600; }
.plata-asigurari .garantie-plata svg { color: var(--good); }
.plata-asigurari .garantie-plata a { color: var(--blue); font-weight: 600; }
.plata-asigurari .plata-sigura svg { color: var(--blue); }
.plata-asigurari .stripe-mark { height: 16px; vertical-align: -3px; }
.plata-sigura-continut { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.plata-asigurari .metode-plata { margin: 0; justify-content: flex-start; gap: 10px; }
.plata-asigurari .metode-plata img { height: 16px; }
@media (min-width: 620px) {
  .plata-rand { grid-template-columns: minmax(0, 1fr) auto; gap: 24px; }
  .formular-plata .plata-rand .btn { width: auto; padding-inline: 30px; }
}

/* Rezultatul scurt de dinaintea platii, deasupra pretului: singura caseta
   verde a formularului, cu cifra drept titlu. Verdele e rezervat aici — apare
   doar cand omul chiar se califica undeva. */
.estimare {
  display: flex; gap: 11px; align-items: flex-start;
  margin: 0 0 18px; padding: 14px 16px;
  background: var(--good-bg); border-radius: 12px; color: #0B5B3B;
}
.estimare > svg { flex: none; margin-top: 3px; color: var(--good); }
.estimare-cifra {
  margin: 0; font-weight: 800; font-size: 1.18rem; line-height: 1.25; letter-spacing: -.01em;
}
.estimare-text { margin: 5px 0 0; font-size: .89rem; line-height: 1.5; color: #14603F; }

/* Formular PJ, doar pentru admin logat: bifele „fara plata” si „bilant manual”.
   Marcat discret cu portocaliu, ca sa nu fie confundat cu formularul clientului. */
.admin-bloc { margin-top: 18px; padding-top: 16px; border-top: 1px dashed #F79009; }
.admin-eticheta { display: inline-block; margin: 0 0 8px; padding: 2px 8px; border-radius: 999px;
  background: #FFFAEB; color: #B54708; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }

/* Formular PF: notele de sub veniturile din PFA, pensie si chirii. */
.venit-alt + .venit-alt { margin-top: 14px; }
.nota-camp { margin: 6px 0 0; color: var(--muted, #5B6478); font-size: .8rem; line-height: 1.45; }

/* Pretul in moneda veche, langa cel in euro, cat tine afisarea dubla. */
.pret-secundar { font-size: .62em; font-weight: 700; opacity: .75; }

/* A doua cale in cardul cu exemplul de raport: un buton secundar, sub cele
   principale, pe acelasi fundal gri, cu „sau” intre ele. Alb cu contur verde,
   ca sa se vada ca e WhatsApp fara sa concureze cu butoanele roz. */
.wa-bloc { display: grid; gap: 10px; padding: 0 16px 17px; background: var(--mist); }
.excerpt .cta-pereche + .wa-bloc, .excerpt-plata + .wa-bloc { margin-top: -4px; }
.wa-sau { display: flex; align-items: center; gap: 10px; color: var(--muted, #5B6478); font-size: .78rem; font-weight: 600; }
.wa-sau::before, .wa-sau::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.wa-buton { width: 100%; justify-content: center; padding: 13px 14px; font-size: 1rem;
  background: #fff; color: #0B5D3B; border: 1.5px solid #25D366; }
.wa-buton:hover { background: #F0FDF4; transform: translateY(-1px); }
.wa-buton svg { color: #25D366; flex: none; }
.wa-buton span { text-align: center; }

/* ---------- pagina de stare a comenzii (succes / asteptare / esec) ---------- */
.stare-hero { padding: 132px 0 72px; text-align: center; }
.stare-cap { display: flex; flex-direction: column; align-items: center; }
.stare-cap h1 { max-width: 18ch; }
.stare-cap .lede { margin-inline: auto; max-width: 52ch; overflow-wrap: anywhere; }
.stare-ic {
  display: grid; place-items: center;
  width: 72px; height: 72px; margin-bottom: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
}
.stare-ic svg { width: 34px; height: 34px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.stare-ic-gata { background: var(--magenta); border-color: transparent; box-shadow: 0 14px 34px -12px var(--magenta); }
.stare-ic-esuata { background: rgba(255,255,255,.08); }
.stare-cta { margin-top: 28px; }
.stare-rezumat {
  margin-top: 26px;
  display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center;
  padding: 8px 16px; border-radius: 999px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.88); font-size: .9rem;
}
.stare-rezumat .punct { opacity: .5; }

.stare-spinner {
  width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.28); border-top-color: #fff;
  animation: stare-roteste .9s linear infinite;
}
.stare-spinner.mic { width: 16px; height: 16px; border-width: 2px; border-color: var(--line); border-top-color: var(--magenta); }
@keyframes stare-roteste { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .stare-spinner { animation-duration: 3s; } }

.stare-ingust { max-width: 640px; }
.stare-h2 { font-size: var(--step-2); margin-bottom: 18px; }

.stare-pasi { list-style: none; padding: 0; margin: 0 auto; display: grid; gap: 16px; }
.stare-pasi li { display: flex; align-items: center; gap: 14px; color: var(--ink-soft); font-weight: 500; }
.stare-pasi .pas-ic {
  flex: none; display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%;
  border: 1.5px solid var(--line); background: #fff;
  font-size: .85rem; color: var(--ink-soft);
}
.stare-pasi .pas-ic svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.stare-pasi li.facut { color: var(--ink); }
.stare-pasi li.facut .pas-ic { background: var(--magenta); border-color: var(--magenta); }
.stare-pasi li.activ { color: var(--ink); }
.stare-pasi li.activ .pas-ic { border-color: var(--magenta); }

.stare-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.stare-lista li { display: flex; gap: 14px; align-items: flex-start; }
.stare-lista p { margin: 0; color: var(--ink-soft); line-height: 1.55; }
.stare-lista a { color: var(--blue); }
.stare-lista .li-ic {
  flex: none; display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 10px; background: var(--mist);
}
.stare-lista .li-ic svg { width: 20px; height: 20px; fill: none; stroke: var(--blue); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 640px) {
  .stare-hero { padding: 112px 0 56px; }
  .stare-ic { width: 60px; height: 60px; }
  .stare-ic svg { width: 28px; height: 28px; }
}