/* ============================================================================
   Stilul uneltelor de la /unelte/. Un singur fisier pentru toate patru paginile,
   in loc de patru blocuri <style> care ar diverge — aceeasi regula ca la nucleu.js
   pentru cod. Tokenurile (--bg, --accent, spatierile) NU se redeclara aici: vin din
   baza.css. Daca adaugi o culoare, adaug-o acolo, nu aici.
   ========================================================================= */

body{margin:0;background:var(--bg);color:var(--text);font-size:17px;line-height:1.65;
  font-family:Poppins,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  -webkit-font-smoothing:antialiased}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
h1{font-size:clamp(30px,5.2vw,52px);line-height:1.04;letter-spacing:-.035em;margin:0 0 18px}
h1 em{font-style:normal;color:var(--accent2)}
h2{font-size:clamp(19px,2.4vw,24px);letter-spacing:-.02em;margin:0 0 4px}
p{margin:0 0 14px}
.plumb{color:var(--muted);max-width:60ch}


section{padding:44px 0}
.dovezi{display:flex;flex-wrap:wrap;gap:9px;margin:22px 0 0;padding:0;list-style:none}
.dovezi li{font-size:13.5px;font-weight:600;border:1px solid var(--line2);border-radius:99px;
  padding:7px 14px;color:var(--muted)}

.cutie{background:linear-gradient(165deg,var(--s2c),var(--s1c));border:1px solid var(--line);
  border-radius:12px;padding:clamp(18px,3vw,30px)}
.acte{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.buton{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:5px;
  font-weight:600;font-size:15px;font-family:inherit;border:1px solid transparent;cursor:pointer}
.plin{background:var(--accent);color:#02120c}
.plin:hover{background:#14cf90}
.gol2{background:transparent;color:var(--text);border-color:var(--line2)}
.gol2:hover{border-color:var(--accent)}

.zona{margin-top:20px;border:1.5px dashed var(--line2);border-radius:10px;padding:26px 18px;
  text-align:center;cursor:pointer;color:var(--muted);font-size:15px}
.zona:hover,.zona.peste{border-color:var(--accent);color:var(--text)}
.zona b{color:var(--text);display:block;font-size:16.5px;margin-bottom:4px}
#fisier{display:none}
#mesaj{margin-top:16px;border-left:2px solid var(--accent);padding:9px 14px;
  background:rgba(16,185,129,.07);font-size:15px;border-radius:0 5px 5px 0}

/* auto-fit + minmax, deci pe telefon cad singure pe o coloana, fara media query. */
.indicatori{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin:0 0 30px}
.fisa{background:var(--s2c);border:1px solid var(--line);border-radius:10px;padding:18px}
.fisa .et{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);margin:0 0 6px}
.fisa .mare{font-size:clamp(27px,3.6vw,36px);font-weight:700;letter-spacing:-.03em;line-height:1;margin:0}
.fisa .sub{font-size:13.5px;color:var(--muted);margin:7px 0 0}

.panou{background:var(--s1c);border:1px solid var(--line);border-radius:10px;
  padding:20px;margin-bottom:16px}
.panou .cap{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);margin:0 0 14px}
.doua{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.grafic{width:100%;height:auto;display:block;overflow:visible}
.grafic .v{font-size:12px;font-weight:600;fill:var(--text);text-anchor:middle}
.grafic .e{font-size:12px;fill:var(--dim);text-anchor:middle}
.grafic .e2{font-size:13px;fill:var(--muted)}
.grafic .v2{font-size:13px;font-weight:600;fill:var(--text)}
.gol{color:var(--dim);font-size:14px;margin:0}

.obs{background:rgba(16,185,129,.06);border:1px solid rgba(110,231,183,.22);
  border-radius:10px;padding:20px 20px 20px 38px;margin:0 0 16px}
.obs li{margin-bottom:9px;color:#cdd9d2}
.obs li:last-child{margin-bottom:0}
.obs b{color:var(--accent2)}

.nota{border-top:1px solid var(--line);margin-top:34px;padding-top:22px;color:var(--muted);font-size:15px}
.nota h2{color:var(--text)}
@media(max-width:560px){ .container{padding:0 16px} section{padding:32px 0} }

/* ---- antetul si subsolul site-ului. Marcajul e identic cu cel de la /automatizari/,
        ca uneltele sa nu para un site strain lipit langa. ---- */
header{position:sticky;top:0;z-index:50;background:rgba(7,11,9,.88);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0}
.logo{font-size:20px;font-weight:800;letter-spacing:2px;color:#fff;text-decoration:none}
.logo span{color:var(--accent)}
.nav .legaturi{display:flex;gap:18px;font-size:14.5px;color:var(--muted);margin-left:auto;
  margin-right:6px;flex-wrap:wrap}
.nav .legaturi a:hover{color:var(--text)}
footer{border-top:1px solid var(--line);padding:26px 0;color:var(--muted);
  font-size:13px;text-align:center}
footer a{color:var(--muted);text-decoration:underline}
a{color:inherit;text-decoration:none}

/* ---- pagina-cuprins a uneltelor ---- */
/* 230px, nu 280: la 280 cele patru carduri ies 3+1 pe un ecran de 1366 si al patrulea
   ramane singur pe un rand. La 230 incap toate patru pe un rand, si tot cad frumos la
   doua si la una pe ecrane mai mici. */
.unelte{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin:0}
.unealta{display:block;background:linear-gradient(165deg,var(--s2c),var(--s1c));
  border:1px solid var(--line);border-radius:12px;padding:24px;
  transition:border-color .18s,translate .25s}
.unealta:hover{border-color:rgba(16,185,129,.45);translate:0 -3px}
.unealta .et{font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--accent2);margin:0 0 10px}
.unealta h3{font-size:20px;margin:0 0 8px;letter-spacing:-.02em}
.unealta p{color:var(--muted);font-size:14.5px;margin:0}
.unealta .du{display:inline-block;margin-top:14px;font-size:14px;color:var(--accent2);
  white-space:nowrap}   /* altfel sageata SVG cade singura pe randul urmator */

/* ---- blocul de „ce urmeaza dupa unealta": Power Platform, ca poveste ---- */
.platforma{background:linear-gradient(165deg,rgba(16,185,129,.07),transparent);
  border:1px solid rgba(110,231,183,.2);border-radius:14px;padding:clamp(20px,3vw,34px);
  margin-top:20px}
.platforma ul{margin:18px 0 0;padding-left:20px;color:var(--muted)}
.platforma li{margin-bottom:10px}
.platforma b{color:var(--text)}
.cta{background:var(--accent);color:#03140d;padding:8px 16px;border-radius:999px;
  font-weight:650;font-size:14px;white-space:nowrap}
.cta:hover{background:#14cf90}

/* ---- schita de tablou de bord din pagina-cuprins ----
   SVG desenat de mana, animat din CSS. Nicio librarie de grafice si nicio imagine: pe o
   pagina care vinde viteza, 300 KB de bibliotecă pentru patru forme ar fi exact greseala
   scoasa din hero cand a iesit three.js.
   Animatia e OPT-IN pe prefers-reduced-motion: no-preference, ca in baza.css — nu se
   anuleaza cu duration:0, se declara doar unde e ceruta. */
.viz{width:100%;height:auto;display:block;margin:22px 0 4px;overflow:visible}

@media (prefers-reduced-motion: no-preference){
  @keyframes vz-creste{from{transform:scaleY(0)}to{transform:scaleY(1)}}
  @keyframes vz-traseu{from{stroke-dashoffset:420}to{stroke-dashoffset:0}}
  @keyframes vz-umple{from{stroke-dashoffset:214}to{stroke-dashoffset:64}}

  /* transform-origin pe baza barei, altfel creste din mijloc in ambele sensuri.
     transform-box:fill-box e obligatoriu in SVG: fara el, originea se ia fata de
     sistemul de coordonate al intregului SVG, nu al formei. */
  .vz-bare rect{transform-box:fill-box;transform-origin:50% 100%;
    animation:vz-creste .9s cubic-bezier(.22,.85,.26,1) both;
    animation-delay:calc(var(--i) * .09s)}
  .vz-linie{stroke-dasharray:420;animation:vz-traseu 1.6s ease-out .5s both}
  .vz-inel{stroke-dasharray:214;animation:vz-umple 1.4s cubic-bezier(.22,.85,.26,1) .7s both}
}

/* Fara animatie, inelul trebuie sa arate totusi umplut partial — altfel e un cerc gol. */
@media (prefers-reduced-motion: reduce){
  .vz-inel{stroke-dasharray:214;stroke-dashoffset:64}
}

/* La 320px (telefoanele mici si ferestrele inguste) bara nu incape: logo + trei linkuri
   + butonul depaseau ecranul si toata pagina capata scroll lateral — exact defectul
   reparat pe pagina de start pe 11 sept 2026. Aici linkurile trec pe randul lor, nu se
   ascund: lectia de atunci a fost ca un meniu ascuns fara inlocuitor lasa omul fara
   navigatie. Garda: node tools/verifica-latime.js */
.nav{flex-wrap:wrap}
.logo{min-width:0}
@media (max-width:560px){
  .nav{padding:10px 0;row-gap:8px}
  .nav .legaturi{order:3;flex-basis:100%;margin:0;gap:14px;font-size:13.5px}
  .cta{padding:7px 13px;font-size:13.5px}
  .container{padding:0 14px}
}