/* =========================================================
   EUROCONSULT — sistem de design
   Albastru dominant, responsive, mobile-first
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root {
  /* Albastru — derivat din sigla EUROCONSULT (#294A85) */
  --navy-950: #061529;
  --navy-900: #0A1E38;
  --navy-800: #0F2C4F;
  --navy-700: #16406E;
  --brand-600: #294A85;
  --brand-500: #2F63B8;
  --brand-400: #3B82F6;
  --accent-300: #6BA5FF;
  --sky-100: #DCE9FB;
  --sky-50: #EEF4FD;

  --ink: #0C1B2A;
  --ink-soft: #3D4F63;
  --muted: #6B7C91;
  --line: #DDE5EF;
  --line-soft: #EDF2F8;
  --surface: #FFFFFF;
  --surface-alt: #F7FAFD;

  --gold: #D9A441;

  /* Tipografie */
  --font-display: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Ritm */
  --wrap: 1200px;
  --wrap-narrow: 780px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(4rem, 9vw, 7.5rem);

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;

  --shadow-sm: 0 1px 2px rgba(10, 30, 56, .06), 0 2px 8px rgba(10, 30, 56, .04);
  --shadow: 0 4px 12px rgba(10, 30, 56, .07), 0 16px 40px rgba(10, 30, 56, .07);
  --shadow-lg: 0 8px 24px rgba(10, 30, 56, .10), 0 32px 64px rgba(10, 30, 56, .12);

  --ease: cubic-bezier(.22, .61, .36, 1);
  --header-h: 76px;
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* Ascunderea prin atributul hidden trebuie sa invinga orice display din clase
   (altfel filtrul galeriei seteaza hidden, dar elementul ramane vizibil). */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink-soft);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-wrap: break-word;
}
img, picture, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 .6em;
  font-weight: 800;
  text-wrap: balance;
}
h1 { font-size: clamp(2.25rem, 5.2vw, 3.75rem); }
h2 { font-size: clamp(1.85rem, 3.8vw, 2.75rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 700; }
h4 { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0 0 1.15em; text-wrap: pretty; }
a { color: var(--brand-500); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--brand-400); }
ul, ol { margin: 0 0 1.15em; padding-left: 1.3em; }
li { margin-bottom: .45em; }
strong, b { color: var(--ink); font-weight: 650; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }
:focus-visible { outline: 3px solid var(--brand-400); outline-offset: 3px; border-radius: 4px; }

/* ---------- 3. Layout ---------- */
.wrap { width: min(100% - (var(--gutter) * 2), var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - (var(--gutter) * 2), var(--wrap-narrow)); margin-inline: auto; }
.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.section--alt { background: var(--surface-alt); }
.section--navy { background: var(--navy-900); color: #C6D6E9; }
.section--navy h2, .section--navy h3, .section--navy h4 { color: #fff; }

.grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

/* ---------- 4. Elemente de tipografie ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-display);
  font-size: .78rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--brand-500); margin-bottom: 1rem;
}
.eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; border-radius: 2px; }
.section--navy .eyebrow { color: var(--accent-300); }
.lead { font-size: clamp(1.075rem, 1.7vw, 1.3rem); line-height: 1.65; color: var(--ink-soft); }
.section--navy .lead { color: #B9CDE4; }
.section-head { max-width: 62ch; margin-bottom: clamp(2.25rem, 5vw, 3.5rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }

/* ---------- 5. Butoane ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  font-family: var(--font-display); font-weight: 700; font-size: .975rem;
  letter-spacing: -0.01em;
  padding: .95rem 1.75rem; border-radius: 999px; border: 1.5px solid transparent;
  cursor: pointer; text-align: center; line-height: 1.2;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), background-color .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease);
}
.btn svg { width: 1.05em; height: 1.05em; flex: none; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--primary { background: var(--brand-500); color: #fff; box-shadow: 0 6px 18px rgba(47, 99, 184, .3); }
.btn--primary:hover { background: var(--brand-400); color: #fff; box-shadow: 0 10px 28px rgba(59, 130, 246, .38); }
.btn--ghost { border-color: rgba(255, 255, 255, .35); color: #fff; background: rgba(255, 255, 255, .06); }
.btn--ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .14); color: #fff; }
.btn--outline { border-color: var(--line); color: var(--ink); background: #fff; }
.btn--outline:hover { border-color: var(--brand-500); color: var(--brand-500); }
.btn--sm { padding: .65rem 1.2rem; font-size: .9rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--font-display); font-weight: 700; font-size: .95rem;
}
.link-arrow svg { width: 1.05em; height: 1.05em; transition: transform .25s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ---------- 6. Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  transition: background-color .3s var(--ease), box-shadow .3s var(--ease), height .3s var(--ease);
}
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(6, 21, 41, .55), rgba(6, 21, 41, 0));
  transition: opacity .3s var(--ease);
}
.site-header.is-solid { background: rgba(255, 255, 255, .92); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line), 0 6px 24px rgba(10, 30, 56, .06); }
.site-header.is-solid::before { opacity: 0; }
.header-inner {
  width: min(100% - (var(--gutter) * 2), var(--wrap)); margin-inline: auto;
  display: flex; align-items: center; gap: clamp(.6rem, 2vw, 1.5rem); min-width: 0;
}

/* Logo */
.logo { display: inline-flex; flex-direction: column; line-height: 1; flex: 0 1 auto; min-width: 0; }
.logo__mark { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.1rem, 4.2vw, 1.5rem); letter-spacing: -0.035em; color: #fff; white-space: nowrap; }
.logo__mark i { font-style: italic; font-weight: 900; }
.logo__mark span { font-weight: 700; letter-spacing: .01em; }
.logo__sub { font-size: .625rem; letter-spacing: .17em; text-transform: lowercase; color: rgba(255, 255, 255, .72); margin-top: .3rem; font-weight: 500; align-self: flex-end; }
.is-solid .logo__mark { color: var(--brand-600); }
.is-solid .logo__sub { color: var(--muted); }
.logo:hover { color: inherit; }

/* Navigatie */
.nav { margin-left: auto; display: flex; align-items: center; gap: .35rem; }
.nav a {
  font-family: var(--font-display); font-weight: 600; font-size: .95rem;
  color: rgba(255, 255, 255, .9); padding: .55rem .8rem; border-radius: 8px;
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.nav a:hover, .nav a[aria-current="page"] { color: #fff; background: rgba(255, 255, 255, .12); }
.is-solid .nav a { color: var(--ink-soft); }
.is-solid .nav a:hover, .is-solid .nav a[aria-current="page"] { color: var(--brand-500); background: var(--sky-50); }

.header-tools { display: flex; align-items: center; gap: .75rem; flex: none; }
.lang {
  display: flex; align-items: center; gap: .15rem;
  font-family: var(--font-display); font-size: .8rem; font-weight: 700;
  border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px; padding: .2rem;
}
.is-solid .lang { border-color: var(--line); }
.lang a { padding: .3rem .6rem; border-radius: 999px; color: rgba(255, 255, 255, .8); letter-spacing: .04em; }
.is-solid .lang a { color: var(--muted); }
.lang a[aria-current="true"] { background: var(--brand-500); color: #fff; }
.is-solid .lang a[aria-current="true"] { background: var(--brand-500); color: #fff; }

.nav-toggle {
  display: none; width: 44px; height: 44px; border: 0; background: transparent;
  cursor: pointer; align-items: center; justify-content: center; border-radius: 10px; padding: 0;
}
.nav-toggle span { display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px; position: relative; transition: background-color .2s var(--ease); }
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: inherit; border-radius: 2px; transition: transform .28s var(--ease), top .2s var(--ease); }
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after { top: 7px; }
.is-solid .nav-toggle span, .is-solid .nav-toggle span::before, .is-solid .nav-toggle span::after { background: var(--ink); }
.nav-open .nav-toggle span { background: transparent !important; }
.nav-open .nav-toggle span::before { top: 0; transform: rotate(45deg); background: var(--ink); }
.nav-open .nav-toggle span::after { top: 0; transform: rotate(-45deg); background: var(--ink); }

/* Sub 1080px meniul orizontal nu mai incape: trece pe hamburger */
@media (max-width: 1080px) {
  .nav-toggle { display: inline-flex; order: 3; }
  .header-tools { margin-left: auto; }
  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; padding: 1rem var(--gutter) 1.75rem;
    box-shadow: var(--shadow); border-top: 1px solid var(--line);
    max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: transform .25s var(--ease), opacity .25s var(--ease);
    margin-left: 0;
  }
  .nav-open .nav { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .nav a { color: var(--ink) !important; padding: .9rem .25rem; border-bottom: 1px solid var(--line-soft); border-radius: 0; font-size: 1.05rem; }
  .nav a:last-child { border-bottom: 0; }
  .nav-open .site-header { background: #fff; }
}

/* Pe telefon butonul CTA din bara de sus nu incape — apare in meniu */
@media (max-width: 720px) {
  .header-tools .btn { display: none; }
  .nav::after {
    content: ""; display: block; height: 0;
  }
  .nav .nav-cta {
    display: inline-flex !important; margin-top: 1.25rem; justify-content: center;
    color: #fff !important; border-bottom: 0 !important; font-size: .975rem;
  }
}
.nav .nav-cta { display: none; }

/* ---------- 7. Hero ---------- */
.hero {
  position: relative; display: flex; align-items: flex-end;
  min-height: min(88vh, 780px); padding-top: calc(var(--header-h) + 3rem); padding-bottom: 0;
  background: var(--navy-950); color: #fff; overflow: hidden; isolation: isolate;
}
/* <picture> nu trebuie sa creeze o cutie a lui: fotografia ramane copilul
   direct al containerului, ca inainte de trecerea la WebP */
picture { display: contents; }
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .62; filter: saturate(.92) contrast(1.02); }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    /* umbra care tine textul lizibil: groasa in stanga-jos, unde sta titlul,
       si subtire in dreapta-sus, ca fotografia sa se vada */
    linear-gradient(100deg, rgba(6, 21, 41, .93) 0%, rgba(8, 25, 47, .78) 34%,
                            rgba(10, 30, 56, .42) 62%, rgba(10, 30, 56, .30) 100%),
    linear-gradient(0deg, rgba(6, 21, 41, .88) 0%, rgba(6, 21, 41, .30) 42%, transparent 70%),
    radial-gradient(120% 90% at 12% 8%, rgba(47, 99, 184, .30), transparent 62%);
}
.hero__inner { width: min(100% - (var(--gutter) * 2), var(--wrap)); margin-inline: auto; padding-bottom: clamp(3rem, 7vw, 5.5rem); }
.hero__content { max-width: 46rem; }
.hero h1 { color: #fff; margin-bottom: 1.15rem; }
.hero h1 em { font-style: normal; color: var(--accent-300); }
.hero .lead { color: #C3D6EC; max-width: 44rem; margin-bottom: 2.25rem; }
.hero .eyebrow { color: var(--accent-300); }

/* Bara de statistici */
.stats {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--radius);
  overflow: hidden; margin-top: clamp(2.5rem, 6vw, 4rem);
}
@media (min-width: 1024px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 400px) { .stats { grid-template-columns: 1fr; } }
.stat { background: rgba(6, 21, 41, .5); backdrop-filter: blur(8px); padding: 1.5rem 1.4rem; }
.stat__num { font-family: var(--font-display); font-size: clamp(1.75rem, 3.4vw, 2.5rem); font-weight: 800; color: #fff; letter-spacing: -0.03em; line-height: 1; }
.stat__num small { font-size: .5em; font-weight: 700; margin-left: .12em; color: var(--accent-300); }
.stat__label { font-size: .85rem; color: #A9C1DC; margin-top: .5rem; line-height: 1.45; }
.section--alt .stats, .section .stats { background: var(--line); border-color: var(--line); margin-top: 0; }
.section--alt .stat, .section .stat { background: #fff; backdrop-filter: none; }
.section--alt .stat__num, .section .stat__num { color: var(--brand-600); }
.section--alt .stat__num small, .section .stat__num small { color: var(--brand-400); }
.section--alt .stat__label, .section .stat__label { color: var(--muted); }

/* ---------- 8. Page hero (pagini interioare) ---------- */
.page-hero {
  position: relative; background: var(--navy-900); color: #fff; isolation: isolate;
  padding-top: calc(var(--header-h) + clamp(3rem, 7vw, 5rem));
  padding-bottom: clamp(2.75rem, 6vw, 4.5rem);
  overflow: hidden;
}
.page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(100% 120% at 85% 0%, rgba(47, 99, 184, .45), transparent 60%);
}
.page-hero__bg { position: absolute; inset: 0; z-index: -2; }
.page-hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .42; filter: saturate(.85) brightness(1.02); }
.page-hero h1 { color: #fff; margin-bottom: .5rem; }
.page-hero .lead { color: #B9CDE4; max-width: 52rem; margin-bottom: 0; }
.breadcrumbs { font-size: .85rem; color: #8FA9C6; margin-bottom: 1.25rem; display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.breadcrumbs a { color: #B9CDE4; }
.breadcrumbs a:hover { color: #fff; }
.breadcrumbs span { opacity: .5; }

/* ---------- 9. Carduri ---------- */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.5rem, 2.5vw, 2rem);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  height: 100%; display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--sky-100); }

/* Cardul de serviciu cu fotografie in cap. Iconul se muta peste marginea
   fotografiei, ca sa lege cele doua zone. */
.card--foto { padding: 0; overflow: hidden; }
.card__foto { aspect-ratio: 16 / 9; overflow: hidden; background: var(--sky-50); }
.card__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.card--foto:hover .card__foto img { transform: scale(1.05); }
.card--foto .card__corp {
  padding: clamp(1.5rem, 2.5vw, 2rem);
  display: flex; flex-direction: column; flex: 1;
}
.card--foto .card__icon { margin-top: -3.1rem; position: relative; z-index: 1;
  background: var(--brand-500); color: #fff; border: 3px solid #fff; }
.card--foto .card__icon svg { color: #fff; }
.card__icon {
  width: 48px; height: 48px; border-radius: 12px; flex: none;
  display: grid; place-items: center; margin-bottom: 1.15rem;
  background: var(--sky-50); color: var(--brand-500);
}
.card__icon svg { width: 24px; height: 24px; }
.card h3 { margin-bottom: .5rem; }
.card p:last-child { margin-bottom: 0; }
.card__list { list-style: none; padding: 0; margin: .5rem 0 0; }
.card__list li { position: relative; padding-left: 1.6rem; margin-bottom: .55rem; font-size: .975rem; }
.card__list li::before {
  content: ""; position: absolute; left: 0; top: .58em;
  width: 7px; height: 7px; border-radius: 2px; background: var(--brand-400);
}
.card--flat { border: 0; background: var(--surface-alt); }
.card--flat:hover { transform: none; box-shadow: none; }

/* Pasi */
.steps { counter-reset: step; }
.step { position: relative; padding-top: 2.5rem; }
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  position: absolute; top: 0; left: 0;
  font-family: var(--font-display); font-size: 2.5rem; font-weight: 800;
  color: var(--sky-100); line-height: 1; letter-spacing: -0.04em;
}
.step h3 { font-size: 1.15rem; margin-bottom: .4rem; }
.step p { font-size: .975rem; margin-bottom: 0; }
.section--navy .step::before,
.section--fundal .step::before { color: rgba(107, 165, 255, .34); }

/* ---------- 10. Proiecte ---------- */
.projects { display: grid; gap: clamp(1.25rem, 2.5vw, 1.75rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.project {
  position: relative; display: flex; flex-direction: column;
  border-radius: var(--radius); overflow: hidden; background: var(--navy-900);
  min-height: 340px; isolation: isolate; color: #fff;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.project:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); color: #fff; }
.project__img { position: absolute; inset: 0; z-index: -2; }
.project__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.project:hover .project__img img { transform: scale(1.05); }
.project::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(6, 21, 41, .25) 0%, rgba(6, 21, 41, .72) 52%, rgba(6, 21, 41, .94) 100%);
}
.project__body { margin-top: auto; padding: 1.75rem; }
.project__meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .85rem; }
.tag {
  display: inline-flex; align-items: center; font-family: var(--font-display);
  font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: .32rem .7rem; border-radius: 999px;
  background: rgba(255, 255, 255, .14); color: #fff; border: 1px solid rgba(255, 255, 255, .18);
}
.tag--value { background: rgba(59, 130, 246, .3); border-color: rgba(107, 165, 255, .45); color: #DCE9FB; }
.project h3 { color: #fff; font-size: 1.35rem; margin-bottom: .4rem; }
.project__excerpt { font-size: .95rem; color: #C3D6EC; margin-bottom: 1rem; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.project .link-arrow { color: var(--accent-300); }
.project:hover .link-arrow { color: #fff; }
.project--wide { grid-column: span 2; min-height: 400px; }
@media (max-width: 780px) { .project--wide { grid-column: span 1; } }

/* ---------- 11. Galerie ---------- */
.gallery {
  display: grid; gap: .65rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
}
.gallery__item {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--radius-sm); background: var(--sky-50);
  aspect-ratio: 4 / 3; cursor: zoom-in; border: 0; padding: 0;
}
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease), filter .3s var(--ease); }
.gallery__item::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(6, 21, 41, .55));
  opacity: 0; transition: opacity .3s var(--ease);
}
.gallery__item:hover img { transform: scale(1.06); }
.gallery__item:hover::after { opacity: 1; }
.gallery__item .zoom {
  position: absolute; right: .6rem; bottom: .6rem; z-index: 2;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255, 255, 255, .92); color: var(--brand-600);
  display: grid; place-items: center;
  opacity: 0; transform: translateY(6px); transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.gallery__item .zoom svg { width: 15px; height: 15px; }
.gallery__item:hover .zoom { opacity: 1; transform: translateY(0); }
.gallery--tall .gallery__item { aspect-ratio: 1 / 1; }

/* Lightbox */
.lb {
  position: fixed; inset: 0; z-index: 200; display: none;
  background: rgba(4, 14, 27, .96);
  align-items: center; justify-content: center; padding: clamp(1rem, 4vw, 3rem);
}
.lb.is-open { display: flex; }
.lb__stage { position: relative; max-width: min(1200px, 100%); max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.lb__img { max-width: 100%; max-height: calc(100dvh - 11rem); object-fit: contain; border-radius: var(--radius-sm); box-shadow: 0 24px 80px rgba(0, 0, 0, .6); background: #0b1a2c; }
.lb__caption { color: #B9CDE4; font-size: .9rem; text-align: center; }
.lb__caption b { color: #fff; font-weight: 600; }
.lb__btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer;
  display: grid; place-items: center; transition: background-color .2s var(--ease), transform .2s var(--ease);
  backdrop-filter: blur(6px);
}
.lb__btn:hover { background: rgba(255, 255, 255, .22); }
.lb__btn svg { width: 22px; height: 22px; }
.lb__prev { left: clamp(-.25rem, -1vw, 0rem); }
.lb__next { right: clamp(-.25rem, -1vw, 0rem); }
.lb__close {
  position: fixed; top: 1.25rem; right: 1.25rem; width: 46px; height: 46px;
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer;
  display: grid; place-items: center; backdrop-filter: blur(6px);
}
.lb__close:hover { background: rgba(255, 255, 255, .22); }
.lb__close svg { width: 20px; height: 20px; }
@media (max-width: 640px) {
  .lb__prev { left: .25rem; } .lb__next { right: .25rem; }
  .lb__btn { width: 42px; height: 42px; }
}

/* ---------- 12. Articole / stiri ---------- */
.posts { display: grid; gap: clamp(1.25rem, 2.5vw, 1.75rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.post-card {
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; height: 100%;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--sky-100); }
.post-card__img { aspect-ratio: 16 / 10; background: var(--sky-50); overflow: hidden; }
.post-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.post-card:hover .post-card__img img { transform: scale(1.04); }
.post-card__body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.post-card__date { font-family: var(--font-display); font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-400); margin-bottom: .6rem; }
.post-card h3 { font-size: 1.1rem; line-height: 1.35; margin-bottom: .5rem; }
.post-card h3 a { color: var(--ink); }
.post-card:hover h3 a { color: var(--brand-500); }
.post-card__excerpt { font-size: .93rem; color: var(--muted); margin-bottom: 1rem; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post-card .link-arrow { margin-top: auto; }

/* ---------- 13. Continut editorial ---------- */
.prose { font-size: 1.075rem; }
.prose > *:first-child { margin-top: 0; }
.prose h2 { font-size: clamp(1.5rem, 2.6vw, 1.95rem); margin-top: 2.5rem; }
.prose h3 { margin-top: 2rem; }
.prose img { border-radius: var(--radius-sm); margin: 1.75rem 0; box-shadow: var(--shadow-sm); }
.prose img.alignright { float: right; margin: .35rem 0 1.5rem 2rem; max-width: min(45%, 340px); }
.prose img.alignleft { float: left; margin: .35rem 2rem 1.5rem 0; max-width: min(45%, 340px); }
@media (max-width: 640px) { .prose img.alignright, .prose img.alignleft { float: none; margin: 1.5rem 0; max-width: 100%; } }
.prose ul { list-style: none; padding-left: 0; }
.prose ul li { position: relative; padding-left: 1.75rem; }
.prose ul li::before {
  content: ""; position: absolute; left: .1rem; top: .62em;
  width: 8px; height: 8px; border-radius: 2px; background: var(--brand-400);
}
.prose ol { padding-left: 1.4rem; }
.prose blockquote {
  margin: 2rem 0; padding: 1.35rem 1.75rem;
  border-left: 3px solid var(--brand-400); background: var(--sky-50);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 1.1rem; color: var(--ink);
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.75rem 0; font-size: .95rem; }
.prose th, .prose td { padding: .8rem 1rem; border-bottom: 1px solid var(--line); text-align: left; }
.prose th { font-family: var(--font-display); font-weight: 700; color: var(--ink); background: var(--surface-alt); }
.prose a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--sky-100); }
.prose a:hover { text-decoration-color: currentColor; }
.table-scroll { overflow-x: auto; }

/* ---------- 14. Split (imagine + text) ---------- */
.split { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.split__media { position: relative; }
.split__media img { border-radius: var(--radius); box-shadow: var(--shadow); width: 100%; }
.split__media::before {
  content: ""; position: absolute; inset: auto -1.25rem -1.25rem auto;
  width: 62%; height: 62%; border-radius: var(--radius);
  border: 2px solid var(--sky-100); z-index: -1;
}
.split--reverse .split__media { order: 2; }
@media (max-width: 780px) { .split--reverse .split__media { order: 0; } }

/* ---------- 15. Persoana / echipa ---------- */
.person { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 2.75rem); align-items: start; }
@media (max-width: 640px) { .person { grid-template-columns: 1fr; } }
.person__photo { border-radius: var(--radius); overflow: hidden; background: var(--sky-50); aspect-ratio: 3 / 4; }
.person__photo img { width: 100%; height: 100%; object-fit: cover; }
.person__role { font-family: var(--font-display); font-weight: 700; color: var(--brand-500); font-size: .95rem; letter-spacing: .02em; margin-bottom: 1rem; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.chips li {
  font-size: .82rem; font-weight: 600; font-family: var(--font-display);
  padding: .4rem .85rem; border-radius: 999px;
  background: var(--sky-50); color: var(--brand-600); border: 1px solid var(--sky-100); margin: 0;
}

/* ---------- 16. CTA ---------- */
.cta {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--navy-900); color: #fff; border-radius: var(--radius-lg);
  padding: clamp(2.5rem, 6vw, 4.5rem);
  text-align: center;
}
.cta::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(80% 120% at 15% 0%, rgba(47, 99, 184, .55), transparent 60%),
    radial-gradient(70% 110% at 90% 100%, rgba(59, 130, 246, .35), transparent 60%);
}
.cta h2 { color: #fff; }
.cta .lead { color: #C3D6EC; margin-inline: auto; max-width: 46rem; margin-bottom: 2rem; }
.cta .btn-row { justify-content: center; }

/* ---------- 17. Contact ---------- */
/* Formularul e motivul pentru care se intra pe pagina asta, deci primeste
   partea lata; datele de contact stau intr-o coloana ingusta, langa el. */
.contact-grid { display: grid; gap: clamp(1.75rem, 3.5vw, 3rem); align-items: start; }
@media (min-width: 960px) {
  .contact-grid { grid-template-columns: minmax(280px, 24rem) minmax(0, 1fr); }
}

/* Sectiune cu fotografie, dar pe fond deschis: cardurile albe plutesc peste o
   imagine estompata, in loc de blocul albastru folosit la Programe. */
.section--fundal-deschis {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--surface-alt);
}
.section--fundal-deschis .section__fundal img {
  opacity: .34; filter: saturate(.62) brightness(1.05);
}
.section--fundal-deschis::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(255, 255, 255, .78), rgba(247, 250, 253, .62) 62%),
    linear-gradient(180deg, rgba(247, 250, 253, .58), rgba(247, 250, 253, .86));
}

/* --- coloana cu datele de contact --- */
.contact-info { display: grid; gap: 1.25rem; }
.contact-info__cutie {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.25rem, 2.5vw, 1.6rem);
}
.contact-info h2 { font-size: 1.28rem; margin-bottom: .35rem; }
.contact-info .lead { font-size: .95rem; margin-bottom: 0; }
.contact-info .info-list li:first-child { padding-top: .35rem; }
.contact-info .info-list li:last-child { padding-bottom: 0; }

/* mica promisiune de sub formular */
.contact-promisiune {
  margin-top: 2.25rem; padding-top: 0;
  display: flex; gap: .85rem; align-items: flex-start;
  background: var(--sky-50); border: 1px solid var(--sky-100);
  border-radius: var(--radius); padding: 1rem 1.15rem;
  font-size: .9rem; color: var(--ink-soft); line-height: 1.5;
}
.contact-promisiune svg { width: 20px; height: 20px; flex: none; color: var(--brand-500); margin-top: .1rem; }
.contact-promisiune b { color: var(--ink); font-weight: 700; }

/* --- formularul, ca un card ridicat --- */
.form-cutie {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
  box-shadow: 0 1px 2px rgba(10, 30, 56, .04), 0 18px 44px -28px rgba(10, 30, 56, .30);
}

.form-cutie > h2 { font-size: clamp(1.45rem, 3vw, 1.95rem); margin-bottom: .4rem; }
.form-cutie > .lead { font-size: .98rem; margin-bottom: 1.9rem; }

/* =====================================================================
   Formularul pe fond albastru.
   E singurul bloc inchis la culoare de pe pagina, deci se vede de la
   prima privire. Campurile raman suficient de deschise ca sa se citeasca
   ce scrii in ele, iar butonul trece pe alb: pe albastru inchis, albul e
   cel mai puternic lucru pe care il poti pune.
   ===================================================================== */
.form-cutie--albastru {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(158deg, var(--navy-700) 0%, var(--navy-900) 72%);
  border-color: rgba(255, 255, 255, .14);
  color: #C6D6E9;
  box-shadow: 0 2px 8px rgba(6, 21, 41, .22), 0 34px 70px -34px rgba(6, 21, 41, .62);
}
.form-cutie--albastru::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(72% 48% at 88% 4%, rgba(107, 165, 255, .26), transparent 62%),
    radial-gradient(56% 44% at 4% 96%, rgba(47, 99, 184, .24), transparent 66%);
}

.form-cutie--albastru > h2 { color: #fff; }
.form-cutie--albastru > .lead { color: #B9CDE4; }

.form-cutie--albastru .form__titlu { color: var(--accent-300); }
.form-cutie--albastru .form__titlu::after { background: rgba(255, 255, 255, .18); }
.form-cutie--albastru .form__grup + .form__grup { border-top-color: rgba(255, 255, 255, .14); }

.form-cutie--albastru .field label { color: #E4EEFA; }
.form-cutie--albastru .field label .req { color: #FFB4A2; }
.form-cutie--albastru .field input,
.form-cutie--albastru .field textarea,
.form-cutie--albastru .field select {
  background: rgba(255, 255, 255, .09);
  border-color: rgba(255, 255, 255, .24);
  color: #fff;
}
.form-cutie--albastru .field input::placeholder,
.form-cutie--albastru .field textarea::placeholder { color: rgba(198, 214, 233, .6); }
/* lista derulanta se deseneaza de sistem, deci ramane pe alb */
.form-cutie--albastru .field select option { color: var(--ink); background: #fff; }
.form-cutie--albastru .field input:hover,
.form-cutie--albastru .field textarea:hover,
.form-cutie--albastru .field select:hover { border-color: rgba(255, 255, 255, .42); }
.form-cutie--albastru .field input:focus,
.form-cutie--albastru .field textarea:focus,
.form-cutie--albastru .field select:focus {
  border-color: var(--accent-300); background: rgba(255, 255, 255, .14);
  box-shadow: 0 0 0 4px rgba(107, 165, 255, .24);
}
.form-cutie--albastru .field input:user-invalid,
.form-cutie--albastru .field textarea:user-invalid,
.form-cutie--albastru .field select:user-invalid {
  border-color: #E8A08A; box-shadow: 0 0 0 4px rgba(232, 160, 138, .18);
}
.form-cutie--albastru .field__hint { color: #9DBBDC; }

.form-cutie--albastru .form__consent {
  background: rgba(255, 255, 255, .07); color: #C6D6E9;
}
.form-cutie--albastru .form__consent:hover { background: rgba(255, 255, 255, .12); }

/* butonul: alb pe albastru, ca sa fie cel mai vizibil lucru din pagina */
.form-cutie--albastru .btn--primary {
  background: #fff; color: var(--navy-900); border-color: #fff;
}
.form-cutie--albastru .btn--primary:hover {
  background: var(--sky-100); color: var(--navy-900);
  box-shadow: 0 10px 26px -12px rgba(6, 21, 41, .8);
}

.form-cutie--albastru .contact-promisiune {
  background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .16);
  color: #C6D6E9;
}
.form-cutie--albastru .contact-promisiune b { color: #fff; }
.form-cutie--albastru .contact-promisiune svg { color: var(--accent-300); }

.form-cutie--albastru .mesaj-form { border-color: rgba(255, 255, 255, .22); }

/* grupurile de campuri, cu titlu discret */
.form__grup { display: grid; gap: 1.1rem; }
.form__grup + .form__grup { margin-top: 1.9rem; padding-top: 1.7rem; border-top: 1px solid var(--line-soft); }
.form__titlu {
  font-family: var(--font-display); font-size: .78rem; font-weight: 800;
  letter-spacing: .13em; text-transform: uppercase; color: var(--brand-500);
  display: flex; align-items: center; gap: .7rem; margin-bottom: -.1rem;
}
.form__titlu::after { content: ""; height: 1px; flex: 1; background: var(--line); }

/* doua pe rand, dar numai cand chiar incap */
.form__doua { display: grid; gap: 1.1rem; }
@media (min-width: 620px) { .form__doua { grid-template-columns: 1fr 1fr; } }
.form__doua--3-2 { grid-template-columns: 1fr; }
@media (min-width: 620px) { .form__doua--3-2 { grid-template-columns: 3fr 2fr; } }

.form-cutie .btn-row { margin-top: .4rem; }
.form-cutie .btn--primary { padding-inline: 2rem; }
.info-list { list-style: none; padding: 0; margin: 0; }
.info-list li { display: flex; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line-soft); margin: 0; }
.info-list li:last-child { border-bottom: 0; }
.info-list__icon { flex: none; width: 42px; height: 42px; border-radius: 11px; background: var(--sky-50); color: var(--brand-500); display: grid; place-items: center; }
.info-list__icon svg { width: 19px; height: 19px; }
.info-list__label { font-family: var(--font-display); font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: .15rem; }
.info-list__value { color: var(--ink); font-weight: 500; }
.info-list__value a { color: var(--ink); }
.info-list__value a:hover { color: var(--brand-500); }

.form { display: grid; gap: 1.1rem; }
.field { display: grid; gap: .45rem; }
.field label { font-family: var(--font-display); font-size: .88rem; font-weight: 700; color: var(--ink); }
.field label .req { color: #C2410C; }
.field input, .field textarea, .field select {
  font-family: inherit; font-size: 1rem; color: var(--ink);
  padding: .9rem 1.05rem; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; width: 100%; transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:hover, .field textarea:hover, .field select:hover { border-color: #C4D3E6; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: 0; border-color: var(--brand-500); box-shadow: 0 0 0 4px rgba(47, 99, 184, .15);
}
/* Greselile se arata abia dupa ce omul a trecut prin camp, nu de la incarcare.
   `:user-invalid` face exact asta; unde nu e sustinut, nu se coloreaza nimic. */
.field input:user-invalid,
.field textarea:user-invalid,
.field select:user-invalid { border-color: #D98B6E; box-shadow: 0 0 0 4px rgba(217, 139, 110, .12); }
.field__hint { font-size: .82rem; color: var(--muted); }
.form__consent {
  display: flex; gap: .8rem; align-items: flex-start; font-size: .9rem;
  color: var(--ink-soft); background: var(--surface-alt); border-radius: var(--radius-sm);
  padding: .9rem 1.05rem; cursor: pointer;
}
.form__consent:hover { background: var(--sky-50); }
.form__consent input { width: auto; margin-top: .25rem; flex: none; }
.map-embed { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 16 / 9; background: var(--sky-50); }
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- 18. Logos / parteneri ---------- */
.logos { display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; justify-content: center; }
.logos img { height: 42px; width: auto; opacity: .55; filter: grayscale(1); transition: opacity .3s var(--ease), filter .3s var(--ease); }
.logos img:hover { opacity: 1; filter: grayscale(0); }

/* ---------- 19. Footer ---------- */
.site-footer {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--navy-950); color: #8FA9C6;
  padding-block: clamp(3rem, 6vw, 4.5rem) 0; font-size: .95rem;
}
/* Numele firmei, scris urias si aproape invizibil, taiat de marginea de jos.
   Se citeste doar cand privesti spre el — de aceea e scos din fluxul de text
   si ascuns fata de cititoarele de ecran. */
.footer-marca {
  position: absolute; left: 50%; bottom: -.22em; z-index: -1;
  transform: translateX(-50%);
  font-family: var(--font-display); line-height: 1;
  font-size: clamp(2.8rem, 10vw, 10.5rem);
  letter-spacing: -.035em; white-space: nowrap; pointer-events: none;
  color: rgba(255, 255, 255, .028);
  user-select: none;
}
/* aceeasi constructie ca sigla din antet: „€URO” inclinat si mai gras */
.footer-marca i { font-style: italic; font-weight: 900; }
.footer-marca b { font-weight: 700; letter-spacing: .01em; color: rgba(255, 255, 255, .018); }
.footer-grid {
  display: grid; gap: clamp(1.75rem, 4vw, 3rem);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-bottom: 3rem;
}
.footer-brand { grid-column: span 4; max-width: 26rem; }
@media (min-width: 900px) {
  .footer-grid { grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr)); }
  .footer-brand { grid-column: span 1; }
}
/* Pe telefon: doua coloane, cu brandul pe toata latimea */
@media (max-width: 899px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: span 2; }
}
.footer-brand p { margin-top: 1.25rem; color: #7E97B3; font-size: .93rem; }
.site-footer h2, .site-footer h4 { color: #fff; font-family: var(--font-display); font-size: .82rem; letter-spacing: .13em; text-transform: uppercase; margin-bottom: 1.15rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
/* Adresa si e-mailul sunt „cuvinte” lungi — pe coloane inguste trebuie sa se rupa.
   break-word rupe doar cand nu exista alta solutie, iar <wbr> din HTML ofera
   punctul preferat de rupere (dupa @). */
.site-footer li { margin-bottom: .65rem; overflow-wrap: break-word; }
.site-footer a { color: #A9C1DC; }
.site-footer a:hover { color: #fff; }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .1); padding-block: 1.5rem;
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center;
  font-size: .87rem; color: #6E86A2;
}
.footer-bottom a { color: #8FA9C6; }
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }

/* ---------- 20. Utilitare ---------- */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; top: -100%; left: 1rem; z-index: 300;
  background: #fff; color: var(--brand-600); padding: .75rem 1.25rem;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm); font-weight: 700;
}
.skip-link:focus { top: 0; }
.text-center { text-align: center; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; }
.divider { height: 1px; background: var(--line); border: 0; margin: 0; }

/* Animatie la scroll */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; } }

/* Paginare */
.pagination { display: flex; gap: .4rem; justify-content: center; margin-top: 3rem; flex-wrap: wrap; }
.pagination a, .pagination span {
  min-width: 42px; height: 42px; display: grid; place-items: center; padding: 0 .8rem;
  border-radius: var(--radius-sm); border: 1px solid var(--line);
  font-family: var(--font-display); font-weight: 700; font-size: .93rem; color: var(--ink-soft);
}
.pagination a:hover { border-color: var(--brand-400); color: var(--brand-500); }
.pagination [aria-current="page"] { background: var(--brand-500); border-color: var(--brand-500); color: #fff; }

/* Print */
@media print {
  .site-header, .site-footer, .cta, .nav-toggle, .lb { display: none !important; }
  body { color: #000; font-size: 11pt; }
  a { color: #000; text-decoration: underline; }
}

/* =========================================================
   21. Bara utilitara (deasupra header-ului)
   ========================================================= */
:root { --topbar-h: 40px; }
@media (max-width: 860px) { :root { --topbar-h: 36px; } }

.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 101;
  background: var(--navy-950); color: #9FB6D0;
  font-size: .82rem; height: var(--topbar-h);
  display: flex; align-items: center;
  transition: transform .3s var(--ease);
}
.topbar__inner {
  width: min(100% - (var(--gutter) * 2), var(--wrap)); margin-inline: auto;
  display: flex; align-items: center; gap: 1.5rem;
}
.topbar a { color: #C3D6EC; display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; }
.topbar a:hover { color: #fff; }
.topbar svg { width: 14px; height: 14px; flex: none; opacity: .8; }
.topbar__sep { margin-left: auto; }
.topbar__note { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; }
@media (max-width: 860px) {
  .topbar__hide-sm { display: none; }
  .topbar__inner { justify-content: center; gap: 1.25rem; }
  .topbar__sep { margin-left: 0; }
}

/* Header-ul coboara sub bara utilitara */
body.has-topbar { --header-offset: calc(var(--header-h) + var(--topbar-h)); }
body.has-topbar .site-header { top: var(--topbar-h); }
body.has-topbar .hero { padding-top: calc(var(--header-offset) + 3rem); }
body.has-topbar .page-hero { padding-top: calc(var(--header-offset) + clamp(3rem, 7vw, 5rem)); }
@media (max-width: 1080px) {
  body.has-topbar .nav { inset: var(--header-offset) 0 auto 0; max-height: calc(100dvh - var(--header-offset)); }
  body.has-topbar.is-scrolled .nav { inset: var(--header-h) 0 auto 0; max-height: calc(100dvh - var(--header-h)); }
}
/* La derulare bara utilitara se retrage, iar header-ul urca in locul ei */
body.is-scrolled .topbar { transform: translateY(-100%); }
body.has-topbar.is-scrolled .site-header { top: 0; }

/* =========================================================
   22. Buton flotant de contact
   ========================================================= */
.fab {
  position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem);
  z-index: 90; display: inline-flex; align-items: center; gap: .6rem;
  padding: .9rem 1.4rem .9rem 1.1rem; border-radius: 999px;
  background: var(--brand-500); color: #fff; border: 0;
  font-family: var(--font-display); font-weight: 700; font-size: .95rem;
  box-shadow: 0 8px 24px rgba(47, 99, 184, .4), 0 2px 6px rgba(10, 30, 56, .2);
  opacity: 0; transform: translateY(14px) scale(.96); pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease), background-color .2s var(--ease);
}
.fab.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.fab:hover { background: var(--brand-400); color: #fff; transform: translateY(-2px); }
.fab svg { width: 20px; height: 20px; flex: none; }
.fab__label { white-space: nowrap; }
@media (max-width: 560px) {
  .fab { padding: .85rem; }
  .fab__label { display: none; }
}
@media print { .fab, .topbar, .cookie { display: none !important; } }

/* =========================================================
   23. Carduri de statistici (varianta cu iconuri)
   ========================================================= */
.stat-cards {
  display: grid; gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.stat-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.5rem, 2.5vw, 2rem); display: flex; flex-direction: column;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.stat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.stat-card__icon {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--sky-50); color: var(--brand-500); margin-bottom: 1.1rem;
}
.stat-card__icon svg { width: 22px; height: 22px; }
.stat-card__num {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em;
  font-size: clamp(1.9rem, 3.2vw, 2.6rem); line-height: 1; color: var(--brand-600);
}
.stat-card__num small { font-size: .45em; margin-left: .15em; color: var(--brand-400); }
.stat-card__label { margin-top: .6rem; color: var(--muted); font-size: .93rem; line-height: 1.5; }
.stat-card--accent {
  background: linear-gradient(155deg, var(--brand-500) 0%, var(--brand-600) 96%);
  border-color: transparent;
  box-shadow: 0 10px 26px -14px rgba(41, 74, 133, .55);
}
.stat-card--accent .stat-card__icon { background: rgba(255, 255, 255, .20); color: #fff; }
.stat-card--accent .stat-card__num { color: #fff; }
.stat-card--accent .stat-card__num small { color: #CFE1FF; }
.stat-card--accent .stat-card__label { color: rgba(255, 255, 255, .88); }

/* =========================================================
   24. Domenii
   ========================================================= */
.domains {
  display: grid; gap: clamp(1rem, 2vw, 1.4rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* Sase domenii: 3 x 2 pe ecran mare, 2 x 3 pe tableta, 1 coloana pe telefon */
@media (min-width: 900px) { .domains { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .domains { grid-template-columns: 1fr; } }
.domain {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--radius); padding: clamp(1.5rem, 2.5vw, 1.9rem);
  min-height: 210px; display: flex; flex-direction: column;
  color: #fff; background: var(--navy-800);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.domain::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(150deg, var(--d1, #2F63B8), var(--d2, #16406E) 82%);
  transition: transform .6s var(--ease);
}
.domain::before {
  content: ""; position: absolute; z-index: -1;
  width: 190px; height: 190px; right: -60px; top: -60px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.16), transparent 68%);
}
.domain:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); color: #fff; }
.domain:hover::after { transform: scale(1.08); }
.domain__icon {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .16); color: #fff; margin-bottom: 1rem;
  border: 1px solid rgba(255, 255, 255, .18);
}
.domain__icon svg { width: 23px; height: 23px; }
.domain h3 { color: #fff; font-size: 1.12rem; margin-bottom: .4rem; }
.domain p { font-size: .9rem; color: rgba(255, 255, 255, .78); margin-bottom: 1rem; }
.domain .link-arrow { margin-top: auto; color: #fff; font-size: .88rem; }

/* =========================================================
   25. Programe de finantare
   ========================================================= */
.programmes { display: grid; gap: 1rem; }
.programme {
  display: grid; gap: 1rem 1.5rem; align-items: center;
  grid-template-columns: minmax(0, 1fr) auto;
  background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--brand-400);
  border-radius: var(--radius); padding: clamp(1.25rem, 2.2vw, 1.75rem);
  transition: box-shadow .3s var(--ease);
}
.programme:hover { box-shadow: var(--shadow); }
.programme--closed { opacity: .65; }
.programme__head { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-bottom: .5rem; }
.programme h3 { font-size: clamp(1.25rem, 1.9vw, 1.55rem); margin: 0 0 .1rem; letter-spacing: -.015em; }
.programme p { margin: 0; color: var(--ink-soft); font-size: 1rem; }
.programme__meta { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: .95rem; font-size: .88rem; }
.programme__meta div { display: flex; flex-direction: column; gap: .1rem; }
.programme__meta .k {
  font-family: var(--font-display); font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.programme__meta .v { color: var(--ink); font-weight: 600; }
.status {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--font-display); font-size: .72rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  padding: .3rem .7rem; border-radius: 999px;
}
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status--open { background: #DCFCE7; color: #15803D; }
.status--soon { background: #FEF3C7; color: #92400E; }
.status--closed { background: var(--line-soft); color: var(--muted); }
@media (max-width: 640px) { .programme { grid-template-columns: 1fr; } }

/* Nota vizibila doar in previzualizare, pentru continutul care se completeaza din panou */
.editor-note {
  display: flex; gap: .85rem; align-items: flex-start;
  background: #FFFBEB; border: 1px dashed #FCD34D; border-radius: var(--radius-sm);
  padding: 1rem 1.25rem; font-size: .9rem; color: #78350F; margin-bottom: 1.75rem;
}
.editor-note svg { width: 18px; height: 18px; flex: none; margin-top: .15rem; color: #B45309; }
.editor-note b { color: #78350F; }

/* =========================================================
   26. Testimoniale
   ========================================================= */
.testimonials {
  display: grid; gap: clamp(1.25rem, 2.5vw, 1.75rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.testimonial {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.5rem, 2.5vw, 2rem); display: flex; flex-direction: column; height: 100%;
}
.testimonial__quote { position: relative; padding-top: 2.2rem; font-size: 1.02rem; color: var(--ink); line-height: 1.65; }
.testimonial__quote::before {
  content: "\201C"; position: absolute; top: -.55rem; left: -.2rem;
  font-family: var(--font-display); font-size: 4.5rem; line-height: 1; color: var(--sky-100);
}
.testimonial__who { margin-top: auto; padding-top: 1.4rem; display: flex; align-items: center; gap: .9rem; }
.testimonial__avatar {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  background: var(--brand-600); color: #fff; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 1rem;
}
.testimonial__name { font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: .95rem; }
.testimonial__role { font-size: .85rem; color: var(--muted); }
.testimonial--empty { border-style: dashed; background: var(--surface-alt); }
.testimonial--empty .testimonial__quote { color: var(--muted); font-style: italic; }

/* =========================================================
   27. Intrebari frecvente (acordeon)
   ========================================================= */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  display: flex; align-items: flex-start; gap: 1rem; justify-content: space-between;
  padding: 1.35rem .25rem; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1rem, 1.6vw, 1.12rem); color: var(--ink); line-height: 1.4;
}
.faq__q:hover { color: var(--brand-500); }
.faq__icon {
  flex: none; width: 26px; height: 26px; border-radius: 50%; margin-top: .1rem;
  background: var(--sky-50); color: var(--brand-500); display: grid; place-items: center;
  transition: transform .3s var(--ease), background-color .2s var(--ease), color .2s var(--ease);
}
.faq__icon svg { width: 14px; height: 14px; }
.faq__q[aria-expanded="true"] .faq__icon { transform: rotate(45deg); background: var(--brand-500); color: #fff; }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s var(--ease); }
.faq__q[aria-expanded="true"] + .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { padding-right: 3rem; padding-left: .25rem; margin-bottom: 1rem; color: var(--ink-soft); }
.faq__a p:last-child { margin-bottom: 1.35rem; }
@media (max-width: 640px) { .faq__a p { padding-right: 0; } }

/* =========================================================
   28. Harta proiectelor
   ========================================================= */
.project-map {
  display: grid; gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center;
}
@media (max-width: 860px) { .project-map { grid-template-columns: 1fr; } }
.project-map__canvas {
  position: relative; border-radius: var(--radius); overflow: hidden;
  background: var(--navy-900); padding: clamp(1.25rem, 3vw, 2rem);
}
.project-map__caption {
  margin: 1.25rem 0 0; font-size: .85rem; color: #8FA9C6; line-height: 1.5;
}
.project-map__canvas svg { width: 100%; height: auto; display: block; }
.map-country { fill: rgba(107, 165, 255, .08); stroke: rgba(107, 165, 255, .28); stroke-width: 1.1; }
.map-region { fill: rgba(59, 130, 246, .26); stroke: var(--accent-300); stroke-width: 1.3; }
.map-halo { fill: rgba(107, 165, 255, .2); }
.map-pin { fill: var(--accent-300); transition: fill .25s var(--ease); }
.map-point { cursor: pointer; }
.map-point:hover .map-pin, .map-point.is-active .map-pin { fill: #fff; }
.map-point:hover .map-halo, .map-point.is-active .map-halo { fill: rgba(255, 255, 255, .28); }
.map-country { vector-effect: non-scaling-stroke; }
.map-list { list-style: none; padding: 0; margin: 0; }
.map-list li { margin: 0; border-bottom: 1px solid var(--line-soft); }
.map-list a { display: flex; gap: .9rem; align-items: baseline; padding: .95rem .25rem; color: var(--ink); }
.map-list a:hover { color: var(--brand-500); }
.map-list__idx {
  font-family: var(--font-display); font-weight: 800; font-size: .8rem;
  color: var(--brand-400); flex: none; width: 1.4rem;
}
.map-list__name { font-family: var(--font-display); font-weight: 700; font-size: .96rem; }
.map-list__where { font-size: .84rem; color: var(--muted); margin-left: auto; text-align: right; }

/* =========================================================
   29. Banner de cookies
   ========================================================= */
.cookie {
  position: fixed; left: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem);
  z-index: 150; max-width: 30rem; width: calc(100% - 2rem);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 1.5rem;
  transform: translateY(20px); opacity: 0; pointer-events: none;
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.cookie.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.cookie h4, .cookie__titlu { margin-bottom: .5rem; font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--ink); }
.cookie p { font-size: .9rem; color: var(--muted); margin-bottom: 1.15rem; }
.cookie p a { text-decoration: underline; text-underline-offset: 2px; }
.cookie__actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.cookie__actions .btn { flex: 1 1 auto; }
@media (max-width: 480px) { .cookie__actions .btn { flex: 1 1 100%; } }
/* Cand banner-ul e vizibil, butonul flotant urca sa nu se suprapuna */
body.cookie-open .fab { bottom: calc(clamp(1rem, 3vw, 2rem) + 1rem); }

/* =========================================================
   30. Harta sediului (se incarca la cerere)
   ========================================================= */
.harta { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: #fff; }
.contact-info .harta__coperta .btn-row { flex-direction: column; align-items: stretch; gap: .6rem; }
.contact-info .harta__coperta .btn { justify-content: center; }
.harta__coperta .btn--outline { border-color: var(--line); color: var(--brand-600); background: #fff; }
.harta__coperta .btn--outline:hover { border-color: var(--brand-500); background: var(--sky-50); }
.harta__coperta {
  position: relative; isolation: isolate; min-height: 300px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .9rem; padding: clamp(1.5rem, 4vw, 2.5rem); text-align: center; color: var(--ink-soft);
}
.harta__coperta::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(70% 90% at 50% 30%, rgba(47, 99, 184, .07), transparent 65%),
    repeating-linear-gradient(0deg, rgba(41, 74, 133, .05) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(41, 74, 133, .05) 0 1px, transparent 1px 34px),
    var(--surface-alt);
}
.harta__pin {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand-500); color: #fff; box-shadow: 0 8px 24px rgba(47, 99, 184, .45);
}
.harta__pin svg { width: 24px; height: 24px; }
.harta__adresa { margin: 0; font-family: var(--font-display); font-weight: 700; color: var(--ink); max-width: 24rem; }
.harta__nota { margin: .25rem 0 0; font-size: .8rem; color: var(--muted); max-width: 28rem; }
.harta iframe { width: 100%; aspect-ratio: 16 / 10; border: 0; display: block; }
@media (max-width: 520px) { .harta iframe { aspect-ratio: 4 / 3; } }

/* =========================================================
   31. Raspunsul formularului de contact
   ========================================================= */
.mesaj-form {
  display: flex; gap: .85rem; align-items: flex-start;
  padding: 1rem 1.25rem; border-radius: var(--radius-sm);
  margin-bottom: 1.5rem; font-size: .95rem; line-height: 1.55;
}
.mesaj-form::first-letter { font-weight: 700; }
.mesaj-form--ok { background: #DCFCE7; color: #15803D; }
.mesaj-form--eroare { background: #FEE2E2; color: #B91C1C; }

/* Capcana pentru roboti: invizibila pentru oameni, dar nu prin display:none
   (unele programe automate ignora exact campurile ascunse asa). */
.capcana {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden; opacity: 0;
}

/* =========================================================
   32. Carduri de domeniu cu fotografie
   ========================================================= */
.domain--foto::after {
  /* fotografia ramane la vedere sus; valul se ingroasa doar in dreptul textului */
  background:
    linear-gradient(180deg,
      rgba(9, 28, 52, .14) 0%,
      rgba(9, 28, 52, .34) 30%,
      rgba(8, 25, 47, .70) 62%,
      rgba(7, 22, 42, .88) 100%),
    linear-gradient(120deg, rgba(41, 74, 133, .30), transparent 62%);
}
.domain__foto { position: absolute; inset: 0; z-index: -2; }
.domain__foto img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(1.02) contrast(1.04) brightness(1.08);
  transition: transform .7s var(--ease);
}
.domain--foto:hover .domain__foto img { transform: scale(1.06); }
.domain--foto:hover::after { transform: none; }


/* --- pasii, testimonialele si chemarea, cand stau pe o fotografie --- */
.section--fundal .step h3 { color: #fff; }
.section--fundal .step p { color: #C3D6EC; }

.section--fundal .testimonial {
  background: rgba(14, 40, 72, .74);
  border-color: rgba(255, 255, 255, .16);
  backdrop-filter: blur(10px);
}
.section--fundal .testimonial__quote { color: #E4EEFA; }
.section--fundal .testimonial__quote::before { color: rgba(107, 165, 255, .42); }
.section--fundal .testimonial__name { color: #fff; }
.section--fundal .testimonial__role { color: #A6C0DC; }
.section--fundal .testimonial--empty { background: rgba(255, 255, 255, .06); border-style: dashed; }
.section--fundal .testimonial--empty .testimonial__quote { color: #A6C0DC; }

/* chemarea la actiune: cutia devine transparenta, ca sa se vada fotografia */
.section--chemare.section--fundal { padding-block: 0; }
.section--chemare.section--fundal .cta {
  background: transparent;
  border-radius: 0;
  padding-block: clamp(3.5rem, 8vw, 6rem);
}
.section--chemare.section--fundal .cta::after { display: none; }
.section--chemare.section--fundal .section__fundal img { opacity: .38; }

/* =========================================================
   39. Antetul paginilor de informare, pe fotografie
   ========================================================= */

/* =========================================================
   33. Banda de fotografii
   ========================================================= */
.banda-foto { position: relative; background: var(--navy-950); overflow: hidden; }
.banda-foto__sir { display: flex; }
.banda-foto__cadru { flex: 1 1 0; min-width: 0; aspect-ratio: 4 / 3; max-height: 260px; position: relative; }
.banda-foto__cadru::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6, 21, 41, .35), rgba(6, 21, 41, .75));
  transition: opacity .4s var(--ease);
}
.banda-foto__cadru img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.6) contrast(1.05);
  transition: transform .8s var(--ease), filter .4s var(--ease);
}
.banda-foto__cadru:hover img { transform: scale(1.05); filter: saturate(.95); }
.banda-foto__cadru:hover::after { opacity: .45; }
.banda-foto__eticheta {
  position: absolute; left: 50%; bottom: 1.1rem; transform: translateX(-50%);
  margin: 0; z-index: 2; text-align: center;
  font-family: var(--font-display); font-size: .78rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .82);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .6);
  padding-inline: 1rem;
}
@media (max-width: 780px) {
  .banda-foto__cadru:nth-child(n+4) { display: none; }
  .banda-foto__cadru { max-height: 170px; }
}
@media (max-width: 480px) {
  .banda-foto__cadru:nth-child(n+3) { display: none; }
}

/* =========================================================
   34. Sectiune cu fundal de fotografie (programe)
   ========================================================= */
.section--fundal {
  position: relative; isolation: isolate; overflow: hidden;
  background: #0E2C50; color: #CFDFF0;
}
.section--fundal h2, .section--fundal h3, .section--fundal h4 { color: #fff; }
.section--fundal .lead { color: #B9CDE4; }
.section--fundal .eyebrow { color: var(--accent-300); }
.section__fundal { position: absolute; inset: 0; z-index: -2; }
.section__fundal img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: .34; filter: saturate(.7) brightness(1.04);
}
.section--fundal::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(90% 70% at 15% 0%, rgba(59, 130, 246, .34), transparent 64%),
    radial-gradient(80% 90% at 90% 100%, rgba(107, 165, 255, .20), transparent 62%),
    linear-gradient(170deg, rgba(12, 36, 66, .62), rgba(10, 30, 56, .82));
}
/* linii fine, ca un plan de arhitect */
.section--fundal::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.028) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.028) 0 1px, transparent 1px 46px);
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%);
}
/* cardurile de program, pe fundal inchis */
.section--fundal .programme {
  background: rgba(14, 40, 72, .74);
  border-color: rgba(255, 255, 255, .16);
  border-left-color: var(--accent-300);
  backdrop-filter: blur(10px);
}
.section--fundal .programme:hover {
  background: rgba(18, 50, 88, .82);
  box-shadow: 0 14px 40px rgba(4, 14, 28, .38);
}
.section--fundal .programme h3 { color: #fff; }
.section--fundal .programme p { color: #B9CDE4; }
.section--fundal .programme__meta .k { color: #A6C0DC; }
.section--fundal .programme__meta .v { color: #DCE9FB; }
.section--fundal .programme .btn--outline {
  background: transparent; border-color: rgba(255, 255, 255, .3); color: #fff;
}
.section--fundal .programme .btn--outline:hover { border-color: #fff; background: rgba(255,255,255,.1); }
.section--fundal .editor-note { background: rgba(217, 164, 65, .14); border-color: rgba(217, 164, 65, .4); color: #F2D9A8; }
.section--fundal .editor-note b { color: #F5C761; }
.section--fundal .editor-note svg { color: #F5C761; }

/* =========================================================
   35. Pagina Echipa
   ========================================================= */
.persoana {
  display: grid; gap: clamp(2rem, 5vw, 3.5rem);
  grid-template-columns: minmax(0, 19rem) minmax(0, 1fr); align-items: start;
}
@media (max-width: 820px) { .persoana { grid-template-columns: 1fr; } }
.persoana__coloana { position: sticky; top: calc(var(--header-h) + 1.5rem); }
@media (max-width: 820px) { .persoana__coloana { position: static; } }
.persoana__poza {
  margin: 0 0 1.25rem; border-radius: var(--radius); overflow: hidden;
  background: var(--navy-900); box-shadow: var(--shadow); aspect-ratio: 4 / 3;
}
.persoana__poza img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.persoana__initiale {
  width: 5rem; height: 5rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand-600); color: #fff; font-family: var(--font-display);
  font-weight: 800; font-size: 1.6rem; margin-bottom: 1.25rem;
}
.persoana__nume { font-size: clamp(1.35rem, 2.4vw, 1.7rem); margin-bottom: .2rem; }
.persoana__rol {
  font-family: var(--font-display); font-weight: 700; font-size: .9rem;
  color: var(--brand-500); margin-bottom: 1.1rem;
}
.persoana__text > *:first-child { margin-top: 0; }

/* Repere numerice, pe fundal inchis */
.repere {
  display: grid; gap: 1px; background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--radius); overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.reper { background: rgba(6, 21, 41, .55); padding: clamp(1.35rem, 3vw, 2rem); }
.reper b {
  display: block; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.25rem, 2.4vw, 1.65rem); color: #fff; letter-spacing: -.02em; line-height: 1.15;
}
.reper span { display: block; margin-top: .5rem; font-size: .88rem; color: #A9C1DC; line-height: 1.5; }

/* =========================================================
   36. Elemente dinamice
   ========================================================= */

/* Bara de progres a citirii */
.bara-progres {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 200;
  background: linear-gradient(90deg, var(--brand-500), var(--accent-300));
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .1s linear;
  pointer-events: none;
}
body.has-topbar .bara-progres { top: 0; }

/* Imaginea din hero se misca mai incet decat pagina */
.hero__bg img { will-change: transform; transform: scale(1.08); }

/* Sirul cu programe si domenii, care se deplaseaza incet.
   Sta imediat sub hero, deci e in albastrul marcii — nu inca o banda neagra. */
.sir-viu {
  --viteza: 46s;
  position: relative; overflow: hidden; padding-block: 1.05rem;
  background: linear-gradient(90deg, var(--brand-600) 0%, var(--brand-500) 48%, var(--brand-600) 100%);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
/* o dunga aurie sus si jos, ca pe materialele tiparite */
.sir-viu::before, .sir-viu::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold) 18%, var(--gold) 82%, transparent);
  opacity: .75;
}
.sir-viu::before { top: 0; }
.sir-viu::after { bottom: 0; }
.sir-viu__banda { display: flex; width: max-content; animation: curge var(--viteza) linear infinite; }
.sir-viu:hover .sir-viu__banda { animation-play-state: paused; }
.sir-viu__element {
  display: inline-flex; align-items: center; gap: .7rem;
  padding-inline: 1.6rem; white-space: nowrap;
  font-family: var(--font-display); font-weight: 700; font-size: .95rem;
  color: #fff; letter-spacing: -.01em;
}
.sir-viu__element svg { width: 18px; height: 18px; color: #CFE1FF; flex: none; }
.sir-viu__element::after {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold); margin-left: 1.6rem;
}
@keyframes curge { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .sir-viu__banda { animation: none; }
  .sir-viu { mask-image: none; }
  .sir-viu__banda { flex-wrap: wrap; width: auto; justify-content: center; }
}

/* =========================================================
   37. Iconuri care se desenează singure
   ========================================================= */

/* Traseul se deseneaza o singura data, cand cardul apare pe ecran.
   Valoarea 120 acopera cel mai lung traseu din setul nostru de desene. */
@keyframes deseneaza-icon {
  from { stroke-dashoffset: 120; }
  to   { stroke-dashoffset: 0; }
}
@keyframes apare-plin {
  from { opacity: 0; transform: scale(.4); }
  to   { opacity: 1; transform: none; }
}

.card__icon svg [stroke-linecap],
.card__icon svg path, .card__icon svg circle, .card__icon svg rect, .card__icon svg line,
.domain__icon svg path, .domain__icon svg circle, .domain__icon svg rect,
.stat-card__icon svg path, .stat-card__icon svg circle, .stat-card__icon svg rect,
.info-list__icon svg path, .info-list__icon svg circle, .info-list__icon svg rect {
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
}
/* elementele pline (punctele din desene) nu se pot desena — apar prin marire */
.card__icon svg [fill="currentColor"],
.domain__icon svg [fill="currentColor"],
.stat-card__icon svg [fill="currentColor"] {
  stroke-dasharray: none; stroke-dashoffset: 0;
  opacity: 0; transform-origin: center;
}

/* Dupa ce s-a desenat, traseul ramane intreg prin proprietatea in sine, nu prin
   `forwards`. Altfel, prima animatie de hover ar inlocui-o pe cea de desenare si
   iconul s-ar reface de la zero de fiecare data cand treci cu mouse-ul peste el. */
[data-reveal].is-visible .card__icon svg > *,
[data-reveal].is-visible .domain__icon svg > *,
[data-reveal].is-visible .stat-card__icon svg > *,
.info-list li .info-list__icon svg > * {
  stroke-dashoffset: 0;
  animation: deseneaza-icon .9s var(--ease) backwards;
}
[data-reveal].is-visible .card__icon svg [fill="currentColor"],
[data-reveal].is-visible .domain__icon svg [fill="currentColor"],
[data-reveal].is-visible .stat-card__icon svg [fill="currentColor"] {
  opacity: 1;
  animation: apare-plin .4s var(--ease) .55s backwards;
}
/* al doilea traseu porneste putin mai tarziu, ca desenul sa se compuna */
[data-reveal].is-visible .card__icon svg > *:nth-child(2),
[data-reveal].is-visible .domain__icon svg > *:nth-child(2),
[data-reveal].is-visible .stat-card__icon svg > *:nth-child(2) { animation-delay: .18s; }
[data-reveal].is-visible .card__icon svg > *:nth-child(3),
[data-reveal].is-visible .domain__icon svg > *:nth-child(3),
[data-reveal].is-visible .stat-card__icon svg > *:nth-child(3) { animation-delay: .32s; }

/* La trecerea cu mouse-ul, insemnul se ridica usor */
.card__icon, .domain__icon, .stat-card__icon {
  transition: transform .35s var(--ease), background-color .3s var(--ease), color .3s var(--ease);
}
.card:hover .card__icon { transform: translateY(-3px) scale(1.06); background: var(--brand-500); color: #fff; }
.domain:hover .domain__icon { transform: translateY(-3px) rotate(-4deg); background: rgba(255,255,255,.26); }
.stat-card:hover .stat-card__icon { transform: scale(1.08); }
.stat-card--accent:hover .stat-card__icon { background: rgba(107, 165, 255, .28); }

/* Săgeata din butoane si linkuri */
.btn:hover svg { transform: translateX(3px); }
.btn svg { transition: transform .25s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .card__icon svg > *, .domain__icon svg > *, .stat-card__icon svg > *, .info-list__icon svg > * {
    stroke-dasharray: none !important; stroke-dashoffset: 0 !important;
    opacity: 1 !important; transform: none !important; animation: none !important;
  }
}

/* =========================================================
   38. Fiecare desen are mișcarea lui, la trecerea cu mouse-ul
   (aceeași idee ca la seturile de iconuri animate, dar fără
    bibliotecă: numai CSS peste desenele noastre)
   ========================================================= */

/* Punctul de rotire e centrul desenului, nu colțul */
.card__icon svg, .domain__icon svg, .stat-card__icon svg,
.info-list__icon svg, .harta__pin svg { transform-origin: 50% 50%; }
.card__icon svg *, .domain__icon svg *, .stat-card__icon svg * { transform-origin: 50% 50%; }

/* Fara `transform-box: fill-box`, o rotatie intr-un SVG se face in jurul
   coltului din stanga-sus al desenului si arunca forma in afara cadrului. */
.card__icon svg > *, .domain__icon svg > *, .stat-card__icon svg > *,
.info-list__icon svg > *, [data-icon] > * {
  transform-box: fill-box;
  transform-origin: center;
}
[data-icon] { transform-box: fill-box; transform-origin: center; }

@keyframes roteste-usor { to { transform: rotate(90deg); } }
@keyframes clatina      { 0%,100%{transform:rotate(0)} 20%{transform:rotate(-12deg)}
                          40%{transform:rotate(10deg)} 60%{transform:rotate(-6deg)} 80%{transform:rotate(3deg)} }
@keyframes salta        { 0%,100%{transform:translateY(0)} 35%{transform:translateY(-3px)} }
@keyframes puls-inel    { 0%{transform:scale(1);opacity:1} 70%{transform:scale(1.35);opacity:0} 100%{opacity:0} }
@keyframes leagana      { 0%,100%{transform:rotate(0)} 30%{transform:rotate(-9deg)} 65%{transform:rotate(6deg)} }
@keyframes inoata       { 0%,100%{transform:translateX(0)} 50%{transform:translateX(2.5px)} }
@keyframes creste-bara  { from{transform:scaleY(.3)} to{transform:scaleY(1)} }

/* rotița de la „Implementare și achiziții" se rotește */
.card:hover [data-icon="gear"] > *:first-child { animation: roteste-usor 1.1s var(--ease) forwards; }
.card:hover [data-icon="gear"] > *:last-child  { animation: roteste-usor 1.6s var(--ease) forwards; }

/* plicul tresare, telefonul sună */
.card:hover [data-icon="mail"], .fab:hover [data-icon="mail"],
.info-list li:hover [data-icon="mail"] { animation: salta .5s var(--ease); }
.info-list li:hover [data-icon="phone"], .topbar a:hover [data-icon="phone"] { animation: clatina .6s var(--ease); }

/* ținta pulsează, ca un radar */
.stat-card:hover [data-icon="target"] > *:first-child { animation: puls-inel 1.1s var(--ease) infinite; }

/* graficul: linia urcă */
.stat-card:hover [data-icon="chart"] > *:last-child { animation: creste-bara .6s var(--ease); transform-origin: 50% 100%; }

/* moneda tresare, medalia se leagănă */
.stat-card:hover [data-icon="euro"]  { animation: salta .5s var(--ease); }
.stat-card:hover [data-icon="award"] { animation: leagana .7s var(--ease); }

/* frunza se leagănă, peștele înoată, spicul se apleacă */
.domain:hover [data-icon="leaf"]  { animation: leagana .8s var(--ease); }
.domain:hover [data-icon="fish"]  { animation: inoata .7s var(--ease) 2; }
.domain:hover [data-icon="wheat"] { animation: leagana .9s var(--ease); }
.domain:hover [data-icon="cow"]   { animation: salta .55s var(--ease); }

/* acul de pe hartă coboară în loc */
.harta__coperta:hover [data-icon="pin"] { animation: salta .6s var(--ease); }
.info-list li:hover [data-icon="pin"]   { animation: salta .5s var(--ease); }

/* ceasul: limba mare face un tur */
.info-list li:hover [data-icon="clock"] > *:last-child,
.topbar span:hover [data-icon="clock"] > *:last-child {
  animation: roteste-usor 1.2s var(--ease); transform-origin: 50% 50%;
}

/* pe telefon nu exista hover — desenele raman linistite */
@media (hover: none) {
  [data-icon] { animation: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  [data-icon], [data-icon] * { animation: none !important; }
}