/**
 * Pagina „Despre noi".
 *
 * Toate valorile sunt MĂSURATE pe exporturile 1:1 primite de la Seba
 * *(1440×3036 și 360×3598)*, 11 august 2026 — culorile pixel cu pixel,
 * mărimile de font din cap-height cu o corecție de 1,5px pentru antialiasing,
 * calibrată pe trei texte a căror mărime era deja știută din sistem.
 * → `Website/Date Claude/34-pagina-despre-noi.md`
 *
 *   container   1118 conținut · 1344 firimituri și titlu
 *   blocuri     2 × 384 · text 543 · gol 24 · imagine 551 · între ele 32
 *   promisiuni  5 × 114 · gap 16 · padding 32 · colț 16 · bordură 1px
 *   pastile     h 32 · colț complet · padding 14 · iconiță 14 · gol 8
 *
 * Convenție de clase: `.inco-dsp*`.
 */

.inco-dsp-pagina {
	--dsp-ink:     var(--darker-cyan, #0A435C);
	--dsp-albastru: var(--cyan, #056E9B);
	--dsp-muted:   #53798A;
	--dsp-line:    var(--light-gray, #C4D2D7);
	--dsp-surface: var(--pure-white, #fff);
	--dsp-pastila: #E8EFFF;

	--dsp-h1-font: clamp(1.5rem, 1rem + 2.2222vw, 3rem);
	--dsp-h1-lh: clamp(1.8125rem, 1.4167rem + 1.7593vw, 3rem);
	--dsp-titlu-font: clamp(1.125rem, 0.8333rem + 1.2963vw, 2rem);
	--dsp-titlu-lh: clamp(1.5rem, 1.2083rem + 1.2963vw, 2.375rem);
	--dsp-corp-font: clamp(0.875rem, 0.7917rem + 0.3704vw, 1.125rem);
	--dsp-corp-lh: clamp(1.375rem, 1.25rem + 0.5556vw, 1.75rem);
	--dsp-supra-font: clamp(0.625rem, 0.5833rem + 0.1852vw, 0.75rem);
	--dsp-nr-font: clamp(1.75rem, 1.3333rem + 1.8519vw, 3rem);
	--dsp-nr-lh: clamp(2.125rem, 1.8333rem + 1.2963vw, 3rem);
	--dsp-rand-titlu-font: clamp(1rem, 0.9167rem + 0.3704vw, 1.25rem);
	--dsp-rand-titlu-lh: clamp(1.5rem, 1.4375rem + 0.2778vw, 1.6875rem);
	--dsp-rand-text-font: clamp(0.75rem, 0.7083rem + 0.1852vw, 0.875rem);
	--dsp-rand-text-lh: clamp(1.25rem, 1.2083rem + 0.1852vw, 1.375rem);
	--dsp-card-pad: clamp(1rem, 0.6667rem + 1.4815vw, 2rem);
	--dsp-card-gap: clamp(0.5rem, 0.3333rem + 0.7407vw, 1rem);
	--dsp-sect-sus: clamp(3rem, 1.8333rem + 5.1852vw, 6.5rem);
	--dsp-antet-jos: clamp(2rem, 1.5rem + 2.2222vw, 3.5rem);

	box-sizing: border-box;
	color: var(--dsp-ink);
	padding-block-end: var(--dsp-sect-sus);
}
.inco-dsp-pagina *, .inco-dsp-pagina ::before, .inco-dsp-pagina ::after { box-sizing: border-box; }

/*
 * 🔴 Tema pune `main.site-main { max-width: 1140px }`, iar `:not()` din regula
 * ei o duce la (0,2,1) — deci o clasă simplă n-o bate. Aceeași capcană ca pe
 * arhivă și pe homepage. → §4g
 */
html body:is(.inco-despre-page, .inco-b2b-page) main.site-main {
	max-width: none;
	width: 100%;
	padding-inline: 0;
}

/*
 * 🔴 Fundalul paginii e `#FAFCFF`, nu alb — măsurat pe export.
 *
 * Contează: cardurile promisiunilor sunt ALBE. Pe un fundal tot alb ar rămâne
 * doar cu bordura, adică exact cu jumătate din ce le desparte de pagină.
 *
 * ⚠️ Se scrie pe `body`, NU pe containerul nostru. Banda de faguri e un
 * `::before` la `z-index: -1` pe `.site-main`; un fundal opac pus pe un COPIL
 * al lui i-ar picta peste — l-ar face să dispară fără nicio eroare.
 */
html body:is(.inco-despre-page, .inco-b2b-page) { background-color: var(--white-bg, #FAFCFF); }

/*
 * 🔑 DOUĂ lățimi, cum e în machetă: firimiturile și titlul stau pe containerul
 * obișnuit *(1344, adică 48px de fiecare parte la 1440)*, iar conținutul pe
 * 1118. E singura pagină din proiect cu 1118 — confirmat cu Seba pe 11 august.
 */
.inco-dsp__lat {
	inline-size: min(100% - 32px, 84rem);   /* 1344 */
	margin-inline: auto;
}
.inco-dsp {
	inline-size: min(100% - 32px, 69.875rem);   /* 1118 */
	margin-inline: auto;
	display: flex;
	flex-direction: column;
}

/* ------------------------------------------------- firimituri și titlu ----*/

.inco-dsp__antet {
	display: flex;
	flex-direction: column;
	gap: 24px;
	/*
	 * Distanța de sus o dau firimiturile *(`margin: 12px 0 0`)*, ca pe celelalte
	 * pagini. Macheta desena 24 aici; Seba a cerut să fie identice cu restul.
	 */
	padding-block-end: var(--dsp-antet-jos);
}

/*
 * Firimiturile — ACELEAȘI valori ca pe arhivă și pe pagina de produs, cerut de
 * Seba pe 11 august: „exact la fel".
 *
 * ⚠️ E a TREIA copie a acelorași zece linii *(`.inco-arh-crumbs`,
 * `.inco-pdp-crumbs`, acum și aici)*. Locul lor e o foaie comună — dar mutarea
 * atinge arhiva și pagina de produs, pe care nu le pot deschide, iar un refactor
 * nevăzut pe două pagini nu se livrează. Rămâne în `05-todo.md`.
 *
 * 🔑 Culoarea containerului e ALBASTRĂ, nu gri: ultima firimitură e singura
 * bucată care nu e link, deci își ia culoarea de la părinte. Linkurile o
 * suprascriu cu griul.
 */
.inco-dsp-pagina nav.inco-dsp-crumbs {
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
	margin: 12px 0 0;
	font-size: clamp(0.875rem, 0.8333rem + 0.1852vw, 1rem);   /* 14 → 16 */
	font-weight: 500; line-height: 1;
	color: var(--cyan, #056E9B);
}
.inco-dsp-pagina .inco-dsp-crumbs a,
.inco-dsp-pagina .inco-dsp-crumbs a:visited { color: #53798A; font-weight: 400; text-decoration: none; }
.inco-dsp-pagina .inco-dsp-crumbs a:hover,
.inco-dsp-pagina .inco-dsp-crumbs a:focus-visible { color: var(--cyan, #056E9B); text-decoration: none; }
.inco-dsp-crumbs__sep { display: inline-flex; align-items: center; color: #53798A; }
.inco-dsp-crumbs__sep svg { display: block; }

.inco-dsp__h1 {
	margin: 0;
	max-inline-size: 56.625rem;   /* 906 */
	margin-inline: auto;
	text-align: center;
	font-size: var(--dsp-h1-font);
	line-height: var(--dsp-h1-lh);
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--dsp-ink);
}

/* ------------------------------------------------------ tipografia comună -*/

/*
 * Supratitlurile sunt scrise cu literă mică în cod și traduse la fel — MAJUSCULELE
 * le face CSS-ul. Așa rămân citibile pentru cititoarele de ecran, care altfel
 * le-ar putea silabisi literă cu literă.
 */
.inco-dsp__supratitlu {
	margin: 0;
	font-size: var(--dsp-supra-font);
	line-height: 1.4;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--dsp-albastru);
}
.inco-dsp__titlu {
	margin: 0;
	font-size: var(--dsp-titlu-font);
	line-height: var(--dsp-titlu-lh);
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--dsp-ink);
}

/* -------------------------------------------- blocurile poveste / misiune -*/

.inco-dsp-bloc {
	display: flex;
	align-items: center;
	gap: 24px;
}
.inco-dsp-bloc + .inco-dsp-bloc { margin-block-start: 32px; }

.inco-dsp-bloc__text {
	flex: 0 1 33.9375rem;   /* 543 */
	min-inline-size: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
/* Corpul stă mai departe de titlu decât supratitlul — 16, nu 8. */
.inco-dsp-bloc__corp {
	margin: 16px 0 0;
	font-size: var(--dsp-corp-font);
	line-height: var(--dsp-corp-lh);
	font-weight: 500;
	color: var(--dsp-muted);
}

/*
 * Varianta cu listă a blocului — cerută de „PENTRU CINE" de pe B2B.
 * Aceeași coloană de text, alt conținut: bulina e desenată de noi, ca să nu
 * depindem de `list-style`, care arată altfel în fiecare browser.
 */
.inco-dsp-bloc__lista {
	margin: 16px 0 0; padding: 0; list-style: none;
	display: flex; flex-direction: column; gap: 8px;
	font-size: var(--dsp-corp-font);
	line-height: var(--dsp-corp-lh);
	font-weight: 500;
	color: var(--dsp-muted);
}
.inco-dsp-bloc__lista li { position: relative; padding-inline-start: 20px; }
.inco-dsp-bloc__lista li::before {
	content: ''; position: absolute;
	inset-inline-start: 4px;
	inset-block-start: calc((var(--dsp-corp-lh) - 6px) / 2);
	inline-size: 6px; block-size: 6px; border-radius: 50%;
	background: var(--dsp-albastru);
}

.inco-dsp-bloc__media { flex: 0 1 34.4375rem; min-inline-size: 0; }   /* 551 */

/*
 * 🔑 Două rapoarte, nu două fișiere.
 *
 * Macheta decupează altfel pe fiecare lățime — 551/384 pe desktop, 328/200 pe
 * telefon. Cu `cover` și două `aspect-ratio`, aceeași poză acoperă ambele
 * cazuri; exact ca la galeria de pe pagina de produs.
 */
.inco-dsp-bloc__img {
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 328/200;
	object-fit: cover;
	border-radius: 12px;
	display: block;
}

/*
 * 🔴 Pe DESKTOP blocurile pare își inversează coloanele; pe TELEFON toate
 * sunt text apoi imagine.
 *
 * ⚠️ Clasa e `is-oglindit`, pusă din poziție — NU numele blocului. Legată de
 * `--misiune`, regula mergea pe „Despre noi" și pica în tăcere pe B2B.
 *
 * De aia inversarea se scrie doar în blocul de desktop, nu se anulează în cel
 * de telefon: o regulă scrisă în afara lui ar fi trebuit stinsă mai jos, iar
 * aia e exact forma din care se nasc bug-uri când se schimbă ordinea.
 */
@media (min-width: 900px) {
	.inco-dsp-bloc__img { aspect-ratio: 551/384; }
	.inco-dsp-bloc.is-oglindit { flex-direction: row-reverse; }
	.inco-dsp-bloc + .inco-dsp-bloc { margin-block-start: 32px; }
}

@media (max-width: 899.98px) {
	.inco-dsp-bloc { flex-direction: column; align-items: stretch; gap: 16px; }
	.inco-dsp-bloc__text, .inco-dsp-bloc__media { flex: 0 0 auto; }
}

/* --------------------------------------------------- cele cinci promisiuni */

.inco-dsp-promo { margin-block-start: var(--dsp-sect-sus); }

.inco-dsp-promo__antet {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
	margin-block-end: 24px;
}

.inco-dsp-promo__lista {
	display: flex;
	flex-direction: column;
	gap: var(--dsp-card-gap);
	margin: 0; padding: 0; list-style: none;
}

/*
 * Rândul, pe desktop: patru coloane fixe, măsurate.
 *
 * 65 + 48 + 304 + 48 + 437 + 48 + pastila = 1052, adică lățimea interioară a
 * cardului *(1118 − 2 × 33)*. Cele 437 ies exact cât containerul din machetă —
 * confirmarea că cele trei goluri sunt chiar 48.
 */
.inco-dsp-rand {
	position: relative;
	padding: var(--dsp-card-pad);
	background: var(--dsp-surface);
	border: 1px solid var(--dsp-line);
	border-radius: 16px;
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas:
		"nr titlu"
		"text text"
		"pastila pastila";
	align-items: center;
	/*
	 * 16 pe telefon, măsurat pe export: numărul se termină la 60 și titlul
	 * începe la 79, iar diferența dintre cerneală și cutia de text mănâncă
	 * restul. ±3px față de machetă, sub eroarea propriei mele măsurători.
	 */
	column-gap: 16px;
	row-gap: 12px;
}

.inco-dsp-rand__nr {
	grid-area: nr;
	font-size: var(--dsp-nr-font);
	line-height: var(--dsp-nr-lh);
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--dsp-albastru);
}
/*
 * 🔴 `#0A435C`, nu `#0B0A5C`.
 *
 * În frameul de desktop titlurile astea ies `#0B0A5C` — un bleumarin violet
 * care nu apare nicăieri altundeva în proiect. În frameul de TELEFON, exact
 * aceleași titluri sunt `#0A435C`, ca tot restul paginii. Cele două hexuri sunt
 * la o tastă distanță; mobilul e de acord cu întreg site-ul, deci desktopul e
 * cel care greșește. Măsurat pe amândouă exporturile, 11 august.
 */
.inco-dsp-rand__titlu {
	grid-area: titlu;
	margin: 0;
	font-size: var(--dsp-rand-titlu-font);
	line-height: var(--dsp-rand-titlu-lh);
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--dsp-ink);
}
.inco-dsp-rand__text {
	grid-area: text;
	margin: 0;
	max-inline-size: 22.0625rem;   /* 353 */
	font-size: var(--dsp-rand-text-font);
	line-height: var(--dsp-rand-text-lh);
	font-weight: 500;
	color: var(--dsp-muted);
}

/*
 * Pastila — aceleași valori pe ambele lățimi: înălțime 32, text 12, iconiță 14,
 * gol 8, padding 14. Măsurat pe amândouă exporturile; e singura bucată din
 * pagină care nu se scalează.
 */
.inco-dsp-pastila {
	grid-area: pastila;
	justify-self: start;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	block-size: 32px;
	padding-inline: 14px;
	border-radius: 999px;
	background: var(--dsp-pastila);
	color: var(--dsp-albastru);
	font-size: 12px;
	line-height: 16px;
	font-weight: 500;
	white-space: nowrap;
}
.inco-dsp-pastila svg { inline-size: 14px; block-size: 14px; display: block; flex: 0 0 14px; }

@media (min-width: 900px) {
	.inco-dsp-rand {
		grid-template-columns: 4.0625rem 19rem minmax(0, 1fr) auto;   /* 65 · 304 */
		grid-template-areas: "nr titlu text pastila";
		column-gap: 48px;
		row-gap: 0;
	}
	.inco-dsp-pastila { justify-self: end; }
}

/* --------------------------------------------------------- newsletterul ---*/

/*
 * 🔑 Secțiunea e chiar cea de pe homepage, chemată de acolo. `.inco-home` e
 * containerul de care atârnă variabilele ei — dar lățimea lui *(1344)* trebuie
 * neutralizată, altfel ar strânge încă 32px în containerul nostru de 1118.
 */
.inco-dsp__news.inco-home {
	inline-size: 100%;
	margin-inline: 0;
	margin-block-start: var(--dsp-sect-sus);
}