/* ==========================================================================
   Sistemul de baza al site-ului de organizatie.
   Monocrom: alb, negru, o singura pata de culoare (punctul de brand).
   Doua teme: luminoasa (implicita) si intunecata, comutate din antet.
   Paginile de produs isi pun peste asta propria paleta (assets/produse.css).
   ========================================================================== */

/* ---------- 1. Simboluri de culoare ---------- */
:root{
  /* Tema luminoasa nu e alb pur, ci crem cald - tonul de hartie de la Ripple.
     Cerneala si liniile sunt si ele calde, altfel cremul pare murdar sub un
     gri rece. Auriul ramane doar la Ripple, aici nu intra nicio culoare. */
  color-scheme:light;
  --ink:#0d1526;          /* bleumarin foarte inchis, ca la Ripple */
  --ink-2:#39435a;        /* text secundar */
  --ink-3:#6d7690;        /* text de sprijin, etichete */
  --bg:#fbf9f5;           /* cremul */
  --bg-2:#f2eee5;         /* panouri, sectiuni alternante */
  --bg-3:#e8e2d5;
  --line:rgba(13,21,38,.16); /* linii de un fir */
  --line-2:rgba(13,21,38,.09);
  --dot:#0d1526;          /* accentul: aceeasi cerneala, fara culoare */
  --inv-ink:#fbf9f5;      /* text pe fundal inversat (butonul plin) */
  --inv-bg:#0d1526;
  --shadow:0 1px 2px rgba(0,0,0,.05),0 12px 34px -18px rgba(0,0,0,.28);
  --r:14px;               /* raza obisnuita */
  --r-lg:22px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --nav-h:60px;
}
[data-theme="dark"]{
  color-scheme:dark;
  --ink:#f6f6f7; --ink-2:#b4b4ba; --ink-3:#85858d;
  --bg:#0a0a0b; --bg-2:#121214; --bg-3:#1b1b1e;
  --line:rgba(255,255,255,.16); --line-2:rgba(255,255,255,.08);
  --inv-ink:#0a0a0b; --inv-bg:#f6f6f7;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 18px 44px -20px rgba(0,0,0,.9);
}

/* ---------- 2. Baza ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.55;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-synthesis-weight:none;
  transition:background .35s var(--ease),color .35s var(--ease);
}
html{overflow-x:hidden;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 24px)}
@supports (overflow-x:clip){html{overflow-x:clip}}
a{color:inherit;text-decoration:none}
img,video,svg{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--ink);color:var(--bg)}
:focus-visible{outline:2px solid var(--dot);outline-offset:3px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- 3. Tipografie ----------
   Titluri linistite: marime moderata, litere aproape la distanta normala si
   rand aerisit. Varianta veche (84px, litere foarte stranse) parea un afis,
   iar textele pareau fortate. Fara umbre, fara gradiente pe litere. */
.h1{font-size:clamp(32px,4.6vw,60px);line-height:1.1;letter-spacing:-.02em;font-weight:630}
.h2{font-size:clamp(26px,2.9vw,40px);line-height:1.16;letter-spacing:-.015em;font-weight:620}
.h3{font-size:clamp(20px,1.8vw,26px);line-height:1.25;letter-spacing:-.01em;font-weight:620}
/* Randurile titlurilor se impart egal, fara un cuvant ramas singur jos. */
.h1,.h2,.h3,.card-titlu{text-wrap:balance}
.h4{font-size:17px;line-height:1.35;letter-spacing:-.012em;font-weight:640}
.lead{font-size:clamp(17px,1.5vw,21px);line-height:1.55;color:var(--ink-2);font-weight:380}
.body{font-size:16px;line-height:1.65;color:var(--ink-2)}
.small{font-size:14px;line-height:1.6;color:var(--ink-3)}
.label{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.num{font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.dot{display:inline-block;width:.34em;height:.34em;border-radius:50%;background:var(--dot);
  vertical-align:.12em;margin-left:.12em}

/* ---------- 4. Grila ---------- */
.wrap{width:100%;max-width:1220px;margin:0 auto;padding:0 clamp(18px,4vw,40px)}
.wrap.narrow{max-width:760px}
section{padding:clamp(64px,8vw,120px) 0}
section.tight{padding:clamp(44px,5vw,72px) 0}
.rule{height:1px;background:var(--line-2);border:0}
.cols{display:grid;gap:clamp(26px,3vw,48px)}
.c2{grid-template-columns:repeat(2,1fr)}
.c3{grid-template-columns:repeat(3,1fr)}
.c4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(30px,5vw,80px);align-items:start}
.stack>*+*{margin-top:18px}
.center{text-align:center}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin-bottom:clamp(32px,4vw,56px)}
.sec-head .lead{max-width:60ch}
/* Un titlu singur in coloana lui nu mai adauga spatiu dedesubt: distanta pana
   la coloana vecina o da deja grila, altfel golul iese dublu pe telefon. */
.split>div>.sec-head:only-child{margin-bottom:0}

/* Listele cu bife (pagina de servicii): bifa sta pe acelasi rand cu textul. */
.bife{gap:12px 24px;font-size:15px;line-height:1.5;color:var(--ink-2)}
.bife>div{display:flex;align-items:flex-start;gap:10px}
.bife span{flex:none;color:var(--dot);margin-top:3px}

/* ---------- 5. Antetul ----------
   Ramane lipit sus, cu o singura linie de un fir sub el. Fara umbre.
   Fundalul devine translucid doar dupa ce pagina e derulata. */
.nav{position:fixed;top:0;left:0;right:0;z-index:80;height:var(--nav-h);
  border-bottom:1px solid transparent;transition:border-color .3s var(--ease),background .3s var(--ease)}
.nav.stuck{background:color-mix(in srgb,var(--bg) 82%,transparent);border-bottom-color:var(--line-2);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px)}
.nav-in{height:100%;max-width:1220px;margin:0 auto;padding:0 clamp(18px,4vw,40px);
  display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:9px;font-weight:640;letter-spacing:-.02em;font-size:16.5px}
.brand .mark{width:22px;height:22px;flex:none}
.nav-links{display:flex;align-items:center;gap:clamp(14px,2vw,28px);font-size:14px;color:var(--ink-2)}
.nav-links a{position:relative;padding:6px 0;transition:color .2s var(--ease)}
.nav-links a:hover{color:var(--ink)}
.nav-links a.on{color:var(--ink)}
.nav-links a.on::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--ink)}
.nav-side{display:flex;align-items:center;gap:10px}
.icon-btn{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);display:flex;
  align-items:center;justify-content:center;transition:background .2s var(--ease),border-color .2s var(--ease)}
.icon-btn:hover{background:var(--bg-2);border-color:var(--line)}
.icon-btn svg{width:16px;height:16px}
.theme-btn .moon{display:none}
[data-theme="dark"] .theme-btn .sun{display:none}
[data-theme="dark"] .theme-btn .moon{display:block}
.lang{display:flex;gap:2px;border:1px solid var(--line);border-radius:999px;padding:2px;font-size:12px;font-weight:600}
.lang a{padding:4px 9px;border-radius:999px;color:var(--ink-3);transition:color .2s,background .2s}
.lang a.on{background:var(--ink);color:var(--bg)}
.burger{display:none}

/* ---------- 6. Butoane ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:46px;padding:0 22px;
  border-radius:999px;font-size:15px;font-weight:560;letter-spacing:-.01em;border:1px solid transparent;
  transition:background .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease),transform .22s var(--ease)}
.btn:active{transform:scale(.98)}
.btn-fill{background:var(--inv-bg);color:var(--inv-ink)}
.btn-fill:hover{background:var(--ink-2)}
.btn-line{border-color:var(--line);color:var(--ink)}
.btn-line:hover{background:var(--bg-2)}
.btn-sm{height:38px;padding:0 16px;font-size:13.5px}
.btns{display:flex;flex-wrap:wrap;gap:12px}
.arrow{transition:transform .25s var(--ease)}
.btn:hover .arrow,.lnk:hover .arrow{transform:translateX(4px)}
.lnk{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:560;
  border-bottom:1px solid var(--line);padding-bottom:3px;transition:border-color .2s}
.lnk:hover{border-bottom-color:var(--ink)}

/* ---------- 7. Aparitia la derulare ----------
   Deliberat discreta: 8 pixeli si opacitate, fara blur si fara scalare.
   Blur-ul pe text la fiecare cadru costa mult si arata a sablon. */
[data-rv]{opacity:0;transform:translateY(8px);
  transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
[data-rv].in{opacity:1;transform:none}

/* ---------- 8. Antetul paginii ---------- */
/* Titlul incepe aproape imediat sub bara: un gol mare aici parea o pagina
   care nu s-a incarcat inca. */
.hero{padding-top:calc(var(--nav-h) + clamp(24px,2.6vw,40px));padding-bottom:clamp(50px,7vw,96px)}
.hero .h1{max-width:22ch}
.hero .lead{max-width:56ch;margin-top:22px}
.hero .btns{margin-top:32px}

/* ---------- 9. Carduri ---------- */
.card{border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--bg);overflow:hidden;
  transition:border-color .25s var(--ease),transform .35s var(--ease)}
a.card:hover{border-color:var(--line);transform:translateY(-3px)}
.card-pad{padding:clamp(18px,1.8vw,22px)}
.card-media{background:var(--bg-2);border-bottom:1px solid var(--line-2);overflow:hidden;position:relative}
.card-media img{width:100%;transition:transform .6s var(--ease)}
a.card:hover .card-media img{transform:scale(1.02)}
/* Cardul de produs e deliberat mic: o captura, o eticheta, numele si un rand.
   Cine vrea mai mult intra pe pagina produsului. */
.card-titlu{display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:19px;font-weight:640;letter-spacing:-.018em;margin:12px 0 6px}
.card-titlu .arrow{color:var(--ink-3);flex:none}
a.card:hover .card-titlu .arrow{color:var(--ink);transform:translateX(3px)}
.card .body{font-size:14.5px;line-height:1.55}
.card .chip{height:23px;padding:0 9px;font-size:10.5px}
.chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;
  border:1px solid var(--line);font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3)}
.chips{display:flex;flex-wrap:wrap;gap:8px}

/* ---------- 9b. Echipa ----------
   Portrete alb-negru, aceeasi forma pentru toti. Cardul nu are chenar: doar
   poza, numele si functia, ca sa nu concureze cu cardurile de produs. */
/* Cele doua portrete stau mereu unul langa altul, si pe ecran mic: intr-o
   coloana ingusta, "auto-fit" le punea unul sub altul si ieseau uriase. */
.echipa{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,26px);max-width:480px}
.membru img{width:100%;aspect-ratio:5/6;object-fit:cover;object-position:center top;
  border-radius:var(--r);background:var(--bg-2);filter:grayscale(1);transition:filter .4s var(--ease)}
.membru:hover img{filter:grayscale(.15)}
.membru h3{font-size:17px;font-weight:640;letter-spacing:-.015em;margin-top:16px}
.membru p{font-size:14px;color:var(--ink-3);margin-top:3px}

/* ---------- 10. Liste cu numar (procesul) ---------- */
.steps{counter-reset:s;display:grid;gap:0;border-top:1px solid var(--line-2)}
.step{counter-increment:s;display:grid;grid-template-columns:70px minmax(0,1fr) minmax(0,1.3fr);gap:clamp(16px,3vw,40px);
  padding:clamp(22px,2.6vw,34px) 0;border-bottom:1px solid var(--line-2);align-items:baseline}
.step::before{content:counter(s,decimal-leading-zero);font-size:13px;font-weight:600;color:var(--ink-3);
  font-variant-numeric:tabular-nums}
.step .body{margin:0}

/* ---------- 11. Tabel de specificatii ---------- */
.specs{border-top:1px solid var(--line-2)}
.specs div{display:flex;justify-content:space-between;gap:24px;padding:14px 0;border-bottom:1px solid var(--line-2);font-size:15px}
.specs dt{color:var(--ink-3)}
.specs dd{font-weight:560;text-align:right}

/* ---------- 12. Rama de aplicatie in jurul capturilor ---------- */
.shot{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--bg-2);box-shadow:var(--shadow)}
.shot-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;border-bottom:1px solid var(--line-2);
  background:var(--bg-2)}
.shot-bar i{width:9px;height:9px;border-radius:50%;background:var(--line);display:block}
.shot-bar span{margin-left:10px;font-size:11.5px;color:var(--ink-3);font-family:ui-monospace,Menlo,Consolas,monospace}
.shot img{width:100%}
.shot-frames{position:relative}
.shot-frames img{transition:opacity .45s var(--ease)}
.shot-frames img+img{position:absolute;inset:0;height:100%;object-fit:cover;object-position:top}
.shot-frames img:not(.on){opacity:0}
.tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px}
.tabs button{height:34px;padding:0 14px;border-radius:999px;border:1px solid var(--line);font-size:13.5px;
  color:var(--ink-2);transition:background .2s,color .2s,border-color .2s}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-selected="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.shot-cap{margin-top:14px;font-size:14px;color:var(--ink-3);min-height:42px}

/* ---------- 13. Catalogul cu filtre ---------- */
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:16px 0;
  border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);margin-bottom:34px}
.filters .label{margin-right:4px}
.filters button{height:34px;padding:0 14px;border-radius:999px;border:1px solid var(--line);font-size:13.5px;
  color:var(--ink-2);transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.filters button:hover{color:var(--ink);background:var(--bg-2)}
.filters button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
/* Doua coloane, ca pe prima pagina: cu patru produse, trei coloane lasau
   ultimul card singur pe rand. */
.catalog{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2vw,26px)}
.catalog .card{opacity:1;transform:none;transition:opacity .3s var(--ease),transform .3s var(--ease)}
.catalog .card.hide{display:none}
.count{font-size:13.5px;color:var(--ink-3);margin-left:auto;font-variant-numeric:tabular-nums}

/* ---------- 14. Blog ---------- */
.posts{display:grid;gap:0;border-top:1px solid var(--line-2)}
.post{display:grid;grid-template-columns:130px minmax(0,1fr) 30px;gap:clamp(14px,3vw,36px);align-items:baseline;
  padding:clamp(20px,2.4vw,30px) 0;border-bottom:1px solid var(--line-2);transition:padding-left .3s var(--ease)}
.post:hover{padding-left:8px}
.post time{font-size:13px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.post .arrow{color:var(--ink-3);justify-self:end}
.article{max-width:720px;margin:0 auto}
.article h2{font-size:clamp(23px,2.4vw,32px);line-height:1.2;letter-spacing:-.02em;font-weight:650;margin:44px 0 14px}
.article p{font-size:17px;line-height:1.75;color:var(--ink-2);margin-bottom:18px}
.article ul{margin:0 0 18px 20px;color:var(--ink-2);font-size:17px;line-height:1.75}
.article li{margin-bottom:8px}
.article .lead{margin-bottom:26px}

/* ---------- 15. Formularul de contact ---------- */
.form{display:grid;gap:16px}
.field{display:grid;gap:7px}
.field label{font-size:13.5px;color:var(--ink-2)}
.field input,.field textarea,.field select{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--line);
  background:var(--bg);color:var(--ink);font:inherit;font-size:15px;transition:border-color .2s var(--ease)}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--ink)}
.form-note{font-size:13px;color:var(--ink-3)}

/* ---------- 16. Subsolul ---------- */
footer{border-top:1px solid var(--line-2);padding:clamp(44px,5vw,72px) 0 34px;background:var(--bg-2)}
.foot{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:clamp(24px,3vw,44px)}
.foot h4{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px}
.foot ul{list-style:none;display:grid;gap:9px;font-size:14.5px;color:var(--ink-2)}
.foot a:hover{color:var(--ink)}
.foot-note{font-size:14px;color:var(--ink-3);max-width:34ch;margin-top:14px}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:clamp(34px,4vw,56px);
  padding-top:22px;border-top:1px solid var(--line-2);font-size:13px;color:var(--ink-3)}

/* ---------- 17. Ecrane mici ---------- */
@media (max-width:1000px){
  .c3,.c4,.catalog{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr}
  .step{grid-template-columns:44px minmax(0,1fr);row-gap:8px}
  .step .body{grid-column:2}
  .foot{grid-template-columns:1fr 1fr}
  .foot>div:first-child{grid-column:1/-1}
  .nav-links{position:fixed;top:var(--nav-h);left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--bg);border-bottom:1px solid var(--line-2);padding:6px clamp(18px,4vw,40px) 18px;
    transform:translateY(-8px);opacity:0;pointer-events:none;
    transition:opacity .25s var(--ease),transform .25s var(--ease)}
  .nav-links.open{opacity:1;transform:none;pointer-events:auto}
  .nav-links a{padding:14px 0;border-bottom:1px solid var(--line-2);font-size:16px}
  .nav-links a.on::after{display:none}
  .burger{display:flex}
}
@media (max-width:640px){
  /* Pe telefon antetul pastreaza doar sigla, limba, tema si meniul. Cu tot cu
     "Cere o oferta" nu mai incapea: butonul de meniu iesea din ecran. Oferta
     ramane in meniul care se deschide si la finalul fiecarei pagini. */
  .nav-side .btn{display:none}
  .nav-side{gap:8px}
  .wrap,.nav-in{padding:0 22px}
  .nav-links{padding-left:22px;padding-right:22px}
  .h1{font-size:30px;line-height:1.16}
  .h2{font-size:25px;line-height:1.2}
  .lead{font-size:17px;line-height:1.6}
  .sec-head{margin-bottom:30px}
  .split{gap:28px}
  .stack>*+*{margin-top:16px}
  .btn{padding:0 18px}
  .c2,.c3,.c4,.catalog{grid-template-columns:1fr}
  .post{grid-template-columns:1fr 24px}
  .post time{grid-column:1/-1}
  .foot{grid-template-columns:1fr}
}

/* ---------- 17b. Corectii de asezare ----------
   Butonul de oferta exista de doua ori in antet: unul in meniul care se
   deschide pe telefon, altul langa comutatoare pe ecran mare. Se vede doar
   cel potrivit ecranului, niciodata amandoua. */
.nav-links .btn{display:none}
@media (max-width:1000px){
  .nav-links .btn{display:inline-flex}
  .hide-sm{display:none}
}

/* Toate capturile din carduri au aceeasi forma, indiferent daca poza sursa e
   lata (ecran de calculator) sau inalta (telefon): se decupeaza din coltul
   din stanga sus, acolo unde sta partea utila a interfetei. */
.card-media{aspect-ratio:16/10}
.card-media img{width:100%;height:100%;object-fit:cover;object-position:left top}

/* ---------- 18. Miscare redusa ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  [data-rv]{opacity:1!important;transform:none!important}
}