/* =========================================================================
   Sistem de design — placuta de inmatriculare romaneasca
   albastru banda UE + chihlimbariu semnalizator + negru cerneala
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=IBM+Plex+Mono:wght@500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root{
  /* markerul tras de mână de sub etichete (2 oct 2026) — tușă cu codiță,
     plină în stânga și ștearsă spre capăt, ca un marker adevărat */
  --marker: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1' y1='0' y2='0'%3E%3Cstop offset='0' stop-color='%23FFCB4D' stop-opacity='1'/%3E%3Cstop offset='.55' stop-color='%23FFCB4D' stop-opacity='0.92'/%3E%3Cstop offset='.85' stop-color='%23FFCB4D' stop-opacity='0.50'/%3E%3Cstop offset='1' stop-color='%23FFCB4D' stop-opacity='0.12'/%3E%3C/linearGradient%3E%3Cmask id='m'%3E%3Crect width='200' height='24' fill='white'/%3E%3Cpath d='M104 11.2C140 10.6 172 10.4 199 9.6' stroke='black' stroke-width='.9' fill='none' opacity='.55'/%3E%3Cpath d='M128 14.6C156 14.2 178 13.6 199 12' stroke='black' stroke-width='1.1' fill='none' opacity='.7'/%3E%3Cpath d='M146 9.3C166 9 184 8.2 199 6.4' stroke='black' stroke-width='.7' fill='none' opacity='.6'/%3E%3Cpath d='M160 16.6C176 16.2 188 15.2 199 13.8' stroke='black' stroke-width='.8' fill='none' opacity='.8'/%3E%3C/mask%3E%3C/defs%3E%3Cpath mask='url(%23m)' fill='url(%23g)' d='M4 13.5C9 9.5 30 8.2 62 8.6S140 7.4 176 8.1C184 8.3 191 7.2 196.5 3.6C198.6 2.3 199.6 3.4 198.4 5C195.4 9.4 190.6 13.6 183 16.1C150 19.4 104 19.2 66 19.6S17 20.6 7.6 19.1C2.4 18.2 1.2 15.6 4 13.5Z'/%3E%3C/svg%3E");
  /* textul de peste marker: albastrul în degrade al titlului „Ce spun clienții noștri" */
  --text-albastru: linear-gradient(92deg, var(--plate) 0%, #4D79D8 100%);
  --marker-inchis: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1' y1='0' y2='0'%3E%3Cstop offset='0' stop-color='%23F2A007' stop-opacity='0.62'/%3E%3Cstop offset='.55' stop-color='%23F2A007' stop-opacity='0.57'/%3E%3Cstop offset='.85' stop-color='%23F2A007' stop-opacity='0.31'/%3E%3Cstop offset='1' stop-color='%23F2A007' stop-opacity='0.07'/%3E%3C/linearGradient%3E%3Cmask id='m'%3E%3Crect width='200' height='24' fill='white'/%3E%3Cpath d='M104 11.2C140 10.6 172 10.4 199 9.6' stroke='black' stroke-width='.9' fill='none' opacity='.55'/%3E%3Cpath d='M128 14.6C156 14.2 178 13.6 199 12' stroke='black' stroke-width='1.1' fill='none' opacity='.7'/%3E%3Cpath d='M146 9.3C166 9 184 8.2 199 6.4' stroke='black' stroke-width='.7' fill='none' opacity='.6'/%3E%3Cpath d='M160 16.6C176 16.2 188 15.2 199 13.8' stroke='black' stroke-width='.8' fill='none' opacity='.8'/%3E%3C/mask%3E%3C/defs%3E%3Cpath mask='url(%23m)' fill='url(%23g)' d='M4 13.5C9 9.5 30 8.2 62 8.6S140 7.4 176 8.1C184 8.3 191 7.2 196.5 3.6C198.6 2.3 199.6 3.4 198.4 5C195.4 9.4 190.6 13.6 183 16.1C150 19.4 104 19.2 66 19.6S17 20.6 7.6 19.1C2.4 18.2 1.2 15.6 4 13.5Z'/%3E%3C/svg%3E");

  /* culoare */
  --ink:        #0A1628;
  --ink-2:      #2B3A4F;
  --ink-3:      #5B6B82;
  --line:       #DDE4EE;
  --line-2:     #EDF1F7;
  --paper:      #FFFFFF;
  --bg:         #F1F4F9;

  --plate:      #173EA8;   /* albastru banda UE */
  --plate-2:    #0F2C7A;
  --plate-soft: #E7ECFA;

  --amber:      #F2A007;   /* semnalizator */
  --amber-2:    #D88B00;
  --amber-soft: #FEF4E0;

  --go:         #0E7C4E;
  --go-soft:    #E4F3EC;
  --stop:       #C42B1C;
  --stop-soft:  #FDECEA;

  /* tipografie */
  --display: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --body:    'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --mono:    'IBM Plex Mono', 'Cascadia Mono', Consolas, monospace;

  /* spatiu si forma */
  --r-sm: 8px; --r: 14px; --r-lg: 20px;
  --pad: clamp(18px, 4vw, 30px);
  --maxw: 1080px;
  --narrow: 720px;

  --sh-1: 0 1px 2px rgba(10,22,40,.05), 0 2px 8px rgba(10,22,40,.05);
  --sh-2: 0 2px 6px rgba(10,22,40,.06), 0 14px 34px rgba(10,22,40,.09);
  --sh-plate: 0 10px 30px rgba(23,62,168,.18);
}

*,*::before,*::after{ box-sizing:border-box }

/* Atributul hidden trebuie sa invinga orice regula de display de mai jos.
   Fara asta, .btn-row{display:flex} face vizibil un element marcat hidden. */
[hidden]{ display:none !important }

/* Textul de exemplu din câmpuri.

   Fără un stil al nostru, browserul îl arată aproape la fel de închis ca o
   valoare adevărată — și omul crede că are câmpul completat, îl sare, apoi
   se întreabă de ce i se cere să-l completeze. Îl facem vizibil mai puțin,
   iar în față scriem „ex." ca să se înțeleagă că e o pildă, nu un răspuns. */
input::placeholder,
textarea::placeholder{
  color:var(--ink-3);
  opacity:.55;
  font-weight:400;
}
input:focus::placeholder,
textarea:focus::placeholder{ opacity:.35 }

html{ font-size:17px; -webkit-text-size-adjust:100% }
html.text-lg{ font-size:20px }

body{
  margin:0;
  font-family:var(--body);
  line-height:1.6;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  /* Arrow over plain text: a white I-beam (some Windows pointer schemes)
     disappears on the light background. Text fields get their own cursor. */
  cursor:default;
}

img,svg{ max-width:100%; display:block }

/* --- accesibilitate: focus mereu vizibil --- */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--amber);
  outline-offset:2px;
  border-radius:4px;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:#fff; padding:12px 18px; font-weight:600;
}
.skip:focus{ left:8px; top:8px }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}

/* =========================================================================
   Tipografie
   ========================================================================= */
h1,h2,h3,h4{ font-family:var(--display); font-weight:700; line-height:1.15; margin:0 0 .5em; letter-spacing:-.02em }
h1{ font-size:clamp(2rem, 6vw, 3.1rem); font-weight:800; letter-spacing:-.035em }
h2{ font-size:clamp(1.5rem, 3.6vw, 2.15rem) }
h3{ font-size:1.2rem }
p{ margin:0 0 1em }
a{ color:var(--plate); text-underline-offset:3px }

/* Etichetele mici: „marker" — text normal, subliniat cu galben ca de
   creion (2 oct 2026, Florin: stilul de mașină de scris părea ieftin).
   Vechiul: font mono .76rem, majuscule rărite .14em, albastru. */
.eyebrow{
  display:inline-block;
  font-family:var(--display); font-size:.95rem; font-weight:700; letter-spacing:0;
  color:var(--plate); margin:0 0 .7em; padding:0 9px 0 3px;
  background:var(--text-albastru), var(--marker); background-repeat:no-repeat;
  background-position:0 0, left 0 bottom .02em; background-size:100% 100%, 100% .62em;
}
.eyebrow.amber{ color:var(--plate) }
.lede{ font-size:1.12rem; color:var(--ink-2); max-width:56ch }
.muted{ color:var(--ink-3) }
.small{ font-size:.86rem }

/* =========================================================================
   Structura
   ========================================================================= */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad) }
.wrap.narrow{ max-width:var(--narrow) }
section{ padding-block:clamp(44px, 8vw, 84px) }
section.tight{ padding-block:clamp(30px, 5vw, 52px) }

.card{
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--sh-1); padding:clamp(18px,3.4vw,28px);
}

/* =========================================================================
   Antet
   ========================================================================= */
.topbar{
  background:var(--ink); color:#fff; position:sticky; top:0; z-index:60;
  border-bottom:1px solid rgba(255,255,255,.09);
}
/* Bara de sus, din sticlă (2 oct 2026, Florin: „tot timpul"): pagina se vede
   prin ea, încețoșat. Fără suport pentru încețoșare rămâne bleumarin plin. */
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .topbar{
    background:rgba(10,22,40,.7);
    -webkit-backdrop-filter:blur(16px) saturate(1.5); backdrop-filter:blur(16px) saturate(1.5);
    box-shadow:0 10px 30px rgba(10,22,40,.14);
  }
}
.topbar .wrap{ display:flex; align-items:center; gap:14px; min-height:64px }

.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; color:#fff; margin-right:auto }
.brand .mark{
  width:38px; height:38px; border-radius:8px; background:#fff; flex:none;
  display:grid; place-items:center; padding:4px;
  box-shadow:0 0 0 1px rgba(255,255,255,.35);
}
.brand .mark img{ height:30px; width:auto; display:block }
.brand .nm{ font-family:var(--display); font-weight:700; font-size:1.02rem; letter-spacing:-.02em; line-height:1.2 }
.brand .nm span{ display:block; font-family:var(--body); font-weight:400; font-size:.72rem; color:#A9BBD6; letter-spacing:0 }

.topnav{ display:flex; gap:4px; align-items:center }
.topnav a{
  color:#D6E0F0; text-decoration:none; font-size:.92rem; font-weight:500;
  padding:9px 12px; border-radius:var(--r-sm);
}
.topnav a:hover{ background:rgba(255,255,255,.1); color:#fff }
.topnav a[aria-current="page"]{ color:#fff; background:rgba(255,255,255,.13) }

/* Telefonul: ca iconița de aplicație de pe telefon — pătrat verde rotunjit cu
   receptorul alb, și numărul scris mic, cu alb, dedesubt. Perechea lui WhatsApp. */
.tel-btn{
  display:inline-flex; flex-direction:column; align-items:center; gap:3px;
  text-decoration:none; background:transparent; color:#fff;
  font-weight:600; font-size:.64rem; line-height:1; letter-spacing:.01em;
  padding:0; white-space:nowrap;
}
.tel-btn .tel-ic{
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:11px; flex:none;
  background:linear-gradient(180deg,#45E27C,#1FB854);
  box-shadow:0 1px 0 rgba(0,0,0,.25);
}
.tel-btn .tel-ic svg{ width:23px; height:23px; fill:#fff }
.tel-btn:hover .tel-ic{ background:linear-gradient(180deg,#52EA86,#23C25A) }

/* Câmp de parolă cu ochi de arătat/ascuns */
.camp-parola{ position:relative; display:block }
/* selectorul e mai specific dinadins: regula generala de mai jos i-ar suprascrie
   altfel spatiul rezervat, iar textul ar trece pe sub iconita */
.camp-parola input[type=password], .camp-parola input[type=text]{ padding-right:54px }
.camp-parola .ochi{
  position:absolute; top:50%; right:6px; transform:translateY(-50%);
  width:44px; height:44px; display:grid; place-items:center;
  background:none; border:0; border-radius:var(--r-sm); cursor:pointer;
  color:var(--ink-3); padding:0;
}
.camp-parola .ochi:hover{ color:var(--ink); background:var(--bg) }
.camp-parola .ochi svg{ width:22px; height:22px; display:block }
.camp-parola .ochi .inchis{ display:none }
.camp-parola .ochi[aria-pressed="true"] .deschis{ display:none }
.camp-parola .ochi[aria-pressed="true"] .inchis{ display:block }
.camp-parola .ochi[aria-pressed="true"]{ color:var(--plate) }

/* Promisiunea despre poze — rămâne vizibilă în toate stările zonei de încărcare */
.privacy{
  display:flex; align-items:flex-start; gap:9px; text-align:left;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:11px 13px; margin-top:14px; font-size:.86rem; line-height:1.45; color:var(--ink-2);
}
.privacy .lock{ font-size:1rem; line-height:1.2; flex:none }
.privacy b{ color:var(--ink) }
.privacy a{ font-weight:600 }

/* WhatsApp: ca iconița de aplicație de pe telefon — pătrat verde rotunjit cu
   semnul alb, și numele scris mic dedesubt, în afara pătratului. Verdele
   oficial e singurul loc din site unde apare. */
.wa-btn{
  display:inline-flex; flex-direction:column; align-items:center; gap:3px;
  text-decoration:none; background:transparent; color:#fff;
  font-weight:600; font-size:.64rem; line-height:1; letter-spacing:.01em;
  padding:0; white-space:nowrap;
}
.wa-btn svg{
  width:20px; height:20px; padding:7px; box-sizing:content-box; flex:none;
  fill:#fff; background:#25D366; border-radius:10px;
  box-shadow:0 1px 0 rgba(0,0,0,.25);
}
.wa-btn:hover svg{ background:#1EBE5D }
.wa-btn .lbl{ display:block }

.a11y-btn{
  background:transparent; border:1px solid rgba(255,255,255,.3); color:#D6E0F0;
  font:inherit; font-size:.8rem; font-weight:600; padding:8px 11px;
  border-radius:var(--r-sm); cursor:pointer; white-space:nowrap;
  min-height:44px;                 /* sub atât, degetul ratează */
}
/* Lupa e o iconiță, nu text: la .8rem ar fi mai mică decât receptorul de
   telefon de lângă ea. O aducem la aceeași talie cu vecinele. */
.a11y-btn > span[aria-hidden]{ font-size:.92rem; line-height:1 }
.a11y-btn:hover{ background:rgba(255,255,255,.1); color:#fff }
.a11y-btn[aria-pressed="true"]{ background:#fff; color:var(--ink); border-color:#fff }

/* butonul „Produse" din meniu */
.nav-produse, .nav-mobil{
  display:inline-flex; align-items:center; gap:6px;
  background:transparent; border:0; color:#D6E0F0; font:inherit;
  font-size:.92rem; font-weight:500; padding:9px 12px;
  border-radius:var(--r-sm); cursor:pointer; min-height:44px;
}
.nav-produse:hover, .nav-mobil:hover{ background:rgba(255,255,255,.1); color:#fff }
.nav-produse i, .nav-mobil i{ font-style:normal; font-size:.7rem; transition:transform .15s }
.nav-produse[aria-expanded="true"], .nav-mobil[aria-expanded="true"]{ background:rgba(255,255,255,.13); color:#fff }
.nav-produse[aria-expanded="true"] i, .nav-mobil[aria-expanded="true"] i{ transform:rotate(180deg) }
.nav-produse[aria-current="true"]{ color:#fff; background:rgba(255,255,255,.13) }
/* „Produse" e un buton adevărat: alb, cu cele trei linii de meniu în față —
   ca în modelul lui Florin. Stă lângă WhatsApp (verde) și telefon (portocaliu). */
.nav-produse{
  background:#fff; color:var(--ink); font-weight:700; padding:9px 14px 9px 12px; gap:9px;
  box-shadow:0 1px 0 rgba(0,0,0,.25);
}
.nav-produse:hover{ background:#EDF1F7; color:var(--ink) }
.nav-produse[aria-expanded="true"], .nav-produse[aria-current="true"]{ background:#E3E9F4; color:var(--ink) }
.nav-produse[aria-expanded="true"] i{ transform:none }
.nav-produse i{
  width:16px; height:12px; font-size:0; color:var(--ink);
  background:repeating-linear-gradient(to bottom, currentColor 0 2px, transparent 2px 5px);
  border-radius:1px;
}
/* pe telefon, același buton: alb, cu liniile în față (afișarea lui rămâne
   hotărâtă de regula de mai jos, la lățimi mici) */
.nav-mobil{
  background:#fff; color:var(--ink); border:0; font-weight:700; gap:8px;
  padding:8px 12px 8px 10px; box-shadow:0 1px 0 rgba(0,0,0,.25);
}
.nav-mobil:hover, .nav-mobil[aria-expanded="true"]{ background:#E3E9F4; color:var(--ink) }
.nav-mobil[aria-expanded="true"] i{ transform:none }
.nav-mobil i{
  width:16px; height:12px; font-size:0; color:var(--ink);
  background:repeating-linear-gradient(to bottom, currentColor 0 2px, transparent 2px 5px);
  border-radius:1px;
}
.nav-mobil{
  display:none; border:1px solid rgba(255,255,255,.3); font-weight:600; font-size:.86rem;
  padding:8px 11px; white-space:nowrap;
}

/* panoul cu produse: un card plutitor, centrat sub bară — nu o fâșie albă
   întinsă de la un capăt la altul al ecranului */
.produse-panou{
  position:absolute; left:50%; right:auto; top:calc(100% + 10px);
  transform:translateX(-50%);
  width:min(1040px, calc(100vw - 32px));
  background:var(--paper); border:1px solid var(--line); border-radius:16px;
  box-shadow:0 18px 44px rgba(10,22,40,.18); z-index:70;
  /* Pe telefon, 100vh cuprinde și zona de sub bara browserului, deci ultimul
     rând rămânea ascuns sub ea. 100dvh e ce se vede cu adevărat. */
  max-height:calc(100vh - 88px);
  max-height:calc(100dvh - 88px - env(safe-area-inset-bottom, 0px));
  overflow-y:auto; overflow-x:hidden;
  /* ajuns la capătul listei, degetul nu mai derulează și pagina de dedesubt */
  overscroll-behavior:contain;
}
@media (max-width:620px){
  html.panou-deschis body{ position:fixed; width:100%; overflow:hidden }
}
/* Products menu: categories on the left, products with a picture on the right */
.produse-panou .pp{ display:grid; grid-template-columns:230px 1fr; min-height:300px }
.pp-cats{
  display:flex; flex-direction:column; gap:4px; padding:16px 12px;
  background:var(--bg); border-right:1px solid var(--line-2); border-radius:16px 0 0 16px;
}
.pp-cat{
  display:flex; align-items:center; gap:11px; width:100%; padding:12px 14px; border:0; border-radius:12px;
  background:none; font:600 .95rem var(--display); color:var(--ink-2); cursor:pointer; text-align:left;
  transition:background .2s, color .2s, box-shadow .2s;
}
.pp-cat span{ flex:1 }
.pp-cat i{ font-style:normal; font-size:1.2rem; line-height:1; opacity:.35 }
.pp-cat svg{ color:var(--ink-3); flex:none }
.pp-cat[aria-selected="true"]{ background:var(--paper); color:var(--ink); box-shadow:0 4px 14px rgba(15,30,60,.08) }
.pp-cat[aria-selected="true"] svg, .pp-cat[aria-selected="true"] i{ color:#e3a400; opacity:1 }
.pp-list{
  list-style:none; margin:0; padding:20px 26px;
  display:grid; grid-template-columns:1fr 1fr; gap:14px 28px; align-content:start;
}
.pp-list li{ margin:0 }
.pp-item{
  display:flex; align-items:center; gap:14px; padding:8px; margin:-8px; border-radius:14px;
  text-decoration:none; color:var(--ink); transition:background .15s;
  animation:pp-in .3s both;
}
.pp-list li:nth-child(2) .pp-item{ animation-delay:.04s }
.pp-list li:nth-child(3) .pp-item{ animation-delay:.08s }
.pp-list li:nth-child(4) .pp-item{ animation-delay:.12s }
.pp-list li:nth-child(n+5) .pp-item{ animation-delay:.16s }
@keyframes pp-in{ from{ opacity:0; transform:translateY(5px) } }
.pp-item:hover{ background:var(--bg) }
.pp-pic{
  flex:none; display:grid; place-items:center; width:60px; height:60px; border-radius:12px;
  background:#fff; color:#0f2a5c; box-shadow:0 4px 12px rgba(15,30,60,.12);
}
/* desktop: drawn pictogram; the round phone icon stays hidden */
.pp-pic svg{ display:none }
.pp-pic .pp-draw{ display:block }
.pp-text b{ display:block; font:700 1rem var(--display); color:var(--ink) }
.pp-item.acum .pp-text b{ color:#13804b }
.pp-text small{ display:block; margin-top:3px; color:var(--ink-3); font-size:.84rem; line-height:1.35 }
@media (prefers-reduced-motion:reduce){ .pp-item{ animation:none } }

.topbar{ position:sticky }   /* panoul se ancorează de bară */

.a11y-btn > span[aria-hidden]{ display:none }

/* Bara de sus are spațiu limitat. Pe măsură ce ecranul se îngustează, dăm jos
   ce se poate: eticheta lui WhatsApp, apoi numărul de telefon de lângă receptor,
   apoi eticheta butonului de text mare. Cele două butoane de contact rămân —
   nu mai există bara de jos care să le țină. */
@media (max-width:860px){
  .topnav{ display:none }
  .nav-mobil{ display:inline-flex }
  .brand .nm span{ display:none }
  /* tablet and phone: categories become tabs on top */
  .produse-panou .pp{ grid-template-columns:1fr; min-height:0 }
  .pp-cats{
    flex-direction:row; overflow-x:auto; gap:6px; padding:10px; border-right:0;
    border-bottom:1px solid var(--line-2); border-radius:16px 16px 0 0; scrollbar-width:none;
  }
  .pp-cat{ width:auto; flex:none; padding:9px 14px; white-space:nowrap }
  .pp-cat i{ display:none }
  .pp-list{ padding:16px 18px 24px }

  /* Două grupuri, nu un șir de cinci: sigla cu „Produse" lângă ea în stânga,
     iar butoanele prin care omul ia legătura cu noi, strânse în dreapta.
     Spațiul liber trece de la siglă la „Produse", ca să despartă grupurile. */
  .brand{ order:0; margin-right:0 }
  .nav-mobil{ order:1; margin-right:auto }
  .a11y-btn{ order:2 }
  .topbar .wa-btn{ order:3 }
  .tel-btn{ order:4 }
}
@media (max-width:620px){
  /* pe telefon: receptorul sus, numărul scris mic dedesubt — ca la WhatsApp */
  .tel-btn{ flex-direction:column; gap:2px; padding:0; font-size:.64rem; line-height:1; font-weight:600 }
  .tel-btn span[data-phone]{ display:block }
}
@media (max-width:560px){
  .a11y-btn .lbl{ display:none }
  .a11y-btn > span[aria-hidden]{ display:inline; font-weight:700 }
  .a11y-btn{ padding:8px 12px; min-height:44px }
  .topbar .wrap{ gap:9px }
  .brand .nm{ font-size:.94rem }
}
/* Pe telefoanele foarte înguste (360 px), bara nu mai încape cu numărul scris:
   strângem spațiile și umpluturile cu câțiva pixeli, fără să ascundem nimic. */
@media (max-width:400px){
  .topbar .wrap{ gap:6px }
  .nav-mobil{ padding:7px 9px 7px 8px; gap:6px; font-size:.82rem }
  .a11y-btn{ padding-inline:9px }
  .tel-btn, .wa-btn{ font-size:.6rem }
  .tel-btn{ gap:1px }
  .topbar .wa-btn .lbl{ display:block }
  .topbar .wa-btn{ padding:0 }
}
@media (max-width:480px){
  .brand .nm{ display:none }
}
@media (max-width:520px){
  /* phone: round icons (white circle, filled icon, coloured shadow) instead of pictures */
  .pp-list{ grid-template-columns:1fr; gap:16px }
  .pp-pic{
    width:44px; height:44px; margin-right:0; border-radius:50%; background:#fff;
    box-shadow:0 6px 16px color-mix(in srgb, var(--c) 30%, transparent); color:var(--c);
  }
  .pp-pic svg{ display:block }
  .pp-pic .pp-draw{ display:none }
}

/* =========================================================================
   Butoane
   ========================================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--body); font-size:1.02rem; font-weight:700; line-height:1.2;
  min-height:52px; padding:14px 24px; border:2px solid transparent;
  border-radius:var(--r-sm); cursor:pointer; text-decoration:none;
  transition:background .15s, border-color .15s, transform .18s ease, box-shadow .18s ease;
}
.btn:active{ transform:translateY(1px) }
/* Butonul principal, cu gradient viu: culoarea curge încet prin el, ca să nu
   pară o pată plată de galben. Curgerea ține același ritm mereu; la mouse
   butonul doar iese din ecran, cu umbră mai adâncă. */
.btn-primary{
  color:var(--ink);
  background:linear-gradient(100deg,#FFC24A,#F97316,#FFB020,#F97316,#FFC24A);
  background-size:300% 100%;
  animation:curgeAmbra 6s linear infinite;
  box-shadow:0 6px 20px rgba(249,115,22,.32), inset 0 1px 0 rgba(255,255,255,.5);
}
@keyframes curgeAmbra{ from{ background-position:0% 50% } to{ background-position:300% 50% } }
.btn-primary:hover{
  transform:translateY(-4px) scale(1.04);
  box-shadow:0 14px 30px rgba(249,115,22,.48), inset 0 1px 0 rgba(255,255,255,.5);
}
.btn-primary:active{ transform:translateY(0) scale(1); box-shadow:0 4px 10px rgba(249,115,22,.35) }
/* cine a cerut mișcare redusă primește culoarea plină, nemișcată */
@media (prefers-reduced-motion: reduce){
  .btn-primary{ animation:none; background:var(--amber) }
  .btn-primary:hover{ transform:none; box-shadow:none }
}
.btn-plate{ background:var(--plate); color:#fff }
.btn-plate:hover{ background:var(--plate-2) }
.btn-ghost{ background:var(--paper); color:var(--ink); border-color:var(--line) }
.btn-ghost:hover{ border-color:var(--ink-3) }
.btn-contur{ background:var(--paper); color:var(--plate); border:2px solid var(--plate);
  font-weight:700; min-height:44px }
.btn-contur:hover{ background:var(--plate-soft) }
.btn-quiet{ background:transparent; color:var(--ink-3); font-weight:600; min-height:44px; padding:10px 14px }
.btn-quiet:hover{ color:var(--ink) }
.btn-go{ background:var(--go); color:#fff }
.btn-go:hover{ background:#0B6741 }
.btn-block{ width:100% }
.btn:disabled{ opacity:.55; cursor:not-allowed }
.btn-row{ display:flex; gap:11px; flex-wrap:wrap }
.btn-row .btn{ flex:1 1 200px }

/* =========================================================================
   Formulare
   ========================================================================= */
.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:4px }
.field label{ font-weight:600; font-size:.94rem }
.field label .req{ color:var(--stop) }
.field .help{ font-size:.82rem; color:var(--ink-3) }
.field .msg{ font-size:.84rem; font-weight:600; color:var(--stop); display:none }
.field.invalid .msg{ display:block }

input[type=text],input[type=email],input[type=tel],input[type=date],input[type=number],
input[type=password],input[type=search],select,textarea{
  font-family:var(--body); font-size:1.02rem; color:var(--ink);
  min-height:52px; padding:12px 14px; width:100%;
  background:var(--paper); border:2px solid var(--line); border-radius:var(--r-sm);
  transition:border-color .15s, box-shadow .15s;
}
input:hover,select:hover{ border-color:#C3CEDE }
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--plate); box-shadow:0 0 0 4px var(--plate-soft) }
.field.invalid input,.field.invalid select{ border-color:var(--stop); background-color:var(--stop-soft) }
/* email: the advisor says what is wrong; no text under the field, so the
   form does not shift (Florin, 15 Oct 2026). The text stays in the DOM for it. */
.field:has(#email) .msg, .field:has(#cemail) .msg{ display:none }
.field.filled input,.field.filled select{ border-color:var(--go); background-color:var(--go-soft) }
/* background-color only: the shorthand wiped the select arrow (an image) */
input:disabled,select:disabled{ background-color:var(--line-2); color:var(--ink-3); cursor:not-allowed }
/* Text fields: the standard I-beam shape, in black (the system one is white
   on some Windows pointer schemes and disappears on white fields). */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=submit]):not([type=button]):not(:disabled),
textarea:not(:disabled){
  cursor:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%277%27 height=%2717%27 viewBox=%270 0 7 17%27 shape-rendering=%27crispEdges%27%3E%3Cpath d=%27M0 0h3v1H0zM4 0h3v1H4zM3 1h1v15H3zM0 16h3v1H0zM4 16h3v1H4z%27 fill=%27black%27/%3E%3C/svg%3E") 3 8, text;
}
select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%235B6B82' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center; padding-right:40px }

.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px }
.grid-2 .span{ grid-column:1/-1 }
@media (max-width:640px){ .grid-2{ grid-template-columns:1fr } }

.checkline{ display:flex; gap:12px; align-items:flex-start; margin:14px 0 }
.checkline input[type=checkbox]{ width:26px; height:26px; flex:none; margin-top:1px; accent-color:var(--plate) }
.checkline label{ font-size:.94rem; color:var(--ink-2); font-weight:400 }

/* Bifa de acord de sub documente. Când omul apasă butonul fără s-o pună, o
   scoatem în evidență — altfel caută degeaba ce mai lipsește. */
#liniaAcord{
  background:var(--paper); border:2px solid var(--line);
  border-radius:var(--r-sm); padding:14px 16px; margin:18px 0 10px;
}
#liniaAcord:has(input:checked){ border-color:var(--go); background:var(--go-soft) }
/* o bifă cerută și nebifată înroșește toată căsuța — la acord și la plată */
.checkline.cere-bifa{ border-color:var(--stop); background:var(--stop-soft) }
.checkline.cere-bifa label{ color:var(--stop); font-weight:600 }

fieldset{ border:0; padding:0; margin:0 0 22px }
legend{
  font-family:var(--display); font-size:.9rem; font-weight:700; letter-spacing:0;
  color:var(--plate); padding:0 9px 0 3px; margin-bottom:12px;
  background:var(--text-albastru), var(--marker); background-repeat:no-repeat;
  background-position:0 0, left 0 bottom .02em; background-size:100% 100%, 100% .62em;
}

/* =========================================================================
   Codul de pe talon — elementul-semnatura
   ========================================================================= */
.code{
  font-family:var(--mono); font-size:.78rem; font-weight:600;
  background:var(--ink); color:#fff; border-radius:4px;
  padding:3px 7px; letter-spacing:.02em; white-space:nowrap; flex:none;
  min-width:38px; text-align:center; display:inline-block;
}
.code.on{ background:var(--amber); color:var(--ink) }

/* =========================================================================
   Notite / casete de mesaj
   ========================================================================= */
/* Forma „culoare care se stinge" (11 oct 2026, aleasă de Florin dintre 15
   variante): culoarea pornește din stânga și se pierde în alb, cu pictograma
   tonului în față — informare, atenție, reușită, problemă. */
.note{
  --ton:var(--plate); --ton-fond:var(--plate-soft);
  --ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%279%27%2F%3E%3Cpath%20d%3D%27M12%2011v5M12%207.5h.01%27%2F%3E%3C%2Fsvg%3E");
  position:relative;
  border:1px solid var(--line); border-radius:16px;
  background:linear-gradient(90deg, var(--ton-fond) 0%, var(--paper) 75%);
  padding:14px 18px 14px 46px;
  font-size:.94rem; color:var(--ink-2); margin:18px 0;
}
.note::before{
  content:""; position:absolute; left:16px; top:15px; width:20px; height:20px;
  background:var(--ton);
  -webkit-mask:var(--ic) center/contain no-repeat; mask:var(--ic) center/contain no-repeat;
}
.note.amber{ --ton:var(--amber-2); --ton-fond:var(--amber-soft); --ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203.5%202.8%2019.5h18.4z%27%2F%3E%3Cpath%20d%3D%27M12%2010v4M12%2017h.01%27%2F%3E%3C%2Fsvg%3E") }
.note.go{ --ton:var(--go); --ton-fond:var(--go-soft); --ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%279%27%2F%3E%3Cpath%20d%3D%27m8%2012.5%202.7%202.7L16.5%209.5%27%2F%3E%3C%2Fsvg%3E") }
.note.stop{ --ton:var(--stop); --ton-fond:var(--stop-soft); --ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%279%27%2F%3E%3Cpath%20d%3D%27m9%209%206%206M15%209l-6%206%27%2F%3E%3C%2Fsvg%3E") }
.note.lacat{ --ic:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%275%27%20y%3D%2710.5%27%20width%3D%2714%27%20height%3D%2710%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M8%2010.5V8a4%204%200%200%201%208%200v2.5%27%2F%3E%3C%2Fsvg%3E") }
.note strong{ font-weight:700; color:var(--ink) }
/* când mesajul începe cu rotița („Verificăm plata…") sau are sigla lui,
   pictograma ar fi în plus */
.note:has(> .spinner:first-child)::before{ display:none }
.note:has(> .spinner:first-child){ padding-left:18px }
/* o notă fără text nu se arată — rămânea doar bara colorată (6 oct 2026) */
.note:empty{ display:none !important }
.note :last-child{ margin-bottom:0 }

/* =========================================================================
   Subsol
   ========================================================================= */
.foot{ background:var(--ink); color:#9FB2CC; font-size:.9rem; padding-block:44px 34px }
.foot a{ color:#C9D7EA; text-decoration:none }
.foot a:hover{ color:#fff; text-decoration:underline }
/* B — bara de progres sub bara de sus (2 oct 2026): cât ai derulat din
   pagină, din albastru spre galben. --prog (0…1) îl pune site.js. */
.topbar .progres{ position:absolute; left:0; bottom:-1px; width:100%; height:3px; pointer-events:none;
  background:linear-gradient(90deg, var(--plate), #4D79D8 60%, var(--amber));
  transform-origin:left; transform:scaleX(var(--prog, 0)) }
/* semnătura din subsol: „EiAsig" uriaș, în degradeul albastru spre galben */
.foot .semnatura{
  /* Degradeul se pictează doar în cutia elementului. Cu display:table și
     rânduri strânse, coada lui „g" ieșea tăiată jos, iar literele strânse
     (letter-spacing negativ) îi tăiau și marginea din dreapta — de aici
     blocul cât textul, rândul întreg și puțin loc în dreapta. */
  display:block; width:fit-content; margin:18px auto 0; line-height:1; padding:0 .08em .02em .02em; user-select:none;
  font-family:var(--display); font-weight:900; font-size:clamp(4.5rem,19vw,15.5rem); letter-spacing:-.06em;
  color:var(--plate);
  background:linear-gradient(92deg, var(--plate) 0%, #4D79D8 50%, var(--amber-2) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; opacity:.9;
}
.foot h4{ display:table; font-family:var(--display); font-size:.92rem; font-weight:700; letter-spacing:0; color:#fff; margin:0 0 10px; padding:0 9px 0 3px;
  background:var(--marker-inchis) no-repeat left 0 bottom .02em / 100% .62em }
.foot-cols{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; margin-bottom:30px }
.foot-cols ul{ list-style:none; margin:0; padding:0 }
.foot-cols li{ margin-bottom:6px }
.foot-legal{ border-top:1px solid rgba(255,255,255,.13); padding-top:20px; font-size:.82rem; line-height:1.65 }
.badges{ display:flex; gap:8px; flex-wrap:wrap; margin:16px 0 }
.badges span, .badges a:not(.sigla){ text-decoration:none;
  border:1px solid rgba(255,255,255,.2); border-radius:6px;
  padding:6px 11px; font-size:.76rem; font-weight:600; color:#D6E0F0;
}

/* Siglele autorităților stau pe plăcuțe albe: sunt mărci oficiale, nu le
   recolorăm, iar trei din patru au scrisul închis și s-ar pierde pe subsolul
   întunecat. Înălțimea e aceeași pentru toate; lățimea urmează fiecare siglă. */
.badges a.sigla{
  display:inline-flex; align-items:center; justify-content:center;
  background:#fff; border-radius:8px; padding:7px 11px;
  border:1px solid rgba(255,255,255,.25);
  transition:transform .14s, box-shadow .14s;
}
.badges a.sigla img{ height:24px; width:auto; display:block }
/* ASF are doar varianta albă a siglei, făcută pentru fundal închis. Plăcuța ei
   rămâne bleumarin, cu contur alb — așa sigla se vede în forma ei firească,
   nerecolorată. Mărcile oficiale nu se modifică. */
.badges a.sigla.pe-inchis{ background:#0B1A30; border-color:rgba(255,255,255,.45) }
.badges a.sigla.pe-inchis:hover{ border-color:rgba(255,255,255,.75) }
.badges a.sigla:hover{ transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.28) }
.badges a.sigla:focus-visible{ outline:2px solid #fff; outline-offset:2px }
@media (max-width:520px){
  .badges a.sigla{ padding:6px 9px }
  .badges a.sigla img{ height:20px }
}
@media (max-width:760px){ .foot-cols{ grid-template-columns:1fr 1fr } }

/* bara fixa de ajutor pe mobil */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* textele prind viata la scroll: pornesc incetosate, se limpezesc cand intra
   in ecran. Clasa o pune site.js doar unde trebuie; fara JS, totul e vizibil. */
/* 2 oct 2026: mai lent și mai lin, ca în proba aprobată de Florin — urcă
   mai de jos și se limpezește pe aproape o secundă. */
.fx-ceata{
  opacity:0; filter:blur(10px); transform:translateY(46px);
  transition:opacity .9s cubic-bezier(.2,.7,.2,1), filter .9s cubic-bezier(.2,.7,.2,1),
             transform 1.05s cubic-bezier(.2,.7,.2,1);
}
.fx-ceata.vazut{ opacity:1; filter:blur(0); transform:none }
/* titlurile: fiecare cuvânt urcă din ceață, pe rând (întârzierea o pune site.js) */
.fx-cuvinte .cuv{
  display:inline-block; opacity:0; filter:blur(14px); transform:translateY(.55em);
  transition:opacity .9s cubic-bezier(.2,.7,.2,1), filter .9s cubic-bezier(.2,.7,.2,1),
             transform 1s cubic-bezier(.2,.7,.2,1);
}
.fx-cuvinte.vazut .cuv{ opacity:1; filter:blur(0); transform:none }
@media (prefers-reduced-motion: reduce){
  .fx-ceata, .fx-cuvinte .cuv{ opacity:1; filter:none; transform:none; transition:none }
}

/* Câmp închis: se vede că nu se poate scrie în el, fără să dispară din pagină.
   Îl folosim la capacitatea cilindrică a vehiculelor electrice, unde zero e
   răspunsul corect și orice altă cifră ar pleca greșită spre societăți. */
input[readonly]{
  background:var(--bg);
  color:var(--ink-2);
  cursor:not-allowed;
}

/* Etichetele cu marker: textul ia degradeul albastru (primul strat, decupat
   pe litere), iar markerul (al doilea strat) rămâne sub ele. Fără suport
   pentru decupare, textul rămâne albastru plin — niciodată invizibil. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .eyebrow, legend, .prod-pick .grup{
    -webkit-background-clip:text, border-box; background-clip:text, border-box;
    -webkit-text-fill-color:transparent;
  }
}

/* =========================================================================
   Modul de plată: card online sau TBI Bank, în rate (11 oct 2026)
   ========================================================================= */
.metode-plata{ display:grid; gap:10px; margin:22px 0 }
.metoda-plata{
  display:flex; align-items:center; gap:12px; cursor:pointer;
  border:2px solid var(--line); border-radius:var(--r-sm); padding:12px 14px; background:var(--paper);
}
.metoda-plata:has(input:checked){ border-color:var(--plate); background:var(--plate-soft) }
.metoda-plata:has(input:focus-visible){ box-shadow:0 0 0 4px var(--plate-soft) }
.metoda-plata input{ width:20px; height:20px; flex:none; margin:0; accent-color:var(--plate) }
.metoda-plata img{ height:38px; width:auto; flex:none }
.metoda-plata b{ display:block; font-weight:600; color:var(--ink) }
.metoda-plata small{ display:block; font-size:.88rem; color:var(--ink-3) }
/* P4 (Florin, 15 Oct 2026): radio kept for keyboard and screen readers, the row shows the choice;
   amount on the right; TBI row with the bank's orange band and a "Nou" tag */
.metoda-plata{ position:relative }
.metoda-plata input{ position:absolute; opacity:0; pointer-events:none }
.metoda-plata .metoda-ic{ width:26px; height:26px; flex:none; color:var(--plate) }
.metoda-t{ flex:1; min-width:0 }
.metoda-pret{ margin-left:auto; text-align:right; white-space:nowrap }
.metoda-pret b{ font-family:var(--display); font-weight:800; font-size:1.08rem; font-variant-numeric:tabular-nums }
.metoda-pret small{ font-size:.78rem; font-weight:600 }
.metoda-pret b:empty, .metoda-pret b:empty + small{ display:none }
.metoda-tbi{ overflow:hidden; border-color:#ffd2b0; background:linear-gradient(90deg,#fff3ea,var(--paper) 60%) }
.metoda-tbi::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:#ff6600 }
.metoda-tbi:has(input:checked){ border-color:#ff8a3d; background:linear-gradient(90deg,#fff3ea,var(--paper) 60%); box-shadow:0 0 0 3px rgba(255,102,0,.15) }
.metoda-tbi:has(input:checked) .metoda-pret b{ color:var(--plate) }
/* selection circle on the left (variant C, Florin 15 Oct 2026) */
.metoda-plata .cerc{ width:20px; height:20px; border-radius:50%; border:2px solid #C3CBDB; flex:none; transition:border .15s }
.metoda-plata:has(input:checked) .cerc{ border:6px solid var(--plate) }
.metoda-tbi:has(input:checked) .cerc{ border-color:#ff6600 }
.metoda-plata:has(input:focus-visible) .cerc{ box-shadow:0 0 0 3px var(--plate-soft) }
.metoda-nou{ position:absolute; top:0; right:14px; background:#ff6600; color:#fff; font:700 .68rem var(--display);
  letter-spacing:.06em; text-transform:uppercase; padding:3px 8px; border-radius:0 0 8px 8px }
/* „sau în rate" + sigla TBI, sub prețul fiecărei oferte RCA (varianta T5) */
.rate-tbi{ display:none; align-items:center; gap:6px; margin-top:4px; font-size:.82rem; color:var(--ink-3); white-space:nowrap }
.tbi-activ .rate-tbi{ display:flex; justify-content:flex-end }
.rate-tbi img{ height:30px; width:auto; flex:none }
@media (max-width:560px){ .tbi-activ .rate-tbi{ justify-content:flex-start } }

/* Așteptarea confirmării TBI, pe pași (varianta „O", aleasă de Florin) */
.asteptare-tbi{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:18px;
  box-shadow:0 10px 24px -18px rgba(10,22,40,.45); color:var(--ink-2); font-size:.95rem; line-height:1.5;
}
.asteptare-tbi > img{ height:40px; width:auto; display:block; margin-bottom:12px }
.asteptare-tbi > p{ margin:0 }
.pasi-tbi{ list-style:none; margin:14px 0 0; padding:0; display:grid; gap:10px }
.pasi-tbi li{ display:flex; gap:10px; align-items:center; font-size:.9rem; color:var(--ink-3) }
.pasi-tbi .bulina{
  width:24px; height:24px; border-radius:50%; flex:none; display:grid; place-items:center;
  font-weight:700; font-size:.78rem; border:2px solid var(--line); background:var(--paper);
}
.pasi-tbi li.facut{ color:var(--ink-2) }
.pasi-tbi li.facut .bulina{ background:var(--go); border-color:var(--go); color:#fff }
.pasi-tbi li.acum{ color:var(--ink); font-weight:600 }
.pasi-tbi li.acum .bulina{ border-color:var(--plate); border-top-color:transparent; animation:roteste-tbi .9s linear infinite }
@keyframes roteste-tbi{ to{ transform:rotate(360deg) } }
@media (prefers-reduced-motion: reduce){ .pasi-tbi li.acum .bulina{ animation:none; border-top-color:var(--plate) } }

/* Cu TBI pornit: „Ce include" spune și de rate, iar filtrul „Plată în rate"
   (care arăta doar FlexiPay) dispare — orice ofertă se poate plăti în rate. */
.cu-tbi{ display:none }
.tbi-activ .cu-tbi{ display:inline }
.tbi-activ .fara-tbi{ display:none }
.tbi-activ #chipRate{ display:none !important }

/* Start date confirmation (site.js ConfirmaData; Florin, 17 Oct 2026, variant 1) */
.confirma-data{ position:fixed; inset:0; z-index:300; display:grid; place-items:center; padding:18px;
  background:rgba(10,22,40,.55) }
.confirma-data-fer{ background:var(--paper); border-radius:18px; max-width:420px; width:100%;
  box-shadow:0 30px 60px rgba(10,22,40,.35); overflow:hidden }
.confirma-data-in{ padding:24px 22px 20px; display:grid; gap:12px }
.confirma-data-in h3{ margin:0; font:800 1.2rem var(--display); color:var(--ink) }
.confirma-data-in p{ margin:0; color:var(--ink-2); line-height:1.5 }
.confirma-data-zi{ font:800 clamp(1.55rem, 7vw, 2rem)/1.15 var(--display); white-space:nowrap; color:var(--plate); letter-spacing:-.02em }
.confirma-data-bt{ display:flex; gap:10px; padding:0 22px 22px }
.confirma-data-bt button{ flex:1; min-height:48px; border-radius:12px; font:700 .95rem var(--body); cursor:pointer }
.confirma-data-bt .cd-schimb{ background:var(--paper); border:1.5px solid var(--line); color:var(--ink-2) }
.confirma-data-bt .cd-schimb:hover{ border-color:var(--plate); color:var(--plate) }
.confirma-data-bt .cd-ok{ background:var(--plate); border:0; color:#fff }
.confirma-data-bt .cd-ok:hover{ background:var(--plate-2) }
.confirma-data-bt button:focus-visible{ outline:3px solid var(--amber); outline-offset:2px }

/* The signed consent documents above the offers: the site's own .note go
   (site.js AcordDocumente; Daniel, 23 Oct 2026, variant C) */
.acord-documente{ margin-top:0; display:flex; flex-wrap:wrap; align-items:baseline; column-gap:16px; row-gap:4px }
.acord-documente a{ font-weight:700; margin-left:auto; white-space:nowrap }