/* Pagina „Despre noi" (21 oct 2026, `scripts/fa-pagina-despre.js`), a doua varianta. Marius: „minimalist, nu cu atât de
   mult neon, mai mult îndreptat spre brand de publicitate, fără glow-uri și linii".

   Hartie alba, tipografie mare (Sora pentru titluri, Inter pentru text, ca restul site-ului), poze curate. Un singur
   element de forma: titlul si finalul stau pe o „placuta" de plexiglas cu patru distantiere - produsul atelierului.
   Rozul marcii apare doar pe butoane si pe semnul mic din fata etichetelor. */

.nd {
  --hartie: #ffffff; --gri: #f3f3f5; --cerneala: #121216; --text2: #55555e; --text3: #7a7a84; --margine: #e4e4ea;
  --roz: #d1127e;  /* rozul marcii, varianta care se citeste pe alb (4,8:1) */
  background: var(--hartie); color: var(--cerneala); font-family: Inter, system-ui, sans-serif;
}
/* resetarile, fara greutate (`:where`), ca orice clasa de mai jos sa le bata */
:where(.nd) :where(h1, h2, h3) { font-family: Sora, Inter, sans-serif; color: var(--cerneala); letter-spacing: -.025em; margin: 0; }
:where(.nd) :where(p, figure) { margin: 0; }
.nd img { display: block; width: 100%; height: auto; }
.nd a:not(.nl-buton) { color: var(--cerneala); text-decoration: underline; text-decoration-color: var(--roz); text-underline-offset: 3px; text-decoration-thickness: 2px; }
.nd a:not(.nl-buton):hover { color: var(--roz); }

/* ---- placuta: alb, colturi rotunjite, patru distantiere metalice in colturi */
.nd-placa { position: relative; background: var(--hartie); border-radius: 20px; padding: 64px 60px;
  box-shadow: 0 1px 2px rgba(18, 18, 22, .06), 0 18px 40px -24px rgba(18, 18, 22, .25); }
.nd-surub { position: absolute; width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fbfbfc 0 18%, #c9cbd2 45%, #8e919a 100%); box-shadow: 0 1px 1px rgba(0, 0, 0, .25); }
.nd-surub:nth-child(1) { top: 20px; left: 20px; }
.nd-surub:nth-child(2) { top: 20px; right: 20px; }
.nd-surub:nth-child(3) { bottom: 20px; left: 20px; }
.nd-surub:nth-child(4) { bottom: 20px; right: 20px; }

/* ---- primul ecran: placuta cu titlul pe gri, fotografia din atelier alaturi */
.nd-erou { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 28px; align-items: stretch;
  background: var(--gri); padding: 40px 48px 48px; }
.nd-erou .nd-placa { display: flex; flex-direction: column; justify-content: center; }
.nd-eticheta { font: 600 13px/1 Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--text3); margin-bottom: 26px; }
.nd-erou h1 { font-size: clamp(40px, 5.4vw, 78px); line-height: 1.02; font-weight: 700; letter-spacing: -.035em; max-width: 11ch; margin-bottom: 26px; }
.nd-lead { font-size: clamp(17px, 1.5vw, 19px); line-height: 1.6; color: var(--text2); max-width: 46ch; margin-bottom: 34px; }
.nd-butoane { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.nd .nd-link { font-weight: 600; text-decoration: none; }
.nd-erou-poza { border-radius: 20px; overflow: hidden; min-height: 100%; }
.nd-erou-poza img { height: 100%; object-fit: cover; }

/* ---- blocurile */
.nd-bloc { max-width: 1120px; margin: 0 auto; padding: 96px 48px 0; }
.nd .nd-titlu-mic { font: 600 13px/1 Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--text3);
  display: flex; align-items: center; gap: 10px; margin-bottom: 34px; }
.nd .nd-titlu-mic::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--roz); }

.nd-text { max-width: 760px; display: grid; gap: 18px; }
.nd-text p { font-size: 18px; line-height: 1.7; color: var(--text2); }
.nd-text .nd-mare { font-family: Sora, Inter, sans-serif; font-size: clamp(24px, 2.8vw, 36px); line-height: 1.25; font-weight: 600;
  letter-spacing: -.02em; color: var(--cerneala); margin-bottom: 10px; }

/* ---- pe scurt: patru fapte, fara cutii */
.nd-fapte dl { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.nd-fapte dt { font: 700 clamp(38px, 4.4vw, 56px)/1 Sora, sans-serif; letter-spacing: -.03em; margin-bottom: 12px; }
.nd-fapte dd { margin: 0; color: var(--text2); font-size: 15px; line-height: 1.45; max-width: 22ch; }

/* ---- drumul: anul in stanga, textul, fotografia */
.nd-pasi { list-style: none; margin: 0; padding: 0; display: grid; gap: 72px; }
.nd-pas { display: grid; grid-template-columns: 150px minmax(0, 1fr) 300px; gap: 40px; align-items: start; }
.nd-cand { font: 700 15px/1.2 Sora, sans-serif; color: var(--roz); padding-top: 6px; }
.nd-pas h3 { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.15; margin-bottom: 14px; }
.nd-pas p { font-size: 17px; line-height: 1.7; color: var(--text2); max-width: 52ch; }
.nd-pas-poza { border-radius: 14px; overflow: hidden; background: var(--gri); }
.nd-pas-poza img { aspect-ratio: 4 / 5; object-fit: cover; }

/* ---- atelierul */
.nd-cap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 10px 40px; margin-bottom: 34px; }
.nd .nd-cap .nd-titlu-mic { margin-bottom: 0; }
.nd-cap p { color: var(--text2); font-size: 17px; max-width: 52ch; }
.nd-galerie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.nd-foto img { aspect-ratio: 3 / 4; object-fit: cover; border-radius: 14px; background: var(--gri); }
.nd-foto figcaption { margin-top: 12px; font-size: 14px; color: var(--text2); }

/* ---- cum lucram (o secventa adevarata: ordinea conteaza) */
.nd-patru { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; counter-reset: pas; }
.nd-patru li { counter-increment: pas; }
.nd-patru li::before { content: counter(pas); display: block; font: 700 15px/1 Sora, sans-serif; color: var(--roz); margin-bottom: 18px; }
.nd-patru h3 { font-size: 20px; line-height: 1.25; margin-bottom: 10px; }
.nd-patru p { color: var(--text2); line-height: 1.6; font-size: 16px; }

/* ---- clientii: lista unei agentii, numele unul dupa altul, mari */
.nd-lista-clienti { font: 600 clamp(24px, 3vw, 40px)/1.35 Sora, sans-serif; letter-spacing: -.02em; max-width: 26ch; color: var(--cerneala); }
.nd-lista-clienti span { white-space: nowrap; }
.nd-lista-clienti span:not(:last-child)::after { content: " /"; color: #c5c5cd; font-weight: 400; }
.nd-nota { margin-top: 26px; color: var(--text2); font-size: 16px; }

/* ---- finalul: placuta, pe gri */
.nd-final { background: var(--gri); margin-top: 110px; padding: 80px 48px; }
.nd-placa--final { max-width: 760px; margin: 0 auto; text-align: center; }
.nd-placa--final h2 { font-size: clamp(32px, 4vw, 52px); line-height: 1.05; letter-spacing: -.03em; margin-bottom: 16px; }
.nd-placa--final p { color: var(--text2); font-size: 18px; line-height: 1.6; margin: 0 auto 30px; max-width: 44ch; }
.nd-placa--final .nd-butoane { justify-content: center; }

/* aparitia la derulare: o singura data, discreta (despre.js pune .nd-vizibil) */
.nd-js [data-nd-apare] { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.nd-js [data-nd-apare].nd-vizibil { opacity: 1; transform: none; }

@media (max-width: 960px) {
  .nd-pas { grid-template-columns: 110px minmax(0, 1fr); }
  .nd-pas-poza { grid-column: 2; max-width: 420px; }
  .nd-fapte dl, .nd-patru { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .nd-erou { grid-template-columns: minmax(0, 1fr); padding: 14px; gap: 14px; }
  .nd-placa { padding: 48px 26px 44px; border-radius: 16px; }
  .nd-surub { width: 11px; height: 11px; }
  .nd-surub:nth-child(1), .nd-surub:nth-child(2) { top: 14px; }
  .nd-surub:nth-child(3), .nd-surub:nth-child(4) { bottom: 14px; }
  .nd-surub:nth-child(1), .nd-surub:nth-child(3) { left: 14px; }
  .nd-surub:nth-child(2), .nd-surub:nth-child(4) { right: 14px; }
  .nd-erou-poza { min-height: 0; border-radius: 16px; }
  .nd-erou-poza img { aspect-ratio: 4 / 3; }
  .nd-bloc { padding: 64px 20px 0; }
  .nd-pasi { gap: 48px; }
  .nd-pas { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .nd-pas-poza { grid-column: auto; max-width: none; }
  .nd-pas-poza img { aspect-ratio: 4 / 3; }
  .nd-galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .nd-foto:first-child { grid-column: span 2; }
  .nd-foto:first-child img { aspect-ratio: 4 / 3; }
  .nd-final { margin-top: 72px; padding: 40px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .nd-js [data-nd-apare] { opacity: 1; transform: none; transition: none; }
}