/* =========================================================
   DCM Solution BV
   Paleta: cupru / teracotă / auriu pe fundal brun profund
   ---------------------------------------------------------
   Vrei alt ton? Schimbă doar variabilele --copper-* de mai jos
   și se actualizează tot site-ul.
   ========================================================= */

:root {
  /* ---- Fundaluri închise (înlocuiesc bleumarinul) ---- */
  --dark-900: #140D08;   /* aproape negru, cald */
  --dark-800: #1D140D;
  --dark-700: #2A1D13;
  --dark-600: #3A2818;

  /* ---- Cupru / teracotă / auriu ---- */
  --copper-700: #8A4F27;
  --copper-600: #A35F2E;
  --copper-500: #B87333;   /* cuprul principal — butoane, accente */
  --copper-400: #C98A4B;
  --copper-300: #DBA76B;
  --terracotta: #C25E3C;
  --gold-400:   #D9A441;   /* pentru supratitluri pe fundal închis */
  --gold-200:   #EBC98A;

  /* ---- Neutre calde ---- */
  --cream-050: #FBF7F3;   /* fundal secțiuni deschise */
  --cream-100: #F4EDE5;
  --line:      #E6DACE;
  --line-dark: rgba(219, 167, 107, .20);

  --ink:    #241811;      /* titluri pe fundal deschis */
  --body:   #6B5648;      /* text curent pe fundal deschis */
  --on-dark:      #F6EEE6;
  --on-dark-soft: rgba(246, 238, 230, .74);

  --white: #FFFFFF;

  /* ---- Tipografie ---- */
  --font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* ---- Layout ---- */
  --wrap: 1200px;
  --radius:    12px;
  --radius-lg: 20px;

  /* ---- Umbre ---- */
  --shadow-sm: 0 1px 2px rgba(36, 24, 17, .06), 0 2px 8px rgba(36, 24, 17, .06);
  --shadow-md: 0 6px 16px rgba(36, 24, 17, .08), 0 16px 36px rgba(36, 24, 17, .08);
  --shadow-lg: 0 24px 60px rgba(20, 13, 8, .30);
}

/* Ascunde conținutul pentru o clipă, până când textele sunt puse în
   limba vizitatorului — altfel pagina ar clipi întâi în română.
   Dacă JavaScript-ul nu pornește, siguranța din <head> scoate clasa
   după 1,5 secunde, deci pagina rămâne oricum vizibilă. */
.i18n-loading body { visibility: hidden; }

/* ================= Reset ================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.68;
  color: var(--body);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--copper-600); }

h1, h2, h3, h4 {
  color: var(--ink);
  line-height: 1.16;
  letter-spacing: -0.02em;
  margin: 0 0 .5em;
  font-weight: 800;
}
h1 { font-size: clamp(2.2rem, 5.2vw, 3.7rem); }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.6rem); }
h3 { font-size: 1.12rem; font-weight: 700; }
p  { margin: 0 0 1rem; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 26px; }

.skip-link { position: absolute; left: -9999px; top: 0; background: var(--copper-600); color: #fff; padding: 12px 18px; z-index: 999; }
.skip-link:focus { left: 12px; top: 12px; border-radius: 8px; }
:focus-visible { outline: 3px solid var(--copper-400); outline-offset: 3px; border-radius: 4px; }

/* ================= Butoane ================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: 15px 30px; border-radius: 8px;
  font-weight: 700; font-size: .93rem; letter-spacing: .02em;
  text-decoration: none; border: 2px solid transparent; cursor: pointer;
  transition: transform .16s ease, background-color .2s ease, box-shadow .2s ease, color .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn .arw { transition: transform .2s ease; }
.btn:hover .arw { transform: translateX(4px); }

.btn-copper { background: var(--copper-500); color: #fff; box-shadow: 0 6px 20px rgba(184,115,51,.34); }
.btn-copper:hover { background: var(--copper-600); }

.btn-outline-light { background: transparent; color: var(--on-dark); border-color: rgba(219,167,107,.45); }
.btn-outline-light:hover { background: rgba(219,167,107,.12); border-color: var(--copper-400); }

.btn-outline { background: transparent; color: var(--copper-600); border-color: var(--line); }
.btn-outline:hover { border-color: var(--copper-400); background: var(--cream-050); }

.btn-sm { padding: 11px 20px; font-size: .82rem; }
/* Butoanele pe toata latimea stau in formulare, unde textul poate fi lung
   (mai ales in germana). Fara "normal" ar ramane pe un rand si ar latii
   formularul peste ecran, pe telefon. */
.btn-block { width: 100%; white-space: normal; min-width: 0; text-align: center; }


/* ================= Bara de limbă ================= */
.lang-bar { background: var(--dark-900); border-bottom: 1px solid rgba(219,167,107,.14); }
.lang-bar .wrap { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 42px; }
.lang-bar .lbl {
  font-size: .7rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(246,238,230,.5);
}
.lang-switch { display: flex; gap: 4px; }
.lang-switch button {
  border: 1px solid transparent; background: transparent; cursor: pointer;
  font: inherit; font-size: .76rem; font-weight: 700; letter-spacing: .06em;
  color: var(--on-dark-soft); padding: 5px 13px; border-radius: 6px;
  transition: all .16s ease;
}
.lang-switch button:hover { color: var(--gold-200); }
.lang-switch button.is-active { color: var(--gold-400); border-color: rgba(217,164,65,.55); background: rgba(217,164,65,.10); }

/* ================= Header ================= */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(20, 13, 8, .90);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid rgba(219,167,107,.13);
}
.header-inner { display: flex; align-items: center; gap: 26px; min-height: 82px; }

/* Buton propriu pentru candidati, langa cel de contact. Are doar contur,
   nu fundal plin, ca sa nu concureze cu "Contacteaza-ne" — clientii raman
   pe primul loc, dar candidatii au butonul lor, vizibil de pe orice pagina.
   Sub 1180px bara se strange, asa ca butonul dispare si linkul din meniul
   mobil (.only-mobile) ii ia locul. */
@media (max-width: 1180px) {
  .header-jobs { display: none; }
}
.site-nav a.only-mobile { display: none; }
@media (max-width: 1180px) {
  .site-nav a.only-mobile { display: block; }
}


.brand { display: flex; align-items: center; gap: 13px; text-decoration: none; margin-right: auto; }
/* Semnul e chiar logo-ul firmei, decupat din fotografia din birou.
   Marginile lui sunt stinse treptat, deci se topeste în fundalul închis. */
.brand-mark { width: 54px; height: auto; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-text strong {
  font-size: 1.12rem; font-weight: 800; letter-spacing: .055em;
  color: var(--on-dark); white-space: nowrap;
}
.brand-text em {
  font-style: normal; font-size: .55rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold-400); margin-top: 4px; white-space: nowrap;
}

.site-nav { display: flex; gap: 24px; }
.site-nav a {
  color: var(--on-dark-soft); text-decoration: none;
  font-size: .8rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: 8px 0; position: relative; transition: color .18s ease; white-space: nowrap;
}
.site-nav a:hover { color: var(--on-dark); }
.site-nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
  background: var(--copper-500); transition: right .24s ease;
}
.site-nav a:hover::after, .site-nav a.is-current::after { right: 0; }
.site-nav a.is-current { color: var(--on-dark); }

.header-actions { display: flex; align-items: center; gap: 14px; }

.nav-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; border: 1px solid rgba(219,167,107,.3); border-radius: 8px;
  background: transparent; cursor: pointer; padding: 0 11px;
}
.nav-toggle span { height: 2px; background: var(--on-dark); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ================= Media cu rezervă ==================
   Dacă imaginea lipsește, se vede degradeul cupru — nu apare
   niciodată un chenar spart. Pui poza în assets/img/ și apare.
   ==================================================== */
.media {
  position: relative; overflow: hidden; border-radius: var(--radius);
  background-color: var(--dark-700);
  background-image: linear-gradient(135deg, rgba(184,115,51,.55), rgba(42,29,19,.9) 60%);
  background-size: cover; background-position: center;
}
.media::after {
  content: ""; position: absolute; inset: 0; opacity: .28;
  background-image:
    repeating-linear-gradient(45deg, rgba(219,167,107,.16) 0 2px, transparent 2px 12px);
  pointer-events: none;
}
.media.has-img::after { display: none; }

/* ================= Hero ================= */
.hero { position: relative; color: var(--on-dark); overflow: hidden; }
.hero-media {
  position: absolute; inset: 0;
  background-color: #0C0805;
  background-image: linear-gradient(135deg, #2A1D13 0%, #140D08 55%, #3A2818 100%);
  /* Poza ocupa 78% din latime si sta lipita de marginea din dreapta, unde
     este logo-ul. Restul ramane negru plin — acolo cade titlul, care astfel
     nu lupta cu imaginea. Nu folosim "cover": raportul pozei (2,5) difera
     de al antetului, iar decuparea ar taia fie logo-ul, fie zona neagra. */
  background-size: 78% auto; background-repeat: no-repeat; background-position: right center;
}
/* Valul peste fotografie. Imaginea are deja jumatatea stanga intunecata,
   deci nu mai avem nevoie de un val puternic — doar de o trecere lina
   dinspre negrul din stanga catre zona luminata din dreapta. */
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(700px 420px at 80% 26%, rgba(184,115,51,.16), transparent 62%),
    linear-gradient(90deg,
      rgba(12,8,5,1) 0%,
      rgba(12,8,5,.92) 22%,
      rgba(12,8,5,.55) 40%,
      rgba(12,8,5,.14) 58%,
      rgba(12,8,5,0) 72%);
}
.hero-inner { position: relative; padding: clamp(58px, 8.4vw, 112px) 26px clamp(62px, 8.8vw, 118px); }

/* Pe telefon, cadrul e înalt și taie o poză lată: din 1320px se văd
   doar 37%. Cu poziția implicită (centru) logo-ul ar rămâne în afara
   ecranului, iar vizitatorul ar vedea doar peretele gol. Mutăm cadrul
   spre dreapta, peste logo, și schimbăm vălul din lateral în vertical,
   pentru că acolo textul ocupă toată lățimea. */
@media (max-width: 760px) {
  .hero-media { background-position: 88% center; }
  .hero-media::after {
    background:
      radial-gradient(620px 420px at 62% 34%, rgba(184,115,51,.22), transparent 66%),
      linear-gradient(180deg,
        rgba(12,8,5,1) 0%,
      rgba(12,8,5,1) 26%,
        rgba(12,8,5,.74) 42%,
        rgba(12,8,5,.86) 100%);
  }
}
.hero h1 { color: #fff; max-width: 15ch; margin-bottom: .38em; }
.hero h1 .dot { color: var(--copper-400); }
.hero-lead { font-size: clamp(1.02rem, 1.7vw, 1.2rem); color: var(--on-dark-soft); max-width: 46ch; margin-bottom: 34px; }

.eyebrow {
  display: inline-block; font-size: .74rem; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--copper-600); margin: 0 0 14px;
}
.eyebrow-light { color: var(--gold-400); }
.eyebrow-rule::after {
  content: ""; display: block; width: 54px; height: 3px; border-radius: 2px;
  background: var(--copper-500); margin-top: 14px;
}

/* ================= Secțiuni ================= */
.section { padding: clamp(66px, 8vw, 108px) 0; }
.section-cream { background: var(--cream-050); }
/* Bandă cupru-auriu: fundal cald pe care cartonașele albe se desprind clar.
   Se folosește doar acolo unde secțiunea nu are titlu pe text închis. */
.section-copper {
  background:
    radial-gradient(900px 420px at 12% -10%, rgba(217,164,65,.34), transparent 62%),
    radial-gradient(760px 380px at 92% 110%, rgba(138,79,39,.42), transparent 58%),
    linear-gradient(134deg, var(--copper-600) 0%, var(--copper-500) 48%, var(--copper-700) 100%);
  position: relative; overflow: hidden;
}
.section-copper::before {
  content: ""; position: absolute; inset: 0; opacity: .18; pointer-events: none;
  background-image: repeating-linear-gradient(45deg, rgba(251,247,243,.22) 0 2px, transparent 2px 13px);
}
.section-copper > * { position: relative; z-index: 1; }
/* Pe banda de cupru, cartonașele maro au nevoie de o margine mai caldă
   și de o umbră mai adâncă, altfel se topesc în fundal. */
.section-copper .pillar { border-color: rgba(255,225,190,.34); box-shadow: 0 14px 36px rgba(20,13,8,.34); }
.section-copper .pillar:hover { box-shadow: 0 22px 48px rgba(20,13,8,.44); border-color: rgba(255,235,205,.62); }
/* Fundal cald pentru secțiunea poveștii. Rămâne deschis: banda cupru
   vine imediat dedesubt, iar două suprafețe tari una peste alta ar obosi ochiul.
   Filigranul e chiar semnul firmei, la opacitate foarte mică. */
.section-story {
  position: relative; overflow: hidden;
  background:
    radial-gradient(760px 540px at 6% 8%, rgba(217,164,65,.17), transparent 63%),
    radial-gradient(640px 460px at 97% 88%, rgba(184,115,51,.15), transparent 60%),
    linear-gradient(180deg, #FFFFFF 0%, var(--cream-050) 52%, #F7F0E8 100%);
}
.section-story::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: repeating-linear-gradient(45deg, rgba(184,115,51,.055) 0 1px, transparent 1px 14px);
}
.section-story::after {
  content: ""; position: absolute; pointer-events: none;
  left: -4%; top: 50%; transform: translateY(-50%);
  width: min(560px, 46%); aspect-ratio: 1.26 / 1;
  background: url("../img/logo-semn.png") left center / contain no-repeat;
  opacity: .055;
}
.section-story > * { position: relative; z-index: 1; }
@media (max-width: 900px) { .section-story::after { display: none; } }
/* Pânză: ritmul vertical al barelor paralele din logo, foarte estompat,
   peste o țesătură diagonală fină. Cartonașele albe se ridică de pe ea. */
.section-linen {
  position: relative; overflow: hidden;
  background:
    radial-gradient(740px 500px at 94% 2%, rgba(217,164,65,.15), transparent 61%),
    radial-gradient(520px 400px at 2% 98%, rgba(184,115,51,.10), transparent 58%),
    linear-gradient(180deg, #FFFFFF 0%, #FDFAF6 58%, var(--cream-050) 100%);
}
.section-linen::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, rgba(138,79,39,.055) 0 1px, transparent 1px 104px),
    repeating-linear-gradient(45deg, rgba(184,115,51,.038) 0 1px, transparent 1px 11px);
}
.section-linen > * { position: relative; z-index: 1; }

/* Arc: inelul logo-ului, desenat mare și abia vizibil în marginea din dreapta. */
.section-arc {
  position: relative; overflow: hidden;
  background:
    radial-gradient(660px 540px at 10% 97%, rgba(184,115,51,.17), transparent 63%),
    linear-gradient(162deg, var(--cream-050) 0%, #F8F1E9 54%, #F2E8DC 100%);
}
.section-arc::before {
  content: ""; position: absolute; pointer-events: none;
  right: -7%; top: 50%; transform: translateY(-50%);
  width: min(540px, 46%); aspect-ratio: 1; border-radius: 50%;
  border: 2px solid rgba(138,79,39,.14);
  box-shadow: inset 0 0 0 30px rgba(217,164,65,.05);
}
.section-arc::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(45deg, rgba(184,115,51,.045) 0 1px, transparent 1px 12px);
}
.section-arc > * { position: relative; z-index: 1; }
@media (max-width: 760px) { .section-arc::before { display: none; } }

/* =========================================================
   Filigran — semnul firmei folosit ca textură de fundal.
   Șase așezări diferite, împărțite pe pagini astfel încât
   aceeași variantă să nu apară de două ori una după alta.
   Opacitatea stă între 3,5% și 6%: se simte, dar nu se citește
   peste text. Pe ecrane mici se stinge, ca să nu încarce.
   ========================================================= */
.wm { position: relative; overflow: hidden; }
.wm > * { position: relative; z-index: 1; }
.wm::before, .wm::after {
  content: ""; position: absolute; pointer-events: none;
  background-image: url("../img/logo-semn.png");
  background-repeat: no-repeat; background-size: contain; background-position: center;
}
.wm::after { display: none; }

/* 1 — mare, sprijinit de marginea din stânga */
.wm-1::before { left: -5%; top: 50%; transform: translateY(-50%);
                width: min(560px, 46%); aspect-ratio: 1.263; opacity: .055; }
/* 2 — mijlociu, sus-dreapta, ușor înclinat */
.wm-2::before { right: 2%; top: -6%; transform: rotate(-9deg);
                width: min(360px, 32%); aspect-ratio: 1.263; opacity: .05; }
/* 3 — foarte mare, tăiat de colțul din dreapta jos */
.wm-3::before { right: -12%; bottom: -22%;
                width: min(680px, 58%); aspect-ratio: 1.263; opacity: .042; }
/* 4 — două semne: unul mare jos-stânga, unul mic sus-dreapta */
.wm-4::before { left: -8%; bottom: -16%;
                width: min(520px, 44%); aspect-ratio: 1.263; opacity: .05; }
.wm-4::after  { display: block; right: 6%; top: 5%; transform: rotate(7deg);
                width: min(210px, 19%); aspect-ratio: 1.263; opacity: .062; }
/* 5 — mic sus-stânga, mijlociu jos-centru */
.wm-5::before { left: 4%; top: -4%;
                width: min(230px, 20%); aspect-ratio: 1.263; opacity: .058; }
.wm-5::after  { display: block; left: 50%; bottom: -20%; transform: translateX(-50%);
                width: min(460px, 40%); aspect-ratio: 1.263; opacity: .04; }
/* 6 — semne mici, rare, pe toată suprafața */
.wm-6::before { inset: 0; width: auto; height: auto; opacity: .035;
                background-size: 190px auto; background-repeat: repeat;
                background-position: 0 0; }

@media (max-width: 760px) {
  .wm::before, .wm::after { opacity: .028 !important; }
  .wm-4::after, .wm-5::after { display: none; }
}

.section-dark { background: var(--dark-800); color: var(--on-dark-soft); }
.section-dark h2, .section-dark h3 { color: #fff; }

.section-head { max-width: 700px; margin: 0 0 52px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow-rule::after { margin-inline: auto; }
.section-sub { font-size: 1.05rem; }

/* ================= Povestea noastră ================= */
.story { display: grid; grid-template-columns: 1fr 1fr; gap: 62px; align-items: center; }
.story-media { position: relative; }
/* 5:4 — proporția hărții cu locațiile, ca să nu se taie din pinuri. */
.story-media .media { aspect-ratio: 5 / 4; }
.badge-years {
  position: absolute; right: -18px; bottom: -22px;
  background: #fff; border-radius: var(--radius); padding: 18px 26px;
  box-shadow: var(--shadow-md); display: flex; align-items: center; gap: 14px;
}
.badge-years svg { width: 26px; height: 26px; color: var(--copper-500); flex: none; }
.badge-years b { display: block; font-size: 1.4rem; color: var(--ink); line-height: 1.1; letter-spacing: -.02em; }
.badge-years span { font-size: .72rem; letter-spacing: .11em; text-transform: uppercase; font-weight: 700; }

/* ================= Carduri pilon (misiune/viziune/...) ================= */
.pillars {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 22px;
  margin-top: -70px; position: relative; z-index: 3;
}
/* Marginea negativă e făcută pentru pagina principală, unde cartonașele
   trebuie să iasă peste marginea benzii. Acolo unde deasupra lor există
   un titlu de secțiune, aceeași margine l-ar acoperi — deci o anulăm. */
.pillars-flow { margin-top: 0; }
/* Cartonașele pilonilor: maro cărămiziu, cu semnul firmei ridicat în
   relief în colț. Umbra pusă pe filigran e cea care îi dă adâncimea —
   fără ea ar arăta ca o pată plată, nu ca un semn ștanțat în material. */
.pillar {
  position: relative; overflow: hidden;
  border: 1px solid rgba(217,164,65,.22); border-radius: var(--radius);
  background:
    radial-gradient(420px 260px at 92% 4%, rgba(217,164,65,.17), transparent 62%),
    linear-gradient(155deg, #6E3D24 0%, #4C2A17 56%, #341F10 100%);
  box-shadow: 0 10px 28px rgba(20,13,8,.22);
  padding: 30px 26px; text-decoration: none; display: block;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.pillar::before {
  content: ""; position: absolute; pointer-events: none;
  right: -13%; bottom: -28%; width: min(240px, 64%); aspect-ratio: 1.263;
  background: url("../img/logo-semn.png") center / contain no-repeat;
  opacity: .14; filter: drop-shadow(0 5px 9px rgba(0,0,0,.6));
}
.pillar > * { position: relative; z-index: 1; }
.pillar:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 42px rgba(20,13,8,.32);
  border-color: var(--gold-400);
}
.pillar-ico {
  width: 46px; height: 46px; border-radius: 10px; margin-bottom: 18px;
  display: grid; place-items: center;
  background: linear-gradient(140deg, rgba(217,164,65,.28), rgba(184,115,51,.16));
  border: 1px solid rgba(217,164,65,.26);
  color: var(--gold-400);
}
.pillar-ico svg { width: 24px; height: 24px; }
.pillar h3 {
  font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
  color: #fff; margin-bottom: .7em;
}
.pillar p { font-size: .92rem; margin: 0; color: var(--on-dark-soft); }

/* ================= Carduri cu imagine ================= */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 26px; }
.tile {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; text-decoration: none; display: flex; flex-direction: column;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.tile:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--copper-300); }
.tile .media { aspect-ratio: 16 / 10; border-radius: 0; }
.tile-body { padding: 40px 24px 26px; text-align: center; position: relative; flex: 1; display: flex; flex-direction: column; }
.tile-ico {
  position: absolute; top: -27px; left: 50%; transform: translateX(-50%);
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--copper-500); color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 6px 18px rgba(184,115,51,.4); border: 4px solid #fff;
}
.tile-ico svg { width: 22px; height: 22px; }
.tile h3 {
  font-size: .84rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .8em;
}
.tile p { font-size: .92rem; flex: 1; }
.tile-link {
  font-size: .78rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--copper-600); display: inline-flex; align-items: center; gap: 7px; justify-content: center;
}

/* ================= Bandă CTA ================= */
.cta-band {
  background: linear-gradient(120deg, var(--dark-800), var(--dark-700) 60%, var(--copper-700));
  border-radius: var(--radius-lg); padding: 42px 46px;
  display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap;
}
.cta-band h2 { color: #fff; font-size: 1.5rem; margin-bottom: .3em; }
.cta-band p { color: var(--on-dark-soft); margin: 0; font-size: .97rem; }

/* ================= Footer ================= */
.site-footer { background: var(--dark-900); color: var(--on-dark-soft); padding: 66px 0 0; font-size: .93rem; }
.footer-inner { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 44px; padding-bottom: 48px; }
.footer-brand .brand { margin-bottom: 18px; }
.footer-brand p { max-width: 30ch; font-size: .9rem; }
.site-footer h4 {
  color: #fff; margin-bottom: 1.25em; font-size: .72rem;
  letter-spacing: .15em; text-transform: uppercase; font-weight: 800;
}
.footer-col { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.footer-col a, .footer-col span { color: var(--on-dark-soft); text-decoration: none; font-size: .92rem; }
.footer-col a:hover { color: var(--gold-200); }

.footer-contact li { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.footer-contact { list-style: none; margin: 0; padding: 0; }
.footer-contact svg { width: 17px; height: 17px; color: var(--copper-400); flex: none; margin-top: 4px; }
.footer-contact a { color: var(--on-dark-soft); text-decoration: none; }
.footer-contact a:hover { color: var(--gold-200); }

.socials { display: flex; gap: 10px; margin-top: 20px; }
.socials a {
  width: 36px; height: 36px; border-radius: 8px;
  display: grid; place-items: center;
  background: rgba(219,167,107,.10); color: var(--on-dark-soft);
  transition: background-color .18s ease, color .18s ease;
}
.socials a:hover { background: var(--copper-500); color: #fff; }
.socials svg { width: 17px; height: 17px; }

.footer-bottom {
  border-top: 1px solid rgba(219,167,107,.14);
  padding-top: 24px; padding-bottom: 28px;
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  font-size: .84rem;
}
.footer-bottom p { margin: 0; }
.footer-bottom nav { display: flex; gap: 14px; }
.footer-bottom a { color: var(--on-dark-soft); text-decoration: none; }
.footer-bottom a:hover { color: var(--gold-200); }

/* =========================================================
   PAGINI INTERIOARE
   ========================================================= */

/* ---- Hero de pagină interioară ---- */
.page-hero { position: relative; color: var(--on-dark); overflow: hidden; }
.page-hero-bg {
  position: absolute; inset: 0;
  background-color: var(--dark-800);
  background-image:
    radial-gradient(760px 420px at 82% 26%, rgba(184,115,51,.34), transparent 64%),
    linear-gradient(135deg, #2A1D13 0%, #140D08 62%, #241811 100%);
  background-size: cover; background-position: center;
}
.page-hero-inner {
  position: relative; display: grid; grid-template-columns: 1.25fr .75fr;
  gap: 40px; align-items: center;
  padding: clamp(56px, 7vw, 92px) 26px clamp(60px, 7.5vw, 100px);
}
.page-hero h1 {
  color: #fff; text-transform: uppercase; letter-spacing: -.015em;
  font-size: clamp(2.1rem, 5.6vw, 4rem); max-width: 12ch; margin-bottom: .3em;
}
.page-hero .page-sub {
  font-size: clamp(1rem, 1.6vw, 1.16rem); color: var(--on-dark-soft);
  max-width: 44ch; margin: 0;
}
.page-hero .eyebrow-rule::after { background: var(--copper-400); }
.page-hero-art { display: grid; place-items: center; }

/* Antet cu fotografie pe toata latimea. Imaginea vine din atributul
   style al elementului, ca sa putem folosi alta poza pe fiecare pagina.
   Peste ea cade o panta dinspre stanga, unde sta textul: silueta din
   poza e oricum inchisa, deci literele albe raman lizibile. */
.page-hero-photo .page-hero-bg {
  background-color: #0C0805;
  /* Poza se vede intreaga, la 46% din latime, lipita de marginea dreapta.
     Restul ramane negru plin — acolo cade titlul. */
  background-size: 46% auto;
  background-position: right center;
  background-repeat: no-repeat;
}
.page-hero-photo .page-hero-bg::after {
  content: ""; position: absolute; inset: 0;
  /* Trecere lina exact acolo unde incepe poza (45% din latime), ca marginea
     ei sa nu se vada taiata drept. */
  background: linear-gradient(90deg,
      rgba(12,8,5,1) 0%,
      rgba(12,8,5,1) 51%,
      rgba(12,8,5,.40) 58%,
      rgba(12,8,5,0) 68%);
}
.page-hero-photo .page-hero-inner {
  grid-template-columns: 1fr;
  min-height: clamp(280px, 29vw, 410px);
}
@media (max-width: 760px) {
  .page-hero-photo .page-hero-bg { background-size: 96% auto; background-position: center 62%; }
  .page-hero-photo .page-hero-bg::after {
    background:
      linear-gradient(180deg, rgba(12,8,5,.88) 0%, rgba(12,8,5,.70) 45%, rgba(12,8,5,.86) 100%);
  }
}
.page-hero-art svg { width: 100%; max-width: 300px; height: auto; color: var(--copper-400); opacity: .85; }

/* Antetul poveștii: harta Europei de pe perete, ca fundal întreg.
   Textul stă în stânga, unde imaginea e oricum întunecată; peste ea
   punem o pantă suplimentară, ca literele albe să rămână lizibile
   indiferent cât de lat e ecranul. */
.page-hero-wall .page-hero-bg {
  background-color: #0C0805;
  background-image:
    linear-gradient(102deg, rgba(12,8,5,.92) 0%, rgba(12,8,5,.74) 30%, rgba(12,8,5,.22) 56%, rgba(12,8,5,.05) 100%),
    url("../img/poveste-hero.jpg");
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}
/* Înălțimea urmează proporția imaginii (2:1), ca harta să încapă
   întreagă în banda întunecată, fără să fie tăiată de sus și de jos. */
.page-hero-wall .page-hero-inner {
  grid-template-columns: 1fr;
  min-height: clamp(380px, 44vw, 580px);
}
@media (max-width: 760px) {
  .page-hero-wall .page-hero-bg {
    background-image:
      linear-gradient(180deg, rgba(12,8,5,.86) 0%, rgba(12,8,5,.72) 55%, rgba(12,8,5,.88) 100%),
      url("../img/poveste-hero.jpg");
    background-position: center, center;
  }
}

/* ---- Introducere ---- */
.lead-block { max-width: 76ch; }
.lead-block p { font-size: clamp(1rem, 1.4vw, 1.08rem); color: var(--ink); }
.lead-block strong, .content-block strong { color: var(--ink); font-weight: 700; }
.hl { color: var(--copper-600); font-weight: 700; }

/* ---- Blocuri de conținut cu iconiță ---- */
/* Fiecare bloc stă pe cartonașul lui: fundal propriu, umbră caldă și
   semnul firmei stins în colțul din dreapta jos. Despărțitorul dintre
   blocuri nu mai e nevoie — le separă chiar suprafețele. */
.content-blocks { display: grid; gap: clamp(22px, 2.6vw, 34px); }
.content-block {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 96px 1fr; gap: 28px; align-items: start;
  padding: clamp(30px, 3.4vw, 46px) clamp(26px, 3.2vw, 44px);
  border: 1px solid var(--line); border-radius: var(--radius);
  background:
    radial-gradient(520px 340px at 96% 4%, rgba(217,164,65,.13), transparent 62%),
    linear-gradient(158deg, #FFFFFF 0%, #FDFAF6 62%, var(--cream-050) 100%);
  box-shadow: 0 10px 30px rgba(20,13,8,.07), 0 2px 6px rgba(20,13,8,.04);
  transition: box-shadow .24s ease, transform .24s ease;
}
.content-block::before {
  content: ""; position: absolute; pointer-events: none;
  right: -5%; bottom: -30%; width: min(330px, 34%); aspect-ratio: 1.263;
  background: url("../img/logo-semn.png") center / contain no-repeat;
  opacity: .06;
}
.content-block::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--copper-400), var(--copper-700));
}
.content-block > * { position: relative; z-index: 1; }
.content-block:hover { box-shadow: 0 16px 40px rgba(20,13,8,.10), 0 3px 8px rgba(20,13,8,.05); }
@media (max-width: 760px) { .content-block::before { opacity: .04; width: 46%; } }
.block-ico {
  width: 74px; height: 74px; border-radius: 16px;
  display: grid; place-items: center;
  background: linear-gradient(140deg, rgba(184,115,51,.15), rgba(217,164,65,.12));
  color: var(--copper-600); border: 1px solid rgba(184,115,51,.18);
}
.block-ico svg { width: 32px; height: 32px; }
.content-block h2 { font-size: clamp(1.12rem, 2vw, 1.4rem); text-transform: uppercase; letter-spacing: .01em; margin-bottom: .7em; }
.content-block h2 .sub-line { display: block; color: var(--copper-600); }
.content-block p { font-size: 1rem; }
.content-block p:last-child { margin-bottom: 0; }

/* ---- Citat ---- */
.quote-box {
  display: grid; grid-template-columns: 64px 1fr; gap: 22px; align-items: start;
  background: var(--cream-050); border-left: 4px solid var(--copper-500);
  border-radius: var(--radius); padding: 30px 34px; margin: 26px 0;
}
.quote-mark {
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  background: var(--copper-500); color: #fff; font-size: 1.9rem; font-weight: 800;
  line-height: 1; padding-top: 12px; font-family: Georgia, serif;
}
.quote-box p { margin: 0 0 .5rem; font-size: 1.04rem; color: var(--ink); font-weight: 600; line-height: 1.6; }
.quote-box p:last-child { margin-bottom: 0; }
.quote-box .q-label {
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--copper-600); font-weight: 800; margin-bottom: .6rem;
}

/* ---- Rând de resurse cu iconițe ---- */
.resources {
  list-style: none; margin: 26px 0; padding: 26px 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 22px;
}
.resources li { text-align: center; font-size: .84rem; font-weight: 600; color: var(--ink); line-height: 1.4; }
.resources svg { width: 34px; height: 34px; color: var(--copper-500); margin: 0 auto 10px; }

/* ---- Rezultate / dovezi ---- */
.proof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 24px 0; }
.proof {
  display: grid; grid-template-columns: 26px 1fr; gap: 14px; align-items: start;
  background: var(--cream-050); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px 24px;
}
.proof svg { width: 22px; height: 22px; color: var(--copper-500); margin-top: 2px; }
.proof h3 { font-size: .78rem; letter-spacing: .09em; text-transform: uppercase; color: var(--copper-700); margin-bottom: .6em; }
.proof p { font-size: .92rem; margin: 0; }
.proof.is-note { background: rgba(217,164,65,.10); border-color: rgba(217,164,65,.35); }
.proof.is-note h3 { color: var(--ink); }

/* ---- Casetă de accent ---- */
.accent-box {
  background: var(--cream-050); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 34px 38px;
  display: grid; grid-template-columns: 74px 1fr auto; gap: 26px; align-items: center;
  margin-top: 34px;
}
.accent-box .block-ico { background: var(--copper-500); color: #fff; border-color: transparent; }
.accent-box .eyebrow { margin-bottom: 8px; }
.accent-box h2 { font-size: 1.3rem; margin-bottom: .5em; text-transform: none; }
.accent-box p { font-size: .96rem; margin: 0 0 .5rem; }
.accent-box p:last-child { margin-bottom: 0; }

/* ---- Navigare între paginile Despre noi ---- */
.subnav { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 8px; }
.subnav a {
  padding: 10px 20px; border-radius: 999px; border: 1px solid var(--line);
  font-size: .82rem; font-weight: 700; color: var(--body); text-decoration: none;
  transition: all .18s ease; background: #fff;
}
.subnav a:hover { border-color: var(--copper-400); color: var(--copper-600); }
.subnav a.is-current { background: var(--copper-500); border-color: var(--copper-500); color: #fff; }

/* ---- Bară de sfârșit de pagină ---- */
.page-end { text-align: center; margin-top: 46px; }

/* =========================================================
   POVESTEA — text lung, de citit
   Lățimea coloanei e limitată intenționat: peste ~70 de
   caractere pe rând, ochiul pierde începutul rândului următor.
   ========================================================= */
/* Bară de progres — pagina e lungă, iar cititorul trebuie să vadă
   cât a parcurs și cât mai are. Apare doar pe pagina poveștii. */
/* Scalăm pe transform, nu pe width: browserul nu mai recalculează
   layout-ul la fiecare pixel de derulare, ci doar compune imaginea. */
.read-bar {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--copper-400), var(--copper-600));
  transform: scaleX(0); transform-origin: 0 50%;
  z-index: 200; transition: transform .08s linear; pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .read-bar { transition: none; } }

.tale { max-width: 1100px; margin-inline: auto; }
/* Lățimile sunt în rem, nu în ch: unitatea ch se calibrează după
   lățimea cifrei „0", care la acest font e neobișnuit de largă și
   ar scoate rânduri de peste 100 de caractere. */
.tale-lead {
  max-width: 40rem; margin: 0 auto clamp(48px, 6vw, 76px);
  font-size: clamp(1.08rem, 1.6vw, 1.24rem); line-height: 1.62; color: var(--ink);
}
.tale-lead p:last-child { margin-bottom: 0; }
.tale-lead strong { color: var(--copper-700); }

.tale-part { margin-bottom: clamp(56px, 7vw, 92px); }
.tale-part:last-child { margin-bottom: 0; }

.tale-head { max-width: 36rem; margin: 0 auto clamp(22px, 3vw, 34px); }
.tale-num {
  display: inline-block; font-size: .72rem; font-weight: 800;
  letter-spacing: .18em; color: var(--copper-500); margin-bottom: 10px;
}
.tale-head h2 { font-size: clamp(1.4rem, 2.8vw, 2rem); margin-bottom: 0; }

.tale-body { max-width: 36rem; margin-inline: auto; }
.tale-body p { font-size: 1.02rem; line-height: 1.72; }
.tale-body p:last-child { margin-bottom: 0; }
.tale-body strong { color: var(--ink); }

/* fraza scoasă în evidență — vocea lui, nu descrierea */
.tale-quote {
  max-width: 34rem; margin: clamp(30px, 4vw, 44px) auto;
  padding: 4px 0 4px 26px; border-left: 3px solid var(--copper-500);
  font-size: clamp(1.06rem, 1.7vw, 1.22rem); line-height: 1.55;
  font-weight: 600; color: var(--ink); font-style: italic;
}
.tale-quote p { margin: 0 0 .5rem; }
.tale-quote p:last-child { margin-bottom: 0; }

/* harta unui pas din drum */
/* Hărțile sunt un reper, nu subiectul paginii: se țin la lățimea
   textului și în format lat, ca să nu întrerupă lectura. */
.tale-map { margin: clamp(30px, 3.6vw, 44px) auto; max-width: 34rem; }
.tale-map .media {
  aspect-ratio: 16 / 9; border-radius: var(--radius);
  box-shadow: var(--shadow-sm); background-size: cover; background-position: center;
}
.tale-map figcaption {
  margin-top: 11px; text-align: center;
  font-size: .78rem; color: var(--muted); letter-spacing: .02em;
}
.tale-map figcaption b {
  display: block; color: var(--copper-600); font-size: .68rem;
  letter-spacing: .14em; text-transform: uppercase; margin-bottom: 3px;
}

/* drumul, ca un șir de etape */
.tale-route {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px; margin: clamp(26px, 3.4vw, 40px) auto;
  max-width: 34rem;
}
.tale-route figure { margin: 0; }
.tale-route .media {
  aspect-ratio: 4 / 3; border-radius: 8px;
  box-shadow: var(--shadow-sm); background-size: cover; background-position: center;
}
.tale-route figcaption {
  margin-top: 7px; font-size: .7rem; font-weight: 700; color: var(--muted);
  text-align: center; letter-spacing: .03em;
}
/* Zonele de lucru dintr-o secție — fiecare pe cartonașul ei, ca cititorul
   să vadă dintr-o privire că sunt medii de lucru diferite, nu un text lung. */
.zones { display: grid; gap: clamp(14px, 1.8vw, 20px); margin: 0 0 2.4rem; }
.zone {
  position: relative; overflow: hidden;
  padding: clamp(22px, 2.6vw, 30px) clamp(20px, 2.6vw, 30px);
  border: 1px solid var(--line); border-left: 3px solid var(--copper-500);
  border-radius: var(--radius);
  background:
    radial-gradient(360px 220px at 97% 3%, rgba(217,164,65,.12), transparent 64%),
    linear-gradient(155deg, #FFFFFF 0%, #FDFAF6 64%, var(--cream-050) 100%);
  box-shadow: 0 6px 18px rgba(20,13,8,.05);
}
/* Încheierea unei pagini de serviciu — o singură frază, scoasă în evidență. */
.svc-closing {
  position: relative;
  margin: clamp(28px, 3.4vw, 40px) 0 2.2rem;
  padding: clamp(24px, 2.8vw, 32px) clamp(22px, 2.8vw, 32px);
  border-radius: var(--radius);
  border: 1px solid rgba(184,115,51,.22);
  background: linear-gradient(150deg, rgba(217,164,65,.10), rgba(184,115,51,.07));
  font-size: 1.02rem; line-height: 1.68; color: var(--ink);
}
.zone h3 {
  font-size: .92rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--copper-700); margin-bottom: .7em;
}
.zone p { font-size: .97rem; margin: 0; }

/* Încheierea personală. Iese din poveste, deci arată altfel decât ea:
   suprafață caldă, marginile mai strânse și un rând final care se
   citește ca o semnătură rostită cu voce tare. */
.tale-letter {
  position: relative; overflow: hidden;
  max-width: 36rem; margin: clamp(46px, 6vw, 72px) auto clamp(30px, 4vw, 44px);
  padding: clamp(30px, 3.6vw, 46px) clamp(26px, 3.4vw, 44px);
  border: 1px solid var(--line); border-left: 4px solid var(--copper-500);
  border-radius: var(--radius);
  background:
    radial-gradient(460px 300px at 96% 2%, rgba(217,164,65,.15), transparent 62%),
    linear-gradient(158deg, #FFFFFF 0%, #FDFAF6 60%, var(--cream-050) 100%);
  box-shadow: 0 10px 30px rgba(20,13,8,.07);
}
.tale-letter::before {
  content: ""; position: absolute; pointer-events: none;
  right: -6%; bottom: -32%; width: min(300px, 38%); aspect-ratio: 1.263;
  background: url("../img/logo-semn.png") center / contain no-repeat;
  opacity: .05;
}
.tale-letter > * { position: relative; z-index: 1; }
.tale-letter-eyebrow {
  font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--copper-600); margin-bottom: 1.4em;
}
.tale-letter p { font-size: 1rem; line-height: 1.72; }
.tale-letter p:last-child { margin-bottom: 0; }
.tale-letter-line {
  margin-top: 1.5em; padding-top: 1.2em; border-top: 1px solid var(--line);
  font-size: clamp(1.06rem, 2vw, 1.3rem); font-weight: 800; font-style: italic;
  color: var(--copper-700); letter-spacing: -.01em;
}
@media (max-width: 640px) { .tale-letter::before { opacity: .035; width: 52%; } }

/* subtitlul unui grup de trasee — leagă etapele într-o singură idee */
.tale-route-cap {
  max-width: 36rem; margin: -18px auto clamp(34px, 4.5vw, 56px); text-align: center;
  font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--copper-600);
}

/* cifrele unui proiect */
.tale-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 18px; max-width: 36rem; margin: clamp(28px, 3.5vw, 40px) auto;
}
.tale-stat {
  background: var(--cream-050); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px 22px; text-align: center;
}
.tale-stat b {
  display: block; font-size: clamp(1.5rem, 3vw, 2rem); color: var(--copper-600);
  line-height: 1; letter-spacing: -.02em; margin-bottom: 7px;
}
.tale-stat span { font-size: .82rem; line-height: 1.4; display: block; }

/* semnătura autorului la final */
.tale-sign {
  max-width: 36rem; margin: clamp(44px, 5vw, 66px) auto 0;
  padding-top: 26px; border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 16px;
}
.tale-sign img { width: 54px; height: auto; flex: none; }
.tale-sign b { display: block; color: var(--ink); font-size: 1rem; }
.tale-sign span { font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--copper-600); }

@media (max-width: 640px) {
  .tale-body p { font-size: .99rem; }
  .tale-quote { padding-left: 18px; }
  .tale-route { grid-template-columns: 1fr 1fr; gap: 12px; }
  .tale-route figcaption { font-size: .7rem; }
}

/* =========================================================
   POVESTEA — capitole cu poză stânga / dreapta alternativ
   ========================================================= */
.story-chain { display: grid; gap: clamp(64px, 9vw, 118px); }

.chapter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(34px, 5vw, 68px);
  align-items: center;
}
/* Capitolele pare au poza în dreapta, textul în stânga. */
.chapter:nth-child(even) .chapter-media { order: 2; }

.chapter-media { position: relative; }
.chapter-media .media {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
/* Numărul capitolului, așezat peste colțul pozei */
.chapter-num {
  position: absolute; top: -18px; left: -14px; z-index: 2;
  width: 62px; height: 62px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(140deg, var(--copper-500), var(--copper-700));
  color: #fff; font-weight: 800; font-size: 1.12rem; letter-spacing: -.02em;
  box-shadow: 0 8px 20px rgba(138,79,39,.34);
  border: 4px solid #fff;
}
.chapter:nth-child(even) .chapter-num { left: auto; right: -14px; }

.chapter-copy .eyebrow { margin-bottom: 10px; }
.chapter-copy h2 {
  font-size: clamp(1.35rem, 2.6vw, 1.95rem);
  margin-bottom: .6em;
}
.chapter-copy p { font-size: 1rem; }
.chapter-copy p:last-child { margin-bottom: 0; }

/* Linie fină de legătură între capitole, ca într-o poveste */
.chapter::after {
  content: ""; grid-column: 1 / -1;
  height: 1px; background: var(--line);
  margin-top: clamp(30px, 4vw, 52px);
}
.chapter:last-child::after { display: none; }

/* =========================================================
   DOMENII DE ACTIVITATE — categorii + carduri cu derulare
   ========================================================= */
.cat { margin-bottom: clamp(58px, 7vw, 94px); }
.cat:last-of-type { margin-bottom: 0; }

.cat-head {
  display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: center;
  margin-bottom: 34px; padding-bottom: 26px; border-bottom: 1px solid var(--line);
}
.cat-num {
  font-size: clamp(2.8rem, 6vw, 4.2rem); font-weight: 800; line-height: .9;
  letter-spacing: -.05em; color: transparent;
  -webkit-text-stroke: 2px var(--copper-400);
}
.cat-head h2 { margin-bottom: .22em; }
.cat-head p { margin: 0; font-size: .98rem; max-width: 62ch; }

/* 5 servicii pe categorie: 3 + 2 arată echilibrat, 4 + 1 nu. */
.domain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px) { .domain-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .domain-grid { grid-template-columns: 1fr; } }

.domain-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.domain-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--copper-300); }

.domain-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--dark-700); }
.domain-media .slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1.2s ease, transform 6s linear;
}
.domain-media .slide.is-active { opacity: 1; }
.domain-card:hover .domain-media .slide.is-active { transform: scale(1.05); }

/* Variante de fundal cât timp nu există fotografii — mișcarea
   se vede oricum, iar cardul nu arată niciodată gol. */
.domain-media .slide:nth-child(1) { background-image: linear-gradient(140deg, #3A2818, #14100A 72%); }
.domain-media .slide:nth-child(2) { background-image: linear-gradient(140deg, #8A4F27, #241811 74%); }
.domain-media .slide:nth-child(3) { background-image: linear-gradient(140deg, #2A1D13, #A35F2E 96%); }
.domain-media.has-photos .slide { background-image: none; }

.domain-art {
  position: absolute; inset: 0; margin: auto;
  width: 48%; height: 48%; color: var(--gold-200); opacity: .92;
  pointer-events: none; transition: opacity .3s ease;
}
.domain-media.has-photos .domain-art { display: none; }

.domain-num {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: var(--copper-500); color: #fff;
  font-size: .72rem; font-weight: 800; letter-spacing: .06em;
  padding: 5px 11px; border-radius: 6px;
}

.domain-body { padding: 20px 22px 24px; flex: 1; display: flex; flex-direction: column; }
.domain-body h3 { font-size: 1rem; margin-bottom: .55em; letter-spacing: -.01em; }
.domain-body p { font-size: .89rem; margin: 0; }

/* Legătura „Citește mai mult" de pe card */
.domain-more {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: .76rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--copper-600); display: inline-flex; align-items: center; gap: 7px;
}
.domain-card:hover .domain-more .arw { transform: translateX(4px); }
.domain-more .arw { transition: transform .2s ease; }

/* =========================================================
   PAGINĂ DE SERVICIU (detaliu)
   ========================================================= */
.detail-hero { position: relative; color: var(--on-dark); overflow: hidden; }
.detail-hero-bg {
  position: absolute; inset: 0;
  background-color: var(--dark-800);
  background-image:
    radial-gradient(720px 460px at 78% 40%, rgba(184,115,51,.32), transparent 66%),
    linear-gradient(135deg, #2A1D13 0%, #140D08 60%, #241811 100%);
}
.detail-hero-inner {
  position: relative; display: grid; grid-template-columns: 1.1fr .8fr;
  gap: 48px; align-items: center;
  padding: clamp(40px, 5vw, 66px) 26px clamp(56px, 7vw, 86px);
}
.detail-hero h1 { color: #fff; font-size: clamp(1.9rem, 4.4vw, 3.1rem); max-width: 16ch; margin-bottom: .34em; }
.detail-hero .page-sub { max-width: 46ch; margin-bottom: 30px; }

.back-link {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--on-dark-soft); text-decoration: none;
  font-size: .78rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  margin-bottom: 26px; transition: color .18s ease;
}
.back-link:hover { color: var(--gold-200); }

/* Ilustrația mare, în ramă hexagonală */
.detail-art { display: grid; place-items: center; }
.detail-art-frame {
  position: relative; width: min(340px, 100%); aspect-ratio: 1;
  display: grid; place-items: center;
}
.detail-art-frame::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 45%, rgba(219,167,107,.20), transparent 68%);
  border-radius: 50%;
}
.detail-art-frame svg.ring { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--copper-400); opacity: .5; }
.detail-art-frame svg.art { position: relative; width: 52%; height: 52%; color: var(--gold-200); }

/* Corpul paginii */
.detail-body { display: grid; grid-template-columns: 1fr 330px; gap: 52px; align-items: start; }
.detail-main > h2 {
  font-size: clamp(1.2rem, 2.2vw, 1.55rem); margin-top: 2.2em; margin-bottom: .8em;
  padding-bottom: .5em; border-bottom: 1px solid var(--line);
}
.detail-main > h2:first-of-type { margin-top: 1.4em; }
.lead-intro { font-size: clamp(1.02rem, 1.5vw, 1.12rem); color: var(--ink); line-height: 1.62; }

.check-list { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: 12px; }
.check-list li { position: relative; padding-left: 34px; font-size: .97rem; }
.check-list li::before {
  content: ""; position: absolute; left: 0; top: .18em;
  width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(140deg, rgba(184,115,51,.20), rgba(217,164,65,.16));
}
.check-list li::after {
  content: ""; position: absolute; left: 6.5px; top: .56em;
  width: 9px; height: 5px;
  border-left: 2px solid var(--copper-600); border-bottom: 2px solid var(--copper-600);
  transform: rotate(-45deg);
}

/* Coloana laterală */
.detail-side { display: grid; gap: 20px; position: sticky; top: 104px; }
.side-card { background: var(--cream-050); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; }
.side-card h3 {
  font-size: .74rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--copper-700); margin-bottom: 1.2em;
}
.side-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.side-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 0; border-bottom: 1px solid var(--line);
  color: var(--ink); text-decoration: none; font-size: .92rem; font-weight: 600;
  transition: color .18s ease, padding-left .18s ease;
}
.side-list li:last-child a { border-bottom: 0; }
.side-list a:hover { color: var(--copper-600); padding-left: 5px; }
.side-list a.is-current { color: var(--copper-600); }
.side-list .arw { color: var(--copper-400); }

.side-card.is-dark { background: var(--dark-800); border-color: transparent; color: var(--on-dark-soft); }
.side-card.is-dark h3 { color: var(--gold-400); }
.side-card.is-dark p { font-size: .92rem; }
.side-card.is-dark .info-row { display: flex; gap: 11px; align-items: center; margin-bottom: 12px; font-size: .92rem; }
.side-card.is-dark .info-row svg { width: 16px; height: 16px; color: var(--copper-400); flex: none; }
.side-card.is-dark a { color: var(--on-dark); text-decoration: none; }
.side-card.is-dark a:hover { color: var(--gold-200); }

/* =========================================================
   FORMULAR DE CONTACT
   ========================================================= */
.contact-grid { display: grid; grid-template-columns: 1.35fr .8fr; gap: 40px; align-items: start; }

/* Panoul formularului. Fundalul e cald, dar câmpurile rămân albe:
   pe o suprafață colorată, un câmp alb se citește imediat ca loc de scris.
   Antetul are o bandă proprie, ușor mai caldă, ca titlul să se desprindă. */
.contact-form {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background:
    radial-gradient(620px 400px at 97% 1%, rgba(217,164,65,.24), transparent 62%),
    radial-gradient(520px 360px at 1% 99%, rgba(138,79,39,.18), transparent 60%),
    linear-gradient(158deg, #F2E5D6 0%, #E9D8C6 56%, #DFCBB5 100%);
  box-shadow: 0 16px 44px rgba(20,13,8,.12), 0 2px 6px rgba(20,13,8,.06);
  padding: 36px; display: grid; gap: 20px;
}
.contact-form::before {
  content: ""; position: absolute; pointer-events: none;
  right: -8%; bottom: -22%; width: min(330px, 40%); aspect-ratio: 1.263;
  background: url("../img/logo-semn.png") center / contain no-repeat;
  opacity: .08;
}
.contact-form::after {
  content: ""; position: absolute; left: 0; top: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--copper-400), var(--copper-700));
}
.contact-form > * { position: relative; z-index: 1; }
@media (max-width: 640px) { .contact-form::before { opacity: .035; width: 56%; } }
.contact-form > h2 { font-size: 1.3rem; margin-bottom: .2em; }
.contact-form > .form-sub { font-size: .95rem; margin: -12px 0 4px; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { display: grid; gap: 8px; }
.field label { font-size: .84rem; font-weight: 700; color: var(--ink); }
.field .req { color: var(--terracotta); }

.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap > svg {
  position: absolute; left: 15px; width: 18px; height: 18px;
  color: var(--copper-400); pointer-events: none;
}
.input-wrap.is-area > svg { top: 15px; align-self: flex-start; }

.field input, .field select, .field textarea {
  font: inherit; font-size: .95rem; color: var(--ink); width: 100%;
  padding: 13px 15px 13px 44px;
  border: 1.5px solid var(--line); border-radius: 10px; background: #fff;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.field textarea { resize: vertical; min-height: 140px; }
.field select { appearance: none; cursor: pointer; }
.select-arrow {
  position: absolute; right: 16px; width: 12px; height: 12px;
  color: var(--body); pointer-events: none;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--copper-400);
  box-shadow: 0 0 0 3px rgba(184,115,51,.16);
}
.field input::placeholder, .field textarea::placeholder { color: #A9968A; }
.field input.has-error, .field textarea.has-error { border-color: #C0362B; }

.consent { display: flex; gap: 12px; align-items: flex-start; font-size: .87rem; line-height: 1.55; }
.consent input { margin-top: 3px; width: 17px; height: 17px; flex: none; accent-color: var(--copper-500); }
.consent a { color: var(--copper-600); }

.hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }

.form-status { font-size: .91rem; font-weight: 600; margin: 0; min-height: 1.3em; }
.form-status.is-ok    { color: #2E7D4F; }
.form-status.is-error { color: #C0362B; }
.form-note { font-size: .8rem; margin: 0; }

/* Coloana cu date de contact */
.contact-info { display: grid; gap: 20px; }
/* Aceeași suprafață ca formularul de alături — cele două cartonașe stau
   unul lângă altul, deci orice diferență de ton s-ar citi ca o greșeală. */
.info-card {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px 28px;
  background:
    radial-gradient(420px 300px at 97% 1%, rgba(217,164,65,.24), transparent 62%),
    radial-gradient(360px 260px at 1% 99%, rgba(138,79,39,.18), transparent 60%),
    linear-gradient(158deg, #F2E5D6 0%, #E9D8C6 56%, #DFCBB5 100%);
  box-shadow: 0 16px 44px rgba(20,13,8,.12), 0 2px 6px rgba(20,13,8,.06);
}
.info-card::before {
  content: ""; position: absolute; pointer-events: none;
  right: -10%; bottom: -24%; width: min(250px, 46%); aspect-ratio: 1.263;
  background: url("../img/logo-semn.png") center / contain no-repeat;
  opacity: .08;
}
.info-card::after {
  content: ""; position: absolute; left: 0; top: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--copper-400), var(--copper-700));
}
.info-card > * { position: relative; z-index: 1; }
.info-card > h2 { font-size: 1.2rem; margin-bottom: .35em; }
.info-card > p { font-size: .93rem; }
.info-blocks { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 20px; }
.info-blocks li { display: grid; grid-template-columns: 44px 1fr; gap: 15px; align-items: start; }
.info-ico {
  width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center;
  background: linear-gradient(140deg, rgba(184,115,51,.16), rgba(217,164,65,.14));
  color: var(--copper-600);
}
.info-ico svg { width: 20px; height: 20px; }
.info-blocks b { display: block; color: var(--ink); font-size: .93rem; margin-bottom: 2px; }
.info-blocks span, .info-blocks a { font-size: .92rem; color: var(--body); text-decoration: none; }
.info-blocks a:hover { color: var(--copper-600); }

.help-card {
  background: var(--dark-800); color: var(--on-dark-soft);
  border-radius: var(--radius-lg); padding: 30px 28px; text-align: center;
}
.help-card .help-ico {
  width: 58px; height: 58px; border-radius: 50%; margin: 0 auto 16px;
  display: grid; place-items: center; background: var(--copper-500); color: #fff;
}
.help-card .help-ico svg { width: 26px; height: 26px; }
.help-card h3 { color: #fff; font-size: 1.05rem; margin-bottom: .5em; }
.help-card p { font-size: .91rem; margin: 0 0 18px; }

/* =========================================================
   ANGAJAȚII NOȘTRI — pași numerotați
   ========================================================= */
/* Pașii procesului. Fiecare casetă poartă cifra ei și ca fantomă în
   fundal, iar o linie de cupru trece prin spatele lor și se vede doar
   în golurile dintre casete — așa se citește ca un drum, nu ca o listă. */
.steps {
  position: relative; list-style: none; margin: 0; padding: 0;
  display: grid; gap: 20px; counter-reset: st;
}
.steps::before {
  /* 28px padding + 23px jumătate de insignă − 1px jumătate de linie = 50px */
  content: ""; position: absolute; left: 50px; top: 30px; bottom: 30px; width: 2px;
  background: linear-gradient(180deg, var(--copper-400), var(--copper-700));
  opacity: .32;
}
.steps li {
  position: relative; z-index: 1; overflow: hidden;
  counter-increment: st;
  display: grid; grid-template-columns: 56px 1fr; gap: 20px; align-items: start;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 28px;
  background:
    radial-gradient(420px 220px at 98% 0%, rgba(217,164,65,.12), transparent 64%),
    linear-gradient(150deg, #FFFFFF 0%, #FDFAF6 66%, var(--cream-050) 100%);
  box-shadow: 0 6px 20px rgba(20,13,8,.055), 0 1px 3px rgba(20,13,8,.035);
  transition: box-shadow .24s ease, border-color .24s ease;
}
.steps li:hover { box-shadow: 0 12px 30px rgba(20,13,8,.09); border-color: var(--copper-300); }
.steps li::before {
  content: counter(st, decimal-leading-zero);
  position: relative; z-index: 1;
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(140deg, var(--copper-400), var(--copper-700));
  color: #fff; font-weight: 800; font-size: .92rem;
  box-shadow: 0 4px 12px rgba(184,115,51,.34);
}
/* cifra-fantomă din fundalul casetei */
.steps li::after {
  content: counter(st, decimal-leading-zero);
  position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  font-size: clamp(76px, 9vw, 124px); font-weight: 800; line-height: 1;
  color: var(--copper-700); opacity: .055; letter-spacing: -.04em;
  pointer-events: none; user-select: none;
}
.steps li > div { position: relative; z-index: 1; }
.steps h3 { margin-bottom: .4em; }
.steps p { font-size: .94rem; margin: 0; }
@media (max-width: 640px) {
  .steps::before { display: none; }
  .steps li::after { font-size: 64px; opacity: .04; right: 10px; }
}

/* Pagini legale */
.legal-body { max-width: 82ch; }
.legal-body h2 { font-size: clamp(1.15rem, 2vw, 1.45rem); margin-top: 2.2em; padding-bottom: .5em; border-bottom: 1px solid var(--line); }
.legal-body h2:first-of-type { margin-top: 1.2em; }
.legal-body ul { padding-left: 1.3rem; margin: 0 0 1.1rem; }
.legal-body li { margin-bottom: .5rem; }
.legal-note {
  background: var(--cream-050); border-left: 4px solid var(--copper-500);
  border-radius: 8px; padding: 18px 22px; font-size: .93rem; margin: 1.6rem 0;
}
.legal-note strong { color: var(--ink); }
.updated { font-size: .88rem; margin-bottom: 2rem; }

/* Indicator de derulare */
.dots { position: absolute; bottom: 10px; right: 12px; z-index: 2; display: flex; gap: 5px; }
.dots span {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(246,238,230,.4); transition: background-color .3s ease, width .3s ease;
}
.dots span.is-active { background: var(--gold-200); width: 16px; border-radius: 3px; }

/* ================= Reveal ================= */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .65s ease, transform .65s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1080px) {
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 38px; }
}

@media (max-width: 980px) {
  .story { grid-template-columns: 1fr; gap: 54px; }
  .badge-years { right: 16px; bottom: -20px; }
  .pillars { margin-top: 0; }
  .page-hero-inner { grid-template-columns: 1fr; }
  .page-hero-art { display: none; }
  .detail-hero-inner { grid-template-columns: 1fr; gap: 34px; }
  .detail-art { order: -1; }
  .detail-art-frame { width: min(230px, 60%); }
  .detail-body { grid-template-columns: 1fr; gap: 40px; }
  .detail-side { position: static; }
  .contact-grid { grid-template-columns: 1fr; gap: 34px; }
  .proof-grid { grid-template-columns: 1fr; }
  .accent-box { grid-template-columns: 1fr; text-align: left; }
  /* Pe tabletă două coloane ar strânge prea mult textul. */
  .chapter { grid-template-columns: 1fr; gap: 28px; }
  .chapter:nth-child(even) .chapter-media { order: 0; }
  .chapter:nth-child(even) .chapter-num { left: -14px; right: auto; }
  .chapter-media .media { aspect-ratio: 16 / 9; }
}

@media (max-width: 1180px) {
  html { scroll-padding-top: 84px; }
  .nav-toggle { display: flex; }
  .header-cta { display: none; }
  .site-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: var(--dark-800); border-bottom: 1px solid rgba(219,167,107,.16);
    box-shadow: var(--shadow-lg); padding: 10px 26px 22px; display: none;
  }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: 15px 0; border-bottom: 1px solid rgba(219,167,107,.10); font-size: .88rem; }
  .site-nav a::after { display: none; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .header-inner { min-height: 70px; gap: 12px; }
  .brand { gap: 10px; }
  .brand-mark { width: 42px; }
  .brand-text strong { font-size: .95rem; }
  .brand-text em { font-size: .48rem; letter-spacing: .16em; }
  .hero-inner { padding-top: 66px; padding-bottom: 74px; }
  .footer-inner { grid-template-columns: 1fr; gap: 34px; }
  .cta-band { padding: 32px 26px; }
  .footer-bottom { flex-direction: column; }
  .field-row { grid-template-columns: 1fr; }
  .contact-form, .info-card, .help-card { padding: 26px 22px; }
  .steps li { grid-template-columns: 1fr; gap: 14px; padding: 22px; }
  /* Pe telefon poza stă mereu deasupra textului, la fiecare capitol. */
  .chapter { grid-template-columns: 1fr; gap: 24px; }
  .chapter:nth-child(even) .chapter-media { order: 0; }
  .chapter-num { width: 50px; height: 50px; font-size: 1rem; top: -14px; left: -8px; }
  .chapter:nth-child(even) .chapter-num { left: -8px; right: auto; }
  /* pe telefon rămâne cartonaș, deci păstrăm captușeala laterală */
  .content-block { grid-template-columns: 1fr; gap: 18px; padding: 30px 22px; }
  .block-ico { width: 58px; height: 58px; border-radius: 13px; }
  .block-ico svg { width: 26px; height: 26px; }
  .quote-box { grid-template-columns: 1fr; gap: 14px; padding: 24px 22px; }
  .accent-box { padding: 26px 22px; }
  .lang-bar .wrap { gap: 8px; min-height: 52px; }
  /* Pe telefon butoanele se apasă cu degetul, nu cu mouse-ul:
     zona de atins trebuie să fie de cel puțin 44px. */
  .lang-switch button { padding: 12px 15px; font-size: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* Panoul domeniilor. Are text mic desenat in el, deci nu poate sta ca
   fundal sub alte litere si nu trebuie marit peste marimea lui reala —
   dincolo de 1693px s-ar incetosa. Rama de cupru il leaga de restul paginii. */
.panou { margin: 0; }
.panou img {
  display: block; width: 100%; max-width: 1693px; height: auto; margin-inline: auto;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(217,164,65,.24);
  box-shadow: 0 18px 48px rgba(20,13,8,.22), 0 3px 8px rgba(20,13,8,.10);
}

/* ========== Subcategorii pe pagina de angajări ==========
   Fiecare domeniu are întrebările lui. Se arată doar blocul
   domeniului ales; restul sunt ascunse ȘI dezactivate din JS,
   ca răspunsurile lor să nu ajungă în mesaj. */
.subdom { display: grid; gap: 18px; }
.subdom[hidden] { display: none; }

.bife { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.bife legend {
  font-size: .84rem; font-weight: 700; color: var(--ink);
  padding: 0; margin-bottom: 2px;
}
.bife-lista {
  display: grid; gap: 9px 18px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.bifa {
  display: flex; align-items: center; gap: 10px;
  font-size: .87rem; line-height: 1.4; cursor: pointer;
  padding: 9px 12px; border-radius: 9px;
  border: 1px solid rgba(120,86,54,.22);
  background: rgba(255,255,255,.5);
  transition: border-color .16s ease, background .16s ease;
}
.bifa:hover { border-color: var(--copper-400); background: rgba(255,255,255,.82); }
.bifa input {
  width: 17px; height: 17px; flex: none;
  accent-color: var(--copper-500); cursor: pointer;
}
.bifa:has(input:checked) {
  border-color: var(--copper-500);
  background: rgba(184,115,51,.10);
  font-weight: 600;
}

/* Butonul de WhatsApp de sub cel de trimitere: aceeași lățime,
   dar verde, ca sa se vada ca e alt drum, nu alt buton de trimis. */
.btn-wapp {
  background: #1F9E52; color: #fff; border-color: #1F9E52;
  box-shadow: 0 6px 18px rgba(31,158,82,.28);
}
.btn-wapp:hover { background: #178643; }
.btn-wapp svg { width: 18px; height: 18px; }
.form-sau {
  text-align: center; font-size: .8rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin: 2px 0;
}

/* ========== Bara către scrisoarea patronului ==========
   Stă deasupra formularului de candidatură. Nu e un buton
   printre altele: e o bandă întreagă, ca omul să o vadă
   înainte de a începe să completeze câmpuri. */
.bara-scrisoare {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: clamp(16px, 2.4vw, 28px);
  text-decoration: none;
  padding: clamp(20px, 2.4vw, 28px) clamp(22px, 2.8vw, 34px);
  margin-bottom: clamp(24px, 3vw, 34px);
  border: 1px solid rgba(217,164,65,.30); border-radius: var(--radius);
  background:
    radial-gradient(460px 260px at 94% 6%, rgba(217,164,65,.18), transparent 62%),
    linear-gradient(150deg, #6E3D24 0%, #4C2A17 56%, #2E1B0E 100%);
  box-shadow: 0 10px 28px rgba(20,13,8,.20);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.bara-scrisoare::before {
  content: ""; position: absolute; pointer-events: none;
  right: -4%; bottom: -34%; width: min(230px, 30%); aspect-ratio: 1.263;
  background: url("../img/logo-semn.png") center / contain no-repeat;
  opacity: .10;
}
.bara-scrisoare > * { position: relative; z-index: 1; }
.bara-scrisoare:hover {
  border-color: var(--gold-400);
  box-shadow: 0 16px 38px rgba(20,13,8,.28);
  transform: translateY(-2px);
}
.bara-scrisoare .bs-ico {
  width: 52px; height: 52px; flex: none; display: grid; place-items: center;
  border-radius: 14px; border: 1px solid rgba(217,164,65,.42);
  background: rgba(217,164,65,.12); color: var(--gold-400);
}
.bara-scrisoare .bs-ico svg { width: 25px; height: 25px; }
.bara-scrisoare .bs-text { flex: 1; min-width: 0; }
.bara-scrisoare .bs-sus {
  display: block; font-size: .72rem; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-400); margin-bottom: 6px;
}
.bara-scrisoare .bs-titlu {
  display: block; font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.9vw, 1.32rem); font-weight: 700;
  color: #fff; line-height: 1.25; margin-bottom: 5px;
}
.bara-scrisoare .bs-sub {
  display: block; font-size: .89rem; line-height: 1.5;
  color: var(--on-dark-soft);
}
.bara-scrisoare .bs-arw {
  flex: none; width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: 50%; background: var(--copper-500); color: #fff;
  transition: transform .2s ease;
}
.bara-scrisoare .bs-arw svg { width: 19px; height: 19px; }
.bara-scrisoare:hover .bs-arw { transform: translateX(4px); }

@media (max-width: 560px) {
  .bara-scrisoare { flex-wrap: wrap; }
  .bara-scrisoare .bs-text { flex: 1 1 100%; order: 3; }
  .bara-scrisoare .bs-arw { margin-left: auto; }
}

/* Scrisoarea propriu-zisă: o coloană îngustă, ca într-o carte.
   Rândurile lungi obosesc ochiul, iar textul ăsta se citește tot. */
.scrisoare { max-width: 40rem; margin-inline: auto; }
.scrisoare > p:first-of-type::first-letter {
  float: left; font-family: var(--font-display); font-size: 3.3em;
  line-height: .82; padding: 4px 12px 0 0; color: var(--copper-600);
}
.scrisoare h2 {
  font-size: clamp(1.18rem, 2.1vw, 1.5rem);
  margin-top: clamp(34px, 4vw, 52px); margin-bottom: .55em;
}
.scrisoare h2:first-child { margin-top: 0; }
.scrisoare .lista-scrisoare { list-style: none; margin: 0 0 1.4em; padding: 0; display: grid; gap: 14px; }
.scrisoare .lista-scrisoare li {
  position: relative; padding-left: 30px; line-height: 1.65;
}
.scrisoare .lista-scrisoare li::before {
  content: ""; position: absolute; left: 3px; top: .55em;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--copper-500);
}
.scrisoare-semnat {
  margin-top: clamp(34px, 4vw, 50px); padding-top: 24px;
  border-top: 1px solid var(--line);
}
.scrisoare-semnat b { display: block; font-size: 1.02rem; color: var(--ink); }
.scrisoare-semnat span { font-size: .84rem; color: var(--muted); letter-spacing: .05em; }

/* Banda neagra de WhatsApp, pe toata latimea paginii de angajari.
   Nu mai e un cartonas ingust in coloana din dreapta, ci o bara
   care inchide pagina — de aceea sta pe orizontala, nu pe verticala. */
.help-card-lat {
  margin-top: clamp(24px, 3vw, 36px);
  display: flex; align-items: center; text-align: left;
  gap: clamp(18px, 2.6vw, 30px);
  padding: clamp(24px, 2.8vw, 34px) clamp(24px, 3vw, 40px);
}
.help-card-lat .help-ico { margin: 0; flex: none; }
.help-card-lat .hc-text { flex: 1; min-width: 0; }
.help-card-lat h3 { margin-bottom: .35em; }
.help-card-lat p { margin: 0; }
.help-card-lat .btn { flex: none; }

@media (max-width: 700px) {
  .help-card-lat { flex-direction: column; text-align: center; }
  .help-card-lat .btn { width: 100%; }
}

/* ========== Lista activităților autorizate ==========
   Sunt peste o sută de rânduri: dacă fiecare ar fi un cartonaș
   mare ca cele de sus, pagina ar deveni de zece ori mai lungă.
   Aceleași culori și aceeași ramă, dar în format compact. */
.cauta {
  position: relative; display: flex; align-items: center;
  max-width: 38rem; margin: 0 auto 10px;
}
.cauta > svg {
  position: absolute; left: 17px; width: 19px; height: 19px;
  color: var(--copper-600); pointer-events: none;
}
.cauta input {
  width: 100%; padding: 15px 46px 15px 48px;
  font: inherit; font-size: .96rem; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  box-shadow: 0 4px 16px rgba(20,13,8,.06);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.cauta input::placeholder { color: var(--muted); }
.cauta input:focus {
  outline: none; border-color: var(--copper-400);
  box-shadow: 0 0 0 4px rgba(184,115,51,.14);
}
.cauta input::-webkit-search-cancel-button { display: none; }
.cauta-x {
  position: absolute; right: 12px; width: 30px; height: 30px;
  display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(20,13,8,.07); color: var(--ink);
}
.cauta-x:hover { background: rgba(184,115,51,.18); }
.cauta-x svg { width: 14px; height: 14px; }
.cauta-info {
  text-align: center; font-size: .84rem; color: var(--muted);
  min-height: 1.4em; margin: 0 0 clamp(20px, 2.6vw, 30px);
}

.acte {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(275px, 1fr));
}
.act {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 6px;
  padding: 15px 18px 15px 20px;
  border: 1px solid rgba(217,164,65,.22); border-radius: 12px;
  background:
    radial-gradient(220px 130px at 96% 0%, rgba(217,164,65,.16), transparent 64%),
    linear-gradient(150deg, #6E3D24 0%, #4C2A17 58%, #341F10 100%);
  box-shadow: 0 6px 18px rgba(20,13,8,.16);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.act::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--gold-400), var(--copper-600));
}
.act:hover {
  border-color: var(--gold-400); transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(20,13,8,.24);
}
.act-n { color: #fff; font-weight: 600; font-size: .93rem; line-height: 1.4; }
.act-c {
  color: var(--gold-400); font-size: .68rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
}
.act[hidden] { display: none; }
.act mark {
  background: rgba(217,164,65,.34); color: #fff;
  border-radius: 3px; padding: 0 2px;
}

.acte-nota {
  margin: clamp(24px, 3vw, 34px) auto 0; max-width: 44rem;
  text-align: center; font-size: .8rem; color: var(--muted); line-height: 1.6;
}