/* ─── FONTURI (găzduite local) ────────────────────────────────────────
   Erau aduse de la api.fontshare.com și fonts.googleapis.com: două foi de stil
   care BLOCAU randarea, de pe două domenii străine, plus încă două domenii
   pentru fișierele propriu-zise. Patru conexiuni noi (DNS + TLS) înainte ca
   pagina să apară — cel mai scump lucru de pe telefon. Acum vin de pe același
   domeniu, deci pornesc odată cu pagina.

   Satoshi are DOAR 300/400/500/700/900. Nu are 600, deși stilurile îl cereau în
   14 locuri: browserul îl fabrica singur, îngroșând artificial litera (tulbure,
   cu grosimi inegale). Acum se folosesc numai greutăți care există în font.
   ------------------------------------------------------------------- */
@font-face {
  font-family: 'Satoshi'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/satoshi-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Satoshi'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/assets/fonts/satoshi-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Satoshi'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/assets/fonts/satoshi-700.woff2') format('woff2');
}
/* Font de rezervă cu metrici potrivite. Până se încarcă Satoshi, textul e scris
   cu fontul sistemului; dacă acela are alte proporții, rândurile se rearanjează
   când fontul real sosește, iar pagina „sare" (CLS, măsurat de Google).
   Valorile sunt măsurate, nu ghicite: la același corp, Satoshi are 97,2% din
   lățimea Arial, 111% din ascendență și 114,3% din descendență. */
@font-face {
  font-family: 'Satoshi Fallback';
  src: local('Arial'), local('Helvetica Neue'), local('Liberation Sans');
  size-adjust: 97.2%;
  ascent-override: 111%;
  descent-override: 114.3%;
}

/* Lora se folosește doar la un rând italic din titluri. Rămâne împărțită pe
   subseturi: fișierul latin-ext se descarcă doar pentru ă, ș, ț. */
@font-face {
  font-family: 'Lora'; font-style: italic; font-weight: 500; font-display: swap;
  src: url('/assets/fonts/lora-italic-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lora'; font-style: italic; font-weight: 500; font-display: swap;
  src: url('/assets/fonts/lora-italic-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ─── TOKENS ─────────────────────────────────────────────────────────
   Sistemul vizual e cel de pe razvanpopescu.com și creierulafacerii.ro.
   Contrast măsurat pe --surface (#fafafa):
     --accent      #c93c05 = 4,9:1  → trece WCAG AA, se folosește la text normal
     --accent-lg   #e8490e = 3,7:1  → pică AA la text normal, DOAR titluri mari
   ------------------------------------------------------------------- */
:root {
  --ink:        #17120e;   /* negru cald, nu negru pur: paleta e caldă peste tot */
  --ink-soft:   #46403b;
  --ink-muted:  #6b6560;
  --surface:    #f7f2ed;   /* hârtie caldă: cardurile albe se separă tonal, fără border */
  --surface-2:  #fff3ee;
  --surface-3:  #ffffff;   /* alb curat, nu crem aproape identic cu cald */
  --white:      #ffffff;
  --accent:     #c93c05;
  --accent-lg:  #e8490e;
  --accent-lt:  #ff6a2b;
  --border:     rgba(23,18,14,0.08);

  --font-sans:    'Satoshi', 'Satoshi Fallback', system-ui, -apple-system, sans-serif;
  --font-display: 'Lora', Georgia, serif;

  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --step-h1: clamp(2.3rem, 5vw, 3.9rem);
  --step-h2: clamp(1.7rem, 3.2vw, 2.5rem);
  --step-h3: clamp(1.25rem, 2.2vw, 1.6rem);
  --step-lead: clamp(1.05rem, 1.7vw, 1.3rem);
}

/* ─── RESET ─────────────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  background: var(--surface);
  color: var(--ink);
  font-size: clamp(18px, 1.25vw, 19.5px);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-sm); }

/* ─── LAYOUT ────────────────────────────────────────────────────────── */
.container { max-width: clamp(1000px, 72vw, 1120px); margin-inline: auto; padding-inline: clamp(20px, 5vw, 48px); }
/* O singură lățime pe tot site-ul. Antetul, subsolul și fiecare secțiune încep
   la același pixel; altfel conținutul „sare" lateral la derulare. */
section { padding-block: clamp(64px, 8vw, 104px); }   /* ritm spațios: aerul e parte din senzația premium */
/* Fiecare secțiune are un fundal OPAC. Contează pentru efectul de cortină de mai
   jos: dacă o secțiune ar fi transparentă, heroul fixat s-ar vedea prin ea.
   Specificitate mică intenționat, ca variantele --warm / --cream să câștige. */
section { background-color: var(--surface); }
/* Separarea se face prin fundal, nu prin linii — ca pe razvanpopescu.com. */
.section--warm { background: var(--surface-2); }
.section--cream { background: var(--surface-3); }
.divider { height: 1px; background: var(--border); border: 0; }


/* ─── MĂSURA TEXTULUI ────────────────────────────────────────────────────
   Titlul și textul primesc ACEEAȘI măsură, deci se termină la același pixel.
   Grilele de carduri, tabelele și benzile de butoane rămân late.

   O SINGURĂ margine din stânga pe tot site-ul. Coloana de text era înainte
   centrată în container, iar grilele porneau de la marginea lui: în secțiunile
   cu carduri textul începea la 188px, în cele fără carduri la 320px. Marginea
   sărea lateral de la o secțiune la alta și de la o pagină la alta. Acum totul
   pornește din același loc, iar măsura doar limitează lungimea rândului.
   ------------------------------------------------------------------- */
:root { --measure: 40rem; }   /* 640px, ~83 caractere pe rând */

section h1, section h2, section h3, section h4,
section p, section blockquote,
section > .container > ul,
.step ul, .tier ul, .step__meta ~ p {
  max-width: var(--measure);
  margin-inline: 0;
}
/* Blocurile de text primesc aceeași măsură ca textul din ele, deci și liniile
   despărțitoare și casetele se termină unde se termină textul. */
.step, .tier, .project, .seed,
.step__meta, .checks, .btn-row {
  max-width: var(--measure);
  margin-inline: 0;
}

/* Rămân pe toată lățimea DOAR ce chiar are nevoie: grilele de carduri (trei pe
   rând) și tabelele (cinci coloane). Restul s-ar strica dacă le-am îngusta. */
.grid, .table-wrap, .card, .card * {
  max-width: none;
}

/* ─── TYPE ────────────────────────────────────────────────────────────
   Greutate medie, nu bold. Lecția Mercury: 480–500 pentru toate titlurile;
   vocea e sigură fără să strige. 700 nu se mai folosește nicăieri la titluri. */
h1, h2, h3, h4 { line-height: 1.12; font-weight: 500; letter-spacing: -0.015em;
  text-wrap: balance; }
.card h3 { hyphens: auto; }
h1 { font-size: var(--step-h1); }
h2 { font-size: var(--step-h2); }
h3 { font-size: var(--step-h3); line-height: 1.25; }
/* Un singur ritm pentru titluri pe tot site-ul. Înainte fiecare secțiune își
   scria singură distanța, cu `style="margin-top:..."` pus de mână: 1.2rem
   într-un loc, 1.4rem în altul, 2.5rem mai încolo. Acum valoarea stă aici. */
h2 + p, h2 + ul, h2 + .lead { margin-top: 1.2rem; }
h3 + p, h3 + ul, h3 + .lead { margin-top: 0.7rem; }
p { max-width: none; }
p + p { margin-top: 1.1em; }
strong { font-weight: 700; }

.display-em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  color: var(--accent-lg);
  letter-spacing: -0.01em;
}
/* Disciplina accentului: portocaliul e rezervat acțiunii principale, cifrelor-dovadă
   și italicului din titluri. Etichetele mici devin cenușiu cald — altfel accentul
   e peste tot și nu mai înseamnă nimic. */
.eyebrow {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 1rem;
}
.lead { font-size: var(--step-lead); color: var(--ink-soft); }
.muted { color: var(--ink-muted); }
.note { font-size: 0.85rem; color: var(--ink-muted); max-width: var(--measure); margin-inline: 0; }

/* ─── SKIP LINK ───────────────────────────────────────────────────────
   Primul element focusabil din pagină. Ascuns până la Tab, apoi sare peste
   antet direct în conținut — pentru cine navighează de la tastatură. */
.skip-link {
  position: absolute; left: 50%; translate: -50% -150%;
  z-index: 100; background: var(--ink); color: var(--white);
  padding: 0.7rem 1.2rem; border-radius: 0 0 var(--radius-md) var(--radius-md);
  font-size: 0.9rem; font-weight: 500; transition: translate 0.15s ease;
}
.skip-link:focus-visible { translate: -50% 0; }

/* ─── HEADER ────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(247,242,237,0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.site-header__inner { display: flex; align-items: center; gap: 1.5rem; padding-block: 0.7rem; }
.site-header__inner { flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 0.9rem; margin-right: auto; }
.brand img { width: 48px; height: 32px; flex-shrink: 0; }
.brand__text { display: flex; flex-direction: column; justify-content: center; }
.brand__name { font-weight: 500; font-size: 1rem; line-height: 1.25; white-space: nowrap; }
.brand__tag { font-size: 0.75rem; color: var(--ink-muted); line-height: 1.25; white-space: nowrap; }

/* Sub 950px nav-ul devine o bandă orizontală, derulabilă, sub rândul cu marca.
   Fără hamburger și fără JS: niciun viewport nu rămâne fără navigație. */
/* Sub 950px nav-ul trece pe rândul de sub marcă și SE ÎNFĂȘOARĂ. Era o bandă
   derulabilă lateral: pe un ecran de 375px „Despre" cădea în afara ecranului,
   fără niciun semn că mai există ceva acolo. Acum toate paginile se văd. */
.nav {
  order: 3; width: 100%;
  /* 0,65rem, nu mai mult: „Cine sunt" e cu 3 litere mai lung decât „Despre",
     iar la 0,78rem meniul trecea pe două rânduri și antetul creștea cu 30px
     pe telefon. Sub 375px se înfășoară oricum, ceea ce e în regulă. */
  display: flex; flex-wrap: wrap; gap: 0.5rem 0.65rem;
  font-size: 0.85rem; font-weight: 500;
  /* Linkurile se întind până la marginea din dreapta. Golul rămas creștea cu
     ecranul — 0px la 375, dar 52px la 430 — și meniul atârna spre stânga.
     Prima etichetă rămâne aliniată cu marca și cu tot conținutul paginii;
     doar spațiile dintre linkuri respiră mai mult pe ecrane late. */
  justify-content: space-between;
  padding-block: 0.55rem; margin-top: 0.05rem;
  border-top: 1px solid var(--border);
}
/* Sub 375px meniul se înfășoară, iar „space-between" ar împinge linkurile
   rămase pe al doilea rând la marginile opuse. Acolo revenim la aliniere simplă. */
@media (max-width: 374px) { .nav { justify-content: flex-start; } }
.nav a { white-space: nowrap; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--accent); }
@media (min-width: 950px) {
  .site-header__inner { flex-wrap: nowrap; gap: 1.5rem; }
  .nav {
    order: 0; width: auto; flex-wrap: nowrap;
    padding-block: 0; margin-top: 0; border-top: 0;
    font-size: 0.9rem; gap: 1.4rem;
  }
  .site-header .btn--sm { white-space: nowrap; }
}

/* ─── BUTTONS ───────────────────────────────────────────────────────── */
.btn {
  display: inline-block; padding: 0.85rem 1.4rem;
  border-radius: var(--radius-pill);
  font-weight: 500; font-size: 0.9rem; text-align: center; white-space: nowrap;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }
/* Acțiunea principală poartă accentul — singurul loc unde portocaliul e fundal.
   #c93c05 cu alb = 4,9:1, trece AA. Secundarul e contur de cerneală, nu accent. */
.btn--primary { background: var(--accent); color: var(--white); }
.btn--primary:hover { background: var(--ink); }
.btn--ghost { border: 1.5px solid var(--ink); color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--white); }
/* Butonul din antet: plin, dar cu cerneală, nu cu accent. E prezent pe fiecare
   ecran, iar în portocaliu ar concura permanent cu acțiunea principală a
   paginii — pe Acasă sunt deja trei butoane portocalii. Plin pe crem se vede
   mai bine decât conturul, fără să cheltuiască accentul. */
.btn--ink { background: var(--ink); color: var(--white); }
.btn--ink:hover { background: var(--accent); color: var(--white); }
.btn--sm { padding: 0.6rem 1.2rem; font-size: 0.85rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 1.6rem; }

/* ─── HERO ──────────────────────────────────────────────────────────── */
/* Fundal plin, nu gradient: gradientul se stingea în culoarea secțiunii
   următoare, deci hero-ul nu avea margine, doar un gol mare. Acum se termină
   cu o linie netă de culoare. Marginea de jos e mai mică decât cea de sus. */
.hero {
  padding-top: clamp(56px, 7vw, 96px);
  padding-bottom: clamp(48px, 5.5vw, 76px);
  background: var(--surface-2);
}
/* Heroul despicat (Despre, Contact): text stânga, imagine dreapta. */
.hero__grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 950px) { .hero__grid { grid-template-columns: 1.12fr 0.88fr; } }
/* În coloana despicată, titlul respiră dar nu domină: altfel se rupe pe 6–7 rânduri. */
.hero__grid h1 { font-size: clamp(2.1rem, 3.6vw, 3.05rem); }
.hero__media { margin: 0; }
/* Imaginile sunt 4:5. Cadrul păstrează același raport, deci nu se decupează
   nimic. Pe mobil forțam 3:2, iar `cover` tăia din portret exact partea de sus:
   capul omului. Un cadru mai scurt câștiga puțin spațiu vertical și pierdea
   subiectul — schimb prost. `object-position` rămâne sus, ca plasă de siguranță
   dacă vreo imagine viitoare nu are exact raportul acesta. */
.hero__media img {
  width: 100%; height: auto;
  aspect-ratio: 4 / 5; object-fit: cover; object-position: center 20%;
  border-radius: calc(var(--radius-lg) + 8px);
}

/* ─── HERO FULL-BLEED (Acasă) ─────────────────────────────────────────────
   Ca la Mercury, dar în registrul cald al site-ului: amurg peste satul din
   vale, Răzvan văzut din spate la zidul terasei — povestea întoarcerii acasă,
   nu un portret. Textul ivory stă peste cer, cu un văl întunecat cald care îi
   garantează contrastul. Fața reală rămâne pe Despre și Contact. */
/* Hero full-viewport: antetul (73px pe desktop, 147px sub 950px) plus heroul
   umplu exact un ecran, iar textul stă centrat pe verticală. svh, nu vh: pe
   telefon vh include bara de adresă și ar împinge conținutul sub fold. */
.hero--bleed {
  position: relative; overflow: hidden;
  display: flex; align-items: center;
  min-height: calc(100vh - 73px);
  min-height: calc(100svh - 73px);
  padding-block: clamp(32px, 5vh, 64px);
  background: var(--ink);
}
.hero--bleed .container { width: 100%; }
@media (max-width: 949px) {
  .hero--bleed {
    min-height: calc(100vh - 147px);
    min-height: calc(100svh - 147px);
  }
}
.hero__bg {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center bottom;
}
.hero--bleed::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  /* Textul e centrat pe verticală, deci vălul acoperă mai uniform: dens sus și
     în zona textului, mai aerisit doar spre terasa din josul cadrului. */
  background: linear-gradient(180deg,
    rgba(23,18,14,0.80) 0%,
    rgba(23,18,14,0.62) 45%,
    rgba(23,18,14,0.38) 74%,
    rgba(23,18,14,0.20) 100%);
}
.hero--bleed .container { position: relative; z-index: 2; text-align: center; }
.hero--bleed h1 { font-size: clamp(2.2rem, 4.2vw, 3.5rem); max-width: 24ch; margin-inline: auto;
  color: #f6efe9; }
.hero--bleed .display-em { color: var(--accent-lt); }
.hero--bleed .eyebrow { color: rgba(246,239,233,0.75); }
.hero--bleed .lead { max-width: var(--measure); margin-inline: auto; color: rgba(246,239,233,0.88); }
.hero--bleed .btn-row { justify-content: center; }
.hero--bleed .checks { justify-content: center; }
.hero--bleed .checks li { color: rgba(246,239,233,0.92); text-shadow: 0 1px 14px rgba(23,18,14,0.55); }
.hero--bleed .checks li::before { color: rgba(246,239,233,0.75); }
.hero--bleed .lead { text-shadow: 0 1px 14px rgba(23,18,14,0.45); }
.hero--bleed .btn--ghost { border-color: rgba(246,239,233,0.85); color: rgba(246,239,233,0.95); }
.hero--bleed .btn--ghost:hover { background: var(--white); color: var(--ink); }
@media (max-width: 949px) {
  .hero__bg { object-position: 70% bottom; }   /* silueta rămâne în cadru pe telefon */
}

/* ─── CORTINA (hero fixat, conținutul urcă peste el) ──────────────────
   Heroul rămâne pe loc sub antet, iar secțiunile următoare alunecă peste el.
   Nu e o imagine „background-attachment: fixed" — aceea se rupe pe iOS și
   costă la derulare. Aici doar poziția e lipită, deci compunerea o face GPU-ul.
   Doar pe ecrane late: pe telefon antetul are înălțime variabilă, iar efectul
   ar mânca din ecran fără să aducă mare lucru. */
@media (prefers-reduced-motion: no-preference) and (min-width: 950px) {
  .hero--bleed { position: sticky; top: 73px; z-index: 0; }
  main > section:not(.hero--bleed), .site-footer { position: relative; z-index: 1; }
}

/* ─── FIGURĂ LATĂ ÎN SECȚIUNE (Cum lucrez) ──────────────────────────── */
.figure-wide { margin: 2.4rem auto 0; max-width: none; }
.figure-wide img {
  width: 100%; height: auto;
  aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: calc(var(--radius-lg) + 8px);
}

/* ─── HĂRȚI DE PROCES ─────────────────────────────────────────────────
   Pe desktop harta se așază pe lățimea coloanei. Pe ecrane mici NU se
   micșorează — ar deveni ilizibilă — ci își păstrează dimensiunea și se
   derulează lateral, cu indiciul de mai jos. */
/* Harta stă în coloana de text, ca orice altceva pe site: o singură margine din
   stânga. Nu se micșorează ca să încapă — la lățimea coloanei textul din ea ar
   scădea sub 10px — ci își ține mărimea și se derulează lateral, exact ca
   tabelul scării de pe aceeași pagină. Indiciul de derulare e mereu vizibil,
   nu doar pe telefon, fiindcă derularea există la orice lățime. */
/* Cât o grilă de carduri, nu cât coloana de text: pornește din aceeași margine,
   dar folosește toată lățimea containerului, ca să rămână mai puțin de derulat. */
.harta-blk { margin-block: 2.4rem 0; max-width: none; }
.harta svg { display: block; width: 100%; height: auto; min-width: 1300px; }
.harta::after {
  content: "Trage lateral ca să vezi toată harta →";
  display: block; margin-top: 0.6rem;
  font-size: 0.78rem; color: var(--ink-muted);
}
.harta-blk figcaption {
  margin-top: 0.9rem; font-size: 0.9rem; color: var(--ink-soft);
  max-width: var(--measure);
}

/* ─── SCARA PROCESELOR (diagramă SVG, Test gratuit) ─────────────────── */
.ladder { margin-top: 2rem; }
.ladder svg { display: block; width: 100%; min-width: 760px; height: auto; }

/* Pe ecrane înguste tabelul și diagrama se derulează lateral. Fără niciun semn,
   omul nu are de unde să știe că mai există conținut în dreapta. */
@media (max-width: 780px) {
  .table-wrap::after, .ladder::after {
    content: "Trage lateral ca să vezi tot →";
    display: block; margin-top: 0.6rem;
    font-size: 0.78rem; color: var(--ink-muted);
  }
}
.ladder text { font-family: var(--font-sans); }
/* Secțiunea de după hero începe mai devreme: marginea hero-ului o precede deja. */
.hero + section { padding-top: clamp(36px, 4.5vw, 56px); }
.hero h1 { margin-bottom: 1.1rem; }
.hero .lead { max-width: var(--measure); }

/* ─── CHECK STRIP ───────────────────────────────────────────────────── */
.checks { display: flex; flex-wrap: wrap; gap: 0.8rem 2rem; margin-top: 1.8rem; list-style: none; }
.checks li { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.9rem; font-weight: 500; }
.checks li::before { content: "✓"; color: var(--ink-soft); font-weight: 700; flex-shrink: 0; }

/* ─── CARDS / GRID ──────────────────────────────────────────────────── */
.grid { display: grid; gap: 1.35rem; margin-top: 1.9rem; }
@media (min-width: 700px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
/* Cardurile se separă tonal — o treaptă mai deschise decât fundalul secțiunii,
   fără border și fără umbră. Pe secțiunile albe, treapta e inversă: hârtie caldă. */
:root { --card-pad: clamp(1.6rem, 3vw, 2rem); }
.card {
  background: var(--white);
  border-radius: var(--radius-lg); padding: var(--card-pad);
}
.section--cream .card { background: var(--surface); }
/* Arta abstractă din capul cardului iese până la marginile lui, ca la Mercury. */
.card__art { margin: calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)) 1.3rem; }
.card__art img { display: block; width: 100%; height: auto;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.card h3 { margin-bottom: 0.6rem; }
.card p { font-size: 0.95rem; color: var(--ink-soft); }

/* ─── STAT ──────────────────────────────────────────────────────────── */
.stat__num { font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 500; color: var(--accent-lg); line-height: 1; letter-spacing: -0.03em; }
.stat h3 { margin: 0.7rem 0 0.5rem; }

/* ─── TIERS ─────────────────────────────────────────────────────────── */
.tier { border-top: 1px solid var(--border); padding-block: clamp(1.8rem, 3.4vw, 2.6rem); }
.tier__label { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); }
.tier__price { font-size: clamp(1.8rem, 3.4vw, 2.5rem); font-weight: 500; letter-spacing: -0.02em; margin-top: 0.4rem; }
.tier__terms { font-size: 0.85rem; color: var(--ink-muted); margin-bottom: 1.4rem; }
.tier h2 { margin: 0.5rem 0 1rem; }
.list { list-style: none; margin-top: 1.4rem; display: grid; gap: 0.6rem; }
.list li { display: flex; gap: 0.6rem; font-size: 0.95rem; }
.list li::before { content: "—"; color: var(--ink-muted); flex-shrink: 0; }

/* ─── LINKURI ÎN TEXT ─────────────────────────────────────────────────
   Într-un paragraf, linkul se subliniază. Doar culoarea nu ajunge: cine nu
   distinge portocaliul de negru nu vede că este link (WCAG 1.4.1). */
main p a:not(.btn):not(.tier__more),
main li a:not(.btn),
.legal a { text-decoration: underline; text-underline-offset: 0.18em;
  text-decoration-thickness: 1px; color: var(--accent); }
main p a:not(.btn):hover, main li a:not(.btn):hover, .legal a:hover { color: var(--ink); }
/* Linkurile din antet, subsol și liste de navigare rămân fără subliniere:
   acolo poziția spune deja că sunt linkuri. */
.site-header a, .site-footer a, .nav a { text-decoration: none; }

/* ─── TABLE ─────────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; margin-top: 1.6rem; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; min-width: 620px; font-size: 0.92rem; }
th, td { text-align: left; padding: 0.85rem 1rem; border-bottom: 1px solid var(--border); vertical-align: top; }
th { font-weight: 500; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }

/* ─── QUOTE / CALLOUT ───────────────────────────────────────────────── */
blockquote { border-left: 3px solid var(--accent-lg); padding-left: 1.3rem; margin-block: 1.8rem; font-size: 1.05rem; }
.callout { background: var(--surface-2); border-radius: var(--radius-lg); padding: clamp(1.4rem, 3vw, 2rem); margin-block: 2rem;
  max-width: var(--measure); margin-inline: 0; }
/* în interiorul casetei textul umple caseta, nu-și mai aplică măsura din nou */
.callout h1, .callout h2, .callout h3, .callout h4, .callout p { max-width: none; }
.callout__step { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 0.5rem; }

/* ─── STEP (ladder rungs) ───────────────────────────────────────────── */
.step { border-top: 1px solid var(--border); padding-block: clamp(1.8rem, 3.4vw, 2.5rem); }
.step__meta { display: grid; gap: 1.2rem; margin-block: 1.6rem; }
@media (min-width: 640px) { .step__meta { grid-template-columns: repeat(2, 1fr); } }
/* Aceeași treaptă tonală ca la carduri. Pe secțiunile obișnuite caseta era
   colorată exact ca fundalul din spate: nu se vedea deloc, dar își păstra
   marginea interioară, așa că textul din ea părea împins aiurea spre dreapta. */
.step__meta div { background: var(--white); border-radius: var(--radius-md); padding: 1rem 1.2rem; }
.section--cream .step__meta div { background: var(--surface); }
.step__meta dt { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 0.3rem; }
h4 { font-size: 1.02rem; margin-top: 1.8rem; margin-bottom: 0.5rem; }
.step ul:not(.list):not(.checks) { margin-top: 0.8rem; padding-left: 1.2rem; display: grid; gap: 0.4rem; font-size: 0.95rem; }


/* Prima intrare dintr-un șir nu are linie deasupra: acolo secțiunea abia începe,
   iar linia ar dubla marginea secțiunii de dinainte. Liniile dintre intrări rămân. */
.step:first-of-type, .tier:first-of-type,
.project:first-of-type, .seed:first-of-type {
  border-top: 0;
  padding-top: 0;      /* secțiunea are deja marginea ei */
}

/* ─── PROJECT ENTRY ─────────────────────────────────────────────────── */
.project { border-top: 1px solid var(--border); padding-block: clamp(1.7rem, 3.2vw, 2.4rem); }
.project h3 { margin-bottom: 1rem; }
.project .result { font-weight: 700; color: var(--ink); }

/* ─── ARTICLE SEEDS ─────────────────────────────────────────────────── */
.seed { border-top: 1px solid var(--border); padding-block: 1.6rem; }
.seed__cat { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); }
.seed h3 { margin: 0.4rem 0 0.4rem; font-size: 1.15rem; }
.seed p { font-size: 0.92rem; color: var(--ink-soft); }

/* ─── FORM ────────────────────────────────────────────────────────────
   Formularul ține aceeași măsură ca textul de deasupra lui: înainte se oprea
   la 520px, deci marginea din dreapta rămânea zimțată față de titlu și de nota
   de dedesubt. Câmpurile scurte stau două pe rând, mesajul și butonul cât tot
   rândul — altfel patru casete cât toată lățimea fac formularul inutil de lung.
   ------------------------------------------------------------------- */
.form { display: grid; gap: 1.15rem 1.2rem; margin-top: 2.2rem; max-width: var(--measure); }
@media (min-width: 640px) { .form { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 0.45rem; align-content: start; }
.field--wide, .form button { grid-column: 1 / -1; }
.form button { justify-self: start; margin-top: 0.3rem; }  /* buton compact, ca oriunde altundeva */
.form__legend { font-size: 0.85rem; color: var(--ink-muted); margin: 0 0 -0.2rem; }
.field label { font-size: 0.85rem; font-weight: 500; }
.field .req { color: var(--accent); }
.field .opt { font-weight: 400; color: var(--ink-muted); }
/* Text doar pentru cititoarele de ecran. */
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.field input, .field textarea {
  font: inherit; padding: 0.8rem 1rem; border: 1px solid var(--border);
  border-radius: var(--radius-md); background: var(--white); color: var(--ink); width: 100%;
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-muted); }
.field input:focus-visible, .field textarea:focus-visible { border-color: var(--accent); }
.field textarea { min-height: 150px; resize: vertical; }
/* Nota de sub formular respiră; înainte se lipea de buton. */
.form + .note { margin-top: 1.5rem; }

/* ─── FOOTER ────────────────────────────────────────────────────────── */
.site-footer { background: var(--ink); color: var(--surface); padding-block: clamp(40px, 5vw, 64px); }
.site-footer a:hover { color: var(--accent-lt); }
.site-footer__brand { font-size: 1.3rem; font-weight: 500; }
.site-footer__tag { color: var(--accent-lt); font-weight: 500; margin-top: 0.2rem; }
.site-footer p { color: rgba(250,250,250,0.72); font-size: 0.95rem; margin-top: 1rem; }
.footer-grid { display: grid; gap: 2.5rem; margin-top: 2.8rem; }
@media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 860px) { .footer-grid { grid-template-columns: repeat(3, 1fr); } }
.footer-grid .footer-h { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(250,250,250,0.55); margin: 0 0 0.9rem; }
.footer-grid ul { list-style: none; display: grid; gap: 0.5rem; font-size: 0.95rem; }
.site-footer__base { margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid rgba(250,250,250,0.14); font-size: 0.85rem; color: rgba(250,250,250,0.55); display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; }

/* ─── MOTION ────────────────────────────────────────────────────────────
   Hero-ul NU are reveal. Lecție măsurată pe razvanpopescu.com: un h1 la
   opacity:0 nu poate fi LCP până nu se parsează JS-ul; pe mobil cu CPU
   throttling 4x asta a însemnat LCP 4,2s față de 1,1s pe desktop.
   ------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.5s ease, transform 0.5s ease; }
  .reveal.visible { opacity: 1; transform: none; }
  .hero .reveal { opacity: 1; transform: none; transition: none; }
}

/* ─── HERO: rămâne aliniat la stânga ──────────────────────────────────────
   Titlul din hero e mare și umple oricum lățimea; centrat ar pluti.
   ------------------------------------------------------------------- */
.hero h1, .hero h2, .hero h3, .hero p,
.hero ul, .hero .checks, .hero .btn-row, .hero blockquote,
.hero .lead {
  margin-inline: 0;
  max-width: none;     /* cât grilele de trei coloane, nu cât textul de corp */
}

/* ─── SECȚIUNE ÎNTUNECATĂ ─────────────────────────────────────────────────
   Preluată de pe razvanpopescu.com, unde blocul de dovezi e pe #0f0f0f.
   Rupe pagina în două și scoate cifrele în evidență.
   ------------------------------------------------------------------- */
.section--dark { background: var(--ink); color: var(--surface); position: relative; overflow: hidden; }
/* Inelele topografice stau în spatele conținutului, ca o strălucire discretă.
   Vălul de deasupra lor ține textul pe fond întunecat: arta șoptește la margine,
   nu concurează cu literele. */
.section--dark .section-art {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: right center;
  opacity: 0.55; pointer-events: none;
}
.section--dark::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg,
    rgba(23,18,14,0.92) 0%,
    rgba(23,18,14,0.72) 55%,
    rgba(23,18,14,0.30) 100%);
  pointer-events: none;
}
.section--dark .container { position: relative; z-index: 2; }
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--surface); }
.section--dark p { color: rgba(250, 246, 242, 0.85); }
.section--dark .eyebrow { color: var(--accent-lt); }
.section--dark .stat__num { color: var(--accent-lt); }
.section--dark .card {
  background: #262019;   /* treaptă tonală SOLIDĂ: arta din fundal nu răzbate prin card */
}
.section--dark .card p { color: rgba(250, 246, 242, 0.84); }
.section--dark .btn--ghost { border-color: rgba(250,246,242,0.85); color: rgba(250,246,242,0.95); }
.section--dark .btn--ghost:hover { background: var(--white); color: var(--ink); }
.section--dark .btn--primary { background: var(--accent-lg); color: var(--white); }
.section--dark .btn--primary:hover { background: var(--white); color: var(--ink); }

/* Regula care alinia separat secțiunile cu grilă a dispărut: acum toate
   secțiunile pornesc din același loc, deci nu mai e nimic de corectat. */

/* Prima casetă dintr-o secțiune nu adaugă încă o margine peste cea a secțiunii. */
.container > .callout:first-child { margin-top: 0; }

/* Antetul e lipicios, deci o ancoră ar ateriza sub el. Rezervăm spațiu.
   Sub 950px navigația trece pe al doilea rând, deci antetul e mai înalt. */
.tier[id], .step[id], .project[id] { scroll-margin-top: 200px; }
@media (min-width: 950px) {
  .tier[id], .step[id], .project[id] { scroll-margin-top: 130px; }
}

/* Un paragraf care vine imediat după o grilă ține de grilă, nu de coloana de
   text: se întinde cât ea, ca să nu rămână un rând scurt și orfan dedesubt,
   și respiră cât o secțiune mică. */
.grid + p, .table-wrap + p { max-width: none; text-wrap: pretty; margin-top: 2.4rem; }

/* Paginile legale: coloană de text simplă, titluri de secțiune mai mici și
   aerisite — documentul se citește, nu se vinde. */
/* margin-block, nu `margin`: scurtătura ar fi resetat marginile laterale „auto”
   primite mai sus, iar titlurile ar fi ieșit cu 132px în stânga textului lor. */
.legal h2 { font-size: 1.35rem; margin-block: 2.5rem 0.75rem; }
.legal p { margin-bottom: 0.9rem; }
.legal a { color: var(--accent); }

/* Linkul „Detalii și preț" de pe cardurile etapelor de pe Acasă. */
.tier__more { color: var(--accent); font-weight: 500; text-decoration: none; }
.tier__more:hover { text-decoration: underline; }