@charset "UTF-8";
/* =============================================================================
   Solarsis — solarsis.ro
   Foaia de stil a site-ului. Macheta e desenată la 1920px lățime (desktop) și
   390px (mobil); valorile de mai jos interpolează fluid între cele două, ca
   pagina să arate la fel pe orice ecran, nu doar la cele două lățimi desenate.
   Punct de cotitură: 900px. Sub el, așezarea de pe telefon; peste, cea de birou.
   ========================================================================== */

/* --- fonturi --------------------------------------------------------------- */
@font-face { font-family: 'Rethink Sans'; src: url('../fonts/rethink-sans-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Rethink Sans'; src: url('../fonts/rethink-sans-medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Rethink Sans'; src: url('../fonts/rethink-sans-semibold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Rethink Sans'; src: url('../fonts/rethink-sans-bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap; }

/* --- variabile: culorile și scara fluidă ----------------------------------- */
:root {
  --blue: #0083ca;
  --blue-dark: #0d6ba3;
  --yellow: #ffdd00;
  --grey: #e6e6e6;
  --ink: #4d4d4d;
  --black: #000000;
  --white: #ffffff;
  --max: 1920px;
  /* margine laterală: pe ecrane mai late de 1920px conținutul rămâne centrat,
     dar fundalurile se întind până în marginile ferestrei */
  --edge: max(var(--pad), calc((100% - 1920px) / 2 + var(--pad)));

  --pad: clamp(1rem, -0.0833rem + 4.8148vw, 2.625rem);
  --gap: clamp(0.5rem, -0.0417rem + 2.4074vw, 1.3125rem);
  --fs: clamp(0.8125rem, 0.6875rem + 0.5556vw, 1rem);
  --lh: clamp(1.0938rem, 0.9229rem + 0.7593vw, 1.35rem);
  --fs-h1: clamp(2rem, 0.8333rem + 5.1852vw, 3.75rem);
  --lh-h1: clamp(1.9375rem, 0.8125rem + 5vw, 3.625rem);
  --fs-h2: clamp(1.5625rem, 0.7708rem + 3.5185vw, 2.75rem);
  --fs-t: clamp(1.0625rem, 0.7708rem + 1.2963vw, 1.5rem);
  --lh-t: clamp(1.25rem, 0.9583rem + 1.2963vw, 1.6875rem);
  --fs-num: clamp(1.625rem, 0.375rem + 5.5556vw, 3.5rem);
  --fs-btn: clamp(1.1875rem, 0.9792rem + 0.9259vw, 1.5rem);
  --h-btn: clamp(3.5rem, 2.9167rem + 2.5926vw, 4.375rem);
  --h-nav: clamp(3.75rem, 3.4167rem + 1.4815vw, 4.25rem);
  --fs-nav: clamp(0.9375rem, 0.8958rem + 0.1852vw, 1rem);
  --fs-sm: clamp(0.75rem, 0.625rem + 0.5556vw, 0.9375rem);
  --lh-sm: clamp(0.9375rem, 0.7292rem + 0.9259vw, 1.25rem);
  --p-card: clamp(0.75rem, 0.3333rem + 1.8519vw, 1.375rem);
}

@media (min-width: 900px) {
  :root {
    --pad: clamp(2.625rem, -0.0221rem + 4.7059vw, 5.625rem);
    --gap: clamp(1.3125rem, -0.011rem + 2.3529vw, 2.8125rem);
    --fs: clamp(1rem, 0.7794rem + 0.3922vw, 1.25rem);
    --lh: clamp(1.35rem, 1.3004rem + 0.0882vw, 1.4062rem);
    --fs-h1: clamp(3.75rem, -1.1029rem + 8.6275vw, 9.25rem);
    --lh-h1: clamp(3.625rem, -0.7868rem + 7.8431vw, 8.625rem);
    --fs-h2: clamp(2.75rem, -0.3382rem + 5.4902vw, 6.25rem);
    --fs-t: clamp(1.5rem, 0.3971rem + 1.9608vw, 2.75rem);
    --lh-t: clamp(1.6875rem, 0.6397rem + 1.8627vw, 2.875rem);
    --fs-num: clamp(3.5rem, -0.0294rem + 6.2745vw, 7.5rem);
    --fs-btn: clamp(1.5rem, 0.3971rem + 1.9608vw, 2.75rem);
    --h-btn: clamp(4.375rem, 0.7904rem + 6.3725vw, 8.4375rem);
    --h-nav: clamp(4.25rem, 3.0368rem + 2.1569vw, 5.625rem);
    --fs-nav: clamp(1rem, 0.8897rem + 0.1961vw, 1.125rem);
    --fs-sm: clamp(0.9375rem, 0.7721rem + 0.2941vw, 1.125rem);
    --lh-sm: clamp(1.25rem, 1.0294rem + 0.3922vw, 1.5rem);
    --p-card: clamp(1.375rem, 0.0515rem + 2.3529vw, 2.875rem);
  }
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: 'Rethink Sans', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  font-size: var(--fs);
  line-height: var(--lh);
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; }
picture { display: contents; }
img { height: auto; }

/* pentru text mic folosim albastrul mai închis: pe alb și pe gri trece pragul
   de contrast WCAG AA (4,5:1), pe care albastrul de brand nu îl atinge. */
a { color: var(--blue-dark); text-decoration: none; }
a:hover { color: var(--blue-dark); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
summary:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }

h1, h2, h3 { margin: 0; font-weight: 400; }
p { margin: 0; }
ul { margin: 0; padding: 0; }

/* ancorele interne nu trebuie să ajungă sub bara lipită */
[id] { scroll-margin-top: calc(var(--h-nav) + 0.75rem); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 0; top: -100px; z-index: 100;
  background: var(--yellow); color: #000; padding: 0.75rem 1.25rem; font-weight: 600;
}
.skip-link:focus { top: 0; color: #000; }

/* --- containere ------------------------------------------------------------ */
.wrap { padding-inline: var(--edge); }


.row { display: grid; gap: var(--gap); grid-template-columns: 1fr; }
/* Macheta de telefon păstrează două coloane, ca cea de birou. Sub 340px —
   telefoane foarte vechi — se trece pe o singură coloană, ca textul să rămână citibil. */
.row--2, .row--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 339.98px) { .row--2, .row--3 { grid-template-columns: 1fr; } }
@media (min-width: 900px) { .row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.row + .row { margin-top: var(--gap); }

.stack-gap { height: var(--gap); }

/* --- bara de navigare ------------------------------------------------------ */
.nav {
  position: sticky; top: 0; z-index: 40;
  background: var(--black);
  min-height: var(--h-nav);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding-inline: var(--edge);
  transition: background-color .18s ease;
}
/* pe Acasă bara stă transparentă peste hero până la prima derulare */
.nav--over { position: absolute; top: 0; left: 0; right: 0; background: transparent; z-index: 30; }
.nav--over.is-stuck { position: fixed; background: var(--black); }

.nav__logo { display: flex; align-items: center; flex: none; }
.nav__logo img { display: block; width: clamp(7rem, 4.6rem + 10.7vw, 16.5rem); height: auto; }
@media (min-width: 900px) { .nav__logo img { width: clamp(9rem, 2.382rem + 11.765vw, 16.5rem); } }

.nav__right { display: none; }
.nav__links { display: flex; align-items: center; gap: clamp(1rem, -1.2rem + 3.9vw, 2.625rem); }
.nav__links a { font-size: var(--fs-nav); line-height: 1; color: var(--white); }
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--yellow); }
.nav__rule { width: 1px; height: 1.75rem; background: rgba(255,255,255,.25); flex: none; }
.nav__tel { font-size: var(--fs-nav); line-height: 1; color: var(--white); font-weight: 600;
  white-space: nowrap; }
.nav__tel:hover { color: var(--yellow); }
.nav__wa { display: flex; align-items: center; gap: .7rem; font-size: var(--fs-nav); line-height: 1;
  color: var(--yellow); white-space: nowrap; }
.nav__wa:hover { color: var(--white); }
.nav__wa svg { width: 1.25em; height: 1.35em; }

/* butonul de meniu, pe ecrane mici */
.nav__burger {
  width: 2.75rem; height: 2.75rem; margin-right: -0.6rem;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-end;
  gap: 5px; background: none; border: 0; padding: 0; cursor: pointer; flex: none;
}
@media (min-width: 1000px) {
  .nav__right { display: flex; align-items: center; gap: clamp(1.25rem, -1.7rem + 4.5vw, 2.5rem); }
  .nav__burger { display: none; }
}
.nav__burger span { display: block; width: 26px; height: 2px; background: var(--white);
  transition: transform .2s ease, opacity .2s ease; }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 39;
  background: var(--black);
  padding: calc(var(--h-nav) + 2rem) var(--edge) 2rem;
  display: flex; flex-direction: column; gap: 1.5rem;
  overflow-y: auto;
}
.menu[hidden] { display: none; }
.menu a { color: var(--white); font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2rem); line-height: 1.2; }
.menu a:hover, .menu a[aria-current="page"] { color: var(--yellow); }
.menu__sep { height: 1px; background: rgba(255,255,255,.18); }
.menu__contact { display: flex; flex-direction: column; gap: .9rem; font-size: 1.125rem; }
.menu__contact a { font-size: 1.125rem; font-weight: 600; }
.menu__contact .is-wa { color: var(--yellow); }
body.menu-open { overflow: hidden; }

/* --- hero ------------------------------------------------------------------ */
.hero { position: relative; overflow: hidden;
  height: clamp(30rem, 51.5625vw, 61.875rem); }
.hero--portofoliu { height: clamp(27.5rem, 51.6667vw, 62rem); }
.hero--home { height: clamp(37.5rem, 56.25vw, 75rem); }

.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__scrim {
  position: absolute; left: 0; right: 0; top: 0; height: 42%;
  background: linear-gradient(to bottom, rgba(0,0,0,.72) 0%, rgba(0,0,0,.5) 22%,
    rgba(0,0,0,.34) 38%, rgba(0,0,0,.2) 57%, rgba(0,0,0,.07) 79%, rgba(0,0,0,0) 100%);
}
.hero--home .hero__scrim {
  height: 58%;
  background: linear-gradient(to bottom, rgba(0,0,0,.95) 0%, rgba(0,0,0,.72) 8%,
    rgba(0,0,0,.55) 15%, rgba(0,0,0,.36) 25%, rgba(0,0,0,.26) 35%, rgba(0,0,0,.15) 47%,
    rgba(0,0,0,.07) 66%, rgba(0,0,0,0) 100%);
}
.hero__in {
  position: relative; z-index: 2; height: 100%;
  padding: calc(var(--h-nav) + var(--pad) * 0.45) var(--edge) var(--pad);
  display: flex; flex-direction: column;
}
.hero--home .hero__in { padding-top: calc(var(--h-nav) + var(--pad) * 0.75); }
/* Pe paginile interioare bara neagră stă deasupra fotografiei, deci conținutul
   heroului nu mai trebuie să o ocolească: 56px la 1920, ca în machetă. */
.hero__in--sub { padding-top: clamp(2.25rem, 1.93rem + 1.307vw, 3.5rem); }
.hero__spacer { flex: 1 1 auto; min-height: 1rem; }

.h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); color: var(--white); font-weight: 400; }

.hero__buttons { display: flex; flex-direction: column; gap: var(--gap);
  width: min(100%, 848px); }
.hero__buttons--narrow { width: min(100%, 550px); }

/* hero-ul de pe Acasă: cer, Soarele Solarsis, panouri */
.hero__sky, .hero__panels { position: absolute; left: 0; right: 0; overflow: hidden; }
.hero__sky img, .hero__panels img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__sky { top: 0; bottom: 40%; }
.hero__panels { bottom: 0; height: 40%; z-index: 1; }
.hero__sun {
  position: absolute; left: 8.44%; width: 84.8%; bottom: 40%; z-index: 0;
  transform: translateY(20.6%);
  animation: sunrise-mobil 1.8s cubic-bezier(.18,.86,.36,1) .15s both;
}
.hero__sun img { display: block; width: 100%; height: auto; }
@keyframes sunrise-mobil {
  from { transform: translateY(100%); }
  to   { transform: translateY(20.6%); }
}
@keyframes sunrise-birou {
  from { transform: translateY(100%); }
  to   { transform: translateY(49.8%); }
}
@media (min-width: 900px) {
  .hero__sun { transform: translateY(49.8%);
    animation: sunrise-birou 2.8s cubic-bezier(.18,.86,.36,1) .15s both; }
}
@media (prefers-reduced-motion: reduce) { .hero__sun { animation: none; } }

/* --- titluri de secțiune --------------------------------------------------- */
.h2 {
  font-size: var(--fs-h2); line-height: 1;
  font-weight: 500; color: var(--blue);
  padding: clamp(1.25rem, .3rem + 4.2vw, 3.125rem) var(--edge) clamp(.75rem, .1rem + 2.9vw, 1.75rem);
}

/* --- butoane --------------------------------------------------------------- */
.btn {
  min-height: var(--h-btn);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .6rem var(--p-card);
  font-size: var(--fs-btn); line-height: 1.15;
}
.btn svg { flex: none; width: clamp(1.5rem, .9rem + 2.6vw, 3.0625rem); height: auto; }
.btn--blue { background: var(--blue); color: var(--white); }
.btn--blue:hover { background: var(--blue-dark); color: var(--white); }
.btn--white { background: var(--white); color: var(--blue); }
.btn--white:hover { background: var(--yellow); color: #000; }
.btn--outline { border: 2px solid var(--blue); color: var(--blue); }
.btn--outline:hover { background: var(--blue); color: var(--white); }
.btn--outline:hover svg { color: var(--white); }

.cta { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-size: var(--fs-t); line-height: 1.15; color: inherit; }
.cta svg { flex: none; width: clamp(1.05rem, .55rem + 2.2vw, 3.0625rem); height: auto; }
.cta:hover { color: var(--yellow); }

/* --- bara de încredere ----------------------------------------------------- */
.trust {
  background: var(--grey);
  padding: clamp(.6rem, .1rem + 2.2vw, 1.4rem) var(--edge);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(.5rem, -.4rem + 4vw, 3.75rem);
}
.trust__i { display: flex; align-items: center; gap: clamp(.6rem, .1rem + 2.2vw, 1.5rem); }
.trust__i img { display: block; height: clamp(2.125rem, 1.1rem + 4.6vw, 4.75rem); width: auto; }
.trust__i img.is-wide { height: auto; width: clamp(7rem, 3.6rem + 15.1vw, 15.3125rem); }
.trust__k { font-weight: 600; color: var(--blue); }
.trust__v { color: var(--ink); font-size: var(--fs-sm); line-height: var(--lh-sm); }
.trust__rule { display: none; width: 1px; align-self: stretch; background: rgba(0,0,0,.16); flex: none; }
.trust__cta { display: flex; align-items: center; gap: .75rem; color: var(--blue);
  font-size: var(--fs-sm); line-height: 1; }
.trust__cta svg { width: clamp(.95rem, .5rem + 2vw, 2.125rem); height: auto; }
@media (min-width: 900px) {
  .trust { flex-wrap: nowrap; }
  .trust__rule { display: block; }
  .trust__cta { margin-left: auto; font-size: clamp(1rem, .4rem + 1.1vw, 1.5rem); flex: none; }
}

/* --- banda Casa Verde ------------------------------------------------------ */
.cv { display: grid; grid-template-columns: 1fr; }
@media (min-width: 900px) { .cv { grid-template-columns: 892fr 848fr; } }
.cv__text {
  background: var(--yellow); color: #000;
  display: flex; flex-direction: column; justify-content: space-between; gap: 1.25rem;
  padding: var(--p-card);
}
.cv__h { font-size: var(--fs-t); line-height: var(--lh-t); }
.cv__b { margin-top: .8em; }
/* Macheta desenează banda Casa Verde la 848×405: fotografia se decupează la
   forma aceea, nu-și impune proporția proprie (altfel banda crește cu 160px). */
.cv__img { position: relative; overflow: hidden; aspect-ratio: 848 / 405; }
.cv__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cv__strip {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: rgba(255,255,255,.78);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  display: flex; align-items: center; gap: clamp(.7rem, .1rem + 2.6vw, 1.625rem);
  padding: clamp(.5rem, .1rem + 1.8vw, 1rem) clamp(.8rem, .2rem + 2.6vw, 1.875rem);
}
.cv__strip img { display: block; width: clamp(5.75rem, 2.4rem + 14.9vw, 12.5rem); height: auto; }
.cv__strip span { color: var(--ink); font-size: var(--fs-sm); line-height: var(--lh-sm); }

/* --- cardul cu fotografie -------------------------------------------------- */
.photocard { background: var(--blue); display: flex; flex-direction: column; }
/* Macheta desenează cardul cu fotografie la 990px înălțime la 1920px lățime. */
@media (min-width: 900px) {
  .photocard { min-height: clamp(29rem, 0.028rem + 51.539vw, 61.875rem); }
}
.photocard__img { position: relative; overflow: hidden; aspect-ratio: 848 / 608; }
.photocard__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 24%;
  background: linear-gradient(to top, rgba(0,0,0,.95) 0%, rgba(0,0,0,.62) 40%,
    rgba(0,0,0,.25) 72%, rgba(0,0,0,0) 100%);
}
.photocard__label {
  position: absolute; left: var(--p-card); bottom: .35em;
  font-size: var(--fs-t); line-height: var(--lh-t); color: var(--yellow);
}
.photocard__body {
  flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-between;
  gap: 1.25rem; padding: var(--p-card); color: var(--white);
}

/* --- cardul „De ce Solarsis" ----------------------------------------------- */
.feature {
  background: var(--blue); color: var(--white);
  display: flex; flex-direction: column; gap: 1rem;
  padding: var(--p-card);
}
/* Macheta desenează cardurile „De ce Solarsis?" la 810px înălțime, cu textul sus
   și îndemnul jos. Pe telefon rămân pe măsura textului, ca în macheta de 390px. */
@media (min-width: 900px) {
  .feature { min-height: clamp(23.75rem, 0.0375rem + 42.16vw, 50.625rem); }
}
.feature__icon { display: flex; align-items: center; justify-content: center;
  min-height: clamp(4.5rem, 1rem + 15.5vw, 19.75rem); }
.feature__icon svg { width: auto; height: clamp(4.25rem, 0.936rem + 13.595vw, 17.25rem); }
.feature__title { font-size: var(--fs-t); line-height: var(--lh-t); color: var(--yellow); }
.feature__body { flex: 1 1 auto; }

/* --- cardul gri ------------------------------------------------------------ */
.gcard { background: var(--grey); display: flex; padding: var(--p-card); gap: 1rem; }
/* Macheta desenează cardul gri la 270px înălțime la 1920px lățime. */
@media (min-width: 900px) {
  .gcard { min-height: clamp(7.9rem, 0rem + 14.059vw, 16.875rem); }
}
.gcard__text { flex: 1 1 auto; min-width: 0; }
.gcard__title { font-size: var(--fs-t); line-height: var(--lh-t); color: var(--blue); }
.gcard__body { margin-top: .5em; color: var(--ink); max-width: 25em; }
.gcard__icon { flex: none; display: flex; align-items: center; justify-content: center;
  width: clamp(3rem, -0.377rem + 13.856vw, 16.25rem); }
.gcard__icon svg { width: auto; height: clamp(2rem, -0.294rem + 9.4118vw, 11rem); }
@media (max-width: 899.98px) {
  .gcard { flex-direction: column-reverse; align-items: stretch; gap: .5rem; }
  .gcard__icon { width: auto; justify-content: flex-end; }
}
/* În machetă coloana pictogramei ține până în marginea din dreapta a cardului,
   iar textul are toată lățimea rămasă. Cu spațiu în plus acolo, titlul se rupe
   pe un rând în plus și cardul crește peste cele 270px desenate. */
@media (min-width: 900px) {
  .gcard { padding-right: 0; gap: 0; }
}

/* --- cardul de certificat -------------------------------------------------- */
.cert__badge { flex: none; display: flex; align-items: center; justify-content: center;
  width: clamp(3rem, -0.377rem + 13.856vw, 16.25rem); }
.cert__badge img { display: block; height: clamp(2.6rem, 0.395rem + 9.046vw, 11.25rem); width: auto; }
.cert__badge img.is-wide { height: auto; width: clamp(7rem, 4.833rem + 8.889vw, 15.5rem); }
@media (max-width: 899.98px) {
  .cert__badge { width: auto; justify-content: flex-end; }
}

/* --- blocul albastru + fotografie ------------------------------------------ */
.split { display: grid; grid-template-columns: 1fr; }
@media (min-width: 900px) { .split { grid-template-columns: 892fr 848fr; } }
.split__text {
  background: var(--blue); color: var(--white);
  display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem;
  padding: var(--p-card);
}
.split__body > * + * { margin-top: 1.1em; }
.split__lead { font-weight: 600; }
/* Pe telefon macheta desenează fotografia blocului albastru la 354×339 —
   aproape pătrată, nu o bandă subțire. */
.split__img { position: relative; overflow: hidden; aspect-ratio: 354 / 339; }
@media (min-width: 900px) { .split__img { aspect-ratio: auto; } }
/* Misiunea și Viziunea: macheta le desenează la 811px înălțime, cu fotografia
   mare și îndemnul așezat jos. Pe Servicii blocul rămâne pe măsura textului. */
@media (min-width: 900px) {
  .split--tall { min-height: clamp(23.77rem, 0.017rem + 42.226vw, 50.6875rem); }
}
.split__img img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; }

/* --- „Cum lucrăm": traseul vertical ---------------------------------------- */
.vstep { display: flex; padding-bottom: clamp(1.25rem, .5rem + 3.3vw, 3.5rem); }
.vstep:last-child { padding-bottom: 0; }
.vstep__n { flex: none; width: clamp(2.5rem, -0.208rem + 11.111vw, 13.125rem);
  font-size: var(--fs-num); line-height: .9; font-weight: 500; color: var(--blue); }
.vstep__rail { flex: none; width: clamp(1.5rem, .3rem + 5.3vw, 5.75rem);
  position: relative; align-self: stretch; }
.vstep__rail::before {
  content: ""; position: absolute;
  left: clamp(.3rem, -.1rem + 1.9vw, 2.19rem); top: clamp(1.4rem, .5rem + 3.9vw, 2.5rem);
  bottom: calc(-1 * clamp(1.25rem, .5rem + 3.3vw, 3.5rem));
  width: 2px; background: var(--grey);
}
.vstep:last-child .vstep__rail::before { display: none; }
.vstep__dot {
  position: absolute; left: 0; top: clamp(.35rem, .1rem + 1.1vw, .5rem);
  width: clamp(.75rem, .2rem + 2.4vw, 1.5rem); height: clamp(.75rem, .2rem + 2.4vw, 1.5rem);
  border-radius: 50%; background: var(--yellow);
}
@media (min-width: 900px) { .vstep__dot { left: clamp(.5rem, -0.382rem + 1.569vw, 1.5rem); } }
.vstep__t { flex: 1 1 auto; min-width: 0; }
.vstep__h { font-size: var(--fs-t); line-height: var(--lh-t); color: var(--blue); }
.vstep__b { margin-top: .5em; color: var(--ink); max-width: 54em; }

/* --- echipa ---------------------------------------------------------------- */
.team { background: var(--blue); display: flex; flex-direction: column; }
.team__img { position: relative; overflow: hidden; aspect-ratio: 550 / 475; }
.team__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.team__name { position: absolute; left: var(--p-card); bottom: .3em;
  font-size: var(--fs-t); line-height: var(--lh-t); color: var(--yellow); }
.team__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: .9rem;
  padding: var(--p-card); color: var(--white); }
.team__role { color: rgba(255,255,255,.85); }
.team__bio { flex: 1 1 auto; }

/* --- portofoliu: galerie în cascadă ---------------------------------------- */
/* Fotografiile de pe șantier vin și pe lat, și pe înalt. Într-o grilă cu
   înălțime fixă jumătate din ele ar fi tăiate, așa că fiecare își păstrează
   proporțiile și se așază în coloane. */
.galerie { columns: 2; column-gap: var(--gap); }
@media (min-width: 1100px) { .galerie { columns: 3; } }
.lucrare { break-inside: avoid; margin: 0 0 var(--gap); overflow: hidden;
  background: var(--grey); }
.lucrare img { display: block; width: 100%; height: auto; }

/* --- contact --------------------------------------------------------------- */
.tile { background: var(--blue); color: var(--white); display: flex; align-items: center;
  gap: 1rem; padding: var(--p-card); }
/* Macheta desenează dalele de contact la 180px, cu pictograma aproape cât
   caseta: marginea de sus și de jos e mai strânsă decât la restul cardurilor. */
@media (min-width: 900px) {
  .tile { padding-block: clamp(0.6375rem, 0.124rem + 0.912vw, 1.219rem); padding-right: 0; }
}
.tile__v { flex: 1 1 auto; font-size: var(--fs-t); line-height: var(--lh-t); }
.tile__v a { color: var(--white); display: block; }
.tile__v a:hover { color: var(--yellow); }
.tile__i { flex: none; display: flex; align-items: center; justify-content: center;
  width: clamp(2.5rem, -0.463rem + 12.157vw, 14.125rem); }
.tile__i svg { width: auto; height: clamp(1.6rem, -0.235rem + 7.529vw, 8.8rem); }

.wa-row { background: var(--blue); color: var(--white); display: flex; align-items: center;
  gap: 1rem; padding: var(--p-card); margin-top: var(--gap); }
.wa-row:hover { background: var(--blue-dark); color: var(--white); }
.wa-row__t { font-size: var(--fs-t); line-height: var(--lh-t); }
.wa-row__s { margin-top: .35em; color: rgba(255,255,255,.85); font-size: var(--fs-sm);
  line-height: var(--lh-sm); }
.wa-row__i { margin-left: auto; flex: none; display: flex; align-items: center; }
.wa-row__i svg { width: auto; height: clamp(1.9rem, 0.014rem + 7.739vw, 9.3rem); }
/* aceeași poveste ca la dale: în machetă rândul de WhatsApp are tot 180px */
@media (min-width: 900px) {
  .wa-row { padding-block: clamp(0.453rem, 0rem + 0.809vw, 0.969rem); }
}

.cover-note { margin-top: var(--gap); color: var(--ink); }

.form { background: var(--grey); padding: var(--p-card); }
.form__h { font-size: var(--fs-t); line-height: var(--lh-t); color: var(--blue);
  margin-bottom: 1.2em; }
.field { margin-bottom: clamp(1rem, .3rem + 3.1vw, 3.0625rem); }
.field__l { display: block; font-size: var(--fs); line-height: 1; color: var(--blue-dark);
  margin-bottom: .8em; }
.field input, .field textarea {
  display: block; width: 100%; background: var(--white); border: 0;
  font: inherit; font-size: max(1rem, var(--fs)); color: #000;
  padding: 0 .9rem; height: clamp(2.875rem, 1.6rem + 5.6vw, 5.625rem);
}
.field textarea { padding: .9rem; height: clamp(9.375rem, 3.5rem + 26vw, 22.5rem);
  resize: vertical; line-height: 1.45; }
.consent { display: flex; align-items: flex-start; gap: .8rem; margin-bottom: 1.5rem; }
.consent input { flex: none; width: 1.25rem; height: 1.25rem; margin: .15rem 0 0;
  accent-color: var(--blue); }
.consent label { font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--ink); }
.form__msg { padding: 1rem var(--p-card); margin-bottom: 1.25rem; line-height: 1.45; }
.form__msg--ok { background: var(--blue); color: #fff; }
.form__msg--err { background: #fff; border-left: 6px solid #c0392b; color: #000; }

.addr { background: var(--grey); padding: var(--p-card); }
.addr__k { color: var(--ink); margin-bottom: .35em; }
.addr__k + .addr__t + .addr__k { margin-top: 1.2em; }
.addr__t { font-size: var(--fs-t); line-height: var(--lh-t); color: var(--blue); }

.map { position: relative; overflow: hidden; background: var(--grey);
  /* macheta de telefon desenează harta la 354×487, nu pe jumătate de ecran */
  aspect-ratio: 354 / 487; margin-top: var(--gap); }
@media (min-width: 900px) { .map { aspect-ratio: 848 / 1075; } }
.map img, .map iframe { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; border: 0; }
.map__ask {
  position: absolute; inset: 0; background: rgba(0,0,0,.62); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1rem; text-align: center; padding: var(--p-card);
}
.map__ask p { max-width: 34ch; }
.map__ask button { font: inherit; font-weight: 600; background: var(--yellow); color: #000;
  border: 0; padding: .85rem 1.4rem; cursor: pointer; }

/* --- banda de acreditări + subsol ------------------------------------------ */
.accred {
  background: var(--grey);
  padding: clamp(.9rem, .2rem + 2.9vw, 1.9rem) var(--edge);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(.7rem, .1rem + 2.9vw, 2.875rem);
}
.accred__i { display: flex; align-items: center; gap: clamp(.7rem, .2rem + 2.2vw, 1.625rem); }
.accred__i img.is-afm { width: clamp(7.375rem, 3.4rem + 17.7vw, 14.125rem); height: auto; }
.accred__i img.is-anre { height: clamp(2.25rem, 1.2rem + 4.7vw, 4.375rem); width: auto; }
.accred__t { color: var(--ink); font-size: var(--fs-sm); line-height: var(--lh-sm); }
.accred__t b { color: #000; font-weight: 600; }
.accred__rule { display: none; width: 1px; height: 3.875rem; background: rgba(0,0,0,.16); flex: none; }
@media (min-width: 900px) { .accred { flex-wrap: nowrap; } .accred__rule { display: block; } }

.foot {
  background: var(--black); color: var(--white);
  /* 34px pe telefon, 67,5px la 1920 — banda neagră iese fix 405px, ca-n machetă */
  padding: clamp(2.125rem, 1.591rem + 2.1895vw, 4.219rem) var(--edge);
  display: flex; flex-direction: column; gap: 1.75rem;
}
@media (min-width: 900px) { .foot { flex-direction: row; justify-content: space-between;
  align-items: flex-start; gap: 3rem; } }
.foot__h { font-size: var(--fs-t); line-height: var(--lh-t); margin-bottom: .5em; }
.foot__g { font-weight: 600; }
.foot__g + .foot__g { margin-top: 1.1em; }
.foot a { color: var(--white); }
.foot a:hover { color: var(--yellow); }
.foot__logo { flex: none; align-self: flex-start; }
.foot__logo img { display: block; width: clamp(15rem, 5.5rem + 39.5vw, 53.375rem); height: auto; }

.legal {
  background: var(--black); color: rgba(255,255,255,.58);
  border-top: 1px solid rgba(255,255,255,.18);
  padding: clamp(1rem, .4rem + 2.6vw, 2.1rem) var(--edge);
  font-size: var(--fs-sm); line-height: 1.6;
  display: flex; flex-direction: column; gap: .5rem;
}
@media (min-width: 900px) { .legal { flex-direction: row; align-items: center;
  justify-content: space-between; gap: 1.5rem; } }
.legal a { color: rgba(255,255,255,.58); }
.legal a:hover { color: var(--white); }
.legal__links { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; }
.legal__sep { color: rgba(255,255,255,.28); }
.legal__fb { color: var(--white) !important; font-weight: 500; }
.legal__fb:hover { color: var(--yellow) !important; }
.legal__pref { background: none; border: 0; padding: 0; font: inherit;
  color: rgba(255,255,255,.58); cursor: pointer; text-decoration: underline; }
.legal__pref:hover { color: var(--white); }

/* --- paginile juridice ----------------------------------------------------- */
.doc { display: grid; grid-template-columns: 1fr; gap: var(--gap);
  padding-inline: var(--edge); }
@media (min-width: 900px) { .doc { grid-template-columns: 550fr 848fr; align-items: start; } }
.doc__toc { background: var(--grey); padding: var(--p-card); }
@media (min-width: 900px) { .doc__toc { position: sticky; top: calc(var(--h-nav) + 1rem); } }
.doc__toc b { display: block; font-size: clamp(1rem, .6rem + 1.1vw, 1.5rem); line-height: 1;
  font-weight: 500; color: var(--blue); margin-bottom: 1em; }
.doc__toc a { display: block; color: var(--ink); line-height: 1.85; }
.doc__toc a:hover { color: var(--blue-dark); }
.doc__body { min-width: 0; max-width: 72ch; }
.doc__upd { color: var(--ink); margin-bottom: 2.5em; }
.doc__s { margin-bottom: 2.5em; }
.doc__h { font-size: var(--fs-t); line-height: var(--lh-t); color: var(--blue); margin-bottom: .6em; }
.doc__body p { line-height: 1.5; margin-bottom: .9em; }
.doc__body ul { margin: 0 0 .9em 0; padding-left: 1.3em; }
.doc__body li { line-height: 1.5; margin-bottom: .35em; }
.doc__k { font-weight: 600; }
.doc__t { color: var(--ink); font-size: var(--fs-sm); line-height: var(--lh-sm);
  margin: -.5em 0 .9em; }
.doc__note { background: var(--grey); padding: var(--p-card); margin-bottom: .9em; }
.doc__note b { color: var(--blue); }

/* --- 404 ------------------------------------------------------------------- */
.e404 { padding: clamp(3rem, .5rem + 10.4vw, 9.375rem) var(--edge) clamp(3.5rem, .6rem + 12vw, 10.625rem); }
.e404__n { font-size: clamp(5rem, .3rem + 20.9vw, 18.75rem); line-height: .87;
  font-weight: 500; color: var(--blue); }
.e404__h { font-size: var(--fs-h2); line-height: 1; font-weight: 500; margin-top: .3em; }
.e404__b { margin-top: 1.2em; color: var(--ink); max-width: 45em; }
.e404__row { display: grid; gap: var(--gap); margin-top: clamp(2rem, .5rem + 6.3vw, 4.375rem);
  grid-template-columns: 1fr; }
@media (min-width: 640px) { .e404__row { grid-template-columns: repeat(2, minmax(0, 340px)); } }
@media (min-width: 900px) { .e404__row { grid-template-columns: repeat(2, minmax(0, 550px)); } }

/* --- bannerul de cookies --------------------------------------------------- */
.cookie {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--white); color: #000;
  border-top: 6px solid var(--yellow);
  box-shadow: 0 -18px 50px rgba(0,0,0,.22);
  padding: clamp(1.1rem, .4rem + 3vw, 2.875rem) var(--edge);
  display: flex; flex-direction: column; gap: 1.25rem;
}
.cookie[hidden] { display: none; }
@media (min-width: 900px) { .cookie { flex-direction: row; align-items: center;
  gap: clamp(1.5rem, -1.5rem + 5.3vw, 4.375rem); } }
.cookie__t { flex: 1 1 auto; }
.cookie__t b { display: block; font-size: clamp(1.125rem, .5rem + 1.7vw, 2.25rem); line-height: 1.15;
  font-weight: 500; color: var(--blue); margin-bottom: .45em; }
.cookie__t span { color: var(--ink); }
.cookie__t a { color: var(--blue-dark); text-decoration: underline; }
.cookie__btns { display: flex; flex-wrap: wrap; gap: .75rem; flex: none; }
.ckb { font: inherit; font-size: clamp(.9375rem, .5rem + 1.2vw, 1.625rem); line-height: 1;
  border: 0; cursor: pointer; white-space: nowrap;
  min-height: clamp(2.75rem, 1.6rem + 5.1vw, 5.25rem);
  display: flex; align-items: center; padding: 0 clamp(1rem, .3rem + 3vw, 2.25rem); }
.ckb--pri { background: var(--blue); color: var(--white); }
.ckb--pri:hover { background: var(--blue-dark); }
.ckb--sec { background: var(--grey); color: #000; }
.ckb--sec:hover { background: #d9d9d9; }
.ckb--ghost { background: none; border: 2px solid var(--blue); color: var(--blue); }
.ckb--ghost:hover { background: var(--blue); color: var(--white); }

.ckprefs { border: 0; margin: 0; padding: 0; }
.ckprefs[hidden] { display: none; }
.ckprefs__row { display: flex; align-items: flex-start; gap: .8rem; padding: .8rem 0;
  border-top: 1px solid var(--grey); }
.ckprefs__row:first-of-type { border-top: 0; }
.ckprefs__row input { flex: none; width: 1.25rem; height: 1.25rem; margin: .2rem 0 0;
  accent-color: var(--blue); }
.ckprefs__row b { display: block; color: var(--blue); }
.ckprefs__row span { color: var(--ink); font-size: var(--fs-sm); line-height: var(--lh-sm); }

/* --- bara fixă de contact, pe telefon -------------------------------------- */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex;
  /* box-sizing: border-box ar mânca din cei 60px pe iPhone-urile cu bară de
     jos; înălțimea crește cu marginea de siguranță, ca rândul să rămână 60px */
  height: calc(60px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -6px 24px rgba(0,0,0,.18);
}
.callbar a { flex: 1 1 0; display: flex; align-items: center; justify-content: center;
  gap: .6rem; font-size: 1.0625rem; line-height: 1; font-weight: 500; }
.callbar a:first-child { background: var(--blue); color: var(--white); }
.callbar a:last-child { background: var(--yellow); color: #000; }
.callbar svg { width: auto; height: 1.25rem; flex: none; }
@media (min-width: 900px) { .callbar { display: none; } }
@media (max-width: 899.98px) {
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
  .cookie { bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
}

/* --- tipar ----------------------------------------------------------------- */
@media print {
  .nav, .callbar, .cookie, .trust, .menu, .skip-link { display: none !important; }
  /* Titlul paginii stă în hero: la tipar rămâne textul, dispar doar straturile
     de fundal, altfel foaia tipărită începea fără titlu. */
  .hero { height: auto !important; overflow: visible; }
  .hero__sky, .hero__panels, .hero__sun, .hero__scrim, .hero__bg,
  .hero picture, .hero__buttons { display: none !important; }
  .hero__in { position: static !important; padding: 0 !important; }
  .hero__spacer { display: none !important; }
  .hero .h1 { color: #000 !important; }
  body { padding: 0; color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
  a[href^="tel:"]::after, a[href^="mailto:"]::after { content: ""; }
}

/* bara transparentă de pe Acasă, când se lipește la derulare */
@keyframes navdrop { from { transform: translateY(-100%); } to { transform: translateY(0); } }
.nav--over.is-stuck { animation: navdrop .22s ease both; }
@media (prefers-reduced-motion: reduce) { .nav--over.is-stuck { animation: none; } }

/* liste fără bulină */
.steps { list-style: none; margin: 0; padding: 0; }
/* rupturi de rând desenate în machetă — doar pe ecrane late */
br.br-lg { display: none; }
@media (min-width: 1200px) { br.br-lg { display: inline; } }
/* pictograme: mărimea o dau regulile de mai sus, nu atributele din SVG */
.ico { display: block; flex: none; width: auto; height: 1em; }

/* spații mari între secțiuni: 270px și 120px la lățimea de 1920px din machetă,
   coborând proporțional până la 40px și 32px pe telefon */
.gap-xl { height: clamp(2.5rem, -1.1625rem + 15.033vw, 16.875rem); }
.gap-lg { height: clamp(2rem, 0.6rem + 5.752vw, 7.5rem); }

/* dalele de contact: pe telefon, pictograma trece sub text (ca în machetă) */
@media (max-width: 899.98px) {
  .tile { flex-direction: column; align-items: stretch; gap: .5rem; }
  .tile__i { width: auto; justify-content: flex-end; }
  .wa-row__t { font-size: var(--fs); font-weight: 600; }
}
.tile__v, .addr__t, .foot a, .doc__body { overflow-wrap: break-word; }
.tile__v a { overflow-wrap: anywhere; }

/* locul hărții, până când omul acceptă cookie-urile Google */
.map__ask { background: var(--grey); color: #000; inset: 0; }
.map__ask p { max-width: 34ch; }
.map__ask p b { color: var(--blue); font-size: var(--fs-t); line-height: var(--lh-t);
  display: block; margin-bottom: .3em; }
.map__why { color: var(--ink); font-size: var(--fs-sm); line-height: var(--lh-sm); }
.map__link { color: var(--blue-dark); text-decoration: underline; }

/* Un link așezat în mijlocul unui rând de text nu trebuie deosebit doar prin
   culoare (WCAG 1.4.1): îl subliniem, ca să se vadă și fără culori. */
.consent label a, .cookie__t a, .doc__body p a, .doc__body li a,
.map__ask p a, .form__msg a {
  text-decoration: underline; text-underline-offset: .18em;
}

/* pe telefon, îndemnurile din carduri stau pe un rând */
@media (max-width: 899.98px) {
  .photocard .cta, .feature .cta { font-size: var(--fs); }
  .cta { gap: .5rem; }
}

/* Contact: formularul și coloana cu adresa stau una sub alta pe telefon —
   un formular pe jumătate de ecran de 390px nu se poate completa. */
.row--form { grid-template-columns: 1fr; }
@media (min-width: 900px) { .row--form { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 899.98px) { .tile__v { font-size: var(--fs); } }