/* ==========================================================================
   KIM 4 Industry — sistemul de pagină web
   Sursa valorilor: CORE/KIM_SISTEM_GRAFIC.md v1.10 §1-§2, §5, §7, §8
   Regulile: CORE/KIM_REGULI_HTML.md v1.0
   Nicio valoare in afara scarii. Colturile sunt drepte peste tot.
   ========================================================================== */

/* --- fonturile brandului, de pe disc ------------------------------------ */
@font-face{font-family:'Space Grotesk';src:url('fonturi/SpaceGroteskMedium.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('fonturi/SpaceGroteskBold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:'Inter';src:url('fonturi/InterRegular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Inter';src:url('fonturi/InterMedium.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:'Inter';src:url('fonturi/InterSemiBold.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('fonturi/IBMPlexMonoRegular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('fonturi/IBMPlexMonoMedium.ttf') format('truetype');font-weight:500;font-display:swap}

/* --- tokenii ------------------------------------------------------------ */
:root{
  --grafit:#171C22; --grafit-inchis:#0F1316; --highvis:#C6F135;
  --otel:#8A949E; --otel-deschis:#C9D0D7; --otel-inchis:#5D666E;
  --linie-dark:#3A424A; --grialb:#F4F5F2; --alb:#FFFFFF; --chihlimbar:#E8A13D;

  --u:8px;
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s6:48px; --s8:64px; --s12:96px;

  --f-titlu:'Space Grotesk',system-ui,sans-serif;
  --f-text:'Inter',system-ui,sans-serif;
  --f-cifre:'IBM Plex Mono',ui-monospace,monospace;

  --t-text:17px; --t-h3:20px; --t-h2:26px; --t-h1:34px;
  --t-cifra:48px; --t-sursa:13px;
  --lh:1.6;
  --lat:1200px;--lat-short:340px;
  --marg:24px;
}
@media (min-width:600px){
  :root{ --t-h3:22px; --t-h2:32px; --t-h1:44px; --t-cifra:56px; }
}
@media (min-width:1024px){
  :root{ --t-text:18px; --t-h3:24px; --t-h2:36px; --t-h1:56px; --t-cifra:80px; --marg:48px; }
}

/* --- baza --------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--grialb); color:var(--grafit);
  font-family:var(--f-text); font-size:var(--t-text); line-height:var(--lh);
  font-weight:400; -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:var(--f-titlu);font-weight:500;line-height:1.15;margin:0 0 var(--s3);letter-spacing:-.01em}
h1{font-size:var(--t-h1);font-weight:700;letter-spacing:-.02em}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3)}
/* Lungimea randului, in SEMNE, nu in `ch`. `1ch` = latimea cifrei zero, iar in
   Inter zero e cu 20% mai lat decat semnul mediu (11,36 fata de 9,46 px la 18 px,
   masurat 20 sept. 2026). Deci `68ch` producea 82 de semne pe rand, peste regula
   din SISTEM_GRAFIC §2, care cere 60-75. Conversia: semne x 0,83 = ch.
   62ch = 75 de semne, marginea de sus a regulii. */
p{margin:0 0 var(--s3);max-width:62ch}
a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1px}
ul{margin:0 0 var(--s3);padding-left:var(--s3)}
li{margin-bottom:var(--s1);max-width:60ch}
strong{font-weight:600}
:focus-visible{outline:3px solid var(--highvis);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.salt{position:absolute;left:-9999px;top:0;background:var(--highvis);color:var(--grafit);padding:var(--s2);z-index:99;font-weight:600}
.salt:focus{left:0}

/* --- containere --------------------------------------------------------- */
.inv{width:100%;max-width:var(--lat);margin:0 auto;padding:0 var(--marg)}
.sectiune{padding:var(--s8) 0}
@media (min-width:1024px){.sectiune{padding:var(--s12) 0}}
.dark{background:var(--grafit);color:var(--alb)}
.dark h1,.dark h2,.dark h3{color:var(--alb)}
.dark .secundar{color:var(--otel-deschis)}
.secundar{color:var(--otel-inchis)}

/* --- eyebrow / banda de categorie (comp.banda-categorie) ---------------- */
.eyebrow{
  font-family:var(--f-cifre);font-size:.75em;font-weight:500;
  text-transform:uppercase;letter-spacing:.12em;
  color:var(--otel-inchis);margin:0 0 var(--s2);display:block;
}
.dark .eyebrow,.hero .eyebrow,.final .eyebrow,.subsol .eyebrow,
.socoteala .eyebrow,.dovada .eyebrow,.sectiune-foto .eyebrow{color:var(--otel-deschis)}

/* --- butonul (comp.buton) ----------------------------------------------- */
.buton{
  display:inline-flex;align-items:center;gap:var(--s1);
  min-height:48px;padding:0 var(--s3);
  background:var(--highvis);color:var(--grafit);
  font-family:var(--f-text);font-weight:600;font-size:var(--t-text);
  text-decoration:none;border:0;border-radius:0;cursor:pointer;
  transition:transform .15s ease,filter .15s ease;
}
.buton:hover{filter:brightness(1.06)}
.buton:active{transform:translateY(1px)}
.buton-contur{
  display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s2);
  background:none;border:1px solid currentColor;color:inherit;
  font-weight:500;text-decoration:none;font-size:calc(var(--t-text) - 2px);
  transition:background .15s ease,color .15s ease;
}
.buton-contur:hover{background:var(--alb);color:var(--grafit)}
.dark .buton-contur:hover{background:var(--alb);color:var(--grafit)}

/* --- antetul ------------------------------------------------------------ */
.antet{background:var(--grafit);color:var(--alb);position:relative;z-index:10}
.antet-rand{display:flex;align-items:center;gap:var(--s3);min-height:72px}
/* logoul canonic (manual 3.5): emblema + descriptorul „4 Industry". Un singur
   fisier SVG, cu amandoua ca contururi — fara text viu si fara imagine
   incorporata, ca sa arate la fel oriunde, inclusiv unde Space Grotesk nu e
   instalat. Bordura emblemei are aceeasi culoare cu textul. */
.logo{display:block}
.antet-logo{display:inline-flex;align-items:center;text-decoration:none;color:var(--alb)}
/* --- meniul: hamburger sub 900 px, fara JavaScript, prin <details> ------
   Pragul e masurat: pe un rand logoul cere 157 px, meniul 351 si comutatorul
   44, adica 552 plus gutiere si marginile paginii, in jur de 700. Se pune la
   900 ca tableta in portret (768) sa intre tot in hamburger: acolo se atinge
   cu degetul, nu se tinteste cu mausul.
   Principiul care guverneaza tot ce urmeaza (Mirela, 20 sept. 2026, sesiunea
   21): UN ECRAN DE TELEFON ARE O SINGURA COLOANA. Nu se pune nimic doua pe
   rand sub 760 px. */
.meniu{margin-left:auto}
.meniu > summary{
  list-style:none;display:inline-flex;align-items:center;gap:10px;
  min-height:48px;padding:0 14px;cursor:pointer;
  font-family:var(--f-titlu);font-weight:500;font-size:calc(var(--t-text) - 2px);
  color:var(--otel-deschis);border:1px solid var(--otel-inchis);
}
.meniu > summary::-webkit-details-marker{display:none}
.meniu > summary::marker{content:""}
.meniu > summary:hover,.meniu[open] > summary{color:var(--alb);border-color:var(--otel)}
.meniu > summary:focus-visible{outline:3px solid var(--highvis);outline-offset:2px}
/* cele trei bare */
.meniu > summary .bare,
.meniu > summary .bare::before,
.meniu > summary .bare::after{
  content:"";display:block;width:20px;height:2px;background:currentColor;
}
.meniu > summary .bare{position:relative}
.meniu > summary .bare::before{position:absolute;top:-6px;left:0}
.meniu > summary .bare::after{position:absolute;top:6px;left:0}
.meniu[open] > summary .bare{background:transparent}
.meniu[open] > summary .bare::before{top:0;transform:rotate(45deg)}
.meniu[open] > summary .bare::after{top:0;transform:rotate(-45deg)}

.antet nav a{
  font-family:var(--f-titlu);
  color:var(--otel-deschis);text-decoration:none;font-size:calc(var(--t-text) - 2px);
  font-weight:500;letter-spacing:0;border-bottom:2px solid transparent;
}
.antet nav a:hover,.antet nav a[aria-current]{color:var(--alb);border-bottom-color:var(--highvis)}
.limba{
  font-family:var(--f-cifre);font-size:var(--t-sursa);letter-spacing:.08em;
  color:var(--otel-deschis);text-decoration:none;border:1px solid var(--otel-inchis);
  padding:0 14px;min-height:48px;display:inline-flex;align-items:center;margin-left:var(--s2);
}
.limba:hover{border-color:var(--otel);color:var(--alb)}

@media (min-width:900px){
  /* pe ecran mare, <details> e doar un container: butonul dispare, lista se
     desfasoara pe orizontala. Cele doua reguli de jos acopera amandoua felurile
     in care motoarele ascund continutul unui <details> inchis. */
  .meniu > summary{display:none}
  .meniu > nav{display:flex!important;align-items:center;gap:var(--s3);flex-wrap:wrap}
  .meniu::details-content{content-visibility:visible;display:contents}
  .antet nav a{padding:var(--s1) 0}
}
@media (max-width:899px){
  /* antetul ramane lipit: pe o pagina de zece ecrane, altfel meniul si
     comutatorul de limba nu mai sunt de gasit decat deruland pana sus. */
  .antet{position:sticky;top:0}
  .antet-rand{min-height:64px}
  .antet-logo{display:inline-flex;align-items:center;min-height:48px}
  /* inchis, lista chiar dispare: `display:flex` de mai jos ar suprascrie
     ascunderea implicita a continutului unui <details> inchis. */
  .meniu:not([open]) > nav{display:none}
  .meniu > nav{
    position:absolute;left:0;right:0;top:100%;
    display:flex;flex-direction:column;
    background:var(--grafit);border-top:1px solid var(--linie-dark);
    box-shadow:0 12px 24px rgba(15,19,22,.45);
    padding:var(--s1) var(--marg) var(--s2);z-index:30;
  }
  .antet nav a{
    min-height:52px;display:flex;align-items:center;
    border-bottom:1px solid var(--linie-dark);border-top:0;
    font-size:var(--t-text);
  }
  .antet nav a:last-child{border-bottom:0}
  .antet nav a[aria-current]{color:var(--alb);border-bottom-color:var(--linie-dark)}
  .antet nav a[aria-current]::before{
    content:"";width:3px;height:22px;background:var(--highvis);margin-right:12px;
  }
}

/* --- heroul --------------------------------------------------------------
   Doua moduri, alese in continut prin "hero_mod":
     .hero-caroiaj  (implicit, cele opt pagini interioare) — text stanga,
                    imagine dreapta, patternul ca rama in L in jurul imaginii,
                    cu un singur reper high-vis pe bratul de sus.
     .hero-foto     (acasa) — imagine pe toata latimea, text peste, caroiaj
                    peste partea voalata; butonul nu e high-vis, fiindca
                    verdele e purtat de vesta din fotografie.
   Pe ecran ingust amandoua se stivuiesc: text, apoi imagine, apoi banda.
   Suprascrieri consemnate fata de SISTEM_GRAFIC (20 sept. 2026, decizie
   Mirela): §7 „duotone full-bleed" nu se aplica la .hero-caroiaj · folosirea
   05 „fara reper high-vis" nu se aplica in heroul de site · §5 comp.buton
   „high-vis plin" nu se aplica in .hero-foto.                              */
.hero{background:var(--grafit);color:var(--alb);padding-top:var(--s6);position:relative}
.hero h1{max-width:18ch}
.hero .intro{font-size:calc(var(--t-text) + 2px);color:var(--otel-deschis);max-width:60ch}
.hero-actiune{margin-top:var(--s4);display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.linie-pozitionare{
  font-family:var(--f-cifre);font-size:var(--t-sursa);letter-spacing:.1em;
  text-transform:uppercase;color:var(--otel);margin:var(--s3) 0 0;
}
.hero-imagine{margin-top:var(--s6);position:relative}
.hero-imagine img{width:100%;aspect-ratio:16/9;object-fit:cover}

/* Pe ecran ingust heroul se stivuieste cu IMAGINEA PRIMA, nu ultima: altfel
   fotografia cade sub linia de pliere si primul ecran e numai text.
   Ordinea: imagine → banda de pattern cu eticheta → text. (Decizie Mirela,
   20 sept. 2026.) */
@media (max-width:1023px){
  .hero{display:flex;flex-direction:column;padding-top:0}
  .hero > .hero-imagine{order:1;margin-top:0}
  .hero > .banda-pattern{order:2}
  .hero > .inv{order:3;padding-top:var(--s6);padding-bottom:var(--s2)}
  .hero > .hero-imagine img{height:34vh;min-height:220px;max-height:340px;aspect-ratio:auto}
}
/* reperul high-vis: un singur plus, pe o intersectie de caroiaj. Ascuns pe
   ecran ingust, unde caroiajul nu mai are suprafata. */
.reper{display:none}
.reper::before,.reper::after{content:"";position:absolute;background:var(--highvis)}
.reper::before{left:8px;top:0;width:1.5px;height:17px}
.reper::after{top:8px;left:0;height:1.5px;width:17px}

@media (min-width:1024px){
  /* --- modul 1: hero cu caroiaj (paginile interioare) ------------------- */
  /* Varianta B, decizie Mirela 21 sept. 2026, sesiunea 22, aleasa pe plansa
     cu trei variante. Constatarea ei: privind strict heroul, gruparea titlu
     + poza parea mutata cu totul spre dreapta, cu prea mult grafit gol in
     stinga. Masurat, asa si era: text 168→699, poza de la 827, adica 128 px
     de gol la mijloc — 64 din marginea dreapta a coloanei de text si 64 din
     rama de pattern —, fata de 168 marginea paginii si 0 la dreapta.
     Marginea de 168 NU se atinge: e aceeasi cu a sectiunilor de dedesubt, si
     alinierea aia e corecta. S-a strins doar golul de la mijloc: coloane
     egale in loc de 1.06/0.94, marginea dreapta a textului 48 in loc de 64,
     rama 40 in loc de 64. Rezultat masurat la 1440: text 168→672, poza de la
     760, gol 88 px, poza 680 px in loc de 613.
     De ce nu si mai strins (varianta C, gol 80, poza 717): coloana de text
     cobora la 475 px, titlul si intro-ul se rupeau cu un rind in plus, iar
     pe o pagina unde primul lucru de citit e titlul, poza incepea sa conduca
     compozitia. */
  .hero-caroiaj{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    align-items:stretch;padding-top:0;
  }
  .hero-caroiaj > .inv{
    grid-column:1;grid-row:1;max-width:none;margin:0;width:100%;
    padding-top:var(--s8);padding-bottom:var(--s8);
    padding-left:max(var(--marg), calc((100vw - var(--lat))/2 + var(--marg)));
    padding-right:var(--s6);
    display:flex;flex-direction:column;justify-content:center;
  }
  .hero-caroiaj h1{max-width:none;font-size:44px;margin-bottom:var(--s3)}
  .hero-caroiaj .intro{max-width:46ch;margin-bottom:var(--s2)}
  .hero-caroiaj .linie-pozitionare{margin-top:var(--s2)}
  .hero-caroiaj .hero-actiune{margin-top:var(--s3)}
  .hero-caroiaj > .hero-imagine{
    grid-column:2;grid-row:1;margin-top:0;position:relative;
    background:var(--grafit) url('pattern/KIM_patternA_dark_celula_512.svg') repeat;
    background-size:128px 128px;
    padding:48px 0 0 40px;display:flex;
  }
  .hero-caroiaj > .hero-imagine img{
    width:100%;height:100%;min-height:560px;
    aspect-ratio:auto;object-fit:cover;object-position:58% 50%;
  }
  .hero-caroiaj .reper{display:block;position:absolute;top:40px;left:160px;width:17px;height:17px;z-index:2}
  .hero-caroiaj > .banda-pattern{grid-column:1 / -1;grid-row:2}

  /* --- modul 2: hero cu fotografie pe toata latimea (acasa) ------------- */
  .hero-foto{padding-top:0;background:var(--grafit)}
  .hero-foto > .hero-imagine{position:absolute;inset:0;margin-top:0;z-index:0;overflow:hidden}
  .hero-foto > .hero-imagine img{
    width:100%;height:100%;aspect-ratio:auto;object-fit:cover;
    transform:scale(1.28);transform-origin:22% 50%;
  }
  .hero-foto > .hero-imagine::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(90deg,
      rgba(23,28,34,.95) 0%, rgba(23,28,34,.92) 42%,
      rgba(23,28,34,.45) 62%, rgba(23,28,34,0) 80%);
    /* largit pe 21 sept. 2026, sesiunea 23 (decizie Mirela): titlul are acum o
       propozitie pe rand, iar randul EN cel mai lung ajunge la ~55-57 % din
       latime de la 1280 in sus. Inainte: .90 la 32 %, .40 la 54 %, 0 la 74 %. */
  }
  .hero-foto::before{
    content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:url('pattern/KIM_patternA_dark_celula_512.svg') repeat;
    background-size:128px 128px;opacity:.55;
    background-position:max(16px, calc(50% - 592px)) 0;
    -webkit-mask-image:linear-gradient(90deg,#000 0%, rgba(0,0,0,.8) 44%, rgba(0,0,0,0) 64%);
    mask-image:linear-gradient(90deg,#000 0%, rgba(0,0,0,.8) 44%, rgba(0,0,0,0) 64%);
  }
  .hero-foto .reper{display:block;position:absolute;top:128px;left:max(16px, calc(50% - 592px));width:17px;height:17px;z-index:3}
  /* Reperul sta langa titlu, in marginea din stanga, la orice latime de la
     1024 (decizie Mirela, 21 sept. 2026, sesiunea 23, pe varianta RO la 1440).
     Pozitia urmeaza containerul: 40 px la stanga textului (50% - 552 - 40),
     niciodata mai aproape de 16 px de marginea ecranului. Caroiajul se aliniaza
     la aceeasi origine (background-position din .hero-foto::before), deci
     reperul cade mereu pe o intersectie. */
  .hero-foto > .inv{
    position:relative;z-index:2;min-height:600px;
    padding-top:var(--s6);padding-bottom:var(--s6);
    display:flex;flex-direction:column;justify-content:center;
  }
  .hero-foto h1{max-width:none;font-size:42px;margin-bottom:var(--s3)}
  .hero-foto .h1-linie{display:block}
  /* pe EN propozitiile sunt mai lungi: titlul coboara la 36 px, ca randul cel
     mai lung sa stea tot la jumatatea ecranului, ca pe RO (decizie Mirela,
     21 sept. 2026, sesiunea 23) */
  html[lang="en"] .hero-foto h1{font-size:36px}  /* o propozitie pe rand (h1_linii), decizie Mirela 21 sept. 2026 */
  .hero-foto .intro{max-width:34ch;margin-bottom:var(--s1)}
  .hero-foto .linie-pozitionare{margin-top:var(--s2);color:var(--otel-deschis)}
  .hero-foto .hero-actiune{margin-top:var(--s3)}
  .hero-foto > .banda-pattern{position:relative;z-index:2}
}

/* --- butonul principal nu mai e high-vis -------------------------------
   Decizie Mirela, 20 sept. 2026: verdele ramane accentul din fotografie si
   din reperul de caroiaj, nu al butonului. Suprascrie SISTEM_GRAFIC §5
   comp.buton („high-vis plin"), pe tot site-ul, nu doar pe acasa.
   Pe fond inchis butonul e alb plin cu text grafit; pe fond deschis e
   grafit plin cu text alb, ca sa ramana vizibil.                        */
.buton{background:var(--grafit);color:var(--alb)}
.buton:hover{background:var(--grafit-inchis)}
.hero .buton,.final .buton,.dark .buton,.sectiune-foto .buton{background:var(--alb);color:var(--grafit)}
.hero .buton:hover,.final .buton:hover,.dark .buton:hover,.sectiune-foto .buton:hover{background:var(--grialb)}
/* banda de pattern (folosirea 05): sub imagine, fara text peste, fara reper
   high-vis. Poarta eticheta tehnica a imaginii, ca sa fie banda, nu gol. */
.banda-pattern{
  background:var(--grafit) url('pattern/KIM_patternA_dark_celula_512.svg') repeat;
  background-size:128px 128px;
  border-top:1px solid var(--otel-inchis);
  border-bottom:1px solid var(--linie-dark);
  padding:var(--s3) 0;
}
@media (min-width:1024px){.banda-pattern{background-size:160px 160px;padding:var(--s4) 0}}
.banda-pattern .eticheta-ai{margin:0}

/* --- eticheta de AI (comp.eticheta-ai) ---------------------------------- */
.eticheta-ai{
  font-family:var(--f-cifre);font-size:var(--t-sursa);color:var(--otel);
  margin:var(--s1) 0 0;
}

/* --- grile -------------------------------------------------------------- */
.grila-2{display:grid;gap:var(--s6);grid-template-columns:1fr}
.grila-3{display:grid;gap:var(--s4);grid-template-columns:1fr}
@media (min-width:760px){.grila-2{grid-template-columns:1fr 1fr}.grila-3{grid-template-columns:repeat(3,1fr)}}

/* --- blocul de socoteala (comp.socoteala) ------------------------------- */
.socoteala{
  background:var(--grafit);color:var(--alb);padding:var(--s3);
  border:0;margin:var(--s4) 0;max-width:640px;
}
.dark .socoteala{border:1px solid var(--otel);background:none}
.socoteala .cifra{
  font-family:var(--f-cifre);font-weight:500;color:var(--highvis);
  font-size:var(--t-cifra);line-height:1;display:block;margin:var(--s2) 0 var(--s1);
  white-space:nowrap;
}
.socoteala .eticheta{color:var(--alb);font-weight:500;display:block}
.socoteala .sursa{
  font-family:var(--f-cifre);font-size:var(--t-sursa);color:var(--otel);
  display:block;margin-top:var(--s2);
}
.socoteala p{color:var(--otel-deschis);margin:var(--s2) 0 0}

/* --- caseta de dovada (comp.dovada) ------------------------------------- */
.dovada{
  background:var(--grafit);color:var(--alb);padding:var(--s4);margin:var(--s4) 0;
  border-left:4px solid var(--highvis);
}
.dovada blockquote{margin:0 0 var(--s3);font-size:calc(var(--t-text) + 3px);line-height:1.45;max-width:58ch}
.dovada .atribuire{color:var(--otel-deschis);font-weight:500;display:block}
.dovada .sursa{font-family:var(--f-cifre);font-size:var(--t-sursa);color:var(--otel);display:block;margin-top:var(--s1)}

/* --- caseta de imagine (comp.caseta-imagine) ---------------------------- */
.caseta-imagine{margin:var(--s4) 0}
.caseta-imagine img{width:100%;object-fit:cover}

/* --- lantul (elementul de sistem) --------------------------------------- */
.lant{list-style:none;padding:0;margin:var(--s6) 0;display:grid;gap:0;grid-template-columns:1fr}
.lant li{
  display:grid;grid-template-columns:48px 1fr;gap:var(--s3);align-items:start;
  padding:var(--s3) 0;border-top:2px solid rgba(138,148,158,.35);margin:0;max-width:none;
}
.lant li:last-child{border-bottom:1px solid rgba(138,148,158,.35)}
.ico{
  width:32px;height:32px;display:block;flex:none;
  background-color:var(--grafit);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
}
.dark .ico{background-color:var(--otel-deschis)}
.lant b{display:block;font-family:var(--f-titlu);font-weight:500;font-size:var(--t-h3)}
.lant span{color:var(--otel-inchis)}
.dark .lant span{color:var(--otel-deschis)}
/* cele trei verigi in care se rupe informatia: linia de sus se aprinde.
   Un singur accent high-vis per compozitie (SISTEM_GRAFIC §1.2) — restul, otel. */
.lant .rupt{border-top-color:var(--otel)}
.lant .accent{border-top-color:var(--highvis)}
@media (min-width:1024px){
  .lant{grid-template-columns:repeat(5,1fr);gap:var(--s3)}
  .lant li{grid-template-columns:1fr;border-bottom:0!important;padding-top:var(--s3)}
}

/* --- linia de semnatura (fraza de cariera, citata exact) ---------------- */
.semnatura{
  font-family:var(--f-titlu);font-weight:500;font-size:var(--t-h3);
  line-height:1.3;margin:var(--s6) 0 0;max-width:30ch;color:var(--grafit);
  border-left:3px solid var(--highvis);padding-left:var(--s3);
}
.dark .semnatura,.sectiune-foto .semnatura,.final .semnatura{color:var(--alb)}

/* --- pictograma langa titlu de sectiune --------------------------------- */
.titlu-ico{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s3)}

.titlu-ico h2,.titlu-ico h3{margin:0}

/* --- intrebari si raspunsuri -------------------------------------------- */
.intrebari{border-top:1px solid rgba(23,28,34,.15)}
.dark .intrebari{border-top-color:var(--linie-dark)}
.intrebari > div{padding:var(--s4) 0;border-bottom:1px solid rgba(23,28,34,.15)}
.dark .intrebari > div{border-bottom-color:var(--linie-dark)}
.intrebari h3{margin-bottom:var(--s2)}
.intrebari p:last-child{margin-bottom:0}

/* --- carduri de trimitere ----------------------------------------------- */
.card{
  display:block;text-decoration:none;color:inherit;
  border:1px solid rgba(23,28,34,.18);padding:var(--s3);
  transition:border-color .15s ease,transform .15s ease;height:100%;
}
.card:hover{border-color:var(--grafit);transform:translateY(-2px)}
.dark .card{border-color:var(--linie-dark)}
.dark .card:hover{border-color:var(--otel)}
.card h3{margin-bottom:var(--s1)}
.card p{margin:0;color:var(--otel-inchis);font-size:calc(var(--t-text) - 1px)}
.dark .card p{color:var(--otel-deschis)}
.card .mai{font-family:var(--f-cifre);font-size:var(--t-sursa);color:var(--grafit);display:block;margin-top:var(--s2);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
/* S30, 29 sept.: randul de trimitere se citeste ca link si pe telefon, unde nu exista hover (cererea Mirelei) */
.card:hover .mai{text-decoration-thickness:2px}
/* linkurile din proza: tinta minima pe verticala, fara sa rupa randul */
main p a,main li a{display:inline-block;min-height:24px;padding:1px 0}
.dark .card .mai{color:var(--alb)}

/* --- apelul final ------------------------------------------------------- */
.final{background:var(--grafit);color:var(--alb);text-align:left}
.final h2{max-width:20ch}

/* --- subsolul ----------------------------------------------------------- */
.subsol{background:var(--grafit-inchis);color:var(--otel-deschis);padding:var(--s8) 0 var(--s4)}
.subsol a{color:var(--otel-deschis);text-decoration:none}
.subsol a:hover{color:var(--alb)}
.subsol h2{font-family:var(--f-titlu);font-weight:500;color:var(--alb);margin:0 0 var(--s2);font-size:var(--t-text);line-height:1.3}
/* --- capetele de coloana din subsol -------------------------------------
   Decizie Mirela, 20 sept. 2026, sesiunea 22: capetele de coloana primesc o
   dunga high-vis dedesubt. Motivul, al ei: pe telefon subsolul devine o
   singura coloana si nu mai stii care rand e cap de categorie si care e
   pagina — fontul si culoarea singure nu ajung.
   SUPRASCRIERE consemnata, doua reguli:
     §2, tabelul de roluri: pe fond inchis, o linie care poarta informatie e
       otel, iar high-vis e accentul unic. Aici linia poarta informatie SI e
       high-vis, fiindca rolul ei e sa se vada dintr-o privire.
     §11.9: un singur accent per compozitie. In subsol sunt patru.
   Ce tine suprascrierea in frau: dunga e scurta — 24 px, cat un reper, nu
   cat coloana —, are 2 px si nu se atinge de altceva. E acelasi dispozitiv
   ca bara high-vis de 3 px din antet, care marcheaza pagina curenta; deci
   high-vis ramane, in tot site-ul, semnul „aici esti / asta conteaza".
   Contrast masurat: #C6F135 pe #0F1316 — mult peste pragul de 3:1 cerut
   liniilor cu informatie (§10.4). */
.subsol-grila nav h2{position:relative;padding-bottom:10px}
.subsol-grila nav h2::after{
  content:"";position:absolute;left:0;bottom:0;width:24px;height:2px;background:var(--highvis);
}

.subsol ul{list-style:none;padding:0;margin:0}
.subsol li{margin-bottom:var(--s1)}
.subsol li a{display:inline-flex;align-items:center;min-height:24px}
/* Linkurile de harta din subsol stau la 16 px peste 1024 px, acolo unde
   corpul de text al paginii creste la 18. Nu e o micsorare arbitrara: in
   subsol exista deja o scara proprie, mai mica decit a paginii — descrierea
   e la 15 px, randul de adresa la 13 —, iar navigatia nu are nevoie sa
   creasca odata cu textul citit.
   Masurat, nu ales la ochi: coloana de harta are 198 px la orice latime
   peste 1280. „Service and maintenance", cea mai lunga eticheta, cere
   215 px la 18, 204 la 17 si 192 la 16. Deci 16 e prima marime care incape,
   si incape cu 6 px de rezerva. Tinta de atingere ramane neatinsa: 24 px pe
   desktop, 44 pe telefon, din regulile de mai sus. */
@media (min-width:1024px){.subsol-grila nav li a{font-size:16px}}
/* Pe atingere, 24 px e minimul legal (WCAG 2.5.8), nu marimea unui deget.
   Masurat pe 20 sept. 2026 la 390 px: 13 dintre linkurile subsolului aveau
   27 px. Motivul e al brandului (KIM_REGULI_HTML §10.4): oamenii KIM citesc
   pe telefon, in hala, cu manusi. */
@media (max-width:899px){
  .subsol li{margin-bottom:0}
  .subsol li a{min-height:44px}
}
/* Grila subsolului, dupa ce subsolul a devenit oglinda meniului (patru
   coloane de harta, nu trei). Pragurile:
     sub 600 px  — o singura coloana, ca tot ce e pe telefon;
     600-1099    — blocul de identitate pe toata latimea, apoi harta pe doua
                   coloane; cu patru coloane la 768 px ar iesi coloane de
                   102 px, in care se rupe aproape fiecare eticheta;
     de la 1100  — identitatea plus cele patru coloane de harta.
   Raportul 1.2fr lasa coloanelor de harta cat se poate fara sa striveasca
   blocul de identitate (logo, descriere, telefon, marci). */
.subsol-grila{display:grid;gap:var(--s4);grid-template-columns:1fr}
@media (min-width:600px) and (max-width:1279px){
  .subsol-grila{grid-template-columns:1fr 1fr}
  .subsol-grila > div:first-child{grid-column:1 / -1}
}
/* Pragul e 1280, nu 1100, si spatiul dintre coloane e --s3, nu --s4, dintr-un
   motiv masurat: cea mai lunga eticheta de subsol, „Service and maintenance",
   cere 203 px la corpul de text al subsolului. Sub 1280 px, cele patru
   coloane de harta plus blocul de identitate nu pot da 203 px fiecareia —
   la 1100 ies 175. Alternativa ar fi fost sa scad corpul la 15 px, adica sa
   fac textul mai greu de citit ca sa incapa; pragul face acelasi lucru fara
   sa atinga marimea literei. Sub prag, harta trece pe doua coloane late. */
@media (min-width:1280px){
  /* `minmax(0, …)` pe fiecare coloana, nu `1fr` simplu. Fara el, coloana de
     identitate se opreste la latimea continutului ei (descrierea are
     max-width 36ch, adica 328 px) si nu coboara sub atit, oricit i-ai da mai
     putin din raport — iar coloanele de harta primesc doar ce ramine: 194 px,
     sub cei 203 de care are nevoie „Service and maintenance". Cu minmax(0),
     raportul chiar se aplica: 216 px fiecare la 1440, 213 la 1280. */
  .subsol-grila{
    grid-template-columns:minmax(0,1.1fr) repeat(4, minmax(0,1fr));
    gap:var(--s6) var(--s3);
  }
  /* S30, 29 sept. 2026 (cererea Mirelei): identitatea si harta pe ACELASI rand.
     „What it is" si „Proof", cu cite un link, impart o coloana (.subsol-grup),
     deci harta ramine la patru coloane de ~213 px si nicio eticheta nu se rupe. */
}
/* coloana cu doua blocuri scurte, unul sub altul (S30) */
.subsol-grup > nav + nav{margin-top:var(--s4)}

/* --- telefonul si e-mailul din subsol -----------------------------------
   Decizie Mirela, 20 sept. 2026, sesiunea 22: se pun pe toate paginile, nu
   doar pe contact — omul care intra pe o pagina interioara si vrea sa sune
   nu trebuie sa navigheze pina la Contact. Valorile: BOILERPLATE §3.
   Stau intre descriere si rindul de marci; acelasi corp ca descrierea. */
.subsol-contact{margin:var(--s3) 0 0;font-size:15px}
.subsol-contact a{
  display:inline-flex;align-items:center;min-height:24px;
  text-decoration:underline;text-underline-offset:3px;
}

/* --- bloc de text pe doua coloane ---------------------------------------
   Numai unde a doua coloana are ce duce (decizia 12, sesiunea 21: albul de
   la marginea exterioara se citeste ca margine, albul prins intre coloane
   se citeste ca gaura). Sub 900 px se stivuiesc — un ecran de telefon are o
   singura coloana. */
.text-coloane{display:grid;grid-template-columns:1fr;gap:var(--s3)}
.text-coloane p{margin:0}
@media (min-width:900px){
  /* Coloanele se string pe continutul lor (`max-content`), nu pe jumatati de
     latime. Cu jumatati, randul „Str. Maramures 12, Sudarc Business Center"
     se rupea si lasa „Center" singur pe un rand, iar cele doua coloane se
     departau una de alta cit tot blocul — exact gaura din decizia 12. */
  .text-coloane{grid-template-columns:repeat(2,minmax(0,max-content));gap:var(--s8)}
}

/* --- marcile oficiale ale platformelor ---------------------------------
   Marcile NU sunt pictograme KIM: sunt marci inregistrate, luate ca atare din
   resursele de brand ale platformelor. Nu se recoloreaza, nu trec prin
   mask-image, nu primesc contur, umbra sau deformare. Aici se aseaza doar
   cutia din jurul lor si starile linkului.
   Fisierele, provenienta si regulile: _assets/marci-platforme/README.md
   Cutia de 48x48 tine tinta de atingere peste minimul din KIM_REGULI_HTML
   §3 si lasa spatiul liber cerut de fiecare platforma in jurul marcii:
   marca vizibila are ~20 px inaltime la amandoua.
   La hover placa se aseaza in spate; triunghiul YouTube si „in"-ul LinkedIn
   sunt decupate, deci placa se vede prin ele — exact cum cere YouTube la
   varianta monocroma. Marca insasi nu se atinge. */
/* Marginea negativa aliniaza *marca vizibila*, nu cutia, cu marginea din
   stanga a coloanei — logoul si textul de deasupra. Fara ea, rindul de marci
   sta vizibil mai la dreapta.
   Selectorul are nevoie de „.subsol" in fata: „.subsol ul" de mai sus e mai
   tare decit o singura clasa si i-ar anula marginile.
   Latimea cutiei difera de la o marca la alta fiindca marcile au latimi
   diferite (~21 px LinkedIn si Facebook, ~28 px YouTube) si doua dintre
   fisiere isi poarta spatiul liber inauntru. Fiecare cutie e marca vizibila
   plus 10 px de o parte si de alta; cu 4 px de spatiu intre cutii, golul
   optic dintre doua marci iese 24 px peste tot — adica --s3, unitatea de
   spatiere a subsolului. */
.subsol ul.subsol-marci{display:flex;gap:4px;align-items:center;list-style:none;margin:var(--s3) 0 0 -10px;padding:0}
.subsol-marci li{margin:0}
.subsol-marci li a{display:inline-flex;align-items:center;justify-content:center;
  height:44px;background:transparent;transition:background 160ms}
.subsol-marci .marca-linkedin{width:42px}
.subsol-marci .marca-facebook{width:41px}
.subsol-marci .marca-youtube{width:48px}
.subsol-marci li a:hover{background:var(--linie-dark)}
.subsol-marci img{display:block;width:auto}
@media (prefers-reduced-motion:reduce){.subsol-marci li a{transition:none}}

/* --- paginile legale, pe banda de jos a subsolului ----------------------
   Nu sunt coloana de harta: nu fac parte din meniu si nimeni nu le cauta
   acolo. Stau pe banda de jos, linga adresa, in acelasi mono. */
.subsol-legal a{
  display:inline-flex;align-items:center;min-height:24px;
  text-decoration:underline;text-underline-offset:3px;
}
/* Telefonul, e-mailul si banda legala sint tot linkuri de subsol, deci au
   acelasi prag de atingere ca restul subsolului. Masurat la a doua privire,
   21 sept.: aveau 19 si 17 px, sub pragul de 24 px din §10.4 la orice
   latime — cadere introdusa chiar in ziua in care s-au adaugat.
   Blocul sta AICI, dupa regulile de baza, nu in media query-ul de mai sus:
   acolo venea inaintea lor in fisier si era anulat in tacere. */
@media (max-width:899px){
  .subsol-contact a,.subsol-legal a{min-height:44px}
}

/* --- faptul de confirmat, pe pagina de confidentialitate ----------------
   D07: ce nu stim nu se inventeaza si nu se ascunde intr-o formulare vaga.
   Se vede ca e gol, si se vede cine trebuie sa-l umple. Marcajul se scoate
   la construirea efectiva a site-ului; pina atunci, daca a ramas unul in
   pagina, se vede de la distanta. */
.asteapta{
  display:inline;background:rgba(198,241,53,.16);
  box-shadow:inset 0 -2px 0 var(--highvis);
  font-family:var(--f-cifre);font-size:.9em;padding:0 4px;
}

.subsol-jos{
  margin-top:var(--s6);padding-top:var(--s3);border-top:1px solid var(--linie-dark);
  font-family:var(--f-cifre);font-size:var(--t-sursa);color:var(--otel);
  display:flex;gap:var(--s3);flex-wrap:wrap;justify-content:space-between;
}


/* ==========================================================================
   comp.flux — dispozitivul de proces/pasi
   Schema: D:\Mirela Pascu Brand\FLUX_PROCES_REGULI_MASTER_CROSS_BRAND.md v1.0
   Proba: prezentarea BNI KIM, plansele 5 si 10 (fundal deschis).
   ========================================================================== */

/* --- forma A: orizontala, pe suprafata deschisa ------------------------- */
.flux{list-style:none;margin:var(--s6) 0 0;padding:0;display:grid;gap:var(--s4);grid-template-columns:1fr}
.flux li{margin:0;max-width:none;position:relative}
.flux .nr{
  font-family:var(--f-cifre);font-size:var(--t-sursa);font-weight:500;
  color:var(--otel-inchis);display:block;margin-bottom:6px;letter-spacing:.06em;
}
.flux .caseta{
  background:var(--alb);border:2px solid var(--grafit);padding:var(--s3) var(--s2);
  font-family:var(--f-titlu);font-weight:500;font-size:var(--t-h3);line-height:1.2;
  display:flex;align-items:center;justify-content:center;text-align:center;min-height:104px;
}
.flux .cine{
  display:block;color:var(--otel-inchis);text-align:center;
  margin-top:var(--s2);font-size:calc(var(--t-text) - 2px);line-height:1.4;
}
.flux .accent .caseta{background:var(--highvis);border-color:var(--highvis);color:var(--grafit)}

/* sageata dintre casete: linie subtire + varf, in culoarea de linie */
@media (min-width:880px){
  .flux{grid-template-columns:repeat(var(--pasi,5),1fr);gap:var(--s6)}
  .flux li+li::before{
    content:"";position:absolute;left:calc(var(--s6) * -1);top:calc(50% + 4px);
    width:var(--s6);border-top:2px solid var(--grafit);
  }
  .flux li+li::after{
    content:"";position:absolute;left:-14px;top:calc(50% - 1px);
    width:9px;height:9px;border-top:2px solid var(--grafit);border-right:2px solid var(--grafit);
    transform:translateY(-50%) rotate(45deg);
  }
}

/* --- forma A+: gruparea (acolade) + bara de concluzie ------------------- */
.flux-grupe{display:none}
@media (min-width:880px){
  .flux-grupe{display:grid;gap:var(--s6);margin-top:var(--s2)}
  .flux-grupe .grupa{text-align:center}
  .flux-grupe .acolada{
    height:10px;border:1px solid var(--otel-inchis);border-bottom:0;margin-bottom:var(--s1);
  }
  .flux-grupe .eticheta{color:var(--otel-inchis);font-size:calc(var(--t-text) - 2px)}
}
.flux-grupe-mobil{margin-top:var(--s3);color:var(--otel-inchis);font-size:calc(var(--t-text) - 2px)}
@media (min-width:880px){.flux-grupe-mobil{display:none}}
.bara-concluzie{
  background:var(--highvis);color:var(--grafit);font-weight:600;
  padding:var(--s2) var(--s3);margin-top:var(--s4);text-align:center;
  font-family:var(--f-titlu);font-size:var(--t-h3);line-height:1.3;
}

/* --- sectiunea cu fotografie in fundal (BNI, plansele 6-8) -------------
   Fotografia sta sub un voal de grafit, cu caroiajul tehnic peste ea.
   Contrastul textului se masoara pe pixelii finali, nu se presupune. */
.sectiune-foto{position:relative;background:var(--grafit);color:var(--alb);overflow:hidden}
.sectiune-foto .fundal{
  position:absolute;inset:0;background-size:cover;background-position:center;
}
.sectiune-foto .voal{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(23,28,34,.94),rgba(23,28,34,.90));
}
.sectiune-foto .caroiaj{
  position:absolute;inset:0;
  background:url('pattern/KIM_patternA_dark_celula_512.svg') repeat;
  background-size:160px 160px;background-position:right top;opacity:.5;
}
/* Reperul high-vis al sectiunii cu fotografie (constatare Mirela, 20 sept. 2026,
   sesiunea 21): sectiunea avea voal si caroiaj, dar niciun accent, desi §1 cere
   exact un accent high-vis per ecran. Se aseaza pe o intersectie de caroiaj, in
   partea descoperita a fotografiei. Caroiajul e ancorat la dreapta tocmai ca
   intersectia sa cada la acelasi loc la orice latime. Ascuns sub 880 px, unde
   voalul acopera toata latimea si caroiajul nu mai are suprafata libera. */
.sectiune-foto .reper{display:none}
@media (min-width:880px){
  .sectiune-foto .reper{
    display:block;position:absolute;top:151px;right:312px;
    width:17px;height:17px;z-index:2;
  }
}
.sectiune-foto > .inv{position:relative;z-index:2}
.sectiune-foto h2,.sectiune-foto h3{color:var(--alb)}
.sectiune-foto .secundar{color:var(--otel-deschis)}
@media (min-width:880px){
  .sectiune-foto .voal{
    background:linear-gradient(90deg,rgba(23,28,34,.97) 0%,rgba(23,28,34,.95) 46%,rgba(23,28,34,.62) 100%);
  }
  .sectiune-foto > .inv > *{max-width:58%}
  .sectiune-foto > .inv > .flux-vertical{max-width:58%}
}

/* --- forma B: verticala, peste imagine sau pe suprafata inchisa -------- */
.flux-vertical{list-style:none;margin:var(--s4) 0 0;padding:0}
.flux-vertical li{
  display:grid;grid-template-columns:12px 44px 1fr;gap:var(--s2);align-items:start;
  margin:0;padding:var(--s2) 0;max-width:none;position:relative;
}
.flux-vertical .patrat{width:12px;height:12px;background:var(--otel);margin-top:7px}
.flux-vertical li:not(:last-child)::before{
  content:"";position:absolute;left:5px;top:26px;bottom:-4px;border-left:1px solid var(--otel);
}
.flux-vertical .nr{font-family:var(--f-cifre);font-size:var(--t-sursa);color:var(--otel);padding-top:4px}
.flux-vertical b{font-weight:400}
.flux-vertical .cuvant{color:var(--highvis);font-weight:600}

/* --- comp.video: afisul piesei + butonul de redare -----------------------
   Fara iframe si fara script de la terti in pagina: afisul e miniatura
   construita de noi, iar clicul deschide piesa pe canal. Motivul (registru
   operational): pagina ramane usoara pe conexiune proasta, iar vizionarea
   se duce pe canal, unde e si masurata. */
.video{display:block;text-decoration:none;color:inherit;margin:var(--s4) 0}
.video .afis{position:relative;display:block;background:var(--grafit-inchis)}
.video .afis img{width:100%;display:block}
/* butonul de redare: placa de grafit cu contur alb — mecanismul placii din
   intro/outro si din thumbnail. Se citeste „video" fara sa aduca rosul
   platformei in paleta si fara sa se bata cu accentul verde al miniaturii
   (un singur accent per compozitie, SISTEM_GRAFIC §1.2).
   Varianta cu semnul rosu YouTube: vezi _PROBE_buton_redare.jpg, coloana A. */
/* Pozitia: sus-dreapta, nu in mijloc. In mijloc placa cadea peste titlul
   afisului — se vedea mai ales pe ecran ingust, unde afisul se micsoreaza si
   placa ramane la aceeasi marime. Sus-dreapta e fotografie pe toate cele
   unsprezece afise, si la 16:9 si la 9:16, iar sigla KIM sta sus-stanga,
   deci nu se ating. (Constatare Mirela, 20 sept. 2026.) */
.video .redare{
  position:absolute;right:var(--s2);top:var(--s2);
  width:96px;height:68px;background:rgba(15,19,22,.84);
  border:2px solid var(--alb);display:flex;
  align-items:center;justify-content:center;transition:transform .15s ease,background .15s ease;
}
@media (max-width:759px){
  .video .redare{width:68px;height:48px;right:var(--s1);top:var(--s1)}
  .video .redare::after{border-left-width:16px;border-top-width:10px;border-bottom-width:10px;margin-left:4px}
}
.video .redare::after{
  content:"";width:0;height:0;margin-left:5px;
  border-left:22px solid var(--alb);
  border-top:14px solid transparent;border-bottom:14px solid transparent;
}
.video:hover .redare{background:rgba(15,19,22,.96);transform:scale(1.06)}
.video .titlu{
  display:block;font-family:var(--f-titlu);font-weight:500;font-size:var(--t-h3);
  margin-top:var(--s2);
}
.video .meta{
  display:block;font-family:var(--f-cifre);font-size:var(--t-sursa);
  color:var(--otel-inchis);margin-top:6px;
}
.dark .video .meta,.sectiune-foto .video .meta{color:var(--otel-deschis)}
.grila-video{display:grid;gap:var(--s4);grid-template-columns:1fr}
@media (min-width:760px){.grila-video{grid-template-columns:1fr 1fr}}

/* Afisele verticale (shorts, 9:16) nu se aseaza ca cele orizontale. Masurat pe
   20 sept. 2026: la latimea unei coloane un afis 9:16 iese 536 x 953 px, iar
   unul singur pe toata latimea 1104 x 1963, adica doua ecrane; langa un afis
   16:9 de 302 px inaltime, randul se rupe. Se aseaza in rand propriu, la
   latimea unui telefon in pagina. */
.grila-shorts{display:flex;flex-wrap:wrap;gap:var(--s4);margin:var(--s4) 0}
.grila-shorts .video{margin:0;width:var(--lat-short);flex:0 0 auto}
/* Placa de redare are marime fixa (96 x 68). Pe un afis vertical de 280 px
   latime ar acoperi o treime din el, deci pe shorts se foloseste placa mica,
   aceeasi ca pe ecran ingust. */
.grila-shorts .video .meta{margin-top:var(--s2)}
.grila-shorts .video .redare{width:68px;height:48px;right:var(--s1);top:var(--s1)}
.grila-shorts .video .redare::after{border-left-width:16px;border-top-width:10px;border-bottom-width:10px;margin-left:4px}
@media (max-width:759px){
  /* UN ECRAN DE TELEFON ARE O SINGURA COLOANA. Doua afise pe rand ieseau de
     159 px latime fiecare. (Mirela, 20 sept. 2026, sesiunea 21.) */
  .grila-shorts{gap:var(--s4)}
  .grila-shorts .video{width:100%}
}

/* --- formularul de cerere ---------------------------------------------- */
.formular{max-width:560px;margin:var(--s6) 0 0}
/* De la 900 px in sus, numele si compania stau unul linga altul: sint doua
   cimpuri scurte care nu au nevoie de un rind intreg fiecare. Formularul
   creste la 720 px, deci fiecare cimp scurt are ~348 px — destul pentru un
   nume de firma —, iar e-mailul si mesajul raman pe toata latimea.
   Inainte: toate cimpurile la 560 px fix, indiferent de ecran, ceea ce lasa
   53% din coloana gol la 1440 px si facea formularul sa para o schita. */
@media (min-width:900px){
  .formular{max-width:720px;display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s3)}
  .formular > .nota-formular,
  .formular > .camp:nth-of-type(3),
  .formular > .camp:nth-of-type(4),
  .formular > .buton{grid-column:1 / -1}
  .formular > .buton{justify-self:start}
}
.nota-formular{color:var(--otel-inchis);font-size:calc(var(--t-text) - 1px);margin:0 0 var(--s4)}
.camp{margin-bottom:var(--s3)}
.camp label{display:block;font-weight:500;margin-bottom:6px}
.camp input,.camp textarea{
  width:100%;font-family:var(--f-text);font-size:var(--t-text);color:var(--grafit);
  background:var(--alb);border:1px solid var(--otel-inchis);border-radius:0;
  padding:12px var(--s2);min-height:48px;
}
.camp textarea{min-height:120px;resize:vertical}
.camp input:focus-visible,.camp textarea:focus-visible{outline:3px solid var(--highvis);outline-offset:1px;border-color:var(--grafit)}

/* --- linkul care sta singur intr-un paragraf ----------------------------
   „What the whole chain means →" si perechile lui nu sint linkuri in mijlocul
   unei fraze: sint pasul urmator al sectiunii. Pe telefon primesc acelasi
   prag de atingere ca subsolul — 44 px —, cu acelasi motiv scris in sesiunea
   20: oamenii KIM citesc pe telefon, in hala, cu manusi. Linkurile din
   interiorul unei propozitii NU intra aici: le-ar rupe ritmul randului, si
   WCAG 2.5.8 le scuteste oricum. */
.sectiune p > a:only-child{display:inline-flex;align-items:center;min-height:24px}
@media (max-width:899px){
  .sectiune p > a:only-child{min-height:44px}
}

/* --- citat cu marker, pe suprafata deschisa (BNI, plansa 12) ----------- */
.citat-marcat{border-left:6px solid var(--grafit);padding-left:var(--s3);margin:var(--s6) 0}
.citat-marcat blockquote{
  font-family:var(--f-titlu);font-weight:500;line-height:1.35;margin:0 0 var(--s3);
  font-size:calc(var(--t-h3) + 4px);max-width:30ch;
}
.citat-marcat .sursa{font-family:var(--f-cifre);font-size:var(--t-sursa);color:var(--otel-inchis);display:block}
.citat-marcat .atribuire{display:block;font-weight:500;margin-bottom:var(--s1)}
.marker{background:var(--highvis);padding:.04em .16em;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* --- mișcarea (registru operațional: minimă, doar ce servește citirea) ---
   Fără dezvăluiri la scroll: conținutul e întreg din prima, cu sau fără JS.
   Motivul (KIM_REGULI_HTML §5): oamenii KIM citesc pe telefon, în hală, pe
   conexiune proastă — o animație care ascunde text e un risc, nu un efect. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}


/* --- restul tintelor de atingere, pe telefon si pe tableta --------------- */
@media (max-width:899px){
  .intrebari > div{padding:var(--s3) 0}
  .buton,.buton-contur{min-height:48px}
  /* linkurile care stau singure pe un rand de lista (trimiterile „→", LinkedIn,
     YouTube) sunt tinte de atingere, nu legaturi in mijlocul unei fraze. */
  .inv li > a:only-child{display:inline-flex;align-items:center;min-height:44px}
}

/* --- asezarea blocului de text pe desktop (Mirela, 20 sept. 2026, sesiunea 21)
   O SINGURA COLOANA. Titlul coboara la latimea textului, ca sa nu mai ramana
   448 px de gol in dreapta fiecarui paragraf. Varianta pe doua coloane a fost
   incercata si respinsa pe pagina de gestiune: albul dintre coloana de titlu si
   cea de text se citeste ca GAURA, pe cand albul din dreapta textului se citeste
   ca MARGINE. Plus: in coloana de 340 px titlurile lungi se rup pe patru randuri.
   Singura exceptie ramane sectiunea cu un afis vertical singur: acolo textul sta
   la stanga si afisul la dreapta, fiindca altfel afisul plutea singur intr-un
   rand, cu 812 px gol langa el. */
.ed-titlu h2{max-width:none;margin-top:0}
.ed-titlu .eyebrow{margin-top:0}
.ed-corp > *:first-child{margin-top:0}
.ed-lateral .grila-shorts{margin:0}
.ed-lateral .video{width:100%!important}

@media (min-width:1024px){
  .ed-titlu,.ed-corp{max-width:704px}
  .ed-lat{margin-top:var(--s4)}

  /* exceptia: un singur afis vertical, langa textul lui */
  .sectiune-lateral .ed-grila{
    display:grid;grid-template-columns:minmax(0,704px) 340px;
    column-gap:56px;align-items:start;
  }
  .sectiune-lateral .ed-titlu,
  .sectiune-lateral .ed-corp,
  .sectiune-lateral .ed-lat{grid-column:1;max-width:none}
  .sectiune-lateral .ed-lateral{grid-column:2;grid-row:1 / span 99}
}
@media (max-width:1023px){
  .ed-lateral{margin-top:var(--s4)}
}


/* --- hartia milimetrica pe sectiunile deschise (Mirela, 20 sept. 2026, ses. 21)
   Problema: cand trei sectiuni deschise vin una dupa alta, albul curge de sus
   pana jos si trecerea dintre ele nu se mai vede. Solutia: sectiunea din mijloc
   primeste patternul A in varianta light, foarte discret, cat sa rupa albul.
   SUPRASCRIERE consemnata: `SISTEM_GRAFIC` §7, randul „Pagina web - continut",
   spune pattern **nu**. Se aplica numai ca fundal de sectiune, niciodata sub un
   dispozitiv sau sub o cifra, si numai in interiorul unui sir de sectiuni
   deschise - nu pe toate.
   Varianta light: linii otel, cele doua repere in grafit, per folosirea 03.
   Opacitatea e mica: patternul se simte, nu se citeste. Contrastul textului
   peste el se masoara pe pixelii randati (poarta 9), nu se presupune. */
.sectiune-hartie{position:relative;isolation:isolate}
.sectiune-hartie::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url('pattern/KIM_patternA_light_celula_512.svg') repeat;
  background-size:128px 128px;background-position:right top;
  /* 0,65: linia cea mai inchisa a patternului ajunge la 2,32:1 fata de hartie.
     Pragul, decis pe plansa de patru trepte (Mirela, 20 sept. 2026, sesiunea 21):
     linia ramane SUB 2,5:1. Peste atat devine grila desenata, nu fundal, si
     incepe sa concureze cu textul. Textul e in siguranta oricum: grafitul pe
     linia cea mai inchisa ramane peste 13:1, fiindca liniile sunt subtiri. */
  opacity:.65;
}
@media (min-width:1024px){
  .sectiune-hartie::before{background-size:160px 160px}
}


/* heroul de acasa intre 1024 si 1279: containerul e aproape lipit de margine,
   iar randul EN cel mai lung ajunge la ~68 % din latime — voalul si caroiajul
   merg mai departe, ca titlul sa stea tot pe grafit */
@media (min-width:1024px) and (max-width:1279px){
  .hero-foto > .hero-imagine::after{
    background:linear-gradient(90deg,
      rgba(23,28,34,.95) 0%, rgba(23,28,34,.92) 52%,
      rgba(23,28,34,.45) 72%, rgba(23,28,34,0) 88%);
  }
  .hero-foto::before{
    -webkit-mask-image:linear-gradient(90deg,#000 0%, rgba(0,0,0,.8) 54%, rgba(0,0,0,0) 74%);
    mask-image:linear-gradient(90deg,#000 0%, rgba(0,0,0,.8) 54%, rgba(0,0,0,0) 74%);
  }
}