/* Fonturi gazduite local, nu de la un CDN.

   Trei motive, in ordinea importantei: nicio cerere catre alt server cand
   deschide cineva site-ul (politica de continut ramane stricta si nimeni
   nu afla din alta parte cine ne citeste), incarcare mai rapida pentru ca
   nu se rezolva inca un domeniu, si independenta -- fonturile nu dispar
   daca se schimba conditiile altcuiva.

   Subseturile latin si latin-ext. latin-ext e obligatoriu: acolo stau
   S-virgula si T-virgula (U+0218-021B), literele corecte pentru romana.
   Cedila -- ş, ţ -- e greseala pe care o face jumatate din internetul
   romanesc, si nu vrem sa fim in jumatatea aia.

   `font-display: swap` arata textul cu fontul de sistem pana se incarca
   al nostru. Un titlu care apare tarziu e mai rau decat unul care isi
   schimba caracterul o data.
*/
/* Space Grotesk e variabila: un singur fisier per subset acopera 300-700.
   Serifa de dinainte (Source Serif 4) era o Times moderna -- corecta pentru
   o carte, gresita pentru o platforma de energie: se citea a vechi. Asta e
   un grotesc tehnic, desenat pornind de la o monospatiala, si duce cifrele
   si titlurile in acelasi registru cu restul interfetei. */
@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url("/static/fonts/SpaceGrotesk-var-latin-ext.0bb2ef2eda4e.woff2") format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url("/static/fonts/SpaceGrotesk-var-latin.87c506d88b9f.woff2") format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("/static/fonts/Inter-400-latin-ext.1ad231aac0a8.woff2") format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("/static/fonts/Inter-400-latin.260c81a4759b.woff2") format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("/static/fonts/Inter-500-latin-ext.1ad231aac0a8.woff2") format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("/static/fonts/Inter-500-latin.260c81a4759b.woff2") format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("/static/fonts/Inter-600-latin-ext.1ad231aac0a8.woff2") format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("/static/fonts/Inter-600-latin.260c81a4759b.woff2") format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("/static/fonts/Inter-700-latin-ext.1ad231aac0a8.woff2") format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("/static/fonts/Inter-700-latin.260c81a4759b.woff2") format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("/static/fonts/JetBrainsMono-400-latin-ext.bd4781a31b42.woff2") format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("/static/fonts/JetBrainsMono-400-latin.b636a65da4f0.woff2") format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("/static/fonts/JetBrainsMono-500-latin-ext.bd4781a31b42.woff2") format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("/static/fonts/JetBrainsMono-500-latin.b636a65da4f0.woff2") format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* Atlas Energie -- sistem vizual.

   Directia vine din cei patru jucatori care functioneaza deja, nu din
   preferinte: PF Nexus, nTeaser, LevelTen si Milk the Sun sunt toti pe
   fundal deschis, cu verde ca accent, si isi arata listarile ca randuri
   aliniate pe coloane, nu ca dale colorate. Un cumparator scaneaza zeci de
   oportunitati cautand tipare; randurile se citesc in diagonala, cardurile
   obliga ochiul sa o ia de la capat de fiecare data.

   Doua abateri deliberate de la ei:

   1. Verdele nostru e mai inchis si mai putin saturat decat al lor. Ei sunt
      platforme de tranzactii; noi pornim de la registre publice, iar tonul
      corect e de institutie care tine evidenta, nu de startup.
   2. Culoarea ramane rezervata hartii, unde codifica tehnologia pe un
      scatter si a trecut verificarea pentru daltonism. In liste tehnologia
      e o pictograma monocroma. Altfel fiecare rand ar tipa deopotriva si
      nimic n-ar mai iesi in evidenta.

   Tokenurile stau pe :root, nu pe un element interior: proprietatile
   personalizate se propaga doar in jos, iar declarate pe un wrapper lasau
   <body> fara fundal -- asa a ajuns prima versiune a hartii neagra pe negru.
*/
/* ============================================================ TEMA INCHISA
   Repictare completa, 19 august 2026. Motivul nu e moda: produsul ASTA e o
   plansa de retea, iar o plansa se citeste ca la dispecerat -- date luminoase
   pe fond inchis. Pe hartie, harta era obiectul colorat asezat pe o coala;
   acum pagina e continuarea hartii.

   Ce s-a schimbat si ce NU:

   - Neutrele coboara toate, pastrand distantele dintre trepte. Nu e negru
     pur: are aceeasi tenta verde ca marca, altfel negrul de langa turcoaz
     pare albastru.
   - Marca urca de la #0d6e66 la #43c9b8. Acelasi turcoaz, alta luminozitate:
     verdele de padure moare pe negru, si pe el se sprijina fiecare actiune.
   - **Rampele ordinale se INTORC.** Tensiunea si coropleta codificau "mai
     mult" prin "mai inchis", ceea ce pe hartie inseamna mai vizibil. Pe fond
     inchis, mai inchis inseamna mai putin vizibil -- deci scara s-ar fi citit
     invers. 400 kV e acum treapta cea mai deschisa, iar judetul cu cea mai
     mare capacitate ceruta e cel mai luminos.
   - Culorile categoriale (tehnologii, statii, context) isi pastreaza NUANTA
     si urca in luminozitate. Nuanta poarta intelesul si a fost verificata
     all-pairs pentru daltonism; luminozitatea poarta doar vizibilitatea.
     Toate distantele ΔE raman intre aceleasi perechi.
   - Rosul ramane rezervat erorilor, chihlimbarul avizului expirat.

   Comentariile de mai jos sunt cele de pe tema deschisa. Rationamentul lor
   (de ce turcoaz si nu prun, de ce indigo pentru context) ramane valabil --
   se schimba treapta de luminozitate, nu alegerea familiei. */:root{
  /* Paleta de dedesubt e inchisa, deci si chrome-ul nativ trebuie sa fie.
     Scris `light`, bara de derulare, campurile native si meniurile de
     `<select>` se desenau deschise peste o pagina neagra. Tema deschisa si-l
     pune inapoi pe `light`, in blocul ei de la finalul foii. */
  color-scheme:dark;

  /* Hartia si suprafetele au fost verzi pana pe 13 august 2026 -- #f6f8f6 si
     #eef2ef sunt gri cu tenta verde, iar hartia era alb pur. Combinate cu
     accentul verde, subsolul verde-albastru, coropleta verde si banda verde,
     ieseau sase roluri pe o singura nuanta: cand totul e verde, nimic nu se
     mai evidentiaza *prin* verde, si pagina se citeste institutional.

     Acum cromatica se retrage din cadru si ramane in continut. Suprafetele
     sunt neutre, cu un pic de cald cat sa nu fie gri de laborator; verdele
     ramane pentru marca, pentru actiunea principala si pentru date. Harta
     nu se atinge -- `--land` e separat, deci ea ramane obiectul colorat de pe
     pagina, exact cum trebuie sa fie.

     Luminozitatile sunt pastrate treapta cu treapta (97, 94, 91, 80), deci
     nimic din contrastele deja verificate nu se muta; se schimba doar nuanta.
     Alb pur nu se mai foloseste nicaieri: e plat si sintetic, si facea verdele
     de langa el sa para mai strident decat e. */
  --paper:#0f1211;
  --paper-2:#161a18;      /* suprafete: bara de filtre, dale */
  --paper-3:#1e2321;      /* hover, stari apasate */

  --ink:#eef1ee;          /* titluri; verde-negru, nu negru pur */
  --ink-2:#a9afab;        /* text curent */
  /* Textul secundar, a doua oara ridicat -- si a doua oara pentru ca masurarea
     se facuse pe o singura suprafata.

     Era #74857c, apoi #7f8581. Masurat pe 23 august 2026 pe TOATE hartiile,
     nu doar pe `--paper`, iese de ce nu era destul:

         fundal        #74857c   #7f8581   #9aa8a2
         --paper        4,83      5,00      7,62
         --paper-2      4,51      4,66      7,11
         --paper-3      4,09      4,23      6,45   <- sub AA
         --slab         5,09      5,27      8,03

     Pe hartie treceau amandoua. Pe `--paper-3` -- adica pe randul de tabel
     atins cu cursorul, pe cipul de filtru apasat, pe cardul in hover -- cadeau
     amandoua sub 4,5. Adica exact acolo unde omul se uita cand cauta ceva.

     #9aa8a2 trece AA pe orice suprafata a temei, cu marja, si ramane gri: e
     aceeasi tenta verzuie, doar mai deschisa cu o treapta. */
  --ink-3:#9aa8a2;        /* localizari, legende, date secundare */
  /* Gri-ul stins de dinainte nu s-a aruncat: ramane pentru ce NU e text de
     citit -- textul-fantoma din campuri, campurile inchise, si sagetile
     desenate. Acolo contrastul scazut e informatie („aici nu scrie inca
     nimic"), nu o scapare. */
  --ink-faint:#74857c;

  --line:#252b28;
  --line-strong:#39403c;

  --accent:#10b981;
  /* Singurul ton de marca din tot cadrul: al doilea cuvant din sigla.
     Restul interfetei e neutru, iar culoarea sta pe date. */
  /* Marca nu mai e doar un cuvant din siglă. Site-ul ajunsese alb cu scris
     negru -- corect, dar fara identitate: arata a document, nu a produs.
     Culoarea revine STRUCTURAL, in trei locuri, nu ca fundal peste tot:
     actiunea principala, legaturile, si banda de inchidere a paginii. */
  --brand:#10b981;
  --brand-ink:#34d99a;      /* apasat / hover */
  --brand-wash:#11221f;
  --brand-line:#1f3f3a;
  /* Banda alternativa. Era #f3f4f2 -- adica gri, adica absenta unei alegeri.
     Un gri neutru intre doua suprafete albe nu e ritm, e murdarie.

     Acum e nisip cald. Si asta face perechea care lipsea din tot site-ul:
     neutrele merg pe cald, marca si datele pe rece. Turcoazul hartii asezat
     pe nisip e contrast complementar, nu doua tente care se ceartă -- de-aia
     harta sta tocmai pe banda asta. */
  --surface-alt:#131716;
  /* Capul paginii -- bara de navigare si eroul, pe aceeasi suprafata usor
     verzuie. Asta rezolva plangerea de fond: pagina nu mai incepe cu o coala
     alba. Tenta e slaba dinadins (L 95, croma .012): destul cat sa se vada
     ca e o suprafata aleasa, prea putin cat sa concureze cu harta. Cardul
     de cautare ramane hartie curata si iese in relief peste ea. */
  --head:#0b0e0d;
  --head-2:#1a1f1d;   /* pastila in repaus pe banda: tab inactiv, filtru rapid */
  --head-3:#242a27;   /* aceeasi, atinsa */
  /* Subsolul, ca lespede inchisa. Inchide pagina cu greutate -- fara el,
     textul se termina si gata. Verde-negru, nu negru pur: e familia marcii. */
  --slab:#080a09;
  --slab-ink:#cfd6d2;
  /* Eticheta de pe LESPEDE, si numai de acolo: subsolul e o suprafata plata
     si foarte inchisa (#080a09), pe care gri-ul asta da 5,5:1.
     Statea si pe eroul de pe prima pagina si pe banda de proiecte -- si acolo
     fundalul nu e plat, e un degrade care se deschide spre turcoaz. Masurat pe
     oprirea cea mai deschisa a degradeului: 3,0:1, adica sub AA, taman pe
     randul care spune cate proiecte urmarim. Pe erou trece acum pe `--ink-3`,
     ca orice text secundar. */
  --slab-label:#7e8a86;
  --slab-line:#1e2523;
  --brand-light:#6fdccd;   /* semnul de marca pe fundal inchis */       /* verde de padure, institutional */
  --accent-ink:#34d99a;   /* hover pe accent */
  --accent-wash:#11221f;
  --accent-light:#6fdccd;
  /* Scrisul de PE accent. Cat timp accentul era verde de padure, albul
     mergea. Turcoazul luminos de acum e o suprafata DESCHISA: albul pe el
     da 1,9:1, iar negrul-verzui 9,4:1. Butonul principal isi schimba deci
     polaritatea, nu culoarea. */
  --on-accent:#07100e; /* accentul pe fundal inchis, unde cel de sus moare */

  /* Suprafata inchisa a aplicatiei: bara din stanga de pe marketplace si
     antetul ei de pe telefon. E ACELASI verde-negru ca subsolul, dinadins.
     Inainte erau doua negruri diferite -- rail-ul pe #1b1b19, subsolul pe
     #12211f -- si diferenta se vedea trecand de pe o pagina pe alta fara sa
     insemne nimic. Un site are o singura suprafata inchisa.
     `--hero-ink` e mai deschis decat `--slab-ink` pentru ca rail-ul e
     navigatie, nu text de incheiere: se citeste, nu se rasfoieste. */
  --hero:var(--slab);
  /* Textul secundar de pe banda inchisa. Are nevoie de token propriu tocmai
     pentru ca banda ramane inchisa in AMANDOUA temele: orice `--ink-*` sau
     `--slab-label` s-ar intoarce odata cu paleta si ar cadea sub prag intr-una
     din ele. Masurat pe banda: 5,6:1. */
  --hero-label:#a9b4b0;

  /* BARA LATERALA A APLICATIEI, ca tokeni. 24 august 2026.

     Statea pe `--hero` si pe sapte valori albe scrise in clar
     (`rgba(239,233,241,...)`, `#fff`). Pe tema inchisa arata bine; pe cea
     deschisa raminea un bloc negru de 248px langa o pagina alba -- adica un
     sfert de ecran care nu asculta de comutator. O banda de subsol are voie
     sa ramana inchisa in ambele teme, o coloana cat un sfert de ecran nu:
     acolo nu se citeste ca decizie, se citeste ca defectiune.

     Valorile de aici sunt EXACT cele dinainte, doar mutate in tokeni. Ce se
     schimba e ca tema deschisa le poate intoarce. */
  --rail:var(--hero);
  --rail-card:var(--hero);      /* cardul din josul barei */
  --rail-strong:#ffffff;        /* marca, text la hover si pe activ */
  --rail-ink:rgba(239,233,241,.86);
  --rail-ink-2:rgba(239,233,241,.66);
  --rail-ink-3:rgba(239,233,241,.42);
  --rail-hover:rgba(255,255,255,.07);
  --rail-hover-2:rgba(255,255,255,.05);
  /* Fondul intrarii active. Era `rgba(226,149,79,...)` -- chihlimbar, ramas
     din paleta de dinainte de 13 august, cand marca era caramizie. Langa el,
     `.side-sub.is-on` era deja pe `--accent-light` (turcoaz), deci doua
     stari „activ" din familii diferite, la zece pixeli distanta. Trece pe
     marca. */
  --rail-on:rgba(16,185,129,.14);
  --rail-line:rgba(16,185,129,.22);
  --rail-brand:var(--brand-light);
  --rail-accent:var(--accent-light);   /* sub-intrarea activa */
  --rail-edge:transparent;             /* pe fond inchis, marginea se vede singura */

  /* Degradeul de pe h1. Era scris in clar, alb -- deci pe tema deschisa
     titlul iesea alb pe alb si disparea. Se intoarce odata cu tema; varianta
     `-slab` e pentru titlurile care stau pe banda inchisa, si aia NU se
     intoarce, fiindca nici banda nu se intoarce. */
  --h1-grad:linear-gradient(to right,#ffffff 0%,#eef1ee 38%,#9aa3a0 100%);
  --h1-grad-v:linear-gradient(to bottom,#ffffff 0%,#dfe3e0 62%,#9aa3a0 100%);
  --h1-grad-slab:linear-gradient(to right,#ffffff 0%,#eef1ee 38%,#9aa3a0 100%);
  --h1-grad-slab-v:linear-gradient(to bottom,#ffffff 0%,#dfe3e0 62%,#9aa3a0 100%);

  /* Butoanele din cardul barei laterale. Aceleasi valori ca pana acum. */
  --sidecta-ghost-ink:var(--hero-ink);
  --sidecta-ghost-bg:rgba(255,255,255,.06);
  --sidecta-ghost-line:rgba(255,255,255,.3);
  --sidecta-solid-bg:var(--accent-light);
  --sidecta-solid-ink:var(--hero);
  --hero-ink:#eef1ee;

  /* Coropleta judetelor -- "cat s-a cerut aici". E o *scara de date*, nu
     identitate, si de-aia are token propriu: cand accentul a devenit
     chihlimbar, harta s-a facut portocalie peste tot, desi legenda ei zice
     "verdele judetului". A doua oara aceeasi capcana, dupa `--good`.

     Ramane verde si dinadins: plumul e luat de rampa de tensiune (400/220/110)
     si s-ar bate cap in cap cu ea, iar chihlimbarul inseamna deja "ATR
     expirat". Verdele e singura familie libera, si e deja verificata
     all-pairs impotriva amandurora. */
  /* Scara coropletei. Era o singura culoare (#25fde9) la cinci opacitati.
     Nu mergea, si motivul e masurabil: turcoazul ala e foarte deschis
     (L 0,90), deci crescand opacitatea judetul devenea mai SATURAT, nu mai
     INCHIS. Toate cele 42 ieseau in aceeasi tenta palida, si de-aia harta
     de pe prima pagina nu spunea nimic.

     Acum sunt cinci culori adevarate, de la turcoaz palid la petrol,
     monoton descrescatoare in luminozitate (0,92 / 0,77 / 0,61 / 0,35 /
     0,15). Capatul inchis e familia marcii: harta si site-ul se inchid in
     aceeasi culoare. `--wash` ramane turcoazul viu -- buline de proiect si
     mixul din panou. */
  --wash:#25fde9;
  --wash-1:#18211f; --wash-2:#1d4d47; --wash-3:#2b8478;
  --wash-4:#33bda9; --wash-5:#6ef0dc;

  --good:#2ee08a;
  --good-wash:#0f2118;
  --good-line:#1f4432;
  --warn:#e0a35c;         /* aviz expirat -- chihlimbar, nu rosu */
  --bad:#f0685a;          /* camp gresit; rosul e rezervat erorilor */
  --warn-wash:#2a1d10;

  /* A treia stare de pe harta: "expirare nepublicata". Pana pe 13 august 2026
     imprumuta `--ink-3`, griul de text -- si de aici o capcana pe care am
     declansat-o chiar eu: cand am inchis `--ink-3` ca sa treaca pragul de
     contrast (3,8:1 -> 4,6:1), starea de pe harta s-a inchis odata cu el si a
     cazut de la ΔE 15,2 la 13,2 fata de chihlimbar -- adica sub pragul la care
     le deosebeste *oricine*, nu doar un daltonist. O reparatie de lizibilitate
     a text stricase o codificare de date.

     Deci rolurile se despart: griul de text raspunde de citit, asta raspunde
     de deosebit. Acum ΔE 18,9 la vedere normala. Mai deschis dinadins --
     "nu se stie" nu trebuie sa strige mai tare decat "expirat". */
  --unknown:#8a97a3;


  /* Doar pentru harta. In liste nu se folosesc. A patra culoare (--hidro)
     a trecut aceeasi verificare all-pairs de daltonism ca primele trei
     inainte sa se adauge -- vezi comentariul de la TECH_ORDER in
     web/build.py. */
  /* `--hidro` era #c23b8e. Pe legenda hartii statea la o coloana de fucsia
     statiilor (#fd3f92) si masurat cu validatorul dadea ΔE 11,7 in vedere
     normala -- sub pragul de 15, adica doua lucruri diferite pe care ochiul
     nu le desparte, unul langa altul, in aceeasi legenda. Violetul de acum
     trece la 15,1 fata de tot lotul. Fucsia nu s-a atins: e ceruta explicit
     pentru statii. */
  --solar:#4f9bf0; --stocare:#ff8a4d; --eolian:#2ad39a; --hidro:#b673e0;
  /* Neutrul "tehnologie nepublicata" a fost #74857c pana pe 13 august 2026,
     adica exact `--ink-3`, griul de text. Doua roluri pe aceeasi valoare, si
     al doilea n-a fost verificat niciodata impotriva celorlalte patru:
     verificarea all-pairs de care vorbeste comentariul de mai sus s-a rulat pe
     cele patru tehnologii, fara neutrul care sta langa ele in acelasi tabel.

     Rulat cu validatorul, vechea valoare cadea de doua ori:
       Hidro   #c23b8e ↔ #74857c   ΔE 3,9 la deuteranopie (prag 8)
       Eolian  #1baf7a ↔ #74857c   ΔE 13,6 la vedere *normala* (prag dur 15)
     A doua e cea grava: nu e o problema de daltonism, ci de oricine. Si
     conteaza mai mult decat pare, fiindca "tehnologie nepublicata" e categoria
     cea mai numeroasa din date -- deci punctul asta sta langa celelalte tot
     timpul, nu din cand in cand.

     Cauza: #74857c e un gri cu tenta verde, asezat pe aceeasi luminozitate ca
     eolianul. Reparatia coboara neutrul si ii scoate tenta. Dupa:
       cea mai proasta pereche  ΔE 8,1 (protanopie) · 18,0 (vedere normala)
     Neutrul ramane fara croma, si asta e intentionat: "nepublicat" nu e o
     categorie care concureaza, e absenta uneia. */
  --altele:#6f7573;
  --land:#151a19;

  /* Tensiunile liniilor. O rampa, nu trei culori de sine statatoare:
     tensiunea e o marime ordinala (110 < 220 < 400), deci se codifica pe
     luminozitate, pe o singura nuanta, nu pe trei nuante care se concureaza.

     Treapta de 400 kV sta *sub* banda de luminozitate in care incap toate
     bulinele (L 0,43-0,77 in OKLCH). Asta e ce face paleta sa incapa: liniile
     se despart de buline pe o axa pe care bulinele n-o folosesc deloc.

     Verificat all-pairs impotriva celor patru culori de tehnologie, nu doar
     intre ele -- despartite, orice trei culori trec, si exact asta a fost
     greseala versiunii dinainte. Cea mai apropiata pereche: dE 17,1 la vedere
     normala (pragul dur e 15) si 6,6 la daltonism.

     Cifra pe hexuri pure e insa optimista: bulinele se deseneaza cu
     fill-opacity .88, deci pe ecran sunt trase spre culoarea uscatului, iar
     perechea cea mai proasta ajunge la dE ~14,5 -- 110 kV langa cea mai
     palida bulina. Ramane sub 15 si asa ramane: treapta deschisa a oricarei
     rampe se apropie de fundal, ca si bulinele compuse peste el, deci pragul
     categorial nu e atins de nicio rampa cu capat deschis. E admis aici
     pentru ca forma face separarea, si o face coplesitor -- 110 kV e un fir
     de 0,85 px, bulina e un disc de 12 px si mai bine. Ce nu era admis, si de
     aia s-a schimbat paleta, erau cei 9,7 ai versiunii dinainte, unde 110 kV
     era si in aceeasi familie de nuanta cu solarul.

     Rosul nu e o optiune aici, oricat de bine ar arata pe 400 kV: e rezervat
     erorilor (--bad), cateva randuri mai sus.

     Treapta de 110 kV e mai inchisa decat ar cere uscatul curat, si asta e
     intentionat: judetele cu capacitate nelocalizata se umbresc, deci fundalul
     de sub fire nu e mereu acelasi. Aleasa pe fundalul cel mai inchis, nu pe
     cel mai deschis -- 3,03:1 pe uscat curat, 2,36:1 sub umbra cea mai grea.
     Prima varianta, #b29eab, arata bine pe hartia goala si disparea cu totul
     peste un judet umbrit. Coborarea nu costa nimic pe axa cealalta: distanta
     fata de buline sta la ~14,5 pe toata plaja de luminozitate incercata. */
  --kv400:#e8e8ee; --kv220:#9a9aa4; --kv110:#5a5a62;

  /* Statiile electrice au scara lor, separata de a firelor. Firele sunt
     retea deasa si raman neutre; statiile sunt puncte si pot duce culoare.
     Rosu intens la 400 kV, roz la 110 kV -- rampa merge pe luminozitate, deci
     "mai mare" se citeste ca "mai inchis" fara sa fie nevoie de legenda.
     Crimsonul e verificat impotriva coralului de pe buline ("ATR expirat"):
     ΔE 19,4 la vedere normala, 9,5 la deuteranopie. Nu se confunda, si nici
     nu sunt aceeasi forma. */
  --st400:#fd3f92; --st220:#fa7fb6; --st110:#f6b3d2;

  /* Centralele mari si iesirile din tara. Sunt *context* -- ce exista deja si
     unde pleaca reteaua -- deci o singura culoare pentru amandoua, distincta
     de tot ce se poate cumpara. Indigoul e singura familie ramasa libera pe
     harta: verificat all-pairs impotriva verdelui, maroului, fucsiei si
     neutrului, si are 5,9-7:1 contrast peste orice treapta de turcoaz. */
  --context:#7b6cf5;

  /* Raza colturilor. `--radius` exista de la inceput si era ignorat: 35 de
     valori scrise pe loc, in 15 marimi -- 2, 3, 6, 7, 8, 9, 10, 11, 12, 14.
     Nimeni nu deosebeste 9 de 10, dar toata lumea vede ca o pagina n-are ritm,
     exact ca la marimile de text. Cinci trepte, si atat. `--radius` ramane ca
     alias, ca sa nu se rupa regulile care il folosesc deja. */
  /* Trei valori, si numai trei. Erau cinci in scara plus 20px, 22px, 16px,
     10px si 2px scrise direct in reguli -- adica zece raze diferite pentru
     trei intentii, iar diferenta dintre 9px si 10px n-o vede nimeni si totusi
     face pagina sa para desenata de doi oameni.

       sm   campuri, casute, meniuri mici, obiectul obisnuit
       md   suprafete mari: carduri de banda, panouri, ferestre, bara de sus
       pill tot ce e capsula: butoane, insigne, cipuri, bare de indicator

     `50%` ramane in afara scarii: un cerc nu e o raza aleasa, e o forma.

     Butoanele sunt pe `pill`, nu pe `sm`, si asta e o abatere de la „8px
     pentru butoane" facuta dinadins: capsula e identitatea vizibila a
     site-ului, si erau deja capsule -- doar ca `.btn` avea `md` in regula de
     baza si `999px` intr-o regula de mai jos, adica doua raspunsuri la aceeasi
     intrebare. Ramane unul. */
  --radius-sm:8px;
  --radius-md:12px;
  --radius-pill:999px;
  --radius:var(--radius-sm);
  /* 1120px a fost ales cand un ecran de referinta avea 1440. Pe 2560
     inseamna 44% din latime: continutul se strange intr-o coloana la mijloc
     si de o parte si de alta ramane cat inca un site. Pe un produs de date,
     unde jumatate din pagini sunt tabele cu cinci coloane, e si risipa, si
     arata a greseala.

     Doar o valoare mai mare, fara `vw`: prima varianta era
     `min(1560px, 94vw)` si strangea degeaba pe telefon, unde `.wrap` are
     deja 28px de garda de fiecare parte -- ieseau 40px si continutul se
     ingusta fata de cum era. Sub 1560 limita nici nu se aplica, deci
     gardarea e treaba padding-ului, nu a lui `--wrap`.

     Textul NU se lateste odata cu el: masura de citit e capata pe fiecare
     bloc in parte, altfel randurile ar ajunge la 140 de caractere si s-ar
     citi mai greu, nu mai usor. */
  --wrap:1560px;

  /* Miscarea, in sfarsit pe tokeni.

     Curba nu e inventata: `cubic-bezier(.2,.7,.3,1)` exista deja in site, pe
     barele care se umplu din pagina hartii, si era singurul loc cu o curba
     aleasa. Masurat in browser pe 13 august 2026: 95 de elemente cu tranzitii,
     din care 12 pe curba asta si 105 declaratii pe `ease` -- implicitul
     browserului, adica "n-a ales nimeni". Ce era deja bun s-a promovat din
     accident local in token; restul se aliniaza la el.

     Duratele vin tot din ce se folosea: .12s era pe 80 de elemente, .35s pe
     barele de mai sus. Deci doua din trei trepte descriu realitatea, nu o
     inlocuiesc. Aceeasi socoteala ca la scara de text de mai jos -- putine
     trepte, alese o data. */
  --ease-out:cubic-bezier(.2,.7,.3,1);
  --ease-in:cubic-bezier(.7,0,.84,0);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --dur-fast:120ms;
  --dur-mid:200ms;
  --dur-slow:350ms;

  /* Scara de text. Erau saisprezece marimi diferite intre cele doua foi de
     stil -- treisprezece doar de Inter pe pagina hartii -- fiecare aleasa
     pe loc: .86, .88, .9, .92, .93, .94, .95, .97, .98. Nimeni nu vede
     diferenta dintre .92 si .94, dar toata lumea vede ca pagina n-are
     ritm. Patru trepte, si atat. */
  --fs-xs:.8rem;
  --fs-sm:.88rem;
  --fs-md:.95rem;
  --fs-lg:1.05rem;

  /* Patru trepte acopereau textul curent, dar titlurile si etichetele mono au
     ramas pe dinafara si si-au facut scara lor pe furis: masurat pe 12 august
     2026, 46 de marimi scrise direct in reguli, in 28 de valori distincte --
     printre ele 1.14rem, 1.15rem si 1.16rem, adica exact ce condamna nota de
     mai sus. Deci scara se termina, nu se apara: doua trepte sub, patru peste.

     Titlurile raman fluide (`clamp`), fiindca de la telefon la desktop chiar
     au nevoie sa se miste; ce se schimba e ca perechile de valori se scriu
     o data aici, nu de sase ori prin fisier. */
  /* Scara de spatiu, 24 august 2026. A fost ultima scara care lipsea: erau
     tokeni pentru text, raze, umbre si durate, dar spatiul se scria de mana
     peste tot -- si atunci fiecare sectiune isi alegea singura aerul. De
     acolo venea senzatia de sablon, nu din culori: cand toate sectiunile
     respira identic, pagina n-are ritm; cand respira fiecare altfel din
     intamplare, n-are ordine.

     Pas de 4px pana la 24, apoi sarituri mai mari. Numele spun rolul, nu
     marimea: `--sp-3` nu inseamna nimic peste sase luni, `--sp-gap` da. */
  --sp-hair:4px;          /* intre o eticheta si lucrul pe care il eticheteaza */
  --sp-tight:8px;         /* in interiorul unui control */
  --sp-item:12px;         /* intre randuri dintr-o lista */
  --sp-gap:16px;          /* intre elemente fratesti dintr-o grila */
  --sp-block:24px;        /* intre blocuri dintr-o sectiune */
  --sp-band:40px;         /* intre grupuri de blocuri */
  --sp-sec:72px;          /* respiratia implicita a unei sectiuni */
  --sp-air:112px;         /* sectiunea care are nevoie de tacere in jur */

  --fs-2xs:.66rem;        /* etichete mono, majuscule cu spatiere */
  --fs-h4:1.15rem;
  --fs-h3:clamp(1.45rem,2.3vw,1.85rem);
  --fs-h2:clamp(1.6rem,3vw,2.2rem);
  --fs-h1:clamp(2.2rem,5vw,3.5rem);

  /* Elevatia, in trei trepte. Erau 38 de umbre scrise fiecare pe loc, deci 38
     de inaltimi diferite pentru trei intentii: asezat pe hartie, ridicat sub
     cursor, si desprins de tot (meniuri, panouri). Umbrele sunt verzi-negre,
     nu gri: o umbra neutra peste hartia calda se vede murdara. */
  --shadow-rest:0 1px 2px rgba(0,0,0,.5);
  --shadow-lift:0 12px 30px -16px rgba(0,0,0,.75);
  --shadow-pop:0 20px 48px -20px rgba(0,0,0,.85);
  /* Ridicarea unui card, neutra. Pana pe 23 august 2026 cardurile se ridicau
     intr-un halou verde -- si la fel insigna de plan, si comutatorul de
     perioada, si butonul gol. Verdele nu mai insemna nimic tocmai fiindca era
     peste tot: cand toate se aprind, niciuna nu e cea principala.

     Ramane pe un singur element: butonul plin. Cardurile primesc asta. */
  --shadow-card:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);

  /* Trei roluri, trei caractere, toate fara serife. Fontul de titlu e un
     grotesc tehnic: are terminatii taiate drept si cifre construite din
     aceleasi forme ca literele, deci arata a instrument de masura, nu a
     carte. Sans-ul e partenerul tacut al interfetei. Mono-ul e vocabularul
     registrului: coduri, etichete, cifre care se aliniaza pe coloana. */
  --display:'Space Grotesk',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --sans:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
}

*{box-sizing:border-box}

html,body{overflow-x:clip}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink-2);
  font-family:var(--sans);
  font-size:var(--fs-md);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:'cv05' 1;   /* l cu coada, sa nu se confunde cu I */
}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}

/* Titlurile pe grotescul tehnic, restul interfetei pe sans. Grotescul e
   mai lat si are ochiul mai mare decat serifa pe care a inlocuit-o, deci
   aceleasi marimi ar da titluri prea grase: greutatea coboara la 600 si
   tracking-ul se strange vizibil.

   Trei trepte, si fiecare isi are marimea ei. `h2` folosea `--fs-h3` -- adica
   titlul de sectiune era desenat cu marimea subtitlului, si pagina se citea
   plata: „Ce gasesti aici" arata la fel de important ca numele unui card
   dinauntru. Nu se vedea ca greseala fiindca era la fel peste tot.

   Cu cat titlul e mai mare, cu atat spatierea se strange si interliniajul
   scade: la 3,5rem literele stau deja aproape, iar un interliniaj de 1,3 ar
   rupe titlul in doua randuri care nu par acelasi lucru. */
h1,h2{font-family:var(--display);color:var(--ink);margin:0}
h1{font-size:var(--fs-h1);font-weight:650;letter-spacing:-.03em;line-height:1.05;
   text-wrap:balance}
h2{font-size:var(--fs-h2);font-weight:600;letter-spacing:-.028em;line-height:1.1;
   text-wrap:balance}
h3{font-family:var(--sans);font-size:var(--fs-h4);font-weight:600;color:var(--ink);
   letter-spacing:-.008em;line-height:1.3;margin:0}

a{color:inherit}

.mono,.num,.eyebrow,.label{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* Eticheta mica, cu majuscule si spatiere -- vocabularul unui registru.
   E singurul element decorativ care se repeta, si isi merita locul: spune
   de fiecare data din ce sursa vine ce urmeaza. */
.eyebrow{
  font-size:var(--fs-2xs);letter-spacing:.15em;text-transform:uppercase;
  color:var(--accent);margin:0 0 14px;font-weight:600;
}

.lede{font-size:var(--fs-h4);color:var(--ink-2);max-width:60ch;margin:14px 0 0}
.sub{color:var(--ink-2);margin:6px 0 22px;max-width:66ch;line-height:1.62}

/* ------------------------------------------------------------ navigatie */

nav.top{
  border-bottom:1px solid var(--brand-line);
  background:var(--head);
  position:sticky;top:0;z-index:20;
}
/* Copil direct, nu orice descendent: panoul de meniu de pe telefon are si
   el un `.wrap`, tot inauntrul lui `nav.top`. Fara `>`, mostenea asezarea
   barii -- flex pe orizontala si inaltime fixa -- deci se deschidea ca o
   fasie de saizeci de pixeli cu tot continutul strivit intr-un rand. De
   aici "meniul nu se incarca". */
nav.top > .wrap{display:flex;align-items:center;gap:14px;height:66px;
  flex-wrap:nowrap;white-space:nowrap}
/* Cele doua butoane din dreapta trebuie sa arate ca o pereche: aceeasi
   inaltime, acelasi padding, aceeasi greutate. Difera doar emfaza -- unul
   plin, unul cu contur. Inainte fiecare isi lua marimea de unde apuca si
   pareau doua elemente straine unul de altul. */
nav.top .btn{
  white-space:nowrap;flex:none;
  font-size:var(--fs-md);font-weight:600;padding:10px 17px;line-height:1.35;
}
nav.top > .wrap .item{font-weight:500}
.brand{
  font-family:var(--display);font-weight:700;font-size:var(--fs-h4);letter-spacing:-.01em;white-space:nowrap;flex:none;
  color:var(--ink);text-decoration:none;margin-right:4px;
}
.brand span{color:var(--brand)}
nav.top > .wrap .item{
  color:var(--ink-2);text-decoration:none;font-size:var(--fs-md);white-space:nowrap;
  padding:9px 11px;border-radius:var(--radius-sm);transition:color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out);
}
nav.top > .wrap .item:hover{color:var(--brand-ink);background:var(--head-2)}
nav.top > .wrap .item[aria-current]{color:var(--brand-ink);background:var(--head-2)}

/* Bulina de stare din antet. LevelTen tine acolo "All services are
   online"; pentru un produs de date semnalul care conteaza nu e ca serverul
   raspunde, ci cat de proaspete sunt cifrele. */
.freshness{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:.06em;
  color:var(--ink-3);white-space:nowrap;margin-right:6px;
}
.freshness .dot{
  width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none;
}

/* ------------------------------------------------------------ butoane */

/* Butonul plin isi ia relieful dintr-o umbra scurta plus o dunga de lumina
   in interiorul marginii de sus. Chenarul de un pixel de aceeasi culoare cu
   fundalul, singur, lasa butonul plat ca un dreptunghi desenat. */
.btn{
  display:inline-block;background:var(--accent);color:var(--on-accent);
  border:1px solid transparent;border-radius:var(--radius-pill);
  padding:10px 18px;font-size:var(--fs-md);font-weight:600;line-height:1.25;
  text-decoration:none;cursor:pointer;font-family:inherit;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 1px 2px rgba(36,27,35,.16),
    0 4px 12px -4px rgba(36,27,35,.28);
  transition:background var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out);
}
.btn:hover{
  background:var(--accent-ink);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 2px 4px rgba(36,27,35,.18),
    0 8px 20px -6px rgba(36,27,35,.34);
}
.btn:active{transform:translateY(1px);box-shadow:var(--shadow-rest)}

/* Butonul gol nu are chenar propriu-zis, ci o margine desenata din umbra:
   ramane subtire la orice densitate de pixeli si nu se ingroasa pe ecrane
   obisnuite, cum face un border de un pixel. */
.btn.ghost{
  background:var(--paper);color:var(--ink);
  box-shadow:
    inset 0 0 0 1px var(--line-strong),
    0 1px 2px rgba(36,27,35,.06);
}
.btn.ghost:hover{
  background:var(--paper-2);
  box-shadow:
    inset 0 0 0 1px var(--ink-3),
    0 1px 3px rgba(36,27,35,.10);
}

:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--radius-sm)}

/* ------------------------------------------------------------ sectiuni */

section{padding:var(--sp-sec) 0}
/* Ritm: fiecare a doua sectiune sta pe o suprafata usor diferita. Fara asta,
   pagina e o singura coala alba de sus pana jos si nu se vede unde se termina
   un subiect si incepe altul. Banda se intinde pe toata latimea, continutul
   ramane in `.wrap`.

   Fara linie intre ele: cand doua sectiuni vecine au fundaluri diferite,
   marginea se vede oricum, iar hairline-ul peste ea face o dunga dubla.
   A doua declaratie `section + section` care punea `border-top` traia mai
   jos in fisier si o anula pe asta -- coliziune de cascada, exact ce spune
   NOTES.md sa nu se intample. */
section:nth-of-type(even){background:var(--surface-alt)}
section.hero{padding:74px 0 46px}

/* Ritm ales, in locul zebrei. 24 august 2026.

   Regula de mai sus coloreaza una din doua sectiuni si le da tuturor acelasi
   aer. E o decizie luata de POZITIE, nu de inteles: a treia sectiune se
   coloreaza fiindca e a treia, nu fiindca are ceva de spus. Cand fiecare
   pagina face asta, toate paginile capata acelasi puls -- si ala e semnul de
   sablon pe care il vede oricine, inaintea culorilor.

   Aici spatiul poarta intelesul: cat aer are o sectiune in jur spune cat de
   tare vorbeste, iar lipsa aerului spune „asta merge cu ce e deasupra".
   Se scrie `section.sec`, element+clasa (0,1,1), ca sa bata `nth-of-type` la
   specificitate egala prin ordine in foaie. Acelasi truc ca la `section.psec`
   mai jos, si aceeasi aritmetica din NOTES.md. */
section.sec{background:none}
/* Vorbeste tare: are tacere in jur. Tacerea e mai ales DEASUPRA -- ea
   desparte sectiunea de ce a fost inainte. Sub ea urmeaza o schimbare de
   suprafata, care marcheaza singura granita, deci acolo aerul dublat ar fi
   doar o gaura. */
section.sec.is-air{padding:var(--sp-air) 0 var(--sp-sec)}
/* Continua sectiunea de deasupra: nu deschide subiect nou, deci nu ia aer
   de deschidere. Perechea (is-air, is-tight) e ce face pagina sa aiba
   respiratie inegala -- adica ritm. */
section.sec.is-tight{padding-top:0}
/* Suprafata ceruta, nu nimerita -- si una care chiar se vede.
   `--surface-alt` (#131716) sta la patru puncte de `--paper` (#0f1211): pe
   hartie diferenta era vizibila, pe tema inchisa nu e. Un fundal care nu se
   distinge nu desparte nimic, doar pretinde ca desparte. `--paper-2` exista
   deja pentru suprafete asezate peste hartie si e treapta care se vede --
   deci nu se inventeaza a 142-a culoare in afara lui `:root`. */
section.sec.on-alt{background:var(--paper-2)}

/* ------------------------------------------------------------ erou inchis */

/* Banda intunecata din capul paginii, cu taburi pe rol si bara de cautare
   inline -- structura PF Nexus, care e cea mai buna din tot lotul pentru
   ca duce vizitatorul direct in produs, nu intr-o promisiune.

   Gradientul a picat pe 13 august 2026. Comentariul care statea aici spunea,
   cinstit, "la ei e violet, la noi verdele marcii" -- adica exact eroul cu
   gradient pe care il recunoaste oricine, vopsit in alta nuanta. Forma se
   citeste inaintea culorii: doua radiale plus o diagonala e amprenta, si
   schimbarea nuantei n-o sterge. Plus cinci hexuri scrise in clar, pe langa
   sistemul de tokeni.

   Ce ramane: o suprafata plata, din verdele cel mai inchis al marcii. Banda
   isi face treaba -- separa capul paginii de continut si tine textul alb --
   fara sa imite pe nimeni. Adancimea o dau continutul si bara de cautare
   ridicata peste ea, nu doua pete de lumina care nu inseamna nimic. */
/* Eroul, pe hartie. Fara banda, fara suprafata colorata: pagina incepe cu
   informatie. Adancimea o dau ierarhia si spatiul, nu un fundal.

   `--hero` si `--hero-ink` raman definiti si folositi de suprafetele inchise
   care au ramas (cardul din rail), deci nu sunt tokeni orfani. */
section.hero-flat{
  position:relative;padding:26px 0 44px;
  background:var(--head);border-bottom:1px solid var(--brand-line);
}

/* Bara colectoare: linia groasa cu eticheta mono agatata de ea. Vocabularul
   e al schemelor monofilare -- desenul tehnic al subiectului. */
.bus{
  display:flex;align-items:baseline;gap:14px;margin:0 0 20px;
  padding-top:13px;border-top:2px solid var(--brand);
}
.bus > b{
  font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:.16em;
  text-transform:uppercase;font-weight:400;color:var(--brand-ink);
}
.bus > span{
  font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:.1em;
  color:var(--ink-3);margin-left:auto;text-align:right;
}
/* Marimea, spatierea si interliniajul vin din regula lui `h1`. Statuau si
   aici, cu alte valori (-.035em si 1), si eroul e tocmai locul in care se
   vede un h1 -- deci scara scrisa sus n-ajungea niciodata pe ecran. Ce
   ramane e ce tine de EROU, nu de titlu: latimea la care se rupe randul. */
.hero-flat h1{
  color:var(--ink);max-width:16ch;
  text-wrap:balance;
}
.hero-flat .lede{
  color:var(--ink-2);font-size:var(--fs-h4);max-width:58ch;
  margin:18px 0 0;
}

/* ------------------------------------------------------------ eroul */

/* Aici a stat, si a picat, o harta a retelei desenata din date si animata.
   Era reflexul: cand nu stii ce sa pui in erou, pui un SVG care se misca.
   Arata bine intr-o captura si nu spune nimic -- o ilustratie a subiectului,
   asezata langa o promisiune despre subiect.

   Acum eroul e produsul. Stanga: ce e site-ul si cautarea adevarata.
   Dreapta: patru proiecte din baza, cu putere, judet, statie si stadiul
   avizului, fiecare ducand la fisa lui. Titlul promite „vezi ce proiecte sunt
   de vanzare", iar dovada sta la trei centimetri sub promisiune, inainte de
   orice clic. Adancimea o da continutul, nu un fundal. */
section.hero-dark{
  background:
    radial-gradient(120% 90% at 82% 6%, #16453d 0%, transparent 58%),
    var(--slab);
  border-bottom:none;
  position:relative;
  isolation:isolate;
  /* Zero jos: banda se lipeste de marginea de jos a benzii inchise.
     `padding-bottom` scris INAINTE de scurtatura `padding` ar fi fost sters
     de ea -- scurtatura reseteaza toate cele patru laturi. */
  padding:44px 0 0;
}
/* Aurora din capul paginii. E singurul loc din tot site-ul unde culoarea nu
   inseamna nimic -- si tocmai de aceea sta DOAR aici, unde nu e nicio data de
   citit. Nuantele sunt alese din familia marcii (turcoaz -> petrol -> indigo)
   si NU din cele patru ale tehnologiilor: un gradient decorativ in portocaliu
   si magenta ar imprumuta exact culorile care pe harta de mai jos inseamna
   "stocare" si "statie de 400 kV". Decorul n-are voie sa vorbeasca limba
   datelor.
   Opacitatile sunt mici (.14 maxim) fiindca sub el trece text: peste .2,
   contrastul titlului scade sub prag in coltul din dreapta. */
section.hero-dark::before{
  content:"";
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(104deg,
    rgba(67,201,184,.13) 0%,
    rgba(29,120,140,.12) 34%,
    rgba(76,59,214,.14) 68%,
    rgba(123,108,245,.10) 100%);
  /* Se stinge in jos, ca sa nu taie o dunga orizontala peste banda urmatoare. */
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.45) 62%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.45) 62%,transparent 100%);
}

/* O coloana. Proiectele nu mai stau intr-un panou langa titlu, ci curg pe
   banda de la baza eroului -- deci textul are din nou toata latimea, si bara
   de cautare incape pe un rand fara sa fie inghesuita. */
/* Eroul are DOUA coloane in marcaj de la inceput -- `.hero-say` (ce e
   site-ul) si `.hero-find` (cu ce incepi) -- dar CSS-ul le stivuia, si
   atunci pe un ecran lat titlul statea singur intr-un colt cu un gol cat
   pagina langa el. Pe latime, cele doua stau alaturi: partea stanga spune,
   partea dreapta lasa sa faci. Sub prag se stivuiesc la loc, fiindca pe
   telefon nu exista a doua coloana. */
.hero-split{display:block}
.hero-find{margin-top:30px}
@media (min-width:1080px){
  .hero-split{
    display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
    gap:64px;align-items:center;
  }
  .hero-find{margin-top:0}
  /* Trei campuri a cate 200px plus butonul nu incap intr-o jumatate de
     latime, deci butonul se ducea singur pe randul doi si lasa un gol dupa
     ultimul camp -- arata a rupere, nu a asezare. Il trimitem acolo
     DINADINS, pe toata latimea: o bara de cautare cu campurile sus si
     actiunea lata dedesubt e o forma cunoscuta, iar golul dispare. */
  .hero-find .searchbar > .search-go{
    flex:1 1 100%;justify-content:center;margin-top:6px;
  }
}
section.hero-dark > .wrap{position:relative;z-index:1}
section.hero-dark .bus{border-top-color:var(--brand-light)}
section.hero-dark .bus > b{color:var(--brand-light)}
/* O treapta mai sus decat restul textului secundar, si nu din gust: lumina
   eroului e un degrade radial cu miezul la 82% / 6%, iar randul asta cade la
   83% / 9% -- adica taman pe punctul cel mai deschis. Masurat acolo,
   `--ink-3` da 4,35:1 (sub AA) si `--ink-2` da 4,82:1. Restul textului
   secundar de pe erou sta departe de miez, pe hartie aproape neagra, unde
   `--ink-3` da 7,6:1 si e exact tokenul potrivit. */
/* Banda eroului e inchisa in AMANDOUA temele -- e o componenta intunecata
   prin proiectare, nu o consecinta a paletei. Deci textul din ea nu se poate
   sprijini pe `--ink-*`, care se intoarce odata cu tema: pe tema deschisa
   `--ink-2` e gri inchis, si iesea text inchis pe fundal inchis. Se ia din
   familia `--slab-*`, care ramane deschisa in ambele. */
section.hero-dark .bus > span{color:var(--hero-label)}
/* `max-width:14ch` era frana care tinea titlul pe trei randuri scurte
   cand nu exista a doua coloana. Acum coloana il limiteaza, iar 14ch il
   strangea intr-o fasie. */
section.hero-dark h1{color:#fdfdfc;max-width:18ch}
section.hero-dark .lede{color:#c3d4d0;max-width:50ch}
section.hero-dark .hero-proof{color:var(--hero-label)}
section.hero-dark .hero-proof strong{color:#eef4f3}
section.hero-dark.is-compact h1,section.hero-dark.is-centered h1{color:#fdfdfc}
section.hero-dark.is-compact .lede,section.hero-dark.is-centered .lede{color:#c3d4d0}

section.hero-dark .tab{background:rgba(255,255,255,.09);color:#cfdedb}
section.hero-dark .tab:hover{background:rgba(255,255,255,.16);color:#fff}
section.hero-dark .tab.is-on{background:var(--paper);color:var(--ink)}
section.hero-dark .quick a{
  background:rgba(255,255,255,.07);color:#cfdedb;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}
section.hero-dark .quick a:hover{
  background:rgba(255,255,255,.14);color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
}
section.hero-dark .searchbar{
  box-shadow:0 2px 4px rgba(0,0,0,.28), 0 30px 60px -16px rgba(0,0,0,.55);
}

/* Banda. La baza eroului, pe toata latimea ecranului.

   Bursele au tape-ul care curge cu ce se tranzactioneaza acum; asta e o piata
   si are ce sa puna in el -- proiecte adevarate, cu putere, tehnologie, judet
   si stadiul avizului. Inainte aici statea un panou de patru randuri intr-un
   colt: corect ca informatie, mort ca obiect.

   Doua copii ale listei, una `aria-hidden`, si animatia trece exact peste
   latimea uneia (-50% din pista) -- de-aia bucla n-are salt la capat.
   Marginile se sting cu o masca, ca banda sa para ca vine de undeva si merge
   undeva, nu ca incepe si se termina in muchia ecranului. */
.tape{
  position:relative;margin-top:44px;
  border-top:1px solid rgba(255,255,255,.12);
  border-bottom:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.18);
  display:flex;align-items:stretch;
}
.tp-label{
  flex:none;display:flex;align-items:center;gap:9px;
  padding:0 18px 0 max(24px, calc((100vw - 1160px) / 2));
  font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--brand-light);
  border-right:1px solid rgba(255,255,255,.12);white-space:nowrap;
}
.tp-label::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:var(--brand-light);flex:none;
  animation:tp-puls 2.4s ease-in-out infinite;
}
@keyframes tp-puls{0%,100%{opacity:1}50%{opacity:.25}}

.tp-window{
  flex:1;min-width:0;overflow:hidden;display:flex;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 44px,#000 calc(100% - 44px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 44px,#000 calc(100% - 44px),transparent);
}
.tp-run{
  display:flex;flex:none;align-items:center;
  animation:tp-curge 64s linear infinite;
}
@keyframes tp-curge{from{transform:translateX(0)} to{transform:translateX(-100%)}}
.tp-window:hover .tp-run,.tp-window:focus-within .tp-run{animation-play-state:paused}

.tp-item{
  display:flex;align-items:baseline;gap:10px;flex:none;
  padding:15px 22px;text-decoration:none;white-space:nowrap;
  border-right:1px solid rgba(255,255,255,.07);
  transition:background var(--dur-fast) var(--ease-out);
}
.tp-item:hover{background:rgba(255,255,255,.07)}
.tp-mw{
  font-family:var(--mono);font-size:var(--fs-md);color:#fdfdfc;
  font-variant-numeric:tabular-nums;
}
.tp-mw i{font-style:normal;font-size:var(--fs-2xs);color:var(--ink-3);margin-left:3px}
.tp-tech{font-size:var(--fs-sm);font-weight:600;color:#dce7e4}
/* Banda curge peste fundal inchis in amandoua temele -- vezi `--hero-label`. */
.tp-loc{font-size:var(--fs-xs);color:var(--hero-label)}
.tp-tag{
  font-size:var(--fs-2xs);padding:3px 8px;border-radius:var(--radius-pill);
  color:var(--slab-label);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
}
.tp-tag.ok{color:#7fe3b4;box-shadow:inset 0 0 0 1px rgba(127,227,180,.32)}
.tp-tag.warn{color:#e6b483;box-shadow:inset 0 0 0 1px rgba(230,180,131,.32)}

@media (prefers-reduced-motion:reduce){
  .tp-run{animation:none}
  .tp-run[aria-hidden]{display:none}
  .tp-window{overflow-x:auto;scrollbar-width:none}
}
@media (max-width:760px){
  .tp-label{display:none}
  .tape{margin-top:32px}
}

/* Intrarea: titlul, randurile de sub el, apoi panoul. O data, la incarcare. */
@keyframes hero-in{ from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }
section.hero-dark .bus,section.hero-dark h1,section.hero-dark .lede,
section.hero-dark .tabs,section.hero-dark .searchbar,
section.hero-dark .quick,section.hero-dark .hero-proof,.tape{
  animation:hero-in .62s var(--ease-out) both;
}
section.hero-dark h1{animation-delay:.06s}
section.hero-dark .lede{animation-delay:.13s}
section.hero-dark .tabs{animation-delay:.19s}
section.hero-dark .searchbar{animation-delay:.24s}
section.hero-dark .quick{animation-delay:.31s}
section.hero-dark .hero-proof{animation-delay:.37s}
.tape{animation-delay:.44s}

@media (prefers-reduced-motion:reduce){
  section.hero-dark .bus,section.hero-dark h1,section.hero-dark .lede,
  section.hero-dark .tabs,section.hero-dark .searchbar,section.hero-dark .quick,
  section.hero-dark .hero-proof,.tape{animation:none}
}


/* Taburile. Cel activ se leaga vizual de bara de dedesubt -- de-aia n-are
   colturi rotunjite jos si nici linie despartitoare. */
.tabs{display:flex;flex-wrap:wrap;gap:4px;margin:36px 0 0}
.tab{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font:inherit;font-size:var(--fs-sm);font-weight:600;letter-spacing:.01em;
  color:var(--ink-2);background:var(--head-2);
  border:none;border-radius:var(--radius-md) var(--radius-md) 0 0;padding:11px 18px;
  transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);
}
.tab:hover{background:var(--head-3);color:var(--brand-ink)}
.tab.is-on{background:var(--paper);color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--line),0 -1px 0 var(--paper)}
.tab svg{opacity:.9}

/* Bara de cautare: casute lipite intr-o singura pastila alba, ca la ei.
   Fiecare camp are pictograma lui, ca sa se citeasca dintr-o privire ce
   se pune unde. */
.searchbar{
  display:flex;flex-wrap:wrap;align-items:stretch;
  background:var(--paper);border-radius:0 var(--radius-md) var(--radius-md) var(--radius-md);
  padding:6px;gap:0;
  box-shadow:
    0 1px 2px rgba(26,18,25,.10),
    0 24px 48px -12px rgba(26,18,25,.36);
  max-width:1000px;
}
.searchbar.is-off{display:none}

/* Despartitorul e desenat cu un gradient care se stinge la capete, ca sa nu
   fie o linie taiata drept pana in marginea barii. */
.sfield{
  display:flex;align-items:center;gap:10px;flex:1 1 200px;min-width:0;
  padding:0 8px 0 14px;position:relative;border-radius:var(--radius-md);
  transition:background var(--dur-fast) var(--ease-out);
}
.sfield + .sfield::before{
  content:"";position:absolute;left:0;top:22%;bottom:22%;width:1px;
  background:linear-gradient(var(--line-strong),var(--line-strong));
  opacity:.75;
}
.sfield:hover{background:var(--paper-2)}
.sfield:hover::before,.sfield:hover + .sfield::before{opacity:0}
.sfield-ic{color:var(--ink-3);display:flex;flex:none;transition:color var(--dur-fast) var(--ease-out)}
.sfield:focus-within .sfield-ic{color:var(--accent)}

/* Selectele native isi desenau propria sageata, alta pe fiecare sistem, si
   nu semana cu nimic din pagina. Se stinge si se pune una singura, aceeasi
   peste tot, ca fundal SVG. */
/* Regula generala de mai jos deseneaza chenarul controalelor din barele de
   filtre. Aici chenarul il poarta bara insasi, deci se anuleaza. */
.searchbar .sfield select,.searchbar .sfield input{
  border:none;background:none;padding:13px 0;min-width:0;width:100%;
  font:inherit;font-size:var(--fs-md);color:var(--ink);
  appearance:none;-webkit-appearance:none;box-shadow:none;
}
.searchbar .sfield select:hover,.searchbar .sfield input:hover,
.searchbar .sfield select:focus,.searchbar .sfield input:focus{
  box-shadow:none;
}
.searchbar .sfield select{
  padding-right:24px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2374857c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 4px center;
}
/* Sagetile de la input-ul numeric arata a formular de administrare. */
.searchbar .sfield input[type=number]{-moz-appearance:textfield}
.sfield input[type=number]::-webkit-outer-spin-button,
.sfield input[type=number]::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0;
}
.searchbar .sfield input::placeholder{color:var(--ink-faint)}
.searchbar .sfield select:focus,.searchbar .sfield input:focus{outline:none}
.sfield:focus-within{background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--accent-wash)}
.sfield:focus-within::before,.sfield:focus-within + .sfield::before{opacity:0}

.search-go{
  display:inline-flex;align-items:center;gap:9px;flex:none;cursor:pointer;
  font:inherit;font-size:var(--fs-md);font-weight:640;
  background:var(--accent);color:var(--on-accent);border:none;border-radius:var(--radius-md);
  padding:13px 22px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    var(--shadow-rest);
  transition:background var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out);
}
.search-go:hover{
  background:var(--accent-ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 3px 10px -2px rgba(36,27,35,.4);
}

/* Proba, imediat sub bara: cifrele care spun ca datele exista deja. */
.hero-proof{margin:22px 0 0;color:var(--ink-3);font-size:var(--fs-sm)}
.hero-proof strong{color:var(--ink);font-weight:640}

/* Verdele marcii dispare pe fundalul inchis. Indemnul principal trece pe
   menta, singurul loc din site unde folosim tonul deschis -- si e exact
   locul unde trebuie sa se vada de la distanta. */
/* Bara sta peste banda: fara asta ar aparea o dunga alba deasupra ei. */

.sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

@media (max-width:760px){
  .searchbar{border-radius:var(--radius-md)}
  .sfield{flex:1 1 100%;border-right:none;border-bottom:1px solid var(--line)}
  .sfield:last-of-type{border-bottom:none}
  .search-go{width:100%;justify-content:center;margin-top:6px}
}

/* ------------------------------------------------------------ erou */

/* Ceilalti pun aici sigle de clienti. Noi n-avem clienti de aratat, dar
   avem registrele din care agregam -- verificabile, si mai grele decat un
   logo imprumutat. */

.section-head{
  display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end;
  justify-content:space-between;margin-bottom:20px;
}
.section-head .sub{margin-bottom:0}

/* Banda cu teza. Un singur loc pe pagina unde fundalul se schimba, si e
   rezervat pentru cifra care schimba felul in care citesti o lista. */
section.band{background:var(--paper-2);border-top:1px solid var(--line)}
.claim{
  font-family:var(--display);font-size:var(--fs-h2);font-weight:600;
  letter-spacing:-.032em;line-height:1.14;max-width:24ch;margin-bottom:16px;
}
.claim em{font-style:normal;color:var(--warn)}

/* ------------------------------------------------------------ dale de cifre */

/* Cinci cifre in linie. Nu sunt casute: sunt masuratori, si arata ca atare
   -- o linie de baza continua sub toate, cu un reper accentuat deasupra
   fiecarei coloane, ca pe o rigla. Cutiile cu chenar faceau din ele un
   tabel fara cap de tabel. */
/* Sase dale, deci sase coloane declarate. Cu `auto-fit` incapeau cinci si a
   sasea ramanea singura pe randul doi, langa un gol cat toata pagina --
   arata a defect, si era. Pragurile coboara la trei si la doua. */
.tiles{
  display:grid;grid-template-columns:repeat(6,1fr);
  gap:0 2px;margin:0;align-items:start;
}
@media (max-width:1040px){.tiles{grid-template-columns:repeat(3,1fr);row-gap:22px}}
@media (max-width:620px){.tiles{grid-template-columns:repeat(2,1fr);row-gap:20px}}
.tile{padding:16px 22px 4px;border-top:1px solid var(--line)}
.tile dt{
  font-family:var(--mono);
  font-size:var(--fs-2xs);letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:10px;
  /* Doua randuri de eticheta nu trebuie sa coboare cifra fata de vecine. */
  min-height:2.6em;
}
.tile dd{
  margin:0;font-family:var(--display);
  font-size:var(--fs-h2);font-weight:600;
  color:var(--ink);letter-spacing:-.02em;font-variant-numeric:tabular-nums;
  line-height:1.02;
}
/* Cifra isi tine latimea cat numara, ca dala sa nu tresara la fiecare
   cadru cand trece de la trei la patru caractere. */
/* Cifra e vizibila din HTML. Miscarea se adauga peste, prin `.is-in`, pus de
   JavaScript cand dala ajunge pe ecran -- deci fara JavaScript, fara
   IntersectionObserver, sau daca ceva pica pe drum, cifra ramane exact unde
   e, la valoarea ei adevarata. Starea de start traieste in keyframe, nu
   intr-o regula de baza: nicio clipa in care foaia ascunde o cifra pe care
   nimeni n-o mai aprinde. Vezi si NOTES.md, "Mediul de test minte". */
.tile-n{font-variant-numeric:tabular-nums;display:inline-block}
.tile-n.is-in{
  animation:tile-in var(--dur-mid) var(--ease-out) both;
}
@keyframes tile-in{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:none}
}
/* Ridica masca de pe banda de taburi cand s-a ajuns la capatul derularii.
   Condusa de pozitia derularii, nu de timp -- vezi `.tabs` in blocul de 900px. */
@keyframes tabs-fade{
  to{mask-image:linear-gradient(to right,#000 100%,#000);
     -webkit-mask-image:linear-gradient(to right,#000 100%,#000)}
}
.tile dd small{
  display:block;font-family:var(--sans);font-size:var(--fs-xs);font-weight:400;
  color:var(--ink-3);letter-spacing:0;margin-top:8px;line-height:1.4;
}

/* ------------------------------------------------------------ filtre */

.filters{
  display:flex;flex-wrap:wrap;gap:14px 18px;align-items:flex-end;
  padding:16px 18px;background:var(--paper-2);
  border:1px solid var(--line);border-radius:var(--radius);margin-bottom:26px;
}
.field{display:flex;flex-direction:column;gap:5px;min-width:150px}
.field label{
  font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3);
}
select,input[type=number],input[type=text],
input[type=email],input[type=password]{
  font:inherit;font-size:var(--fs-md);color:var(--ink);background:var(--paper);
  border:none;border-radius:var(--radius-md);padding:9px 11px;min-width:150px;
  appearance:none;-webkit-appearance:none;
  box-shadow:inset 0 0 0 1px var(--line-strong);
  transition:box-shadow var(--dur-fast) var(--ease-out);
}
select{
  padding-right:30px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2374857c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;
}
input[type=number]{-moz-appearance:textfield}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
select:hover,input[type=number]:hover,input[type=text]:hover,
input[type=email]:hover,input[type=password]:hover{
  box-shadow:inset 0 0 0 1px var(--ink-3);
}
select:focus,input[type=number]:focus,input[type=text]:focus,
input[type=email]:focus,input[type=password]:focus{
  outline:none;
  box-shadow:inset 0 0 0 1px var(--accent),0 0 0 3px var(--accent-wash);
}
.go{display:flex;gap:9px;margin-left:auto}

/* ------------------------------------------------------------ listari */

/* Randul e unitatea. Coloanele sunt aliniate ca sa se poata compara
   putere cu putere si stadiu cu stadiu de sus in jos, fara sa reciteste
   fiecare element. */
.listings{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}

.listing{
  display:grid;
  grid-template-columns:34px minmax(0,1.05fr) 104px 176px minmax(0,1.3fr);
  align-items:center;gap:16px;
  padding:15px 20px;text-decoration:none;
  border-bottom:1px solid var(--line);
  transition:background var(--dur-fast) var(--ease-out);
}
.listing:last-child{border-bottom:none}
.listing:hover{background:var(--paper-2)}

.listing-icon{color:var(--accent);display:flex;align-items:center}
.listing-name{
  color:var(--ink);font-weight:640;font-size:var(--fs-md);letter-spacing:-.012em;
  /* Se lasa sa treaca pe randul urmator: pe telefon, tehnologia plus
     eticheta de proprietar plus codul RO-P... nu incap pe un rand, si ieseau
     din ecran in loc sa se aseze dedesubt. */
  display:flex;align-items:center;gap:6px 9px;min-width:0;flex-wrap:wrap;
}
.listing-mw{
  font-family:var(--mono);font-variant-numeric:tabular-nums;
  color:var(--ink);font-size:var(--fs-md);text-align:right;white-space:nowrap;
}
.listing-stage{color:var(--ink-2);font-size:var(--fs-md)}
.listing-where{
  color:var(--ink-3);font-size:var(--fs-sm);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* Semnal, nu decoratie: apare doar cand chiar stim proprietarul din
   registrul guvernamental. Cine e ramane ascuns pana la o expresie de
   interes acceptata. */
/* „Proprietar" -- semnul ca titularul e cunoscut din registru.
   Era o pastila verde plina, si intr-o lista se repeta pe cinci randuri din
   sapte: cel mai colorat lucru din tabel ajungea sa fie steagul care apare
   aproape peste tot, nu cifra dupa care se compara. Ramane marca, dar ca
   contur -- se vede cand il cauti, nu striga cand nu-l cauti. */
.flag{
  font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);
  border:1px solid var(--line-strong);border-radius:var(--radius-pill);
  padding:1px 7px;white-space:nowrap;flex:none;
}

/* Titularii din registrul guvernamental sunt localizati doar la nivel de
   judet. Se spune, nu se ascunde -- un cumparator care compara doua listari
   trebuie sa stie ca una e la stalp si cealalta undeva in judet. */
.approx{font-style:italic;opacity:.75}

/* Codul citabil al listarii, in tiparul ID-ului de la Milk the Sun.
   Discret: e util cand ai nevoie de el, nu cand scanezi lista. */
.ref{
  font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:.06em;
  color:var(--ink-3);font-weight:400;flex:none;
}

/* Numarul de rezultate si sortarea, deasupra listei -- Milk the Sun le are
   pe amandoua si e primul lucru care lipsea la noi. */
.resultbar{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  justify-content:space-between;margin-bottom:14px;
}
.resultbar .count{color:var(--ink-2);font-size:var(--fs-md)}

/* Randul de companie n-are unde sa duca -- directorul e informativ, nu o
   lista de listari. Deci nu e link si nu isi schimba fundalul la trecerea
   cursorului: un element care raspunde la hover promite un clic. */
.listing.company{cursor:default}
.listing.company:hover{background:var(--paper)}
.resultbar .count strong{color:var(--ink);font-variant-numeric:tabular-nums}
.sorter{display:flex;align-items:center;gap:9px}
.sorter label{
  font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3);
}
.sorter select{min-width:170px;padding:6px 9px}

/* Aglomerarea la punctul de racordare. Ideea barelor vine de la
   indicatorul de pret al Milk the Sun; continutul e al nostru, pentru ca
   preturi de tranzactie n-avem, dar disputa pe nodul de retea da. */
.loadmeter{
  margin-top:16px;padding-top:16px;border-top:1px solid var(--line);
}
.loadmeter-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.loadmeter-head .label{
  font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);
}
.loadmeter-head strong{color:var(--ink);font-size:var(--fs-md);font-weight:640}
.loadmeter-bars{display:inline-flex;gap:3px}
.loadmeter-bars .bar{
  width:16px;height:7px;border-radius:var(--radius-pill);background:var(--line-strong);
}
.loadmeter-bars .bar.on{background:var(--accent)}

.empty{padding:40px 20px;text-align:center;color:var(--ink-3)}

.pager{
  display:flex;align-items:center;gap:16px;margin-top:22px;
  color:var(--ink-3);font-size:var(--fs-md);
}
.pager span{margin:0 auto}

/* ------------------------------------------------------------ fisa proiect */

.panel{
  border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 24px;background:var(--paper);
}
.panel + .panel{margin-top:16px}
.panel h3{margin-bottom:14px}

.spec{display:grid;grid-template-columns:minmax(150px,auto) 1fr;gap:11px 24px}
.spec dt{color:var(--ink-3);font-size:var(--fs-md)}
.spec dd{
  margin:0;color:var(--ink);font-weight:560;
  font-variant-numeric:tabular-nums;font-size:var(--fs-md);
}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.chip{
  font-size:var(--fs-sm);color:var(--ink-2);background:var(--paper-2);
  border:1px solid var(--line);border-radius:var(--radius-pill);padding:4px 12px;
}
.chip.good{color:var(--good);border-color:var(--good-line);background:var(--good-wash)}
.chip.warn{color:var(--warn);border-color:#e8d2b4;background:var(--warn-wash)}

.locked{
  background:var(--paper-2);border:1px solid var(--line);
  border-radius:var(--radius);padding:16px 18px;color:var(--ink-3);
  font-size:var(--fs-md);margin-top:16px;
}
.locked strong{color:var(--ink);font-weight:640}

/* Fisa de proiect: continut la stanga, decizia la dreapta. Coloana din
   dreapta ramane in campul vizual cat timp se citesc specificatiile, ca la
   nTeaser -- acolo se afla si butonul de expresie de interes, si motivul
   pentru care proprietarul nu e afisat. */
.detail{
  display:grid;grid-template-columns:minmax(0,1.85fr) minmax(280px,1fr);
  gap:22px;align-items:start;
}
.detail > div:last-child{position:sticky;top:88px}

@media (max-width:900px){
  .detail{grid-template-columns:1fr}
  .detail > div:last-child{position:static}
}

/* ------------------------------------------------------------ subsol */

/* Subsolul inchide pagina asa cum bara de sus o deschide: aceleasi coloane,
   acelasi vocabular de etichete. Culoarea difera intentionat -- banda de
   erou e verdele de brand, subsolul e aproape negru. Daca ar fi acelasi
   verde, pagina s-ar termina intr-un ecou al inceputului; asa se termina
   intr-un capat. */
/* Harta pe toata latimea ecranului. Era intr-un card de 1120px, adica
   ilustratie; la latime intreaga e obiectul principal al paginii. */
/* `100vw` include latimea barei de derulare, deci pe un ecran cu bara vizibila
   fasia iese cu vreo 15px in dreapta si pagina capata derulare pe orizontala.
   Nu se vede ca greseala -- se vede ca o bara jos care n-ar trebui sa fie
   acolo. `100%` pe un parinte deja lat de tot cadrul da acelasi rezultat fara
   surpriza; `clip` pe radacina prinde si urmatoarea fasie care va uita. */
/* Harta si lista, una langa alta.
   Inainte harta trecea pe toata latimea ecranului si ocupa singura un ecran
   intreg -- mare, palida, fara legenda si fara niciun nume pe ea. Marimea nu
   e informatie: o harta de tara la 1.400px spune exact cat una la 620px, doar
   ca lasa loc pentru intrebarea „si ce sa fac cu asta". Acum imparte randul
   cu clasamentul, si amandoua raspund la aceeasi intrebare. */
.mapduo{
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:44px;align-items:start;margin-top:28px;
}
.mapfig{margin:0}
.mapfig .minimap{width:100%;height:auto;display:block}

/* Legenda coropletei. Cifra sta la marginea din stanga a treptei ei --
   pragul de la care incepe, nu mijlocul intervalului. */
.mapkey{display:block;margin-top:14px}
.mk-label{
  display:block;font-family:var(--mono);font-size:var(--fs-2xs);
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
  margin-bottom:6px;
}
.mk-ramp{display:grid;grid-template-columns:repeat(5,1fr);max-width:320px}
.mk-ramp i{display:block;height:10px}
.mk-ax{
  display:grid;grid-template-columns:repeat(5,1fr);max-width:320px;
  font-family:var(--mono);font-size:var(--fs-2xs);color:var(--ink-3);
  margin-top:5px;
}
.mk-ax b{font-weight:400}
/* Al doilea rand din legenda: bulinele. Legenda avea doar scara de culoare,
   deci al doilea strat de pe harta nu era numit nicaieri -- si un strat
   nenumit e un strat pe care fiecare il citeste cum vrea. */
.mk-dot{display:flex;align-items:center;gap:8px;margin-top:12px;
  font-size:var(--fs-xs);color:var(--ink-2)}
.mk-dot i{display:block;width:11px;height:11px;border-radius:50%;
  background:var(--wash);opacity:.85;
  box-shadow:0 0 0 .9px var(--paper);flex:none}

/* Clasamentul. Barele impart acelasi maxim, deci lungimea se compara direct
   intre randuri; culoarea e treapta judetului de pe harta. */
.cr-list{list-style:none;margin:6px 0 0;padding:0;
  counter-reset:none;display:flex;flex-direction:column}
.cr-list a{
  display:grid;grid-template-columns:9.5ch minmax(0,1fr) 6.5ch;
  gap:12px;align-items:center;
  padding:9px 8px;margin:0 -8px;border-radius:var(--radius-sm);
  text-decoration:none;color:var(--ink);
  transition:background var(--dur-fast) var(--ease-out);
}
.cr-list a:hover{background:var(--brand-wash)}
.cr-n{font-size:var(--fs-sm);font-weight:600;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.cr-bar{display:block;height:11px;background:var(--paper-3);
  border-radius:var(--radius-pill);overflow:hidden}
.cr-bar i{display:block;height:100%;border-radius:0 var(--radius-pill) var(--radius-pill) 0;
  transform-origin:left center;
  transition:transform 620ms var(--ease-out)}
@media (prefers-reduced-motion:reduce){
  .cr-bar i{transition:none}
}
.cr-v{font-family:var(--mono);font-size:var(--fs-xs);color:var(--ink-2);
  text-align:right;font-variant-numeric:tabular-nums}

@media (max-width:900px){
  .mapduo{grid-template-columns:minmax(0,1fr);gap:28px}
}

/* Fasia de densitate. Nu are chenar si nu are grila: forma e informatia. */
.stripsec{padding-top:56px}
.strip{width:100%;height:auto;display:block;margin:6px 0 0}
.strip .s-valid{fill:var(--good)}
.strip .s-exp{fill:var(--warn)}
.strip .s-unk{fill:var(--unknown)}
.strip-key{list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px;
  margin:14px 0 0;padding:0;font-family:var(--mono);font-size:var(--fs-2xs);
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.strip-key li{display:flex;align-items:center;gap:7px}
.strip-key .sw{width:9px;height:9px;flex:none}
.strip-key .s-valid{background:var(--good)}
.strip-key .s-exp{background:var(--warn)}
.strip-key .s-unk{background:var(--unknown)}

/* Colofonul. Etichete mono peste raspunsuri scurte -- aceeasi voce ca barele
   colectoare din pagina, deci subsolul nu e alt sistem lipit la capat. */
/* Subsolul, refacut pe 24 august 2026: bara de deschidere, patru coloane,
   randul de surse, bara de jos. Inainte era marca plus trei liste de linkuri
   pe un rand -- adica un subsol de brosura, in care ultimul lucru pe care il
   vede omul e o lista de pagini.

   Marca IESE din grila de coloane si urca intr-un rand al ei, cu indemnul in
   dreapta. Asa coloanele sunt egale intre ele (patru roluri, patru latimi
   egale) in loc sa fie 1.5fr + 3 x 1fr, unde prima coloana era mai lata doar
   fiindca tinea si marca. */
/* Cinci coloane: marca, apoi cele patru liste. Marca ia mai mult, fiindca
   tine si o propozitie; listele sunt egale intre ele. Pe un ecran lat,
   `space-between` intre doua blocuri le arunca la capete cu un gol cat
   pagina la mijloc -- de-aia subsolul e o GRILA, nu doua etaje. */
.foot-grid{
  display:grid;grid-template-columns:1.4fr repeat(4,minmax(0,1fr));
  gap:36px 40px;align-items:start;
}

/* Randul de surse. Pe un produs de date nu e nota de subsol, e dovada: cine
   coboara pana aici ca sa vada „de unde stiti" trebuie sa gaseasca raspunsul
   fara sa mai dea un clic. */
.foot-src{
  display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;
  margin-top:var(--sp-band);padding-top:var(--sp-block);
  border-top:1px solid var(--slab-line);
}
.foot-src-k{
  font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--slab-label);flex:none;
}
.foot-src-v{color:var(--slab-label);font-size:var(--fs-xs);line-height:1.6;
  flex:1 1 340px;min-width:0}
.foot-stamp{
  font-family:var(--mono);font-size:var(--fs-2xs);color:var(--slab-label);
  flex:none;
}
.foot-stamp b{color:var(--slab-ink);font-weight:400}
.foot-mail a{color:var(--slab-ink);text-decoration:none}
.foot-mail a:hover{color:#fff;text-decoration:underline}

@media (max-width:1080px){
  /* Marca trece pe tot randul, listele raman patru dedesubt. */
  .foot-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .foot-grid > .foot-brand{grid-column:1 / -1}
}
@media (max-width:760px){
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.foot-brand .brand{color:var(--slab-ink);font-size:var(--fs-h4)}
.foot-brand .brand span{color:var(--brand-light)}
.foot-brand p{
  margin:12px 0 0;font-size:var(--fs-sm);color:var(--slab-label);
  line-height:1.65;max-width:34ch;
}
.foot-grid h3{
  font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--slab-label);font-weight:400;
  margin:0 0 12px;
}
.foot-grid ul{list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:9px}
.foot-grid a{
  color:var(--slab-ink);text-decoration:none;font-size:var(--fs-sm);
  transition:color var(--dur-fast) var(--ease-out);
}
.foot-grid a:hover{color:#fff;text-decoration:underline;
  text-decoration-color:var(--brand-light);text-underline-offset:3px}

@media (max-width:820px){
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}
  .foot-brand{grid-column:1 / -1}
}

/* Pe marketplace subsolul sta in coloana care se deruleaza, langa bara
   laterala, nu sub ea. Are nevoie de aer deasupra: acolo se termina un tabel,
   nu o sectiune cu padding. */
.app-main > footer.site{margin-top:56px}
footer.site .bus{border-top-color:var(--slab-line)}
footer.site .bus > b{color:var(--slab-ink)}
footer.site .bus > span{color:var(--slab-label)}

/* Subsolul sta pe aceeasi hartie ca restul paginii. Banda inchisa a fost
   decizia mea, nu era in prototipul aprobat, si facea din subsol al treilea
   sistem de culoare pe pagina. Colofonul n-are nevoie de fundal ca sa se
   distinga -- il distinge bara colectoare de deasupra lui. */
footer.site{
  background:var(--slab);padding:40px 0 44px;
  color:var(--slab-ink);font-size:var(--fs-sm);
  position:relative;
}
.foot-bar{
  border-top:1px solid var(--slab-line);margin-top:38px;padding-top:22px;
  display:flex;flex-wrap:wrap;gap:8px 40px;align-items:baseline;
}
.foot-bar p{margin:0;color:var(--slab-label);font-size:var(--fs-xs);line-height:1.6}
.foot-legal{max-width:74ch}

@media (max-width:900px){
    }

/* ------------------------------------------------------------ tabele */

.scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius)}
table{border-collapse:collapse;width:100%;min-width:760px;font-size:var(--fs-md)}
th,td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--line);
      color:var(--ink-2)}
thead th{
  background:var(--paper-2);color:var(--ink-3);font-weight:600;
  font-family:var(--mono);font-size:var(--fs-2xs);
  letter-spacing:.11em;text-transform:uppercase;
}
tbody tr:last-child td{border-bottom:none}
td.num{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink)}

/* ------------------------------------------------------------ doua drumuri */

/* Sub cautare, in erou. Cine intra stie deja de ce parte a mesei sta;
   pagina generala l-ar pune sa caute singur. */
.path{
  display:flex;flex-direction:column;gap:7px;text-decoration:none;
  padding:20px 22px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--paper);transition:border-color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out);
}
.path:hover{border-color:var(--accent);background:var(--accent-wash)}

/* ------------------------------------------------------------ capabilitati */

/* Sase capabilitati. Erau o grila de casute identice, lipite prin linii --
   se citea ca un tabel si nu se uita nimeni la ea. Acum sunt carduri
   separate, cu pictograma intr-o pastila si cu marginea care se aprinde la
   trecerea cursorului: ochiul are unde sa se opreasca. */
/* Titlul intr-o coloana, continutul in cealalta. Sectiunile care erau un
   titlu lat cat pagina peste o grila de casute identice aratau a sablon,
   pentru ca asta si erau. Asimetria da paginii un ax si tine titlul la
   vedere cat timp citesti lista de langa el. */
.split{
  display:grid;grid-template-columns:minmax(250px,.78fr) 1.6fr;
  gap:22px 64px;align-items:start;
}
.split-head{position:sticky;top:96px}
.split-head h2{margin-bottom:12px}
.split-head .sub{margin-bottom:22px}

.features{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));
  gap:14px;
}
.feature{
  background:var(--paper);padding:26px 24px 28px;
  border:1px solid var(--line);border-radius:var(--radius);
  transition:border-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out);
}
/* Cardurile de pe /resurse sunt legaturi intregi, nu blocuri cu un link
   inauntru: tinta de atingere e tot cardul, si pe telefon asta conteaza. */
a.feature{display:block;color:inherit;text-decoration:none}
.feature:hover{
  border-color:var(--accent);transform:translateY(-2px);
  box-shadow:0 6px 22px -14px rgba(36,27,35,.5);
}
.feature-icon{
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:var(--radius-md);
  background:var(--accent-wash);color:var(--accent);margin-bottom:16px;
}
.feature-icon svg{display:block}
/* Titlul unui card e treapta a treia din scara, deci `--fs-h4` ca orice h3.
   Statea pe `--fs-lg`, cu o treapta mai jos, si asta stergea diferenta dintre
   titlul cardului si textul dinauntru. */
.feature h3{margin-bottom:8px}
.feature p{margin:0;color:var(--ink-2);font-size:var(--fs-md)}
/* Cele trei carduri stau acum sub fasia de inventar, in aceeasi sectiune, nu
   intr-una a lor. Deci au nevoie de o distanta care sa spuna „inca sunt cu
   desenul de deasupra", nu de aerul dintre doua sectiuni. */
.stripsec > .wrap > .features{margin-top:var(--sp-band)}
/* Trei carduri intr-un bento croit pentru sase.

   `.features` e o grila de SASE coloane, in care primul card tine 3, al
   doilea 3, si restul cate 2 -- asimetria e voita si arata bine la sase
   dale. La trei, aceleasi reguli dau 3+3 pe primul rand si un orfan de 2 pe
   al doilea.

   Prima mea reparatie a fost sa scriu alt `grid-template-columns` aici. A
   fost gresita de doua ori: cardurile isi pastrau `span`-urile, deci primul
   ocupa toata latimea; si, mai rau, selectorul (0,3,0) ar fi batut resetul
   de pe telefon scris `.features` (0,1,0) -- exact greseala descrisa in
   comentariul de la `.split .features`, a treia oara in aceeasi foaie.

   Deci nu se atinge template-ul, se ating doar `span`-urile: trei carduri a
   cate doua coloane din sase fac trei treimi egale. Si se scrie inauntrul
   unui `min-width`, ca sub prag regula sa nu existe deloc si mediile de
   telefon de mai jos sa ramana singurele care hotarasc. */
@media (min-width:1001px){
  .stripsec > .wrap > .features > .feature,
  .stripsec > .wrap > .features > .feature:first-child,
  .stripsec > .wrap > .features > .feature:nth-child(2){grid-column:span 2}
  /* Trei intrebari egale ca greutate primesc carduri egale: primul card isi
     lasa tratamentul de dala mare (halou + padding mai gros), care exista ca
     sa poarte o asimetrie pe care aici n-o mai avem. */
  .stripsec > .wrap > .features > .feature:first-child{
    border-radius:var(--radius);padding:26px 24px 28px;background:var(--paper);
  }
}

/* Cele trei argumente de pe o usa. Aceeasi aritmetica ca la fasia de
   inventar de pe prima pagina: `.features` e un bento pe sase coloane, si
   trei carduri ies 3+3 pe primul rand cu un orfan de 2 pe al doilea. Trei
   `span` de cate doua fac trei treimi egale.

   Scris intr-un `min-width`, ca sub prag regula sa nu existe deloc si
   mediile de telefon sa ramana singurele care hotarasc -- vezi NOTES.md,
   „Grila care avea deja un sistem de `span`". */
@media (min-width:1001px){
  /* Se scrie `.features.doorpoints`, nu `.doorpoints` singur. Regulile de
     bento traiesc mai JOS in foaie (`.features > .feature:first-child`), si
     la specificitate egala -- (0,3,0) amandoua -- castiga cea de jos. Lipita
     de `.features` urca la (0,4,0) si castiga indiferent de ordine, ceea ce
     conteaza fiindca blocul asta sta sus. A patra oara aceeasi aritmetica. */
  .features.doorpoints > .feature,
  .features.doorpoints > .feature:first-child,
  .features.doorpoints > .feature:nth-child(2){grid-column:span 2}
  /* Trei argumente de aceeasi greutate primesc carduri egale: primul isi
     lasa haloul si padding-ul mai gros, care existau ca sa poarte o
     asimetrie pe care aici n-o mai avem. */
  .features.doorpoints > .feature:first-child{
    border-radius:var(--radius);padding:26px 24px 28px;background:var(--paper);
  }
}

/* A cincea oara aceeasi aritmetica -- deci de data asta primeste un nume.

   `.trio` inseamna „grila asta are exact trei carduri de greutate egala".
   `.stripsec > .wrap > .features` si `.features.doorpoints` de mai sus fac
   FIX acelasi lucru, fiecare cu selectorul lui; cine le mai atinge o data ar
   trebui sa le puna si pe ele `.trio` in marcaj si sa stearga cele doua
   blocuri. N-am facut-o acum ca sa nu ating marcaj care merge, dar asta e
   directia -- altfel a sasea sectiune cu trei carduri scrie a sasea copie.

   Aceleasi doua reguli ca la surorile ei: `span 2` din sase face treimi
   egale, si primul card isi lasa tratamentul de dala mare, care exista ca sa
   poarte o asimetrie pe care la trei carduri n-o avem. Lipit de `.features`
   ca sa urce la (0,4,0) si sa bata regulile de bento de mai jos. */
@media (min-width:1001px){
  .features.trio > .feature,
  .features.trio > .feature:first-child,
  .features.trio > .feature:nth-child(2){grid-column:span 2}
  .features.trio > .feature:first-child{
    border-radius:var(--radius);padding:26px 24px 28px;background:var(--paper);
  }
}

/* Pretul de pe cardul unui plan. Cifra e argumentul, deci se citeste inaintea
   textului de sub ea, nu dupa. */
.planprice{
  margin:0 0 6px;font-size:var(--fs-h4);color:var(--ink);
  font-variant-numeric:tabular-nums;
}

/* Randul de vanzator (`.hero-sell`) a stat aici pana pe 24 august 2026.
   A plecat odata cu marcajul lui: intrarea vanzatorului e din nou un tab in
   erou, nu o propozitie sub bara de cautare. */

/* ------------------------------------------------------------ cele doua usi */

/* Doua carduri late, nu trei-patru mici: sunt exact doua parti intr-o piata,
   iar numarul de carduri e o afirmatie despre lume, nu o alegere de asezare.
   Se despart de `.feature` prin marime si prin faptul ca poarta un verb --
   „Cumperi" / „Vinzi" -- nu un substantiv de functie. */
.doors{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:var(--sp-gap);margin-top:var(--sp-band);
}
.door{
  display:flex;flex-direction:column;gap:var(--sp-tight);
  padding:var(--sp-block) var(--sp-block) var(--sp-gap);
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);color:inherit;text-decoration:none;
  transition:border-color var(--dur-fast) var(--ease-out),
             transform var(--dur-fast) var(--ease-out);
}
.door:hover{border-color:var(--accent);transform:translateY(-2px)}
.door > b{
  font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:.16em;
  text-transform:uppercase;color:var(--brand-light);font-weight:600;
}
.door > span{font-size:var(--fs-h4);line-height:1.35;color:var(--ink);
  max-width:26ch}
.door > i{
  display:flex;align-items:center;gap:6px;margin-top:auto;
  padding-top:var(--sp-item);
  font-style:normal;font-size:var(--fs-sm);color:var(--ink-3);
}
.door:hover > i{color:var(--accent)}

/* ------------------------------------------------------------ flux scurt */

/* Patru pasi in linie. Numerotarea e justificata: ordinea e informatie --
   nu ceri legatura inainte sa gasesti proiectul. */
.flow{
  list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 28px;
}
/* Linia trece prin toti pasii si se opreste la ultimul: drumul chiar are un
   capat. Cifra sta pe linie, nu langa ea -- de aia e desenata cu fundal de
   culoarea hartiei, ca sa decupeze linia din spate. */
.flow li{position:relative;padding:48px 0 0}
.flow li::before{
  content:"";position:absolute;top:19px;left:0;right:-28px;height:1px;
  background:var(--line-strong);
}
.flow li:last-child::before{right:0}
.flow-n{
  position:absolute;top:0;left:0;
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--paper);border:1px solid var(--accent);
  font-family:var(--mono);font-size:var(--fs-xs);color:var(--accent);
  font-variant-numeric:tabular-nums;
}
.flow h3{margin-bottom:6px}
.flow p{margin:0;color:var(--ink-2);font-size:var(--fs-md);max-width:34ch}

/* ------------------------------------------------------------ intrebari */

/* Intrebarile. Erau randuri albe cu un plus in dreapta -- adica un
   accordeon de sablon. Intrebarea e acum in serif, la marimea la care se
   citeste ca text, semnul e o pastila care se roteste, iar raspunsul
   deschis primeste o linie de accent in stanga: se vede din capul paginii
   care intrebare e desfacuta. */
/* Un singur obiect, nu sase dreptunghiuri.
   Erau `details` albe, cu chenar de un pixel, asezate pe nisip: sase
   pastile albe cu muchie taiata drept, fiecare cu umbra ei de contur. Acum e
   o suprafata rotunjita cu despartitoare inauntru -- se citeste ca un panou,
   si nisipul de sub el are ce sa incadreze. */
.faq{
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius-md);overflow:hidden;
  box-shadow:var(--shadow-rest);
}
.faq details{background:none}
.faq details + details{border-top:1px solid var(--line)}
.faq summary{
  cursor:pointer;padding:20px 22px;color:var(--ink);
  font-size:var(--fs-lg);font-weight:620;
  letter-spacing:-.008em;line-height:1.35;
  list-style:none;display:flex;align-items:center;justify-content:space-between;
  gap:20px;transition:color var(--dur-fast) var(--ease-out);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex:none;width:26px;height:26px;border-radius:50%;
  border:1px solid var(--line-strong);
  background:
    linear-gradient(var(--accent),var(--accent)) center/11px 1.5px no-repeat,
    linear-gradient(var(--accent),var(--accent)) center/1.5px 11px no-repeat;
  transition:border-color var(--dur-fast) var(--ease-out),background-size var(--dur-mid) var(--ease-out);
}
.faq summary:hover{color:var(--accent)}
.faq summary:hover::after{border-color:var(--accent)}
/* Deschis: bara verticala se strange la zero, deci plusul devine minus
   printr-o singura tranzitie, nu prin doua glife schimbate una cu alta. */
.faq details[open] summary::after{
  border-color:var(--accent);background-size:11px 1.5px,1.5px 0;
}
.faq details[open] summary{color:var(--accent)}
.faq details p{
  margin:0 22px 22px;padding-left:18px;color:var(--ink-2);max-width:74ch;
  border-left:2px solid var(--brand-line);
}
.faq details[open]{background:var(--brand-wash)}

section.cta{text-align:left}
section.cta .claim{max-width:20ch}

/* ------------------------------------------------------------ harta mica */

/* Versiunea statica a hartii, desenata la build. Nu are filtre si nu are
   interactiune -- e o invitatie catre /harta, nu un inlocuitor. Culorile
   vin din foaia de stil pentru ca SVG-ul e inserat in pagina, nu incarcat
   ca imagine. */
/* Harta mica, in capul primei pagini. Nu mai e ilustratie: fiecare judet e
   o legatura, deci raspunde la cursor si la tastatura. */
.minimap{display:block;width:100%;height:auto}
.mm-county path{transition:filter var(--dur-fast) var(--ease-out)}
.mm-county:hover path{filter:brightness(.88) saturate(1.25)}
.mm-county:focus-visible{outline:none}
.mm-county:focus-visible path{filter:brightness(.88) saturate(1.25);stroke:var(--ink);stroke-width:1.4}
.minimap .nodes{pointer-events:none}

/* Cele trei intrari rapide din erou. Intrebari, nu etichete de client. */
.quick{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0}
.quick a{
  display:inline-block;padding:7px 14px;border-radius:var(--radius-pill);
  text-decoration:none;font-size:var(--fs-sm);color:var(--ink-2);
  background:var(--head-2);
  box-shadow:inset 0 0 0 1px var(--brand-line);
  transition:background var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-fast) var(--ease-out);
}
.quick a:hover{background:var(--head-3);color:var(--brand-ink);
  box-shadow:inset 0 0 0 1px #9fcdc6}
/* Uscatul se ia din `--land`, ca pe harta mare, nu din suprafata paginii.
   Cat timp suprafetele erau tot verzi, cele doua coincideau si nu se vedea
   diferenta; de cand cadrul e neutru, `--paper-2` ar fi facut din minihartă o
   pata neutra langa harta mare verde. Uscatul e uscat pe amandoua. */
.minimap .land{fill:var(--land);stroke:var(--line-strong);stroke-width:1.2;
  stroke-linejoin:round}
/* Bulinele sunt PROIECTE, nu statii, si trebuie sa se vada ca sunt altceva
   decat judetul de sub ele: turcoazul viu, cu inel de hartie ca doua vecine
   sa nu se topeasca una in alta. */
.minimap .nodes circle{fill:var(--wash);fill-opacity:.85;
  stroke:var(--paper);stroke-width:.9}
/* Judetele cu capacitate cunoscuta doar la nivel de judet. Aceeasi regula ca
   pe harta mare: date de judet, desenate ca judet, nu ca bila in centroid. */
/* Tenta judetului inseamna acum cata putere s-a cerut in el -- acelasi lucru
   ca pe harta mare, aceleasi praguri. Era gri (`--altele`, "tehnologie
   nepublicata") de pe cand umbra insemna doar capacitate fara pozitie.
   Regula asta e mai specifica decat `.mm-county path`, deci ea decide
   culoarea; opacitatea vine de la fiecare judet, din desen. */
/* Fara `fill` aici: vine din `style`, treapta cu treapta, ca pe harta mare. */
.minimap .wash path{stroke:var(--paper);stroke-width:.6;stroke-opacity:.9}

/* ------------------------------------------------------------ grafic */

.chart{margin:0}
.chart svg{display:block;width:100%;height:auto;overflow:visible}

/* Fraza care spune graficul in cuvinte, inainte sa-l citesti.
   A fost pe fontul de titlu, la 21,6px, cand toate celelalte sectiuni isi
   scriu introducerea cu gri la 16,5px. Acelasi rol in pagina, doua
   tratamente diferite: exact ce se citeste ca "un scris mai mare, altul mai
   mic". Acum arata ca orice alta introducere de sectiune, iar accentul il
   duc cifrele ingrosate, nu marimea. */
.chart-lead{
  color:var(--ink-2);line-height:1.62;max-width:66ch;margin:0 0 18px;
}
.chart-lead strong{
  font-weight:640;color:var(--ink);font-variant-numeric:tabular-nums;
}


/* Judetele unei zone poarta aceeasi umplere, iar linia dintre ele e de
   culoarea hartiei: zona se citeste ca o singura suprafata, fara sa fie
   nevoie sa reunim poligoanele. */
/* Umbra ridica tara de pe hartie. E singurul efect de pe harta si sta pe
   grupul intreg, nu pe fiecare judet, ca sa nu apara pe cusaturile dintre
   ele. */

/* Scara e secventiala: o singura nuanta, de la deschis la inchis. Nu mai
   sunt doua tabere de comparat, de cand disponibilul publicat oficial e zero
   in toate zonele; ce diferentiaza zonele e marimea cozii. Luminozitatea
   scade monoton, deci treptele se despart si tiparite alb-negru. */
/* Treptele sunt distantate ca sa se desparta si pentru un daltonist:
   ΔE minim intre vecine 16,5 la deuteranopie, 17,1 la vedere normala.
   Prima incercare avea 13,6 intre treptele din mijloc si se topeau una in
   alta. */



/* Eticheta sta pe suprafata, deci culoarea ei depinde de cat de inchisa e
   suprafata de dedesubt -- nu de o regula unica. */
.step{
  display:grid;grid-template-columns:56px 1fr;gap:20px;align-items:start;
  padding:24px 26px;background:var(--paper);
  border-bottom:1px solid var(--line);
}
.step:last-child{border-bottom:none}
.step-n{
  font-family:var(--display);font-size:var(--fs-h2);font-weight:600;line-height:1;
  color:var(--accent);font-variant-numeric:lining-nums;
}
.step h3{margin-bottom:5px}
.step p{margin:0;color:var(--ink-2)}

/* "Ce nu facem" -- pe banda, in patru coloane. Textul e scurt intentionat:
   fiecare e o promisiune negativa, si o promisiune negativa lunga suna a
   scuza. */
.nots{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:26px 30px;margin-top:26px;
}
.not h3{margin-bottom:6px}
.not h3::before{
  content:"—";color:var(--warn);margin-right:8px;font-weight:400;
}
.not p{margin:0;color:var(--ink-2);font-size:var(--fs-md)}

/* ------------------------------------------------------------ preturi */

/* Trei niveluri plus matrice de comparatie -- structura PF Nexus. Matricea
   conteaza mai mult decat cardurile: acolo se vede ce iei, si acolo se uita
   cineva care compara doua platforme. De aceea cardurile si matricea sunt o
   singura constructie, cu aceleasi coloane: cardul e capul de tabel. */

/* Comutatorul de perioada. Anual e implicit, si scrie de la inceput cat
   castigi -- nu se descopera dupa ce apesi. */
/* `margin:0 auto` a plecat: comutatorul sta acum intr-un `.periodbar`
   care il centreaza. Intr-un container flex, marginea automata inghite
   spatiul liber si impinge insigna de reducere la marginea paginii. */
.periods{
  display:inline-flex;gap:3px;padding:4px;margin:0 0 26px;
  background:var(--paper-2);border-radius:var(--radius-md);
  box-shadow:inset 0 0 0 1px var(--line);
}
.period-btn{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font:inherit;font-size:var(--fs-md);font-weight:600;color:var(--ink-2);
  background:none;border:none;border-radius:var(--radius-md);padding:9px 18px;
  transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out);
}
.period-btn:hover{color:var(--ink)}
.period-btn.is-on{
  background:var(--paper);color:var(--ink);
  box-shadow:0 1px 2px rgba(36,27,35,.1),0 2px 8px -4px rgba(36,27,35,.25);
}
.period-off{
  font-size:var(--fs-xs);font-weight:600;color:var(--accent);
  background:var(--accent-wash);border-radius:var(--radius-pill);padding:3px 9px;
}
.pricing{display:flex;flex-direction:column;align-items:center}
/* `.pricing` centreaza pe verticala tot ce contine (pentru comutatorul de
   perioada), deci fiecare copil care trebuie sa tina toata latimea si-o cere
   explicit. Banda gratuitului a lipsit din lista si iesea mai ingusta decat
   cardurile de sub ea -- doua margini diferite una sub alta. */
.pricing > .plans,.pricing > .matrix-wrap{width:100%}

/* Cele doua preturi stau amandoua in pagina; comutatorul schimba o clasa,
   nu cere nimic de la server. */
.plan-price[data-period],.plan-billed[data-period]{display:none}
.pricing[data-period="an"] [data-period="an"],
.pricing[data-period="luna"] [data-period="luna"]{display:block}

/* Gratuitul, intr-o banda lata deasupra: nu e a treia optiune dintr-un rand
   de trei, e temelia pe care stau celelalte doua. Pe un rand, nu pe o coloana,
   ca sa se citeasca dintr-o privire ca nu se compara cu ele. */

/* Doua roluri, doua coloane. `auto-fit` cu trei carduri dadea trei coloane
   egale -- sablonul; cu doua da exact doua, si asta e structura reala. */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.plan{
  position:relative;border-radius:var(--radius-md);
  padding:28px 24px 26px;background:var(--paper);
  display:flex;flex-direction:column;
  box-shadow:inset 0 0 0 1px var(--line);
  transition:box-shadow var(--dur-mid) var(--ease-out),transform var(--dur-mid) var(--ease-out);
}
.plan:hover{transform:translateY(-2px);
  box-shadow:inset 0 0 0 1px var(--line-strong),var(--shadow-lift)}
.plan h3{font-size:var(--fs-h4)}
.plan-who{color:var(--ink-3);font-size:var(--fs-md);margin:6px 0 20px;flex:1}

.plan-price{
  font-family:var(--display);font-weight:600;color:var(--ink);
  letter-spacing:-.03em;margin:0;line-height:1;
  display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
}
/* Pretul intreg, taiat, langa cel redus: se vede ce castigi fara sa fie
   nevoie sa compari doua ecrane. */
.pp-was{
  font-family:var(--sans);font-size:var(--fs-h4);font-weight:500;
  color:var(--ink-3);text-decoration:line-through;letter-spacing:0;
}
.pp-now{font-size:2.6rem}
.pp-unit{
  font-family:var(--sans);font-size:var(--fs-md);font-weight:400;
  color:var(--ink-3);letter-spacing:0;
}
.plan-billed{
  margin:10px 0 20px;font-size:var(--fs-sm);color:var(--ink-3);min-height:2.4em;
}
.plan-billed s{opacity:.7}
.plan-billed strong{color:var(--ink-2);font-weight:600}
.plan .btn{text-align:center}

/* Matricea continua coloanele cardurilor, deci latimile trebuie sa se
   potriveasca: prima coloana e eticheta, restul se impart egal. */
.matrix-wrap{margin-top:34px}
table.matrix{min-width:640px;table-layout:fixed}
table.matrix th:first-child{width:34%}
table.matrix td.mark,table.matrix th:not(:first-child){text-align:center}
table.matrix thead th{
  position:sticky;top:0;z-index:2;background:var(--paper-2);
}
table.matrix tbody th{
  font-weight:400;color:var(--ink-2);text-align:left;background:var(--paper);
}
table.matrix tr.group th{
  background:var(--paper-2);color:var(--ink);text-align:left;
  font-family:var(--mono);font-size:var(--fs-2xs);
  letter-spacing:.11em;text-transform:uppercase;font-weight:600;
}
table.matrix tbody tr:not(.group):hover th,
table.matrix tbody tr:not(.group):hover td{background:var(--paper-2)}
.matrix .yes{color:var(--accent);font-weight:700}
/* Linia din tabelul de comparatie inseamna „planul asta NU include", adica
   poarta exact atata informatie cat bifa de deasupra. Statea pe
   `--line-strong` -- un token de CHENAR, folosit ca si culoare de text -- si
   iesea la 1,7:1: pe ecranul unui laptop obisnuit, casuta arata pur si simplu
   goala, iar goala se citeste „nu s-a completat", nu „nu se include".
   Masurata cu ochiul nu se vedea; masurata in browser, a iesit prima. */
.matrix .no{color:var(--ink-faint)}

/* ------------------------------------------------------------ doua usi */

.door{
  border:1px solid var(--line);border-radius:var(--radius);padding:26px;
  background:var(--paper);
}
.door h3{margin-bottom:8px}
.door p{color:var(--ink-2);margin:0 0 18px}
.door ul{margin:0 0 18px;padding-left:20px;color:var(--ink-2)}
.door li{margin-bottom:6px}

/* ------------------------------------------------------------ raspuns */

@media (max-width:900px){
  .listing{
    grid-template-columns:28px minmax(0,1fr) auto;
    grid-template-areas:"icon name mw" ". stage stage" ". where where";
    gap:4px 12px;padding:14px 16px;
  }
  .listing-icon{grid-area:icon}
  .listing-name{grid-area:name}
  .listing-mw{grid-area:mw}
  .listing-stage{grid-area:stage}
  .listing-where{grid-area:where;white-space:normal}
  .tile{padding:18px 0 4px}
  .split{grid-template-columns:1fr;gap:26px}
  /* Comutatorul de perioada: eticheta cu reducerea trece sub text, altfel
     butonul se rupe pe doua randuri si iese strambat. */
  .periods{width:100%}
  .period-btn{flex:1;justify-content:center;padding:8px 6px;
    flex-direction:column;gap:3px;line-height:1.25}
  .period-off{font-size:var(--fs-2xs);padding:2px 7px}

  /* Cinci dale una sub alta inseamna un ecran intreg de derulat pentru
     cinci cifre. Doua pe rand incap fara sa se rupa. */
  .tiles{grid-template-columns:repeat(2,1fr);gap:0 14px}
  .tile dt{min-height:0}
  section.hero-flat.is-centered{padding:56px 0 84px}
  .split-head{position:static}
    nav.top > .wrap{gap:16px;overflow-x:auto}
  .go{margin-left:0}
}

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

/* ============================================================ APLICATIA

   Paginile de date au alta carcasa decat cele de prezentare: bara laterala
   intunecata, breadcrumb, tabel. E despartirea pe care o face si PF Nexus
   intre pfnexus.com si app.pfnexus.com, si are un motiv -- pe site cauti
   argumente, in aplicatie cauti randuri.
   ============================================================ */

body.app{
  display:grid;grid-template-columns:248px 1fr;min-height:100vh;
  background:var(--paper-2);
}

.side{
  background:var(--rail);color:var(--rail-ink);
  /* Pe tema deschisa bara are aceeasi hartie ca fisele, deci fara linie s-ar
     lipi de continut. Pe cea inchisa tokenul e transparent: acolo marginea o
     face diferenta de luminozitate. */
  border-right:1px solid var(--rail-edge);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
  overflow-y:auto;
}
.side-brand{
  display:block;padding:22px 20px 18px;font-family:var(--display);
  font-weight:700;font-size:var(--fs-h4);color:var(--rail-strong);
  text-decoration:none;letter-spacing:-.01em;
}
.side-brand span{color:var(--rail-brand)}
.side-nav{flex:1;padding:4px 10px 20px}
/* Randul de tema, ultimul din bara. Copil direct al lui `.side`, ca sa nu
   prinda si altceva -- `.side` imbraca navigatia si doua carduri. */
.side > .side-theme{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-item);margin:0 12px 14px;padding-top:var(--sp-item);
  border-top:1px solid var(--rail-line);
}
.side > .side-theme > span{color:var(--rail-ink-2);font-size:var(--fs-sm)}
.side > .side-theme > .themetoggle{
  color:var(--rail-ink);border-color:var(--rail-line);
}
.side > .side-theme > .themetoggle:hover{
  color:var(--rail-strong);background:var(--rail-hover);
}
.side-group{
  font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--rail-ink-3);
  margin:22px 0 8px;padding:0 10px;
}
.side-item{
  display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:var(--radius-sm);
  color:var(--rail-ink);text-decoration:none;font-size:var(--fs-md);
  transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);
}
/* Grupurile sunt butoane, nu legaturi, dar arata la fel. */
button.side-item{
  width:100%;border:none;background:none;font-family:inherit;text-align:left;
  cursor:pointer;
}
.side-item:hover{background:var(--rail-hover);color:var(--rail-strong)}
.side-item.is-on{background:var(--rail-on);color:var(--rail-strong)}
.side-ic{display:flex;flex:none;opacity:.85}
.side-sub{
  display:flex;align-items:center;gap:11px;padding:6px 10px 6px 20px;
  color:var(--rail-ink-2);text-decoration:none;font-size:var(--fs-sm);
  border-radius:var(--radius-sm);
}
.side-sub .dot{
  width:5px;height:5px;border-radius:50%;background:var(--rail-ink-3);
  flex:none;margin-left:5px;
}
.side-sub:hover{color:var(--rail-strong);background:var(--rail-hover-2)}
.side-sub.is-on{color:var(--rail-accent)}
.side-sub.is-on .dot{background:var(--rail-accent)}

/* Doua variante ale cardului din josul barei, si cookie-ul alege. Regulile
   sunt pe bloc, nu `a[data-auth]`: alea sunt scrise cu `inline-flex` pentru
   butoanele din bara de sus, iar aplicate unui `<div>` l-ar aseza in rand.
   Vezi NOTES.md, „o regula de asezare care are nevoie de `display`". */
.side-cta[data-auth="in"]{display:none}
[data-auth="in"] .side-cta[data-auth="in"]{display:block}
[data-auth="in"] .side-cta[data-auth="out"]{display:none}
/* `margin-top:auto` impinge cardul in josul barei. Cu doua carduri dintre
   care unul ascuns, ramane pe cel vazut -- dar numai fiindca `display:none`
   il scoate din asezare cu totul. */
.side-cta{
  margin:auto 12px 16px;padding:16px;border-radius:var(--radius-md);
  /* Un ton, din acelasi token ca banda din capul paginii. Era un gradient cu
     doua hexuri in clar, pentru un card de 200px in care nimeni n-a vazut
     vreodata trecerea. */
  background:var(--rail-card);
  border:1px solid var(--rail-line);
}
.side-cta strong{display:block;color:var(--rail-strong);font-size:var(--fs-md);
  margin-bottom:6px}
.side-cta > p{margin:0 0 14px;font-size:var(--fs-xs);color:var(--rail-ink-2);
  line-height:1.5}
.side-cta-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.side-cta-row > .btn{padding:7px 0;text-align:center;font-size:var(--fs-sm)}
.side-cta .btn.ghost{
  color:var(--sidecta-ghost-ink);background:var(--sidecta-ghost-bg);
  box-shadow:inset 0 0 0 1px var(--sidecta-ghost-line);
}
.side-cta .btn.ghost:hover{filter:brightness(1.08)}
.side-cta .btn:not(.ghost){
  background:var(--sidecta-solid-bg);color:var(--sidecta-solid-ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 1px 2px rgba(0,0,0,.25);
}
.side-cta .btn:not(.ghost):hover{filter:brightness(1.06)}

.app-main{min-width:0;background:var(--paper-2)}
/* Paginile de date au nevoie de latime mai mult decat oricare: tabelul
   de proiecte are cinci coloane, iar ultima -- statia de racordare -- e
   chiar informatia pe care n-o are niciun concurent si tocmai ea se taia cu
   „...". 1360px era limita de pe vremea cand `--wrap` era 1120. Aici incape
   mai mult decat pe site, fiindca bara laterala a mancat deja 248px. */
.app-inner{max-width:1720px;margin:0 auto;padding:22px 30px 60px}

.crumbs{
  display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);color:var(--ink-3);
  margin-bottom:14px;
}
.crumbs a{color:var(--ink-3);text-decoration:none}
.crumbs a:hover{color:var(--ink);text-decoration:underline}
.crumbs span{color:var(--ink-3)}
.crumbs i{font-style:normal;opacity:.5}

/* Cele trei lentile, deasupra titlului. E randul care face din trei pagini
   un singur produs: filtrele trec dintr-una in alta, deci nu "pleci" din
   lista ca sa te duci la companii -- te uiti altfel la aceeasi selectie. */
.lensbar{
  display:flex;gap:2px;margin:0 0 20px;padding:3px;
  background:var(--paper-2);border:1px solid var(--line);
  border-radius:var(--radius-md);overflow-x:auto;
}
.lens{
  flex:1 1 0;min-width:132px;padding:9px 14px;border-radius:var(--radius-sm);
  text-decoration:none;transition:background var(--dur-fast) var(--ease-out);
}
.lens:hover{background:var(--paper-3)}
.lens.is-on{background:var(--paper);box-shadow:0 1px 2px rgba(36,27,35,.08)}
.lens b{display:block;color:var(--ink-2);font-weight:600;font-size:var(--fs-md)}
.lens.is-on b{color:var(--ink)}
.lens span{display:block;color:var(--ink-3);font-size:var(--fs-xs);margin-top:1px}

/* Pe telefon cele trei lentile trebuie sa incapa toate trei deodata.

   De cand meniul are o singura intrare pentru liste („Baza de date"), bara
   asta e SINGURA usa catre /companii pe telefon. Masurat la 390px cu
   `min-width:132px`: 406px de continut in 341 vizibili, deci „Companii" statea
   taiat, iar bara nu avea niciun semn ca se deruleaza -- adica exact defectul
   de dinainte, mutat cu un nivel mai jos.

   Se lasa `flex` sa imparta latimea egal (`min-width:0`), cu padding mai mic.
   Nu se ascunde randul al doilea: „ce e unde / ce există / cine e cine" e
   ce face bara inteligibila fara sa fi dat clic pe ea. */
@media (max-width:560px){
  .lensbar{overflow-x:visible}
  .lens{min-width:0;padding:8px 7px}
  .lens b{font-size:var(--fs-sm)}
  .lens span{font-size:var(--fs-2xs);line-height:1.25}
}

.app-head{
  display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start;
  justify-content:space-between;margin-bottom:22px;
}
/* Paginile de aplicatie sunt dense -- bara laterala plus tabel -- si titlul
   lor nu are de ce sa ocupe cat un erou. Scara ramane aceeasi, coborata cu o
   treapta: h1 ia marimea lui h2, h2 pe a lui h3 (regula de mai jos). Ce nu se
   negociaza e ordinea: titlul paginii ramane mai mare decat titlul de
   sectiune din ea. Fara coborarea asta, „Cele mai disputate noduri" de pe
   /proiecte ar fi iesit mai mare decat „Proiecte". */
.app-head h1{font-size:var(--fs-h2);margin-bottom:4px}
.app-main h2{font-size:var(--fs-h3)}
.app-sub{margin:0;color:var(--ink-3);font-size:var(--fs-md);max-width:70ch}
.app-actions{display:flex;flex-wrap:wrap;align-items:center;gap:9px}
.app-actions > .btn{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-sm)}

/* Filtrele ca pastile, nu ca formular. Cele blocate arata ce se deschide
   cu un cont -- promisiunea e vizibila, nu ascunsa. */
.filterbar{
  display:flex;flex-wrap:wrap;gap:9px;align-items:center;
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);padding:14px 16px;margin-bottom:16px;
}
.fchip{
  display:inline-flex;align-items:center;gap:7px;padding:7px 14px;
  border:1px solid var(--line-strong);border-radius:var(--radius-pill);
  color:var(--ink-2);text-decoration:none;font-size:var(--fs-sm);background:var(--paper);
  transition:border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);
}
.fchip:hover{border-color:var(--ink-3);color:var(--ink)}
.fchip.is-on{
  background:var(--accent-wash);border-color:var(--accent);color:var(--accent);
  font-weight:560;
}
.fchip.is-on b{font-weight:700}
.fchip.is-on i{font-style:normal;opacity:.7;font-size:var(--fs-lg);line-height:1}
.fchip.is-locked{text-decoration:none;
  color:var(--ink-3);border-style:dashed;cursor:not-allowed;opacity:.75;
}
.fclear{
  color:var(--accent);text-decoration:none;font-size:var(--fs-sm);margin-left:4px;
}
.fclear:hover{text-decoration:underline}
.fsearch{display:flex;gap:8px;flex:1 1 320px;min-width:260px}
.fsearch input{flex:1;min-width:0}

/* Rezumatul selectiei, deasupra tabelului. Patru cifre care se recalculeaza
   la fiecare filtru: cate, cata putere, cate cu contract, cate expirate.
   Cifra sta prima si mare, eticheta sub ea -- randul se scaneaza pe
   orizontala fara sa fie citit. */
.summary{
  display:grid;gap:1px;background:var(--line);
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;margin:0 0 16px;
}
.summary > div{background:var(--paper);padding:14px 17px}
.summary b{
  display:block;font-size:var(--fs-h4);line-height:1.2;color:var(--ink);
  font-weight:640;font-variant-numeric:tabular-nums;margin-bottom:3px;
}
.summary span{display:block;color:var(--ink-3);font-size:var(--fs-sm);
  line-height:1.4}

/* Analiza de sub tabel. A stat pe pagina de dezvoltatori, ca ilustratie
   care nu ducea nicaieri; aici raspunde la intrebarea pusa prin filtru. */
.claim-result{
  max-width:62ch;border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 28px;background:var(--paper);
}
.claim-result h2{margin:0 0 10px;font-size:var(--fs-h4)}
.claim-result p{margin:0 0 12px;color:var(--ink-2);line-height:1.6}
.claim-result.is-ok{border-left:3px solid var(--accent)}
.claim-result.is-wait{border-left:3px solid var(--warn)}
.claim-result.is-bad{border-left:3px solid var(--bad)}
.claim-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}

.subanalysis{margin:34px 0 0;padding-top:24px;border-top:1px solid var(--line)}
.subanalysis h2{font-size:var(--fs-h4);margin:0 0 4px}
.subanalysis .sub{margin:0 0 16px;max-width:62ch}
.stationq{list-style:none;margin:0;padding:0;display:grid;gap:1px;
  background:var(--line);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.stationq li{background:var(--paper);padding:13px 16px}
.stationq b{display:block;color:var(--ink);font-weight:600;margin-bottom:2px}
.stationq span{display:block;color:var(--ink-3);font-size:var(--fs-sm);
  font-variant-numeric:tabular-nums}

.tablehead{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  justify-content:space-between;margin-bottom:12px;
}
.showing{margin:0;color:var(--ink-3);font-size:var(--fs-sm)}
.showing strong{color:var(--ink);font-variant-numeric:tabular-nums}

.datawrap{background:var(--paper);border-radius:var(--radius)}
table.data{min-width:900px;font-size:var(--fs-md)}
table.data thead th{
  background:var(--paper);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:1;
}
table.data td{border-bottom:1px solid var(--line);padding:13px 16px}
table.data tbody tr:hover td{background:var(--paper-2)}
table.data .rank{
  width:56px;text-align:center;font-family:var(--mono);font-size:var(--fs-xs);
  color:var(--ink-3);
}
table.data thead .rank{text-align:center}
.cell-name a{color:var(--ink);font-weight:600;text-decoration:none}
.cell-name a:hover{color:var(--accent)}
/* "Tehnologie nepublicată" purta accentul tipografic cel mai puternic de pe
   pagina -- bold, prima coloana, pe aproape fiecare rand, fiindca e categoria
   cea mai numeroasa din date. Cel mai gros lucru de pe ecran era o valoare
   care lipseste. Linkul ramane (randul se deschide de acolo), dar greutatea
   se retrage: nu se stie nu are ce sa strige. */
.cell-name a.is-unknown{font-weight:400;color:var(--ink-2)}
.cell-name .ref{margin-left:8px}
.muted{color:var(--ink-3)}
.pill-on{
  font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:.09em;
  text-transform:uppercase;color:var(--accent);background:var(--accent-wash);
  border-radius:var(--radius-pill);padding:2px 7px;
}
/* Randul blocat: lista se vede toata, dar coloana care conteaza cere cont.
   Cine se uita vede ca datele exista si sunt bune, si vede exact ce ii
   lipseste. */
.locked-cell{
  display:inline-flex;align-items:center;gap:6px;color:var(--ink-3);
  background:var(--paper-2);border:1px dashed var(--line-strong);
  border-radius:var(--radius-sm);padding:4px 10px;font-size:var(--fs-xs);
}
table.data td.empty{text-align:center;color:var(--ink-3);padding:44px 16px}

.pagination{
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;
  justify-content:space-between;margin-top:18px;
}
.pgroup{display:flex;align-items:center;gap:4px}
.pnum,.parrow{
  min-width:34px;height:34px;display:inline-flex;align-items:center;
  justify-content:center;border:1px solid var(--line-strong);border-radius:var(--radius-sm);
  color:var(--ink-2);text-decoration:none;font-size:var(--fs-sm);background:var(--paper);
  font-variant-numeric:tabular-nums;
}
.pnum:hover,.parrow:hover{border-color:var(--ink-3);color:var(--ink)}
.pnum.is-on{background:var(--accent);border-color:var(--accent);color:var(--on-accent);
  font-weight:600}
.parrow.is-off{opacity:.4;cursor:default}
.pgroup .gap{color:var(--ink-3);padding:0 2px}
.perpage{display:flex;align-items:center;gap:9px}
.perpage label{
  font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);
}
.perpage select{min-width:80px;padding:6px 9px}

@media (max-width:980px){
  body.app{grid-template-columns:1fr}
  .side{position:static;height:auto;flex-direction:column}
  .side-cta{display:none}
  .app-inner{padding:18px 18px 48px}
}

/* ============================================================ MENIU

   Grupuri cu lista derulanta in stanga, actiuni in dreapta -- structura
   PF Nexus. Fiecare intrare din lista are titlu si o linie de explicatie:
   "Companii" singur nu spune nimic, "Companii / titularii de aviz din
   registrul public" spune tot.
   ============================================================ */

/* Meniul e o insiruire de legaturi, la fel ca "Preturi" si "Contact" din
   dreapta. A avut panouri care se deschideau, cu carduri, pictograme si
   descrieri -- masinarie pentru sapte destinatii, dintre care trei aparau de
   doua ori. Odata cu panourile au plecat `.menu-group`, `.menu-top`,
   `.menu-panel`, `.menu-cards` si `.mc-*`. */
.menu{display:flex;align-items:center;gap:2px}

/* Peste banda intunecata, meniul isi schimba culorile odata cu bara. */

@media (max-width:1320px){
  nav.top .freshness{display:none}
}
@media (max-width:1180px){
  /* "Preturi" si "Contact" nu se mai ascund aici. Se ascundeau de la
     1180px in jos, dar burgerul apare abia sub 900px: intre cele doua
     praguri, pe tablete, cele doua legaturi nu se puteau ajunge deloc. */
  nav.top > .wrap .item{padding:9px 8px}
}
@media (max-width:900px){
  .menu,.navlinks{display:none}
}

/* ============================================================ BANDA COMUNA

   Aceeasi banda intunecata in capul fiecarei pagini de prezentare. Inainte
   doar prima pagina o avea, iar restul incepeau cu titlu pe alb -- aratau
   a site-uri diferite legate cu acelasi meniu.
   ============================================================ */

section.hero-flat.is-compact{padding:56px 0 74px}
section.hero-flat.is-compact h1{
  font-size:var(--fs-h2);max-width:24ch;
}
section.hero-flat.is-compact .lede{font-size:var(--fs-lg);margin-top:14px}

.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin:30px 0 0}

/* Banda centrata, pentru cele doua usi. Pe prima pagina nu merge: acolo sub
   titlu vine bara de cautare, si o bara de cautare centrata cere ochiului
   sa se intoarca la stanga pentru fiecare camp. */
section.hero-flat.is-centered{padding:84px 0 104px;text-align:center}
section.hero-flat.is-centered h1{max-width:22ch;margin:0 auto}
section.hero-flat.is-centered .lede{max-width:52ch;margin:20px auto 0}
section.hero-flat.is-centered .hero-actions{justify-content:center}

/* ------------------------------------------------------------ clasament */

/* Randuri numerotate cu cifrele in dreapta. PF Nexus pune aici investitorii
   de pe platforma; noi punem ce avem si e adevarat -- coada de la noduri,
   sau titularii cu cea mai multa capacitate. */
.rank{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
/* `.btn.light` si `.btn.outline-light` au plecat pe 20 august. Erau butoane
   deschise pentru o banda intunecata, de pe vremea cand restul site-ului era
   alb -- adica exact opusul situatiei de acum. Culoarea si-o luau din
   `--accent-light`, singurul token care a scapat neschimbat la trecerea pe
   smarald, si de aceea se vedeau doua verzi diferite pe acelasi ecran:
   butonul principal de pe /pentru-dezvoltatori era turcoaz, iar „Cont
   gratuit" din bara, la trei centimetri deasupra, smarald.

   O singura familie de butoane acum: `.btn` si `.btn.ghost`. */


/* Etichetele de pe banda: contur deschis, nu fundal deschis. */

/* Casuta de "ce se deblocheaza cu un cont", pe fisa de proiect. Aceeasi
   idee ca randurile blocate din tabel: se spune ca informatia exista, nu
   se ascunde ca exista. */
.lockbox{
  display:flex;gap:13px;align-items:flex-start;margin-top:16px;padding:16px 18px;
  background:var(--good-wash);border:1px solid var(--good-line);border-radius:var(--radius);
}
.lockbox.is-empty{background:var(--paper-2);border-color:var(--line)}
.lockbox-ic{color:var(--accent);flex:none;margin-top:2px}
.lockbox strong{display:block;color:var(--ink);font-size:var(--fs-md);margin-bottom:4px}
.lockbox p{margin:0;color:var(--ink-2);font-size:var(--fs-sm);line-height:1.5}
.big-mw{
  font-family:var(--display);font-size:var(--fs-h2);font-weight:600;color:var(--ink);
  letter-spacing:-.015em;line-height:1.1;
}
body.app .panel{border-color:var(--line);background:var(--paper)}
body.app .detail{grid-template-columns:minmax(0,1.9fr) minmax(300px,1fr)}
@media (max-width:980px){body.app .detail{grid-template-columns:1fr}}

/* ============================================================ MOBIL

   Doua probleme reale, nu de finisaj: site-ul nu avea niciun meniu sub
   900 px (grupurile cu liste derulante se ascundeau si nu le lua nimic
   locul), iar aplicatia isi stivuia toata bara laterala deasupra
   tabelului -- pe telefon derulai un ecran intreg de navigatie inainte sa
   vezi primul rand.
   ============================================================ */

.burger{
  display:none;flex-direction:column;gap:4px;cursor:pointer;flex:none;
  background:none;border:none;padding:9px;margin-left:auto;border-radius:var(--radius-sm);
}
.burger span{
  display:block;width:20px;height:2px;background:var(--ink);border-radius:var(--radius-pill);
  transition:transform var(--dur-mid) var(--ease-out),opacity var(--dur-mid) var(--ease-out);
}
body.menu-open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.menu-mobile{display:none}

@media (max-width:900px){
  .burger{display:flex}
  nav.top > .wrap{gap:10px;height:60px}
  /* Se ascund doar cele din bara, nu si cele din panoul care se deschide:
     `.menu-mobile-actions .btn` e tot inauntrul lui `nav.top`, deci "Intra"
     si "Cont gratuit" dispareau exact de acolo de unde trebuiau sa se vada
     pe telefon. */
  nav.top > .wrap .item,
  nav.top > .wrap .btn,
  nav.top .freshness{display:none}

  .menu-mobile{
    display:block;max-height:0;overflow:hidden;background:var(--paper);
    border-top:1px solid var(--line);
    transition:max-height var(--dur-mid) var(--ease-out);
  }
  body.menu-open .menu-mobile{max-height:78vh;overflow-y:auto}
  .menu-mobile > .wrap{padding-top:8px;padding-bottom:22px}
  /* Copil direct, nu descendent: panoul contine si `.menu-mobile-actions`,
     cu "Intra" si "Cont gratuit". Scrisa ca descendent, regula le-ar fi pus
     si lor linie sub ele. Aceeasi capcana, a cincea oara. */
  .menu-mobile > .wrap > a{display:block;padding:11px 0;text-decoration:none;
    border-bottom:1px solid var(--line)}
  .menu-mobile > .wrap > a:last-of-type{border-bottom:none}
  .menu-mobile > .wrap > a > strong{
    display:block;color:var(--ink);font-weight:600;font-size:var(--fs-lg);
  }
  .menu-mobile-actions{
    display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px;
  }
  /* Latime, nu `display`. Cu `display:block` regula asta -- clasa plus
     clasa -- batea `a[data-auth="in"]{display:none}`, care e element plus
     atribut, si pe telefon se vedeau deodata si "Intra", si "Contul meu".
     Se vedea greu, pentru ca butonul fantoma era oricum alb pe alb; s-a
     aratat abia dupa ce i-am reparat contrastul. */
  .menu-mobile-actions .btn{text-align:center;width:100%}

  /* Banda intunecata: bara nu mai sta peste ea pe mobil, ar acoperi
     titlul cand se deschide meniul. */
      section.hero-flat{padding:52px 0 74px}
  section.hero-flat h1{font-size:var(--fs-h1);max-width:none}
  .hero-flat .lede{font-size:var(--fs-lg)}
  
  /* Taburile se deruleaza orizontal in loc sa se rupa pe doua randuri.

     Masurat pe 13 august 2026, la 375px: banda are 338px vizibili si 513px de
     continut, iar "Caut companii" incepe la 353 -- deci al treilea tab e taiat
     aproape complet. Derularea *functiona* (verificat: scrollWidth > clientWidth
     si overflow-x:auto se aplica), dar bara de derulare e ascunsa cateva randuri
     mai jos si nimic nu spunea ca mai e ceva acolo. Un tab taiat drept, fara
     niciun semn, se citeste ca pagina stricata, nu ca "trage de mine": cine nu
     stie ca poate glisa pierde a treia intrare in produs.

     Deci nu se repara derularea, care mergea, ci lipsa semnului. Masca stinge
     ultimii pixeli din dreapta cat timp mai e continut dincolo de margine --
     `mask-image` merge peste orice fundal, si fundalul de aici e un gradient,
     deci o banda alba lipita peste n-ar fi mers. */
  .tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    margin-right:-22px;padding-right:22px;
    mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent);
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent)}
  .tabs::-webkit-scrollbar{display:none}
  /* Ajuns la capat, nu mai e nimic de anuntat: masca s-ar stinge degeaba peste
     tabul activ. `animation-timeline:scroll()` o ridica exact atunci, si acolo
     unde nu e suportata ramane masca de sus -- semnalul, nu absenta lui. */
  @supports (animation-timeline:scroll()){
    .tabs{animation:tabs-fade linear both;animation-timeline:scroll(self inline);
      animation-range:calc(100% - 34px) 100%}
  }
  .tab{flex:none}

  .hero-proof{margin:22px 0 0;color:var(--ink-3);font-size:var(--fs-sm)}

  /* Graficul de zone are zece randuri si doua coloane de text; strans la
     latimea unui telefon, cifrele ajung la vreo patru pixeli. Se lasa la
     latimea la care se citeste si se trage cu degetul -- fraza de deasupra
     si tabelul de dedesubt spun oricum acelasi lucru fara sa deruleze. */
  /* Harta se strange pe latimea telefonului fara sa se rupa, dar scrisul
     de pe ea nu: se mareste, ca sa ajunga la aceeasi marime pe ecran. */
    
  .flow{gap:0}
  .flow li{padding:0 0 26px 54px}
  .flow li::before{top:38px;bottom:-4px;left:18px;right:auto;width:1px;height:auto}
  .flow li:last-child::before{display:none}
  .flow p{max-width:none}
  .section-head{flex-direction:column;align-items:flex-start}
  section{padding:40px 0}
  .wrap{padding:0 22px}
}

/* ------------------------------------------------------------ aplicatia */

.app-topbar{display:none}
.side-veil{display:none}

@media (max-width:980px){
  body.app{grid-template-columns:1fr}

  .app-topbar{
    display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:60;
    background:var(--rail);padding:0 16px;height:58px;
    border-bottom:1px solid var(--rail-edge);
  }
  .app-topbar .brand{color:var(--rail-strong);font-size:var(--fs-lg);
    text-decoration:none}
  .app-topbar .brand span{color:var(--rail-brand)}
  /* Comutatorul se lipeste de burger, la capatul din dreapta. */
  .app-topbar > .themetoggle{margin-left:auto}

  /* Bara laterala devine sertar: iese peste continut, nu il impinge. */
  .side{
    position:fixed;top:0;left:0;bottom:0;width:270px;z-index:70;
    transform:translateX(-100%);transition:transform var(--dur-mid) var(--ease-out);
    height:100vh;
  }
  body.side-open .side{transform:translateX(0)}
  .side-cta{display:block}

  .side-veil{
    display:block;position:fixed;inset:0;z-index:65;background:rgba(26,18,25,.5);
    opacity:0;visibility:hidden;transition:opacity var(--dur-mid) var(--ease-out),visibility var(--dur-mid);
  }
  body.side-open .side-veil{opacity:1;visibility:visible}

  .app-inner{padding:16px 16px 48px}
  .app-head{flex-direction:column;align-items:flex-start;gap:12px}
  /* Titlul paginii ramane pe `--fs-h2` si pe telefon. Cobora aici pe
     `--fs-h3`, adica exact treapta pe care sta si `h2` in carcasa -- deci pe
     ecran mic „Proiecte" si „Cele mai disputate noduri" ieseau la fel de
     mari. Diferenta e oricum mica la latime de telefon (1,6rem fata de
     1,45rem), dar mica si prezenta bate egala. */
  /* Data statea in acelasi rand cu butoanele si le impingea, asa ca
     "Listeaza un proiect" se rupea pe doua randuri. Data trece pe randul ei,
     butoanele isi impart randul urmator. */
  .app-actions{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:9px}
  .app-actions .freshness{grid-column:1 / -1;margin:0}
  .app-actions > .btn{justify-content:center;white-space:nowrap}
  .crumbs{font-size:var(--fs-xs);flex-wrap:wrap}

  .filterbar{padding:12px}
  .fsearch{flex:1 1 100%}
  .tablehead{flex-direction:column;align-items:flex-start;gap:8px}
  .pagination{flex-direction:column;align-items:stretch;gap:12px}
  .pgroup{justify-content:center;flex-wrap:wrap}
  .perpage{justify-content:space-between}
}

@media (prefers-reduced-motion:reduce){
  .side,.side-veil,.menu-mobile,.burger span{transition:none !important}
}

@media (max-width:700px){
  /* Tabelul cu sapte coloane cere 900 px. Pe telefon se scot cele care se
     regasesc oricum pe fisa proiectului -- rangul si coloana de proprietar
     -- si raman cele dupa care se compara: tehnologie, putere, stadiu,
     judet si statia de racordare. */
  table.data{min-width:560px;font-size:var(--fs-sm)}
  table.data td,table.data th{padding:11px 12px}

  .table-projects th:nth-child(1),.table-projects td:nth-child(1),
  .table-projects th:nth-child(7),.table-projects td:nth-child(7){display:none}

  .table-companies th:nth-child(1),.table-companies td:nth-child(1),
  .table-companies th:nth-child(4),.table-companies td:nth-child(4){display:none}

  .cell-name .ref{display:block;margin:2px 0 0}
  .locked-cell{padding:3px 8px;font-size:var(--fs-xs)}
}

nav.top > .wrap .item.is-on{color:var(--brand-ink);background:var(--head-2)}
/* Pagina curenta, peste banda intunecata. Regula de sus da text alb intregii
   bari si e mai specifica decat asta -- deci iesea alb pe pastila deschisa,
   adica invizibil. Pe fundal inchis, starea activa se arata cu o pastila
   translucida, nu cu una alba. Aceeasi capcana o avea si grupul de meniu
   deschis, cand existau panouri. */

/* Linia de "la ce data sunt datele", pe banda intunecata a hartii. */
.hero-flat .asof{
  margin:22px 0 0;font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:.05em;
  color:rgba(239,233,241,.6);text-transform:uppercase;
}

/* Bara de sus are `white-space: nowrap` ca sa nu se rupa pe randuri; panoul
   de pe telefon e copilul ei si mostenea regula. */
.menu-mobile{white-space:normal}

/* ------------------------------------------------------------ conturi */

/* Bara randeaza amandoua variantele de butoane si cookie-ul decide care se
   vede -- vezi nav_html(). Fara JavaScript ramane varianta de vizitator,
   care duce oricum la autentificare. */
/* Ascuns din start, aratat doar cand cookie-ul spune ca exista o sesiune.
   Invers ar fi insemnat ca fara JavaScript -- sau cand scriptul nu ajunge in
   pagina, cum s-a si intamplat pe harta -- se vad toate butoanele deodata. */
a[data-auth="in"]{display:none}
[data-auth="in"] a[data-auth="in"]{display:inline-flex}
[data-auth="in"] a[data-auth="out"]{display:none}
/* A treia oara aceeasi capcana, si de data asta reparata pe clasa ei, nu pe
   locul in care s-a vazut.

   `a[data-auth="in"]{display:none}` are specificitate (0,1,1) si pierde in
   fata oricarei reguli de asezare scrisa clasa+clasa. In bara de actiuni a
   aplicatiei, `.app-actions > .btn{display:inline-flex}` (0,2,0) o batea, si
   pe fisa de proiect se vedeau deodata si „Panoul firmei", si „Listează un
   proiect" -- adica si varianta de om autentificat, si cea de vizitator.
   Inainte au fost `.menu-mobile-actions .btn` si `nav.top .btn`.

   Randul de mai jos ascunde varianta gresita pornind de la radacina, deci e
   tot (0,2,0) -- egal cu orice regula clasa+clasa -- si sta mai jos in foaie,
   unde la egalitate castiga. Perechea lui pentru "in" exista deja deasupra.
   Regula de baza ramane ca plasa pentru cazul fara JavaScript. */
[data-auth="out"] a[data-auth="in"]{display:none}

/* Aceleasi patru reguli, pentru randurile de lista din subsol. Nu se poate
   refolosi setul de deasupra: acela e scris pe `a`, iar aici steagul sta pe
   `<li>` -- ascunsa doar legatura, randul gol ar ramane si ar lasa o gaura
   in coloana.

   `display:block`, nu `list-item`: lista are deja `list-style:none`, si
   `<li>` sunt copii de flex, unde amandoua se poarta la fel. Cere doar ce-ti
   trebuie -- vezi NOTES.md, „asezarea bate vizibilitatea".

   Varianta ascunsa din start e „in", nu „out": fara JavaScript ramane cea de
   vizitator, care duce oricum la autentificare. Invers, un om fara script ar
   fi vazut „Panoul firmei" si ar fi ajuns la login fara sa inteleaga de ce. */
li[data-auth="in"]{display:none}
[data-auth="in"] li[data-auth="in"]{display:block}
[data-auth="in"] li[data-auth="out"]{display:none}
[data-auth="out"] li[data-auth="in"]{display:none}

.auth-grid{
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:26px;max-width:520px;margin:0 auto;
}
/* `align-items:start` face fiecare coloana sa-si tina inaltimea din
   continut. Fara el, cardul se intindea dupa coloana explicativa din dreapta
   -- si pe drumul „persoana fizica", unde formularul n-are niciun camp,
   ramanea o suprafata goala cat jumatate din card sub buton. Cele trei file
   nu mai au voie sa arate a trei ferestre de marimi diferite: fiecare
   inseamna exact cat continutul ei. */
.auth-grid.has-aside{
  grid-template-columns:minmax(0,1fr) 280px;max-width:860px;
  align-items:start;
}

.auth-card{
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);padding:26px 26px 22px;
}
.auth-card > form{display:flex;flex-direction:column;gap:16px}
.auth-card .btn{width:100%;justify-content:center}
.auth-card > form > .btn{margin-top:2px}

/* Campul pe toata latimea: `.field` are min-width 150px pentru bara de
   filtre, unde stau mai multe pe un rand. Aici sta unul singur. */
.field.is-wide{width:100%}
.field.is-wide select,.field.is-wide input{width:100%;min-width:0}
.field-help{font-size:var(--fs-xs);color:var(--ink-3);margin:0}
.field-err{font-size:var(--fs-xs);color:var(--bad,#a12a1e);margin:0}
.field.has-err input,.field.has-err select{
  box-shadow:inset 0 0 0 1px var(--bad,#a12a1e);
}

.auth-aside{padding-top:4px}
.auth-aside h3{
  font-family:var(--display);font-size:var(--fs-md);color:var(--ink);
  margin:0 0 8px;
}
.auth-aside p{font-size:var(--fs-sm);color:var(--ink-2);margin:0 0 12px}

.auth-alt{font-size:var(--fs-sm);color:var(--ink-3);margin:0;text-align:center}
.auth-fine{font-size:var(--fs-xs);color:var(--ink-3);margin:0}
.btn.small{padding:7px 13px;font-size:var(--fs-xs)}

/* Firma gasita, la pasul doi. E momentul in care formularul inceteaza sa
   ceara si incepe sa recunoasca, deci arata ca o confirmare, nu ca un camp. */
.auth-co{
  background:var(--paper-2);border:1px solid var(--line);
  border-radius:var(--radius);padding:14px 16px;margin-bottom:16px;
}
.ac-t,.af-t{
  font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 4px;
}
.ac-n,.af-n{
  font-family:var(--display);font-size:var(--fs-lg);color:var(--ink);
  margin:0 0 3px;line-height:1.25;
}
.ac-d,.af-d{font-size:var(--fs-sm);color:var(--ink-2);margin:0}
.ac-back{font-size:var(--fs-xs);color:var(--ink-3);display:inline-block;margin-top:8px}

.auth-found{
  background:var(--accent-wash);border:1px solid var(--accent);
  border-radius:var(--radius);padding:14px 16px;margin-bottom:16px;
}
.auth-found .af-t{color:var(--accent)}

.notice{
  border:1px solid var(--line);border-radius:var(--radius);
  padding:13px 15px;margin-bottom:16px;background:var(--paper-2);
}
.notice p{font-size:var(--fs-sm);color:var(--ink-2);margin:0 0 6px}
.notice p:last-child{margin-bottom:0}
.notice.is-good{background:var(--accent-wash);border-color:var(--accent)}
.notice.is-bad{background:var(--warn-wash);border-color:var(--warn)}

/* Starea contului. Trei stari, nu doua: gata, se lucreaza la noi, de facut
   de catre om. Un contur gol langa "verificam firma" ar arata a sarcina
   uitata de utilizator, cand mingea e de fapt la noi. */
/* Lista de pasi a contului (`.auth-steps`, `.st-*`, `.auth-next`,
   `.auth-links`) a stat aici pana pe 24 august 2026. A plecat odata cu
   marcajul ei: contul nu mai e o lista de bife pe carcasa de site, e o
   pagina de aplicatie cu sectiuni. Vezi `panel_pages.account_page`.
   Regulile ramase fara marcaj nu sunt inofensive -- sunt capcane care
   asteapta, si `tools.orphans` le-a gasit pe astea in aceeasi zi. */

@media (max-width:820px){
  .auth-grid.has-aside{grid-template-columns:minmax(0,1fr);max-width:520px}
  /* Panoul explicativ trece sub formular: pe telefon, ce l-a adus aici e
     butonul, iar motivatia se citeste dupa. */
  .auth-aside{order:2}
}

/* ------------------------------------------------- panoul firmei (stratul 2)

   Nicio componenta noua de forma: cardurile din panou sunt `.panel` cu alta
   asezare, starile sunt pastile ca `.pill-on`, formularele sunt `.field`-uri.
   Ce se adauga aici e doar ce n-avea unde sa fie -- randul de card cu titlu
   plus stare, si caseta de dezvaluire.

   Selectorii sunt pe copil direct peste tot. `.pcard` contine `.reveal`, care
   contine la randul ei paragrafe, iar un `.pcard p` ar fi stricat exact
   caseta care conteaza cel mai mult. Vezi NOTES.md, prima sectiune -- aceeasi
   greseala, de sase ori, cu acelasi `.wrap`. */

/* `section{padding:52px 0}` si `section:nth-of-type(even){background}` sunt
   regulile benzilor alternante de pe paginile de prezentare, si prind orice
   `<section>` de pe site -- inclusiv astea, care stau inauntrul aplicatiei.
   Rezultatul, vazut in captura: sectiuni cu 52px de aer si o banda nisipie
   peste una din doua, fara ca nimeni s-o fi cerut.

   Se scrie `section.psec`, nu `.psec`: la specificitate egala (0,1,1)
   castiga regula de mai jos in foaie, iar `.psec` singur (0,1,0) ar fi
   pierdut in fata lui `nth-of-type`. Aceeasi aritmetica din NOTES.md,
   „`@media` nu adauga specificitate". */
section.psec{margin-top:34px;padding:0;background:none}
section.psec:first-of-type{margin-top:8px}
/* Ancorele din bara laterala duc aici; fara marja de derulare, titlul
   sectiunii ajunge lipit de capul ferestrei. */
section.psec{scroll-margin-top:24px}
.psec-head{
  display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;
  justify-content:space-between;
  padding-bottom:10px;margin-bottom:14px;border-bottom:1px solid var(--line);
}
.psec-head h2{font-size:var(--fs-h4);margin:0}
.psec-head > div > .sub{margin:4px 0 0;max-width:62ch}

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

.pcard{
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--paper);padding:16px 18px;
}
.pcard-head{
  display:flex;gap:12px;align-items:baseline;justify-content:space-between;
}
.pcard-head > h3{
  margin:0;font-size:var(--fs-md);font-weight:600;line-height:1.35;
}
.pcard-head > h3 > a{color:var(--ink);text-decoration:none}
.pcard-head > h3 > a:hover{color:var(--accent)}
.pcard > .pcard-meta{
  margin:5px 0 0;color:var(--ink-3);font-size:var(--fs-sm);
  font-variant-numeric:tabular-nums;
}
.pcard > .pcard-meta strong{color:var(--accent);font-weight:640}
/* Cine intreaba. Sta deasupra mesajului pentru ca e primul lucru dupa care
   vanzatorul alege -- vezi `market/interests.py`, anonimatul e al lui, nu al
   cumparatorului. */
.pcard > .pcard-who{
  margin:9px 0 0;font-weight:600;color:var(--ink);font-size:var(--fs-md);
}
/* Treapta de dovada, sub nume. Mai mica si mai stinsa decat numele, dar nu
   ascunsa: e informatie pe care vanzatorul o cantareste, nu o nota de subsol.
   Se foloseste si in afara lui `.pcard`, pe pagina cererii, de-aia nu e
   scrisa ca descendent direct. */
.pcard-proof{
  margin:2px 0 0;color:var(--ink-2);font-size:var(--fs-sm);
}
.pcard > .pcard-msg{
  margin:9px 0 0;color:var(--ink-2);font-size:var(--fs-md);line-height:1.55;
  white-space:pre-line;
}
.pcard > .pcard-act{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px;
}
/* Fiecare actiune e propriul formular, ca sa fie POST. Formularul n-are voie
   sa se poarte ca un bloc, altfel butoanele stau unul sub altul. */
.pact{display:inline-flex;margin:0}

.pstate{
  flex:none;font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:.08em;
  text-transform:uppercase;padding:3px 8px;border-radius:var(--radius-pill);
  color:var(--ink-3);background:var(--paper-2);
}
.pstate.is-live{color:var(--accent);background:var(--accent-wash)}
.pstate.is-draft{color:#8a5a2b;background:var(--warn-wash)}
.pstate.is-done{color:var(--ink);background:var(--paper-3)}

.pempty{
  border:1px dashed var(--line-strong);border-radius:var(--radius);
  padding:18px 20px;color:var(--ink-3);font-size:var(--fs-md);
  background:var(--paper-2);
}
.pempty p{margin:0;line-height:1.6}

/* Dezvaluirea. E singurul moment pentru care exista platforma, deci arata a
   ceva, nu a inca doua randuri de text. */
.reveal{
  margin-top:12px;padding:14px 16px;
  border:1px solid var(--accent);border-left-width:3px;
  border-radius:var(--radius);background:var(--accent-wash);
}
.reveal > .rv-t{
  margin:0;font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent-ink);
}
.reveal > .rv-n{margin:4px 0 0;font-weight:640;color:var(--ink);font-size:var(--fs-lg)}
.reveal > .rv-d{margin:2px 0 0;color:var(--ink-2);font-size:var(--fs-sm);
  font-variant-numeric:tabular-nums}
.reveal > .rv-c{margin:6px 0 0;color:var(--ink-2);font-size:var(--fs-md)}

/* Formularele din panou. `.field` face treaba, aici se aseaza doar. */
.pform{display:grid;gap:14px}
.pform > .field textarea{
  font:inherit;font-size:var(--fs-md);color:var(--ink);
  background:var(--paper);border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);padding:10px 12px;resize:vertical;
  min-height:112px;
}
.pform > .field textarea:focus{border-color:var(--accent);outline:none}
.pform-act{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}

/* Pastila de vanzare din tabel. Plina, nu conturata ca `.pill-on`: e cel mai
   rar si cel mai valoros semn de pe pagina, si se deosebeste prin forma, nu
   doar prin culoare -- aceeasi regula ca la marcajele hartii. */
.pill-sale{
  margin-left:8px;font-family:var(--mono);font-size:var(--fs-2xs);
  letter-spacing:.09em;text-transform:uppercase;
  color:var(--paper);background:var(--accent);
  border-radius:var(--radius-pill);padding:2px 7px;white-space:nowrap;
}

/* Caseta de pret de pe fisa publica. Inlocuieste nota "nu e listat de
   proprietar", si e saltul intreg al produsului: de aici pagina nu mai
   descrie un rand dintr-un registru, descrie ceva de cumparat. */
.salebox{
  margin-top:14px;padding-top:16px;border-top:1px solid var(--line);
}
.salebox > .sale-k{
  margin:0;font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);
}
.salebox > .sale-v{
  margin:3px 0 0;font-family:var(--display);font-weight:700;
  font-size:var(--fs-h4);color:var(--ink);font-variant-numeric:tabular-nums;
}
.salebox > .sale-teaser{
  margin:12px 0 0;color:var(--ink-2);font-size:var(--fs-md);line-height:1.55;
  white-space:pre-line;
}
.salebox > .btn{width:100%;justify-content:center}
/* Caseta de pe un proiect NEREVENDICAT. Acelasi obiect, alta greutate: aici
   nu exista pret cerut si nu exista vanzator, deci eticheta din cap nu poate
   arata ca un titlu de oferta. Se stinge la treapta textului secundar, iar
   restul casetei ramane neschimbat -- e tot locul in care se apasa. */
.salebox.is-quiet > .sale-k{color:var(--ink-faint)}
.salebox > .auth-fine{margin-top:10px}

@media (max-width:620px){
  .pcard-head{flex-direction:column;align-items:flex-start;gap:6px}
}

/* Cele trei drumuri de inscriere: firma romaneasca, firma din UE, om.
   Nu sunt `.tabs` de pe /proiecte, desi imprumuta `.tab`: acolo fila activa
   se leaga de o bara plina de dedesubt, aici sta deasupra unui formular pe
   hartie, deci se marcheaza cu o linie, nu cu o suprafata. */
.auth-tabs{
  display:flex;flex-wrap:wrap;gap:2px;margin:0 0 24px;
  border-bottom:1px solid var(--line);
}
.auth-tabs .tab{
  background:transparent;border-radius:var(--radius-md) var(--radius-md) 0 0;
  padding:10px 14px;
}
.auth-tabs .tab:hover{background:var(--head-2);color:var(--brand-ink)}
.auth-tabs .tab.is-on{
  background:transparent;color:var(--ink);
  box-shadow:inset 0 -2px 0 var(--brand);
}


/* ==================================================================
   STRAT NOU · bara plutitoare si homepage-ul pe carduri
   19 august 2026. Scris la coada foii dinadins: la specificitate egala
   castiga regula de mai jos, deci stratul asta imbraca structura care
   exista fara sa fie nevoie sa umblu prin cele 2.600 de linii de deasupra.
   Se scoate stergand blocul, si pagina se intoarce la ce era.
   ================================================================== */

:root{
  /* Erau 20px si 28px, si duceau o a doua scara de colturi pe langa cea de
     sus -- benzile de prezentare aveau alte carduri decat restul site-ului.
     Amandoua intra acum in `md`: o suprafata mare e o suprafata mare. */
  --glass:rgba(255,255,255,.055);      /* suprafata de sticla peste fundal */
  --glass-line:rgba(255,255,255,.10);  /* bordura translucida ceruta */
  --glass-line-hi:rgba(255,255,255,.18);
  --lift:0 22px 50px -28px rgba(0,0,0,.85), 0 2px 8px -4px rgba(0,0,0,.6);
  --lift-hi:0 34px 70px -30px rgba(0,0,0,.95), 0 0 0 1px var(--glass-line-hi);
  --glow:0 0 0 1px rgba(16,185,129,.28), 0 12px 40px -14px rgba(16,185,129,.45);
}

/* ----------------------------------------------------- bara plutitoare */

/* Nu mai e o banda lipita de marginea de sus, ci o capsula care pluteste
   peste continut. Banda din jurul ei nu prinde clicuri -- altfel o fasie
   invizibila de 88px ar fi inghitit tot ce e sub ea, pe toata latimea. */
nav.top{
  position:sticky;top:0;z-index:30;
  background:transparent;border-bottom:0;
  padding:14px 0 0;pointer-events:none;
}
nav.top > .wrap.navpill{
  pointer-events:auto;
  display:flex;align-items:center;gap:10px;
  height:60px;padding:0 8px 0 20px;
  border-radius:var(--radius-pill);
  background:color-mix(in srgb, var(--paper-2) 72%, transparent);
  -webkit-backdrop-filter:blur(24px) saturate(150%);
  backdrop-filter:blur(24px) saturate(150%);
  border:1px solid var(--glass-line);
  box-shadow:var(--lift), inset 0 1px 0 rgba(255,255,255,.07);
}

/* Legaturile, in centru. `margin:0 auto` pe copilul din mijloc le tine la
   mijloc intre marca si actiuni, fara pozitionare absoluta -- deci cand
   marca sau butoanele isi schimba latimea, nimic nu se suprapune. */
.navlinks{position:relative;display:flex;align-items:center;gap:2px;margin:0 auto}
.navlinks .item{
  position:relative;z-index:1;
  color:var(--ink-2);text-decoration:none;font-size:var(--fs-md);font-weight:500;
  padding:9px 14px;border-radius:var(--radius-pill);white-space:nowrap;
  transition:color var(--dur-fast) var(--ease-out);
}
.navlinks .item:hover,.navlinks .item:focus-visible{color:var(--brand)}
.navlinks .item.is-on{color:var(--ink)}
/* Indicatorul care aluneca. Un singur element mutat cu `transform`, nu o
   clasa pusa si scoasa pe fiecare legatura: asa tranzitia are ce interpola
   si alunecarea e continua. Pozitia o pune JavaScript-ul din bara; fara el
   ramane ascuns si legaturile arata starea prin culoare. */
.navdot{
  position:absolute;left:0;top:50%;height:36px;margin-top:-18px;width:0;
  border-radius:var(--radius-pill);background:var(--glass);border:1px solid var(--glass-line);
  opacity:0;pointer-events:none;
  transition:transform .3s var(--ease-out), width .3s var(--ease-out),
             opacity .2s var(--ease-out);
}
.navactions{display:flex;align-items:center;gap:8px;flex:none}
/* Lant de copii directi, nu descendent: `nav.top .btn` ar prinde si
   butoanele din panoul de meniu de pe telefon, care e tot inauntrul
   barii. Vezi NOTES.md, „Selectorul descendent care se intinde prea
   departe" -- si testul de stil care il pazeste. */
nav.top > .wrap > .navactions > .btn{border-radius:var(--radius-pill);padding:9px 18px}
.iconbtn{
  display:inline-grid;place-items:center;width:38px;height:38px;flex:none;
  border-radius:var(--radius-pill);border:1px solid var(--glass-line);color:var(--ink-2);
  background:transparent;text-decoration:none;
  transition:color var(--dur-fast) var(--ease-out),
             background var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out);
}
.iconbtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round}
.iconbtn:hover,.iconbtn:focus-visible{color:var(--brand);border-color:var(--glass-line-hi);
  background:var(--glass)}

/* Butonul cu sclipire. Dunga trece peste tot butonul, inclusiv peste text --
   asa arata un reflex pe o suprafata, si de-aia se citeste ca lumina, nu ca
   un element care se plimba. Pauza dintre treceri e in keyframes, nu in
   `animation-delay`: cu delay ar sclipi o data si s-ar opri. */
.btn.shimmer{position:relative;overflow:hidden}
.btn.shimmer::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.5) 50%,transparent 62%);
  transform:translateX(-110%);
  animation:shimmer 3.6s var(--ease-in-out) infinite;
}
@keyframes shimmer{0%,62%{transform:translateX(-110%)}100%{transform:translateX(110%)}}
/* `.btn.shimmer` e tot un buton plin, deci il prinde regula de mai jos. */

/* ------------------------------------------------- cardurile paginii */

/* Un singur fel de card, folosit peste tot: sticla peste fundal, bordura
   translucida, colturi mari, si o ridicare la trecerea cursorului. Scris o
   data si aplicat prin lista de selectoare de mai jos, ca sa nu apara al
   doilea fel de card peste doua saptamani. */
.feature,
.flow > li,
.faq details,
.mapfig,
.cranks{
  background:var(--glass);
  border:1px solid var(--glass-line);
  border-radius:var(--radius-md);
  padding:26px;
  /* Fara `backdrop-filter` aici, desi specificatia il cerea pe carduri.
     Doua motive, si al doilea l-am masurat: cardurile stau pe un fundal
     OPAC, deci n-au ce estompa -- efectul e invizibil; iar douazeci de
     straturi de blur pe aceeasi pagina blocheaza compozitorul (pagina a
     incetat sa mai raspunda la captura, si asta inseamna ca si pe un laptop
     modest s-ar taia la derulare). Sticla ramane pe capsula barii, singurul
     loc pe unde chiar trece continut pe dedesubt. */
  box-shadow:var(--lift);
  transition:transform var(--dur-mid) var(--ease-out),
             box-shadow var(--dur-mid) var(--ease-out),
             border-color var(--dur-mid) var(--ease-out);
}
.feature:hover,
.flow > li:hover,
.faq details:hover,
.mapfig:hover{
  transform:translateY(-6px);
  box-shadow:var(--lift-hi);
  border-color:var(--glass-line-hi);
}

/* Bento asimetric, fara sa se atinga markup-ul: primul card tine doua
   coloane si sta mai inalt, restul curg langa el. Asimetria e a
   continutului -- prima trasatura e cea care ne desparte de restul pietei,
   si acum se si vede asta. */
.features{
  display:grid;gap:22px;
  grid-template-columns:repeat(6,1fr);
  align-items:stretch;
}
.features > .feature{grid-column:span 2}
.features > .feature:first-child{
  grid-column:span 3;border-radius:var(--radius-md);padding:32px;
  background:
    radial-gradient(120% 140% at 12% 0%, rgba(16,185,129,.14) 0%, transparent 62%),
    var(--glass);
}
.features > .feature:nth-child(2){grid-column:span 3}

/* Bento-ul de sase coloane e pentru latimea intreaga. Inauntrul lui
   `.split`, unde titlul ia stanga si cardurile au ramas cu jumatate de
   pagina, aceleasi sase coloane fac dale inalte si subtiri de un cuvant.
   Grila se masoara in contextul in care sta, nu in pagina. */
/* Aceeasi greseala, al doilea loc: `.split .features` are specificitatea
   (0,2,0) si batea resetul de pe telefon, scris `.features` -- (0,1,0).
   Iesea o coloana de 210px cu paragrafe in ea. */
@media (min-width:701px){
  .split .features{grid-template-columns:repeat(2,1fr)}
  .split .features > .feature,
  .split .features > .feature:nth-child(2){grid-column:span 1}
  .split .features > .feature:first-child{grid-column:span 2}
}

.flow{display:grid;gap:22px;grid-template-columns:repeat(6,1fr);padding:0;list-style:none}
/* Patru pasi pe sase coloane: 4+2 pe primul rand, 2+4 pe al doilea. Randul
   se umple, iar dalele mari cad in diagonala -- asimetrie care nu lasa gauri.
   Cu `span 3` si `span 2` ramanea o treime goala in dreapta, si un gol la
   capat se citeste ca un card care n-a apucat sa se incarce. */
.flow > li{padding:28px}
/* Intinderile stau in interogarea latimii la care au fost desenate. Scrise
   in afara ei, se dezlipeau greu: `:nth-child(1)` are specificitatea (0,2,1),
   iar resetul de mai jos era scris `.flow > li` -- (0,1,1). Pe telefon grila
   avea o coloana, primul card cerea patru, si grila fabrica trei coloane
   implicite ca sa i le dea: 20px, 0px si restul. Cardurile 2, 3 si 4 intrau
   unul peste altul in ele. */
@media (min-width:1001px){
  .flow > li:nth-child(1){grid-column:span 4}
  .flow > li:nth-child(2){grid-column:span 2}
  .flow > li:nth-child(3){grid-column:span 2}
  .flow > li:nth-child(4){grid-column:span 4}
  .flow > li:nth-child(n+5){grid-column:span 3}
}
.flow .flow-n{
  display:inline-grid;place-items:center;width:38px;height:38px;margin-bottom:14px;
  border-radius:var(--radius-pill);background:rgba(16,185,129,.13);color:var(--brand);
  border:1px solid rgba(16,185,129,.28);
  font-family:var(--mono);font-size:var(--fs-sm);
}

.faq{display:grid;gap:14px}
.faq details{padding:20px 24px}
.faq summary{cursor:pointer}

/* Harta si clasamentul: doua carduri de latimi diferite, nu doua jumatati.
   Harta e obiectul, lista e legenda ei. */
.mapduo{display:grid;gap:22px;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  align-items:start}
.mapfig{padding:22px;border-radius:var(--radius-md)}
.cranks{padding:24px}

/* Ierarhia tipografica ceruta: titlurile grele si stranse, textul de sub
   ele mai stins. Contrastul dintre ele face pagina sa se citeasca in
   trepte, nu ca un bloc uniform. */
section h2{font-weight:700;letter-spacing:-.03em}
.section-head,.split-head{gap:14px}
.section-head .sub,.split-head .sub,.feature p,.flow > li p{color:var(--ink-3)}
.feature h3,.flow > li h3{font-weight:600;letter-spacing:-.012em;color:var(--ink)}

/* Aer. Sectiunile stateau la 52px; la latimile astea si cu carduri, ritmul
   cere mai mult, altfel cardurile se ating vizual intre sectiuni. */
section{padding:76px 0}
section.mapfirst,section.stripsec{padding-top:64px}

/* Intrarea in scena, esalonata. Nu e decor: cardurile apar in ordinea in
   care se citesc, deci miscarea spune de unde incepe pagina. Se opreste la
   al saselea -- dupa el, intarzierea ar fi mai lunga decat rabdarea. */
@media (prefers-reduced-motion:no-preference){
  .features > .feature,.flow > li,.faq details{
    animation:rise .5s var(--ease-out) both;
  }
  .features > .feature:nth-child(2),.flow > li:nth-child(2),.faq details:nth-child(2){animation-delay:.06s}
  .features > .feature:nth-child(3),.flow > li:nth-child(3),.faq details:nth-child(3){animation-delay:.12s}
  .features > .feature:nth-child(4),.flow > li:nth-child(4),.faq details:nth-child(4){animation-delay:.18s}
  .features > .feature:nth-child(5),.flow > li:nth-child(5),.faq details:nth-child(5){animation-delay:.24s}
  .features > .feature:nth-child(n+6),.flow > li:nth-child(n+6),.faq details:nth-child(n+6){animation-delay:.3s}
  @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}

/* Butoanele capata relieful cerut, si o glezna tactila la apasare. Raza nu se
   mai rescrie aici: statea si in regula de baza, cu alta valoare. */
/* Haloul verde e al butonului PLIN, si numai al lui. Regula de aici era
   `.btn:hover`, deci il primea si butonul gol -- adica actiunea secundara se
   aprindea la fel de tare ca cea principala, pe aceeasi bara. Butonul gol se
   ridica acum neutru; ce il face sa raspunda e marginea si culoarea textului. */
.btn:not(.ghost):hover{box-shadow:var(--glow)}
.btn:active{transform:translateY(1px)}
.btn.ghost{border-color:var(--glass-line);background:var(--glass)}
/* Butonul fantoma pe banda inchisa. Isi ia in mod normal culorile din
   `--ink` si `--glass`, si amandoua se intorc odata cu tema -- pe cea
   deschisa iesea text inchis peste banda inchisa. Banda nu se intoarce, deci
   nici ce sta pe ea nu are voie. Valorile sunt scrise pe alb translucid
   dinadins: functioneaza peste orice fundal inchis, indiferent de tema. */
section.hero-dark .btn.ghost{
  color:var(--slab-ink);
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.22);
}
section.hero-dark .btn.ghost:hover{
  color:#fff;background:rgba(255,255,255,.15);
  border-color:rgba(255,255,255,.34);
}
.btn.ghost:hover{
  border-color:var(--glass-line-hi);color:var(--brand);
  box-shadow:var(--shadow-card);
}

/* Banda de incheiere: aceeasi lumina ca in capul paginii, ca pagina sa se
   inchida cu ce a inceput. */
section.band.cta{
  position:relative;isolation:isolate;border-radius:var(--radius-md);
  margin:0 auto 40px;max-width:calc(var(--wrap) - 0px);overflow:hidden;
  border:1px solid var(--glass-line);
}
section.band.cta::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(90% 140% at 20% 0%, rgba(16,185,129,.16) 0%, transparent 60%);
}

@media (max-width:1000px){
  .features,.flow{grid-template-columns:repeat(2,1fr)}
  .features > .feature,.features > .feature:first-child,
  .features > .feature:nth-child(2){grid-column:span 1}
  .mapduo{grid-template-columns:1fr}
}
@media (max-width:700px){
  .features,.flow{grid-template-columns:1fr}
  section{padding:56px 0}
  nav.top > .wrap.navpill{height:56px;padding:0 8px 0 16px}
}

/* ==================================================================
   STRAT DE FINISAJ · 19 august 2026
   Lumina din fundal, bordurile cu reflexie, titlul in degrade, etichetele
   ca pastile, separatoarele care se sting si granulatia peste tot.
   Tot stratul e vizual: nicio structura de date atinsa, niciun text.
   ================================================================== */

/* ------------------------------------------------- lumina ambientala */

/* Cercul difuz din spatele sectiunii cheie. Specificatia cerea un disc plin
   cu `blur(120px)`; e scris ca degrade radial, care arata identic si costa
   aproape nimic. Diferenta nu e teoretica: un `filter:blur` de 120px pe un
   element de o mie de pixeli se recalculeaza la fiecare cadru de derulare,
   si tot din blur a inghetat pagina data trecuta. Degradeul se deseneaza o
   data si ramane in textura. */
.mapfirst,.hero-flat,section.band.cta{position:relative;isolation:isolate}
.mapfirst::before,section.band.cta::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:50%;top:38%;width:min(1100px,120%);aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle closest-side,
    rgba(16,185,129,.11) 0%, rgba(16,185,129,.055) 42%, transparent 72%);
}

/* Granulatia. Fara ea, o suprafata mare de o singura culoare arata plata si
   se banduieste pe ecranele pe 8 biti -- se vad dungi in degradeuri.

   Specificatia cerea un strat peste pagina, cu `mix-blend-mode:overlay`.
   Asa am si scris-o intai, si fisa de proiect a incetat sa mai raspunda: un
   strat fix cat ecranul, amestecat cu tot ce e sub el, se recompune la
   fiecare cadru de derulare. A doua oara acelasi tipar, dupa blur -- efectul
   care se ARATA la fel poate costa de o suta de ori mai mult, in functie de
   cum e obtinut.

   Acum textura sta direct in fundalul lui `body`, dintr-un SVG cu
   `feTurbulence`: se deseneaza o data, nu e niciun strat in plus si nu e
   niciun fisier de incarcat. Transparenta e coapta in SVG, nu pusa din
   `opacity`, tocmai ca sa nu apara al doilea strat. */
body{
  background-color:var(--paper);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
  background-repeat:repeat;
}

/* ------------------------------------------- borduri cu reflexie */

/* Dunga de lumina din interiorul marginii de sus. Asta face diferenta intre
   "dreptunghi desenat" si "obiect care sta intr-o lumina" -- aceeasi idee ca
   la butonul plin, dusa pe toate cardurile. */
.feature,.flow > li,.faq details,.mapfig,.cranks,nav.top > .wrap.navpill{
  border-color:rgba(255,255,255,.08);
  box-shadow:var(--lift), inset 0 1px 1px rgba(255,255,255,.10);
}

/* Reactia la trecerea cursorului: marginea prinde culoare, umbra se aduna
   in verde. Mai lenta decat restul (500ms), fiindca e o schimbare de stare
   ambientala, nu un raspuns la clic -- graba ar face-o sa clipeasca. */
.feature,.flow > li,.faq details,.mapfig{
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out),
             border-color .5s var(--ease-out);
}
.feature:hover,.flow > li:hover,.faq details:hover,.mapfig:hover{
  /* Marginea ramane verde: e un chenar de un pixel care spune „asta e sub
     cursor", nu un halou care striga. Umbra devine neutra. */
  border-color:rgba(16,185,129,.30);
  box-shadow:var(--shadow-card),
             inset 0 1px 1px rgba(255,255,255,.12);
}
/* Pictograma creste putin odata cu cardul. `group-hover` din specificatie e
   exact asta: starea parintelui muta copilul. */
.feature-icon,.flow-n{transition:transform .5s var(--ease-out)}
.feature:hover .feature-icon,.flow > li:hover .flow-n{transform:scale(1.05)}

/* ------------------------------------------------------- tipografie */

/* Titlul principal, in degrade. Alb la stanga, cenusiu spre dreapta: asa
   randul are un capat "aprins" si unul care se retrage, si pagina capata
   adancime fara sa se adauge nimic. Se pune DOAR pe h1 -- pe fiecare titlu
   ar deveni un manierism, si textul lung in degrade se citeste mai greu.
   `color` ramane scris inaintea decupajului: daca `background-clip:text`
   nu e suportat, textul ramane vizibil in loc sa dispara. */
h1{
  color:var(--ink);
  background:var(--h1-grad);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
/* Titlul de pe banda inchisa nu se intoarce odata cu tema, fiindca nici
   banda nu se intoarce. Vezi `--h1-grad-slab`. */
section.hero-dark h1{background-image:var(--h1-grad-slab)}
@supports not ((background-clip:text) or (-webkit-background-clip:text)){
  h1{background:none;-webkit-text-fill-color:currentColor}
}
h1,h2,h3{letter-spacing:-.028em}
h3{letter-spacing:-.012em}

/* Etichetele mici devin pastile. Erau text marunt cu spatiere; acum au
   suprafata si contur, deci se citesc ca un obiect, nu ca o nota scapata
   deasupra titlului. */
/* Eticheta de deasupra unui titlu sau a unui grafic.
   Era o PASTILA -- chip verde, contur, colturi rotunde -- si aia era
   greseala: o pastila e un obiect pe care se apasa, iar asta nu se apasa.
   Peste tot unde nu eticheta nimic („CONT" deasupra unui formular de cont)
   arata exact ca ce e: decor. Pastilele fara continut au fost scoase din
   marcaj; ce a ramas eticheteaza chiar ceva, si de-aia se scrie ca text. */
.eyebrow,.bus > b{
  display:inline-block;
  font-family:var(--mono);
  font-size:var(--fs-2xs);font-weight:500;text-transform:uppercase;
  letter-spacing:.16em;color:var(--ink-3);
}
.bus{border-top:0;padding-top:0;align-items:baseline}

/* ----------------------------------------------------- separatoare */

/* Linia care se stinge la capete, in locul celei taiate drept. Se pune pe
   marginile dintre sectiuni si pe subsol -- NU pe tabele, unde linia
   delimiteaza date si trebuie sa ajunga pana la capat. */
section{border-top:0;position:relative}
section + section::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(to right,transparent,rgba(255,255,255,.14) 50%,transparent);
}
hr{border:0;height:1px;
  background:linear-gradient(to right,transparent,rgba(255,255,255,.14) 50%,transparent)}

/* ------------------------------------------------------- butoanele */

.btn{transition:transform .18s var(--ease-out), box-shadow .3s var(--ease-out),
     background var(--dur-fast) var(--ease-out)}
.btn:active{transform:scale(.98)}
/* Haloul butonului plin se scrie o singura data, mai sus. Aici statea a doua
   oara, cu aceleasi culori scrise de mana. */

/* ==================================================================
   REPARATII · 19 august 2026, din capturile trimise
   ================================================================== */

/* --------------------------------------------- filtrele de pe /proiecte */

/* Cipurile deschid acum lista lor. `<details>` sta relativ, iar panoul iese
   peste continut -- fara `position:absolute` ar impinge tabelul in jos la
   fiecare deschidere. */
.fdrop{position:relative;display:inline-block}
.fdrop > summary{list-style:none;cursor:pointer}
.fdrop > summary::-webkit-details-marker{display:none}
/* Sageata care se intoarce la deschidere. Desenata din borduri, ca sa nu
   intre inca o glifa in pagina. */
.fdrop > summary::after{
  content:"";display:inline-block;margin-left:8px;vertical-align:1px;
  width:5px;height:5px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg) translate(-1px,-1px);
  transition:transform var(--dur-fast) var(--ease-out);
}
.fdrop[open] > summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.fmenu{
  position:absolute;top:calc(100% + 8px);left:0;z-index:40;
  min-width:240px;max-height:340px;overflow-y:auto;
  display:flex;flex-direction:column;gap:1px;padding:7px;
  background:var(--paper-2);border:1px solid var(--glass-line);
  border-radius:var(--radius-md);box-shadow:var(--lift), inset 0 1px 1px rgba(255,255,255,.08);
}
.fopt{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:9px 12px;border-radius:var(--radius-sm);text-decoration:none;
  color:var(--ink-2);font-size:var(--fs-sm);white-space:nowrap;
  transition:background var(--dur-fast) var(--ease-out),
             color var(--dur-fast) var(--ease-out);
}
.fopt:hover{background:var(--paper-3);color:var(--ink)}
.fopt.is-on{color:var(--brand);background:rgba(16,185,129,.10)}
.fopt > b{font-family:var(--mono);font-size:var(--fs-2xs);color:var(--ink-3);font-weight:400}
.fopt.is-on > b{color:var(--brand)}
/* Pe telefon meniul se lipeste de marginile ecranului, altfel ultimul cip
   deschide un panou care iese din pagina. */
@media (max-width:640px){
  .fmenu{position:fixed;left:12px;right:12px;top:auto;min-width:0;max-height:60vh}
}

/* ------------------------------------------------- pasii, ca dale */

/* Linia care lega pasii ramasese din asezarea veche, unde pasii stateau pe
   un rand si linia era drumul dintre ei. Acum fiecare pas e un card, iar
   linia ieseau din carduri si continua in gol -- se vedea in captura ca o
   dunga peste sectiune. Cardul e drumul; cifra spune ordinea. */
.flow > li::before{display:none}
.flow > li{padding:26px}
.flow .flow-n{position:static;margin:0 0 14px}
.flow h3{margin-bottom:6px}
.flow p{max-width:none}

/* ---------------------------------------------------- intrebarile */

/* `.faq` avea inca rama veche: cutie cu chenar, colturi si umbra, iar
   inauntru fiecare intrebare mai punea o data padding. De aici cardurile
   inalte si goale din captura. Rama pleaca, cardul ramane. */
.faq{background:none;border:0;border-radius:0;box-shadow:none;overflow:visible}
.faq details + details{border-top:0}
.faq summary{padding:0;font-size:var(--fs-md);font-weight:600}
.faq details p{margin:14px 0 0;padding-left:16px}
.faq details[open]{background:var(--glass)}

/* ------------------------------------------------------------ telefon */

/* Piesele noi n-aveau reguli sub 700px: capsula barii ducea cinci elemente
   pe o latime de 390, iar banda de incheiere -- care acum e un card rotunjit
   -- se lipea de marginile ecranului. */
@media (max-width:900px){
  /* Sub burger, actiunile stau oricum in panoul de meniu; in capsula raman
     doar marca, butonul de emfaza si burgerul. Cautarea si „Intra" pleaca:
     amandoua exista in panou, iar pe 390px cinci obiecte intr-o pastila
     inseamna tinte de atingere sub prag. */
  nav.top > .wrap > .navactions > .iconbtn,
  nav.top > .wrap > .navactions > .btn.ghost{display:none}
  nav.top > .wrap.navpill{gap:8px;padding:0 8px 0 16px}
  nav.top > .wrap > .navactions{margin-left:auto}
}
@media (max-width:700px){
  nav.top{padding-top:10px}
  nav.top > .wrap.navpill{border-radius:var(--radius-md)}
  /* Banda de incheiere e card, deci are nevoie de marginile ei. */
  section.band.cta{margin:0 14px 28px;border-radius:var(--radius-md)}
  /* Cardurile pierd din padding, altfel textul ramane cu 20 de caractere pe
     rand si fiecare card devine o coloana ingusta si inalta. */
  .feature,.flow > li,.faq details,.mapfig,.cranks{padding:20px}
  .features > .feature:first-child{padding:22px}
  .filterbar{gap:8px}
  .fdrop > summary{font-size:var(--fs-sm)}
  /* Titlul in degrade pe trei randuri inguste isi pierde capatul aprins:
     pe latimea asta degradeul merge in jos, nu la dreapta. */
  h1{background-image:var(--h1-grad-v)}
  section.hero-dark h1{background-image:var(--h1-grad-slab-v)}
}
@media (max-width:430px){
  nav.top > .wrap > .navactions > .btn{padding:8px 14px;font-size:var(--fs-sm)}
  .brand{font-size:var(--fs-lg)}
}

/* Campul de cautare din bara de filtre. Regulile de asezare existau deja
   (`.fsearch`, de pe o versiune care avusese camp si l-a pierdut); ce
   lipsea era imbracamintea pe tema inchisa, ca sa arate ca o pastila din
   acelasi set, nu ca un input de sistem. */
.fsearch input{
  background:var(--glass);border:1px solid var(--glass-line);color:var(--ink);
  border-radius:var(--radius-pill);padding:9px 16px;font:inherit;font-size:var(--fs-sm);
  transition:border-color var(--dur-fast) var(--ease-out);
}
.fsearch input::placeholder{color:var(--ink-faint)}
.fsearch input:focus{outline:none;border-color:var(--brand)}
.fsearch button{
  flex:none;background:var(--glass);border:1px solid var(--glass-line);
  color:var(--ink-2);border-radius:var(--radius-pill);padding:9px 16px;cursor:pointer;
  font:inherit;font-size:var(--fs-sm);font-weight:600;
  transition:color var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out);
}
.fsearch button:hover{color:var(--brand);border-color:rgba(16,185,129,.30)}

/* ------------------------------------------------- meniul de pe telefon */

/* `nav.top` are `pointer-events:none`, ca banda din jurul capsulei sa nu
   inghita clicurile de sub ea. Panoul de meniu e frate cu capsula, nu copil
   -- deci mostenea si el „nu prinde clicuri": se deschidea frumos si nu se
   putea apasa nimic in el. Bug-ul meu, din ziua in care bara a devenit
   capsula.

   Regula se pune pe panou, nu se scoate de pe bara: banda chiar trebuie sa
   ramana transparenta la clic, altfel o fasie de 88px pe toata latimea ar
   acoperi continutul de dedesubt. */
.menu-mobile{pointer-events:auto}

@media (max-width:900px){
  /* Panoul se aseaza ca o continuare a capsulei: aceeasi latime, aceleasi
     colturi, aceeasi sticla. Inainte era o lespede cap-coada sub o pastila
     care pluteste -- doua limbaje pe acelasi ecran. */
  .menu-mobile{
    margin:10px 14px 0;border-radius:var(--radius-md);border:1px solid var(--glass-line);
    border-top:1px solid var(--glass-line);
    background:color-mix(in srgb, var(--paper-2) 94%, transparent);
    box-shadow:var(--lift), inset 0 1px 0 rgba(255,255,255,.06);
  }
  body.menu-open .menu-mobile{max-height:calc(100vh - 120px)}
  .menu-mobile > .wrap{padding:6px 20px 20px}
  .menu-mobile > .wrap > a{border-bottom-color:var(--line)}
  /* Tinte de atingere: 44px e pragul, iar 11px de padding pe un rand de
     text dadea 40. Vezi NOTES, „Harta pe mobil". */
  .menu-mobile > .wrap > a{padding:13px 0}
}

/* ==================================================================
   PAGINA DE PRETURI, refacuta
   ================================================================== */

/* Trei coloane egale. Asezarea de dinainte punea gratuitul intr-o banda
   lata deasupra, dinadins -- „nu sunt trei optiuni comparabile intre care
   alegi una". Cerinta e explicita pentru grila de trei, deci asta e; ce se
   pierde e distinctia dintre „gratuit pentru totdeauna" si „abonament",
   iar ce se castiga e comparatia directa, coloana langa coloana. */
.pricing .plans{
  display:grid;gap:32px;grid-template-columns:repeat(3,1fr);
  align-items:start;margin-top:38px;
}
.pricing .plan{
  position:relative;display:flex;flex-direction:column;gap:14px;
  background:color-mix(in srgb, var(--paper-2) 55%, transparent);
  border:1px solid rgba(255,255,255,.10);border-radius:var(--radius-md);
  padding:34px 30px;
  box-shadow:var(--lift), inset 0 1px 1px rgba(255,255,255,.08);
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out),
             border-color .3s var(--ease-out);
}
.pricing .plan:hover{border-color:rgba(16,185,129,.30)}

/* Planul recomandat: iese in fata cu doi pixeli de margine si o umbra
   verde, nu cu alta culoare de fundal -- culoarea ar fi concurat cu bifele
   dinauntru, care sunt tot verzi si care chiar poarta informatie. */
.pricing .plan.is-top{
  border:2px solid rgba(16,185,129,.5);
  background:color-mix(in srgb, var(--paper-2) 85%, transparent);
  /* Iese in fata din marginea verde de doi pixeli si din insigna, nu dintr-un
     halou: butonul lui e oricum aprins, iar doua verzi suprapuse pe acelasi
     card se anuleaza. */
  box-shadow:var(--shadow-card),
             inset 0 1px 1px rgba(255,255,255,.10);
}
@media (min-width:1000px){ .pricing .plan.is-top{transform:translateY(-16px)} }
.pricing .plan.is-top:hover{border-color:rgba(16,185,129,.75)}

/* Insigna. Scrie „Recomandat", nu „Cel mai ales de parteneri": a doua e o
   afirmatie despre ce aleg clientii, iar clienti inca nu sunt. Prima e o
   afirmatie despre noi, si pe aia o putem sustine. Aceeasi grija ca in
   comentariul din `pricing()`, unde insigna fusese scoasa tocmai de-aia. */
.plan-badge{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  white-space:nowrap;
  font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:.14em;
  text-transform:uppercase;color:#04140f;font-weight:600;
  background:linear-gradient(180deg,#34d99a,#10b981);
  border-radius:var(--radius-pill);padding:6px 16px;
  box-shadow:var(--shadow-card);
}

.pricing .plan h3{font-size:var(--fs-h4);font-weight:600;letter-spacing:-.02em}
.pricing .plan .plan-who{color:var(--ink-3);font-size:var(--fs-sm);margin:0}
/* Fara `display` aici: proprietatea asta e a regulilor de vizibilitate
   de mai jos, si orice valoare pusa pe selectorul general le-ar bate
   pe amandoua (trei clase contra clasa+atribut). */
.pricing .plan .plan-price{margin:8px 0 0}
.pricing .plan .pp-now{
  font-family:var(--display);font-size:clamp(2.4rem,4vw,3.1rem);font-weight:700;
  letter-spacing:-.035em;color:var(--ink);line-height:1;
}
.pricing .plan .pp-unit,.pricing .plan .plan-billed{
  color:var(--ink-3);font-size:var(--fs-sm);
}
.pricing .plan .pp-was{color:var(--ink-3);text-decoration:line-through;font-size:var(--fs-md)}
.pricing .plan > .btn{margin-top:6px;text-align:center;border-radius:var(--radius-pill)}
/* Butonul planului recomandat E actiunea principala a paginii de preturi,
   deci pastreaza haloul -- singurul de pe /preturi, dupa ce l-au pierdut
   cardul, insigna si comutatorul. Pe acelasi token ca restul butoanelor
   pline: doua verzi apropiate dar diferite se vad ca o scapare. */
.pricing .plan.is-top > .btn{
  background:linear-gradient(180deg,#34d99a,#10b981);
  /* Degradeul e scris in clar, deci nu se intoarce cu tema -- si atunci nici
     textul lui n-are voie. `--on-accent` e aproape negru pe tema inchisa si
     ALB pe cea deschisa: alb peste #10b981 da 2,0:1, sub orice prag. Acelasi
     verde-negru ca insigna de deasupra, care rezolvase deja intrebarea. */
  color:#04140f;
  box-shadow:var(--glow), inset 0 1px 0 rgba(255,255,255,.35);
}

/* Bifele. Cercul e translucid, nu plin: pe langa el sta text, iar un disc
   plin de smarald ar fi tras ochiul de pe cuvinte. */
.plan-feats{
  list-style:none;margin:18px 0 0;padding:0;
  display:flex;flex-direction:column;gap:11px;
  border-top:1px solid var(--line);padding-top:20px;
}
.plan-feats li{
  display:flex;align-items:flex-start;gap:11px;
  color:var(--ink-2);font-size:var(--fs-sm);line-height:1.45;
}
.pf-check{
  flex:none;display:inline-grid;place-items:center;width:22px;height:22px;
  border-radius:var(--radius-pill);background:rgba(16,185,129,.15);color:var(--brand);
  margin-top:1px;
}
.pf-check svg{width:14px;height:14px}

/* Comutatorul, ca un singur obiect cu doua jumatati. Inainte erau doua
   butoane alaturate; acum e o pastila in care culisorul e starea. */
/* Fara `margin:0 auto`: comutatorul nu mai e singur pe rand, ci sta intr-un
   `.periodbar` care il centreaza. Intr-un container flex, marginea automata
   inghite tot spatiul liber -- si impingea insigna de reducere la marginea
   din dreapta a paginii, la 37 de centimetri de butonul la care se refera. */
.pricing .periods{
  display:inline-flex;gap:4px;padding:5px;
  background:var(--glass);border:1px solid var(--glass-line);border-radius:var(--radius-pill);
}
.pricing{display:flex;flex-direction:column;align-items:center}
.pricing > *{width:100%}
.pricing .periods{width:auto}
.period-btn{
  border:0;cursor:pointer;font:inherit;font-size:var(--fs-sm);font-weight:600;
  color:var(--ink-2);background:transparent;border-radius:var(--radius-pill);padding:10px 20px;
  display:inline-flex;align-items:center;gap:9px;
  transition:background var(--dur-fast) var(--ease-out),
             color var(--dur-fast) var(--ease-out);
}
.period-btn:hover{color:var(--ink)}
.period-btn.is-on{background:var(--paper-3);color:var(--ink)}
.period-off{
  font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:.08em;
  color:var(--brand);background:rgba(16,185,129,.12);
  border:1px solid rgba(16,185,129,.22);border-radius:var(--radius-pill);padding:3px 9px;
}

@media (max-width:1000px){
  .pricing .plans{grid-template-columns:1fr;gap:26px}
}
@media (max-width:700px){
  .pricing .plan{padding:28px 22px}
  .pricing .periods{width:100%;justify-content:center}
}

/* ---------------------------------------------- preturi: reparatii */

/* AMANDOUA PRETURILE SE VEDEAU DEODATA. `.plan-price[data-period]{display:none}`
   e clasa+atribut, adica (0,2,0); regula mea de asezare era
   `.pricing .plan .plan-price`, trei clase, (0,3,0) -- si a batut-o. Deci
   fiecare card arata si pretul anual, si pe cel lunar, unul sub altul.
   A patra oara aceeasi capcana: o regula de ASEZARE care calca una de
   VIZIBILITATE. Vezi NOTES.md, „A treia oara: asezarea bate vizibilitatea".

   Reparatia nu ridica specificitatea la ascundere -- ar fi pornit o cursa.
   Asezarea se scrie pe starea VIZIBILA, deci cele doua reguli nu se mai
   intalnesc niciodata pe acelasi element. */
.pricing[data-period="an"] .plan .plan-price[data-period="an"],
.pricing[data-period="luna"] .plan .plan-price[data-period="luna"],
.pricing .plan .plan-price:not([data-period]){
  display:flex;align-items:baseline;gap:10px;
}

/* Comutatorul: doua jumatati egale, cu culisorul care aluneca intre ele.
   Culisorul e un singur element mutat cu `transform`, ca indicatorul din
   bara -- o clasa pusa si scoasa n-ar avea ce interpola. */
/* Trei coloane, nu un rand centrat. Cu `justify-content:center`, ce se
   centreaza e GRUPUL comutator+insigna -- deci butoanele stau mutate la
   stanga cu jumatate din latimea insignei, si nu mai cad pe axa cardurilor
   de dedesubt. Cele doua coloane laterale sunt egale (`1fr`), deci
   comutatorul e exact pe mijlocul paginii indiferent cat de lata e insigna
   sau daca e stinsa. */
.periodbar{
  display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;column-gap:12px;
}
.periodbar > .periods{grid-column:2}
.periodbar > .period-off{grid-column:3;justify-self:start}
.pricing .periods{
  position:relative;display:inline-grid;grid-template-columns:1fr 1fr;
  gap:0;padding:5px;
  background:var(--paper-2);border:1px solid var(--glass-line);
  border-radius:var(--radius-pill);box-shadow:inset 0 1px 2px rgba(0,0,0,.45);
}
.pricing .periods::before{
  content:"";position:absolute;z-index:0;top:5px;bottom:5px;left:5px;
  width:calc(50% - 5px);border-radius:var(--radius-pill);
  background:linear-gradient(180deg,#34d99a,#10b981);
  box-shadow:var(--shadow-card);
  transition:transform .28s var(--ease-out);
}
.pricing[data-period="luna"] .periods::before{transform:translateX(100%)}
.period-btn{
  position:relative;z-index:1;min-width:104px;justify-content:center;
  padding:9px 22px;color:var(--ink-2);
}
.period-btn.is-on{background:transparent;color:#04140f}
.period-btn:hover{color:var(--ink)}
.period-btn.is-on:hover{color:#04140f}
.period-off{
  transition:opacity var(--dur-mid) var(--ease-out);
}
.pricing[data-period="luna"] .period-off{opacity:0;pointer-events:none}

/* Gratuitul nu mai striga. Pe alte site-uri planul liber e greu de gasit
   dinadins; noi n-avem motiv sa-l ascundem -- baza de date e chiar carligul
   -- dar nici sa-l facem cel mai vizibil obiect din pagina. „Gratuit" era
   scris la aceeasi marime cu 66 €, adica un pret de trei ori mai mare cu
   litere la fel de mari. Coboara la marimea unui titlu, nu a unui pret. */
.pricing .plan:first-child{
  background:color-mix(in srgb, var(--paper-2) 30%, transparent);
  border-color:rgba(255,255,255,.06);
}
.pricing .plan:first-child .pp-now{
  font-size:var(--fs-h3);color:var(--ink-2);font-weight:600;letter-spacing:-.02em;
}
.pricing .plan:first-child .plan-billed{color:var(--ink-3)}
.pricing .plan:first-child .plan-feats li{color:var(--ink-3)}
.pricing .plan:first-child .pf-check{background:rgba(255,255,255,.06);color:var(--ink-3)}

/* --------------------------------- preturi: cardurile se aliniaza intre ele */

/* Cardurile erau trei grile separate, deci randurile din ele n-aveau cum sa
   se alinieze: butonul pornea la alta inaltime in fiecare, listele la fel, si
   toata sectiunea arata strambata. Nicio ajustare de padding nu repara asta
   -- inaltimile vin din text, iar textele au lungimi diferite.

   Acum cardurile sunt COLOANE ale aceleiasi grile, cu `subgrid`: fiecare card
   ocupa cinci randuri ale grilei parinte, iar randul „buton" e acelasi rand
   fizic in toate trei. Se aliniaza singure, la orice lungime de text. */
.pricing .plans{
  grid-template-rows:auto auto auto auto 1fr;
  align-items:stretch;
}
.pricing .plan{
  display:grid;grid-row:span 5;grid-template-rows:subgrid;
  gap:0;align-content:start;
}
/* Randul insignei exista in toate cardurile, gol la cele fara. Asa insigna
   nu mai pluteste peste marginea de sus si nu mai impinge nimic. */
.plan-flag{display:flex;justify-content:center;min-height:26px;align-items:center}
.plan-badge{position:static;transform:none;top:auto;left:auto}
.plan-head{display:flex;flex-direction:column;gap:6px;padding-top:14px}
.plan-money{display:flex;flex-direction:column;gap:4px;justify-content:flex-end;
  padding:14px 0 18px}
.pricing .plan > .btn{margin:0;align-self:start;width:100%}
.plan-feats{margin-top:22px}

/* Cardul recomandat NU se mai ridica. Cerinta initiala cerea `-translate-y-4`,
   dar ridicarea sparge exact alinierea pe care o rezolva subgrid-ul: doua
   carduri incep la un etaj, al treilea la altul, si toata sectiunea se citeste
   strambata. Emfaza ramane -- margine de doua ori mai groasa, umbra verde si
   insigna -- si nu mai costa simetria. */
@media (min-width:1000px){ .pricing .plan.is-top{transform:none} }

/* Fara subgrid (browsere vechi), cardurile se intorc la asezarea in coloana:
   nealiniate intre ele, dar intregi. */
@supports not (grid-template-rows:subgrid){
  .pricing .plan{display:flex;flex-direction:column}
  .pricing .plan > .btn{width:auto}
}

/* ------------------------------------------- telefon: capsula si comutatorul */

@media (max-width:900px){
  /* Capsula ajungea lipita de ambele margini ale ecranului (masurat: 0-485
     pe o fereastra de 500), adica nu mai arata a obiect care pluteste, ci a
     bara obisnuita cu colturi rotunjite degeaba. Marginea o repune in aer;
     padding-ul interior scade cu aceeasi valoare, ca marca sa nu se mute. */
  nav.top > .wrap.navpill{margin:0 14px;padding:0 6px 0 14px}
}

@media (max-width:700px){
  /* Insigna de reducere se rupea pe doua randuri langa comutator. Trece sub
     el, pe rand propriu: „2 luni gratuite" e o propozitie scurta care nu are
     de ce sa fie taiata in doua. */
  /* Pe coloana, nu pe rand cu revenire. Cu `flex-wrap` si `flex-basis:100%`
     insigna primea randul ei, dar `flex-basis` bate `width`, deci fundalul
     verde se intindea cap-coada si arata a al doilea comutator. Pe coloana,
     fiecare copil isi ia latimea din continut si `align-items:center` le
     aseaza pe amandoua la mijloc. */
  .periodbar{flex-direction:column;align-items:center;row-gap:12px}
  .periodbar > .periods{width:100%}
  .period-off{flex:none;white-space:nowrap}
}

/* ------------------------------------------- inscriere: un singur cadru */

/* Cele trei drumuri aveau trei inaltimi: 387, 387 si 200 de pixeli (masurat).
   Comutai fila si se schimba fereastra sub degete -- persoana fizica n-are
   niciun camp de completat, deci cardul se strangea la jumatate.

   Cadrul se fixeaza la inaltimea celui mai inalt drum, scrisa in `rem` ca sa
   creasca odata cu textul, iar formularul scurt se aseaza pe mijlocul
   spatiului ramas. Golul centrat se citeste ca o alegere; acelasi gol adunat
   sub buton se citeste ca o pagina neterminata.

   Daca se adauga un camp pe drumul cu CUI, valoarea de mai jos creste odata
   cu el -- se remasoara, nu se ghiceste. */
/* 24,5rem = 392px: cu un pic peste cel mai inalt drum (387), ca toate
   trei sa fie EXACT la fel. La 24rem ramanea o diferenta de trei
   pixeli intre file -- invizibila, dar tot o diferenta. */
.auth-card{min-height:24.5rem;display:flex;flex-direction:column}
.auth-card > .auth-tabs{flex:none}
.auth-card > form{flex:1;justify-content:center}

/* ------------------------------------------------------- piata spot */

/* Graficul formei zilei. Barele sunt ancorate la ZERO, nu la minimul
   seriei: pretul spot trece in negativ la pranz, iar o scara pornita din
   minim ar arata orele negative ca pe cele mai scurte bare pozitive --
   adica exact invers decat realitatea. */
.shapechart,.monthchart{width:100%;height:auto;display:block;margin-top:8px}
.shapechart .sb{fill:var(--wash-4);transition:fill var(--dur-fast) var(--ease-out)}
.shapechart .sb.hi{fill:var(--brand)}
/* Pretul negativ isi are culoarea lui: nu e „putin", e altceva. Chihlimbarul
   e liber aici -- pe harta inseamna aviz expirat, dar graficul asta n-are
   nimic din vocabularul hartii langa el. */
.shapechart .sb.neg{fill:var(--warn)}
.shapechart .sb:hover{fill:var(--brand-ink)}
.shapechart .szero{stroke:var(--line-strong);stroke-width:1;stroke-dasharray:3 3}
.shapechart .sx{
  fill:var(--ink-3);font-family:var(--mono);font-size:11px;text-anchor:middle;
}
/* Barele stau pe banda alternativa, care e ea insasi mai deschisa decat
   hartia -- cu `--paper-3` se pierdeau in ea. Alb la 8%: se vad, dar nu
   concureaza cu linia pretului, care e cea care poarta informatia. */
.monthchart .mb{fill:rgba(255,255,255,.08)}
.monthchart .mb:hover{fill:rgba(255,255,255,.16)}
.monthchart .mp{
  fill:none;stroke:var(--brand);stroke-width:2;
  stroke-linejoin:round;stroke-linecap:round;
}

/* --------------------------------------------------------- calculator */

.calcform{
  display:grid;gap:16px;margin-top:26px;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));align-items:end;
}
.cfield{display:flex;flex-direction:column;gap:7px;position:relative}
.cfield > span{
  font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);
}
.cfield input{
  background:var(--glass);border:1px solid var(--glass-line);color:var(--ink);
  border-radius:var(--radius-md);padding:11px 44px 11px 14px;font:inherit;
  font-variant-numeric:tabular-nums;width:100%;
}
.cfield input:focus{outline:none;border-color:var(--brand)}
/* Unitatea sta IN camp, nu langa eticheta: asa se citeste odata cu cifra, si
   nu se pierde cand campurile se aseaza pe doua randuri. */
.cfield > i{
  position:absolute;right:14px;bottom:12px;font-style:normal;
  font-size:var(--fs-sm);color:var(--ink-3);pointer-events:none;
}
.calcform > .btn{align-self:end;height:44px}

/* Dalele calculatorului. Sase coloane sunt pentru cifre de patru caractere
   („2.006 proiecte"); aici valorile sunt sume de milioane cu simbol de
   moneda, si se rupeau pe doua randuri -- „2.253.189" pe unul, „€" pe altul.
   Trei coloane, si numarul respira. */
.tiles.is-wide{grid-template-columns:repeat(3,1fr);gap:26px 32px}
.tiles.is-wide .tile{border-top:1px solid var(--line);padding:18px 0 6px}
.tiles.is-wide .tile-n{white-space:nowrap}
@media (max-width:820px){.tiles.is-wide{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.tiles.is-wide{grid-template-columns:1fr}}

/* Evolutia zilnica: banda min-max plus linia mediei. */
.linechart{width:100%;height:auto;display:block;margin-top:6px}
.linechart .lb{fill:rgba(16,185,129,.13)}
.linechart .ll{fill:none;stroke:var(--brand);stroke-width:1.8;
  stroke-linejoin:round;stroke-linecap:round}
.linechart .lz{stroke:var(--line-strong);stroke-width:1;stroke-dasharray:3 3}
.linechart .lx{fill:var(--ink-3);font-family:var(--mono);font-size:11px;
  text-anchor:middle}

/* Saptamana. Weekendul isi are tonul lui: nu e „mai putin", e alt regim de
   cerere -- si asta e chiar informatia sectiunii. */
/* Saptamana are sapte bare, negativele au treisprezece luni: aceeasi
   latime ar strivi-o pe a doua pana cand etichetele se ating. */
.weekchart,.negchart{width:100%;height:auto;display:block}
.weekchart{max-width:440px}
.negchart{max-width:620px}
.weekchart .wb{fill:var(--wash-4)}
.weekchart .wb.wk{fill:var(--brand)}
.weekchart .wl{fill:var(--ink-3);font-family:var(--mono);font-size:11px;
  text-anchor:middle}
.weekchart .wv{fill:var(--ink-2);font-family:var(--mono);font-size:11px;
  text-anchor:middle}
/* Negativul imprumuta chihlimbarul, ca si barele negative din forma zilei:
   acelasi inteles, aceeasi culoare, pe toata pagina. */
.negchart .nb{fill:var(--warn)}

/* Pretul captat: trei linii pe acelasi desen. Gri e piata -- e reperul, deci
   n-are voie sa atraga ochiul; culorile sunt ale celor doua tehnologii. */
.capchart{width:100%;height:auto;display:block;margin-top:6px}
.capchart polyline{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.capchart .cp-piata{stroke:var(--line-strong);stroke-dasharray:5 4}
.capchart .cp-solar{stroke:var(--solar)}
.capchart .cp-eolian{stroke:var(--eolian)}
.capchart .lx{fill:var(--ink-3);font-family:var(--mono);font-size:11px;text-anchor:middle}

/* Caseta de lamurire din pagina pietei. Nu e o avertizare si nu e un lacat --
   e locul unde se explica de ce doua cifre masurate arata diferit. Tonul e al
   marcii, nu al erorii: informatia dinauntru e utila, nu ingrijoratoare. */
.wrap > .note{
  background:var(--brand-wash);border:1px solid var(--brand-line);
  border-radius:var(--radius-md);padding:22px 24px;
  display:flex;flex-direction:column;gap:12px;max-width:78ch;
}
.wrap > .note p{color:var(--ink-2);font-size:var(--fs-md);line-height:1.6;margin:0}
.wrap > .note strong{color:var(--ink)}

/* ------------------------------------------- harta productiei pe judet */

/* Scara e in familia SOLARULUI, nu turcoazul coropletei de cerere: aceeasi
   culoare cu alt inteles, la doua pagini distanta, e felul in care o legenda
   inceteaza sa mai fie de incredere. Cinci trepte, de la albastru palid la
   albastru adanc, monoton crescatoare in saturatie SI descrescatoare in
   luminozitate -- deci se citesc si alb-negru, si de un daltonist. */
:root{
  --y1:#1b2a3d; --y2:#24486e; --y3:#2f6aa6; --y4:#3f8fd6; --y5:#6fb6f5;
}
.yieldmap{margin-top:10px}
.yieldmap svg{width:100%;height:auto;display:block}
.yc{stroke:var(--paper);stroke-width:.8;transition:opacity var(--dur-fast) var(--ease-out)}
.yc:hover{opacity:.75}
/* `fill` pentru judetele din SVG, `background` pentru pastilele legendei,
   care sunt HTML. Scrise doar cu `fill`, pastilele ies invizibile -- si o
   legenda fara culori e mai rea decat lipsa ei. */
path.y0{fill:var(--paper-3)}
path.y1{fill:var(--y1)} path.y2{fill:var(--y2)} path.y3{fill:var(--y3)}
path.y4{fill:var(--y4)} path.y5{fill:var(--y5)}
.ykey .y1{background:var(--y1)} .ykey .y2{background:var(--y2)}
.ykey .y3{background:var(--y3)} .ykey .y4{background:var(--y4)}
.ykey .y5{background:var(--y5)}
.ykey{
  display:flex;align-items:center;gap:8px;margin-top:14px;
  font-family:var(--mono);font-size:var(--fs-2xs);color:var(--ink-3);
}
.ykey i{width:38px;height:10px;border-radius:var(--radius-pill);display:inline-block}

/* ------------------------------------- fisa judetului si tabele stranse */

/* Harta si fisa, una langa alta. `.mapduo` exista deja pentru perechea
   harta-clasament de pe prima pagina; aici face aceeasi treaba. */
.jpanou{position:relative;min-height:340px}
/* `scroll-margin-top` tine fisa sub capsula barii cand se ajunge la ea
   dintr-un clic pe harta: fara el, ancora o duce exact sub bara si
   primul rand ramane acoperit. */
.jfisa{
  display:none;scroll-margin-top:110px;
  background:var(--glass);border:1px solid var(--glass-line);
  border-radius:var(--radius-md);padding:26px 24px;
  box-shadow:var(--lift), inset 0 1px 1px rgba(255,255,255,.08);
}
/* Fisa ceruta din harta se arata; cea implicita dispare in clipa in care
   exista o tinta. `:has()` e singurul fel de a spune „ascunde-ma daca fratele
   meu e tinta" fara JavaScript, si e sustinut de toate browserele curente. */
.jfisa:target{display:block}
.jfisa.is-default{display:block}
.jpanou:has(.jfisa:target) .jfisa.is-default{display:none}

.jf-rank{
  font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 8px;
}
.jfisa h3{font-size:var(--fs-h3);font-weight:600;letter-spacing:-.02em;margin:0}
.jf-val{
  font-family:var(--display);font-size:clamp(2.4rem,4vw,3.2rem);font-weight:700;
  letter-spacing:-.035em;color:var(--ink);line-height:1;margin:18px 0 0;
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
}
.jf-val small{
  font-family:var(--sans);font-size:var(--fs-sm);font-weight:400;
  letter-spacing:0;color:var(--ink-3);
}
.jf-meta{display:grid;gap:14px;margin:22px 0 0;grid-template-columns:1fr 1fr}
.jf-meta dt{
  font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:5px;
}
.jf-meta dd{margin:0;color:var(--ink);font-size:var(--fs-md)}
.jfisa > .btn{margin-top:24px}

/* Tabelele lungi stau stranse: graficul de deasupra spune povestea, tabelul e
   referinta. Pagina scade de la sase ecrane de cifre la unul. */
.tabledrop{margin-top:22px;border-top:1px solid var(--line);padding-top:16px}
.tabledrop > summary{
  cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:10px;
  font-size:var(--fs-md);font-weight:600;color:var(--ink-2);
  transition:color var(--dur-fast) var(--ease-out);
}
.tabledrop > summary::-webkit-details-marker{display:none}
.tabledrop > summary::after{
  content:"";width:6px;height:6px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);
  transition:transform var(--dur-fast) var(--ease-out);
}
.tabledrop[open] > summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.tabledrop > summary:hover{color:var(--brand)}
.tabledrop > .scroll{margin-top:16px}

@media (max-width:1000px){
  .jpanou{min-height:0}
  .jf-meta{grid-template-columns:1fr 1fr}
}

/* ================================================ tinte de atingere, 44px

   Masurat pe 20 august, la 500px latime: burgerul avea 32, butoanele din
   carcasa aplicatiei 34, cipurile de filtru 39, iar butoanele din bara 43.
   Tot site-ul statea cu 1-12 pixeli sub prag -- inclusiv butonul care
   deschide meniul, cel mai important de pe telefon si cel mai mic de pe site.

   Pragul de 44 nu e o preferinta: e distanta sub care degetul incepe sa
   rateze, si e scris in NOTES de la sesiunea cu harta. Fusese aplicat doar
   acolo.

   Se pune `min-height`, nu `height`: un buton cu text pe doua randuri trebuie
   sa poata creste. Iar `display:inline-flex` cu centrare verticala e necesar
   pentru ancore, care altfel isi tin textul lipit de marginea de sus. */
@media (max-width:900px){
  .btn,
  .fchip,
  .period-btn,
  .fdrop > summary,
  .tabledrop > summary,
  .fsearch button,
  .fsearch input,
  .tab{
    min-height:44px;
    display:inline-flex;align-items:center;
  }
  /* Cele care isi centreaza si textul pe orizontala. */
  .btn,.period-btn,.fsearch button{justify-content:center}

  /* Burgerul: 44x44 curate, cu liniile centrate inauntru. */
  .burger{
    min-width:44px;min-height:44px;
    align-items:center;justify-content:center;padding:0;
  }

  /* Randurile de deschidere a tabelelor sunt text, nu butoane, dar se apasa
     la fel de des -- deci acelasi prag. */
  .faq summary{min-height:44px;display:flex;align-items:center}
}

/* ==================================================================
   TEMA DESCHISA
   ==================================================================
   24 august 2026. Pana pe 19 august site-ul ERA deschis, iar paleta de
   atunci fusese masurata pe contrast si verificata all-pairs pentru
   daltonism. Deci nu se inventeaza a doua oara: valorile de mai jos sunt
   cele care au fost live, recuperate din commitul 7025415, plus cele
   cateva roluri aparute intre timp (statiile, `--on-accent`, sticla).

   Ce NU e o simpla inversare de neutre:

   - **Rampele ordinale se intorc la loc.** Pe fond inchis, „mai mult" se
     codifica prin „mai deschis", fiindca acolo deschis inseamna mai
     vizibil. Pe hartie e fix pe dos. Coropleta (`--wash-*`), tensiunea
     (`--kv*`) si productia (`--y*`) isi inverseaza deci ordinea, altfel
     legenda ar spune un lucru si desenul altul.
   - **Sticla se intoarce.** `--glass` era alb translucid peste negru; peste
     hartie, alb peste alb nu e o suprafata. Devine alb opac cu bordura
     inchisa.
   - **Banda inchisa ramane inchisa.** `--slab` si eroul sunt o componenta
     intunecata prin proiectare, nu o consecinta a temei -- pe hartie ele
     erau tot inchise. Deci nu se ating.

   Implicit ramane tema inchisa: se trece pe deschis doar la cerere, iar
   alegerea se tine in `localStorage`. Vezi `THEME_JS` din `app/views.py`. */

:root[data-theme="light"]{
  color-scheme:light;

  --paper:#fcfcfb;
  --paper-2:#f5f4f1;
  --paper-3:#eceae4;

  --ink:#1b1b19;
  --ink-2:#56554f;
  --ink-3:#6e6d66;
  /* Textul-fantoma: sub `--ink-3`, dar peste linie. Pe tema inchisa rolul
     era jucat de vechiul gri stins; aici e treapta echivalenta in sus. */
  /* Treapta „aici nu scrie inca nimic" -- textul-fantoma din campuri, „—"
     din matricea de preturi, campurile inchise.

     Pe tema inchisa poate sta mult sub `--ink-3`, fiindca sub ea mai e mult
     drum pana la negru. Pe hartie nu mai e: masurat pe cardul de plan, orice
     sub #6a6962 cade sub AA, si „—" nu e decor -- inseamna „planul asta n-are
     functia", adica informatie. Deci in tema deschisa treapta fantoma vine
     lipita de `--ink-3`, si asta nu e o scapare, e cat loc exista. */
  --ink-faint:#6a6962;

  --line:#e4e3de;
  --line-strong:#c8c7c0;

  /* Verdele de padure, nu smaraldul. `#10b981` e ales sa traiasca pe negru;
     pe hartie cade la 2,4:1 si un buton principal nu poate sta acolo.
     `#0d6e66` e cel care a fost live pe tema deschisa si trece AA cu alb. */
  --accent:#0d6e66;
  --accent-ink:#0a544e;
  --accent-wash:#e7f2f0;
  --accent-light:#5ec4b8;
  --on-accent:#ffffff;
  --brand:#0d6e66;
  --brand-ink:#0a544e;
  --brand-wash:#e7f2f0;
  --brand-line:#b9dcd7;
  --brand-light:#5ec4b8;

  --surface-alt:#f6f2ea;
  --head:#e9f2f0;
  --head-2:#e0ebe9;
  --head-3:#d2e2df;

  /* Banda inchisa e o componenta, nu o consecinta a temei: ramane inchisa
     si pe hartie, exact ca inainte de 19 august. */
  --slab:#0f1f1d;
  --slab-ink:#d6dedc;
  --slab-label:#8fa09d;
  --slab-line:#263835;
  --hero-ink:#e8eeec;

  /* Coropleta: „mai mult" redevine „mai inchis". */
  --wash-1:#e4faf6; --wash-2:#a3f2e8; --wash-3:#4fe2d2;
  --wash-4:#17b3a6; --wash-5:#0c7a71;
  --wash:#0c7a71;
  --land:#eefaf8;

  /* Tensiunea: 400 kV redevine treapta cea mai inchisa. */
  --kv400:#2b2b2e; --kv220:#57575c; --kv110:#8b8b90;
  /* Statiile isi pastreaza familia (crimson -> roz) si raman monotone pe
     luminozitate: mai mare = mai inchis, deci se citesc fara legenda. */
  --st400:#b81243; --st220:#e0557f; --st110:#f2a3c0;

  --good:#01d758;
  --good-wash:#e3f2f0;
  --good-line:#a9d8d3;
  --warn:#cd853f;
  --warn-wash:#fdeae1;
  --bad:#a12a1e;
  --unknown:#a3b0bc;

  --solar:#2a78d6; --stocare:#eb6834; --eolian:#1baf7a;
  --hidro:#9a4dbf; --altele:#5f6462;
  --context:#4c3bd6;

  /* Productia pe judet: aceeasi intoarcere ca la coropleta. */
  --y1:#e3eefa; --y2:#b9d5f0; --y3:#7fb0e0; --y4:#3f81c4; --y5:#1c5090;

  /* Umbre verzi-negre, nu gri: o umbra neutra peste hartia calda se vede
     murdara. Aceeasi regula ca in runda a treia de audit. */
  --shadow-rest:0 1px 2px rgba(36,27,35,.20);
  --shadow-lift:0 10px 28px -16px rgba(36,27,35,.40);
  --shadow-pop:0 16px 40px -18px rgba(36,27,35,.50);
  --shadow-card:0 1px 2px rgba(36,27,35,.10), 0 8px 24px -12px rgba(36,27,35,.18);

  /* Bara laterala a aplicatiei. Se intoarce, spre deosebire de banda de
     subsol: e un sfert de ecran, nu o fasie. Ramane totusi o treapta sub
     continut (`--paper-3` fata de `--paper-2`), ca sa se citeasca in
     continuare ca alt plan, nu ca aceeasi coala. */
  /* Hartie curata, nu treapta de sub ea. Pe `--paper-3` (#eceae4),
     `--ink-3` cadea la 4,3:1 si turcoazul de activ la 1,7:1 -- adica bara
     ar fi fost singurul loc din site sub prag. Pe hartie curata trec
     amandoua, iar bara se desparte de continut prin MUCHIE, nu prin ton:
     continutul e `--paper-2`, deci tot se vad ca doua plane. */
  --rail:var(--paper);
  --rail-card:var(--paper-2);
  --rail-strong:var(--ink);
  --rail-ink:var(--ink-2);
  --rail-ink-2:var(--ink-2);
  --rail-ink-3:var(--ink-3);
  --rail-hover:rgba(27,27,25,.055);
  --rail-hover-2:rgba(27,27,25,.035);
  --rail-on:rgba(13,110,102,.12);
  --rail-line:var(--line);
  /* Al doilea cuvant din sigla. `--brand-light` e turcoazul pentru fundal
     inchis; pe bara deschisa se spala. */
  --rail-brand:var(--brand);
  --rail-accent:var(--accent);
  --rail-edge:var(--line);

  /* Titlul: aceeasi trecere, in cealalta directie. Capatul „aprins" e cel
     mai INCHIS aici, fiindca pe hartie ce se vede mai tare e ce e mai
     inchis. Varianta `-slab` nu se redefineste: titlurile de pe banda
     inchisa raman luminoase in amandoua temele. */
  --h1-grad:linear-gradient(to right,#111110 0%,#35342f 38%,#6e6d66 100%);
  --h1-grad-v:linear-gradient(to bottom,#111110 0%,#35342f 62%,#6e6d66 100%);

  /* Butoanele din cardul barei erau croite pentru un card inchis: fantoma pe
     alb translucid, cel plin pe turcoazul deschis. Pe hartie, amandoua se
     intorc la butoanele obisnuite ale site-ului. */
  --sidecta-ghost-ink:var(--ink);
  --sidecta-ghost-bg:var(--paper);
  --sidecta-ghost-line:var(--line-strong);
  --sidecta-solid-bg:var(--accent);
  --sidecta-solid-ink:var(--on-accent);

  /* Sticla, intoarsa: alb opac peste hartie, cu bordura inchisa. Alb
     translucid peste alb n-ar fi o suprafata, ar fi nimic. */
  /* Alb translucid peste hartie alba nu e o suprafata, e nimic -- si peste
     banda inchisa ar fi fost o pastila alba aproape plina, adica alt obiect
     decat cel din tema inchisa. Pe hartie, „sticla" e o urma INCHISA. */
  --glass:rgba(27,27,25,.035);
  --glass-line:rgba(27,27,25,.10);
  --glass-line-hi:rgba(27,27,25,.18);
  --lift:0 22px 50px -28px rgba(36,27,35,.28), 0 2px 8px -4px rgba(36,27,35,.16);
  --lift-hi:0 34px 70px -30px rgba(36,27,35,.34), 0 0 0 1px var(--glass-line-hi);
  --glow:0 0 0 1px rgba(13,110,102,.28), 0 12px 40px -14px rgba(13,110,102,.30);
}

/* Comutatorul din bara.

   Poarta si clasa `.iconbtn`, deci imprumuta intreg butonul rotund de langa
   el -- marime, bordura de sticla, hover, tinta de atingere. Un al doilea
   stil de buton rotund, scris de mana la 36px in loc de 38, ar fi fost exact
   greseala pe care NOTES.md o numeste „acelasi rol arata altfel": doua
   butoane vecine, aproape la fel, si diferenta se citeste ca o scapare.

   Ce ramane aici e strict ce nu poate imprumuta: e un `<button>`, nu un
   `<a>`, si are doua pictograme din care se vede una. */
.themetoggle{cursor:pointer;padding:0;font:inherit}
/* Randul din panoul de telefon. Se scrie `.menu-mobile > .wrap > .menu-theme`
   -- copil direct -- fiindca `.wrap` din panou imbraca si legaturile, si
   butoanele de cont: exact containerul care a produs de sase ori aceeasi
   greseala in NOTES.md. */
.menu-mobile > .wrap > .menu-theme{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-item);padding:var(--sp-item) 0 var(--sp-tight);
  margin-top:var(--sp-tight);border-top:1px solid var(--line);
}
.menu-mobile > .wrap > .menu-theme > span{
  color:var(--ink-2);font-size:var(--fs-sm);
}
/* Nu trebuie nicio regula care sa-l re-arate: cea care ascunde butoanele sub
   prag e `nav.top > .wrap > .navactions > .iconbtn`, deci e legata de bara,
   nu de clasa. Cel din panou n-a fost niciodata atins. Scris aici fiindca
   prima varianta chiar avea regula, si o regula care nu face nimic e exact
   restul despre care NOTES.md spune ca nu e inofensiv. */
/* Se vede pictograma temei in care AJUNGI daca apesi, nu a celei in care
   esti: un buton spune ce face, nu unde te afli. Deci soare pe tema inchisa,
   luna pe cea deschisa.

   Schimbarea se face din CSS, nu din JS. Asa marcajul trimis e acelasi in
   amandoua temele -- si, mai important, nu exista clipa dintre pictarea
   paginii si rularea scriptului in care butonul arata gresit. */
.themetoggle > .t-moon{display:none}
:root[data-theme="light"] .themetoggle > .t-moon{display:block}
:root[data-theme="light"] .themetoggle > .t-sun{display:none}

/* ------------------------------------------------------ randuri de cont */

/* Perechi eticheta-valoare, pentru datele care se citesc si nu se editeaza.
   Nu `dl.spec` (fisa de proiect): acolo valorile sunt scurte si multe, aici
   una singura poate fi o propozitie intreaga -- „in curs de verificare, de
   obicei o zi lucratoare" -- deci randul trebuie sa respire.

   Eticheta are latime fixa ca sa se alinieze pe verticala intre randuri; sub
   prag trec una sub alta, fiindca la 400px o coloana de 150px lasa valorii
   douazeci de caractere pe rand. */
.prows{margin:0;display:grid;gap:2px}
.prow{
  display:grid;grid-template-columns:170px minmax(0,1fr);
  gap:var(--sp-gap);align-items:start;
  padding:var(--sp-item) 0;border-top:1px solid var(--line);
}
.prow:first-child{border-top:none;padding-top:0}
.prow > dt{
  margin:0;color:var(--ink-3);font-size:var(--fs-sm);line-height:1.5;
}
.prow > dd{margin:0;color:var(--ink-2);font-size:var(--fs-md);line-height:1.55}
.prow > dd strong{color:var(--ink);font-weight:640}
.prow > dd .sub{font-size:var(--fs-sm)}
/* Butonul dintr-un rand (retrimite linkul) nu trebuie sa se lipeasca de
   textul de deasupra lui. */
.prow > dd form{margin-top:10px}
@media (max-width:620px){
  .prow{grid-template-columns:minmax(0,1fr);gap:4px}
}

/* Data datelor, in coltul eroului. A fost o pastila verde cu „PIPELINE DE
   RACORDARE · ROMÂNIA" langa ea; pastila a plecat, data a ramas -- pe un
   produs de date, cat de proaspete sunt e informatie, nu decor. */
.hero-when{
  margin:0 0 var(--sp-gap);font-family:var(--mono);
  font-size:var(--fs-2xs);letter-spacing:.1em;
  color:var(--hero-label);
}