/* UNRIVALS Deck · motor v0.2
   Scenă fixă 1920×1080, scalată pe fereastră, fără scroll.
   Valorile vin din Figma: variabilele „UNRIVALS · Deck” și stilurile de text „Deck/”.
   Coordonatele (left, top, width) sunt cele din Figma, în pixeli pe scena de 1920×1080. */

@import url("https://fonts.googleapis.com/css2?family=Alexandria:wght@400;500;600;700;900&family=Bebas+Neue&family=JetBrains+Mono:wght@400;700&display=swap");

:root {
  --void: #0a0a0a;
  --surface: #1a1a1a;
  --border: #888888;
  --cream: #f0ede8;
  --signal: #c8372d;
  --signal-dark: #9b2520;
  --burgundy: #741c1c;
  --cream-86: rgba(240, 237, 232, 0.86);
  --cream-56: rgba(240, 237, 232, 0.56);
  --cream-16: rgba(240, 237, 232, 0.16);
  --cream-06: rgba(240, 237, 232, 0.06);
  --cream-04: rgba(240, 237, 232, 0.04);
  --signal-26: rgba(200, 55, 45, 0.26);
  --f-sans: "Alexandria", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, monospace;
  --f-banner: "Bebas Neue", var(--f-sans);
  --scale: 1;
  --linie: 400px;
}

/* ================= Scena ================= */

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #000; }
body { color: var(--cream); font-family: var(--f-sans); -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; }
img { display: block; }
button { font: inherit; }

.deck {
  position: absolute; left: 50%; top: 50%;
  width: 1920px; height: 1080px;
  transform: translate(-50%, -50%) scale(var(--scale));
}
.slide { position: absolute; inset: 0; width: 1920px; height: 1080px; overflow: hidden; background: var(--void); display: none; }
.slide.activ { display: block; }
.slide > * { position: absolute; z-index: 1; }

/* Fundal: atributul data-fundal pe <section class="slide">. Implicit: continut. */
.slide::before { content: ""; position: absolute; inset: 0; z-index: 0; background: url("assets/fundal/continut.jpg?v=20261022") 0 0 / 1920px 1080px no-repeat; }
.slide[data-fundal="capitol"]::before { background-image: url("assets/fundal/capitol.jpg?v=20261022"); }
.slide[data-fundal="coperta"]::before { background-image: url("assets/fundal/coperta.jpg"); }
.slide[data-fundal="coperta-oglindit"]::before { background-image: url("assets/fundal/coperta-oglindit.jpg"); }
.slide[data-fundal="coperta-benzi"]::before { background-image: url("assets/fundal/coperta-benzi.jpg"); }
.slide[data-fundal="coperta-coloane-fine"]::before { background-image: url("assets/fundal/coperta-coloane-fine.jpg"); }
.slide[data-fundal="coperta-coloane-late"]::before { background-image: url("assets/fundal/coperta-coloane-late.jpg"); }
.slide[data-fundal="coperta-diagonal"]::before { background-image: url("assets/fundal/coperta-diagonal.jpg"); }
.slide[data-fundal="coperta-jumatate"]::before { background-image: url("assets/fundal/coperta-jumatate.jpg"); }

/* ================= Stiluri de text (Deck/…) ================= */

.t-banner  { font: 400 220px/1 var(--f-banner); letter-spacing: 0.02em; }
.t-display { font: 900 140px/1.1 var(--f-sans); letter-spacing: -0.032em; text-transform: uppercase; }
.t-h1      { font: 900 104px/1.15 var(--f-sans); letter-spacing: -0.025em; }
.t-h2      { font: 700 56px/1.15 var(--f-sans); letter-spacing: -0.015em; }
.t-h3      { font: 700 32px/1.25 var(--f-sans); letter-spacing: -0.01em; }
.t-stat    { font: 900 68px/1 var(--f-sans); letter-spacing: -0.02em; }
.t-lead    { font: 400 34px/1.5 var(--f-sans); }
.t-body    { font: 400 26px/1.55 var(--f-sans); }
.t-body-b  { font: 700 26px/1.55 var(--f-sans); }
.t-caption { font: 400 20px/1.5 var(--f-sans); }
.t-eyebrow { font: 400 18px/1.4 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; }
.t-label   { font: 400 17px/1.5 var(--f-mono); letter-spacing: 0.05em; text-transform: uppercase; }
.t-data    { font: 400 20px/1.5 var(--f-mono); }
.t-data-b  { font: 700 20px/1.5 var(--f-mono); }
.t-source  { font: 400 17px/1.5 var(--f-mono); letter-spacing: 0.02em; }

.c-cream { color: var(--cream); }
.c-86 { color: var(--cream-86); }
.c-56 { color: var(--cream-56); }
.c-signal, .accent { color: var(--signal); }
.centru { text-align: center; }
.dreapta { text-align: right; }

/* ================= Materiale ================= */

.glass {
  background: var(--cream-04);
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
  backdrop-filter: blur(22px) saturate(1.15);
  box-shadow: inset 0 0 0 1px rgba(240, 237, 232, 0.14);
}
.linie-sus { border-top: 2px solid var(--border); }
.linie-sus.accent-linie, .accent-linie { border-top: 2px solid var(--signal); }

.romb { width: 16px; height: 16px; transform: rotate(45deg); border: 1.5px solid var(--signal); flex: none; }
.romb--plin { background: var(--signal); border: none; }
.romb--mic { width: 9px; height: 9px; border: none; background: var(--cream-56); }

.tag { display: inline-flex; padding: 6px 12px; border: 1px solid var(--cream-16); font: 400 17px/1.5 var(--f-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--cream-86); white-space: nowrap; }
.tag--accent { border-color: rgba(200, 55, 45, 0.5); color: var(--signal); text-transform: none; }

/* ================= Schelet comun ================= */

.antet { left: 100px; top: 100px; width: 1720px; display: flex; gap: 40px; align-items: flex-start; }
.antet__sectiune { width: 400px; flex: none; display: flex; flex-direction: column; gap: 14px; }
.antet__afirmatie { flex: 1; }

.linie { left: 60px; top: var(--linie); width: 1800px; height: 1px; background: var(--cream-16); }
.continut { left: 100px; top: calc(var(--linie) + 40px); width: 1720px; }
.sursa { left: 100px; bottom: 160px; width: 1720px; }

/* Subsolurile se generează din deck.js: <footer class="subsol" data-capitol="…"></footer> */
.subsol { left: 60px; top: 948px; width: 1800px; height: 72px; display: flex; align-items: center; justify-content: space-between; padding: 0 40px; border-top: 1px solid var(--cream-16); }
.subsol__stanga { display: flex; align-items: center; gap: 20px; }
.subsol__logo { width: 140px; height: 24px; }
.subsol__sep { width: 1px; height: 24px; background: var(--cream-16); }
.subsol__dreapta { display: flex; align-items: center; gap: 40px; }
.subsol-capitol { left: 100px; top: 940px; width: 1720px; height: 40px; display: flex; align-items: center; justify-content: space-between; }
.subsol-capitol .subsol__logo { width: 221px; height: 38px; }
.subsol-final { left: 100px; top: 916px; width: 1720px; height: 64px; display: flex; align-items: flex-end; justify-content: space-between; }
.subsol-final__lockup { width: 300px; height: 64px; }
.subsol-final__contact { display: flex; flex-direction: column; gap: 8px; text-align: right; }
.nav { display: flex; align-items: center; gap: 16px; }
.nav__buton { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--cream-16); background: none; color: var(--cream-86); font: 400 20px/1.5 var(--f-mono); cursor: pointer; }
.nav__buton:hover { border-color: var(--cream-56); color: var(--cream); }

/* Bloc secțiune (coloana stângă, când vizualul ocupă dreapta) */
.bloc { left: 100px; top: 100px; width: 640px; display: flex; flex-direction: column; gap: 20px; }

/* ================= CS 00 · Copertă ================= */

.coperta__logo { left: 100px; top: 100px; width: 296px; height: 64px; }
.coperta__tip { right: 100px; top: 122px; text-align: right; }
.coperta__titlu { left: 100px; top: 583px; width: 1720px; display: flex; flex-direction: column; gap: 16px; }

/* ================= CS 01 · Echipa ================= */

.echipa { left: 100px; top: 401px; width: 1718px; display: flex; gap: 40px; align-items: stretch; }
.card-echipa { width: 546px; display: flex; flex-direction: column; gap: 24px; padding: 32px; }
.card-echipa__cap { display: flex; gap: 24px; align-items: center; }
.card-echipa__portret { width: 120px; height: 120px; object-fit: cover; filter: grayscale(1) contrast(1.08); flex: none; }
.card-echipa__id { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.card-echipa__etichete { display: flex; flex-wrap: wrap; gap: 8px; }

/* ================= CS 02 · Capitol ================= */

.capitol__titlu { left: 100px; top: 100px; width: 1200px; display: flex; flex-direction: column; gap: 8px; }
.capitol__descriere { left: 1360px; top: 112px; width: 460px; }

/* ================= CS 22 · Final ================= */

.final__simbol { left: 1380px; top: 140px; width: 420px; height: 420px; }
.final__mesaj { left: 100px; top: 100px; width: 1068px; display: flex; flex-direction: column; gap: 32px; }
.final__mesaj .t-lead { width: 1000px; }

/* ================= Declarații, piloni, afirmație ================= */

.declaratii { left: 100px; top: 460px; width: 1720px; display: flex; gap: 80px; }
.declaratie { width: 820px; display: flex; flex-direction: column; gap: 20px; }

.pozitionare__eyebrow { left: 0; top: 130px; width: 1920px; text-align: center; }
.pozitionare__afirmatie { left: 260px; top: 200px; width: 1400px; text-align: center; }
.pozitionare__sursa { left: 0; width: 1920px; text-align: center; }
.piloni { left: 100px; top: 660px; width: 1720px; display: flex; gap: 140px; }
.pilon { width: 480px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.pilon .romb { margin: 4px 0 6px; }

/* ================= Cifre ================= */

/* CS/Cifră (CS 03): rând de carduri */
.cifre { left: 100px; top: calc(var(--linie) + 40px); width: 1720px; display: flex; gap: 40px; }
.cifra { width: 400px; height: 350px; padding: 32px; display: flex; flex-direction: column; justify-content: space-between; border-top: 2px solid var(--border); }
.cifra--accent { border-top-color: var(--signal); }
.cifra__valoare { display: flex; flex-direction: column; gap: 14px; }
.cifra__numar { display: flex; align-items: baseline; gap: 8px; }
.cifra--accent .cifra__numar .t-stat { color: var(--signal); }

/* CS/Date/Cifră mare (CS 09, CS 40) */
.cifre-mari { left: 100px; top: calc(var(--linie) + 40px); width: 1720px; display: flex; }
.cifra-mare { flex: 1; display: flex; flex-direction: column; gap: 18px; padding: 8px 48px; }
.cifra-mare:first-child { padding-left: 0; }
.cifra-mare + .cifra-mare { border-left: 1px solid var(--cream-16); }
.cifra-mare__numar { display: flex; align-items: baseline; gap: 10px; }
.cifra-mare--accent .t-h1, .cifra-mare--accent .t-eyebrow { color: var(--signal); }

/* CS/Date/Cifră compactă */
.grila-cifre { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.cifra-compacta { padding: 24px 28px; display: flex; flex-direction: column; gap: 10px; border-top: 2px solid var(--border); }
.cifra-compacta--accent { border-top-color: var(--signal); }
.cifra-compacta__numar { display: flex; align-items: baseline; gap: 8px; }

/* CS/Citat */
.citate { display: flex; flex-direction: column; gap: 40px; }
.citat { border-left: 3px solid var(--signal); padding-left: 32px; display: flex; flex-direction: column; gap: 16px; }
.citat--neutru { border-left-color: var(--cream-56); }

/* CS/Punct listă */
.lista { display: flex; flex-direction: column; gap: 20px; }
.punct { position: relative; padding-left: 40px; }
.punct::before { content: ""; position: absolute; left: 6px; top: calc(0.775em - 4.5px); width: 9px; height: 9px; background: var(--cream-56); transform: rotate(45deg); }
.punct.t-caption::before { top: calc(0.75em - 4.5px); }

/* CS/Date/Bulă procent (CS 37): diametrul din --d, proporțional cu valoarea */
.bule { left: 100px; top: calc(var(--linie) + 40px); width: 1720px; height: 430px; display: flex; align-items: center; justify-content: space-between; }
.bula { width: var(--d, 300px); height: var(--d, 300px); border-radius: 50%; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; background: rgba(240, 237, 232, 0.03); border: 1.5px solid var(--cream-16); }
.bula--accent { background: rgba(200, 55, 45, 0.1); border-color: var(--signal); }
.bula--accent .t-stat { color: var(--signal); }

/* CS/Date/Coloană KPI (CS 38): poziția cifrei din --p (0-100) */
.kpi { top: 100px; width: 220px; height: 770px; display: flex; flex-direction: column; align-items: center; gap: 24px; border-left: 1px solid var(--cream-16); }
.kpi__nivel { flex: 1; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 16px; padding-top: calc(40px + (100 - var(--p, 50)) * 4.8px); }
.kpi__bara { flex: 1; width: 100%; background: linear-gradient(180deg, rgba(240, 237, 232, 0.12), rgba(240, 237, 232, 0)); border-top: 2px solid var(--cream-56); }
.kpi--accent .kpi__bara { background: linear-gradient(180deg, rgba(200, 55, 45, 0.55), rgba(200, 55, 45, 0)); border-top-color: var(--signal); }
.kpi--accent .t-stat { color: var(--signal); }

/* CS/Date/Donut KPI (CS 48): proporția din --p (0-100) */
.donuturi { left: 100px; top: calc(var(--linie) + 40px); width: 1720px; display: flex; gap: 80px; }
.donut-kpi { width: 520px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.donut { position: relative; width: 220px; height: 220px; display: flex; flex-direction: column; align-items: center; }
.donut__inel { width: 220px; height: 220px; border-radius: 50%; background: conic-gradient(var(--c, var(--signal-dark)) calc(var(--p, 50) * 1%), var(--cream-16) 0); -webkit-mask: radial-gradient(circle, transparent 81px, #000 81.5px); mask: radial-gradient(circle, transparent 81px, #000 81.5px); }
.donut-kpi--accent { --c: var(--signal); }
.donut__romb { position: absolute; left: 102px; top: 102px; width: 16px; height: 16px; transform: rotate(45deg); border: 1.5px solid var(--cream-56); }
.donut-kpi--accent .donut__romb { border-color: var(--signal); }
.donut__valoare { margin-top: -22px; padding: 8px 18px; background: var(--void); border: 1px solid var(--cream-56); font: 700 20px/1.5 var(--f-mono); color: var(--cream); position: relative; }
.donut-kpi--accent .donut__valoare { border-color: var(--signal); }

/* CS/Date/Indicator progres (CS 49): lungimea barei din --p */
.indicatori { display: flex; flex-direction: column; gap: 24px; }
.indicator { padding: 24px 28px 26px; display: flex; flex-direction: column; gap: 18px; border-top: 2px solid var(--border); }
.indicator--accent { border-top-color: var(--signal); }
.indicator__pista { height: 8px; background: var(--cream-06); }
.indicator__bara { height: 100%; width: calc(var(--p, 50) * 1%); background: var(--cream-56); }
.indicator--accent .indicator__bara { background: var(--signal); }
.indicator__rand { display: flex; align-items: center; gap: 28px; }
.indicator--accent .t-stat { color: var(--signal); }

/* CS/Grafic/Treaptă orizontală (CS 45) */
.treapta { height: 130px; padding-left: 32px; display: flex; flex-direction: column; justify-content: center; gap: 2px; background: linear-gradient(90deg, var(--burgundy), rgba(116, 28, 28, 0)); }
.treapta--accent { background: linear-gradient(90deg, rgba(200, 55, 45, 0.95), rgba(200, 55, 45, 0)); }

/* CS/Date/Insignă (CS 44) */
.insigna { padding: 18px 24px 20px; display: flex; flex-direction: column; gap: 4px; background: rgba(10, 10, 10, 0.72); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); box-shadow: inset 0 0 0 1px rgba(240, 237, 232, 0.14); border-top: 2px solid var(--border); }
.insigna--accent { border-top-color: var(--signal); }
.insigna--accent .t-h2 { color: var(--signal); }

/* Imagine (fill pe tot blocul; pune fotografia în --img) */
.imagine { background: var(--surface) var(--img, none) center / cover no-repeat; }
.imagine::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 10, 10, 0) 0%, rgba(10, 10, 10, 0.75) 100%); }

/* ================= Grafice ================= */

/* Card de grafic: glass cu linie sus, antet (CS/Grafic/Antet) */
.grafic-card { padding: 32px 40px; border-top: 2px solid var(--border); }
.grafic-antet { display: flex; flex-direction: column; gap: 6px; }
.grafic-antet__rand { display: flex; align-items: center; justify-content: space-between; gap: 24px; }

/* CS/Grafic/Bară orizontală: lățimea din --v / --max (--max pe container) */
.bare-o { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; }
.bara-o { display: flex; align-items: center; height: 30px; font: 400 20px/1.5 var(--f-mono); color: var(--cream-86); }
.bara-o__eticheta { width: 340px; flex: none; }
.bara-o__pista { flex: 1; height: 12px; background: var(--cream-06); }
.bara-o__plin { display: block; height: 100%; width: calc(var(--v) / var(--max) * 100%); background: var(--cream-56); }
.bara-o__valoare { width: 260px; flex: none; text-align: right; }
.bara-o--accent { font-weight: 700; color: var(--cream); }
.bara-o--accent .bara-o__plin { background: var(--signal); }

/* CS/Grafic/Bară compactă (CS 28): eticheta deasupra */
.bara-c { display: flex; flex-direction: column; gap: 10px; }
.bara-c__text { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.bara-c__pista { height: 10px; background: var(--cream-06); }
.bara-c__plin { display: block; height: 100%; width: calc(var(--v) / var(--max, 100) * 100%); background: var(--cream-56); }
.bara-c--accent .bara-c__plin { background: linear-gradient(90deg, var(--signal), var(--signal-dark)); }
.bara-c--accent .t-data { color: var(--signal); }

/* Bare verticale: --max (valoarea de sus a axei), --h (înălțimea axei în px), --baza (linia de jos, px de sus) */
.bare-v { --baza: 381px; --h: 273px; }
.bare-v__grila { position: absolute; left: 4px; right: 0; top: calc(var(--baza) - var(--t) / var(--max) * var(--h) - 13px); display: flex; align-items: center; gap: 16px; }
.bare-v__grila > span { width: 40px; text-align: right; font: 400 17px/1.5 var(--f-mono); letter-spacing: 0.05em; color: var(--cream-56); }
.bare-v__grila::after { content: ""; flex: 1; height: 1px; background: var(--cream-16); }
.bara-v { position: absolute; width: var(--l, 130px); top: calc(var(--baza) - var(--v) / var(--max) * var(--h) - 34px); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.bara-v__bara { display: block; width: 100%; height: calc(var(--v) / var(--max) * var(--h)); background: linear-gradient(180deg, rgba(240, 237, 232, 0.26), rgba(240, 237, 232, 0.03)); }
.bara-v--accent .bara-v__bara { background: linear-gradient(180deg, var(--signal) 0%, rgba(116, 28, 28, 0.9) 60%, rgba(116, 28, 28, 0.25) 100%); }
.bara-v__an { margin-top: 10px; font: 400 17px/1.5 var(--f-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--cream-56); }
.bare-v__unitate { position: absolute; left: 60px; top: -6px; }
.bare-v__reper { position: absolute; left: 60px; right: 0; height: 0; border-top: 1px solid var(--signal); top: calc(var(--baza) - var(--t) / var(--max) * var(--h)); }

/* CS/Date/Nivel: rânduri de interpretare */
.niveluri { display: flex; flex-direction: column; }
.nivel { display: flex; align-items: center; gap: 32px; padding: 22px 0; border-bottom: 1px solid var(--cream-16); }
.nivel__valoare { width: 300px; flex: none; display: flex; flex-direction: column; gap: 4px; }
.nivel .t-label, .nivel .t-stat { color: var(--cream-56); }
.nivel--accent .t-label, .nivel--accent .t-stat { color: var(--cream); }

/* CS/Date/Scor */
.scor { display: flex; flex-direction: column; gap: 6px; }
.scor__valoare { display: flex; align-items: baseline; gap: 8px; }
.scor--accent .t-h1 { color: var(--signal); }

/* Grafic linie și radar: desenate de deck.js din data-valori, data-azi etc. */
.grafic-linie, .radar { position: absolute; }
.grafic-linie svg, .radar svg { position: absolute; left: 0; top: 0; overflow: visible; }
.grafic-linie .gl-eticheta, .grafic-linie .gl-axa { position: absolute; font: 400 17px/1.5 var(--f-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--cream-56); white-space: nowrap; }
.grafic-linie .gl-punct { position: absolute; display: flex; flex-direction: column; align-items: center; font: 700 20px/1.5 var(--f-mono); color: var(--cream); }
.grafic-linie .gl-punct::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: currentColor; }
.grafic-linie .gl-punct--accent { color: var(--signal); }
.radar .r-eticheta { position: absolute; font: 400 14.6px/1.5 var(--f-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--cream-86); white-space: nowrap; }

/* Bare stivuite la 100% (CS 26): --p pe fiecare segment, nivelurile n1-n4 */
.stive { position: absolute; }
.stiva { position: absolute; bottom: 0; width: 140px; display: flex; flex-direction: column-reverse; gap: 2px; height: 600px; }
.stiva > i { display: block; height: calc(var(--p) * 1% - 1.5px); }
.n1 { background: var(--signal); } .n2 { background: var(--signal-dark); } .n3 { background: var(--burgundy); } .n4 { background: var(--cream-16); }
.legenda { display: flex; flex-wrap: wrap; gap: 18px 48px; }
.legenda--2 { display: grid; grid-template-columns: repeat(2, max-content); }
.legenda__el { display: flex; align-items: center; gap: 14px; font: 400 20px/1.5 var(--f-sans); color: var(--cream-86); }
.legenda__el::before { content: ""; width: 11px; height: 11px; transform: rotate(45deg); background: var(--c, var(--cream-16)); }
.legenda__el.n1, .legenda__el.n2, .legenda__el.n3, .legenda__el.n4 { background: none; }
.legenda__el.n1 { --c: var(--signal); } .legenda__el.n2 { --c: var(--signal-dark); } .legenda__el.n3 { --c: var(--burgundy); } .legenda__el.n4 { --c: var(--cream-16); }

/* Donut cu felii (CS 30): deck.js construiește conic-gradient din data-valori */
.donut-felii { border-radius: 50%; -webkit-mask: radial-gradient(circle closest-side, transparent 66%, #000 66.4%); mask: radial-gradient(circle closest-side, transparent 66%, #000 66.4%); }

/* CS/Grafic/Linie de referință */
.linie-ref { display: flex; align-items: center; gap: 12px; }
.linie-ref::before { content: ""; flex: 1; border-top: 1.5px dashed var(--signal); }

/* CS/Date/Treaptă preț */
.trepte-pret { display: flex; flex-direction: column; gap: 28px; }
.treapta-pret { display: flex; flex-direction: column; gap: 6px; padding-bottom: 20px; border-bottom: 1px solid var(--cream-16); }
.treapta-pret__rand { display: flex; align-items: flex-end; gap: 14px; }
.treapta-pret__rand .t-h2 { white-space: nowrap; }
.treapta-pret__rand .t-caption:last-child { margin-left: auto; width: 260px; }
.treapta-pret--accent .t-label:first-child { color: var(--signal); }

/* CS/Grafic/Bară alocare (CS 55): lățimea în --w (px) */
.alocare { display: flex; flex-direction: column; gap: 32px; }
.bara-alocare { width: var(--w, 900px); height: 64px; display: flex; align-items: center; gap: 14px; padding: 0 24px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--cream-16); }
.bara-alocare::before { content: ""; width: 8px; height: 8px; transform: rotate(45deg); background: var(--cream-56); flex: none; }
.bara-alocare .t-data-b { margin-left: auto; }
.bara-alocare--accent { background: linear-gradient(90deg, var(--signal), rgba(200, 55, 45, 0.45)); box-shadow: none; }
.bara-alocare--accent::before { background: var(--cream); }

/* ================= CS 05 · Tabel (CS/Tabel/Rând 5 coloane) ================= */

.tabel { display: flex; flex-direction: column; width: 1720px; }
.tabel__rand { display: flex; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--cream-16); }
.tabel__rand > div:first-child { padding-left: 16px; }
.tabel--5 .tabel__rand > div:nth-child(1) { width: 200px; }
.tabel--5 .tabel__rand > div:nth-child(2) { width: 330px; }
.tabel--5 .tabel__rand > div:nth-child(3) { width: 300px; }
.tabel--5 .tabel__rand > div:nth-child(4) { width: 420px; }
.tabel--5 .tabel__rand > div:nth-child(5) { width: 470px; }
.tabel__rand--antet > div { font: 400 17px/1.5 var(--f-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--cream-56); }
.tabel__rand--rand > div { font: 400 20px/1.5 var(--f-mono); color: var(--cream-86); }
.tabel__rand--evidentiat { background: rgba(240, 237, 232, 0.05); }
.tabel__rand--evidentiat > div, .tabel__rand--total > div { font: 700 20px/1.5 var(--f-mono); color: var(--cream); }
.tabel__rand--total { border-bottom: none; border-top: 1px solid var(--cream-56); padding: 14px 0 12px; }
.tabel__rand > div.accent { color: var(--signal); }

/* ================= CS 23 · Comparație (Rând comparație + Coloană client) ================= */

.comparatie { position: relative; width: 1720px; }
.comparatie__banda { position: absolute; left: 1430px; top: -12px; bottom: -12px; width: 290px; border-top: 2px solid var(--signal); }
.comparatie__rand { position: relative; display: flex; align-items: center; padding: 18px 0 18px 16px; border-bottom: 1px solid var(--cream-16); }
.comparatie__rand--antet { padding-top: 16px; padding-bottom: 16px; border-bottom-color: var(--cream-56); }
.comparatie__criteriu { width: 544px; flex: none; }
.comparatie__col { width: 290px; flex: none; display: flex; justify-content: center; align-items: center; min-height: 30px; }

.bulina { width: 14px; height: 14px; border-radius: 50%; display: block; }
.bulina--da { background: var(--cream); }
.bulina--nu { border: 1.5px solid var(--cream-56); }
.bulina--gol { visibility: hidden; }

/* ================= Carduri ================= */

/* CS/Card glass (CS 04): .card-glass.glass, accent cu .card-glass--accent */
.carduri { left: 100px; top: calc(var(--linie) + 40px); width: 1718px; display: flex; gap: 40px; align-items: stretch; }
.card-glass { flex: 1; padding: 32px 32px 36px; display: flex; flex-direction: column; gap: 16px; border-top: 2px solid var(--border); }
.card-glass--accent { border-top-color: var(--signal); }
.card-glass--accent > .t-label:first-child { color: var(--signal); }

/* CS/Text/Card concurent (CS 31) */
.card-concurent { flex: 1; padding: 32px 32px 36px; display: flex; flex-direction: column; gap: 20px; border-top: 2px solid var(--border); }
.card-concurent--accent { border-top-color: var(--signal); }
.card-concurent__grup { display: flex; flex-direction: column; gap: 6px; }
.card-concurent--accent .card-concurent__grup:first-of-type .t-label { color: var(--signal); }

/* ================= Tabele și comparații ================= */

/* CS/Tabel/Matrice rând (CS 11) */
.matrice { position: relative; width: 1720px; }
.matrice__banda { position: absolute; left: 1400px; top: -4px; width: 320px; bottom: -4px; }
.matrice__rand { position: relative; display: flex; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--cream-16); }
.matrice__rand > div:nth-child(1) { width: 500px; }
.matrice__rand > div:nth-child(n+2):nth-child(-n+7) { width: 150px; display: flex; justify-content: center; }
.matrice__rand > div:nth-child(8) { width: 320px; padding-left: 24px; }
.matrice__rand--antet > div { font: 400 17px/1.5 var(--f-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--cream-56); text-align: center; }
.matrice__rand--antet > div:nth-child(1), .matrice__rand--antet > div:nth-child(8) { text-align: left; }
.matrice__rand--antet > div:nth-child(8) { color: var(--cream); }
.matrice__companie { font: 400 20px/1.5 var(--f-sans); color: var(--cream-86); }
.matrice__verdict { font: 700 20px/1.5 var(--f-mono); color: var(--cream); }
.matrice__rand--recomandat .matrice__companie { color: var(--cream); }
.matrice__rand--recomandat .matrice__verdict { color: var(--signal); }
.matrice__rand--exclus .matrice__companie, .matrice__rand--exclus .matrice__verdict { color: var(--cream-56); font-weight: 400; }

/* CS/Tabel/Rând 3 coloane (CS 15, înainte și după) */
.tabel3 { position: relative; width: 1720px; }
.tabel3__banda { position: absolute; left: 980px; top: -4px; width: 740px; bottom: -4px; }
.tabel3__rand { position: relative; display: flex; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--cream-16); }
.tabel3__rand > div:nth-child(1) { width: 380px; padding-left: 16px; font: 700 20px/1.5 var(--f-mono); color: var(--cream); }
.tabel3__rand > div:nth-child(2) { width: 600px; font: 400 20px/1.5 var(--f-sans); color: var(--cream-56); }
.tabel3__rand > div:nth-child(3) { width: 740px; padding-left: 24px; font: 400 20px/1.5 var(--f-sans); color: var(--cream); }
.tabel3__rand--antet { padding: 6px 0; }
.tabel3__rand--antet > div:nth-child(n) { font: 400 17px/1.5 var(--f-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--cream-56); }
.tabel3__rand--total { border-bottom: none; border-top: 1px solid var(--cream-56); padding: 7px 0 5px; }
.tabel3__rand--total > div:nth-child(2) { font: 700 20px/1.5 var(--f-mono); color: var(--cream-86); }
.tabel3__rand--total > div:nth-child(3) { font: 700 20px/1.5 var(--f-mono); color: var(--signal); }

/* Două liste față în față + concluzie (CS 17) */
.liste { left: 100px; top: calc(var(--linie) + 36px); width: 1720px; display: flex; gap: 80px; }
.liste__col { width: 820px; display: flex; flex-direction: column; gap: 6px; }
.liste__col .lista { gap: 6px; }
.concluzie { left: 100px; width: 1720px; padding: 22px 32px; background: var(--cream-04); border-top: 2px solid var(--cream-56); }

/* CS/Tabel/Rând verdict + CS/Tabel/Verdict (CS 58) */
.verdict-tabel { display: flex; flex-direction: column; width: 1720px; }
.verdict-rand { position: relative; display: flex; align-items: center; gap: 32px; padding: 12px 24px; border-bottom: 1px solid var(--cream-16); }
.verdict-rand--antet { border-bottom-color: var(--cream-56); }
.verdict-rand--antet > * { font: 400 17px/1.5 var(--f-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--cream-56); }
.verdict-rand__nr { width: 56px; flex: none; font: 400 20px/1.5 var(--f-mono); color: var(--cream-56); }
.verdict-rand__fraza { width: 700px; flex: none; display: flex; flex-direction: column; gap: 4px; }
.verdict-rand__raspuns { width: 620px; flex: none; display: flex; gap: 20px; align-items: flex-start; }
.verdict-rand__dn { width: 44px; flex: none; font: 700 20px/1.5 var(--f-mono); color: var(--cream-56); }
.verdict-rand__verdict { width: 200px; flex: none; display: flex; }
.verdict-rand--accent { background: var(--cream-04); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); box-shadow: inset 3px 0 0 var(--signal), inset 0 0 0 1px rgba(240, 237, 232, 0.14); }
.verdict-rand--accent .verdict-rand__nr, .verdict-rand--accent .verdict-rand__dn { color: var(--signal); }
.eticheta-verdict { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 14px; border: 1px solid var(--cream-16); font: 400 17px/1.5 var(--f-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--cream-86); white-space: nowrap; }
.eticheta-verdict::before { content: ""; width: 8px; height: 8px; transform: rotate(45deg); background: var(--cream-56); }
.eticheta-verdict--semnal { background: rgba(200, 55, 45, 0.16); border-color: var(--signal); color: var(--cream); }
.eticheta-verdict--semnal::before { background: var(--signal); box-shadow: 0 0 10px rgba(200, 55, 45, 0.8); }
.eticheta-verdict--neutru { background: var(--cream-06); border-color: transparent; color: var(--cream-56); }

/* ================= Diagrame și planuri ================= */

/* CS 12 · Hartă de poziționare: punctele primesc --x și --y (0-100, de la minim la maxim pe fiecare axă) */
.harta-poz { left: 860px; top: 110px; width: 960px; height: 800px; }
.harta-poz__axa { position: absolute; background: var(--cream-56); }
.harta-poz__axa--x { left: 50px; top: 400px; width: 860px; height: 1px; }
.harta-poz__axa--y { left: 480px; top: 30px; width: 1px; height: 740px; }
.harta-poz__rombi > i { position: absolute; left: 480px; top: 400px; width: calc(var(--d) / 1.41421); height: calc(var(--d) / 1.41421); transform: translate(-50%, -50%) rotate(45deg); border: 1px solid var(--cream-16); }
.harta-poz__rombi > i:nth-child(1) { --d: 620px; background: rgba(116, 28, 28, 0.16); }
.harta-poz__rombi > i:nth-child(2) { --d: 460px; background: rgba(116, 28, 28, 0.26); }
.harta-poz__rombi > i:nth-child(3) { --d: 300px; background: rgba(155, 37, 32, 0.4); }
.harta-poz__rombi > i:nth-child(4) { --d: 150px; background: rgba(200, 55, 45, 0.7); }
.harta-poz__capat { position: absolute; width: 143px; white-space: nowrap; }
.harta-poz__capat.dreapta { width: auto; }
.harta-poz__capat.centru { width: 300px; margin-left: -78.5px; }
.punct-harta { position: absolute; left: calc(50px + var(--x) * 8.6px); top: calc(770px - var(--y) * 7.4px); transform: translate(-7px, -50%); display: flex; align-items: center; gap: 9px; white-space: nowrap; font: 400 17px/1.5 var(--f-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--cream-56); }
.punct-harta::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--cream-56); flex: none; }
.punct-harta--client { transform: translate(-18px, -50%); gap: 11px; font: 700 20px/1.5 var(--f-mono); letter-spacing: 0; text-transform: none; color: var(--cream); }
.punct-harta--client::before { width: 26px; height: 26px; border-radius: 0; margin: 5px; background: var(--signal); transform: rotate(45deg); }

/* CS 13 · Grilă 2×2 (CS/Diagramă/Cadran) */
.grila2 { left: 100px; top: 436px; width: 1720px; height: 440px; }
.grila2 > * { position: absolute; }
.cadran { width: 780px; height: 200px; padding: 28px 32px; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.cadran--accent { background: linear-gradient(90deg, rgba(200, 55, 45, 0.95), rgba(116, 28, 28, 0.85)); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.cadran--accent .t-eyebrow, .cadran--accent .t-caption { color: var(--cream); }

/* CS 16 · Stivă izometrică + CS/Date/Strat */
.stiva-iso { left: 100px; top: 436px; width: 620px; height: 440px; }
.stiva-iso > i { position: absolute; left: 40px; width: 520px; height: 130px; top: calc(10px + var(--i) * 90px); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 130'%3E%3Cpath d='M0.5 65 L260 0.5 L519.5 65 L260 129.5Z' fill='%23141414' fill-opacity='.92' stroke='%23f0ede8' stroke-opacity='.16'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.stiva-iso > i.mediu { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 130'%3E%3Cpath d='M0.5 65 L260 0.5 L519.5 65 L260 129.5Z' fill='%23141414' fill-opacity='.92' stroke='%23f0ede8' stroke-opacity='.56'/%3E%3C/svg%3E"); }
.stiva-iso > i.varf { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 130'%3E%3Cpath d='M0.5 65 L260 0.5 L519.5 65 L260 129.5Z' fill='%23c8372d' fill-opacity='.9' stroke='%23c8372d'/%3E%3C/svg%3E"); }
.straturi { left: 780px; top: 466px; width: 1040px; display: flex; flex-direction: column; }
.strat { height: 90px; display: flex; align-items: center; gap: 32px; border-bottom: 1px solid var(--cream-16); }
.strat > :nth-child(1) { width: 260px; flex: none; }
.strat > :nth-child(2) { width: 380px; flex: none; }
.strat > :nth-child(3) { width: 336px; flex: none; }

/* CS 20 · Flux de pași (Flux/Pas): linia leagă nodurile, oricâți pași */
.flux { left: 100px; top: 440px; width: 1720px; height: 400px; display: flex; justify-content: space-between; padding: 20px 16px 0; }
.flux::before { content: ""; position: absolute; left: 143px; right: 143px; top: 84px; height: 1px; background: var(--cream-16); }
.pas { position: relative; width: 255px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.pas__nod { position: absolute; left: 50%; top: 64px; width: 20px; height: 20px; transform: translate(-50%, -50%) rotate(45deg); background: var(--void); border: 1.5px solid var(--cream-56); }
.pas__continut { margin-top: 84px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pas > span, .pas__continut { position: relative; }
.pas--accent::before { content: ""; position: absolute; left: 50%; top: 64px; width: 120px; height: 120px; border-radius: 50%; background: var(--signal); filter: blur(20px); transform: translate(-50%, -50%); }
.pas--accent .pas__nod { width: 26px; height: 26px; background: var(--signal); border-color: var(--signal); }
.pas--accent .t-label, .pas--accent .t-caption { color: var(--cream); }

/* CS 21 · Plan: faze (Plan/Fază) + etape (Plan/Etapă) */
.faze { left: 100px; top: 436px; width: 1717px; display: flex; gap: 12px; }
.faza { flex: 1; height: 112px; padding: 10px 16px; display: flex; flex-direction: column; gap: 4px; border-top: 2px solid var(--cream); }
.faza--inactiva { border-top-color: var(--cream-16); }
.faza--inactiva > * { color: var(--cream-56); }
.etape { left: 100px; top: 570px; width: 1720px; display: flex; gap: 41px; }
.etapa { width: 546px; height: 330px; padding: 24px 28px; display: flex; flex-direction: column; justify-content: space-between; border-top: 2px solid var(--border); }
.etapa__cap { display: flex; flex-direction: column; gap: 14px; }
.etapa--accent { border-top-color: var(--signal); }
.etapa--accent .t-label { color: var(--signal); }

/* CS 24 · Gantt: --sapt pe container; fiecare bară are --de, --la (săptămâni, inclusiv) și --r (rândul) */
.gantt { left: 100px; top: 440px; width: 1720px; height: 400px; --sapt: 12; background: repeating-linear-gradient(90deg, var(--cream-06) 0 1px, transparent 1px calc(100% / var(--sapt))); box-shadow: inset -1px 0 var(--cream-16); }
.gantt::before { content: ""; position: absolute; left: 0; right: 0; top: 76px; height: 1px; background: var(--cream-16); }
.gantt__faza { position: absolute; top: 0; height: 100%; left: calc((var(--de) - 1) * 100% / var(--sapt)); width: calc((var(--la) - var(--de) + 1) * 100% / var(--sapt)); padding-left: 16px; border-left: 1px solid var(--cream-16); }
.gantt__faza--accent .t-eyebrow { color: var(--signal); }
.gantt__saptamani { position: absolute; left: 0; right: 0; top: 38px; display: grid; grid-template-columns: repeat(var(--sapt), 1fr); }
.gantt__saptamani > span { padding-left: 16px; font: 400 17px/1.5 var(--f-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--cream-56); }
.gantt__bara { position: absolute; top: calc(100px + var(--r) * 60px); left: calc((var(--de) - 1) * 100% / var(--sapt) + 6px); width: calc((var(--la) - var(--de) + 1) * 100% / var(--sapt) - 12px); height: 48px; padding: 0 20px; display: flex; align-items: center; white-space: nowrap; background: var(--cream-06); border-left: 2px solid var(--cream-56); font: 400 17px/1.5 var(--f-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--cream-86); }
.gantt__bara--accent { background: linear-gradient(90deg, var(--signal), rgba(200, 55, 45, 0.35)); border-left-color: var(--signal); color: var(--cream); }

/* CS 34 · Matrice de risc 4×4 (Diagramă/Celulă risc): rândurile de sus = probabilitate mare */
.matrice-risc { left: 200px; top: 110px; width: 812px; display: grid; grid-template-columns: repeat(4, 200px); grid-auto-rows: 150px; gap: 4px; }
.risc { padding: 16px; display: flex; flex-direction: column; justify-content: flex-end; font: 400 20px/1.5 var(--f-sans); color: var(--cream); }
.risc--mic { background: var(--cream-06); color: var(--cream-86); }
.risc--mediu { background: var(--burgundy); }
.risc--mare { background: var(--signal-dark); }
.risc--critic { background: var(--signal); }
.axa-verticala { writing-mode: vertical-rl; transform: rotate(180deg); }

/* CS 39 · SWOT (Text/Card SWOT) */
.card-swot { flex: 1; height: 400px; padding: 32px 32px 36px; display: flex; flex-direction: column; justify-content: space-between; border-top: 2px solid var(--border); }
.card-swot__text { display: flex; flex-direction: column; gap: 10px; }
.card-swot--accent { border-top-color: var(--signal); }
.card-swot--accent .t-stat { color: var(--signal); }

/* CS 40 · Hartă punctată (imagine din kit) */
.harta-punctata { left: 100px; top: 440px; width: 860px; height: 430px; background: url("assets/diagrame/harta-punctata.png") 0 0 / 100% 100% no-repeat; }
.harta-punctata > .punct-harta { transform: none; }

/* CS 41 · Buclă de etape (Flux/Etapă buclă): rombul cu indexul stă sus (implicit) sau jos (.etapa-bucla--jos) */
.bucla { left: 100px; top: 475px; width: 1720px; height: 360px; display: flex; align-items: center; }
.bucla__leg { flex: 1; height: 2px; background: var(--cream-56); }
.etapa-bucla { position: relative; width: 360px; height: 360px; flex: none; border-radius: 50%; border: 1.5px solid var(--cream-56); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 0 70px; }
.etapa-bucla__marcaj { position: absolute; left: 50%; top: 0; width: 38px; height: 38px; transform: translate(-50%, -50%) rotate(45deg); background: var(--void); border: 1.5px solid var(--cream-56); display: flex; align-items: center; justify-content: center; }
.etapa-bucla__marcaj > span { transform: rotate(-45deg); }
.etapa-bucla--jos .etapa-bucla__marcaj { top: 100%; }
.etapa-bucla--accent, .etapa-bucla--accent .etapa-bucla__marcaj { border-color: var(--signal); }
.etapa-bucla--accent .etapa-bucla__marcaj .t-label { color: var(--signal); }

/* CS 42 · Cercuri suprapuse (Diagramă/Cerc roadmap) */
.cerc-roadmap { width: 420px; height: 420px; border-radius: 50%; background: rgba(240, 237, 232, 0.02); border: 1.5px solid var(--cream-56); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 0 110px; }
.cerc-roadmap--accent { border-color: var(--signal); }
.cerc-roadmap--accent .t-label { color: var(--signal); }

/* CS 43 · Flux vertical (Flux/Pas vertical): fiecare pas ocupă 250 px pe înălțime */
.pasi-v { left: 1060px; top: 150px; width: 760px; display: flex; flex-direction: column; }
.pasi-v::before { content: ""; position: absolute; left: 31.5px; top: 64px; bottom: 186px; width: 1.5px; background: repeating-linear-gradient(180deg, var(--cream-56) 0 4px, transparent 4px 12px); }
.pas-v { position: relative; height: 250px; display: flex; gap: 28px; align-items: flex-start; }
.pas-v__marcaj { position: relative; width: 64px; height: 64px; flex: none; display: flex; align-items: center; justify-content: center; }
.pas-v__marcaj::before { content: ""; position: absolute; left: 10px; top: 10px; width: 44px; height: 44px; transform: rotate(45deg); background: var(--void); border: 1.5px solid var(--cream-56); }
.pas-v__marcaj > span { position: relative; }
.pas-v__text { padding-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.pas-v--accent .pas-v__marcaj::before { background: linear-gradient(rgba(200, 55, 45, 0.14), rgba(200, 55, 45, 0.14)), var(--void); border-color: var(--signal); box-shadow: 0 0 28px rgba(200, 55, 45, 0.55); }
.pas-v--accent .pas-v__marcaj .t-label { color: var(--cream); }

/* CS 52 · Ecosistem (Diagramă/Pastilă): deck.js trage liniile de la pastile la hub */
.ecosistem { left: 0; top: 0; width: 1920px; height: 1080px; }
.ecosistem > * { position: absolute; }
.ecosistem svg { left: 0; top: 0; }
.ecosistem__lumina { left: 750px; top: 445px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(closest-side, rgba(200, 55, 45, 0.38), rgba(200, 55, 45, 0)); }
.ecosistem__hub { left: 860px; top: 555px; width: 200px; height: 200px; }
.ecosistem__intrari { left: 100px; top: 448px; display: flex; flex-direction: column; align-items: flex-start; gap: 58px; }
.ecosistem__iesiri { right: 100px; top: 440px; display: flex; flex-direction: column; align-items: flex-end; gap: 36px; }
.pastila { height: 54px; display: inline-flex; align-items: center; gap: 12px; padding: 0 22px; white-space: nowrap; background: var(--surface); box-shadow: inset 0 0 0 1px var(--cream-16); font: 400 17px/1.5 var(--f-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--cream-86); }
.pastila::before { content: ""; width: 8px; height: 8px; transform: rotate(45deg); background: var(--cream-56); flex: none; }
.pastila--iesire { background: var(--cream-06); box-shadow: inset 0 0 0 1px var(--cream-56); color: var(--cream); }
.pastila--iesire::before { background: var(--cream); }
.pastila--accent { background: linear-gradient(90deg, rgba(200, 55, 45, 0.45), rgba(200, 55, 45, 0.12)); box-shadow: inset 0 0 0 1px var(--signal); color: var(--cream); }
.pastila--accent::before { background: var(--signal); }

/* CS 53 · Roadmap în trepte (Plan/Treaptă roadmap): --i de la 0, --n = câte trepte */
.trepte-rm { left: 100px; top: 440px; width: 1720px; height: 430px; --n: 4; }
.treapta-rm { position: absolute; width: 400px; left: calc(var(--i) * 440px); top: calc((var(--n) - 1 - var(--i)) * 60px); display: flex; flex-direction: column; gap: 12px; }
.treapta-rm__continut { position: relative; padding-top: 18px; border-top: 2px solid var(--cream-56); display: flex; flex-direction: column; gap: 8px; }
.treapta-rm:not(:last-child) .treapta-rm__continut::after { content: ""; position: absolute; left: 400px; top: -61px; width: 20px; height: 60px; border-right: 1.5px solid var(--cream-56); border-bottom: 1.5px solid var(--cream-56); }
.treapta-rm:not(:last-child) .treapta-rm__continut::before { content: ""; position: absolute; left: 420px; top: -61.5px; width: 20px; border-top: 1.5px solid var(--cream-56); }
.treapta-rm--accent .t-eyebrow { color: var(--signal); }
.treapta-rm--accent .treapta-rm__continut { border-top-color: var(--signal); }

/* CS 54 · Pâlnie simplă (Grafic/Pâlnie simplă + Grafic/Reper pâlnie): --i de la 0 */
.palnie { left: 710px; top: 250px; width: 640px; height: 482px; }
.palnie__strat { position: absolute; height: 110px; top: calc(var(--i) * 124px); left: calc(var(--i) * 60px); right: calc(var(--i) * 60px); display: flex; align-items: center; justify-content: center; clip-path: polygon(0 0, 100% 0, calc(100% - 60px) 100%, 60px 100%); font: 400 17px/1.5 var(--f-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--cream); }
.palnie__strat.n1 { background: linear-gradient(180deg, var(--signal), rgba(200, 55, 45, 0.75)); }
.palnie__strat.n2 { background: linear-gradient(180deg, var(--signal-dark), rgba(155, 37, 32, 0.7)); }
.palnie__strat.n3 { background: linear-gradient(180deg, var(--burgundy), rgba(116, 28, 28, 0.7)); }
.palnie__strat.n4 { background: linear-gradient(180deg, rgba(116, 28, 28, 0.6), rgba(116, 28, 28, 0.35)); }
.reper-palnie { position: absolute; left: calc(616px - var(--i) * 60px); top: calc(var(--i) * 124px + 55px); transform: translateY(-50%); width: 445px; display: flex; align-items: center; gap: 16px; }
.reper-palnie::before { content: ""; width: 60px; height: 1px; background: var(--cream-56); flex: none; }
.reper-palnie > .t-h2 { width: 133px; flex: none; }
.reper-palnie > .t-caption { width: 220px; }
.reper-palnie--accent::before { background: var(--signal); }
.reper-palnie--accent .t-h2 { color: var(--signal); }

/* ================= Imagini și compoziții ================= */

/* CS 18 · Imagine + text; CS 19 · Imagine pe tot slide-ul (fotografia în --img) */
.imagine--plina::after { background: linear-gradient(180deg, rgba(10, 10, 10, 0) 45%, rgba(10, 10, 10, 0.9) 100%); }
.legenda-imagine { left: 100px; top: 745px; width: 1100px; display: flex; flex-direction: column; gap: 12px; }

/* CS 27 · Persona (Echipă/Persona): fotografia în --img */
.persona { width: 480px; height: 420px; padding: 32px; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; }
.persona > * { position: relative; z-index: 1; }

/* CS 33 · Card scenariu */
.card-scenariu { flex: 1; padding: 32px; display: flex; flex-direction: column; justify-content: space-between; border-top: 2px solid var(--border); }
.card-scenariu__continut { display: flex; flex-direction: column; gap: 14px; }
.card-scenariu__orizont { display: flex; align-items: center; gap: 12px; }
.card-scenariu__orizont::before { content: ""; width: 9px; height: 9px; transform: rotate(45deg); background: var(--cream-56); flex: none; margin-left: 2px; }
.card-scenariu--accent { border-top-color: var(--signal); background: linear-gradient(180deg, rgba(200, 55, 45, 0), rgba(200, 55, 45, 0.42)), var(--cream-04); }
.card-scenariu--accent .card-scenariu__continut > .t-label { color: var(--signal); }
.card-scenariu--accent .card-scenariu__orizont::before { background: var(--signal); }

/* CS 50 · Coloane de valoare în trepte (Date/Coloană valoare): înălțimea din top; Ton 1-3 sau accent */
.coloana-valoare { width: 430px; bottom: 210px; padding: 28px; display: flex; flex-direction: column; gap: 8px; background: var(--surface); }
.coloana-valoare--2 { background: var(--cream-16); }
.coloana-valoare--3 { background: rgba(240, 237, 232, 0.26); }
.coloana-valoare--accent { background: linear-gradient(180deg, var(--signal), rgba(200, 55, 45, 0.7)); }
.coloana-valoare--accent .t-caption { color: var(--cream); }

/* Compoziții (CS 47, 51, 54b, 56, 57): grafica vine ca imagine din kit, textele stau deasupra, în px pe scenă */
.compozitie { background: 0 0 / 100% 100% no-repeat; }
.compozitie--47 { left: 994px; top: 260px; width: 826px; height: 460px; background-image: url("assets/compozitii/cs-47.webp"); }
.compozitie--51 { left: 700px; top: 120px; width: 1121px; height: 738px; background-image: url("assets/compozitii/cs-51.webp"); }
.compozitie--54b { left: 700px; top: 144px; width: 1111px; height: 713px; background-image: url("assets/compozitii/cs-54b.webp"); }
.compozitie--56 { left: 100px; top: 260px; width: 1448px; height: 610px; background-image: url("assets/compozitii/cs-56.webp"); }
.compozitie--57 { left: 0; top: 206px; width: 1920px; height: 874px; background-image: url("assets/compozitii/cs-57.webp"); }
.cz-t17 { font: 600 17.09px/1.5 var(--f-sans); }
.cz-d14 { font: 400 13.75px/1.5 var(--f-sans); }
.cz-l17 { font: 500 17.23px/1.5 var(--f-sans); white-space: nowrap; }
.cz-t34 { font: 600 34.46px/1.2 var(--f-sans); letter-spacing: -0.01em; }
.cz-n55 { font: 500 55.14px/1.1 var(--f-sans); letter-spacing: -0.02em; white-space: nowrap; }
.cz-n41 { font: 400 41.35px/1.2 var(--f-sans); letter-spacing: -0.07em; white-space: nowrap; }
.cz-n97 { font: 500 96.8px/1 var(--f-sans); letter-spacing: -0.02em; }
.cz-n74 { font: 400 73.6px/1.1 var(--f-sans); letter-spacing: -0.03em; }
.cz-u19 { font: 500 19.2px/1.2 var(--f-sans); letter-spacing: -0.01em; }
.cz-t20 { font: 600 20px/1.5 var(--f-sans); }
.cz-d16 { font: 400 16px/1.5 var(--f-sans); }
.cz-pret { display: flex; align-items: flex-end; }
.cz-gradient { background: linear-gradient(180deg, rgba(240, 237, 232, 0.7), rgba(240, 237, 232, 0.45)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ================= Verificare (?verifica) ================= */

.verifica .slide .problema { outline: 3px solid #ff00aa; outline-offset: 2px; }
.raport { position: fixed; right: 16px; bottom: 16px; max-width: 520px; max-height: 50vh; overflow: auto; background: #111; color: #f0ede8; border: 1px solid #ff00aa; padding: 12px 14px; font: 13px/1.5 ui-monospace, monospace; z-index: 10; white-space: pre-wrap; }

/* ================= Print și PDF ================= */

@page { size: 1920px 1080px; margin: 0; }
@media print {
  html, body { width: 1920px; height: auto; overflow: visible; background: var(--void); }
  .deck { position: static; transform: none; width: 1920px; height: auto; }
  .slide { position: relative; display: block !important; page-break-after: always; break-after: page; }
  .raport { display: none; }
}