@import url("fonts.css");

/* ==========================================================================
   TRUE SPRL · sistemul de design
   1. Tokens  2. Context luminos/întunecat  3. Reset  4. Tipografie
   5. Layout  6. Semnături  7. Header + nav  8. Butoane  9. Insigne
   10. Carduri  11. KPI  12. Echipa  13. Grafice  14. Stepper + progres
   15. Formular  16. FAQ  17. Toast, modal, tooltip  18. Hero-uri, CTA
   19. Footer  20. Reveal + motion  21. Print
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  /* Fundaluri și text */
  --bg-dark: #0B1A12;
  --bg-footer: #07110C;
  --surface-dark: #10241A;
  --card-dark: #163024;
  --border-dark: #2A4234;
  --bg-paper: #F7F4EC;
  --bg-alt: #EFEAE0;
  --surface: #FFFFFF;
  --border: #E4DED2;
  --border-strong: #C9C0AE;
  --chart-grid: #ECE7DC;
  --ink: #14231A;
  --ink-2: #3D4A42;
  --ink-mut: #5A665F;
  --ink-inv: #F3EFE6;
  --ink-inv-2: #B9C4BC;
  --ink-inv-mut: #8C9B91;

  /* Brand */
  --verde: #2E5A3F;
  --verde-hover: #24492F;
  --verde-activ: #1E3D2A;
  --verde-logo-dark: #4E8A63;
  --verde-linii-dark: #3F7A55;
  --tenta-verde: #E3ECE5;
  --tenta-verde-2: #C9DACD;
  --ocru: #CC8B2E;
  --ocru-saturat: #D28F26;
  --ocru-hover: #B97A22;
  --ocru-text: #8A5A12;
  --ocru-incandescent: #E8D0A6;
  --ocru-glow: #F6ECDA;
  --aur-1: #F6ECDA;
  --aur-2: #E8D0A6;
  --aur-3: #DFBD85;
  --aur-4: #8E6C26;
  --verde-mapa: #3B5C43;
  --tenta-ocru: #F8EBD6;

  /* Serii grafice (validate) */
  --serie-1: #27934E;
  --serie-2: #3E6DB5;
  --serie-3: #C07E1C;
  --pista: #D6ECDD;
  --serie-1-dark: #43A866;
  --serie-2-dark: #5E8FD8;
  --serie-3-dark: #C77A1F;

  /* Insigne */
  --badge-disp-bg: #E3F1E8;
  --badge-disp-fg: #17603A;
  --badge-lic-bg: #FBEBD2;
  --badge-lic-fg: #7F520C;
  --badge-adj-bg: #E7EBF3;
  --badge-adj-fg: #34466A;
  --badge-ex-fg: #7A4E0C;
  --badge-ex-line: #B5761A;
  --badge-conf-bg: #E3F1E8;
  --badge-conf-fg: #17603A;
  --badge-elab-bg: #E4EBF5;
  --badge-elab-fg: #2F558F;

  /* Fonturi */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-text: "Inter", "Segoe UI", Arial, sans-serif;

  /* Scara tipografică */
  --fs-hero: clamp(2.75rem, 1.6rem + 4.6vw, 5.25rem);
  --fs-display: clamp(2.5rem, 1.5rem + 3.4vw, 4.5rem);
  --fs-h2: clamp(2rem, 1.45rem + 2.1vw, 3.25rem);
  --fs-h3: clamp(1.375rem, 1.2rem + .6vw, 1.75rem);
  --fs-h4: 1.25rem;
  --fs-stat: clamp(3rem, 2rem + 3vw, 4.5rem);
  --fs-kpi: clamp(2.25rem, 1.7rem + 1.8vw, 3.25rem);
  --fs-price: 1.75rem;
  --fs-lead: clamp(1.125rem, 1rem + .4vw, 1.25rem);
  --fs-body: 1.0625rem;
  --fs-small: .875rem;
  --fs-eyebrow: .75rem;
  --fs-btn: .96875rem;
  --fs-chart: .875rem;
  --fs-micro: .75rem;

  /* Spațiere (bază 8) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 40px;
  --s-8: 56px;
  --s-9: 72px;
  --s-10: 96px;
  --section-y: clamp(64px, 8.5vw, 120px);

  /* Layout */
  --container: 1240px;
  --container-narrow: 760px;
  --gutter: 16px;
  --gap: 16px;
  --header-h: 64px;
  --cut: 24px;
  --radius: 4px;
  --radius-btn: 2px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --shadow-hover: 0 18px 40px -18px rgba(20, 35, 26, .28);

  /* Rețeaua-fagure (data-URI) */
  --fagure-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='24.249' viewBox='0 0 42 24.249'%3E%3Cpath d='M0 12.124L7 0H21L28 12.124L21 24.249H7Z M28 12.124H42' fill='none' stroke='%23F3EFE6' stroke-opacity='.06' stroke-width='1'/%3E%3C/svg%3E");
  --fagure-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='24.249' viewBox='0 0 42 24.249'%3E%3Cpath d='M0 12.124L7 0H21L28 12.124L21 24.249H7Z M28 12.124H42' fill='none' stroke='%232E5A3F' stroke-opacity='.07' stroke-width='1'/%3E%3C/svg%3E");
  --hex-ocru: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 24'%3E%3Cpath d='M1 12L7.5 1H20.5L27 12L20.5 23H7.5Z' fill='none' stroke='%23CC8B2E' stroke-width='1.5'/%3E%3C/svg%3E");
  --hex-ocru-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 24'%3E%3Cpath d='M1 12L7.5 1H20.5L27 12L20.5 23H7.5Z' fill='none' stroke='%23E0A04A' stroke-width='1.5'/%3E%3C/svg%3E");
  --hex-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 208'%3E%3Cpath d='M1 104L60.5 1H179.5L239 104L179.5 207H60.5Z' fill='none' stroke='%23E0A04A' stroke-opacity='.3' stroke-width='1.2'/%3E%3C/svg%3E");
  --hex-clip: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);

  color-scheme: light;
}

@media (min-width: 768px) {
  :root { --gutter: 32px; --gap: 20px; }
}
@media (min-width: 1024px) {
  :root { --gutter: 40px; --gap: 24px; --header-h: 80px; }
}

/* 2. Context luminos / întunecat ------------------------------------------- */
:root,
.theme-light,
.card,
.chart,
.modal {
  --fg: var(--ink);
  --fg-2: var(--ink-2);
  --fg-mut: var(--ink-mut);
  --line: var(--border);
  --accent-text: var(--ocru-text);
  --rule-side: var(--verde);
  --logo-line: var(--verde);
  --link: var(--verde);
  --focus: var(--ocru-hover);
  --hexnum: var(--hex-ocru);
  --btn-bg: var(--verde);
  --btn-fg: #FFFFFF;
  --btn-bg-hover: var(--verde-hover);
  --btn-bg-active: var(--verde-activ);
  --btn2-line: var(--verde);
  --btn2-fg: var(--verde);
  --btn2-line-hover: var(--verde);
  --btn2-fg-hover: var(--verde);
  --btn2-bg-hover: var(--tenta-verde);
  --btn2-bg-active: var(--tenta-verde-2);
  color: var(--fg);
}

.theme-dark,
.section--dark,
.page-hero,
.hero,
.cta-band,
.kpi-feature,
.site-footer,
.site-header--overlay,
.site-header.is-open {
  --fg: var(--ink-inv);
  --fg-2: var(--ink-inv-2);
  --fg-mut: var(--ink-inv-mut);
  --line: var(--border-dark);
  --accent-text: var(--ocru-incandescent);
  --rule-side: var(--verde-linii-dark);
  --logo-line: var(--aur-2);
  --link: var(--ocru-incandescent);
  --focus: var(--ocru-incandescent);
  --hexnum: var(--hex-ocru-dark);
  --btn-bg: var(--aur-2);
  --btn-fg: var(--bg-dark);
  --btn-bg-hover: var(--aur-1);
  --btn-bg-active: var(--aur-3);
  --btn2-line: rgba(243, 239, 230, .4);
  --btn2-fg: var(--ink-inv);
  --btn2-line-hover: var(--ocru-incandescent);
  --btn2-fg-hover: var(--ocru-incandescent);
  --btn2-bg-hover: transparent;
  --btn2-bg-active: rgba(224, 160, 74, .12);
  color: var(--fg);
  color-scheme: dark;
}

/* 3. Reset ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: clip;
  background: var(--bg-paper);
  color: var(--fg);
  font-family: var(--font-text);
  font-size: 1rem;
  line-height: 1.65;
  font-feature-settings: "cv11" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media (min-width: 768px) { body { font-size: var(--fs-body); } }
h1, h2, h3, h4, h5, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
table { border-collapse: collapse; width: 100%; }
[hidden] { display: none !important; }
:target, [id] { scroll-margin-top: calc(var(--header-h) + 24px); }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
:focus:not(:focus-visible) { outline: none; }

.sr-only {
  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;
  left: var(--s-4);
  top: -100px;
  z-index: 200;
  padding: var(--s-3) var(--s-4);
  background: var(--bg-dark);
  color: var(--ink-inv);
  font-weight: 600;
}
.skip-link:focus { top: var(--s-3); }

/* 4. Tipografie ------------------------------------------------------------ */
.display-hero, .display, .h2, .h3, .stat, .price,
h1, h2, h3, .kpi__value, .quote {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 0, "WONK" 0;
  font-optical-sizing: auto;
  color: var(--fg);
  text-wrap: balance;
  overflow-wrap: break-word;
}
.display-hero { font-size: var(--fs-hero); font-weight: 300; line-height: 1.05; letter-spacing: -.03em; }
.display, h1 { font-size: var(--fs-display); font-weight: 300; line-height: 1.04; letter-spacing: -.025em; }
.h2, h2 { font-size: var(--fs-h2); font-weight: 400; line-height: 1.08; letter-spacing: -.02em; }
.h3, h3 { font-size: var(--fs-h3); font-weight: 500; line-height: 1.2; letter-spacing: -.01em; }
.h4, h4 {
  font-family: var(--font-text);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.005em;
  color: var(--fg);
}
@media (min-width: 768px) { .h4, h4 { font-size: var(--fs-h4); } }

.display-hero em, .display em, .h2 em, h1 em, h2 em, .accent { font-style: italic; font-weight: 300; color: var(--accent-text); }

p, li { text-wrap: pretty; hyphens: manual; }
.prose > * + * { margin-top: 1em; }
.prose { max-width: 68ch; color: var(--fg-2); }
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--fg-2); max-width: 46ch; }
.small { font-size: var(--fs-small); line-height: 1.5; }
.muted { color: var(--fg-mut); }
.eyebrow {
  font-family: var(--font-text);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.stat { font-size: var(--fs-stat); font-weight: 300; line-height: 1; letter-spacing: -.02em; }
.price { font-size: var(--fs-price); font-weight: 400; line-height: 1.1; letter-spacing: -.01em; }
.kpi__value, .stat, .price { overflow-wrap: normal; }
.num, .stat, .price, .kpi__value, time, td, th, .chart-svg text { font-variant-numeric: tabular-nums lining-nums; }
.link {
  color: var(--link);
  font-weight: 600;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat;
  transition: background-size .25s var(--ease);
}
.link:hover { background-size: 100% 1.5px; }
.prose a, .text-link { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* 5. Layout ---------------------------------------------------------------- */
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.container--narrow { width: min(100% - 2 * var(--gutter), var(--container-narrow)); }

.section { position: relative; padding-block: var(--section-y); background: var(--bg-paper); }
.section--alt { background: var(--bg-alt); }
.section--surface { background: var(--surface); }
.section--dark { background: var(--bg-dark); overflow: hidden; }
.section--tight { padding-block: calc(var(--section-y) * .6); }
.section > .container { position: relative; z-index: 1; }

.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); }
.grid > * { grid-column: span 12; }
@media (min-width: 768px) {
  .md-6 { grid-column: span 6; }
}
@media (min-width: 1024px) {
  .grid > .col-3 { grid-column: span 3; }
  .grid > .col-4 { grid-column: span 4; }
  .grid > .col-5 { grid-column: span 5; }
  .grid > .col-6 { grid-column: span 6; }
  .grid > .col-7 { grid-column: span 7; }
  .grid > .col-8 { grid-column: span 8; }
  .grid > .col-start-8 { grid-column-start: 8; }
}

.grid-2, .grid-3, .grid-4 { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.stack > * + * { margin-top: var(--stack, var(--s-4)); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }
.mt-8 { margin-top: var(--s-8); }

/* Antet de secțiune: filet scurt + hexagon numerotat + eyebrow + contor */
.section-head { margin-bottom: clamp(40px, 5vw, 56px); }
.section-label { display: flex; align-items: center; gap: var(--s-3); margin-bottom: 20px; }
.section-label__count {
  margin-left: auto;
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--fg-mut);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 767px) {
  .section-label__count { display: none; }
  .section-label .tri-rule--short { display: none; }
}
.hexnum {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 24px;
  background: var(--hexnum) center / 100% 100% no-repeat;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  line-height: 1;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}
.section-head__row { display: grid; gap: var(--s-5); align-items: end; }
.section-head__intro { color: var(--fg-2); max-width: 46ch; }
@media (min-width: 1024px) {
  .section-head__row { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--gap); }
}

/* 6. Elemente-semnătură ---------------------------------------------------- */
/* Filetul tripartit verde | ocru | verde, goluri 6px */
.tri-rule {
  --a: var(--rule-side);
  --b: var(--ocru-saturat);
  --w: calc((100% - 12px) / 3);
  display: block;
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg,
    var(--a) 0 var(--w),
    transparent var(--w) calc(var(--w) + 6px),
    var(--b) calc(var(--w) + 6px) calc(2 * var(--w) + 6px),
    transparent calc(2 * var(--w) + 6px) calc(2 * var(--w) + 12px),
    var(--a) calc(2 * var(--w) + 12px) 100%);
}
.tri-rule--short {
  flex: none;
  width: 100px;
  background: linear-gradient(90deg,
    var(--a) 0 32px, transparent 32px 38px,
    var(--b) 38px 62px, transparent 62px 68px,
    var(--a) 68px 100%);
}
.tri-rule--title { width: 240px; height: 2px; margin-top: var(--s-5); }
.tri-rule--thick { height: 4px; }

/* Rețeaua-fagure: strat absolut, mascat radial */
.fagure {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--fagure-dark);
  background-size: 42px 24.249px;
  -webkit-mask-image: radial-gradient(var(--fagure-r, 70% 70%) at var(--fagure-x, 80%) var(--fagure-y, 50%), #000 0%, transparent 75%);
  mask-image: radial-gradient(var(--fagure-r, 70% 70%) at var(--fagure-x, 80%) var(--fagure-y, 50%), #000 0%, transparent 75%);
}
.fagure--light { background-image: var(--fagure-light); }

/* Colțul teșit 30° */
.cut { clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% calc(var(--cut) * 1.732), 100% 100%, 0 100%); border-radius: 0; }
.cut--sm { --cut: 14px; }

/* Glife hexagonale */
.hex-dot { display: inline-block; flex: none; width: 8px; height: 7px; background: currentColor; clip-path: var(--hex-clip); }
.hex-list > li { position: relative; padding-left: 18px; color: var(--fg-2); }
.hex-list > li + li { margin-top: var(--s-2); }
.hex-list > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 7px;
  height: 6px;
  background: var(--verde);
  clip-path: var(--hex-clip);
}

/* Logo inline (culorile din context) */
.lm-hex { fill: none; stroke: var(--logo-line); }
.lm-br { fill: var(--logo-line); }
.lm-t { fill: var(--ocru-saturat); }
.brand { display: inline-flex; align-items: center; gap: var(--s-3); color: var(--fg); }
.brand__mark { height: 42px; width: auto; flex: none; }
.brand__text { display: grid; gap: 3px; line-height: 1; }
.brand__name {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 0, "WONK" 0;
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: .2em;
}
.brand__tagline { font-size: .5625rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-mut); }
@media (max-width: 479px) { .brand__tagline { font-size: .5625rem; letter-spacing: .12em; white-space: nowrap; } }
@media (max-width: 399px) { .brand__tagline { display: none; } }

/* 7. Header + navigație ---------------------------------------------------- */
.demo-band {
  position: relative;
  z-index: 60;
  background: var(--tenta-ocru);
  color: var(--badge-ex-fg);
  border-bottom: 1px dashed var(--badge-ex-line);
  font-size: .8125rem;
  line-height: 1.4;
}
.demo-band__inner { display: flex; align-items: center; gap: var(--s-3); min-height: 40px; padding-block: 6px; }
.demo-band__text { flex: 1; }
.demo-band__text::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 8px;
  margin-right: 8px;
  vertical-align: .05em;
  background: var(--badge-ex-line);
  clip-path: var(--hex-clip);
}
.demo-band__close {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-right: -8px;
  color: var(--badge-ex-fg);
  border-radius: 2px;
}
.demo-band__close:hover { background: rgba(181, 118, 26, .14); }
.demo-band__close svg { width: 14px; height: 14px; }

.site-header { position: sticky; top: 0; z-index: 50; height: var(--header-h); transition: height .22s var(--ease); }
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(247, 244, 236, .94);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
  transition: opacity .3s var(--ease), background-color .3s var(--ease);
}
.site-header__bar { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); height: 100%; }
.site-header__rule { position: absolute; left: 0; right: 0; bottom: -3px; transition: opacity .3s var(--ease); }
.site-header--overlay { margin-bottom: calc(-1 * var(--header-h)); }
.site-header--overlay::before { background: rgba(11, 26, 18, .92); opacity: 0; }
.site-header--overlay .site-header__rule { opacity: 0; }
.site-header--overlay.is-scrolled::before,
.site-header--overlay.is-scrolled .site-header__rule { opacity: 1; }
.site-header.is-scrolled .brand__mark { transform: scale(.88); }
.brand__mark { transform-origin: left center; transition: transform .22s var(--ease); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header::before { background: var(--bg-paper); }
  .site-header--overlay::before { background: var(--bg-dark); }
}

.brand, .nav-toggle { position: relative; z-index: 2; }
.site-nav__list { display: flex; gap: 32px; }
.site-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--fg);
}
.site-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  height: 2px;
  background: var(--accent-text);
  transform: scaleX(0);
  transition: transform .22s var(--ease);
}
.site-nav__link:hover::after,
.site-nav__link[aria-current="page"]::after { transform: scaleX(1); }
.site-nav__extra { display: flex; align-items: center; gap: var(--s-4); }
.site-nav__mail { display: none; }
.site-nav__foot { display: none; }

.nav-toggle { display: none; place-items: center; width: 44px; height: 44px; margin-right: -10px; color: var(--fg); }
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 22px;
  height: 1.5px;
  background: currentColor;
  transition: transform .22s var(--ease), opacity .2s, background-color .2s;
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -7px; }
.nav-toggle__bars::after { top: 7px; width: 14px; left: 8px; background: var(--ocru-saturat); }
.is-open .nav-toggle__bars { background: transparent; }
.is-open .nav-toggle__bars::before { transform: translateY(7px) rotate(45deg); }
.is-open .nav-toggle__bars::after { transform: translateY(-7px) rotate(-45deg); width: 22px; left: 0; background: currentColor; }

@media (min-width: 1024px) {
  .site-nav { display: flex; align-items: center; gap: 36px; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .site-header .brand__tagline { display: none; }
  .site-nav, .site-nav__list { gap: 24px; }
}
@media (max-width: 1023px) {
  .nav-toggle { display: grid; }
  .site-nav {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    padding: calc(var(--nav-top, var(--header-h)) + 32px) var(--gutter) 32px;
    overflow-y: auto;
    background: var(--bg-dark) var(--fagure-dark) 0 0 / 42px 24.249px;
    color: var(--ink-inv);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s var(--ease), visibility 0s linear .25s;
  }
  .site-header.is-open .site-nav { opacity: 1; visibility: visible; transition: opacity .25s var(--ease); }
  .site-header.is-open::before { background: var(--bg-dark); opacity: 1; }
  .site-nav__list { flex-direction: column; gap: 4px; }
  .site-nav__link {
    font-family: var(--font-display);
    font-variation-settings: "SOFT" 0, "WONK" 0;
    font-size: clamp(1.875rem, 1.4rem + 2vw, 2.5rem);
    font-weight: 300;
    min-height: 56px;
  }
  .site-nav__link::after { bottom: 6px; right: auto; width: 48px; transform-origin: left; }
  .site-nav__extra { flex-direction: column; align-items: stretch; gap: var(--s-4); margin-top: var(--s-7); }
  .site-nav__mail { display: block; font-size: 1.125rem; color: var(--ink-inv-2); }
  .site-nav__foot { display: grid; gap: var(--s-4); margin-top: auto; padding-top: var(--s-7); }
  .site-nav__foot .brand__tagline { display: block; }
}
html.nav-open { overflow: hidden; }

/* Breadcrumb */
.breadcrumb { font-size: var(--fs-small); color: var(--fg-mut); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.breadcrumb li + li::before { content: "/"; margin-right: 6px; opacity: .6; }
.breadcrumb a:hover { color: var(--fg); }
.breadcrumb [aria-current] { color: var(--fg-2); }

/* 8. Butoane --------------------------------------------------------------- */
.btn {
  --h: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--h);
  padding: 0 28px;
  border: 1.5px solid transparent;
  border-radius: var(--radius-btn);
  font-family: var(--font-text);
  font-size: var(--fs-btn);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: .01em;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .22s var(--ease-out);
}
.btn svg { width: 16px; height: 16px; flex: none; transition: transform .22s var(--ease-out); }
.btn:hover svg.btn__arrow { transform: translateX(4px); }
.btn:active { transform: translateY(1px); }
.btn--sm { --h: 40px; padding: 0 18px; font-size: .875rem; }
.btn--lg { --h: 60px; padding: 0 32px; }
.btn--block { width: 100%; }
@media (max-width: 767px) {
  .btn--block-mobile { width: 100%; white-space: normal; }
}

.btn--primary { background: var(--btn-bg); color: var(--btn-fg); }
.btn--primary:hover { background: var(--btn-bg-hover); }
.btn--primary:active { background: var(--btn-bg-active); }
.btn--ocru { background: var(--ocru); color: var(--bg-dark); }
.btn--ocru:hover { background: var(--ocru-incandescent); }
.btn--ocru:active { background: var(--ocru-hover); }
.btn--secondary { background: transparent; border-color: var(--btn2-line); color: var(--btn2-fg); }
.btn--secondary:hover { background: var(--btn2-bg-hover); border-color: var(--btn2-line-hover); color: var(--btn2-fg-hover); }
.btn--secondary:active { background: var(--btn2-bg-active); }
.btn--ghost {
  --h: 44px;
  padding: 0;
  color: var(--link);
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 8px) / 0 1.5px no-repeat;
}
.btn--ghost:hover { background-size: calc(100% - 26px) 1.5px; }
.btn:disabled, .btn[aria-disabled="true"] { cursor: not-allowed; transform: none; }
.btn--primary:disabled, .btn--primary[aria-disabled="true"] { background: #C9D2CC; color: var(--ink-mut); }
.btn--secondary:disabled, .btn--secondary[aria-disabled="true"] { border-color: #A9B3AD; color: #A9B3AD; background: transparent; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-4); }
@media (max-width: 767px) {
  .btn-row--stack { flex-direction: column; align-items: stretch; }
  .btn-row--stack .btn { width: 100%; }
}

/* Chip (filtre, echipa extinsă) */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--fg);
  background: transparent;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.chip::before { content: ""; width: 8px; height: 7px; background: var(--ocru); clip-path: var(--hex-clip); }
button.chip:hover { border-color: var(--verde); }
.chip[aria-pressed="true"] { background: var(--verde); border-color: var(--verde); color: #FFFFFF; }
.chip[aria-pressed="true"]::before { background: var(--ocru-glow); }
.chip__count { font-variant-numeric: tabular-nums; opacity: .7; }

/* 9. Insigne --------------------------------------------------------------- */
.badge {
  --dot: currentColor;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: var(--fs-micro);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.badge::before { content: ""; flex: none; width: 7px; height: 6px; background: var(--dot); clip-path: var(--hex-clip); }
.badge--disponibil { background: var(--badge-disp-bg); color: var(--badge-disp-fg); --dot: var(--serie-1); }
.badge--licitatie { background: var(--badge-lic-bg); color: var(--badge-lic-fg); --dot: var(--serie-3); }
.badge--adjudecat { background: var(--badge-adj-bg); color: var(--badge-adj-fg); --dot: var(--serie-2); }
.badge--confirmat { background: var(--badge-conf-bg); color: var(--badge-conf-fg); --dot: var(--serie-1); }
.badge--elaborare { background: var(--badge-elab-bg); color: var(--badge-elab-fg); --dot: var(--serie-2); }
.badge--public { background: var(--surface); color: var(--verde); box-shadow: inset 0 0 0 1px var(--tenta-verde-2); --dot: var(--verde); }
.badge--exemplu {
  --ex-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 24'%3E%3Cpath d='M1.5 12L7.25 2H18.75L24.5 12L18.75 22H7.25Z' fill='none' stroke='%237A4E0C' stroke-width='2'/%3E%3Cpath d='M13 10.5V17' stroke='%237A4E0C' stroke-width='2.4'/%3E%3Ccircle cx='13' cy='7.2' r='1.5' fill='%237A4E0C'/%3E%3C/svg%3E");
  border: 1px dashed var(--badge-ex-line);
  border-radius: 2px;
  background: var(--tenta-ocru);
  color: var(--badge-ex-fg);
}
.badge--exemplu::before { width: 13px; height: 12px; background: var(--ex-icon) center / contain no-repeat; clip-path: none; }
.badge--sm { min-height: 22px; padding: 2px 8px; font-size: .6875rem; }
.theme-dark .badge--exemplu, .page-hero .badge--exemplu, .hero .badge--exemplu, .section--dark .badge--exemplu {
  --ex-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 24'%3E%3Cpath d='M1.5 12L7.25 2H18.75L24.5 12L18.75 22H7.25Z' fill='none' stroke='%23E0A04A' stroke-width='2'/%3E%3Cpath d='M13 10.5V17' stroke='%23E0A04A' stroke-width='2.4'/%3E%3Ccircle cx='13' cy='7.2' r='1.5' fill='%23E0A04A'/%3E%3C/svg%3E");
  background: rgba(224, 160, 74, .10);
  color: var(--ocru-incandescent);
  border-color: var(--ocru-incandescent);
}

/* Banda EXEMPLU de secțiune */
.example-note {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  padding: 14px 20px;
  background: repeating-linear-gradient(135deg, #FBF3E4 0 6px, var(--tenta-ocru) 6px 12px);
  border-left: 3px solid var(--badge-ex-line);
  color: var(--ink);
  font-size: var(--fs-small);
  line-height: 1.5;
}
.example-note strong { color: var(--badge-ex-fg); }
.source-note { margin-top: var(--s-3); font-size: .875rem; line-height: 1.45; color: var(--fg-mut); }

/* 10. Carduri -------------------------------------------------------------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--ink);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
@media (min-width: 768px) { .card { padding: var(--s-6); } }
.card::before {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  top: -1px;
  height: 3px;
  --a: var(--verde);
  --b: var(--ocru-saturat);
  --w: calc((100% - 12px) / 3);
  background: linear-gradient(90deg, var(--a) 0 var(--w), transparent var(--w) calc(var(--w) + 6px), var(--b) calc(var(--w) + 6px) calc(2 * var(--w) + 6px), transparent calc(2 * var(--w) + 6px) calc(2 * var(--w) + 12px), var(--a) calc(2 * var(--w) + 12px) 100%);
  opacity: 0;
  transition: opacity .22s var(--ease);
}
.card__title { margin-bottom: var(--s-3); }
.card__text { color: var(--ink-2); }
.card__foot { margin-top: auto; padding-top: var(--s-5); }
.card__num {
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 0, "WONK" 0;
  font-style: italic;
  font-weight: 300;
  font-size: 2.25rem;
  line-height: 1;
  color: var(--ocru-text);
  margin-bottom: var(--s-4);
}
.card__stretch::after { content: ""; position: absolute; inset: 0; z-index: 1; }
@media (hover: hover) {
  .card--hover:hover, .card--hover:focus-within {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
    border-color: var(--tenta-verde-2);
  }
  .card--hover:hover::before, .card--hover:focus-within::before { opacity: 1; }
}

/* Card activ */
.card--asset { padding: 0; overflow: hidden; }
.card--asset .card__body { display: flex; flex-direction: column; flex: 1; padding: 20px var(--s-5) var(--s-5); }
.asset-media {
  --g1: #10241A;
  --g2: #24492F;
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  color: var(--ink-inv);
  background: linear-gradient(135deg, var(--g1), var(--g2));
}
.asset-media::before, .asset-media::after {
  content: "";
  position: absolute;
  pointer-events: none;
  transition: transform .6s var(--ease-out);
}
.asset-media::before {
  inset: 0;
  background: var(--fagure-dark) 0 0 / 42px 24.249px, radial-gradient(90% 90% at 50% 45%, transparent 50%, rgba(7, 17, 12, .45) 100%);
}
.asset-media::after {
  width: 92%;
  aspect-ratio: 240 / 208;
  right: -24%;
  bottom: -30%;
  background: var(--hex-line) center / contain no-repeat;
}
.asset-media--imobil { --g1: #10241A; --g2: #24492F; }
.asset-media--teren { --g1: #13261A; --g2: #3A5A2E; }
.asset-media--utilaj { --g1: #0F1D1C; --g2: #24424A; }
.asset-media--auto { --g1: #111B22; --g2: #2C3F55; }
.asset-media--stoc { --g1: #1B170F; --g2: #4A3A1E; }
.asset-media__icon {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 28%;
  height: auto;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  color: var(--ink-inv);
  opacity: .92;
  transition: transform .5s var(--ease-out);
  --accent: var(--ocru-incandescent);
}
.asset-media__caption {
  position: absolute;
  left: 20px;
  bottom: 16px;
  display: grid;
  gap: 2px;
  font-size: .8125rem;
  line-height: 1.3;
  color: var(--ink-inv-2);
}
.asset-media__caption b { font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-inv-2); }
.asset-media__badges {
  position: absolute;
  inset: 12px calc(var(--cut, 0px) + 10px) auto 12px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s-2);
}
.asset-media__stamp {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  padding: 6px 14px;
  border: 1.5px solid var(--ink-inv);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--ink-inv);
  transform: translate(-50%, -50%) rotate(-8deg);
}
.card--asset.is-sold .asset-media { filter: saturate(.3); }
@media (hover: hover) {
  .card--asset:hover .asset-media__icon { transform: translate(-50%, calc(-50% - 4px)); }
  .card--asset:hover .asset-media::after { transform: translate(-8px, -8px); }
}
.asset-card__cat { margin-bottom: var(--s-2); }
.asset-card__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.asset-card__loc { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: var(--fs-small); color: var(--ink-mut); }
.asset-card__loc svg { width: 14px; height: 14px; flex: none; }
.asset-card__price { display: grid; gap: 4px; }
.asset-card__price .price { color: var(--ink); }
.price__unit { font-family: var(--font-text); font-size: .875rem; font-weight: 500; color: var(--ink-2); letter-spacing: 0; }
.price__label { font-size: var(--fs-micro); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mut); }
.asset-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-4);
  margin-top: auto;
  padding-top: var(--s-5);
  border-top: 1px solid var(--border);
}
.asset-card__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.asset-card__actions .btn { position: relative; z-index: 2; }

/* Specificații în celule cu hairlines */
.specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  margin: var(--s-5) 0;
  border-block: 1px solid var(--border);
}
.specs__item { padding: 12px 14px 12px 0; }
.specs__item + .specs__item { padding-left: 14px; border-left: 1px solid var(--border); }
.specs dt, .specs__label {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-mut);
}
.specs dd, .specs__value { margin-top: 4px; font-size: .9375rem; font-weight: 600; line-height: 1.35; color: var(--ink); }

/* Card plan */
.card--plan { gap: var(--s-5); }
@media (min-width: 1024px) {
  .card--plan { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-6) var(--s-7); }
}
.card--plan .plan__head { display: grid; gap: var(--s-3); }
.plan__meta { font-size: var(--fs-small); color: var(--ink-mut); }

/* 11. KPI: celule separate de hairlines ------------------------------------ */
.kpi-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
@media (min-width: 1024px) {
  .kpi-row { grid-template-columns: repeat(var(--kpi-cols, 4), minmax(0, 1fr)); }
}
.kpi {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--s-5) var(--s-4) var(--s-5) 0;
  border-bottom: 1px solid var(--line);
}
.kpi:nth-child(2n) { padding-left: var(--s-4); border-left: 1px solid var(--line); }
@media (min-width: 1024px) {
  .kpi, .kpi:nth-child(2n) { padding: var(--s-6) var(--s-5) var(--s-6) var(--s-5); border-left: 1px solid var(--line); border-bottom: 0; }
  .kpi:first-child { padding-left: 0; border-left: 0; }
}
.kpi__value { font-size: var(--fs-kpi); font-weight: 500; line-height: 1; letter-spacing: -.02em; color: var(--fg); }
.kpi__unit { font-size: .55em; font-weight: 400; color: var(--accent-text); letter-spacing: 0; }
.kpi__label { font-size: .9375rem; font-weight: 600; line-height: 1.35; color: var(--fg); }
.kpi__note { font-size: var(--fs-small); line-height: 1.45; color: var(--fg-mut); }
.kpi-row--compact .kpi__value { font-size: clamp(1.375rem, 1.2rem + .5vw, 1.625rem); font-weight: 400; }
.kpi-row--compact .kpi { padding-block: var(--s-4); }
.kpi-row--compact .kpi__label { font-size: var(--fs-micro); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-mut); order: -1; }
.kpi-feature { position: relative; padding: var(--s-6); background: var(--card-dark); color: var(--ink-inv); overflow: hidden; }
.kpi-feature .kpi__value { color: var(--ink-inv); font-size: var(--fs-stat); font-weight: 300; }
.kpi-feature .kpi__label { color: var(--ink-inv-2); margin-top: var(--s-3); }
[data-count] { display: inline-block; font-variant-numeric: tabular-nums; }

/* Credențiale (bara din hero) */
.cred-bar { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid rgba(243, 239, 230, .12); }
.cred-bar__item { padding: 20px 0; border-bottom: 1px solid rgba(243, 239, 230, .12); }
.cred-bar__value {
  display: block;
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 0, "WONK" 0;
  font-size: 1.375rem;
  font-weight: 400;
  line-height: 1.15;
  color: var(--fg);
}
.cred-bar__label { display: block; margin-top: 4px; font-size: var(--fs-small); color: var(--fg-mut); }
@media (min-width: 768px) {
  .cred-bar { grid-template-columns: repeat(var(--cred-cols, 4), minmax(0, 1fr)); }
  .cred-bar__item { padding: 24px 24px 28px; border-bottom: 0; border-left: 1px solid rgba(243, 239, 230, .12); }
  .cred-bar__item:first-child { padding-left: 0; border-left: 0; }
}

/* 12. Echipa --------------------------------------------------------------- */
.portrait {
  --cut: 24px;
  position: relative;
  max-width: 320px;
  padding: 6px;
  background: var(--tenta-verde-2);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% calc(var(--cut) * 1.732), 100% 100%, 0 100%);
}
.portrait__frame {
  --cut: 20px;
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--verde-activ);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% calc(var(--cut) * 1.732), 100% 100%, 0 100%);
}
.portrait__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
  filter: grayscale(.45) saturate(.75) contrast(1.04);
  transition: filter .6s var(--ease), transform .6s var(--ease);
}
.portrait__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(46, 90, 63, .10) 0%, rgba(30, 61, 42, .38) 100%),
    radial-gradient(120% 90% at 50% 25%, transparent 55%, rgba(11, 26, 18, .35) 100%);
  mix-blend-mode: multiply;
  pointer-events: none;
}
.portrait--boiciuc .portrait__frame img { object-position: 56% 0; transform: scale(1.7); transform-origin: 56% 4%; }
.portrait--florea .portrait__frame img { object-position: 50% 15%; }
@media (hover: hover) {
  .team-card:hover .portrait__frame img { filter: grayscale(.1) saturate(.95) contrast(1.02); }
}
.team-card { display: grid; gap: var(--s-5); align-content: start; }
.team-card__role { margin-top: 6px; }
.team-card__bio { color: var(--fg-2); }

.monogram {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 64px;
  height: 56px;
  background: var(--verde);
  clip-path: var(--hex-clip);
}
.monogram::before { content: ""; position: absolute; inset: 1.5px 2px; background: var(--tenta-verde); clip-path: var(--hex-clip); }
.monogram span {
  position: relative;
  font-family: var(--font-display);
  font-variation-settings: "SOFT" 0, "WONK" 0;
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--verde);
}
.collab { display: flex; gap: var(--s-4); align-items: flex-start; }
.collab__name { font-size: 1.125rem; font-weight: 600; line-height: 1.3; }
.collab__text { margin-top: 4px; font-size: var(--fs-small); color: var(--ink-2); }

/* 13. Grafice -------------------------------------------------------------- */
.chart {
  position: relative;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--ink);
}
@media (min-width: 768px) { .chart { padding: var(--s-6); } }
.chart__title { font-family: var(--font-text); font-size: 1.125rem; font-weight: 600; line-height: 1.3; color: var(--ink); }
.chart__sub { margin-top: 4px; font-size: var(--fs-small); color: var(--ink-mut); }
.chart__legend { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: var(--s-4); font-size: var(--fs-chart); color: var(--ink-2); }
.chart__legend li { display: inline-flex; align-items: center; gap: 8px; }
.swatch { width: 10px; height: 10px; border-radius: 2px; background: var(--c, var(--serie-1)); flex: none; }
.swatch--future { background: rgba(39, 147, 78, .45); box-shadow: inset 0 0 0 1px var(--serie-1); }
.chart__body { margin-top: var(--s-5); }
.chart__note { margin-top: var(--s-4); font-size: var(--fs-small); color: var(--ink-2); }
.chart-svg { width: 100%; height: auto; overflow: visible; }
.chart-svg text { font-family: var(--font-text); font-size: 12px; font-weight: 500; fill: var(--ink-mut); }
.chart-svg .chart-label { font-weight: 600; fill: var(--ink); }
.chart-svg .chart-label--accent { fill: var(--ocru-text); }
.chart-grid line { stroke: var(--chart-grid); stroke-width: 1; shape-rendering: crispEdges; }
.chart-base { stroke: var(--border-strong); stroke-width: 1; shape-rendering: crispEdges; }
.chart-sep { stroke: #DDD6C8; stroke-width: 1; stroke-dasharray: 3 4; }
.chart-bar { fill: var(--serie-1); transition: opacity .15s ease; }
.chart-bar--current { fill: var(--serie-3); }
.chart-bar--future { fill: rgba(39, 147, 78, .45); stroke: var(--serie-1); stroke-width: 1; }
.chart-bar--s2 { fill: var(--serie-2); }
[data-tip] { cursor: default; }
.chart-svg [data-tip]:focus { outline: none; }
.chart-svg [data-tip]:focus-visible { stroke: var(--ink); stroke-width: 2; }
.is-hovering [data-tip]:not(.is-hot) { opacity: .35; }

/* Bare orizontale cu pistă pală (grad de îndestulare) */
.hbars { display: grid; gap: 20px; }
.hbar { display: grid; gap: 8px; }
@media (min-width: 768px) {
  .hbar { grid-template-columns: 168px minmax(0, 1fr); align-items: center; gap: var(--s-4); }
}
.hbar__label { font-size: var(--fs-chart); font-weight: 600; color: var(--ink); }
.hbar__track { position: relative; display: flex; align-items: center; gap: 8px; }
.hbar__track::before {
  content: "";
  position: absolute;
  left: 0;
  right: 56px;
  height: 12px;
  border-radius: 4px;
  background: var(--pista);
}
.hbar__fill {
  position: relative;
  height: 12px;
  width: calc((100% - 56px) * var(--val, 0) / 100);
  border-radius: 0 4px 4px 0;
  background: var(--serie-1);
  transform-origin: left;
  transition: transform .8s var(--ease-out), opacity .15s ease;
}
.hbar__value { position: relative; font-size: var(--fs-chart); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* 14. Stepper hexagonal + bare de progres ---------------------------------- */
.stepper { display: grid; gap: 0; counter-reset: step; }
.stepper__step { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); align-content: start; gap: 4px 14px; padding-bottom: 28px; }
.stepper__step:last-child { padding-bottom: 0; }
.stepper__step::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 22px;
  bottom: 0;
  width: 2px;
  background: repeating-linear-gradient(180deg, #DDD6C8 0 4px, transparent 4px 7px);
}
.stepper__step.is-done::before { background: var(--verde); }
.stepper__step:last-child::before { display: none; }
.stepper__node {
  --node-line: var(--border-strong);
  --node-fill: var(--surface);
  --node-icon: none;
  position: relative;
  isolation: isolate;
  grid-row: span 2;
  width: 22px;
  height: 19px;
}
.stepper__node::before, .stepper__node::after { content: ""; position: absolute; clip-path: var(--hex-clip); }
.stepper__node::before { inset: 0; background: var(--node-line); }
.stepper__node::after { inset: 1.5px 2px; background: var(--node-icon) center / 11px no-repeat, var(--node-fill); }
.is-done > .stepper__node {
  --node-line: var(--verde);
  --node-fill: var(--verde);
  --node-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.4 6.3l2.4 2.4 4.8-5.2' fill='none' stroke='%23FFFFFF' stroke-width='1.8'/%3E%3C/svg%3E");
}
.is-current > .stepper__node {
  --node-line: var(--ocru);
  --node-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 11'%3E%3Cpath d='M1 5.5L3.6 1H8.4L11 5.5L8.4 10H3.6Z' fill='%23CC8B2E'/%3E%3C/svg%3E");
}
.is-current > .stepper__node::after { inset: 2px 2.5px; background-size: 8px; }
.stepper__pulse {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(204, 139, 46, .4);
  clip-path: var(--hex-clip);
  animation: step-pulse 2.4s ease-out infinite;
  pointer-events: none;
}
@keyframes step-pulse {
  from { transform: scale(1); opacity: .9; }
  to { transform: scale(1.6); opacity: 0; }
}
.stepper__label { font-size: var(--fs-chart); font-weight: 500; line-height: 1.3; color: var(--ink-mut); }
.is-current .stepper__label, .is-done .stepper__label { color: var(--ink); }
.is-current .stepper__label { font-weight: 600; }
.stepper__date { font-size: var(--fs-micro); font-weight: 500; color: var(--ink-mut); font-variant-numeric: tabular-nums; }
@media (min-width: 768px) {
  .stepper { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .stepper__step { grid-template-columns: none; justify-items: center; text-align: center; padding: 0 6px; gap: 6px; }
  .stepper__step::before {
    left: calc(50% + 11px);
    right: calc(-50% + 11px);
    top: 9px;
    bottom: auto;
    width: auto;
    height: 2px;
    background: repeating-linear-gradient(90deg, #DDD6C8 0 4px, transparent 4px 7px);
  }
  .stepper__node { grid-row: auto; margin-bottom: 6px; }
}
@media (max-width: 767px) {
  .stepper__step > .stepper__label, .stepper__step > .stepper__date { grid-column: 2; }
}

.progress { display: grid; gap: 8px; }
.progress__head { display: flex; justify-content: space-between; gap: var(--s-3); font-size: var(--fs-small); font-weight: 500; color: var(--fg-2); }
.progress__bar { display: flex; align-items: center; gap: 10px; }
.progress__track { position: relative; flex: 1; height: 10px; border-radius: 4px; background: var(--pista); overflow: hidden; }
.progress__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--val, 0) * 1%);
  border-radius: 0 4px 4px 0;
  background: var(--serie-1);
  transform-origin: left;
  transition: transform .9s var(--ease-out);
}
.progress__value { font-size: .875rem; font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums; }
.progress__note { font-size: var(--fs-small); color: var(--fg-mut); }
.progress--thin .progress__track { height: 6px; }
.js [data-reveal]:not(.is-in) .progress__fill,
.js [data-reveal]:not(.is-in) .hbar__fill { transform: scaleX(0); }

/* 15. Formular ------------------------------------------------------------- */
.form { display: grid; gap: var(--s-5); }
.form__row { display: grid; gap: var(--s-5); }
@media (min-width: 768px) { .form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.field { display: grid; gap: 6px; }
.field__label { font-size: .875rem; font-weight: 500; color: var(--ink-2); }
.field__label .req { color: var(--ocru-text); }
.input, .select, .textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-btn);
  background: var(--surface);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.4;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.textarea { min-height: 128px; resize: vertical; }
.select {
  appearance: none;
  padding-right: 40px;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%232E5A3F' stroke-width='1.75'/%3E%3C/svg%3E") right 14px center / 16px no-repeat;
}
.input::placeholder, .textarea::placeholder { color: #7D877F; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-mut); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--verde); box-shadow: 0 0 0 3px rgba(46, 90, 63, .18); }
.field.is-invalid .input, .field.is-invalid .textarea { border-color: #A3342A; }
.field__error { font-size: .8125rem; color: #A3342A; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: .9375rem; color: var(--ink-2); cursor: pointer; }
.check input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--verde); flex: none; }
.form__note { font-size: var(--fs-small); color: var(--ink-mut); }

/* 16. FAQ (accordion pe <details>) ----------------------------------------- */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: 22px 0;
  list-style: none;
  cursor: pointer;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--fg);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' fill='none' stroke='%238A5A12' stroke-width='1.75'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .25s var(--ease);
}
.faq__item[open] > .faq__q::after { transform: rotate(180deg); }
.faq__q:hover { color: var(--verde); }
.faq__a { padding: 0 0 24px; max-width: 68ch; color: var(--fg-2); }

/* 17. Toast, modal, tooltip ------------------------------------------------ */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 120;
  width: max-content;
  max-width: min(440px, calc(100vw - 32px));
  padding: 14px 18px;
  border-radius: var(--radius);
  background: var(--bg-dark);
  color: var(--ink-inv);
  box-shadow: 0 8px 24px rgba(11, 26, 18, .22);
  border-left: 3px solid var(--ocru);
  font-size: var(--fs-small);
  line-height: 1.45;
  opacity: 0;
  transform: translate(-50%, 12px);
  transition: opacity .2s ease, transform .25s var(--ease-out);
  pointer-events: none;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

.modal {
  width: min(960px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  overflow: auto;
}
.modal::backdrop { background: rgba(7, 17, 12, .72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.modal[open] { animation: modal-in .28s var(--ease-out); }
@keyframes modal-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
.modal__head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-5) var(--s-5) var(--s-4);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.modal__body { padding: var(--s-5); }
.modal__foot { display: flex; flex-wrap: wrap; gap: var(--s-3); padding: 0 var(--s-5) var(--s-5); }
@media (min-width: 768px) {
  .modal__head { padding: var(--s-6) var(--s-6) var(--s-4); }
  .modal__body { padding: var(--s-6); }
  .modal__foot { padding: 0 var(--s-6) var(--s-6); }
}
.modal__close {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  margin: -8px -10px 0 0;
  border-radius: 2px;
  color: var(--ink);
}
.modal__close:hover { background: var(--tenta-verde); }
.modal__close svg { width: 18px; height: 18px; }
.modal__grid { display: grid; gap: var(--s-6); }
@media (min-width: 768px) { .modal__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }

.chart-tip {
  position: fixed;
  z-index: 130;
  max-width: 260px;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: var(--bg-dark);
  color: var(--ink-inv);
  box-shadow: 0 8px 24px rgba(11, 26, 18, .22);
  font-size: var(--fs-chart);
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s ease;
}
.chart-tip.is-visible { opacity: 1; }
.chart-tip__title { display: block; font-weight: 600; margin-bottom: 2px; }
.chart-tip__line { display: block; color: var(--ink-inv-2); }

/* 18. Hero de pagină, CTA ------------------------------------------------- */
.hero, .page-hero { position: relative; overflow: hidden; background: var(--bg-dark); padding-top: var(--header-h); }
.page-hero { padding-bottom: clamp(48px, 7vw, 88px); background: var(--verde-mapa); }
.page-hero::before, .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(48% 56% at 80% 52%, rgba(224, 160, 74, .12) 0%, rgba(224, 160, 74, .04) 45%, transparent 70%),
    radial-gradient(60% 70% at 8% 0%, rgba(46, 90, 63, .35) 0%, transparent 60%);
}
.page-hero__ring {
  position: absolute;
  right: -8%;
  top: 50%;
  width: min(620px, 70vw);
  aspect-ratio: 240 / 208;
  transform: translateY(-46%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 208'%3E%3Cpath d='M1 104L60.5 1H179.5L239 104L179.5 207H60.5Z' fill='none' stroke='%234E8A63' stroke-opacity='.2' stroke-width='.8'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
}
.page-hero__inner { position: relative; z-index: 1; padding-top: clamp(40px, 6vw, 72px); }
.page-hero .breadcrumb { margin-bottom: var(--s-6); }
.page-hero .eyebrow { margin-bottom: var(--s-4); }
.page-hero__title { max-width: 16ch; }
.page-hero .lead { margin-top: var(--s-5); max-width: 56ch; }
.page-hero__badges { margin-top: var(--s-5); }

.cta-band {
  --cut: 24px;
  position: relative;
  overflow: hidden;
  padding: clamp(40px, 6vw, 72px) clamp(24px, 5vw, 64px);
  background: var(--verde-mapa);
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(50% 60% at 50% 110%, rgba(232, 208, 166, .25), transparent 70%);
}
.cta-band > :not(.fagure) { position: relative; }
.cta-band__title { max-width: 22ch; }
.cta-band__text { margin-top: var(--s-4); max-width: 56ch; color: var(--fg-2); font-size: var(--fs-lead); line-height: 1.55; }
.cta-band .btn-row { margin-top: var(--s-6); }
.cta-band--center { text-align: center; }
.cta-band--center .cta-band__title, .cta-band--center .cta-band__text { margin-inline: auto; }
.cta-band--center .btn-row { justify-content: center; }

/* 19. Footer --------------------------------------------------------------- */
.site-footer { position: relative; background: var(--bg-footer); color: var(--ink-inv-2); font-size: .9375rem; line-height: 1.6; }
.site-footer__rule { height: 4px; }
.site-footer__main { display: grid; gap: var(--s-7) var(--gap); padding-block: clamp(48px, 6vw, 80px); }
@media (min-width: 768px) { .site-footer__main { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .site-footer__main { grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 3fr) minmax(0, 2fr); } }
.site-footer .brand { margin-bottom: var(--s-5); }
.site-footer .brand__mark { height: 36px; }
.site-footer__title {
  font-family: var(--font-text);
  margin-bottom: var(--s-4);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-inv-mut);
}
.site-footer__list > li + li { margin-top: 6px; }
.site-footer address { font-style: normal; }
.site-footer a:not(.brand) { transition: color .18s ease; }
.site-footer a:not(.brand):hover { color: var(--ocru-incandescent); }
.site-footer__firm strong { color: var(--ink-inv); font-weight: 600; }
.site-footer__legal {
  padding-block: var(--s-5);
  border-top: 1px solid rgba(243, 239, 230, .12);
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--ink-inv-mut);
}
.site-footer__legal p { max-width: 110ch; }
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-3);
  padding-block: var(--s-4) var(--s-6);
  border-top: 1px solid rgba(243, 239, 230, .12);
  font-size: .8125rem;
  color: var(--ink-inv-mut);
}
.site-footer__top { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; }

/* 20. Reveal + mișcare ----------------------------------------------------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s var(--ease), transform .7s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
  .js [data-reveal] .progress__fill, .js [data-reveal] .hbar__fill { transform: none; }
  .stepper__pulse { display: none; }
}

/* Sprite SVG inline (simboluri pentru <use>) și lista de detalii */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.dl-rows { border-top: 1px solid var(--line); }
.dl-rows > div { display: grid; gap: 2px 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 768px) { .dl-rows > div { grid-template-columns: 150px minmax(0, 1fr); } }
.dl-rows dt { font-size: var(--fs-small); color: var(--fg-mut); }
.dl-rows dd { font-weight: 500; color: var(--fg); }

/* Catalogul de componente (numai components.html) */
.cat-block + .cat-block { margin-top: var(--s-9); }
.grid > .cat-block + .cat-block { margin-top: 0; }
.cat-title { margin-bottom: var(--s-5); padding-bottom: var(--s-3); border-bottom: 1px solid var(--line); }
.cat-code {
  display: inline-block;
  margin-bottom: var(--s-3);
  font-family: Consolas, "Courier New", monospace;
  font-size: .8125rem;
  color: var(--fg-mut);
}
.cat-demo { position: relative; padding: var(--s-6); border: 1px dashed var(--border-strong); border-radius: var(--radius); background: var(--bg-paper); overflow: hidden; }
.cat-demo.theme-dark { background: var(--bg-dark); border-color: var(--border-dark); }
.cat-demo--tall { min-height: 220px; }
.cat-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s-4); }
.cat-swatch { font-size: .8125rem; line-height: 1.4; }
.cat-swatch__chip { height: 56px; margin-bottom: 8px; border: 1px solid rgba(20, 35, 26, .12); border-radius: var(--radius); background: var(--c); }

/* 21. Print ---------------------------------------------------------------- */
@media print {
  .demo-band, .site-header, .nav-toggle, .toast, .chart-tip, .fagure, .page-hero__ring, .btn-row, .asset-card__actions { display: none !important; }
  body, .section, .section--alt, .section--dark, .hero, .page-hero, .cta-band, .site-footer {
    background: #FFFFFF !important;
    color: #000000 !important;
    --fg: #000000;
    --fg-2: #222222;
    --fg-mut: #444444;
  }
  .section { padding-block: 24px; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
  .card, .chart { break-inside: avoid; box-shadow: none; }
  a[href^="mailto:"]::after, a[href^="tel:"]::after { content: " (" attr(href) ")"; font-size: .85em; }
}

/* Corecturi QA: lizibilitate minima */
.demo-band { font-size: .875rem; }
.site-footer__bottom { font-size: .875rem; }
.site-footer__legal { font-size: .875rem; }

/* Cosmetizare v2: identitatea oficiala din mapa clientului */
.brand__mark--of { color: var(--logo-line); }
.brand__name-svg { display: block; height: 15px; width: auto; fill: var(--fg); }
.site-header .brand__name-svg { margin-bottom: 2px; }