/* === POPPINS (generat de scripts/descarca-fonturi.mjs) === */
/* Poppins, găzduit local. Generat cu scripts/descarca-fonturi.mjs —
   nu se editează de mână. Sursa: Google Fonts, licență SIL Open Font License. */

/* latin-ext 400 */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonturi/poppins-400-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;
}

/* latin 400 */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonturi/poppins-400-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;
}

/* latin-ext 600 */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonturi/poppins-600-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;
}

/* latin 600 */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonturi/poppins-600-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;
}

/* latin-ext 700 */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonturi/poppins-700-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;
}

/* latin 700 */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonturi/poppins-700-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;
}
/* === sfârșit Poppins === */

/* =========================================================================
   ROSILO — sistem vizual (model: layout industrial pe antracit + accent cald)
   Un singur fișier CSS, fără build. Schimbi brandul din variabilele de mai jos.
   ========================================================================= */

:root {
  /* culori */
  --ink:        #1d1d1b;   /* fundal principal (antracit) */
  --ink-soft:   #262624;   /* fundal secundar */
  --ink-soft-2: #242422;
  --accent:     #f04e24;   /* accent brand Rosilo */
  --accent-dk:  #c73c17;   /* capătul închis al benzii degrade */
  --footer-bg:  #000;
  --white:      #fff;

  /* tipografie */
  --font: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* layout */
  --max: 1500px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--ink);
  color: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }

::selection { background: var(--accent); color: #fff; }

/* ---------- container ---------- */
.colonna {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: 1.5rem;
}
@media (min-width: 1024px) {
  .colonna { padding-left: max(1.5rem, 6rem - max(0px, 50vw - 750px)); }
}

/* ---------- elemente de text recurente ---------- */
.eyebrow {
  margin-bottom: 1.25rem;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow--dark { color: rgba(29,29,27,.6); }

h1, h2, h3 { font-weight: 700; letter-spacing: -.02em; line-height: 1.12; }

.h-mare   { font-size: clamp(2rem, 1.2rem + 3.2vw, 3rem); }
.h-urias  { font-size: clamp(1.75rem, .7rem + 4.6vw, 3.9rem); line-height: 1.06; }
.acc { color: var(--accent); }

.text-lead {
  font-size: 1.125rem;
  line-height: 1.75;
  color: rgba(255,255,255,.72);
}

.legatura {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: 2.25rem;
  font-weight: 600;
  color: var(--accent);
}
.legatura span { transition: transform .25s ease; }
.legatura:hover span { transform: translateX(4px); }

/* ---------- butoane oblice ---------- */
.btn {
  display: inline-block;
  transform: skewX(-12deg);
  padding: 1rem 2rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem;
  transition: opacity .25s ease, border-color .25s ease, background-color .25s ease;
}
.btn > span { display: block; transform: skewX(12deg); }
.btn--plin   { background: var(--accent); color: #fff; }
.btn--plin:hover { opacity: .9; }
.btn--ink    { background: var(--ink); color: #fff; }
/* `background: transparent` nu e de prisos: pe un <button>, dacă nu scriem
   fundalul, browserul pune al lui — gri foarte deschis — iar textul alb de
   deasupra devine aproape ilizibil. Pe <a> nu se vedea, pentru că linkurile
   n-au fundal implicit. */
.btn--gol    { background: transparent; border: 2px solid rgba(255,255,255,.3); color: #fff; }
.btn--gol:hover { border-color: #fff; }

/* ---------- banda degrade ---------- */
.banda {
  background: linear-gradient(90deg, var(--accent-dk) 0%, var(--accent) 100%);
}

/* dungă subțire înclinată, folosită ca separator între secțiuni.
   Intră prin lateral când secțiunea ajunge în ecran. */
.stacco { display: flex; align-items: center; height: 2.25rem; overflow: clip; background: var(--ink); }
.stacco .stacco-banda {
  width: 120%;
  height: .9rem;
  margin-left: -10%;
  transform: translateX(-115%) skewY(-1deg);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 8%, #000 24% 76%, rgba(0,0,0,.35) 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 8%, #000 24% 76%, rgba(0,0,0,.35) 92%, transparent 100%);
}
.stacco.vizibil .stacco-banda { animation: banda-intra 2.1s cubic-bezier(.22,1,.36,1) both; }
.stacco--dreapta .stacco-banda { transform: translateX(115%) skewY(-1deg); }
.stacco--dreapta.vizibil .stacco-banda { animation-name: banda-intra-dreapta; }
@keyframes banda-intra {
  from { transform: translateX(-115%) skewY(-1deg); }
  to   { transform: translateX(0) skewY(-1deg); }
}
@keyframes banda-intra-dreapta {
  from { transform: translateX(115%) skewY(-1deg); }
  to   { transform: translateX(0) skewY(-1deg); }
}

/* dungile duble ale secțiunii portocalii */
.arr-riga { position: relative; overflow: clip; }
.arr-riga::before,
.arr-riga::after {
  content: "";
  position: absolute;
  left: -10%;
  width: 120%;
  height: 6px;
  background: var(--ink);
}
.arr-riga::before { top: 18px;    transform: skewY(-1deg); }
.arr-riga::after  { bottom: 18px; transform: skewY(-1deg); }

/* =========================================================================
   BARA DE NAVIGARE
   ========================================================================= */
.bara {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid transparent;
  transition: background-color .3s ease, border-color .3s ease;
}
.bara.lipit { background: var(--ink); border-bottom-color: rgba(255,255,255,.1); }

.bara-inner {
  max-width: var(--max);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1rem 1.5rem;
}
@media (min-width: 1024px) { .bara-inner { padding-block: 1.25rem; } }

.bara-logo img { height: 34px; width: auto; filter: drop-shadow(0 2px 10px rgba(0,0,0,.6)); }

/* Pe prima pagină logoul din bară stă exact deasupra celui mare din hero, două
   logouri unul sub altul. Îl ținem ascuns până la derulare, când bara devine
   opacă și cel mare a ieșit din cadru. `visibility` păstrează locul, deci
   hamburgerul și selectorul de limbă nu sar; tot ea îl scoate din ordinea de
   tabulare cât e invizibil. Clasa `bara--cu-hero` o pun generatoarele doar pe
   paginile principale; cele interioare n-au logo în hero și îl păstrează
   vizibil de sus. */
.bara-logo { transition: opacity .3s ease, visibility .3s ease; }
.bara--cu-hero:not(.lipit) .bara-logo { opacity: 0; visibility: hidden; }

.meniu { display: none; align-items: center; gap: 21px; }
@media (min-width: 1100px) { .meniu { display: flex; } }

.meniu-item { position: relative; }
.meniu-link {
  display: block;
  transform: skewX(-12deg);
  border: 1px solid var(--accent);
  padding: .5rem 1.25rem;
  font-size: .9375rem;
  font-weight: 600;
  color: #fff;
  transition: background-color .3s ease, color .3s ease;
}
.meniu-link > span { display: block; transform: skewX(12deg); }
.meniu-link:hover { background: rgba(240,78,36,.15); color: var(--accent); }
.sageata { margin-left: .5rem; font-size: .7rem; color: var(--accent); }

/* submeniu */
.submeniu {
  position: absolute;
  left: 50%;
  top: 100%;
  z-index: 50;
  width: max-content;
  transform: translateX(-50%);
  padding-top: .75rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, visibility .2s ease;
}
.meniu-item:hover .submeniu,
.meniu-item:focus-within .submeniu { opacity: 1; visibility: visible; pointer-events: auto; }
.submeniu-cadru {
  border: 1px solid rgba(240,78,36,.4);
  background: rgba(29,29,27,.96);
  backdrop-filter: blur(6px);
  padding: 1.75rem 2rem;
  display: flex;
  gap: 2.5rem;
}
.submeniu-titlu {
  margin-bottom: 1rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--accent);
}
.submeniu li + li { margin-top: .625rem; }
.submeniu a { font-size: .9375rem; color: rgba(255,255,255,.75); white-space: nowrap; transition: color .2s ease; }
.submeniu a:hover { color: var(--accent); }

/* hamburger */
.hamb {
  display: flex; flex-direction: column; gap: 5px;
  background: none; border: 0; cursor: pointer; padding: .5rem;
}
@media (min-width: 1100px) { .hamb { display: none; } }
.hamb i { display: block; width: 26px; height: 2px; background: var(--accent); transition: transform .25s ease, opacity .25s ease; }
.hamb[aria-expanded="true"] i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamb[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.hamb[aria-expanded="true"] i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* panou mobil */
.panou {
  position: fixed; inset: 0; z-index: 39;
  background: var(--ink);
  padding: 6rem 1.5rem 2rem;
  overflow-y: auto;
  transform: translateY(-100%);
  transition: transform .35s cubic-bezier(.22,1,.36,1);
}
.panou.deschis { transform: translateY(0); }
.panou a {
  display: block;
  border-left: 2px solid transparent;
  padding: .75rem 1rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: rgba(255,255,255,.85);
  transition: color .2s ease, border-color .2s ease;
}
.panou a:hover { color: var(--accent); border-left-color: var(--accent); }
.panou .sub a { font-size: .95rem; font-weight: 400; color: rgba(255,255,255,.6); padding-left: 2rem; }

/* =========================================================================
   HERO
   ========================================================================= */
.hero { position: relative; display: flex; flex-direction: column; min-height: 100svh; overflow: hidden; }
.hero-foto { position: absolute; inset: 0; }

/* Cadrele hero-ului stau unul peste altul și se schimbă prin opacitate, nu prin
   deplasare: o imagine care alunecă lateral pe toată lățimea ecranului costă
   mult la desenare și se vede sacadat pe telefon. Primul cadru e vizibil din
   CSS, nu din JS — dacă scriptul nu pornește, rămâne o fotografie fixă, cum era
   înainte. */
.hero-cadru {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.1s cubic-bezier(.4,0,.2,1);
}
.hero-cadru.este-activ { opacity: 1; }
.hero-foto img { width: 100%; height: 100%; object-fit: cover; }

@media (prefers-reduced-motion: reduce) {
  .hero-cadru { transition: none; }
}
.hero-voal-sus {
  position: absolute; inset-inline: 0; top: 0; height: 70vh;
  background: linear-gradient(to bottom, var(--ink) 0%, rgba(29,29,27,.7) 45%, transparent 100%);
}
.hero-voal-jos {
  position: absolute; inset: 0;
  background: linear-gradient(to top, var(--ink) 0%, rgba(29,29,27,.4) 45%, transparent 100%);
}
.hero-sus { position: relative; z-index: 10; width: 100%; padding-top: 8rem; }
@media (min-width: 768px) { .hero-sus { padding-top: 10rem; } }

.hero-logo { height: 4rem; width: auto; filter: drop-shadow(0 2px 12px rgba(0,0,0,.85)); }
@media (min-width: 640px) { .hero-logo { height: 5.5rem; } }
@media (min-width: 768px) { .hero-logo { height: 6.5rem; } }

.hero-kicker {
  margin-top: 1.5rem;
  font-size: clamp(.9rem, .55rem + 1.1vw, 1.5rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .18em;
  text-shadow: 0 2px 10px rgba(0,0,0,.8);
}

.hero-jos { position: relative; margin-top: auto; width: 100%; z-index: 10; }
.hero-jos .colonna { padding-top: 3.5rem; padding-bottom: 5rem; }
@media (min-width: 768px) { .hero-jos .colonna { padding-top: 6rem; } }
.hero h1 { max-width: 17ch; }
.hero p.text-lead {
  margin-top: 2rem;
  max-width: 44rem;
  color: rgba(255,255,255,.8);
  font-size: clamp(1rem, .94rem + .3vw, 1.125rem);
  line-height: 1.7;
  text-align: left;
}
.hero-butoane { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.75rem; }
.hero-banda { height: 1.5rem; overflow: hidden; }
.hero-banda > div { height: 1rem; width: 120%; transform: translateX(-10%) skewY(-1deg); }

/* =========================================================================
   SECȚIUNI GENERICE
   ========================================================================= */
.sect { padding-block: clamp(3.5rem, 2rem + 5vw, 6rem); }
.grid-2 { display: grid; gap: 3.5rem; }
@media (min-width: 900px) {
  .grid-2 { grid-template-columns: 1fr 1.05fr; align-items: center; gap: 4rem; }
  .grid-2--inv { grid-template-columns: 1fr 1.15fr; }
  /* când coloana de text e mai înaltă decât media, centrarea lasă imaginea să
     pară căzută; aici o aliniem la rândul de sus al textului */
  .grid-2--sus { align-items: start; }
}

/* media cu colțuri tăiate, ca în model */
.media-taiat {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%);
  background: var(--ink-soft);
}
/* Și `video`, nu doar `img`: regula prindea doar imaginile, iar videoclipul de
   prezentare (1280×534, deci mult mai lat decât cadrul de 16/9) rămânea la
   mărimea lui naturală și lăsa o bandă goală sub el. */
.media-taiat img,
.media-taiat video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.media-simpla { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--ink-soft); }
.media-simpla img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  transition: filter .6s ease, transform .9s ease;
}
.media-simpla:hover img { filter: grayscale(0); transform: scale(1.03); }

/* listă cu liniuțe portocalii */
.lista-liniute { margin-top: 2.25rem; border-top: 1px solid rgba(255,255,255,.12); padding-top: 2rem; }
.lista-liniute li { display: flex; gap: .75rem; line-height: 1.7; color: rgba(255,255,255,.65); }
.lista-liniute li + li { margin-top: .75rem; }
.lista-liniute li::before {
  content: ""; flex: 0 0 auto; margin-top: .85rem; width: 1.5rem; height: 1px; background: var(--accent);
}

/* =========================================================================
   CIFRE
   ========================================================================= */
.cifre { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: rgba(255,255,255,.15); }
@media (min-width: 768px) { .cifre { grid-template-columns: repeat(4, 1fr); } }
.cifra { display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--ink); padding: 2.5rem 1.75rem; text-align: center; }
.cifra b { font-size: clamp(2.25rem, 1.5rem + 2vw, 3rem); font-weight: 700; letter-spacing: -.02em; color: var(--accent); }
.cifra p { margin-top: .5rem; font-size: .875rem; color: rgba(255,255,255,.55); }

/* banner foto cu text suprapus */
.banner { position: relative; width: 100%; overflow: hidden; }
.banner-foto { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.banner--inalt { min-height: 540px; aspect-ratio: 2400 / 900; }
.banner--diag  { height: 66vh; min-height: 440px; }
.banner--siguranta { min-height: clamp(660px, 92vh, 900px); }

/* ilustrația stă alb-negru și își recapătă culorile când treci cu mouse-ul peste ea */
.banner--ilustratie .banner-foto {
  filter: grayscale(1) contrast(1.04);
  transition: filter .8s cubic-bezier(.22,1,.36,1);
}
.banner--ilustratie:hover .banner-foto { filter: grayscale(0) contrast(1); }
/* pe ecrane fără mouse nu există hover, deci o arătăm direct color */
@media (hover: none) {
  .banner--ilustratie .banner-foto { filter: grayscale(0) contrast(1); }
}

/* cele două blocuri de text ale secțiunii de siguranță, distanțate pe verticală */
.siguranta-strat {
  position: relative;
  z-index: 2;
  min-height: inherit;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 4rem;
  padding-block: 4.5rem 3.5rem;
}
.voal-jos {
  position: absolute; inset: 0;
  background: linear-gradient(to top, var(--ink) 0%, rgba(29,29,27,.97) 14%, rgba(29,29,27,.86) 28%, rgba(29,29,27,.6) 40%, rgba(29,29,27,.22) 55%, transparent 70%);
}
.banner--siguranta .voal-jos {
  background: linear-gradient(to top, var(--ink) 0%, rgba(29,29,27,.95) 26%, rgba(29,29,27,.72) 44%, rgba(29,29,27,.3) 60%, transparent 76%);
}
.voal-sus {
  position: absolute; inset-inline: 0; top: 0; height: 40%;
  background: linear-gradient(to bottom, var(--ink) 0%, rgba(29,29,27,.45) 50%, transparent 100%);
}
.voal-diag {
  position: absolute; inset: 0;
  background: linear-gradient(108deg, rgba(29,29,27,.94) 0%, rgba(29,29,27,.8) 30%, rgba(29,29,27,.4) 56%, transparent 78%);
}
.banner-text-jos { position: absolute; inset-inline: 0; bottom: 0; z-index: 2; padding-bottom: 1.75rem; }
/* textul așezat peste fotografie primește o umbră discretă, ca să rămână lizibil
   și acolo unde imaginea de dedesubt e deschisă la culoare */
.banner-text-jos .eyebrow,
.banner-text-jos h2,
.banner-text-jos p,
.banner-text-sus .eyebrow,
.banner-text-sus h2,
.banner-text-sus p { text-shadow: 0 2px 14px rgba(0,0,0,.75); }
.banner-text-sus { position: absolute; inset-inline: 0; top: 0; z-index: 2; padding-top: 5rem; }

/* =========================================================================
   NASTRO — banda cu cuvinte în mișcare
   ========================================================================= */
.nastro { width: 100%; padding-block: .35rem; overflow: clip;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12% 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12% 88%, transparent); }
.nastro-fila { display: flex; align-items: center; width: max-content; animation: nastro-stanga 42s linear infinite; }
.nastro--dreapta .nastro-fila { animation-name: nastro-dreapta; }
.nastro-cuvant {
  display: inline-flex; align-items: center; gap: 2.5rem; padding-right: 2.5rem;
  font-size: clamp(1.5rem, 3.2vw, 3.5rem); font-weight: 700; line-height: 1.15;
  letter-spacing: -.01em; white-space: nowrap; color: #fff;
  animation: nastro-aprinde var(--ciclu, 10s) ease-in-out infinite;
  animation-delay: var(--intarziere, 0s);
}
.nastro-punct { color: var(--accent); font-size: .6em; line-height: 1; }
/* O parte din cuvinte se aprind portocaliu, nu alb: banda nu mai e un bloc de
   alb care trece, ci alternează culorile mărcii. Sunt marcate în HTML, la doi
   pași unul de altul, ca la orice moment să se vadă din amândouă. */
.nastro-cuvant--acc { color: rgba(240,78,36,.35); animation-name: nastro-aprinde-acc; }
@keyframes nastro-stanga  { from { transform: translateX(0); }    to { transform: translateX(-50%); } }
@keyframes nastro-dreapta { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes nastro-aprinde     { 0%, 100% { color: rgba(255,255,255,.35); } 50% { color: #fff; } }
@keyframes nastro-aprinde-acc { 0%, 100% { color: rgba(240,78,36,.35); } 50% { color: var(--accent); } }

/* =========================================================================
   ÎNAINTE / DUPĂ
   ========================================================================= */
.pd { position: relative; width: 100%; overflow: hidden; background: var(--ink); user-select: none; touch-action: pan-y; }
.pd img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; -webkit-user-drag: none; pointer-events: none; }
.pd-inainte { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--taiere, 50%)) 0 0); }
.pd-eticheta {
  position: absolute; top: 1rem; z-index: 2;
  background: rgba(0,0,0,.55); backdrop-filter: blur(4px);
  padding: .35rem .85rem;
  font-size: .7rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #fff;
  pointer-events: none;
}
.pd-eticheta--sx { left: 1rem; }
.pd-eticheta--dx { right: 1rem; }
/* Pe telefon cele două etichete nu încap una lângă alta pe același rând — se
   suprapuneau și se tăiau reciproc. A doua coboară în colțul de jos. */
@media (max-width: 640px) {
  .pd-eticheta {
    top: .6rem; font-size: .58rem; letter-spacing: .1em; padding: .3rem .6rem;
    max-width: calc(100% - 1.2rem);
  }
  .pd-eticheta--sx { left: .6rem; }
  .pd-eticheta--dx { top: auto; bottom: .6rem; right: .6rem; }
}
.pd-maner {
  position: absolute; top: 0; bottom: 0; left: var(--taiere, 50%);
  width: 2px; margin-left: -1px; background: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 1px rgba(0,0,0,.25); pointer-events: none;
}
.pd-bulina {
  display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 9999px;
  background: #fff; color: var(--ink); box-shadow: 0 6px 20px rgba(0,0,0,.45);
}
.pd-cursor {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: ew-resize; z-index: 3; appearance: none; background: none;
}
.pd-cursor::-webkit-slider-thumb { -webkit-appearance: none; width: 1px; height: 100%; }
.pd-cursor::-moz-range-thumb { border: 0; border-radius: 0; width: 1px; height: 100%; }
figcaption { margin-top: 1rem; }
figcaption b { display: block; font-size: 1.125rem; }
figcaption p { margin-top: .4rem; font-size: .9375rem; line-height: 1.7; color: rgba(255,255,255,.55); }

/* =========================================================================
   DOMENII — carduri
   ========================================================================= */
/* carduri compacte, pe o grilă cu linii de 1px — aceeași construcție ca la cifre */
/* Liniile dintre cartonașe se desenează pe cartonașe, nu ca fundal al grilei.

   Tehnica dinainte era: fundal mai deschis pe grilă, spații de 1px între
   cartonașe, iar fundalul se vedea prin ele ca linii. Funcționa doar cât timp
   ultimul rând era plin. Unde nu era — pagina de 404, cea de mulțumire,
   paginile de serviciu cu două lucrări înrudite, și orice grilă cu număr impar
   pe ecran de tabletă — celula lipsă rămânea un dreptunghi gri în pagină.

   Umbra de 1px pictează doar în jurul cartonașelor care există. În spațiul
   dintre două cartonașe cele două umbre se suprapun și dau aceeași linie de
   1px; în golul rămas la capăt nu mai pictează nimic. Vezi și `.carduri-servicii`
   și `.cariera-grila`, care foloseau aceeași tehnică. */
.domenii {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin-top: 3rem;
}
.domeniu, .card-serviciu, .cariera-rand { box-shadow: 0 0 0 1px rgba(255,255,255,.12); }
@media (min-width: 600px)  { .domenii { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .domenii { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.domeniu {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  min-width: 0;
  background-color: var(--ink);
  /* Lumina oblică ce trece peste cartonaș la hover. E doar un fundal deplasat,
     nu un element în plus, și păstrează unghiul de pe butoane și benzi. */
  background-image: linear-gradient(105deg,
    transparent 38%, rgba(240,78,36,.13) 50%, transparent 62%);
  background-size: 300% 100%;
  background-position: 145% 0;
  background-repeat: no-repeat;
  padding: 1.375rem 2.25rem 1.375rem 1.25rem;
  transition: background-color .3s ease, background-position .75s cubic-bezier(.22,1,.36,1);
}
.domeniu:hover {
  background-color: var(--ink-soft);
  background-position: -45% 0;
}

/* Săgeata din colț: apare doar la hover, alunecând dinspre text. */
.domeniu::after {
  content: "";
  position: absolute;
  right: 1.15rem; top: 1.65rem;
  width: 7px; height: 7px;
  border-top: 1.6px solid var(--accent);
  border-right: 1.6px solid var(--accent);
  opacity: 0;
  transform: rotate(45deg) translate(-5px, 5px);
  transition: opacity .3s ease, transform .4s cubic-bezier(.22,1,.36,1);
}
.domeniu:hover::after { opacity: 1; transform: rotate(45deg) translate(0, 0); }

/* Cele nouă cartonașe nu intră deodată, ci unul după altul. */
.domenii > .domeniu:nth-child(1) { transition-delay: 0s, 0s; }
.domenii > .domeniu:nth-child(2) { transition-delay: .06s; }
.domenii > .domeniu:nth-child(3) { transition-delay: .12s; }
.domenii > .domeniu:nth-child(4) { transition-delay: .18s; }
.domenii > .domeniu:nth-child(5) { transition-delay: .24s; }
.domenii > .domeniu:nth-child(6) { transition-delay: .30s; }
.domenii > .domeniu:nth-child(7) { transition-delay: .36s; }
.domenii > .domeniu:nth-child(8) { transition-delay: .42s; }
.domenii > .domeniu:nth-child(9) { transition-delay: .48s; }
/* La hover decalajul dispare, altfel lumina ar porni cu întârziere. */
.domenii > .domeniu:hover { transition-delay: 0s; }

/* linia portocalie care apare la stânga, la trecerea cu mouse-ul */
.domeniu::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .35s cubic-bezier(.22,1,.36,1);
}
.domeniu:hover::before { transform: scaleY(1); }

.domeniu-ico { position: relative; flex: 0 0 auto; width: 2.125rem; height: 2.125rem; }
/* Aura care crește sub pictogramă la hover. */
.domeniu-ico::before {
  content: "";
  position: absolute; inset: -.55rem;
  border-radius: 9999px;
  background: radial-gradient(circle, rgba(240,78,36,.22), transparent 70%);
  opacity: 0;
  transform: scale(.5);
  transition: opacity .35s ease, transform .45s cubic-bezier(.22,1,.36,1);
}
.domeniu:hover .domeniu-ico::before { opacity: 1; transform: scale(1); }

.domeniu-ico svg {
  position: relative;
  width: 100%; height: 100%;
  stroke: var(--accent); fill: none; stroke-width: 1.6;
  opacity: .85;
  transition: opacity .3s ease, transform .35s ease;
}
/* Pictograma se umple de jos în sus când cartonașul intră în ecran — ca un siloz
   care se umple. Fără JS clasa `vizibil` nu apare, deci pictograma se vede
   întreagă de la început; nimic nu depinde de animație ca să fie citit. */
.domeniu.vizibil .domeniu-ico svg {
  animation: ico-umple .85s cubic-bezier(.22,1,.36,1) both;
}
.domenii > .domeniu:nth-child(1) .domeniu-ico svg { animation-delay: .18s; }
.domenii > .domeniu:nth-child(2) .domeniu-ico svg { animation-delay: .24s; }
.domenii > .domeniu:nth-child(3) .domeniu-ico svg { animation-delay: .30s; }
.domenii > .domeniu:nth-child(4) .domeniu-ico svg { animation-delay: .36s; }
.domenii > .domeniu:nth-child(5) .domeniu-ico svg { animation-delay: .42s; }
.domenii > .domeniu:nth-child(6) .domeniu-ico svg { animation-delay: .48s; }
.domenii > .domeniu:nth-child(7) .domeniu-ico svg { animation-delay: .54s; }
.domenii > .domeniu:nth-child(8) .domeniu-ico svg { animation-delay: .60s; }
.domenii > .domeniu:nth-child(9) .domeniu-ico svg { animation-delay: .66s; }
@keyframes ico-umple {
  from { clip-path: inset(100% 0 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
.domeniu:hover .domeniu-ico svg { opacity: 1; transform: translateY(-2px) scale(1.06); }

.domeniu-txt { min-width: 0; transition: transform .35s cubic-bezier(.22,1,.36,1); }
.domeniu:hover .domeniu-txt { transform: translateX(3px); }
.domeniu-txt h3 { font-size: 1rem; line-height: 1.3; transition: color .25s ease; }
.domeniu:hover .domeniu-txt h3 { color: var(--accent); }
.domeniu-txt p { margin-top: .4rem; font-size: .8125rem; line-height: 1.6; color: rgba(255,255,255,.5); }

/* =========================================================================
   HARTA ȚĂRILOR
   Conturul e generat din datele Natural Earth (domeniu public), proiecție
   Mercator, decupat pe Europa + Iran. Punctele sunt așezate procentual peste
   SVG, după coordonatele capitalelor, deci rămân pe loc la orice dimensiune.
   ========================================================================= */
.harta-zona { display: grid; gap: 2.5rem; margin-top: 3rem; }
@media (min-width: 900px) {
  .harta-zona { grid-template-columns: minmax(0, 1fr) 12rem; gap: 3.5rem; align-items: center; }
}

/* harta e aproape pătrată, așa că o limităm — altfel ar ocupa singură un ecran întreg.
   `container-type` ne dă unitatea `cqw`: înălțimea tijelor e scrisă în procente
   din lățimea hărții, deci scade odată cu ea, pe telefon la fel ca pe ecran mare. */
.harta { position: relative; width: 100%; max-width: 620px; margin-inline: auto; container-type: inline-size; }
.harta-svg {
  width: 100%;
  height: auto;
  /* Uscatul care iese din cadru (nordul Rusiei, Groenlanda) e tăiat drept de
     marginea hărții. Estompăm marginile ca tăietura să nu se vadă ca o dungă. */
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%),
    linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image:
    linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%),
    linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.harta-svg .t {
  fill: rgba(255,255,255,.05);
  stroke: rgba(255,255,255,.14);
  stroke-width: 1;
  stroke-linejoin: round;
}
.harta-svg .t--activ { fill: rgba(240,78,36,.16); stroke: rgba(240,78,36,.55); }
.harta-svg .t--baza  { fill: rgba(240,78,36,.34); stroke: var(--accent); }

/* Fiecare țară are trei piese: o pată de lumină pe hartă (`.harta-punct`), o
   tijă care se ridică din ea (`.harta-tija`) și un bec în vârf. Înălțimile sunt
   scrise punct cu punct, în `--h`, alese ca becurile să nu cadă unul peste
   altul acolo unde țările stau înghesuite — în Europa Centrală tijele sunt
   scurte dinadins. */
.harta-punct {
  position: absolute;
  left: var(--x); top: var(--y);
  width: 15px; height: 15px;
  margin: -7.5px 0 0 -7.5px;
  border-radius: 9999px;
  background: radial-gradient(circle, rgba(240,78,36,.95) 0 28%, rgba(240,78,36,.3) 58%, transparent 76%);
  box-shadow: 0 0 12px 2px rgba(240,78,36,.3);
  opacity: 0;
}
.harta.vizibil .harta-punct {
  animation: punct-apare .5s cubic-bezier(.22,1,.36,1) both;
  animation-delay: calc(var(--ord, 0) * .085s);
}
@keyframes punct-apare {
  from { opacity: 0; transform: scale(.2); }
  to   { opacity: 1; transform: scale(1); }
}

/* Tija. Lățimea de 14px e suprafață de apucat cu mausul; linia propriu-zisă e
   desenată ca fundal, 1,5px, pe mijloc. */
.harta-tija {
  position: absolute;
  left: 50%; bottom: 50%;
  width: 14px; margin-left: -7px;
  height: calc(var(--h, 4) * 1cqw);
  background: linear-gradient(to top, rgba(240,78,36,.1), var(--accent)) center / 1.5px 100% no-repeat;
}
.harta.vizibil .harta-tija {
  animation: tija-creste .55s cubic-bezier(.22,1,.36,1) both;
  animation-delay: calc(var(--ord, 0) * .085s + .16s);
}
@keyframes tija-creste {
  from { height: 0; }
  to   { height: calc(var(--h, 4) * 1cqw); }
}

/* Becul din vârful tijei. */
.harta-tija::after {
  content: "";
  position: absolute;
  left: 50%; top: 0;
  width: 9px; height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 9999px;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(240,78,36,.2), 0 0 14px 2px rgba(240,78,36,.5);
}
.harta.vizibil .harta-tija::after {
  animation: bec-apare .45s cubic-bezier(.34,1.56,.64,1) both;
  animation-delay: calc(var(--ord, 0) * .085s + .52s);
}
@keyframes bec-apare {
  from { opacity: 0; transform: scale(0); }
  to   { opacity: 1; transform: scale(1); }
}
.harta-punct:hover .harta-tija::after { transform: scale(1.35); transition: transform .2s ease; }

/* România — punctul de plecare, în alb. */
.harta-punct--baza {
  width: 18px; height: 18px;
  margin: -9px 0 0 -9px;
  background: radial-gradient(circle, rgba(255,255,255,.95) 0 28%, rgba(255,255,255,.3) 58%, transparent 76%);
  box-shadow: 0 0 14px 2px rgba(255,255,255,.22);
}
.harta-punct--baza .harta-tija {
  background-image: linear-gradient(to top, rgba(255,255,255,.12), #fff);
}
.harta-punct--baza .harta-tija::after {
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255,255,255,.18), 0 0 14px 2px rgba(255,255,255,.4);
}
/* cercul care pulsează */
.harta-punct::after {
  content: "";
  position: absolute; inset: -4px;
  border-radius: 9999px;
  border: 1px solid var(--accent);
  opacity: 0;
}
/* pulsul pornește abia după ce punctul a aterizat */
.harta.vizibil .harta-punct::after {
  animation: harta-puls 3.2s ease-out infinite;
  animation-delay: calc(var(--ord, 0) * .085s + .8s);
}
.harta-punct--baza::after { border-color: #fff; }
/* decalăm pulsul, ca să nu bată toate în același timp */
.harta-punct:nth-child(5n+1) { --intarziere: 0s; }
.harta-punct:nth-child(5n+2) { --intarziere: .64s; }
.harta-punct:nth-child(5n+3) { --intarziere: 1.28s; }
.harta-punct:nth-child(5n+4) { --intarziere: 1.92s; }
.harta-punct:nth-child(5n+5) { --intarziere: 2.56s; }
/* Cercul e mai mic decât era: cu baza mărită și cu tijele deasupra, un puls
   de 2,4× umplea harta de inele, mai ales pe telefon. */
@keyframes harta-puls {
  0%   { transform: scale(.7); opacity: .55; }
  70%  { transform: scale(1.9); opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* eticheta apare la trecerea cu mouse-ul, ca să nu se suprapună 13 nume deodată */
.harta-eticheta {
  position: absolute;
  /* deasupra becului, nu deasupra bazei — de aici înălțimea tijei în calcul */
  left: 50%; bottom: calc(100% + var(--h, 4) * 1cqw + 12px);
  transform: translateX(-50%) translateY(4px);
  white-space: nowrap;
  background: var(--ink);
  border: 1px solid rgba(240,78,36,.5);
  padding: .25rem .6rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.harta-punct:hover { z-index: 3; }
.harta-punct:hover .harta-eticheta { opacity: 1; transform: translateX(-50%) translateY(0); }

/* lista de lângă hartă */
.harta-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 1rem; }
@media (min-width: 900px) { .harta-lista { grid-template-columns: 1fr; gap: .5rem; } }
.harta-lista li {
  display: flex; align-items: center; gap: .625rem;
  font-size: .9375rem;
  color: rgba(255,255,255,.75);
}
.harta-lista li::before {
  content: "";
  flex: 0 0 auto;
  width: 6px; height: 6px;
  border-radius: 9999px;
  background: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  .harta-punct::after { animation: none; opacity: 0; }
}

.doua-coloane { display: grid; gap: 3rem; margin-top: 4rem; }
@media (min-width: 900px) { .doua-coloane { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.doua-coloane > div { border-top: 1px solid rgba(255,255,255,.15); padding-top: 1.75rem; }

/* =========================================================================
   CTA
   ========================================================================= */
.cta { color: var(--ink); padding-block: 6rem 5rem; }
.cta .colonna { display: grid; gap: 3.5rem; }
@media (min-width: 900px) { .cta .colonna { grid-template-columns: 1.25fr 1fr; } }
.cta h2 { color: var(--ink); }
.cta p { color: rgba(29,29,27,.8); line-height: 1.75; }
.cta-actiuni { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; margin-top: 2.25rem; }
.cta-tel { font-size: 1.125rem; font-weight: 700; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.cta-note > div { border-top: 1px solid rgba(29,29,27,.25); padding-top: 1.5rem; }
.cta-note > div + div { margin-top: 2rem; }
.cta-note p:first-child {
  margin-bottom: .75rem; font-size: .7rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase; color: rgba(29,29,27,.6);
}
.cta-note p:last-child { color: rgba(29,29,27,.85); }

/* =========================================================================
   FOOTER
   ========================================================================= */
footer { background: var(--footer-bg); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.25rem; padding-block: 3.5rem 2.25rem; }
@media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; } }
@media (min-width: 1100px) { .footer-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.2fr); } }
.footer-brand { grid-column: 1 / -1; }
@media (min-width: 640px) { .footer-brand { grid-column: auto; } }
.footer-brand img { width: 170px; height: auto; }
.footer-brand .liniuta { margin-top: 1.25rem; width: 2rem; height: 2px; background: var(--accent); }
.footer-brand p { margin-top: 1.25rem; max-width: 280px; font-size: .9375rem; line-height: 1.7; color: rgba(255,255,255,.6); }
.footer-col h2 { margin-bottom: 1rem; font-size: .875rem; color: var(--accent); }
@media (min-width: 1100px) { .footer-col { border-left: 1px solid rgba(240,78,36,.45); padding-left: 2.5rem; } }
.footer-col li + li { margin-top: .625rem; }
.footer-col a { font-size: .875rem; color: rgba(255,255,255,.75); transition: color .2s ease; }
.footer-col a:hover { color: #fff; }
.footer-jos {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-block: 1.25rem;
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: space-between;
  font-size: .8125rem; color: rgba(255,255,255,.45);
}
.footer-jos a:hover { color: #fff; }

/* =========================================================================
   ANIMAȚII DE INTRARE
   ========================================================================= */
.apare { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1); }
.apare.vizibil { opacity: 1; transform: none; }
.apare[data-intarziere="1"] { transition-delay: .1s; }
.apare[data-intarziere="2"] { transition-delay: .2s; }
.apare[data-intarziere="3"] { transition-delay: .3s; }
.apare[data-intarziere="4"] { transition-delay: .4s; }
.apare[data-intarziere="5"] { transition-delay: .5s; }

.din-stanga { opacity: 0; transform: translateX(-40px); transition: opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1); }
.din-stanga.vizibil { opacity: 1; transform: none; }
.din-dreapta { opacity: 0; transform: translateX(40px); transition: opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1); }
.din-dreapta.vizibil { opacity: 1; transform: none; }

/* Intrare laterală amplă — textul vine de departe, ca în secțiunea de
   carpentrie a site-ului model. Se folosește doar în interiorul unui container
   cu `overflow: clip`, altfel împinge pagina pe orizontală. */
.vine-dreapta, .vine-stanga { opacity: 0; will-change: transform, opacity; }
.vine-dreapta.vizibil { animation: vine-dreapta .95s cubic-bezier(.22,1,.36,1) both; }
.vine-stanga.vizibil  { animation: vine-stanga 1.05s cubic-bezier(.22,1,.36,1) .12s both; }
@keyframes vine-dreapta {
  0%  { opacity: 0; transform: translateX(680px); }
  25% { opacity: 1; }
  to  { opacity: 1; transform: none; }
}
@keyframes vine-stanga {
  0%  { opacity: 0; transform: translateX(-680px); }
  25% { opacity: 1; }
  to  { opacity: 1; transform: none; }
}

/* Cădere cu ricoșeu — pentru un cuvânt de titlu sau pentru logo-ul din hero. */
.cade { opacity: 0; }
.cade.vizibil { animation: cade .85s cubic-bezier(.3,.9,.3,1) both; }
@keyframes cade {
  0%   { opacity: 0; transform: translateY(-130px); }
  55%  { opacity: 1; transform: translateY(14px); }
  72%  { transform: translateY(-8px); }
  86%  { transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Varianta scurtă, pentru un singur cuvânt dintr-un titlu. */
.cuvant-cade { display: inline-block; opacity: 0; }
.cuvant-cade.vizibil { animation: cuvant-cade .42s cubic-bezier(.3,.9,.3,1) .61s both; }
@keyframes cuvant-cade {
  0%   { opacity: 0; transform: translateY(-2em); }
  45%  { opacity: 1; transform: translateY(0); }
  62%  { transform: translateY(-.22em); }
  78%  { transform: translateY(0); }
  89%  { transform: translateY(-.07em); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .apare, .din-stanga, .din-dreapta,
  .vine-stanga, .vine-dreapta, .cade, .cuvant-cade, .harta-punct { opacity: 1; transform: none; }
  .stacco .stacco-banda { transform: skewY(-1deg); }
  html { scroll-behavior: auto; }
}

/* =========================================================================
   CUM LUCRĂM — traseul lucrării
   Șase etape, 168 de cuvinte. În varianta pe verticală ocupau 900px de derulare
   pentru atât text, ceea ce e un schimb prost. Acum sunt o șină orizontală pe
   care apeși, cu un singur panou deschis: aceleași informații în a treia parte
   din înălțime, și cu un motiv să te joci cu ele.
   Fără JS rămân toate panourile deschise — se pierde compactarea, nu conținutul.
   ========================================================================= */
.traseu { margin-top: 3.5rem; }

/* ---- șina cu etapele ---- */
.traseu-sina {
  position: relative;
  display: grid;
  gap: .5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 720px)  { .traseu-sina { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .traseu-sina { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; } }

/* linia continuă pe care stau marcajele, doar când etapele sunt pe un rând */
@media (min-width: 1040px) {
  .traseu-sina::before {
    content: ;
    position: absolute;
    left: 8.33%; right: 8.33%; top: .95rem;
    height: 2px;
    background: linear-gradient(90deg, var(--accent-dk) 0%, var(--accent) 100%);
  }
}

.traseu-nod {
  position: relative;
  display: grid; justify-items: start; gap: .6rem;
  padding: .35rem .75rem .9rem 0;
  background: none; border: 0; cursor: pointer;
  font: inherit; text-align: left;
}
@media (min-width: 1040px) { .traseu-nod { justify-items: center; text-align: center; padding-inline: .5rem; } }

.traseu-marcaj {
  width: .85rem; height: .85rem;
  transform: rotate(45deg);
  background: var(--ink);
  border: 2px solid var(--accent);
  transition: background-color .25s ease, transform .25s ease;
}
@media (min-width: 1040px) { .traseu-marcaj { margin-top: .55rem; } }

.traseu-nume {
  font-size: .8125rem; font-weight: 600; line-height: 1.3;
  color: rgba(255,255,255,.5);
  transition: color .25s ease;
  text-wrap: balance;
}
.traseu-nod:hover .traseu-nume { color: #fff; }
.traseu-nod:hover .traseu-marcaj { transform: rotate(45deg) scale(1.15); }

.traseu-nod[aria-selected=true] .traseu-marcaj { background: var(--accent); transform: rotate(45deg) scale(1.2); }
.traseu-nod[aria-selected=true] .traseu-nume { color: #fff; }
.traseu-nod:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---- panoul etapei ---- */
.traseu-panouri {
  margin-top: 2rem;
  border-top: 1px solid rgba(255,255,255,.12);
  padding-top: 2rem;
}
.traseu-panou { max-width: 46rem; }
/* când JS ascunde celelalte panouri, cel rămas intră lin */
.traseu-panou:not([hidden]) { animation: panou-intra .35s cubic-bezier(.22,1,.36,1) both; }
@keyframes panou-intra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .traseu-panou:not([hidden]) { animation: none; } }

.traseu-panou + .traseu-panou { margin-top: 2rem; }
.traseu-panou h3 {
  font-size: clamp(1.125rem, 1rem + .5vw, 1.5rem);
  letter-spacing: -.01em; color: #fff; margin-bottom: .85rem;
}
.traseu-panou > p { font-size: 1rem; line-height: 1.75; color: rgba(255,255,255,.62); }

/* ce iese din etapă — partea care contează pentru cel care urmărește graficul */
.etapa-predare {
  margin-top: 1.1rem;
  padding-left: 1.2rem;
  position: relative;
  font-size: .9375rem; line-height: 1.6; color: rgba(255,255,255,.85);
}
.etapa-predare::before {
  content: →;
  position: absolute; left: 0; top: 0;
  color: var(--accent); font-weight: 700;
}
.etapa-predare span {
  display: block;
  font-size: .65rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .2rem;
}

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

/* antetul unei pagini: fotografie, voal, eyebrow, titlu, intro */
.antet-pagina {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(420px, 62vh, 620px);
  overflow: hidden;
  background: var(--ink-soft);
}
.antet-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.antet-voal {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, var(--ink) 0%, rgba(29,29,27,.92) 26%, rgba(29,29,27,.6) 48%, rgba(29,29,27,.25) 68%, transparent 88%),
    linear-gradient(to bottom, rgba(29,29,27,.85) 0%, rgba(29,29,27,.25) 30%, transparent 55%);
}
.antet-text { position: relative; z-index: 2; padding-block: 8rem 3.5rem; }
.antet-text h1 { max-width: 20ch; }
.antet-text .text-lead { margin-top: 1.75rem; color: rgba(255,255,255,.82); text-align: left; }

/* firimituri de pâine */
.firimituri {
  border-bottom: 1px solid rgba(255,255,255,.1);
  padding-block: .9rem;
  font-size: .8125rem;
  color: rgba(255,255,255,.5);
}
.firimituri a { color: rgba(255,255,255,.7); transition: color .2s ease; }
.firimituri a:hover { color: var(--accent); }
.firimituri-sep { margin-inline: .6rem; opacity: .4; }
.firimituri [aria-current] { color: var(--accent); }

/* coloană de text pe lățime confortabilă de citit */
.text-pagina { max-width: 58rem; }
.text-pagina .text-lead + .text-lead { margin-top: 1.25rem; }
.text-pagina a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.text-pagina a:hover { color: #fff; }

/* carduri de serviciu */
.carduri-servicii {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
}
@media (min-width: 640px)  { .carduri-servicii { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .carduri-servicii { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.card-serviciu {
  position: relative;
  display: block;
  min-width: 0;
  background: var(--ink);
  padding: 1.75rem 1.5rem 3rem;
  transition: background-color .3s ease;
}
.card-serviciu:hover { background: var(--ink-soft); }
.card-serviciu::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px; background: var(--accent);
  transform: scaleY(0); transform-origin: top;
  transition: transform .35s cubic-bezier(.22,1,.36,1);
}
.card-serviciu:hover::before { transform: scaleY(1); }
.card-serviciu h3 { font-size: 1.0625rem; line-height: 1.35; transition: color .25s ease; }
.card-serviciu:hover h3 { color: var(--accent); }
.card-serviciu p { margin-top: .5rem; font-size: .875rem; line-height: 1.65; color: rgba(255,255,255,.5); }
.card-sageata {
  position: absolute; left: 1.5rem; bottom: 1.25rem;
  color: var(--accent); font-weight: 700;
  transition: transform .25s ease;
}
.card-serviciu:hover .card-sageata { transform: translateX(5px); }

/* pagina de contact */
.contact-grid { display: grid; gap: 3rem; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr 1.15fr; gap: 4rem; } }

.contact-lista { margin-top: 2rem; border-top: 1px solid rgba(255,255,255,.12); }
.contact-lista li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,.12);
  padding-block: 1.125rem;
}
.contact-eticheta {
  flex: 0 0 6.5rem;
  font-size: .7rem; font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; color: rgba(255,255,255,.45);
}
.contact-valoare { font-size: 1.125rem; font-weight: 600; transition: color .2s ease; }
a.contact-valoare:hover { color: var(--accent); }
.contact-lipsa { color: rgba(255,255,255,.35); font-weight: 400; font-style: italic; }

.lista-liniute strong { color: rgba(255,255,255,.9); font-weight: 600; }

@media (max-width: 640px) {
  .antet-text { padding-block: 7rem 2.5rem; }
}

/* eticheta de limbă fără pagină încă */
.text-pagina code {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: .9em;
  background: rgba(255,255,255,.08);
  padding: .1em .4em;
}

/* =========================================================================
   FORMULAR DE CERERE
   ========================================================================= */
.formular-cadru { display: grid; gap: 3rem; }
@media (min-width: 950px) { .formular-cadru { grid-template-columns: 1fr 1.35fr; gap: 4.5rem; } }

.formular-puncte { margin-top: 2rem; display: grid; gap: .875rem; }
.formular-puncte li {
  display: flex; gap: .75rem; font-size: .9375rem; line-height: 1.6;
  color: rgba(255,255,255,.62);
}
.formular-puncte li::before {
  content: ""; flex: 0 0 auto; margin-top: .65rem;
  width: 1.25rem; height: 1px; background: var(--accent);
}

.formular { display: grid; gap: 1.5rem; }
.camp-rand { display: grid; gap: 1.5rem; }
@media (min-width: 620px) { .camp-rand { grid-template-columns: 1fr 1fr; } }

.camp { display: grid; gap: .5rem; min-width: 0; }
.camp label { font-size: .8125rem; font-weight: 600; letter-spacing: .02em; color: rgba(255,255,255,.75); }
.oblig { color: var(--accent); }
.camp-optional { font-weight: 400; color: rgba(255,255,255,.35); }

.camp input[type="text"],
.camp input[type="tel"],
.camp input[type="email"],
.camp select,
.camp textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: #fff;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 0;
  padding: .8rem .95rem;
  transition: border-color .2s ease, background-color .2s ease;
  -webkit-appearance: none;
  appearance: none;
}
.camp textarea { resize: vertical; min-height: 7rem; line-height: 1.6; }
.camp select {
  background-image: linear-gradient(45deg, transparent 50%, var(--accent) 50%),
                    linear-gradient(135deg, var(--accent) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.75rem;
}
.camp select option { background: var(--ink); color: #fff; }
.camp input::placeholder, .camp textarea::placeholder { color: rgba(255,255,255,.3); }
.camp input:hover, .camp select:hover, .camp textarea:hover { border-color: rgba(255,255,255,.3); }
.camp input:focus-visible, .camp select:focus-visible, .camp textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  background: rgba(255,255,255,.06);
}

.camp-eroare { display: none; font-size: .8125rem; color: #ff8a6b; }
.camp.eroare input, .camp.eroare select, .camp.eroare textarea { border-color: #ff6b45; }
.camp.eroare .camp-eroare { display: block; }

.camp-acord label {
  display: flex; align-items: flex-start; gap: .75rem;
  font-size: .875rem; font-weight: 400; line-height: 1.6;
  color: rgba(255,255,255,.62); cursor: pointer;
}
.camp-acord input[type="checkbox"] {
  flex: 0 0 auto; margin-top: .2rem;
  width: 1.15rem; height: 1.15rem;
  accent-color: var(--accent);
  cursor: pointer;
}

.formular-jos { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; margin-top: .5rem; }
.formular-nota { font-size: .8125rem; color: rgba(255,255,255,.4); }
.formular button[type="submit"][disabled] { opacity: .5; cursor: progress; }

/* Capcana pentru roboți. Scoasă din pagină, nu `display:none`: unii roboți sar
   peste câmpurile ascunse așa, dar îl completează pe acesta — iar FormSubmit
   aruncă trimiterea. Pentru om e invizibil și nu poate fi atins cu tastatura. */
.capcana {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}

.formular-raspuns {
  border-left: 2px solid var(--accent);
  background: rgba(255,255,255,.04);
  padding: 1.25rem 1.375rem;
  font-size: .9375rem;
  line-height: 1.7;
  color: rgba(255,255,255,.8);
}
.formular-raspuns strong { color: #fff; display: block; margin-bottom: .4rem; font-size: 1rem; }
.formular-raspuns a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.formular-raspuns .btn { margin-top: 1rem; }
.formular-raspuns pre {
  margin-top: 1rem; padding: 1rem;
  background: rgba(0,0,0,.35);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: .8125rem; line-height: 1.6; color: rgba(255,255,255,.75);
  white-space: pre-wrap; word-break: break-word;
  max-height: 16rem; overflow-y: auto;
}

/* =========================================================================
   SELECTOR DE LIMBĂ
   ========================================================================= */
.limba { position: relative; }

/* Butonul poartă glob + codul limbii + săgeată, pe chenar portocaliu. Înainte
   erau două litere fără contur, pe care omul venit pe site nu le citea ca pe un
   comutator de limbă — și nu se apăsa pe ele. */
.limba-buton {
  display: inline-flex; align-items: center; gap: .4rem;
  cursor: pointer;
  font: inherit; font-size: .75rem; font-weight: 700; letter-spacing: .08em;
  color: #fff;
  background: rgba(240,78,36,.14);
  border: 1px solid rgba(240,78,36,.6);
  padding: .4rem .6rem;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.limba-glob { flex: none; color: var(--accent); transition: color .2s ease; }
.limba-buton:hover, .limba-buton[aria-expanded="true"] {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.limba-buton:hover .limba-glob, .limba-buton[aria-expanded="true"] .limba-glob { color: #fff; }
.limba-sageata { font-size: .7rem; color: var(--accent); transition: transform .2s ease, color .2s ease; }
.limba-buton:hover .limba-sageata, .limba-buton[aria-expanded="true"] .limba-sageata { color: #fff; }
.limba-buton[aria-expanded="true"] .limba-sageata { transform: rotate(180deg); }

.limba-panou {
  position: absolute; right: 0; top: calc(100% + .6rem); z-index: 60;
  width: 22rem; max-width: calc(100vw - 2rem);
  /* Pe telefon lista pe o coloană e mai înaltă decât ecranul: se derulează în
     panou, nu pe sub marginea de jos. */
  max-height: calc(100dvh - 7rem); overflow-y: auto; overscroll-behavior: contain;
  border: 1px solid rgba(240,78,36,.4);
  background: rgba(29,29,27,.97);
  backdrop-filter: blur(6px);
  padding: 1rem 1.1rem 1.1rem;
}
.limba-eticheta {
  font-size: .65rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .75rem;
}

.limba-lista { display: grid; grid-template-columns: 1fr 1fr; gap: .15rem .5rem; }
.limba-lista a {
  display: flex; align-items: baseline; gap: .55rem;
  padding: .4rem .5rem;
  font-size: .9375rem; color: rgba(255,255,255,.8);
  border-left: 2px solid transparent;
  transition: color .2s ease, background-color .2s ease, border-color .2s ease;
  cursor: pointer;
}
.limba-lista a b {
  flex: none; width: 1.7rem;
  font-size: .6875rem; font-weight: 700; letter-spacing: .06em;
  color: rgba(255,255,255,.4);
  transition: color .2s ease;
}
.limba-lista a:hover { color: #fff; background: rgba(240,78,36,.12); border-left-color: var(--accent); }
.limba-lista a:hover b { color: var(--accent); }
.limba-lista .limba-activ { color: var(--accent); font-weight: 600; border-left-color: var(--accent); }
.limba-lista .limba-activ b { color: var(--accent); }

.limba-nota {
  margin-top: .9rem; padding-top: .75rem;
  border-top: 1px solid rgba(255,255,255,.1);
  font-size: .75rem; line-height: 1.5; color: rgba(255,255,255,.4);
}
@media (max-width: 520px) { .limba-panou { width: 17rem; } .limba-lista { grid-template-columns: 1fr; } }

/* =========================================================================
   PROIECTE ȘI ARTICOLE (conținutul adus de pe blog)
   ========================================================================= */

/* ---- filtrele de pe paginile de listă ---- */
.filtre {
  display: grid; gap: 1.5rem;
  padding-bottom: 2.5rem; margin-bottom: 3rem;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.filtru { display: grid; gap: .6rem; }
.filtru-titlu {
  font-size: .65rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.45);
}
.filtru-butoane { display: flex; flex-wrap: wrap; gap: .4rem; }
.filtru-buton {
  font: inherit; font-size: .8125rem; font-weight: 600;
  color: rgba(255,255,255,.7); cursor: pointer;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.14);
  padding: .4rem .8rem;
  transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}
.filtru-buton:hover { color: #fff; border-color: rgba(240,78,36,.6); }
.filtru-buton.este-activ { color: #fff; background: var(--accent); border-color: var(--accent); }
.filtre-rezultat { font-size: .8125rem; color: rgba(255,255,255,.45); }
.filtre-gol { margin-top: 2rem; font-size: 1rem; color: rgba(255,255,255,.55); }

/* ---- grila de cartonașe ---- */
.grila-blog { display: grid; gap: 2rem; }
@media (min-width: 640px)  { .grila-blog { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .grila-blog { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* `align-content: start` din același motiv ca la pașii de pe prima pagină:
   fără el, cartonașele întinse își împrăștie rândurile pe verticală. */
.card-blog {
  display: grid; grid-template-rows: auto 1fr; align-content: start;
  min-width: 0;
  background: var(--ink-soft);
  border: 1px solid rgba(255,255,255,.08);
  transition: border-color .3s ease, transform .3s cubic-bezier(.22,1,.36,1);
}
.card-blog:hover { border-color: rgba(240,78,36,.55); transform: translateY(-4px); }
.card-blog-foto { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ink-soft-2); }
.card-blog-foto picture, .card-blog-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.card-blog-foto img { transition: transform .5s cubic-bezier(.22,1,.36,1); }
.card-blog:hover .card-blog-foto img { transform: scale(1.04); }
.card-blog-gol { width: 100%; height: 100%; background: linear-gradient(135deg, var(--ink-soft-2), var(--ink)); }
.card-blog-text { display: grid; align-content: start; gap: .6rem; padding: 1.5rem 1.5rem 1.75rem; }
.card-blog-sus {
  font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent);
}
.card-blog h3 { font-size: 1.0625rem; line-height: 1.35; letter-spacing: -.01em; color: #fff; text-wrap: balance; }
.card-blog-rez { font-size: .9375rem; line-height: 1.65; color: rgba(255,255,255,.55); }
.card-blog-data { font-size: .8125rem; color: rgba(255,255,255,.35); }

/* ---- fișa de proiect ---- */
.fisa-proiect {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.1);
  margin-bottom: 3.5rem;
}
.fisa-proiect > div { background: var(--ink); padding: 1.1rem 1.25rem; }
.fisa-proiect dt {
  font-size: .65rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.4);
  margin-bottom: .35rem;
}
.fisa-proiect dd { margin: 0; font-size: 1rem; font-weight: 600; color: #fff; }

/* ---- corpul articolului ----
   Lățime de citit, nu de ecran: peste ~68 de caractere pe rând ochiul pierde
   începutul rândului următor. */
.text-articol { max-width: 46rem; }
.text-articol-data {
  font-size: .8125rem; color: rgba(255,255,255,.4);
  padding-bottom: 1.5rem; margin-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.text-articol p { font-size: 1.0625rem; line-height: 1.8; color: rgba(255,255,255,.72); }
.text-articol p + p { margin-top: 1.4rem; }
.text-articol strong { color: #fff; font-weight: 600; }
.text-articol h2 {
  font-size: clamp(1.35rem, 1.1rem + .8vw, 1.85rem); line-height: 1.25; letter-spacing: -.02em;
  color: #fff; text-wrap: balance;
  margin-top: 3.25rem; margin-bottom: 1.1rem;
}
.text-articol h3 {
  font-size: 1.125rem; letter-spacing: -.01em; color: #fff;
  margin-top: 2.25rem; margin-bottom: .75rem;
}
.text-articol ul, .text-articol ol { margin: 1.4rem 0 1.4rem 0; display: grid; gap: .6rem; }
.text-articol li {
  position: relative; padding-left: 1.5rem;
  font-size: 1.0625rem; line-height: 1.7; color: rgba(255,255,255,.72);
}
.text-articol ul li::before {
  content: ""; position: absolute; left: 0; top: .75em;
  width: .6rem; height: 1px; background: var(--accent);
}
.text-articol ol { counter-reset: pas; }
.text-articol ol li { counter-increment: pas; }
.text-articol ol li::before {
  content: counter(pas) "."; position: absolute; left: 0; top: 0;
  font-weight: 700; color: var(--accent); font-size: .9375rem;
}
.text-articol a { color: var(--accent); text-decoration: underline; text-underline-offset: .2em; }
.text-articol a:hover { color: #fff; }
.text-articol hr { border: 0; border-top: 1px solid rgba(255,255,255,.12); margin: 2.5rem 0; }

.text-articol table { width: 100%; border-collapse: collapse; margin: 2rem 0; font-size: .9375rem; }
.text-articol th, .text-articol td {
  border: 1px solid rgba(255,255,255,.14);
  padding: .7rem .9rem; text-align: left; vertical-align: top;
  color: rgba(255,255,255,.72);
}
.text-articol th { color: #fff; font-weight: 600; background: rgba(255,255,255,.04); }
/* Tabelele nu se pot îngusta oricât: pe telefon se derulează în cutia lor,
   nu împing pagina în lateral. */
.text-articol .tabel-cutie { overflow-x: auto; }

.blog-foto { margin: 2.5rem 0; }
.blog-foto img, .blog-foto picture { display: block; width: 100%; height: auto; }
.blog-foto figcaption {
  margin-top: .75rem;
  font-size: .8125rem; line-height: 1.6; color: rgba(255,255,255,.45);
}
.text-articol > picture { display: block; margin: 2.5rem 0; }
.text-articol > picture img { width: 100%; height: auto; }

.blog-video { position: relative; aspect-ratio: 16 / 9; margin: 2.5rem 0; background: #000; }
.blog-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* `.card-blog` e display:grid, care bate regula implicită a atributului hidden.
   Fără linia asta filtrele ascund cartonașele… vizibil. */
.card-blog[hidden] { display: none; }

/* Coloana de citit stă centrată pe ecran lat. Containerul site-ului e
   asimetric dinadins — așa arată paginile de prezentare — dar la un text lung
   asimetria lasă un gol mare în dreapta și textul pare împins într-un colț. */
.text-articol { margin-inline: auto; }

/* Descrierile de sub fotografii rămân în cod, pentru motoarele de căutare și
   pentru cititoarele de ecran, dar nu se mai văd: erau nume de fișier și
   frânturi rămase din WordPress, care nu spuneau nimic și stricau pagina. */
.blog-foto figcaption {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Bara e fixată sus, așa că o ancoră care sare la formular ar pune titlul lui
   exact sub ea. Aceeași marjă ca la celelalte ancore din pagină. */
.formular-sectiune { scroll-margin-top: 7rem; }

/* =========================================================================
   BANNER DE COOKIES ȘI VIDEOCLIPURILE AMÂNATE
   ========================================================================= */
.cookie {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 80;
  padding: .9rem 1.25rem calc(.9rem + env(safe-area-inset-bottom, 0px));
  background: rgba(20,20,19,.97);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(240,78,36,.7);
  /* Fără `both`: cu umplere, bannerul rămâne tras în jos, în afara ecranului,
     dacă animația nu apucă să pornească. Așa, în cel mai rău caz apare direct,
     fără alunecare. */
  animation: cookie-intra .45s cubic-bezier(.22,1,.36,1);
}
@keyframes cookie-intra { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .cookie { animation: none; } }

.cookie-cadru {
  max-width: var(--max); margin-inline: auto;
  display: grid; gap: 1rem; align-items: center;
}
@media (min-width: 860px) { .cookie-cadru { grid-template-columns: 1fr auto; gap: 2.5rem; } }

.cookie-titlu {
  font-size: .65rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.45); margin-bottom: .35rem;
}
.cookie-text p { font-size: .8125rem; line-height: 1.6; color: rgba(255,255,255,.65); max-width: 54rem; }
.cookie-text a { color: var(--accent); text-decoration: underline; text-underline-offset: .2em; }
.cookie-text a:hover { color: #fff; }

.cookie-butoane { display: flex; flex-wrap: wrap; gap: .75rem; }
/* Butoanele oblice ale site-ului sunt mari pentru un banner; aici le strângem,
   dar refuzul rămâne la fel de vizibil ca acceptul — nu ascuns într-un link. */
.cookie-butoane .btn { padding: .6rem 1.3rem; font-size: .75rem; }
/* Refuzul: aceeași mărime și același loc ca acceptul, cum cere legea, dar cu
   un fundal translucid în loc de contur gol — altfel arăta ca o casetă goală
   lipită lângă butonul portocaliu. */
.cookie-butoane .btn--gol {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.2);
  color: rgba(255,255,255,.92);
}
.cookie-butoane .btn--gol:hover {
  background: rgba(255,255,255,.15);
  border-color: rgba(255,255,255,.45);
  color: #fff;
}

/* Locul videoclipului, cât timp nu s-a apăsat pe el. */
.video-start {
  position: absolute; inset: 0;
  display: grid; place-content: center; justify-items: center; gap: .6rem;
  width: 100%; padding: 1.5rem;
  font: inherit; text-align: center; cursor: pointer;
  color: #fff;
  background: linear-gradient(135deg, var(--ink-soft) 0%, #16160f 100%);
  border: 1px solid rgba(255,255,255,.1);
  transition: border-color .25s ease;
}
.video-start:hover { border-color: rgba(240,78,36,.6); }
.video-start-ico {
  width: 3.5rem; height: 3.5rem;
  display: grid; place-items: center;
  border: 2px solid var(--accent); border-radius: 9999px;
  transition: background-color .25s ease, transform .25s ease;
}
/* Triunghiul de play, desenat din chenare — fără fișier, fără font. */
.video-start-ico::after {
  content: "";
  border-left: 1rem solid var(--accent);
  border-block: .6rem solid transparent;
  margin-left: .25rem;
  transition: border-color .25s ease;
}
.video-start:hover .video-start-ico { background: var(--accent); transform: scale(1.06); }
.video-start:hover .video-start-ico::after { border-left-color: #fff; }
.video-start-text { font-size: .9375rem; font-weight: 600; }
.video-start-nota { font-size: .8125rem; line-height: 1.5; color: rgba(255,255,255,.5); max-width: 24rem; }

/* Pe ecran tactil, un buton de 35px e sub degetul mediu. Filtrele și lista de
   limbi sunt singurele ținte mici din site, așa că le creștem doar acolo. */
@media (max-width: 860px) {
  .filtru-buton { padding: .65rem 1rem; }
  .limba-lista a { padding: .6rem .5rem; }
}

/* Adresa din subsol nu e o legătură — nu avem încă fișă de Google Maps la care
   să trimită. Se aliniază însă cu telefonul și cu emailul de sub ea. */
.footer-adresa { display: block; color: rgba(255,255,255,.55); }

/* Paginile juridice: text lung, citit rar, deci contează lățimea și aerul
   dintre secțiuni mai mult decât orice efect. */
.text-legal { max-width: 46rem; margin-inline: auto; }
.legal-intro {
  padding-bottom: 1.75rem; margin-bottom: .5rem;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.legal-titlu {
  font-size: clamp(1.3rem, 1.05rem + .8vw, 1.75rem);
  margin-top: 3.25rem; margin-bottom: 1.1rem;
}
.text-legal .lista-liniute { margin-top: 1rem; }
.text-legal code {
  font-size: .875em; padding: .1em .35em;
  background: rgba(255,255,255,.07); color: #fff;
}
.text-legal a { color: var(--accent); text-decoration: underline; text-underline-offset: .2em; }
.text-legal a:hover { color: #fff; }



/* =========================================================================
   CARIERE
   ========================================================================= */
.cariera-grila { display: grid; gap: 1px; }
@media (min-width: 700px)  { .cariera-grila { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .cariera-grila { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.cariera-rand {
  background: var(--ink); padding: 1.75rem 1.75rem 2rem;
  display: grid; align-content: start; gap: .7rem;
  transition: background-color .3s ease;
}
.cariera-rand:hover { background: var(--ink-soft); }
.cariera-rand h3 { font-size: 1.0625rem; letter-spacing: -.01em; color: #fff; text-wrap: balance; }
.cariera-rand p { font-size: .9375rem; line-height: 1.7; color: rgba(255,255,255,.58); }

/* Adresa de email stă la vedere, nu sub un buton: până când formularul are un
   server care să primească fișiere, ea e calea sigură pentru un CV. */
.cariera-email {
  margin-top: 1.5rem; font-size: 1.0625rem; color: rgba(255,255,255,.6);
}
.cariera-email a {
  color: var(--accent); font-weight: 600;
  text-decoration: underline; text-underline-offset: .25em;
}
.cariera-email a:hover { color: #fff; }

/* Câmpul de fișier: butonul propriu al browserului e urât și diferă de la unul
   la altul, așa că îl îmbrăcăm ca pe celelalte câmpuri. */
.camp input[type="file"] {
  width: 100%; font: inherit; font-size: .9375rem; color: rgba(255,255,255,.72);
  background: rgba(255,255,255,.04);
  border: 1px dashed rgba(255,255,255,.22);
  padding: .8rem .95rem; cursor: pointer;
}
.camp input[type="file"]:hover { border-color: rgba(240,78,36,.6); }
.camp input[type="file"]::file-selector-button {
  font: inherit; font-size: .8125rem; font-weight: 600;
  margin-right: .9rem; padding: .4rem .9rem; cursor: pointer;
  color: #fff; background: var(--accent); border: 0;
}

/* =========================================================================
   BANDĂ DE ACȚIUNE ȘI BUTONUL DE APEL
   ========================================================================= */
/* Deliberat mai potolită decât chemarea mare de la subsol: apare la mijlocul
   paginii, unde omul încă citește, și n-are voie să-i taie firul. */
.banda-actiune {
  background: var(--ink-soft);
  border-block: 1px solid rgba(240,78,36,.35);
  padding-block: 2rem;
  margin-block: 3.5rem;
}
.banda-actiune-cadru {
  display: grid; gap: 1.25rem; align-items: center;
}
@media (min-width: 880px) {
  .banda-actiune-cadru { grid-template-columns: minmax(0, 1fr) auto; gap: 2.5rem; }
}
.banda-actiune-text {
  font-size: clamp(1.0625rem, .95rem + .5vw, 1.375rem);
  line-height: 1.4; font-weight: 600; color: #fff; text-wrap: balance;
  max-width: 34rem;
}
.banda-actiune-fapte { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }

/* Telefonul înaintea butonului, și mai mare: cine are un termen sună. */
.banda-actiune-tel {
  font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em;
  color: var(--accent);
  border-bottom: 2px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.banda-actiune-tel:hover { color: #fff; border-bottom-color: var(--accent); }

/* Butonul fix de apel, doar pe telefon. Apare după ce omul a trecut de hero —
   până atunci butoanele din hero sunt oricum la vedere. */
.apel-fix {
  position: fixed;
  right: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  z-index: 45;
  display: none;
  align-items: center; gap: .5rem;
  padding: .85rem 1.25rem;
  background: var(--accent); color: #fff;
  font-size: .9375rem; font-weight: 700; letter-spacing: .02em;
  box-shadow: 0 8px 28px rgba(0,0,0,.45);
  transform: translateY(150%);
  transition: transform .35s cubic-bezier(.22,1,.36,1);
}
.apel-fix svg { flex: none; }
@media (max-width: 900px) { .apel-fix { display: inline-flex; } }
.apel-fix.se-vede { transform: none; }
/* Cu meniul deschis butonul ar sta peste linkuri. */
.meniu-deschis .apel-fix.se-vede { transform: translateY(150%); }
/* Cât timp bannerul de cookies e pe ecran, butonul urcă peste el. */
.apel-fix.peste-banner { bottom: calc(1rem + 14rem); }
@media (prefers-reduced-motion: reduce) { .apel-fix { transition: none; } }

/* O fotografie de proiect care nu face parte dintr-o pereche înainte/după.
   Aceleași proporții ca ale comparatorului de lângă ea, ca rândul să rămână
   drept. */
.media-proiect {
  position: relative; width: 100%; aspect-ratio: 5 / 3;
  overflow: hidden; background: var(--ink-soft);
}
.media-proiect picture { display: contents; }
.media-proiect img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s cubic-bezier(.22,1,.36,1);
}
.media-proiect:hover img { transform: scale(1.03); }