/* ==========================================================================
   VisonRB — sistem vizual „stație de inspecție".
   Un singur strat, ordonat: tokens → bază → componente → secțiuni → responsive.
   Nu adăuga patch-uri la finalul fișierului; editează regula existentă.
   ========================================================================== */

/* --- 0. Fonturi, găzduite local ------------------------------------------
   Fără cereri către Google: adresa IP a vizitatorului nu pleacă nicăieri.
   Doar subseturile latin și latin-ext; latin-ext conține ș și ț cu virgulă.
   Archivo și IBM Plex Sans sunt variabile (un fișier, toate greutățile).
   Licența SIL OFL a fiecărei familii este în assets/fonts/. */
/* Archivo · latin-ext */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 700;font-stretch:75% 100%;font-display:swap;
  src:url('assets/fonts/archivo-var-latin-ext.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;}
/* Archivo · latin */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 700;font-stretch:75% 100%;font-display:swap;
  src:url('assets/fonts/archivo-var-latin.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;}
/* IBM Plex Mono · latin-ext */
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('assets/fonts/ibm-plex-mono-400-latin-ext.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;}
/* IBM Plex Mono · latin */
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('assets/fonts/ibm-plex-mono-400-latin.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;}
/* IBM Plex Mono · latin-ext */
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('assets/fonts/ibm-plex-mono-500-latin-ext.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;}
/* IBM Plex Mono · latin */
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('assets/fonts/ibm-plex-mono-500-latin.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;}
/* IBM Plex Sans · latin-ext */
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('assets/fonts/ibm-plex-sans-var-latin-ext.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;}
/* IBM Plex Sans · latin */
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('assets/fonts/ibm-plex-sans-var-latin.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;}

/* --- 1. Tokens ----------------------------------------------------------- */
:root{
  --paper:#FBFAF8;
  --concrete:#EDEAE4;
  --graphite:#1C2226;
  --zinc:#4E575E;
  --line:#D9D5CD;
  --line-soft:#E6E2DA;
  --petrol:#14383F;
  --petrol-deep:#0D272C;
  --signal:#E39A0C;
  --signal-ink:#8A4B02;
  --signal-wash:#FBF0DA;
  --pass:#1F6B4F;
  --flag:#A8421C;

  --display:'Archivo','Arial Narrow',sans-serif;
  --body:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'Cascadia Mono',monospace;

  --gap:clamp(60px,7.5vw,100px);
  --radius:2px;
}

/* --- 2. Bază ------------------------------------------------------------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{
  margin:0;background:var(--paper);color:var(--graphite);
  font:16px/1.65 var(--body);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit}
button{cursor:pointer}
button,a,input,textarea,summary{-webkit-tap-highlight-color:transparent}
button,a,summary{touch-action:manipulation}
img,svg,video{max-width:100%}

a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--signal-ink);outline-offset:3px;
}
input:focus-visible,textarea:focus-visible{outline:2px solid var(--signal);outline-offset:2px}

h1,h2,h3{margin-top:0;font-family:var(--display);font-stretch:85%;font-weight:700}
h1{font-size:clamp(34px,4vw,56px);line-height:1.06;letter-spacing:-.03em;margin-bottom:24px}
h2{font-size:clamp(28px,3.1vw,42px);line-height:1.1;letter-spacing:-.025em;margin-bottom:18px}
h3{font-size:19px;line-height:1.3;letter-spacing:-.01em}
p{margin-top:0}

.wrap{max-width:1240px;width:calc(100% - 96px);margin-inline:auto}
.section{padding-block:var(--gap)}
/* Două secțiuni pe același fundal (#integrare → #proces) se despart printr-o
   linie, nu printr-un gol ambiguu de 200px. */
.section.wrap + .section.wrap{border-top:1px solid var(--line)}
.sr-only{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}
.skip{position:fixed;left:12px;top:-80px;background:var(--graphite);color:var(--paper);padding:14px 18px;z-index:100}
.skip:focus{top:12px}
.green{color:var(--pass)}
.orange{color:var(--flag)}

/* Apariție la derulare. Clasa .reveal este pusă din JS, niciodată în markup:
   dacă scriptul nu rulează, conținutul rămâne pur și simplu vizibil.
   --i decalează elementele care intră în ecran în același timp (un rând de carduri). */
.reveal{
  opacity:0;transform:translateY(22px);
  transition:opacity .6s cubic-bezier(.2,.6,.3,1),transform .6s cubic-bezier(.2,.6,.3,1);
  transition-delay:calc(var(--i,0) * 70ms);
}
.reveal.is-visible{opacity:1;transform:none}

/* --- 3. Semnătura: eticheta de detecție ----------------------------------
   Forma etichetei pe care un sistem de vedere o pune peste un obiect
   detectat: bară de marcaj în stânga, text mono, ca datele. Aceeași formă
   pentru kickerele de secțiune, deci pagina pare adnotată de sistem. */
.section-kicker,.intro,.estimate-badge,.sample-tag,.camera-label{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--signal-ink);background:var(--paper);
  border:1px solid var(--line);border-left:3px solid var(--signal);
  padding:5px 10px 5px 8px;line-height:1.5;
}
/* Kickerele sunt fraze scurte, nu coduri: spațiere redusă și voie să treacă pe rând nou. */
.section-kicker{display:inline-block;font-size:11px;letter-spacing:.06em;margin-bottom:18px;max-width:100%}
.status-dot{
  width:6px;height:6px;flex-shrink:0;background:var(--signal);
  border-radius:50%;box-shadow:0 0 0 3px var(--signal-wash);
}

/* --- 4. Acțiuni ---------------------------------------------------------- */
.button{
  display:inline-flex;align-items:center;justify-content:center;gap:14px;
  background:var(--graphite);color:var(--paper);
  border:1px solid var(--graphite);border-radius:var(--radius);
  padding:14px 22px;font-size:15px;font-weight:600;
  line-height:1.4;transition:background .18s,border-color .18s,color .18s;
}
.button:hover{background:var(--signal-ink);border-color:var(--signal-ink)}
.button span{font-size:15px}
.button.small{padding:11px 17px;font-size:14px;gap:10px}

.outlined-action,.card-detail,#media-contact{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:44px;padding:10px 16px;
  background:transparent;color:var(--signal-ink);
  border:1px solid var(--line);border-radius:var(--radius);
  font-size:14px;font-weight:600;line-height:1.4;
  transition:background .18s,border-color .18s,color .18s;
}
.outlined-action:hover,.card-detail:hover,#media-contact:hover{
  background:var(--signal-wash);border-color:var(--signal);color:var(--graphite);
}
.text-link{font-size:14px;font-weight:600;display:inline-flex;align-items:center;gap:10px}
a.text-link:not(.outlined-action):hover{color:var(--signal-ink)}

/* --- 5. Antet ------------------------------------------------------------ */
header{
  background:color-mix(in srgb,var(--paper) 92%,transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:20;
}
.nav{height:84px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{
  font-family:var(--display);font-stretch:85%;font-weight:700;font-size:27px;
  letter-spacing:-.035em;display:flex;align-items:center;gap:9px;white-space:nowrap;
}
.brand-icon{color:var(--signal-ink);font-size:16px;line-height:1}
/* Punctul se lipește de cuvânt; gap-ul flex al .brand l-ar împinge la distanță. */
.brand-dot{color:var(--signal);margin-left:-9px}
#navigation{display:flex;align-items:center;gap:30px;font-size:14px;font-weight:500}
#navigation>a:not(.button):hover{color:var(--signal-ink)}
.nav-count{
  font-size:11px;background:var(--signal-wash);color:var(--signal-ink);
  border:1px solid var(--line);padding:1px 4px;margin-left:5px;vertical-align:2px;
}
.menu-toggle{
  display:none;gap:10px;align-items:center;min-height:42px;padding:8px 12px;
  background:transparent;border:1px solid var(--line);border-radius:var(--radius);
  font-size:14px;font-weight:500;
}

/* --- 6. Hero ------------------------------------------------------------- */
.hero{
  display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center;
  padding-block:clamp(48px,6vw,80px);
}
.intro{margin-bottom:26px}
.hero-copy>p{color:var(--zinc);font-size:17px;line-height:1.75;max-width:460px;margin-bottom:30px}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.hero-actions .outlined-action{min-height:48px}
.hero-note{
  display:flex;gap:10px;align-items:center;
  font-size:14px;color:var(--zinc);margin-top:30px;
}
.mini-camera{color:var(--signal-ink);font-size:16px}

/* Rama: carcasă de monitor de inspecție. Petrol pe margini, cadrul în mijloc. */
.vision-panel{
  background:var(--petrol);border:1px solid var(--petrol-deep);
  border-radius:var(--radius);overflow:hidden;
  box-shadow:0 20px 50px rgba(20,56,63,.16);
}
.panel-top{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 14px;font-family:var(--mono);font-size:10px;
  letter-spacing:.07em;text-transform:uppercase;color:#BFD0D3;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.panel-top>span:first-child{display:inline-flex;align-items:center;gap:8px}
.sample-tag{
  background:transparent;border-color:rgba(255,255,255,.22);
  border-left-color:var(--signal);color:var(--signal);
  padding:3px 8px 3px 6px;font-size:9px;
}
.hero-media{position:relative;background:#DDD9D1;aspect-ratio:1.43;overflow:hidden}
.conveyor{width:100%;height:100%;display:block}
/* Ciclu continuu de detecție, de 6 secunde: baleiajul coboară prin cadru,
   fiecare chenar se desenează exact când linia ajunge la el, apoi totul se
   stinge și ciclul reîncepe. Întârzierile sunt proporționale cu y-ul fiecărui
   obiect în viewBox-ul de 460, deci ordinea urmează fizic linia de baleiaj.
   pathLength="1" face ca dasharray:1 să însemne „tot conturul", la orice mărime. */
.hero-det{stroke-dasharray:1;stroke-dashoffset:1;animation:hero-draw 6s cubic-bezier(.3,.7,.3,1) infinite}
.hero-dets .hero-det:nth-child(1){animation-delay:.91s}  /* y=268, cel mai de jos */
.hero-dets .hero-det:nth-child(2){animation-delay:.74s}  /* y=218 */
.hero-dets .hero-det:nth-child(3){animation-delay:.40s}  /* y=119 */
.hero-dets .hero-det:nth-child(4){animation-delay:.24s}  /* y=72, primul atins */
.hero-det-defect{animation-delay:.57s}                   /* y=168 */
.hero-tags{opacity:0;animation:hero-tag 6s .30s ease-out infinite}
@keyframes hero-draw{
  0%,3%{stroke-dashoffset:1;opacity:1}
  15%{stroke-dashoffset:0;opacity:1}
  86%{stroke-dashoffset:0;opacity:1}
  96%,100%{stroke-dashoffset:0;opacity:0}
}
@keyframes hero-tag{0%,5%{opacity:0}14%{opacity:1}84%{opacity:1}94%,100%{opacity:0}}
.camera-label{
  position:absolute;top:12px;left:12px;font-size:9px;padding:3px 7px 3px 6px;
  background:color-mix(in srgb,var(--paper) 90%,transparent);
}
.camera-label span{color:var(--signal);margin:0 5px}
/* Baleiajul senzorului. Procentele sunt pe `top`, nu pe transform: elementul
   are 1px, deci transform:translateY(%) s-ar raporta la propria înălțime. */
/* Baleiajul conduce ciclul: coboară în prima pătrime a celor 6 secunde, apoi
   dispare și așteaptă. Procentele sunt pe `top`, nu pe transform: elementul are
   2px, deci transform:translateY(%) s-ar raporta la propria înălțime. */
.scan-line{
  position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--signal) 20%,var(--signal) 80%,transparent);
  box-shadow:0 0 12px 1px rgba(227,154,12,.55);
  animation:scan 6s cubic-bezier(.45,.05,.55,.95) infinite;
}
@keyframes scan{
  0%{top:0;opacity:0}
  4%{opacity:1}
  22%{opacity:1}
  26%,100%{top:100%;opacity:0}
}
.detection-note{
  position:absolute;bottom:14px;left:14px;right:14px;
  display:flex;align-items:center;gap:12px;
  background:color-mix(in srgb,var(--paper) 95%,transparent);
  border-left:3px solid var(--signal);padding:11px 14px;
}
.detect-icon{color:var(--signal-ink);font-size:24px;line-height:1}
.detection-note strong{display:block;font-size:13px}
.detection-note div>span{display:block;color:var(--zinc);font-size:11px}
.panel-bottom{display:grid;grid-template-columns:repeat(3,1fr);padding:18px 6px 14px}
.panel-bottom>div{padding-inline:14px;border-right:1px solid rgba(255,255,255,.12)}
.panel-bottom>div:last-child{border-right:0}
.panel-bottom span{
  display:block;font-family:var(--mono);font-size:11px;letter-spacing:.04em;
  text-transform:uppercase;color:#AFC4C8;margin-bottom:5px;
}
.panel-bottom strong{
  font-family:var(--display);font-stretch:85%;font-size:26px;
  letter-spacing:-.02em;color:var(--paper);
}
.panel-bottom small{font-family:var(--body);font-size:12px;font-weight:400;color:#AFC4C8}
.panel-bottom .green{color:#6ECFA4}
.panel-bottom .orange{color:var(--signal)}
.simulation-note{font-size:12px;line-height:1.5;color:#A8BFC3;text-align:center;margin:0 14px 14px}

/* --- 7. Capabilități ----------------------------------------------------- */
.capabilities{
  display:grid;grid-template-columns:1.25fr repeat(3,1fr);gap:28px;
  align-items:start;border-top:1px solid var(--line);padding:34px 0 40px;
}
.cap-intro{font-size:17px;color:var(--zinc);line-height:1.6}
.cap-intro strong{color:var(--graphite);font-weight:600}
.capabilities>div:not(:first-child){padding-left:22px;border-left:1px solid var(--line)}
.cap-icon{display:block;color:var(--signal-ink);font-size:22px;line-height:1;margin-bottom:12px}
.capabilities h2{
  font-family:var(--body);font-stretch:normal;font-size:16px;font-weight:600;
  letter-spacing:0;margin:0 0 7px;
}
.capabilities p{color:var(--zinc);font-size:14px;line-height:1.6;margin:0}

/* --- 8. Titluri de secțiune ---------------------------------------------- */
.section-heading{
  display:flex;align-items:end;justify-content:space-between;gap:32px;margin-bottom:34px;
}
.section-heading h2{margin-bottom:0}
.section-heading>p{font-size:15px;color:var(--zinc);margin-bottom:5px;line-height:1.7}

/* --- 9. Industrii -------------------------------------------------------- */
.industries{background:var(--concrete);border-block:1px solid var(--line)}
/* Propoziție întreagă, nu etichetă: rămâne text curent, nu cip mono. */
.grid-hint{font-size:15px;color:var(--zinc);margin:0 0 26px}
.industry-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 22px}
.industry-card{
  display:flex;flex-direction:column;min-width:0;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;
  transition:border-color .22s,transform .28s cubic-bezier(.2,.6,.3,1),box-shadow .28s;
}
.industry-card:hover,.industry-card:focus-within{
  border-color:var(--graphite);transform:translateY(-5px);
  box-shadow:0 16px 34px rgba(28,34,38,.13);
}
.preview-button{
  display:block;position:relative;width:100%;padding:0;flex-shrink:0;
  border:0;border-bottom:1px solid var(--line);background:var(--concrete);
  cursor:zoom-in;aspect-ratio:600/338;overflow:hidden;
}
/* Fără colțuri de chenar aici: ilustrația își animă deja propriile detecții,
   iar un al doilea set de mânere peste ea ar fi aceeași idee spusă de două ori.
   Limbajul de chenar rămâne unde poartă informație — în hero și în simulator. */
.card-media{display:block;width:100%;height:100%}

/* Bara care urcă peste preview: spune ce face clicul, fără să inventeze date. */
.preview-hint{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  padding:26px 14px 12px;text-align:left;
  background:linear-gradient(transparent,rgba(13,39,44,.9) 55%);
  color:var(--paper);font-size:14px;font-weight:600;
  opacity:0;transform:translateY(12px);
  transition:opacity .22s ease-out,transform .22s ease-out;
}
.preview-button:hover .preview-hint,.preview-button:focus-visible .preview-hint{opacity:1;transform:none}
.card-media .loaded-media{width:100%;height:100%;object-fit:cover;max-height:none;transition:transform .45s cubic-bezier(.2,.6,.3,1)}
.preview-button:hover .loaded-media,.preview-button:focus-visible .loaded-media{transform:scale(1.07)}
.expand-preview{
  position:absolute;right:10px;top:10px;z-index:4;
  width:38px;height:38px;font-size:20px;line-height:34px;
  background:var(--paper);color:var(--graphite);
  border:1px solid var(--line);border-radius:var(--radius);
  transition:background .18s,color .18s,border-color .18s,transform .18s;
}
.preview-button:hover .expand-preview,.preview-button:focus-visible .expand-preview{background:var(--signal);border-color:var(--signal);color:var(--graphite);transform:scale(1.08)}
.card-copy{display:flex;flex-direction:column;flex:1;padding:20px 22px}
.card-copy h3{font-size:21px;margin:0 0 13px}
/* Nouă carduri, deci nouă butoane conturate ar deveni zgomot. Aici acțiunea
   devine link: aceeași suprafață de atingere, fără a noua ramă. */
.card-copy .card-detail{
  align-self:flex-start;margin-top:auto;
  padding:10px 0;border:0;color:var(--graphite);
  border-bottom:1px solid var(--line);border-radius:0;
}
.card-copy .card-detail:hover{background:transparent;border-bottom-color:var(--signal);color:var(--signal-ink)}
.loaded-media{display:block;width:100%;height:100%;max-height:520px;object-fit:contain;background:var(--concrete)}

/* Context demo: trei perechi etichetă/valoare, în registru de fișă tehnică. */
.demo-context{margin:0 0 18px;font-size:14px}
.demo-context>div{margin:0 0 12px;padding-left:11px;border-left:1px solid var(--line-soft)}
.demo-context>div:last-child{margin-bottom:0}
/* Zinc, nu chihlimbar: eticheta se repetă de 27 ori în grilă, iar semnalul
   trebuie să rămână rezervat marcajelor de detecție și stărilor active. */
.demo-context dt{
  font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--zinc);margin-bottom:4px;
}
.demo-context dd{margin:0;color:var(--zinc);line-height:1.65}

/* --- 10. Integrare: simulatorul de flux ----------------------------------
   Trei etape legate, cu o bandă care chiar se mișcă. Poziția obiectelor vine
   din JS printr-o singură proprietate, --t (0 = intrare în cadru, 1 = ieșire);
   restul, inclusiv oprirea liniei, este stare CSS. */
.pipeline{margin:32px 0 22px}

/* Singura comandă rămasă: pauza, cerută de WCAG 2.2.2 pentru orice mișcare
   mai lungă de 5 secunde. Mică, lângă titlul camerei, nu o bară de reglaje. */
.pipe-play{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;margin-left:auto;padding:0;flex-shrink:0;
  background:transparent;color:var(--graphite);
  border:1px solid var(--line);border-radius:var(--radius);
  transition:background .18s,border-color .18s;
}
.pipe-play:hover{background:var(--signal-wash);border-color:var(--signal)}
/* Două bare verticale = pauză; triunghi = pornire. Un singur element, două stări. */
.pipe-play-icon{
  width:11px;height:13px;flex-shrink:0;
  background:linear-gradient(90deg,currentColor 0 36%,transparent 36% 64%,currentColor 64%);
}
.is-paused .pipe-play-icon{background:currentColor;clip-path:polygon(8% 0,100% 50%,8% 100%)}
.pipe-group-label{font-size:13px;font-weight:600;color:var(--zinc)}
.pipe-choice{display:flex;flex-wrap:wrap;gap:6px}
.pipe-choice button{
  min-height:38px;padding:8px 13px;
  background:transparent;color:var(--graphite);
  border:1px solid var(--line);border-radius:var(--radius);
  font-size:14px;font-weight:500;
  transition:background .18s,border-color .18s,color .18s;
}
.pipe-choice button:hover{border-color:var(--signal);background:var(--signal-wash)}
.pipe-choice button[aria-pressed=true]{
  background:var(--graphite);border-color:var(--graphite);color:var(--paper);
}

.pipeline-stages{
  display:grid;grid-template-columns:repeat(3,1fr);gap:40px;
  list-style:none;padding:0;margin:0 0 20px;
}
.stage{
  position:relative;display:flex;flex-direction:column;
  padding:20px 20px 22px;
  background:var(--paper);border:1px solid var(--line);border-top:2px solid var(--graphite);
}
/* Săgeata dintre etape se aprinde o dată, când un obiect tocmai a fost detectat. */
.stage:not(:last-child)::after{
  content:'→';position:absolute;right:-30px;top:44%;
  font-size:20px;color:var(--line);transition:color .2s;
}
.is-passing .stage:not(:last-child)::after{animation:pass 1s cubic-bezier(.3,.7,.3,1)}
@keyframes pass{
  0%{color:var(--signal);transform:translateX(-10px) scale(1.35)}
  45%{color:var(--signal);transform:translateX(10px) scale(1.35)}
  100%{color:var(--line);transform:none}
}
/* Pulsul CĂLĂTOREȘTE: etapa 1 se aprinde prima, apoi 2, apoi 3. Aprinse toate
   odată ar fi o clipire; decalate, se citește ca un rezultat care înaintează. */
.is-passing .stage{animation:stage-hit .75s ease-out}
.is-passing .stage:nth-child(2){animation-delay:.16s}
.is-passing .stage:nth-child(3){animation-delay:.32s}
.is-passing .stage:nth-child(2)::after{animation-delay:.16s}
@keyframes stage-hit{0%,45%{border-top-color:var(--signal)}100%{border-top-color:var(--graphite)}}
.stage-head{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.stage-index{
  display:grid;place-items:center;width:24px;height:24px;flex-shrink:0;
  background:var(--graphite);color:var(--paper);
  font-family:var(--mono);font-size:12px;
}
.stage-head h3{font-size:18px;margin:0}
.stage>p{font-size:15px;color:var(--zinc);line-height:1.7;margin:0 0 4px}
.stage .flow-example{margin-top:auto}

/* ---- Etapa 1: cadrul camerei --------------------------------------------- */
.pipe-frame{
  position:relative;overflow:hidden;margin-bottom:16px;
  aspect-ratio:16/10;background:var(--petrol);border:1px solid var(--petrol-deep);
}
.pipe-belt{
  position:absolute;left:-10%;right:-10%;top:22%;height:58%;
  background:repeating-linear-gradient(115deg,#2C565E 0 9px,#33616A 9px 18px);
  border-block:1px solid #47737B;
}
/* Linia de detecție e reperul întregii explicații: trebuie citită dintr-o privire. */
.pipe-roi{position:absolute;left:60%;top:0;bottom:0;width:0;border-left:2px dashed var(--signal)}
.pipe-roi span{
  position:absolute;left:6px;bottom:6px;white-space:nowrap;
  font-family:var(--mono);font-size:8px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--signal);
}
.pipe-objects{position:absolute;inset:0}
/* --t vine din JS; 118%/-9% lasă obiectul să intre și să iasă din cadru. */
.pipe-obj{
  position:absolute;top:calc(50% + var(--lane,0) * 7%);
  left:calc(var(--t) * 118% - 9%);
  width:18%;aspect-ratio:1.5;transform:translate(-50%,-50%);
  cursor:crosshair;
}
.pipe-obj-body{
  position:absolute;inset:16% 4%;border-radius:50%;
  background:radial-gradient(ellipse at 34% 28%,#E8EDEF 0 18%,#AEBEC4 55%,#6E848D 100%);
  box-shadow:0 3px 7px rgba(6,22,26,.4);
}
.pipe-obj-body::after{
  content:'';position:absolute;inset:36% 38%;border-radius:50%;background:#5B7480;
}
.pipe-obj-box{
  position:absolute;inset:0;border:1.5px solid #6FA3AC;
  opacity:0;transform:scale(.84);
  transition:opacity .18s ease-out,transform .18s ease-out;
}
.pipe-obj.is-detected .pipe-obj-box{opacity:1;transform:scale(1)}
.pipe-obj.is-defect .pipe-obj-box{border-color:var(--signal);border-width:2px;background:#E39A0C24}
.pipe-obj-tag{
  position:absolute;left:-1.5px;bottom:100%;white-space:nowrap;
  padding:2px 5px;background:#6FA3AC;color:var(--petrol-deep);
  font-family:var(--mono);font-size:9px;line-height:1.5;
}
.pipe-obj.is-defect .pipe-obj-tag{background:var(--signal);color:var(--graphite)}
.pipe-scan{
  position:absolute;top:0;left:0;width:1px;height:100%;
  background:linear-gradient(180deg,transparent,var(--signal),transparent);
  animation:sweep 4.5s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes sweep{0%,100%{left:2%}50%{left:98%}}
.pipe-cam{
  position:absolute;top:7px;left:8px;
  font-family:var(--mono);font-size:9px;letter-spacing:.06em;
  text-transform:uppercase;color:#9FB6BA;
}
.pipe-halt{
  position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(13,39,44,.72);color:var(--signal);
  font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  opacity:0;transition:opacity .15s;pointer-events:none;
}
.is-halted .pipe-halt{opacity:1}
.is-halted .pipe-scan,.is-paused .pipe-scan{animation-play-state:paused}

/* ---- Etapele 2 și 3: panourile de date ----------------------------------- */
.pipe-panel{
  margin-bottom:16px;background:var(--petrol);border:1px solid var(--petrol-deep);
  aspect-ratio:16/10;display:flex;flex-direction:column;overflow:hidden;
}
.pipe-panel-head,.pipe-row{
  display:grid;grid-template-columns:1fr 1fr auto;gap:10px;
  padding:7px 12px;font-family:var(--mono);font-size:12px;
}
.pipe-panel-head{
  color:#8FA8AD;letter-spacing:.07em;text-transform:uppercase;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.pipe-track{list-style:none;margin:0;padding:4px 0;overflow:hidden}
.pipe-row{color:#CBDADD;animation:rowin .2s ease-out}
@keyframes rowin{from{opacity:0;transform:translateY(-4px)}}
.pipe-row-score{text-align:right;color:#A8BFC3}
.pipe-row.is-detected{color:var(--paper)}
.pipe-row.is-detected .pipe-row-score{color:#6FA3AC}
.pipe-row.is-defect,.pipe-row.is-defect .pipe-row-score{color:var(--signal)}

.pipe-totals{
  display:grid;grid-template-columns:repeat(3,1fr);margin:0;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.pipe-totals>div{padding:9px 11px;border-right:1px solid rgba(255,255,255,.12)}
.pipe-totals>div:last-child{border-right:0}
.pipe-totals dt{
  font-family:var(--mono);font-size:11px;letter-spacing:.03em;
  text-transform:uppercase;color:#A8BFC3;margin-bottom:3px;
}
.pipe-totals dd{
  margin:0;font-family:var(--display);font-stretch:85%;font-weight:700;
  font-size:22px;letter-spacing:-.02em;color:var(--paper);
}
.pipe-totals .is-flagged{color:var(--signal)}
.pipe-log{list-style:none;margin:0;padding:6px 0;overflow:hidden}
.pipe-entry{
  display:grid;grid-template-columns:auto auto 1fr auto;gap:7px;align-items:baseline;
  padding:6px 12px;font-family:var(--mono);font-size:12px;
  color:var(--paper);white-space:nowrap;
  animation:entryin .28s ease-out;
}
@keyframes entryin{from{opacity:0;transform:translateX(-8px)}}
.pipe-entry-mark{color:var(--signal)}
.pipe-entry-time,.pipe-entry-id{color:#A8BFC3}
.pipe-entry-text{overflow:hidden;text-overflow:ellipsis}

.pipe-meter{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin:0 0 4px;padding-top:10px;border-top:1px solid var(--line-soft);
  font-size:13px;color:var(--zinc);
}
.pipe-meter strong{font-family:var(--mono);font-size:16px;color:var(--graphite)}
.pipe-disclaimer{
  font-size:13px;line-height:1.7;color:var(--zinc);
  max-width:830px;margin:0 0 22px;padding-left:11px;border-left:2px solid var(--line);
}

.flow-example{
  display:block;margin-top:16px;padding-top:12px;border-top:1px solid var(--line-soft);
  font-size:13px;line-height:1.6;color:var(--zinc);
}
.flow-note{font-size:15px;line-height:1.7;color:var(--zinc);max-width:760px;margin:0}

/* --- 11. Proces: matricea de responsabilități ---------------------------
   Rânduri = pași (secvență reală, deci numerotarea 01–05 rămâne), coloane =
   roluri. Totul încape într-un singur ecran de citit, fără coloană fixă și
   fără o listă lungă derulată lângă ea. */
.process-intro{
  display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:end;margin-bottom:44px;
}
.process-intro h2{font-size:clamp(28px,3vw,40px)}
.process-intro>div>p{max-width:520px;color:var(--zinc);font-size:15px;margin:18px 0 22px}
.process-example{background:var(--concrete);border-left:3px solid var(--signal);padding:20px 22px}
.process-example h3{font-size:16px;margin-bottom:9px}
.process-example p{font-size:15px;color:var(--zinc);line-height:1.7;margin:0}

/* Cine face ce. Trei roluri, trei semne: pătrat gol = tu, plin = noi,
   pe jumătate = împreună. Cheia e în formă, nu în culoare, deci chihlimbarul
   rămâne rezervat detecțiilor, iar rolurile se citesc și în alb-negru. */
.role-filter{margin-bottom:22px;display:flex;flex-direction:column;gap:8px;overflow-anchor:none}
.role-summary{font-size:14px;color:var(--zinc);line-height:1.6;margin:4px 0 0;min-height:1.6em}
.role-chip{
  display:inline-flex;align-items:center;gap:7px;
  font-size:13px;font-weight:600;color:var(--graphite);white-space:nowrap;
}
.role-chip::before{
  content:'';width:10px;height:10px;flex-shrink:0;
  border:1.5px solid var(--petrol);
}
[data-role=noi] .role-chip::before{background:var(--petrol)}
[data-role=impreuna] .role-chip::before{background:linear-gradient(90deg,var(--petrol) 50%,transparent 50%)}

.resp-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:14px;line-height:1.6}
.resp-table thead th{
  text-align:left;padding:0 18px 12px;border-bottom:2px solid var(--graphite);
}
.resp-table thead th:first-child{width:31%;padding-left:0}
.resp-table tbody th,.resp-table td{
  text-align:left;vertical-align:top;padding:20px 18px;border-bottom:1px solid var(--line);
  transition:opacity .2s,background .2s;
}
.resp-table tbody th{padding-left:0;font-weight:400}
.resp-table td{border-left:1px solid var(--line-soft)}
.resp-table tbody th h3{font-size:17px;margin:0 0 6px}
/* Bara de deasupra numărului e un indicator de parcurs: gri până când pasul
   ajunge în mijlocul ecranului, chihlimbar după. */
.resp-num{
  display:block;width:26px;margin-bottom:8px;padding-top:4px;
  font-family:var(--mono);font-size:12px;color:var(--zinc);
  border-top:2px solid var(--line);transition:color .4s,border-color .4s;
}
.resp-table tr.is-active .resp-num{color:var(--signal-ink);border-top-color:var(--signal)}
.step-output{display:block;margin-top:8px;font-size:13px;font-weight:500;color:var(--zinc);line-height:1.5}
/* Eticheta de rol din celulă e pentru telefon, unde antetul coloanei dispare. */
.resp-cell-label{display:none}
/* Filtrat pe desktop: coloana aleasă rămâne pe loc și se evidențiază, celelalte
   se estompează. Nimic nu dispare, deci pagina nu sare. */
.resp-table[data-show] td:not(.is-shown),
.resp-table[data-show] thead th[data-role]:not(.is-shown){opacity:.3}
.resp-table[data-show] td.is-shown{background:var(--concrete)}

/* --- 11b. Datele clientului ----------------------------------------------
   Ciclul de viață este o secvență reală, deci o linie continuă îl leagă.
   Linia se termină cu un semn de tăiere: după ștergere nu mai urmează nimic. */
.lifecycle{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  list-style:none;padding:0;margin:8px 0 0;
}
.lifecycle li{position:relative;padding:22px 26px 0 0;border-top:2px solid var(--graphite)}
.lifecycle li::before{
  content:'';position:absolute;left:0;top:-7px;width:2px;height:12px;background:var(--graphite);
}
.lifecycle li:last-child::after{
  content:'';position:absolute;right:0;top:-9px;width:2px;height:16px;background:var(--graphite);
}
.life-label{
  display:block;margin-bottom:8px;
  font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--zinc);
}
.lifecycle h3{font-size:18px;margin:0 0 8px}
.lifecycle p{font-size:15px;color:var(--zinc);line-height:1.7;margin:0}
.data-columns{display:grid;grid-template-columns:1fr 1fr;gap:56px;margin-top:64px}
.data-columns h3{font-size:18px;margin:0 0 14px}
.data-columns ul{list-style:none;padding:0;margin:0 0 14px}
.data-columns li{
  display:flex;gap:14px;align-items:baseline;
  padding:11px 0;border-top:1px solid var(--line);font-size:15px;line-height:1.55;
}
.data-columns li:last-child{border-bottom:1px solid var(--line)}
.data-columns>div>p{font-size:14px;color:var(--zinc);margin:0}
.not-built li::before{content:'✕';flex-shrink:0;width:26px;color:var(--flag);font-size:13px}
.in-writing li>span{
  flex-shrink:0;width:26px;font-family:var(--mono);font-size:12px;color:var(--zinc);
}
.data-links{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin:44px 0 0}

/* --- 12. Calculator ------------------------------------------------------ */
.calculator-section{background:var(--concrete);border-block:1px solid var(--line)}
.calculator-presets{
  margin:0 0 28px;padding:22px 24px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
}
.calculator-presets h3{font-size:16px;margin:0 0 14px}
.preset-options{display:flex;flex-wrap:wrap;gap:9px}
.preset-options [aria-pressed=true]{
  background:var(--graphite);border-color:var(--graphite);color:var(--paper);
}
.calculator-presets p{font-size:15px;line-height:1.7;color:var(--zinc);margin:15px 0}
.calculator-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:start}
.calculator-controls{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:28px;
}
.range-control{margin-bottom:26px}
.range-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.range-heading label{font-weight:600;font-size:15px}
.range-heading output{
  font-family:var(--mono);font-size:14px;color:var(--graphite);
  background:var(--signal-wash);border:1px solid var(--line);
  padding:3px 9px;white-space:nowrap;
}
.range-control input[type=range]{
  --range-fill:0%;
  display:block;width:100%;height:24px;padding:0;margin:0;border:0;
  appearance:none;-webkit-appearance:none;background:transparent;cursor:pointer;
}
.range-control input[type=range]::-webkit-slider-runnable-track{
  height:4px;background:linear-gradient(to right,var(--graphite) var(--range-fill),var(--line) var(--range-fill));
}
.range-control input[type=range]::-webkit-slider-thumb{
  appearance:none;-webkit-appearance:none;width:9px;height:22px;margin-top:-9px;
  background:var(--signal);border:1px solid var(--signal-ink);border-radius:1px;
}
.range-control input[type=range]::-moz-range-track{height:4px;background:var(--line)}
.range-control input[type=range]::-moz-range-progress{height:4px;background:var(--graphite)}
.range-control input[type=range]::-moz-range-thumb{
  width:9px;height:22px;background:var(--signal);border:1px solid var(--signal-ink);border-radius:1px;
}
.range-scale{display:flex;justify-content:space-between;font-size:12px;color:var(--zinc);margin:5px 0 9px}
.range-control p{font-size:14px;color:var(--zinc);margin:0;line-height:1.6;min-height:44px}
.precision-help{font-size:15px;color:var(--zinc);border-top:1px solid var(--line);padding:16px 0;margin-bottom:16px}
.precision-help summary{cursor:pointer;font-weight:600;color:var(--graphite);padding:0 30px 8px 0}
.precision-help p{margin:10px 0;line-height:1.75}
.precision-help ul{padding-left:19px}
.precision-help li{margin:8px 0}
.precision-help strong{color:var(--graphite)}

.calculator-result{padding-top:4px}
.estimate-badge{margin-bottom:26px}
.estimate-label{display:block;font-size:14px;font-weight:600;color:var(--zinc);margin-bottom:8px}
.estimate-price{
  display:block;font-family:var(--display);font-stretch:85%;font-weight:700;
  font-size:clamp(34px,3.4vw,50px);line-height:1.05;letter-spacing:-.03em;
  color:var(--graphite);white-space:nowrap;
}
.estimate-unit{font-size:13px;color:var(--zinc)}
.monthly-estimate{
  display:flex;justify-content:space-between;align-items:end;gap:16px;
  border-block:1px solid var(--line);padding:20px 0;margin:22px 0;
}
.monthly-estimate strong{
  font-family:var(--display);font-stretch:85%;font-size:28px;letter-spacing:-.03em;
}
.monthly-estimate>span{font-size:13px;line-height:1.5;color:var(--zinc);text-align:right}
.estimate-explanation,.estimate-exclusions{font-size:14px;color:var(--zinc);line-height:1.7}
.estimate-explanation strong{color:var(--graphite)}
.estimate-exclusions{font-size:13px}
.calculator-result .button{width:100%;margin:8px 0 16px}
.discount-note{border-top:1px solid var(--line);padding:20px 0 4px;margin:22px 0 16px}
.discount-note h3{font-size:17px;line-height:1.45;margin:0 0 11px}
.discount-note p{font-size:15px;line-height:1.7;color:var(--zinc);margin:0 0 13px}
.discount-note p:last-child{margin-bottom:0}
.calculator-formula{
  margin-top:28px;padding-top:20px;border-top:1px solid var(--line);
  font-size:15px;color:var(--zinc);
}
.calculator-formula summary{cursor:pointer;font-weight:600;color:var(--graphite);padding:4px 30px 4px 0}

/* Un singur limbaj de desfășurare în toată pagina: +/− , nu triunghiul nativ. */
.faq summary,.precision-help summary,.calculator-formula summary{position:relative;list-style:none}
.faq summary::-webkit-details-marker,
.precision-help summary::-webkit-details-marker,
.calculator-formula summary::-webkit-details-marker{display:none}
.precision-help summary::after,.calculator-formula summary::after{
  content:'+';position:absolute;right:2px;top:-2px;
  font-size:19px;font-weight:400;color:var(--signal-ink);
}
.precision-help[open] summary::after,.calculator-formula[open] summary::after{content:'−'}
.calculator-formula p{max-width:880px;margin:14px 0 0;line-height:1.85}
.calculator-formula strong{color:var(--graphite)}
#calc-formula p{font-family:var(--mono);font-size:13px;line-height:1.9}

/* --- 13. FAQ ------------------------------------------------------------- */
.faq-layout{display:grid;grid-template-columns:1fr 1.1fr;gap:72px}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{
  position:relative;padding:19px 34px 19px 0;cursor:pointer;
  font-weight:600;font-size:17px;list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:'+';position:absolute;right:4px;top:15px;
  font-size:20px;font-weight:400;color:var(--signal-ink);
}
.faq details[open] summary::after{content:'−'}
.faq details p{color:var(--zinc);font-size:15px;line-height:1.75;padding-right:30px}

/* --- 14. Contact (suprafață „ecran") ------------------------------------- */
.contact-section{background:var(--petrol);color:var(--paper);padding-block:var(--gap)}
.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:80px}
.contact-section .section-kicker{
  background:transparent;color:var(--signal);
  border-color:rgba(255,255,255,.22);border-left-color:var(--signal);
}
.contact-section h2{font-size:clamp(28px,3vw,40px)}
.contact-section p{color:#C6D6D9;font-size:16px;line-height:1.7;max-width:420px}
.contact-detail{
  display:inline-flex;align-items:center;gap:10px;margin-top:36px;
  font-size:14px;color:#C6D6D9;
}
.contact-detail span{color:var(--signal);font-size:16px}
form label{display:block;margin-bottom:8px;font-size:14px;font-weight:600}
input,textarea{
  width:100%;padding:13px 14px;margin-bottom:16px;font-size:16px;
  background:rgba(255,255,255,.06);color:var(--paper);
  border:1px solid rgba(255,255,255,.22);border-radius:var(--radius);
  transition:border-color .18s,background .18s;
}
input:hover,textarea:hover{border-color:rgba(255,255,255,.4)}
input::placeholder,textarea::placeholder{color:#A8BFC3}
textarea{resize:vertical;min-height:92px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.contact-section .form-note{font-size:13px;line-height:1.6;max-width:none;margin:-6px 0 18px}
.contact-section .contact-guidance{
  font-size:14px;line-height:1.65;color:var(--paper);max-width:none;
  border-left:3px solid var(--signal);padding-left:13px;margin:6px 0 14px;
}
.contact-guidance[hidden]{display:none}
.contact-section .button{  width:100%;
  background:var(--signal);border-color:var(--signal);color:var(--graphite);
}
.contact-section .button:hover{background:var(--paper);border-color:var(--paper)}
#form-status{margin:10px 0 0;font-size:14px;font-weight:600;color:var(--signal)}
.contact-section .form-privacy{font-size:13px;line-height:1.6;max-width:none;margin:14px 0 0}
.form-privacy a{color:var(--paper);text-decoration:underline;text-underline-offset:3px}
.form-privacy a:hover{color:var(--signal)}

/* --- 15. Subsol ---------------------------------------------------------- */
.site-footer{border-top:1px solid var(--line);padding:40px 0 30px}
.footer-top{display:flex;flex-wrap:wrap;align-items:start;justify-content:space-between;gap:24px 48px}
.footer-brand .brand{font-size:23px}
.footer-brand p{font-size:14px;color:var(--zinc);margin:6px 0 0}
.footer-legal{display:flex;flex-wrap:wrap;gap:8px 26px;font-size:14px;font-weight:500;max-width:620px}
.footer-legal a{padding:4px 0}
.footer-legal a:hover,.footer-legal a[aria-current=page]{color:var(--signal-ink)}
.footer-legal a[aria-current=page]{text-decoration:underline;text-underline-offset:4px}
.footer-id{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 32px;
  margin-top:30px;padding-top:18px;border-top:1px solid var(--line-soft);
  font-size:13px;color:var(--zinc);
}
.footer-id p{margin:0}
.footer-id a{font-weight:600;color:var(--graphite)}
.footer-id a:hover{color:var(--signal-ink)}
/* Date lipsă din config.js: vizibile intenționat, ca să nu treacă neobservate. */
.is-missing{
  background:var(--signal-wash);color:var(--signal-ink);
  outline:1px dashed var(--signal);outline-offset:1px;padding:0 4px;
}

/* --- 16. Dialoguri ------------------------------------------------------- */
dialog{
  border:1px solid var(--line);border-radius:var(--radius);
  max-width:600px;width:calc(100% - 40px);padding:34px;
  background:var(--paper);color:var(--graphite);
}
dialog::backdrop{background:rgba(20,56,63,.62);backdrop-filter:blur(4px)}
dialog h2{font-size:27px;padding-right:26px}
dialog p{font-size:15px;line-height:1.7;color:var(--zinc)}
dialog pre{
  font:13px/1.7 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;
  background:var(--concrete);border-left:3px solid var(--signal);
  padding:18px;max-height:40vh;overflow:auto;
}
dialog .text-link{margin-top:18px}
dialog [hidden]{display:none}
.dialog-close,.media-close{
  position:absolute;right:14px;top:12px;z-index:2;
  min-width:40px;min-height:40px;font-size:22px;line-height:1;
  background:var(--paper);color:var(--graphite);
  border:1px solid var(--line);border-radius:var(--radius);
}
.dialog-close:hover,.media-close:hover{background:var(--signal-wash);border-color:var(--signal)}
.modal-open{overflow:hidden}
#media-dialog{
  width:min(1040px,calc(100% - 40px));max-width:1040px;max-height:92dvh;
  padding:0;overflow:auto;
}
#media-dialog::backdrop{background:rgba(13,39,44,.74);backdrop-filter:blur(6px)}
.media-close{top:14px}
#expanded-media{aspect-ratio:600/338;background:var(--concrete);border-bottom:1px solid var(--line)}
#expanded-media .loaded-media{width:100%;height:100%;max-height:none;object-fit:contain}
.media-description{padding:26px 32px 30px}
.media-description h2{font-size:26px;margin-bottom:14px}
.media-description .section-kicker{margin-bottom:12px}
.media-description>p{max-width:700px;margin-bottom:14px;font-size:16px;line-height:1.7;color:var(--zinc)}
.media-description .demo-context{
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
  padding:20px 0;border-block:1px solid var(--line);margin-bottom:18px;
}
.media-description .demo-context>div{margin:0}
.usecases{list-style:none;padding:0;margin:16px 0 22px;font-size:15px}
.usecases li{display:flex;gap:10px;align-items:baseline;padding:5px 0}
.usecases li::before{content:'✓';color:var(--signal-ink);font-family:var(--mono);font-size:11px}
.media-description .usecases{display:flex;flex-wrap:wrap;gap:4px 24px;margin:0 0 20px;font-size:12px}
#media-dialog .media-description .text-link{margin-top:0}

/* --- 16b. Pagini legale -------------------------------------------------
   Același sistem, alt ritm: coloană de lectură de ~68 de caractere, cuprins
   fix în stânga și un rezumat „Pe scurt" înaintea textului complet. */
.nav-simple{display:flex;align-items:center;gap:22px;font-size:14px;font-weight:500}
.nav-simple>a:not(.button):hover{color:var(--signal-ink)}
.legal-hero{padding:clamp(40px,5vw,64px) 0 36px;border-bottom:1px solid var(--line)}
.legal-hero h1{font-size:clamp(32px,3.6vw,48px);margin-bottom:14px}
.legal-hero>p{max-width:640px;color:var(--zinc);font-size:17px;line-height:1.7;margin:0}
/* Aceeași specificitate ca .legal-hero>p, declarată după ea: altfel paragraful general o suprascrie. */
.legal-hero>.legal-meta{
  display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:22px;
  font-family:var(--mono);font-size:12px;line-height:1.6;color:var(--zinc);
}
.legal-layout{
  display:grid;grid-template-columns:230px minmax(0,1fr);gap:64px;
  padding-block:44px var(--gap);
}
.legal-toc{position:sticky;top:110px;align-self:start;font-size:14px}
.legal-toc h2{
  font-family:var(--body);font-stretch:normal;font-size:12px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--zinc);margin:0 0 12px;
}
.legal-toc ol{list-style:none;padding:0;margin:0;border-left:1px solid var(--line)}
.legal-toc a{display:block;padding:6px 0 6px 14px;margin-left:-1px;color:var(--zinc);border-left:2px solid transparent;line-height:1.45}
.legal-toc a:hover{color:var(--graphite)}
.legal-toc a.is-current{color:var(--graphite);border-left-color:var(--signal);font-weight:600}
.legal-body{max-width:68ch}
.legal-summary{
  background:var(--concrete);border-left:3px solid var(--signal);
  padding:22px 26px;margin-bottom:12px;
}
.legal-summary h2{font-family:var(--body);font-stretch:normal;font-size:16px;font-weight:600;letter-spacing:0;margin:0 0 10px}
.legal-summary ul{margin:0;padding-left:18px}
.legal-summary li{font-size:15px;line-height:1.65;margin:5px 0}
.legal-body section{padding-top:30px;scroll-margin-top:100px}
.legal-body section>h2{font-size:24px;margin:0 0 14px;padding-top:26px;border-top:1px solid var(--line)}
.legal-body h3{font-size:17px;margin:22px 0 8px}
.legal-body p,.legal-body li{font-size:16px;line-height:1.75}
.legal-body ul{padding-left:20px}
.legal-body li{margin:4px 0}
.legal-body a:not(.button){color:var(--signal-ink);text-decoration:underline;text-underline-offset:3px}
.legal-body a:not(.button):hover{color:var(--graphite)}
/* Fișa de identificare: perechi etichetă/valoare, aceeași formă ca în carduri. */
.id-sheet{margin:0;border-top:1px solid var(--line)}
.id-sheet>div{display:grid;grid-template-columns:220px 1fr;gap:16px;padding:11px 0;border-bottom:1px solid var(--line)}
.id-sheet>div[hidden]{display:none}
.id-sheet dt{font-size:14px;color:var(--zinc)}
.id-sheet dd{margin:0;font-weight:500;overflow-wrap:anywhere}
.table-scroll{overflow-x:auto;margin:14px 0 8px;border:1px solid var(--line)}
.table-scroll[hidden]{display:none}
.legal-table{width:100%;min-width:600px;border-collapse:collapse;font-size:14px;line-height:1.55}
.legal-table th,.legal-table td{text-align:left;vertical-align:top;padding:11px 14px;border-bottom:1px solid var(--line)}
.legal-table tr:last-child td{border-bottom:0}
.legal-table th{background:var(--concrete);font-weight:600;font-size:13px}
.legal-body .legal-note{font-size:14px;color:var(--zinc);border-left:2px solid var(--line);padding-left:14px}
.legal-other{border-top:1px solid var(--line);padding-block:40px 56px}
.legal-other h2{font-family:var(--body);font-stretch:normal;font-size:16px;font-weight:600;letter-spacing:0;margin:0 0 16px}
.legal-other ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.legal-other a{
  display:block;height:100%;padding:16px 18px;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--radius);
  transition:border-color .18s,background .18s;
}
.legal-other a:hover{border-color:var(--graphite)}
.legal-other strong{display:block;font-size:15px;margin-bottom:4px}
.legal-other span{display:block;font-size:13px;color:var(--zinc);line-height:1.5}

/* --- 17. Responsive ------------------------------------------------------ */
@media (max-width:1100px){
  .wrap{width:calc(100% - 56px)}
  #navigation{gap:20px}
  .hero{gap:32px}
  .capabilities{gap:18px}
  .faq-layout{gap:44px}
  .calculator-layout{gap:32px}
  .contact-layout{gap:48px}
  .industry-grid{gap:20px 16px}
  .card-copy{padding:17px 18px}
  .card-copy h3{font-size:18px}
  /* Cinci coloane nu încap lângă cuprins: fiecare rând devine o fișă etichetă/valoare.
     Etichetele (data-label) sunt copiate din antet de site.js. */
  .table-scroll{overflow:visible;border:0}
  .legal-table{min-width:0}
  .legal-table thead{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden}
  .legal-table tr{display:block;border:1px solid var(--line);margin-bottom:12px}
  .legal-table td{display:grid;grid-template-columns:130px 1fr;gap:14px;padding:9px 14px;border-bottom:1px solid var(--line-soft)}
  .legal-table td::before{content:attr(data-label);font-size:13px;font-weight:600;color:var(--zinc)}
  .legal-table td:first-child{background:var(--concrete);font-weight:600}
  .legal-table tr td:last-child{border-bottom:0}
  .legal-table tr:last-child td:not(:last-child){border-bottom:1px solid var(--line-soft)}
}
@media (max-width:800px){
  .nav{height:70px}
  .menu-toggle{display:inline-flex}
  #navigation{
    display:none;position:absolute;top:70px;left:0;right:0;
    flex-direction:column;align-items:stretch;
    background:var(--paper);border-bottom:1px solid var(--line);padding:22px 28px;
  }
  #navigation.open{display:flex}
  .hero{grid-template-columns:1fr;gap:38px;padding-top:44px}
  .hero-copy,.hero-copy>p{max-width:560px}
  .hero-media{aspect-ratio:1.6}
  .capabilities{grid-template-columns:1fr 1fr;gap:24px;padding-top:30px}
  .capabilities>div:not(:first-child){padding-left:0;border-left:0}
  .section-heading{flex-direction:column;align-items:start;gap:14px}
  .section-heading>p br{display:none}
  .industry-grid{grid-template-columns:1fr;gap:22px}
  .card-copy{padding:22px 24px}
  .pipeline-stages{grid-template-columns:1fr;gap:34px}
  .stage:not(:last-child)::after{
    content:'↓';top:auto;bottom:-29px;right:calc(50% - 7px);
  }
  .faq-layout,.contact-layout{grid-template-columns:1fr;gap:34px}
  .process-intro{grid-template-columns:1fr;gap:26px;margin-bottom:34px}
  /* Pe telefon tabelul devine carduri: un card per pas, cu rolul ales dedesubt.
     Filtrat, rămâne doar acel rol, deci cinci carduri scurte în loc de 15 blocuri. */
  .resp-table,.resp-table tbody,.resp-table tr,.resp-table tbody th,.resp-table td{display:block;width:auto}
  .resp-table thead{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden}
  .resp-table tr{border:1px solid var(--line);background:var(--paper);padding:16px 18px;margin-bottom:12px}
  .resp-table tbody th,.resp-table td{padding:0;border:0}
  .resp-table td{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)}
  .resp-cell-label{display:flex;margin-bottom:4px}
  .resp-table[data-show] td:not(.is-shown){display:none}
  .resp-table[data-show] td.is-shown{background:none;border-top-style:solid;font-size:15px}
  .resp-table[data-show] td.is-shown .resp-cell-label,
  .resp-table[data-show] .step-output{display:none}
  .calculator-layout{grid-template-columns:1fr;gap:14px}
  .calculator-result{padding-top:16px}
  .media-description{padding:22px}
  .media-description .demo-context{grid-template-columns:1fr;gap:0;padding:16px 0}
  .media-description .usecases{display:block}
  #media-dialog{width:calc(100% - 24px)}
  .footer-id{flex-direction:column}
  .lifecycle{grid-template-columns:1fr 1fr;row-gap:34px}
  .data-columns{grid-template-columns:1fr;gap:40px;margin-top:48px}
  .legal-layout{grid-template-columns:1fr;gap:28px;padding-top:28px}
  .legal-toc{position:static}
  .legal-other ul{grid-template-columns:1fr 1fr}
}
@media (max-width:480px){
  .wrap{width:calc(100% - 36px)}
  .hero-copy>p{font-size:15px}
  .hero-actions{gap:12px}
  .hero-actions .button,.hero-actions .outlined-action{width:100%}
  .panel-bottom>div{padding-inline:9px}
  .panel-bottom strong{font-size:22px}
  .detection-note{left:10px;right:10px;bottom:10px;padding:9px 11px}
  .detection-note strong{font-size:11px}
  .detection-note div>span{font-size:10px}
  .capabilities{grid-template-columns:1fr;gap:22px}
  .calculator-controls,.calculator-presets{padding:20px 17px}
  .form-row{grid-template-columns:1fr;gap:0}
  .lifecycle{grid-template-columns:1fr}
  .lifecycle li{padding-right:0}
  .id-sheet>div{grid-template-columns:1fr;gap:2px}
  .legal-table td{grid-template-columns:1fr;gap:2px}
  .legal-other ul{grid-template-columns:1fr}
  .nav-simple .text-link{display:none}
  .process-example{padding:17px 18px}
  dialog{padding:24px}
  dialog h2{font-size:23px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
  .scan-line{display:none}
  /* Fără animație, starea de pornire devine starea finală. Chenarele din hero
     pornesc „nedesenate", deci trebuie readuse explicit la contur complet —
     altfel oprirea mișcării ar șterge conținutul, nu doar mișcarea lui. */
  .hero-det{stroke-dashoffset:0;opacity:1}
  .hero-tags{opacity:1}
  .preview-hint{opacity:0}
}

/* --- 18. Legătura dintre coloanele simulatorului --------------------------
   Același obiect, evidențiat simultan în cadru și în tabel. Alb, nu chihlimbar:
   chihlimbarul înseamnă deja „defect" în acest ecran și nu trebuie confundat. */
.pipe-obj{transition:opacity .18s}
.is-linking .pipe-obj:not(.is-linked){opacity:.28}
.pipe-obj.is-linked{outline:2px solid var(--paper);outline-offset:5px;z-index:2}
.pipe-obj.is-linked .pipe-obj-body{box-shadow:0 0 0 3px rgba(251,250,248,.35),0 3px 7px rgba(6,22,26,.4)}
.pipe-row{cursor:crosshair;transition:background .15s,color .15s}
.pipe-row:hover,.pipe-row.is-linked{background:rgba(251,250,248,.15);color:var(--paper)}
.pipe-row.is-linked .pipe-row-score{color:var(--paper)}
.flow-example strong{color:var(--graphite);font-weight:600}