/* B2B IN — pagina de prezentare b2bin.ro (deploy/landing), pur static.
   Tokeni identici cu static/css/app.css din platforma (docs/editorial/
   business_blueprint/v1.0) — aceeasi semnatura vizuala intre site si
   produs, mandat proprietar 2026-08-25. Fara framework, fara JS. */
:root {
  --color-midnight: #0B1220;
  --color-blue: #2563EB;
  --color-teal: #14B8A6;
  --color-amber: #F59E0B;
  --color-red: #DC2626;
  --color-cloud: #F7FAFC;
  --color-white: #FFFFFF;
  --color-slate: #334155;
  --color-slate-muted: #64748B;

  --bg: var(--color-cloud);
  --surface: var(--color-white);
  --ink: var(--color-slate);
  --ink-on-dark: var(--color-cloud);
  --muted: var(--color-slate-muted);
  --line: #E2E8F0;
  --accent: var(--color-blue);
  --accent-hover: #1D4ED8;
  --accent2: var(--color-teal);

  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  --radius-card: 16px;
  --radius-cta: 12px;
  --shadow-card: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 1px rgba(15, 23, 42, .05);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.55;
}

.site-header {
  height: 4.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(1rem, 5vw, 5rem);
  background: var(--color-midnight);
  color: var(--ink-on-dark);
  /* B1 (mandat_cc_export1_si_nav_20260928.md, feedback extern) - bara de
     meniu ramane vizibila la scroll. `sticky` (nu `fixed`) - elementul
     ramane in fluxul normal, deci nu are nevoie de un spacer/inaltime
     rezervata separat si nu poate produce CLS (lectia P4, deja aplicata la
     sectiunea CRM). */
  position: sticky;
  top: 0;
  z-index: 20;
}
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand img { display: block; height: 2.5rem; width: auto; }
.site-header nav { display: flex; gap: 1.25rem; }
.site-header nav a { color: #B9C2D6; text-decoration: none; font-size: .9rem; transition: color 150ms ease; }
.site-header nav a:hover { color: var(--ink-on-dark); }
.site-header nav a.is-current { color: var(--ink-on-dark); font-weight: 700; }

/* Sigla + tara (mandat proprietar 2026-09-17): "ROMANIA" static, tricolor
   fix (benzi egale albastru/galben/rosu pe litere, background-clip:text) -
   fara nicio animatie, verdict explicit proprietar dupa 2 iteratii de
   preview (val de culoare + fluturare din lumina, ambele respinse in
   forma finala). Aliniat la aceeasi inaltime de litera ca "B2B IN". */
.brand-country { display: inline-flex; align-items: center; gap: .6rem; }
.brand-country .divider { width: 1px; height: 1.8rem; background: rgba(247, 250, 252, .25); }
.brand-country .country-flag {
  font-weight: 800;
  letter-spacing: -.02em;
  font-size: 1.35rem;
  background-image: linear-gradient(90deg,
    #002B7F 0%, #002B7F 33.3%, #FCD116 33.3%, #FCD116 66.6%, #CE1126 66.6%, #CE1126 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--ink-on-dark);
  -webkit-text-fill-color: transparent;
}

/* Meniu hamburger pe mobil (mandat proprietar 2026-09-17, acelasi tipar ca
   DEC-324 din aplicatie): nav-ul cu 4 linkuri + sigla+tara marita nu mai
   incape pe un rand sub ~600px (verificat direct in browser) - randul
   ramane compact (siglă+tara + buton hamburger), navigatia colapseaza
   intr-un panou desfasurabil. Prag 700px, cu marja fata de punctul real
   de coliziune masurat. */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  padding: .5rem;
  border: none;
  background: transparent;
  cursor: pointer;
}
.nav-toggle-bar { display: block; height: 2px; background: var(--ink-on-dark); border-radius: 1px; }
/* B2 (mandat_cc_export1_si_nav_20260928.md, feedback extern) - butonul
   hamburger se transforma vizual in X cat timp meniul e deschis: un
   afisaj clar ca meniul se poate inchide fara sa alegi o optiune, nu doar
   un `aria-label` schimbat (invizibil vizual). */
.nav-toggle.is-open .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle.is-open .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-toggle-bar { transition: transform 150ms ease, opacity 150ms ease; }

/* Navigare in pagina (feedback proprietar, 2026-09-28; extinsa pe mobil la
   finisajul homepage v2, 2026-09-28): al doilea rand sticky, chiar sub
   `.site-header` (76px), VIZIBIL pe orice latime - pe mobil devine banda
   de "pastile" derulabila orizontal (`overflow-x: auto` DOAR pe acest
   element, nu pe pagina - scroll-ul intern nu adauga niciodata latime la
   documentul intreg). `position: sticky` (nu `fixed`) - ramane in fluxul
   normal, fara spacer separat, fara CLS (aceeasi lectie ca la
   .site-header). Doar pe homepage (elementul nu exista deloc in celelalte
   pagini statice) - sub-grupul separat din meniul hamburger a fost
   eliminat (era o dublura, acum ca randul e vizibil peste tot). */
.site-inpage-nav {
  position: sticky;
  top: 4.75rem;
  z-index: 19;
  display: flex;
  gap: .6rem;
  align-items: center;
  height: 2.75rem;
  padding: 0 clamp(1rem, 5vw, 5rem);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  /* Brand-1.2/finisaj (item 4c, CfC deploy #8): bara nativa de derulare
     ocupa 16 din cei 44px pe desktop/ferestre inguste (pe telefoane reale
     e overlay, impact mic, dar aspectul ramane murdar). Ascunsa - banda tot
     se deruleaza (touch/scroll/scrollIntoView), doar indicatorul vizual
     dispare. */
  scrollbar-width: none;
  /* Backlog DEC-564 (cosmetic 2): fara asta, `scrollIntoView` (site.js,
     auto-scroll spre pastila activa) putea aduce pastila EXACT la marginea
     containerului, mascata partial de padding-ul vizual al benzii -
     `scroll-padding-inline` obliga scroll-ul programatic sa respecte
     aceeasi rezerva de spatiu ca padding-ul static de mai sus. */
  scroll-padding-inline: clamp(1rem, 5vw, 5rem);
}
.site-inpage-nav::-webkit-scrollbar { display: none; }
/* Pe desktop, ancorele scurte de obicei incap fara scroll - centrate arata
   intentionat, nu ca un rest de banda derulabila (item 6, feedback
   proprietar). Pe mobil raman aliniate la stanga (start-ul firesc al unei
   benzi derulabile). */
@media (min-width: 701px) {
  .site-inpage-nav { justify-content: center; }
}
.site-inpage-nav a {
  flex: none;
  display: inline-flex;
  align-items: center;
  padding: .4rem 1rem;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--muted);
  text-decoration: none;
  font-size: .82rem;
  font-weight: 600;
  white-space: nowrap;
  transition: color 150ms ease, background 150ms ease, border-color 150ms ease;
}
.site-inpage-nav a:hover { color: var(--accent); border-color: var(--accent); }
.site-inpage-nav a.is-active {
  color: var(--color-white);
  background: var(--accent);
  border-color: var(--accent);
}

@media (max-width: 700px) {
  .site-header { padding-inline: 1rem; height: auto; min-height: 4.75rem; }
  .nav-toggle { display: flex; }
  .site-header nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: .25rem;
    background: var(--color-midnight);
    padding: 1rem;
    box-shadow: 0 8px 16px rgba(0, 0, 0, .25);
    /* Item 3 (finisaj homepage v2, feedback proprietar) - pe ecrane
       scunde (iPhone SE si similare), meniul complet putea depasi
       inaltimea vizibila fara nicio cale de a ajunge la ultimele linkuri.
       Inaltimea maxima ramane spatiul real ramas sub header (76px);
       derularea devine INTERNA meniului, nu a paginii. */
    max-height: calc(100vh - 4.75rem);
    overflow-y: auto;
  }
  .site-header nav.is-open { display: flex; }
  .site-header nav a { padding: 12px 0; }
}

main { width: min(1180px, calc(100% - 2rem)); margin: 0 auto; padding: clamp(2rem, 6vw, 5rem) 0; }

/* A4 (raport_nav_export_20260928.md, CfC) - link-ul "Cum funcționează" din
   meniu ducea la ancora, dar titlul sectiunii ajungea exact la top 0, sub
   headerul sticky (~76px) - vizual acoperit. `scroll-margin-top` lasa loc
   headerului la scroll-to-anchor, fara sa afecteze deloc pozitia normala
   in flux a sectiunii.

   Extins (feedback proprietar, 2026-09-28) la toate cele 5 ancore ale
   randului nou de navigare in pagina. De la finisajul homepage v2, randul
   `.site-inpage-nav` e vizibil pe ORICE latime (76px header + 44px banda =
   120px, +4px marja, aceeasi marja de 4px ca la valoarea initiala
   76->80px) - o singura valoare, fara media query, pentru ca stiva sticky
   e acum identica pe mobil si desktop. */
#cum-functioneaza,
#cautare,
#crm,
#asistent-ai,
#preturi,
#incredere {
  scroll-margin-top: 124px;
}

/* Scroll lin la orice ancora (randul de navigare in pagina + butonul
   "inapoi sus") - CSS pur, respecta preferinta de miscare redusa. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Buton "inapoi sus" (feedback proprietar, 2026-09-28) - ascuns implicit,
   site.js adauga `.is-visible` dupa ce heroul iese din viewport
   (IntersectionObserver). Fara JS, butonul ramane ascuns - nicio pierdere
   de continut, doar o comoditate in minus (acelasi principiu progresiv ca
   restul paginii, dar aici fallback-ul e "ascuns", nu "vizibil implicit",
   pentru ca elementul insusi e o comoditate de navigare, nu continut). */
.back-to-top {
  display: none;
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 25;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--color-midnight);
  color: var(--ink-on-dark);
  text-decoration: none;
  font-size: 1.25rem;
  line-height: 1;
  /* Coordonator, 2026-09-29: contrast real pe orice fundal - butonul
     devenea aproape invizibil peste `.site-footer` (fundal identic,
     `--color-midnight`). Contur deschis (nu doar umbra existenta) separa
     vizual cercul de orice fundal, deschis SAU inchis; umbra intarita
     pentru un halou vizibil si pe fundaluri deschise (hero, sectiuni
     albe). */
  border: 2px solid var(--ink-on-dark);
  box-shadow: 0 4px 14px rgba(11, 18, 32, .45);
  transition: transform 150ms ease;
}
.back-to-top.is-visible { display: flex; }
.back-to-top:hover { transform: translateY(-2px); }

.hero { text-align: center; padding: clamp(1rem, 4vw, 3rem) 0 clamp(2rem, 5vw, 4rem); }
.eyebrow {
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--accent);
  font-size: .75rem;
  font-weight: 800;
}
h1 {
  font-size: clamp(2.25rem, 5vw, 4rem);
  line-height: 1.08;
  letter-spacing: -.03em;
  margin: .5rem 0 1rem;
  color: var(--color-midnight);
}
.hero p.lead { font-size: clamp(1.05rem, 2vw, 1.25rem); color: var(--muted); max-width: 640px; margin: 0 auto 1.75rem; }
.count-up { font-variant-numeric: tabular-nums; }

.cta-row { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1.5rem; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-cta);
  padding: .9rem 1.4rem;
  background: var(--accent);
  color: var(--color-white);
  font-weight: 750;
  text-decoration: none;
  transition: background 180ms ease, transform 180ms ease;
}
.button:hover { background: var(--accent-hover); transform: translateY(-1px); }
.button-secondary { background: var(--surface); color: var(--accent); border: 1px solid var(--accent); }
.button-secondary:hover { background: #EFF4FF; }

.trust-line { color: var(--muted); font-size: .85rem; }

.hero-graph { display: block; width: min(900px, 100%); margin: clamp(1rem, 4vw, 2.5rem) auto clamp(1.5rem, 4vw, 3rem); }
/* .eco-graph e purtata de AMBELE variante (.hero-graph desktop SI
   .hero-graph-mobile) - stilul nodurilor/liniilor si starile de animatie
   sunt identice pentru oricare dintre cele doua e activa la breakpoint-ul
   curent (vezi media query mai jos), fara duplicare de reguli. */
.eco-graph .hg-line { fill: none; stroke: var(--line); stroke-width: 2; stroke-dasharray: 500; stroke-dashoffset: 0; }
.eco-graph .hg-node-fill { fill: var(--surface); stroke-width: 1.5; }
.eco-graph .hg-node-fill.hg-supplier { stroke: var(--accent2); }
.eco-graph .hg-node-fill.hg-client { stroke: var(--accent); }
.eco-graph .hg-dot-supplier { fill: var(--accent2); }
.eco-graph .hg-dot-client { fill: var(--accent); }
.eco-graph .hg-center-fill { fill: var(--accent); }
.eco-graph text { font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
.eco-graph .hg-label { font-size: 15px; font-weight: 700; fill: var(--ink); }
.eco-graph .hg-center-label { font-size: 17px; font-weight: 800; fill: var(--color-white); }
.eco-graph .hg-node { animation: heroNodeIn 640ms ease both; }
@keyframes heroNodeIn {
  from { opacity: 0; transform: translateX(var(--hg-shift, 0)); }
  to { opacity: 1; transform: translateX(0); }
}
/* Grafica ecosistemului ca "piesa de spectacol" (mandat proprietar,
   stil "restraint"): fara JS gata (sau cu prefers-reduced-motion), graful
   ramane complet desenat/vizibil imediat - liniile la stroke-dashoffset:0
   si nodurile ruleaza keyframe-ul lor normal (fallback identic cu inainte
   de acest strat de animatie). Doar cu JS activ (.js-reveal-ready), liniile
   pornesc "nedesenate" si nodurile stau in pauza pana graficul intra in
   viewport (site.js, IntersectionObserver pe .eco-graph - desktop SAU
   mobil, oricare e vizibil la breakpoint-ul curent) - al doilea grafic e
   mult sub fold, nu trebuie sa se joace la incarcarea paginii. */
/* will-change: gasit direct la masurare (Lighthouse, mobil, CPU 4x) -
   fara el, cele 8 linii ale graficului mobil (acum SVG, nu mai HTML)
   repictau sincron pe fir principal la fiecare cadru, Total Blocking Time
   90-400ms, scor Performance 90-92 in ~1/3 din rulari. Cu hint-ul, browser-ul
   promoveaza liniile din timp pe un strat compus separat - 6/7 rulari
   repetate au revenit la 98-100, in banda de variatie deja documentata a
   acestui server local (latenta Python, nu regresie de cod). */
.js-reveal-ready .eco-graph .hg-line { stroke-dashoffset: 500; transition: stroke-dashoffset 600ms ease-out; will-change: stroke-dashoffset; }
.js-reveal-ready .eco-graph.is-revealed .hg-line { stroke-dashoffset: 0; }
.js-reveal-ready .eco-graph .hg-node { animation-play-state: paused; }
.js-reveal-ready .eco-graph.is-revealed .hg-node { animation-play-state: running; }
@media (prefers-reduced-motion: reduce) {
  .eco-graph .hg-node { animation: none; opacity: 1; }
  .eco-graph .hg-line { stroke-dashoffset: 0 !important; transition: none !important; }
}
.eco-graph .hg-label-sm { font-size: 13px; }
.eco-graph .hg-center-sublabel { font-size: 12px; font-weight: 500; fill: rgba(255, 255, 255, .82); }

/* Varianta mobila a graficelor de ecosistem - AL DOILEA finisaj (mandat
   proprietar, 2026-09-04): SVG dedicat, portret, nu HTML/CSS - legaturile
   dintre noduri (mesajul "ecosistem") erau pierdute complet in varianta
   anterioara de stivuire pe 2 coloane fara linii. Hub sus, doua coloane de
   noduri dedesubt, linii curbe care se deseneaza la intrare (acelasi
   mecanism .hg-line/.eco-graph ca pe desktop, doar geometrie portret,
   fonturi marite). Toate dreptunghiurile (hub inclusiv) au ACEEASI
   inaltime intr-un grafic - primul finisaj cerut. Ascunsa implicit, arata
   doar sub breakpoint-ul mobil (vezi media query), unde inlocuieste
   complet .hero-graph (SVG desktop ascuns acolo). */
.hero-graph-mobile { display: none; }

/* Poziționarea „recunoaștere” (3 situații) - numărul mic deasupra titlului
   cardului, reutilizand .panel/.panel-grid deja existente. */
.recognition-num { display: block; font-size: .74rem; font-weight: 900; letter-spacing: .12em; color: var(--accent); margin-bottom: .5rem; }

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; margin: clamp(1.5rem, 4vw, 2.5rem) 0 0; }
.step {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  border-radius: var(--radius-card);
  padding: 1.4rem 1.2rem;
}
.step-num {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: .6rem;
  background: #EFF6FF;
  color: var(--accent);
  font-weight: 900;
  font-size: .95rem;
}
.step h3 { margin: .9rem 0 .4rem; font-size: 1.02rem; color: var(--color-midnight); }
.step p { margin: 0; color: var(--muted); font-size: .9rem; }

.quote-block {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  border-radius: var(--radius-card);
  padding: clamp(1.5rem, 4vw, 2.25rem) clamp(1.25rem, 4vw, 2rem);
}
.quote-block p { font-size: clamp(1.2rem, 2.6vw, 1.55rem); line-height: 1.32; letter-spacing: -.01em; font-weight: 700; color: var(--color-midnight); margin: 0 0 .7rem; }
.quote-block small { color: var(--muted); font-size: .85rem; }
/* K4 (mandat corecturi homepage, 2026-09-24): CTA final mutat in cardul
   .quote-block - suprascrie marginile implicite ale .cta-row (gandite
   pentru un rand plasat direct in pagina, nu intr-un card). */
.cta-row-in-card { margin: 1.25rem 0 0; }

.section-header { text-align: center; max-width: 720px; margin: 0 auto clamp(1.5rem, 4vw, 2.5rem); }
.section-title { font-size: clamp(1.6rem, 3.4vw, 2.3rem); line-height: 1.15; letter-spacing: -.02em; color: var(--color-midnight); margin: 0 0 .6rem; }
.section-lead { font-size: 1.05rem; color: var(--muted); margin: 0; }
section + section.section-block,
.section-block + .section-block { margin-top: clamp(2.5rem, 6vw, 4rem); }
.section-block { margin: clamp(2.5rem, 6vw, 4rem) 0; }

.demo-card {
  max-width: 560px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  border-radius: var(--radius-card);
  padding: 1.5rem;
}
.demo-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); margin-bottom: 1rem; }
.demo-badge {
  display: inline-block;
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #92400E;
  background: #FFF7ED;
  border: 1px solid #FDE7C7;
  border-radius: 999px;
  padding: .2rem .55rem;
  margin-bottom: .4rem;
}
.demo-score { font-weight: 900; font-size: 1.35rem; color: #0F766E; white-space: nowrap; }
.demo-card h3 { margin: 0 0 .75rem; font-size: 1.15rem; color: var(--color-midnight); }
.demo-reasons { display: grid; gap: .55rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.demo-reasons li { background: var(--bg); border: 1px solid var(--line); border-radius: .6rem; padding: .6rem .75rem; font-size: .9rem; }
.demo-reasons li::before { content: "✓ "; color: var(--accent2); font-weight: 800; }
.demo-source { margin: 0; font-size: .78rem; color: var(--muted); }

.panel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; margin: clamp(2rem, 5vw, 3.5rem) 0; }
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  border-radius: var(--radius-card);
  padding: 1.5rem;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.panel:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(15, 23, 42, .12); }
.panel h2, .panel h3 { margin: 0 0 .5rem; font-size: 1.15rem; color: var(--color-midnight); }
.panel p { margin: 0; color: var(--muted); font-size: .95rem; }

.notice {
  background: var(--color-cloud);
  border-left: 4px solid var(--accent);
  padding: 1rem 1.25rem;
  border-radius: .6rem;
  margin: 2rem 0;
  color: var(--ink);
}

/* Card instrument CAEN Rev.3 (DEC-488, recomandare CfC 2026-09-21):
   lead magnet gratuit, distinct vizual de .notice (care se citea ca
   disclaimer) si de .panel (card de "problema") - bordura teal, nu ambra,
   pentru ca e ofertă utilă, nu avertisment de termen. */
.tool-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--color-teal);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 28px;
}
.tool-card__tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-teal);
  background: rgba(20, 184, 166, .10);
  padding: 4px 10px;
  border-radius: 999px;
}
.tool-card__title { margin: 12px 0 6px; font-size: 21px; line-height: 1.3; font-weight: 600; color: var(--color-midnight); }
.tool-card__lead { margin: 0 0 16px; color: var(--muted); font-size: 15px; }
.tool-card__form { display: flex; gap: 8px; flex-wrap: wrap; }
.tool-card__form input {
  flex: 1 1 220px;
  padding: 12px 14px;
  font: inherit;
  border: 1px solid var(--line);
  border-radius: var(--radius-cta);
  background: var(--bg);
}
.tool-card__form input:focus { outline: 2px solid var(--accent); outline-offset: 1px; background: var(--surface); }
.tool-card__form button {
  padding: 12px 20px;
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: var(--accent);
  border: 0;
  border-radius: var(--radius-cta);
  cursor: pointer;
}
.tool-card__form button:hover { background: var(--accent-hover); }
.tool-card__more { display: inline-block; margin-top: 14px; font-size: 14px; color: var(--muted); text-decoration: none; }
.tool-card__more:hover { color: var(--accent); text-decoration: underline; }
@media (max-width: 520px) {
  .tool-card { padding: 20px; }
  .tool-card__form button { width: 100%; }
}

.site-footer {
  margin-top: clamp(2rem, 6vw, 4rem);
  padding: 1.5rem clamp(1rem, 5vw, 5rem) 2rem;
  background: var(--color-midnight);
  color: var(--ink-on-dark);
}
.site-footer a { color: #B9C2D6; text-decoration: none; font-size: .85rem; transition: color 150ms ease; }
.site-footer a:hover { color: var(--ink-on-dark); }

/* Footer pe coloane, portat de pe platforma (app.b2bin.ro/accounts/base.html,
   DEC-320) - nu ajunsese pe landing la deploy-ul initial (DEC-321, gasit de
   raportul CfC de verificare live). Aceleasi clase, aceeasi structura -
   Platforma / Juridic / Firma + banda de jos (SAL + NETOPIA + copyright).
   Coloana Juridic: 7 linkuri catre pagini locale + 3 catre echivalentul
   functional de pe app.b2bin.ro (Livrare/Anulare-Retragere nu exista static
   pe landing, Corecteaza-date e un formular cu logica de backend). */
.footer-columns { display: flex; flex-wrap: wrap; gap: 2.5rem; }
.footer-col { flex: 1 1 180px; min-width: 160px; }
.footer-col-legal { flex: 1 1 300px; }
.footer-col h3 {
  margin: 0 0 .75rem;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-on-dark);
  opacity: .65;
}
.footer-col-nav { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
.footer-col-nav-split { display: block; columns: 2; column-gap: 1.5rem; }
.footer-col-nav-split a { display: block; margin-bottom: .5rem; break-inside: avoid; }
.footer-company { margin: 0; line-height: 1.6; color: #B9C2D6; font-size: .85rem; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(247, 250, 252, .12);
}
.footer-sal { display: flex; align-items: center; gap: .5rem; margin: 0; }
.footer-sal img { height: 32px; width: auto; }
/* Item 5 (feedback CfC, Lighthouse desktop 95/100 - singura cauza a
   deducerii): linkul "SAL" mostenea `.site-footer a { color: #B9C2D6 }`,
   prea deschis pe fundalul `--color-midnight` pentru pragul de contrast
   verificat de Lighthouse. Suprascriere punctuala, doar pentru acest link -
   restul linkurilor din footer (coloane, copyright) raman neatinse. */
.footer-sal a { color: var(--ink-on-dark); }
.footer-copyright { margin: 0 0 0 auto; opacity: .6; font-size: .8rem; }
/* Sigla NETOPIA (DEC-313, fix de specificitate la DEC-321 - gasit de
   raportul CfC: `.footer-badges img` (0,2,1) bataea `.footer-netopia-logo`
   (0,2,0) inainte, iesea 279px pe 375px in loc de 30px inaltime - dispare
   odata cu markup-ul `.footer-badges`, dar clasa ramane strict simpla acum,
   fara concurenta de specificitate. */
.footer-netopia-logo { height: 30px; width: auto; vertical-align: middle; }

/* Progresiv: fara JS sau cu prefers-reduced-motion, continutul .reveal
   ramane complet vizibil (nicio dependenta de JS pentru a citi pagina). */
.reveal { opacity: 1; transform: none; }
.js-reveal-ready .reveal { opacity: 0; transform: translateY(14px); transition: opacity 260ms ease-out, transform 260ms ease-out; }
.js-reveal-ready .reveal.is-visible { opacity: 1; transform: none; }

/* Cascada usoara pe grupuri de carduri (situatiile 01/02/03, pasii 1-4) -
   acelasi .panel-grid/.steps e reutilizat si de sectiuni fara nevoie de
   cascada (un singur card), dar delay-ul nu se observa acolo. */
.js-reveal-ready .panel-grid .panel:nth-child(1).reveal,
.js-reveal-ready .steps .step:nth-child(1).reveal { transition-delay: 0ms; }
.js-reveal-ready .panel-grid .panel:nth-child(2).reveal,
.js-reveal-ready .steps .step:nth-child(2).reveal { transition-delay: 70ms; }
.js-reveal-ready .panel-grid .panel:nth-child(3).reveal,
.js-reveal-ready .steps .step:nth-child(3).reveal { transition-delay: 140ms; }
.js-reveal-ready .steps .step:nth-child(4).reveal { transition-delay: 210ms; }

/* Pagini legale — text identic v1.0 (docs/documente/de_publicat), tokeni
   partajati cu app.css, nu duplicati per pagina. */
.legal-page { max-width: 820px; margin: 0 auto; padding: 40px 20px; line-height: 1.65; color: var(--ink); }
.legal-page h1 { font-size: clamp(32px, 5vw, 48px); line-height: 1.08; color: var(--color-midnight); margin: 0 0 8px; }
.legal-page .updated { color: var(--muted); margin-bottom: 32px; }
.legal-page h2 { font-size: 22px; line-height: 1.25; color: var(--color-midnight); margin: 34px 0 10px; }
.legal-page p { margin: 0 0 12px; }
.legal-page table { width: 100%; border-collapse: collapse; margin: 0; font-size: 14px; }
.legal-page th, .legal-page td { border: 1px solid var(--line); padding: 10px; vertical-align: top; }
.legal-page th { background: var(--color-midnight); color: var(--color-white); text-align: left; }
/* Tabelele de date (ex. /caen-rev3/, defalcari judet/sectiune) pot deveni mai
   late decat un telefon ingust - scroll orizontal izolat in propriul container,
   nu latime fortata pe pagina (verificat mobil, mandat proprietar). */
.legal-page .table-scroll { overflow-x: auto; margin: 16px 0 24px; -webkit-overflow-scrolling: touch; }
.legal-page .table-scroll table { margin: 0; min-width: 320px; }

.legal-page .stat-block { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 1.75rem 1.25rem; margin: 20px 0 28px; text-align: center; }
.legal-page .stat-figure { font-size: clamp(2.4rem, 9vw, 3.8rem); font-weight: 900; letter-spacing: -.02em; color: var(--color-midnight); line-height: 1; font-variant-numeric: tabular-nums; }
.legal-page .stat-label { max-width: 620px; margin: .75rem auto 0; color: var(--ink); font-size: 1rem; line-height: 1.5; }
.legal-page .stat-note { margin: .6rem 0 0; color: var(--muted); font-size: .82rem; }
.legal-page a { color: var(--accent); }
.legal-page ul, .legal-page ol { margin: 0 0 16px; padding-left: 22px; }
.legal-page li { margin-bottom: 6px; }
.legal-page .callout { background: var(--bg); border: 1px solid var(--line); border-radius: .6rem; padding: 14px 18px; margin: 0 0 20px; }
/* Bloc "Distribuie articolul" (decizie proprietar, toate ghiduri) - linkuri
   statice pure (sharer URL-uri), fara SDK/script tert. Touch targets >=44px,
   pictograme SVG inline pe token-urile de brand ale retelei (nu tokenii casei -
   recunoasterea vizuala instantanee conteaza mai mult ca uniformizarea). */
.share-row { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; margin: 28px 0; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.share-label { font-weight: 700; color: var(--ink); font-size: .92rem; margin-right: .2rem; }
.share-link { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; cursor: pointer; font: inherit; }
.share-link:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }
.share-link svg { width: 20px; height: 20px; fill: currentColor; }
.share-link--linkedin { color: #0A66C2; }
.share-link--whatsapp { color: #25D366; }
.share-link--facebook { color: #1877F2; }
.share-link--x { color: var(--color-midnight); }
.share-link--email { color: var(--muted); }
.share-link--copy { width: auto; padding: 0 16px; gap: .45rem; color: var(--ink); font-size: .85rem; font-weight: 600; }
.legal-page .sources { font-size: 13px; color: var(--muted); margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--line); }
.legal-page .sources a { color: var(--muted); }
/* `.legal-page a` (doua clase) are specificitate mai mare decat `.button`
   (o clasa) - fara asta, un CTA .button inserat intr-o pagina .legal-page
   mostenea culoarea de link (albastru pe fundal albastru, text invizibil,
   gasit direct la verificarea vizuala a paginii /caen-rev3/). */
.legal-page .button { color: var(--color-white); }
.legal-page .button-secondary { color: var(--accent); }

/* Sectiunea /ghiduri/ - carduri, nu lista (mandat proprietar 2026-08-27).
   Categorie ca badge coloral discret (4 tonuri, aceeasi reteta ca
   .demo-badge: text inchis pe fundal foarte deschis, contrast verificat
   >=5:1 pe toate cele 4). Structura pregatita pentru filtrare JS la scara
   (fiecare card poarta data-category) - fara JS de filtrare inca. */
.guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem; margin: 1.5rem 0 2.5rem; }
.guide-card {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  border-radius: var(--radius-card);
  overflow: hidden;
  padding: 1.25rem;
  text-decoration: none;
  color: inherit;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.guide-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(15, 23, 42, .12); }
/* Thumbnail = OG-ul 1200x630 al articolului, reutilizat direct (grila +
   patratul de siguranta central compun deja curat la scara mica). Sange
   pana la marginile cardului (compensam padding-ul de 1.25rem cu margini
   negative) - overflow:hidden + border-radius de pe .guide-card taie
   coltul de sus exact la forma cardului, fara sa afecteze box-shadow-ul
   (efect vopsit in afara box-ului, nu "continut" clipuit de overflow).
   aspect-ratio + width/height pe <img> previn layout shift (Lighthouse
   CLS) inainte ca imaginea sa se incarce - loading="lazy" pe fiecare. */
.guide-thumb {
  display: block;
  width: calc(100% + 2.5rem);
  height: auto;
  margin: -1.25rem -1.25rem 0;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
  background: #0B1220;
}
.guide-card h2 { margin: 0; font-size: 1.05rem; line-height: 1.35; color: var(--color-midnight); }
.guide-card .guide-dek { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.5; }

.guide-badge {
  display: inline-flex;
  align-self: flex-start;
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  border-radius: 999px;
  padding: .22rem .6rem;
  border: 1px solid transparent;
}
.guide-badge--termene { color: #92400E; background: #FFF7ED; border-color: #FDE7C7; }
.guide-badge--date { color: #1D4ED8; background: #EFF6FF; border-color: #DBEAFE; }
.guide-badge--riscuri { color: #B91C1C; background: #FEF2F2; border-color: #FECACA; }
.guide-badge--practici { color: #0F766E; background: #F0FDFA; border-color: #CCFBF1; }
.guide-badge--analiza { color: #6D28D9; background: #F5F3FF; border-color: #EDE9FE; }

.guide-meta { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; font-size: .78rem; color: var(--muted); margin-top: auto; padding-top: .2rem; }
.guide-meta .guide-updated { display: inline-flex; align-items: center; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: .16rem .55rem; font-weight: 600; color: var(--ink); }
.guide-meta .guide-dot { opacity: .5; }

.guides-section > h2 { font-size: 1.3rem; color: var(--color-midnight); margin: 2.5rem 0 1rem; }

@media (max-width: 760px) {
  .site-header { padding-inline: 1rem; }
  .site-header nav { gap: .75rem; flex-wrap: wrap; }
  .footer-columns { flex-direction: column; gap: 1.5rem; }
  .footer-bottom { gap: 1rem; }
  .footer-copyright { margin-left: 0; }
  /* Backlog DEC-564 (cosmetic 3): butonul "inapoi sus" e `position: fixed`
     (bottom: 1.25rem, inaltime 2.75rem - zona rezervata ~4.5rem de la baza
     viewport-ului), deci la scroll complet suprapune orice continut aflat
     exact in acel colt, indiferent de aliniere orizontala. Pe mobil
     (~390px), randul cu copyright ajunge in acea zona - padding-ul de jos
     al footerului marit sa depaseasca zona butonului, ca ultimul rand sa
     ramana mereu deasupra lui. */
  .site-footer { padding-bottom: 5rem; }

  /* Grafic ecosistem: SVG-ul desktop devine ilizibil sub acest prag -
     inlocuit de SVG-ul mobil dedicat (geometrie portret, vezi .hero-graph-
     mobile mai sus), care pastreaza liniile de legatura si desenul lor. */
  .hero-graph { display: none; }
  .hero-graph-mobile {
    display: block;
    width: min(360px, 100%);
    margin: clamp(1.25rem, 5vw, 2rem) auto;
  }

  .steps { grid-template-columns: 1fr 1fr; gap: .9rem; }
}

@media (max-width: 480px) {
  .steps { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  /* Sub 480px, doua sub-coloane de linkuri Juridic ar taia textele mai
     lungi ("De ce apare un contact") - o singura coloana verticala. */
  .footer-col-nav-split { columns: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
  .js-reveal-ready .reveal { opacity: 1; transform: none; }
}

/* DEC-536 (2026-09-24, mandat coordonator+proprietar - homepage v2):
   sectiunea-far "Nu trebuie sa stii codul CAEN. Scrie cum vorbesti." -
   exclusiv CSS + JS vanilla minim, text real in DOM pentru toate cele 3
   exemple (SEO nu depinde de JS - Google vede tot continutul, JS doar
   comuta care exemplu e vizibil). Fara JS sau cu prefers-reduced-motion,
   primul exemplu (mobila) ramane static, complet vizibil - fallback
   identic cu starea de repaus normala.

   P4 (mandat corecturi homepage, proprietar, 2026-09-24): varianta
   initiala (`position:absolute` pe slide-urile inactive + `min-height`
   fix, ghicit) lasa panoul sa se inalte dupa slide-ul ACTIV (singurul
   `position:relative`, deci singurul care conta la inaltime) - continutul
   de sub demo sarea sus-jos la fiecare schimbare de exemplu, mai vizibil
   pe mobil unde slide-urile nu incap in 220px. Fix real: toate slide-urile
   partajeaza ACEEASI celula de grid (`grid-area: 1/1/2/2`) - randul de
   grid se dimensioneaza automat dupa cel mai inalt slide, indiferent care
   e activ si indiferent de breakpoint (nu mai e o valoare ghicita). */
.search-demo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin: clamp(1.5rem, 4vw, 2.5rem) 0;
}
.search-demo-panel {
  display: grid;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  border-radius: var(--radius-card);
  padding: 1.5rem;
}
.search-demo-result { background: var(--color-midnight); border-color: var(--color-midnight); }
.search-demo-slide {
  grid-area: 1 / 1 / 2 / 2;
  min-width: 0;
  opacity: 0;
  pointer-events: none;
}
.search-demo-slide.is-active { opacity: 1; pointer-events: auto; }
.js-reveal-ready .search-demo-slide {
  transition: opacity 420ms ease;
}
.search-demo-typed { margin: 0 0 .5rem; font-size: 1.1rem; color: var(--color-midnight); }
.search-demo-typed strong { color: var(--accent); }
.search-demo-hint { margin: 0 0 .75rem; color: var(--muted); font-size: .9rem; }
.search-demo-branches { margin: 0; padding: 0; list-style: none; display: grid; gap: .5rem; }
.search-demo-branches li {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: .6rem;
  padding: .55rem .75rem;
  font-size: .92rem;
  font-weight: 600;
  color: var(--ink);
}
.search-demo-badge {
  display: inline-block;
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-teal);
  background: rgba(20, 184, 166, .16);
  border-radius: 999px;
  padding: .2rem .6rem;
  margin-bottom: .6rem;
}
.search-demo-result h3 { margin: 0 0 .5rem; color: var(--ink-on-dark); font-size: 1.1rem; }
.search-demo-why { margin: 0; color: #B9C2D6; font-size: .9rem; }
.section-note { text-align: center; color: var(--muted); font-size: .9rem; margin: 1rem 0 0; }
@media (max-width: 700px) {
  .search-demo { grid-template-columns: 1fr; }
}

/* Sectiunea 3b (CRM, mandat_cc_homepage_crm_20260926.md) - Kanban stilizat,
   un card se muta prin etape prin animatie CSS pura (@keyframes, fara JS).
   `.crm-demo` are inaltime FIXA (lectia P4/CLS 0) - doar transformari,
   nimic altceva din sectiune nu isi schimba dimensiunea, deci zero
   deplasare verticala a continutului de sub sectiune.

   Item 6 (feedback CfC, Lighthouse mobil 86/100, sub pragul de 90,
   2026-09-28): varianta initiala anima `left` (proprietate de layout -
   forteaza recalcul + repaint la fiecare cadru, cost real pe mobil).
   Restructurat pe tehnica standard "track 100% latime + transform" - SINGURA
   proprietate animata e `transform` (compozitata, doar GPU, fara layout/
   paint): `.crm-demo-card-track` are latimea containerului (100%) si se
   muta prin `translateX(N%)` (procentul e relativ la LATIMEA PROPRIE a
   track-ului = latimea containerului, deci "N% din container", exact ca
   inainte cu `left`); cardul vizibil din interior ramane centrat pe acel
   punct printr-un `translateX(-50%)` STATIC (relativ la latimea proprie a
   cardului - neanimat, deci fara cost suplimentar). */
.crm-demo {
  position: relative;
  height: 210px;
  margin: clamp(1.5rem, 4vw, 2.5rem) 0;
  /* Item 2 (finisaj homepage v2, feedback CfC): `.crm-demo-card-track`
     (100% latime + translateX pana la 90%) adauga scroll orizontal real
     paginii (+22px desktop, +4px mobil, masurat) - cardul vizibil ramane
     mereu in interiorul coloanelor, dar cutia proprie a track-ului se
     intinde dincolo de marginea dreapta a acestui container. `overflow:
     hidden` taie exact la marginea sectiunii (inaltime fixa, deci fara
     CLS) - nu afecteaza deloc animatia vizibila. */
  overflow: hidden;
}
.crm-demo-columns {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .75rem;
  height: 100%;
}
.crm-demo-column {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: .75rem;
  padding: .6rem .5rem;
}
.crm-demo-column-label {
  display: block;
  font-size: .72rem;
  font-weight: 800;
  color: var(--muted);
  text-align: center;
}
.crm-demo-card-track {
  position: absolute;
  top: 3.4rem;
  left: 0;
  width: 100%;
  animation: crm-demo-card-move 12s ease-in-out infinite;
  will-change: transform, opacity;
}
/* Progresiv, ca restul animatiilor de pe pagina (`.reveal`/`.eco-graph`):
   FARA JS (`.js-reveal-ready` lipseste de pe <html>), animatia ruleaza
   mereu - comportamentul dinainte, cardul ramane vizibil. CU JS activ,
   ruleaza doar cat timp sectiunea e in viewport (`.crm-demo.is-in-view`,
   site.js - IntersectionObserver) - reduce costul pe fir principal cand
   nu se vede deloc (parte din tinta Lighthouse mobil, feedback CfC). */
.js-reveal-ready .crm-demo-card-track { animation-play-state: paused; }
.js-reveal-ready .crm-demo.is-in-view .crm-demo-card-track { animation-play-state: running; }
.crm-demo-card {
  width: min(150px, 34%);
  transform: translateX(-50%);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent2);
  border-radius: .6rem;
  box-shadow: var(--shadow-card);
  padding: .6rem .65rem;
}
.crm-demo-card-success {
  display: block;
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-teal);
  margin-bottom: .3rem;
  opacity: 0;
  animation: crm-demo-card-success 12s ease-in-out infinite;
}
.js-reveal-ready .crm-demo-card-success { animation-play-state: paused; }
.js-reveal-ready .crm-demo.is-in-view .crm-demo-card-success { animation-play-state: running; }
.crm-demo-card-company { display: block; font-weight: 700; color: var(--color-midnight); font-size: .88rem; }
.crm-demo-card-title { display: block; color: var(--muted); font-size: .78rem; margin-top: .15rem; }

@keyframes crm-demo-card-move {
  0% { transform: translateX(10%); opacity: 0; }
  3% { opacity: 1; }
  14% { transform: translateX(10%); }
  18% { transform: translateX(30%); }
  32% { transform: translateX(30%); }
  36% { transform: translateX(50%); }
  50% { transform: translateX(50%); }
  54% { transform: translateX(70%); }
  68% { transform: translateX(70%); }
  72% { transform: translateX(90%); }
  92% { transform: translateX(90%); opacity: 1; }
  97% { opacity: 0; }
  100% { transform: translateX(10%); opacity: 0; }
}
@keyframes crm-demo-card-success {
  0%, 74% { opacity: 0; }
  80%, 90% { opacity: 1; }
  96%, 100% { opacity: 0; }
}
/* `prefers-reduced-motion` (lectia sectiunii demo existente) - cardul
   ramane static in "Interes" (coloana 3), fara nicio animatie. */
@media (prefers-reduced-motion: reduce) {
  .crm-demo-card-track { animation: none; transform: translateX(50%); opacity: 1; }
  .crm-demo-card-success { animation: none; opacity: 0; }
}
.crm-demo-points { margin-top: 1.25rem; }

@media (max-width: 640px) {
  /* Coloanele raman toate 5 vizibile, doar scalate (optiunea mai simpla
     dintre cele doua permise de mandat) - nicio derulare orizontala a
     paginii, containerul nu depaseste niciodata latimea ecranului. */
  .crm-demo { height: 168px; }
  .crm-demo-column { padding: .4rem .3rem; }
  .crm-demo-column-label { font-size: .58rem; }
  .crm-demo-card-track { top: 2.7rem; }
  .crm-demo-card { width: min(110px, 36%); padding: .45rem .5rem; }
  .crm-demo-card-company { font-size: .74rem; }
  .crm-demo-card-title { font-size: .66rem; }
  .crm-demo-card-success { font-size: .58rem; }
}

/* Sectiunea 3c (Asistent AI, `DEC-571` - activare publica AI, mandat
   coordonator 2026-10-01, storyboard `storyboard_animatie_asistent_ai_
   20261001.md`) - mini-conversatie care se "scrie" singura, in exact
   stilul REAL al bulelor din aplicatie (AI-0.2,
   `backend/static/css/app.css` .chat-message-*) - o singura sursa vizuala
   de adevar, nu o ilustratie separata.

   Spre deosebire de `.crm-demo` (un singur card care se MUTA intre
   coloane, de-aia absolute+translateX), aici fiecare bula e un element
   STATIONAR in flux normal, care doar apare (opacity 0->1) si ramane -
   spatiul fiecarei bule e rezervat de la primul randare (opacity:0 tot
   ocupa layout), deci zero CLS fara sa fie nevoie de inaltime fixa sau
   pozitionare absoluta. Animatii STRICT pe opacity/transform (lectia
   Lighthouse mobil de la .crm-demo, item 6) - niciodata proprietati de
   layout. */
.ai-demo {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  max-width: 560px;
  margin: clamp(1.5rem, 4vw, 2.5rem) auto 0;
}
.ai-demo-row { display: flex; align-items: flex-end; gap: .5rem; opacity: 0; will-change: opacity, transform; }
.ai-demo-row-user { flex-direction: row-reverse; align-self: flex-end; }
.ai-demo-row-assistant { align-self: flex-start; }
.ai-demo-avatar {
  flex: 0 0 auto;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ai-demo-bubble { max-width: 78%; border-radius: 1rem; padding: .6rem .9rem; font-size: .88rem; }
.ai-demo-bubble p { margin: 0; }
.ai-demo-bubble-user { background: rgba(37, 99, 235, .12); color: var(--ink); border-bottom-right-radius: .25rem; }
.ai-demo-bubble-assistant { background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: .25rem; box-shadow: var(--shadow-card); }
.ai-demo-time { display: block; margin-top: .3rem; font-size: .66rem; color: var(--muted); text-align: right; }
.ai-demo-bubble-table table { border-collapse: collapse; font-size: .8rem; }
.ai-demo-bubble-table th, .ai-demo-bubble-table td { padding: .3rem .5rem; border-bottom: 1px solid var(--line); text-align: left; }
.ai-demo-bubble-table th { color: var(--muted); font-size: .68rem; text-transform: uppercase; }
.ai-demo-typing { opacity: 0; margin: 0 0 0 2.1rem; color: var(--muted); font-size: .8rem; font-style: italic; will-change: opacity; }
/* Verificare CfC activare AI (2026-10-01, observatie A2) - insignele
   (textele de incredere: cheia ta/doar datele tale/zero consum) raman
   PERMANENT vizibile, niciodata animate - decizia proprietarului: "sunt
   mesajele de incredere, trebuie sa poata fi citite", nu doar intrezarite
   1-2s la finalul ciclului de 12s. */
.ai-demo-badges { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: .75rem; opacity: 1; }
.ai-demo-badge {
  display: inline-flex;
  align-items: center;
  padding: .35rem .7rem;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--line);
  font-size: .76rem;
  font-weight: 600;
  color: var(--muted);
}

.ai-demo-msg-1 { animation: ai-demo-fade-1 12s ease-in-out infinite; }
.ai-demo-typing { animation: ai-demo-fade-typing 12s ease-in-out infinite; }
.ai-demo-msg-2 { animation: ai-demo-fade-2 12s ease-in-out infinite; }
.ai-demo-msg-3 { animation: ai-demo-fade-3 12s ease-in-out infinite; }
.ai-demo-msg-4 { animation: ai-demo-fade-4 12s ease-in-out infinite; }

/* Progresiv (identic `.crm-demo`): fara JS, bucla ruleaza mereu; cu JS,
   doar cat timp sectiunea e in viewport (`.ai-demo.is-in-view`, site.js).
   `.ai-demo-badges` NU mai e in aceasta lista - permanent vizibila,
   neanimata (vezi mai sus). */
.js-reveal-ready .ai-demo-msg-1,
.js-reveal-ready .ai-demo-typing,
.js-reveal-ready .ai-demo-msg-2,
.js-reveal-ready .ai-demo-msg-3,
.js-reveal-ready .ai-demo-msg-4 { animation-play-state: paused; }
.js-reveal-ready .ai-demo.is-in-view .ai-demo-msg-1,
.js-reveal-ready .ai-demo.is-in-view .ai-demo-typing,
.js-reveal-ready .ai-demo.is-in-view .ai-demo-msg-2,
.js-reveal-ready .ai-demo.is-in-view .ai-demo-msg-3,
.js-reveal-ready .ai-demo.is-in-view .ai-demo-msg-4 { animation-play-state: running; }

@keyframes ai-demo-fade-1 {
  0% { opacity: 0; transform: translateY(6px); }
  3% { opacity: 1; transform: none; }
  95% { opacity: 1; transform: none; }
  98%, 100% { opacity: 0; }
}
@keyframes ai-demo-fade-typing {
  0%, 16% { opacity: 0; }
  19%, 24% { opacity: 1; }
  27%, 100% { opacity: 0; }
}
@keyframes ai-demo-fade-2 {
  0%, 26% { opacity: 0; transform: translateY(6px); }
  29% { opacity: 1; transform: none; }
  95% { opacity: 1; transform: none; }
  98%, 100% { opacity: 0; }
}
@keyframes ai-demo-fade-3 {
  0%, 51% { opacity: 0; transform: translateY(6px); }
  54% { opacity: 1; transform: none; }
  95% { opacity: 1; transform: none; }
  98%, 100% { opacity: 0; }
}
@keyframes ai-demo-fade-4 {
  0%, 67% { opacity: 0; transform: translateY(6px); }
  70% { opacity: 1; transform: none; }
  95% { opacity: 1; transform: none; }
  98%, 100% { opacity: 0; }
}
/* `prefers-reduced-motion` (mandat explicit storyboard): conversatia
   afisata COMPLET, static, fara miscare - indicatorul de scriere dispare
   (era doar un semnal tranzitoriu de "in curs", nu parte din continutul
   final). `.ai-demo-badges` nu mai e listata aici - e deja statica permanent. */
@media (prefers-reduced-motion: reduce) {
  .ai-demo-msg-1, .ai-demo-msg-2, .ai-demo-msg-3, .ai-demo-msg-4 {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .ai-demo-typing { display: none; }
}

@media (max-width: 640px) {
  .ai-demo { max-width: 100%; }
  .ai-demo-bubble { max-width: 88%; font-size: .84rem; }
}

/* Sectiunea 6 (vitrina firmei) - mockup mic, semnal de incredere afisat
   vizual, nu doar descris (recenzia ChatGPT, acceptata). */
.showcase-mockup {
  max-width: 480px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--color-teal);
  box-shadow: var(--shadow-card);
  border-radius: var(--radius-card);
  padding: 1.5rem;
}
.showcase-badge {
  display: inline-block;
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #0F766E;
  background: #F0FDFA;
  border: 1px solid #CCFBF1;
  border-radius: 999px;
  padding: .2rem .6rem;
  margin-bottom: .6rem;
}
.showcase-mockup-name { margin: 0 0 .4rem; font-size: 1.1rem; font-weight: 700; color: var(--color-midnight); }
.showcase-mockup-desc { margin: 0; color: var(--muted); font-size: .92rem; }

/* Sectiunea 8 (preturi, teaser compact) - reutilizeaza .panel-grid/.panel;
   pretul + nota de lansare pe un singur <h3>, restul deja stilat. */
.pricing-teaser-grid .panel h3 { line-height: 1.3; }
.pricing-teaser-grid .panel h3 small { display: block; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--color-teal); margin-top: .2rem; }