/* ── Secțiuni suplimentare S3: ce construim · stack-ul · cum lucrăm ────── */
/* Linia gri de sub „Contactați-ne": pe pagina asta urmează caruselul de
   clienți, care are propria bordură de sus, deci ar fi două linii lipite.
   Regula din styles.css rămâne neatinsă — .pd-contact e folosit pe 31 de pagini. */
.pd-contact { border-bottom: 0; }
/* Spațiu egal deasupra și dedesubtul benzii cu clienți: deasupra vine din
   padding-bottom-ul lui .pd-contact (90px pe restul paginilor de serviciu),
   dedesubt din marginea benzii. Specificitate egală cu regula din styles.css,
   deci câștigă prin ordine — blocul acesta e după <link>.
   52, nu 44: butonul „Contactați-ne" e inline-block și coboară cu 8px sub
   marginea casetei de conținut, deci 52px de padding dau 44px de gol vizibil. */
body.svc-detail-page .pd-contact { padding-bottom: 52px; }
.sd-extra { display: block; }
/* Aer între caruselul de clienți și bara de navigare lipită de sub el.
   .cat-carousel e full-bleed, cu margini laterale negative — nu le atingem,
   punem doar marginea de jos. */
.sd-extra .clients-band { margin-bottom: 44px; }
/* Bara de navigare în pagină, ca .s1-chapbar din pagina serviciului S1:
   lipită sub header + bara albastră de titlu: --hdr-h + --bar-h.
   z-index 91 ca să treacă peste bara gri de probleme (90) când o ajunge. */
.s3-navbar { top: calc(var(--hdr-h) + var(--bar-h)); z-index: 91; }
.s3-navbar a { padding: 15px 18px; font-size: 13.5px; text-decoration: none; }
@media (max-width: 900px) { .s3-navbar a { padding: 13px 14px; font-size: 12.5px; } }
.sd-section { padding-top: 56px; padding-bottom: 56px; }
.sd-section + .sd-section { padding-top: 0; }
/* Separator între „Ce construim" și „Cum construim": aceeași linie de 1px
   ca border-bottom-ul secțiunii „Contactați-ne" de deasupra. Spațiul de
   deasupra vine din padding-bottom-ul secțiunii precedente, cel de dedesubt
   din padding-top-ul celei următoare — ambele 56px, deci egale. */
.sd-sep { border: 0; border-top: 1px solid var(--ph3); height: 0; margin: 0; }
.sd-sep + .sd-section { padding-top: 56px; }
/* Antetul „Tehnologii" stă mai aproape de banda cu cele 5 coloane. */
#tehnologii { padding-bottom: 20px; }

/* Ce construim — patru rânduri alternante, ilustrația prima: imagine stânga /
   text dreapta la Web și Desktop, invers la Mobile și BackOffice. Același tipar
   ca .product-row de pe pagina de produse. */
.sd-build-list { display: flex; flex-direction: column; gap: 46px; }
.sd-row { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: center; }
.sd-row.reverse .sd-row-media { order: -1; }
.sd-row-title { display: flex; align-items: center; gap: 12px; margin: 0 0 14px;
  font-size: 21px; line-height: 1.3; color: var(--ink); letter-spacing: .2px; }
.sd-row-ico { width: 26px; height: 26px; flex: none; color: #2f6ea5; }
.sd-row-text-p { margin: 0; font-size: 15px; line-height: 1.68; color: var(--muted); }
/* CTA-ul fiecărui tip de soluție: jos, la marginea din dreapta a coloanei de text. */
.sd-row-cta { display: flex; justify-content: flex-end; margin-top: 22px; }
.sd-row-cta .btn-cta { font-size: 13.5px; padding: 11px 20px; }
.sd-row-media { background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 14px; box-shadow: 0 14px 34px rgba(0, 73, 124, 0.09); }
.sd-row-media img { display: block; width: 100%; height: auto; }


/* Cum construim — aceleași rânduri alternante ca la „Ce construim". */
.sd-steps { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none;
  counter-reset: sdstep; }
.sd-step { display: flex; align-items: center; gap: 9px; padding: 8px 14px 8px 10px;
  background: #fff; border: 1px solid var(--line); border-radius: 24px;
  font-size: 13px; font-weight: 600; color: #00497c; }
.sd-step::before { counter-increment: sdstep; content: counter(sdstep);
  display: inline-flex; align-items: center; justify-content: center;
  width: 19px; height: 19px; flex: none; border-radius: 50%;
  background: #00497c; color: #fff; font-size: 11.5px; font-weight: 700; }

@media (max-width: 1024px) {
  .sd-row { grid-template-columns: 1fr; gap: 22px; }
  .sd-row.reverse .sd-row-media { order: 0; }   /* imaginea trece sub text */
}
@media (max-width: 900px) {
  .sd-section { padding-left: 18px; padding-right: 18px; }
}