/* ── Detalii serviciu: AI / Computer Vision / Agenți + NoAUTO-NoAI ──
   Blocuri statice din pagină, mutate de scriptul inline chiar înaintea benzii CTA. */
/* Spațiu între linia gri de deasupra (marginea de jos a .pd-contact) și titlul
   secțiunii — convenția site-ului pentru „bară gri → titlu" e 36px, aici puțin mai larg. */
.s1-more { padding-top: 48px; }
/* Aceeași aliniere ca prima secțiune de sub banner din S2 (.banner2-aligned):
   titlul și bara cu gradient ocupă singure primul rând al grilei, iar textul și
   ilustrația împart al doilea rând, ambele lipite sus. */
.s1-more-head { max-width: var(--lat-lectura); margin: 0 auto 34px; padding: 0 40px; text-align: left;
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto;
  gap: 10px 40px; align-items: start; }
.s1-more-head-title { grid-column: 1 / -1; grid-row: 1; }
.s1-more-head-title .ph-line { display: block; max-width: 420px; margin: 12px 0 0; }
.s1-more-head-text { grid-column: 1; grid-row: 2; margin-top: 20px; }
.s1-more-head-figure { grid-column: 2; grid-row: 2; align-self: start; margin-top: 20px;
  background: #fff; border: 1px solid #00497c; border-radius: 10px; padding: 14px; }
.s1-more-head-figure svg { width: 100%; height: auto; display: block; }
/* Capul secțiunii NoAUTO-NoAI n-are ilustrație: revine la o singură coloană. */
.s1-more-head-flush { display: block; padding: 0; margin-bottom: 26px; }
/* Aici stăteau cinci blocuri de declarații fără selector și fără acoladă de
   deschidere — CSS invalid, aruncat de browser, moștenit identic din v8:

     display: grid; grid-template-columns: 1.4fr 1fr; gap: 34px; align-items: start; }
     color: #00849c; font-weight: 700; }
     font-size: 14.5px; line-height: 1.6; color: var(--ink); }
     border-radius: 2px; background: linear-gradient(135deg, #00497c, #98a8bc); }
     background: var(--alt); font-size: 14px; line-height: 1.6; color: var(--ink); }

   Șterse în E9 (2026-07-28). Nu au fost reconstruite: niciun selector din familia
   lor nu mai are corespondent în marcaj, deci aparțineau unei secțiuni scoase la
   un moment dat din pagină. A le inventa nume ar fi însemnat reguli moarte cu
   selectori închipuiți — mai rău decât absența lor. Declarațiile rămân scrise
   aici, în comentariu, dacă secțiunea se întoarce vreodată. */

/* ── „Platforma Agenților AI" — formă de prezentare ─────────────────────
   Fiecare capitol e o bandă cu culoare proprie de accent (--acc/--accbg),
   iar conținutul e spart în carduri pe grilă: cardurile scurte stau 2–3 pe
   rând, cele lungi (peste ~20 de blocuri) ocupă tot rândul. */
/* ── Banda cu clienți, aceleași reguli ca în S3 ──────────────────────────
   Linia gri de sub „Contactați-ne" iese: imediat dedesubt vine banda cu
   clienți, care are bordura ei de sus, deci s-ar lipi două linii. Regula
   globală din styles.css rămâne neatinsă — .pd-contact e folosit pe zeci de pagini. */
.pd-contact { border-bottom: 0; }
/* Spațiu egal deasupra și dedesubtul benzii: deasupra din padding-ul lui
   .pd-contact, dedesubt din marginea benzii. 52, nu 44, fiindcă butonul
   „Contactați-ne" e inline-block și coboară cu 8px sub caseta de conținut. */
body.svc-detail-page .pd-contact { padding-bottom: 52px; }
/* Aer între bandă și bara de capitole lipită sub ea. .cat-carousel e
   full-bleed, cu margini laterale negative — le lăsăm, punem doar cea de jos. */
.s1-clients { margin-bottom: 44px; }

.s1-pres { padding-top: 48px; padding-bottom: 0; }
/* Bara de capitole: același tipar ca .industries-bar din industries.html,
   dar lipită sub bara albastră de titlu (--hdr-h + --bar-h),
   deci apare exact după ce bara gri cu problema și bulinele a plecat în sus.
   z-index 91: peste bara de probleme (90), sub mega-meniul la hover (95). */
.s1-chapbar { top: calc(var(--hdr-h) + var(--bar-h)); z-index: 91; }
.s1-chapbar a { padding: 15px 18px; font-size: 13.5px; text-decoration: none; }
@media (max-width: 900px) { .s1-chapbar a { padding: 13px 14px; font-size: 12.5px; } }

/* Capitolele curg direct pe fundalul paginii: fără chenar, fără fundal propriu.
   Deschiderea de capitol = titlul + bara groasă cu gradient de sub el. */
.s1-p-chapter { max-width: var(--lat-lectura); margin: 0 auto 60px; padding: 0 40px; scroll-margin-top: calc(var(--hdr-h) + var(--bar-h) + var(--nav-h)); }
/* Separator de capitol: aceeași linie ca între secțiunile de pe prima pagină
   (.home-sep) — dungă gri plus umbra albastră care se stinge în jos — dusă pe
   toată lățimea ecranului cu procedeul folosit deja de .svc-arch-sep.
   Marginea de jos e cu 8px mai mică decât cea de sus, exact cât ocupă banda
   de umbră, ca distanța de la LINIE la conținut să fie 60px de ambele părți. */
.s1-p-chapsep { border: 0; border-top: 1px solid var(--line); height: 8px;
  position: relative; left: 50%; width: 100vw; margin: 60px -50vw 52px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.16) 0%,
    rgba(0, 0, 0, 0.03) 22%, rgba(0, 0, 0, 0) 55%); }
.s1-p-ctitle { margin: 0; font-size: 26px; line-height: 1.25; color: var(--ink); letter-spacing: .2px; }
.s1-p-chead .ph-line { display: block; max-width: 420px; margin: 12px 0 0; }
.s1-p-fig { margin: 26px 0 0; padding: 14px; background: #fff;
  border: 1px solid var(--acc); border-radius: 10px; }
.s1-p-fig svg { width: 100%; height: auto; display: block; }
.s1-p-body { margin-top: 30px; }

.s1-p-lead { margin: 0 0 24px; }
/* Cele două definiții din deschidere: termenul ca pastilă, definiția lângă el. */

/* Paragraful-definiție de sub titlul capitolului: aceeași tipografie ca restul
   descrierilor (o moștenește din .s1-p-lead) — proprie îi e doar spațierea. */
.s1-p-defintro { margin: 20px 0 0; }
.s1-p-defintro .s1-doc-p { margin: 0 0 12px; }
.s1-p-defintro .s1-doc-p:last-child { margin-bottom: 0; }
/* cei cinci termeni ai definiției: îngroșați și subliniați, fără schimbare de
   culoare sau de mărime; offset-ul ține linia sub diacritice. */
.s1-p-defintro strong { font-weight: 700; text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1px; }
.s1-p-defs { margin: 4px 0 18px; }
.s1-p-def { display: flex; align-items: baseline; gap: 14px; margin: 0 0 10px;
  padding: 12px 16px; border-left: 3px solid var(--acc); border-radius: 0 8px 8px 0;
  background: var(--accbg); }
.s1-p-def-term { flex: 0 0 auto; min-width: 104px; font-size: 15px; font-weight: 700; color: var(--acc); }
.s1-p-def-txt { font-size: 14.5px; line-height: 1.65; color: var(--ink); }
@media (max-width: 560px) {
  .s1-p-def { flex-direction: column; gap: 4px; }
  .s1-p-def-term { min-width: 0; }
}
.s1-p-sec { margin-bottom: 34px; }
/* Separator între secțiunea caracteristicilor și cea a domeniilor: cât ține
   conținutul (nu toată lățimea ecranului), cu spațiu egal sus și jos.
   44px > cei 34px ai secțiunii de deasupra, deci marginile colapsate dau tot 44. */
.s1-p-sep { width: 100%; margin: 44px auto; border: 0; border-top: 1px solid #cfd5dc; }
/* Titlurile centrate au padding-top propriu (15px sau 25px). Cand deasupra lor
   vine un separator, acel padding s-ar adauga la cei 44px de sub linie si
   spatiul n-ar mai fi egal cu cel de deasupra — deci il anulez. */
.s1-p-sep + .s1-p-sec-title,
.s1-p-sep + .s1-p-sec > .s1-p-sec-title { padding-top: 0; }
.s1-p-sec-title { margin: 0 0 16px; padding-left: 14px; font-size: 20px; line-height: 1.3;
  color: var(--acc); border-left: 3px solid var(--acc); }

/* Cele patru caracteristici esențiale: text și ilustrație alternând stânga/dreapta.
   Fiecare rând își poartă culoarea proprie prin --acc, moștenită de buline și titlu. */
/* Titlul secțiunii celor patru caracteristici: centrat, în albastru Cronoxy,
   fără bara de accent din stânga (care presupunea aliniere la stânga). */
.s1-p-sec-title-center { text-align: center; color: #00497c;
  border-left: 0; padding-left: 0; margin-bottom: 30px; }
/* puțin aer față de paragraful de deasupra */
.s1-p-sec-title-gap { padding-top: 15px; }
/* Fundația Datelor: mai mult aer deasupra, mai puțin sub — paragraful ei
   centrat vine imediat dedesubt. Declarat după .s1-p-sec-title-center,
   ca margin-bottom-ul de aici să câștige (aceeași specificitate). */
.s1-p-sec-title-hug { padding-top: 25px; margin-bottom: 10px; }
/* paragraful de sub un titlu centrat urmează alinierea titlului */
.s1-p-lead-center { text-align: center; margin-bottom: 30px; }

.s1-p-feat { display: grid; grid-template-columns: 1fr 1fr; gap: 34px;
  align-items: center; margin-bottom: 34px; }
.s1-p-feat-alt .s1-p-feat-body { order: 2; }
.s1-p-feat-alt .s1-p-feat-fig { order: 1; }
.s1-p-feat-title { margin: 0 0 12px; padding-bottom: 10px; font-size: 18px; line-height: 1.3;
  color: var(--acc); border-bottom: 2px solid var(--acc); border-bottom-color: color-mix(in srgb, var(--acc) 25%, transparent); }
.s1-p-feat-fig { margin: 0; }
/* nota de sub lista fiecărui domeniu: observație de aplicabilitate */
.s1-p-feat-note { margin: 12px 0 0; padding: 10px 14px; border-left: 3px solid var(--acc);
  border-radius: 0 6px 6px 0; background: color-mix(in srgb, var(--acc) 8%, transparent);
  font-size: 13.5px; line-height: 1.6; color: var(--ink); }

.s1-p-feat-fig svg { width: 100%; height: auto; display: block; }
@media (max-width: 760px) {
  .s1-p-feat { grid-template-columns: 1fr; gap: 18px; }
  .s1-p-feat-alt .s1-p-feat-body { order: 0; }
  .s1-p-feat-alt .s1-p-feat-fig { order: 1; }
}

.s1-p-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px; align-items: start; }
/* Grilă pe toată lățimea ecranului: cele cinci „M"-uri intră pe un singur rând.
   Același procedeu de ieșire din coloana de conținut ca la .s1-p-chapsep. */
.s1-p-grid-wide { position: relative; left: 50%; width: 100vw;
  margin-left: -50vw; margin-right: -50vw; padding: 0 40px;
  grid-template-columns: repeat(5, 1fr); }
/* Grilă cu un singur card: centrat, nu întins pe toată coloana. */
.s1-p-grid-solo { grid-template-columns: minmax(0, 720px); justify-content: center; }
@media (max-width: 1180px) { .s1-p-grid-wide { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .s1-p-grid-wide { grid-template-columns: 1fr; padding: 0 18px; } }
.s1-p-card { background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: 20px 22px; box-shadow: 0 1px 2px rgba(0, 44, 74, .04); }
.s1-p-card-wide { grid-column: 1 / -1; }
/* cardul lat își aerisește conținutul pe două coloane, fără să rupă un bloc */
.s1-p-card-wide .s1-p-card-body { columns: 2; column-gap: 40px; }
.s1-p-card-wide .s1-p-card-body > * { break-inside: avoid; }
.s1-p-card-title { margin: 0 0 14px; padding-bottom: 10px; font-size: 16.5px; line-height: 1.35;
  color: var(--ink); border-bottom: 2px solid var(--accbg); }

/* tipografia din interiorul cardurilor */
.s1-doc-h3, .s1-doc-h4 { margin: 18px 0 8px; font-size: 15.5px; line-height: 1.35; color: var(--ink); }
.s1-doc-sub { margin: 16px 0 6px; font-size: 14.5px; line-height: 1.45;
  font-weight: 700; color: var(--acc); }
.s1-doc-lbl { display: inline-block; margin: 12px 0 8px; padding: 3px 10px; border-radius: 12px;
  background: var(--accbg); color: var(--acc); font-size: 11.5px; font-style: normal;
  font-weight: 700; letter-spacing: .04em; }
.s1-doc-p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.65; color: var(--muted); }
.s1-p-lead .s1-doc-p { font-size: 15.5px; line-height: 1.7; }
.s1-p-card-body strong, .s1-p-lead strong { color: var(--ink); font-weight: 650; }

.s1-doc-list, .s1-doc-sublist { margin: 0 0 12px; padding: 0; list-style: none; }
.s1-doc-list > li, .s1-doc-sublist > li { position: relative; padding-left: 20px;
  margin-bottom: 7px; font-size: 14px; line-height: 1.6; color: var(--ink); }
.s1-doc-list > li::before { content: ""; position: absolute; left: 0; top: 7px;
  width: 7px; height: 7px; border-radius: 2px; background: var(--acc); }
.s1-doc-sublist { margin: 6px 0 4px; padding-left: 20px; }
.s1-doc-sublist > li::before { content: ""; position: absolute; left: 0; top: 9px;
  width: 5px; height: 5px; border-radius: 50%; background: #98a8bc; }
.s1-doc-ol { margin: 0 0 12px; padding-left: 20px; }
.s1-doc-ol li { margin-bottom: 7px; font-size: 14px; line-height: 1.6; color: var(--ink); }
.s1-doc-ol li::marker { color: var(--acc); font-weight: 700; }
.s1-doc-hr { display: none; }

.s1-doc-tablewrap { overflow-x: auto; margin: 0 0 14px; }
.s1-doc-table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.s1-doc-table th, .s1-doc-table td { border: 1px solid var(--line);
  padding: 9px 11px; text-align: left; line-height: 1.55; vertical-align: top; }
.s1-doc-table th { background: var(--accbg); color: var(--ink); font-weight: 700; }
.s1-doc-table td { color: var(--muted); }

@media (max-width: 900px) {
  .s1-p-chapter { padding: 0 18px; margin-bottom: 44px; }
  .s1-p-ctitle { font-size: 22px; }

  .s1-p-card-wide .s1-p-card-body { columns: 1; }
}

/* fundal alb; delimitarea o face separatorul de capitol de deasupra.
   52px + cei 8px ai benzii de umbră = 60px de la linie la titlu, cât
   lasă și marja ultimului capitol deasupra liniei. */
.s1-noai { background: #fff; padding: 52px 0 54px; scroll-margin-top: calc(var(--hdr-h) + var(--bar-h) + var(--nav-h)); }
.s1-noai-sep { margin-top: 0; margin-bottom: 0; }
/* ultimul capitol se apropie de linia dinaintea secțiunii NoAUTO */
.s1-pres > .s1-p-chapter:last-child { margin-bottom: 28px; }
.s1-noai-inner { max-width: var(--lat-lectura); margin: 0 auto; padding: 0 40px; }
.s1-gates { display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); gap: 18px; }
.s1-gate { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px; }
.s1-gate-num { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  margin-bottom: 10px; border-radius: 50%; background: linear-gradient(135deg, #00497c, #98a8bc);
  color: #fff; font-size: 13px; font-weight: 700; line-height: 1; }
.s1-gate h4 { margin: 0 0 8px; font-size: 16.5px; line-height: 1.3; color: var(--ink); }
.s1-gate p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted); }
.s1-noai-close { margin: 26px 0 0; padding: 20px 24px; border-radius: 10px; color: #fff;
  font-size: 15px; line-height: 1.6; background: linear-gradient(135deg, #00497c, #98a8bc); }

@media (max-width: 900px) {
  .s1-more-head { grid-template-columns: 1fr; grid-template-rows: none; gap: 22px; }
  .s1-more-head-title, .s1-more-head-text, .s1-more-head-figure {
    grid-column: 1; grid-row: auto; margin-top: 0; }

  /* ── Gutiera se ține O SINGURĂ DATĂ, de secțiune ──────────────────────────
     Secțiunile de jos (IA · Ce reprezintă un agent AI · Avantaje · Riscuri ·
     Serviciile noastre · NoAUTO și NoAI) aveau marginile laterale DUBLE față de
     partea de sus a paginii: conținutul pornea de la 36px, nu de la 18.

     Cauza era cuibărirea. Pe telefon se adunau două straturi de câte 18px:

       section.home-section.s1-more   18px  ─┐ 36px
         article.s1-p-chapter         18px  ─┘

       div.s1-noai-inner              18px  ─┐ 36px
         div.s1-more-head             18px  ─┘

     Stratul exterior rămâne singurul care ține gutiera — la fel ca tiparul
     `.capabilities > .svc-inner` din `styles.css`. Containerele dinăuntru se
     zerodează, iar conținutul se aliniază la 18px, ca banner-ul și blocurile
     de problemă din partea de sus.

     `.s1-noai-inner` PĂSTREAZĂ cei 18px: secțiunea lui, `.s1-noai`, are
     `padding: 52px 0 54px`, deci pe orizontală zero — acolo el e stratul
     exterior, nu unul cuibărit. */
  .s1-noai-inner { padding: 0 18px; }
}

/* Zerodarea stratului cuibărit ține până la 1024px, nu doar la 900.
   ────────────────────────────────────────────────────────────────────────────
   Tabletele mici în portret (768px) intră în regula de mai sus. Cele mari —
   iPad Pro 12.9" are 1024px în portret — nu intrau, iar acolo se adunau două
   straturi de câte 40px: capitolele porneau de la 80px, în timp ce secțiunile
   din partea de sus a paginii porneau de la 40. Exact aceeași dublare ca pe
   telefon, doar la altă scară.

   Pragul nu e ales la întâmplare: `styles.css` tratează deja intervalul
   `min-width: 1025px` ca laptop, deci 1024 e ultima lățime de tabletă.

   Gutiera rămâne cea a stratului exterior — 18px sub 900, 40px între 901 și
   1024 — iar conținutul se aliniază cu restul paginii la orice lățime. */
@media (max-width: 1024px) {
  .s1-more > .s1-p-chapter,
  .s1-noai-inner .s1-more-head { padding-left: 0; padding-right: 0; }
}

/* Elementele de grilă au implicit `min-width: auto`, adică nu coboară sub
   lățimea propriului conținut. Cardurile refuzau astfel să scadă sub 341px și
   împingeau pagina la 377px pe un ecran de 320px. */
.s1-p-grid > *, .s1-p-grid-wide > * { min-width: 0; }
.s1-p-card { overflow-wrap: anywhere; }


/* `.s1-p-grid` e `repeat(auto-fit, minmax(320px, 1fr))`: la 681px lățime încap
   două coloane singur. Regula de la ≤900px îl forța pe una, deci pe tabletă
   cardurile ieșeau late de 681px. O coloană rămâne doar pe telefon, unde
   `auto-fit` ar da oricum una. */
@media (max-width: 560px) {
  .s1-p-grid { grid-template-columns: 1fr; }
}


/* ── Cardurile care conțin tabele, fără ramă și fără gutieră ─────────────────
   Cele două blocuri din capitolul „IA" — comparația AI vs. inteligența umană și
   abordarea „AI + Factorul Uman" — au conținut lat, care se strânge inutil în
   interiorul cardului obișnuit.

   Se scot exact trei proprietăți moștenite de la `.s1-p-card`:
     · `border`         — rama de 1px, care mai fura 2px de lățime;
     · `padding`        — cei 22px de o parte și de alta, adică 44px pierduți;
     · `overflow-wrap`  — `anywhere` rupea cuvintele oriunde, potrivit pentru
                          text curgător, nepotrivit într-un tabel, unde tăia
                          termenii la mijloc în loc să lase coloana să respire.

   Modificator, nu regulă pe `.s1-p-card`: clasa e folosită de 7 carduri pe
   pagină, iar celelalte cinci trebuie să rămână așa cum sunt.

   Două clase (0,2,0) bat regula `.s1-p-card { overflow-wrap: anywhere; }` de mai
   sus (0,1,0), deci nu depinde de ordinea din fișier.

   Fără prag de dimensiune: se aplică la fel pe desktop și pe telefon. */
.s1-p-card.s1-p-card-flush {
    border: 0;
    padding: 0;
    overflow-wrap: normal;
}