/* ═════════════════════════════════════════════════════════
   informs - Componente refolosite de mai multe pagini: cardul .wcard
   si blocul de final .cta.
   ═════════════════════════════════════════════════════════ */

.wcard--wide { grid-column: span 2; }

.wcard {
  display: flex;
  flex-direction: column;
  border-radius: var(--card-r);
  overflow: hidden;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}

.wcard:hover { border-color: var(--line-str); transform: translateY(-4px); }

.wcard__art {
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;
}

.wcard--wide .wcard__art { aspect-ratio: 32 / 9; }

.wcard__body {
  padding: 26px 26px 30px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.wcard__tag {
  font-size: 12px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted-3); margin-bottom: 12px;
}

.wcard__title {
  font-size: var(--fs-h3);
  line-height: 28px;
  font-weight: 500;
  color: var(--white);
  margin-bottom: 20px;
}

.wcard .lnk { margin-top: auto; align-self: flex-start; }

.sect--cta { padding-block: var(--sect-lg); }

.cta {
  text-align: center;
  padding: 72px 40px;
  border-radius: 32px;
  background: var(--navy-800);
  border: 1px solid var(--line);
}

.cta__title { font-size: 56px; line-height: 62px; letter-spacing: -1.6px; }

.cta__lead {
  margin: 20px auto 0;
  max-width: 48ch;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--muted);
}

.cta__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 36px; }

@media (max-width: 1023px) {
  .wcard--wide { grid-column: span 2; }
  .wcard--wide .wcard__art { aspect-ratio: 16 / 7; }
  .cta { padding: 56px 28px; }
  .cta__title { font-size: 40px; line-height: 46px; }
}

@media (max-width: 640px) {
  .wcard--wide { grid-column: span 1; }
  .wcard--wide .wcard__art { aspect-ratio: 16 / 9; }
  .cta { padding: 44px 22px; border-radius: 24px; }
  .cta__title { font-size: 32px; line-height: 38px; }
  .cta__row { flex-direction: column; align-items: stretch; }
}

/* ── Banda cu chip-uri derulante ─────────────────────────────
   Folosită pe acasă și pe despre-noi. Stătea în home.css, pe care
   despre-noi nu îl încarcă, deci acolo banda apărea fără fundal și
   cu chip-urile lipite într-un singur rând de text. */
.band {
  position: relative;
  isolation: isolate;
  background: var(--navy-700);
  padding-block: var(--sect-md) var(--sect-sm);
  overflow: hidden;
}

/* Capitel ionic, gravură de Agostino Veneziano (1528), CC0, Metropolitan
   Museum of Art. Sursa în assets/renders/SURSE.md. Stă în colțul din
   dreapta jos, tăiat de marginea benzii, doar ca urmă în fundal. */
.band::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -140px;
  bottom: -200px;
  width: 620px;
  aspect-ratio: 900 / 535;
  background: url("../assets/renders/capitel-ionic.webp") no-repeat center / contain;
  opacity: .16;
  pointer-events: none;
}

@media (max-width: 760px) {
  .band::after { width: 340px; right: -70px; bottom: -70px; opacity: .12; }
}

/* Varianta de pe acasă: linii curbe fine în loc de capitel. Imagine
   Unsplash (Vj1pkbDfbWg), colorată navy-albastru; sursa în SURSE.md. */
.band--curbe {
  background: var(--navy-900) url("../assets/renders/banda-curbe.webp") center / cover no-repeat;
}
.band--curbe::after { content: none; }

.band__head { text-align: center; max-width: 900px; }

.band__title { margin-inline: auto; }

.band__lead {
  margin: 20px auto 0;
  max-width: 58ch;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: rgba(255,255,255,.82);
}

.band__ctrl { display: flex; justify-content: flex-end; margin-top: 18px; }

.marquee {
  margin-top: 52px;
  position: relative;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee__row {
  display: flex;
  gap: 18px;
  width: max-content;
  animation: marquee 32s linear infinite;
}

.marquee:hover .marquee__row,
.marquee.is-paused .marquee__row { animation-play-state: paused; }

@keyframes marquee { to { transform: translateX(-50%); } }

.chip {
  display: inline-flex;
  align-items: center;
  height: 56px;
  padding-inline: 30px;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.3);
  font-family: var(--f-head);
  font-size: 18px;
  font-weight: 500;
  color: var(--white);
  white-space: nowrap;
}

/* Buton de pauză pentru conținutul care se mișcă singur (WCAG 2.2.2).
   Folosit de caruselul din hero și de banda cu chip-uri. */
.pause {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--white);
  border: 1px solid rgba(255,255,255,.3);
  transition: background-color .22s var(--ease), border-color .22s var(--ease);
}

.pause:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.6); }

.pause[hidden] { display: none; }

.pause svg { width: 12px; height: 12px; }

.pause .pause__play { display: none; }

.pause[aria-pressed="true"] .pause__stop { display: none; }

.pause[aria-pressed="true"] .pause__play { display: block; }

/* ── Intro editorial și secțiuni ed (acasă, despre-noi, servicii) ── */
.pintro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}

.pintro__title {
  font-size: 36px;
  line-height: 46px;
  letter-spacing: -.9px;
}

.pintro__body { display: flex; flex-direction: column; gap: 18px; }

.pintro__body p { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--muted); }

.sect--ed { padding-block: var(--sect-sm); }

@media (max-width: 1200px) {
  .pintro { gap: 40px; }
}

@media (max-width: 1023px) {
  .pintro { grid-template-columns: 1fr; gap: 26px; }
  .pintro__title { font-size: 30px; line-height: 39px; }
}

@media (max-width: 640px) {
  .pintro__title { font-size: 25px; line-height: 33px; }
  .chip { height: 46px; padding-inline: 22px; font-size: 15px; }
}

/* ── Pagini interioare (mutat din service.css) ── */
/* Fundal plat, ca hero-ul de pe acasă; linia de jos separă antetul
   paginii de conținut. Sfera în gradient de aici a fost scoasă. */
.phero {
  position: relative;
  margin-top: calc(var(--hdr-h) * -1);
  padding-block: calc(var(--hdr-h) + 64px) 72px;
  background: var(--navy-900);
  border-bottom: 1px solid var(--line);
}

/* Fundal foto sub un voal navy, ca pe acasă: Despre noi (fațada clasică),
   Servicii (arhiva cu sertare). Textul stă pe partea închisă din stânga;
   imaginea se vede în dreapta. Pe mobil voalul e uniform. */
.phero--despre,
.phero--servicii {
  --phero-bg: url("../assets/renders/despre-fundal.webp");
  --phero-bg-m: url("../assets/renders/despre-fundal-1000.webp");
  background:
    linear-gradient(90deg, rgba(12, 0, 50, .94) 0%, rgba(12, 0, 50, .80) 46%, rgba(12, 0, 50, .30) 100%),
    var(--phero-bg) center / cover no-repeat,
    var(--navy-900);
}

.phero--servicii {
  --phero-bg: url("../assets/renders/servicii-fundal.webp");
  --phero-bg-m: url("../assets/renders/servicii-fundal-1000.webp");
}

@media (max-width: 1023px) {
  .phero--despre,
  .phero--servicii {
    background:
      linear-gradient(rgba(12, 0, 50, .84), rgba(12, 0, 50, .84)),
      var(--phero-bg-m) center / cover no-repeat,
      var(--navy-900);
  }
}

.crumbs { margin-bottom: 34px; }

.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.crumbs li { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted-2); }

.crumbs li + li::before {
  content: "";
  width: 5px; height: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  opacity: .6;
}

.crumbs a { transition: color .2s; }

.crumbs a:hover { color: var(--white); }

.crumbs [aria-current="page"] { color: var(--white); font-weight: 600; }

.phero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 64px;
  align-items: end;
}

.phero__title {
  font-size: 56px;
  line-height: 62px;
  letter-spacing: -1.6px;
  max-width: 17ch;
}

.phero__lead {
  margin-top: 20px;
  max-width: 52ch;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--muted);
}

.phero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

.phero__facts {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-left: 1px solid var(--line-str);
  padding-left: 28px;
}

.fact { padding-block: 14px; }

.fact__num {
  display: block;
  font-family: var(--f-head);
  font-size: 38px;
  line-height: 1.1;
  letter-spacing: -1px;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}

.fact__unit { font-size: 22px; color: var(--muted-2); margin-left: 2px; }

.fact__lbl { display: block; margin-top: 4px; font-size: 14px; color: var(--muted-2); }

@media (max-width: 1200px) {
  .phero__title { font-size: 46px; line-height: 53px; letter-spacing: -1.2px; }
  .phero__grid { grid-template-columns: minmax(0, 1fr) 260px; gap: 40px; }
}

@media (max-width: 1023px) {
  .phero { padding-block: calc(var(--hdr-h) + 44px) 56px; }
  .phero__title { font-size: 38px; line-height: 45px; }
  .phero__grid { grid-template-columns: 1fr; gap: 40px; align-items: start; }
  .phero__facts {
      flex-direction: row;
      flex-wrap: wrap;
      gap: 14px 40px;
      border-left: 0;
      border-top: 1px solid var(--line-str);
      padding-left: 0;
      padding-top: 22px;
    }
  .fact { padding-block: 0; }
}

@media (max-width: 640px) {
  .phero__title { font-size: 30px; line-height: 37px; letter-spacing: -.6px; }
  .phero__cta { flex-direction: column; align-items: stretch; }
  .phero__facts { gap: 16px 28px; }
  .fact__num { font-size: 30px; }
  .crumbs { margin-bottom: 24px; }
  .crumbs li { font-size: 13px; }
}

/* ── Componente generice mutate din service.css ── */
.caps__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 64px;
  align-items: end;
  margin-bottom: 56px;
}

.caps__intro { max-width: 46ch; }

.caps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
/* Pentru seturi de patru: 2x2 umple exact, pe când trei coloane
   ar lăsa două locuri goale pe al doilea rând. */
.caps--pair { grid-template-columns: repeat(2, 1fr); }

/* Două seturi de carduri unul sub altul (Servicii: „Pentru cine” și
   documentele pentru lucrări): aceeași distanță ca între carduri. */
.caps + .caps { margin-top: 24px; }

/* Patru etape pe un rând când încap; altfel 2x2, ca .caps--pair.
   Cardurile au link la final, aliniat jos ca să stea pe aceeași linie. */
.caps--four { grid-template-columns: repeat(2, 1fr); }
.caps--four .cap { display: flex; flex-direction: column; }
.caps--four .cap .lnk { margin-top: auto; align-self: flex-start; }
@media (min-width: 1201px) {
  .caps--four { grid-template-columns: repeat(4, 1fr); }
}

.cap {
  position: relative;
  padding: 34px 30px;
  border-radius: var(--card-r);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  transition: border-color .25s var(--ease), background-color .25s var(--ease), transform .25s var(--ease);
}

/* Cardurile etapelor (acasa) au fotografie de fundal, colorata in paleta
   site-ului. Stratul navy de deasupra se ingroasa spre partea de jos,
   unde stau textul si linkul, ca sa ramana la fel de lizibile ca pe navy
   plat. La hover stratul se subtiaza putin si imaginea iese mai tare. */
.cap--art {
  --cap-veil: linear-gradient(180deg, rgba(12, 0, 50, .55) 0%, rgba(12, 0, 50, .84) 45%, rgba(12, 0, 50, .92) 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Fara asta, fundalul se aseaza in interiorul chenarului de 1px si, cu
     no-repeat, sub chenar ramane culoarea de baza a cardului: o linie
     deschisa sus si jos, vizibila mai ales pe telefon. */
  background-origin: border-box;
  transition: border-color .25s var(--ease), background-image .25s var(--ease), transform .25s var(--ease);
}

.cap--art:hover { --cap-veil: linear-gradient(180deg, rgba(12, 0, 50, .45) 0%, rgba(12, 0, 50, .78) 45%, rgba(12, 0, 50, .88) 100%); }

/* Pe mobil cardul e lat si textul il traverseaza tot, deci imaginea
   trece mai mult in spate. */
@media (max-width: 1023px) {
  .cap--art,
  .cap--art:hover { --cap-veil: linear-gradient(180deg, rgba(12, 0, 50, .68) 0%, rgba(12, 0, 50, .88) 45%, rgba(12, 0, 50, .93) 100%); }
}

.cap--art-planificare { background-image: var(--cap-veil), url("../assets/renders/card-planificare-agenda.webp"); }
.cap--art-atribuire   { background-image: var(--cap-veil), url("../assets/renders/card-atribuire-coli.webp"); }
.cap--art-ofertare    { background-image: var(--cap-veil), url("../assets/renders/card-ofertare.webp"); }
.cap--art-executie    { background-image: var(--cap-veil), url("../assets/renders/card-executie.webp"); }

/* Butoanele de sub un set de carduri (Servicii: instrumente, digitalizare). */
.caps__foot { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }

.cap:hover { border-color: var(--line-str); background: rgba(255,255,255,.07); transform: translateY(-3px); }

.cap__idx {
  display: block;
  font-family: var(--f-head);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--blue-text);
  margin-bottom: 18px;
}

.cap__title { font-size: 22px; line-height: 28px; font-weight: 500; margin-bottom: 12px; }

.cap__text { color: var(--muted); margin-bottom: 20px; }

.cap__list { display: flex; flex-direction: column; gap: 10px; }

.cap__list li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  color: var(--muted-2);
}

.cap__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 6px;
  width: 11px; height: 6px;
  border-left: 1.8px solid var(--blue);
  border-bottom: 1.8px solid var(--blue);
  transform: rotate(-45deg);
}

.proc__head { margin-bottom: 56px; max-width: 680px; }

.proc__lead { margin-top: 18px; }

.proc {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.proc__step { position: relative; padding-top: 34px; }

.proc__step::before {
  content: "";
  position: absolute;
  left: 0; right: -24px; top: 13px;
  height: 1px;
  background: var(--line-str);
}

.proc__step:last-child::before { right: 0; }

.proc__step::after {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 4px rgba(6, 90, 247, .22);
}

.proc__num {
  display: block;
  font-family: var(--f-head);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--blue-text);
  margin-bottom: 12px;
}

.proc__body h3 { font-size: 21px; line-height: 27px; font-weight: 500; margin-bottom: 10px; }

.proc__body p { color: var(--muted); margin-bottom: 14px; }

.proc__when {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 13px;
  border: 1px solid var(--line-str);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted-2);
}

.ed {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}

.ed + .ed { margin-top: 72px; }

.ed--rev .ed__art { order: 2; }

.ed__art { width: 100%; }

.ed__body { display: flex; flex-direction: column; }

.ed__title {
  font-size: 34px;
  line-height: 43px;
  letter-spacing: -.8px;
  margin-bottom: 20px;
  max-width: 20ch;
}

.ed__body p {
  font-size: 17px;
  line-height: 27px;
  color: var(--muted);
}

.ed__body p + p { margin-top: 16px; }

.ed__body .lnk { margin-top: 26px; align-self: flex-start; }

/* Două linkuri unul sub altul (Servicii: pagina serviciului, apoi oferta). */
.ed__body .lnk + .lnk { margin-top: 14px; }

@media (max-width: 1200px) {
  .caps__head { grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; }
  .caps { gap: 20px; }
  .caps + .caps { margin-top: 20px; }
}

@media (max-width: 1023px) {
  .caps__head { grid-template-columns: 1fr; gap: 20px; align-items: start; }
  .caps { grid-template-columns: repeat(2, 1fr); }
  .ed { grid-template-columns: 1fr; gap: 28px; }
  .ed + .ed { margin-top: 48px; }
  .ed--rev .ed__art { order: 0; }
  .ed__title { font-size: 28px; line-height: 36px; max-width: none; }
  .proc { grid-template-columns: 1fr; gap: 0; }
  .proc__step { padding: 0 0 32px 34px; }
  .proc__step::before {
        left: 5px; right: auto; top: 6px; bottom: -6px;
        width: 1px; height: auto;
      }
  .proc__step:last-child::before { bottom: auto; height: 0; }
  .proc__step::after { top: 4px; }
}

@media (max-width: 640px) {
  .caps { grid-template-columns: 1fr; }
  .cap { padding: 26px 22px; }
  .ed__title { font-size: 24px; line-height: 32px; }
}

/* ── Secțiune pe hârtie ───────────────────────────────────────
   O secțiune gri deschis pe pagină rupe navy-ul continuu, ca alternanța
   închis/deschis din magazin și din fișa din hero. Nu rescrie
   componentele: redefinește tokenii de culoare, iar titlurile,
   textul, liniile și cardurile din interior urmează singure. */
.sect--paper {
  --white:    #0C0032;
  --muted:    #3D3858;
  --muted-2:  #5B5577;
  --muted-3:  rgba(12, 0, 50, .5);
  --line:     rgba(12, 0, 50, .12);
  --line-str: rgba(12, 0, 50, .22);
  --blue-text: var(--blue);

  background: #F5F6FA;
  color: var(--muted);
  padding-block: var(--sect-lg);
}

/* galbenul de focus dispare pe fundalul deschis */
.sect--paper :focus-visible { outline-color: var(--blue); }

/* --white e navy aici; butonul albastru își păstrează textul alb. */
.sect--paper .btn--blue { color: #FFFFFF; }

.sect--paper .cap { background: #FFFFFF; }
.sect--paper .cap:hover { background: #FFFFFF; }