/* ═══════════════════════════════════════════════════════════
   PREMIUM CONSTRUCT — Warm & Premium (v2)
   Paletă: crem · antracit · chihlimbar · auriu
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   FONTURI LOCALE (nu se mai încarcă nimic de la Google)
   Fonturi variabile: un singur fișier acoperă toate grosimile.
   Subsetate pe alfabetul român + semnele folosite pe site.
   ═══════════════════════════════════════════════════════════ */
@font-face {
  font-family: "Archivo";
  src: url("fonts/web/archivo-var.woff2") format("woff2");
  font-weight: 500 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/web/inter-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ─── PALETĂ ACTIVĂ: Charcoal & Safety Orange (schimb tot de aici) ─── */
  --ink: #1B1B1E;
  --ink-2: #34343A;
  --muted: #6E6E74;
  --line: #E5E3DE;
  --bg: #F4F3EF;
  --bg-2: #FAFAF7;
  --surface: #FFFFFF;
  --accent: #EA6A1E;
  --accent-strong: #C4530F;
  --accent-soft: #FBE1D0;
  --gold: #E9A23C;
  --danger: #B4553F;
  --brand-blue: #468AB3; /* albastrul din logo */
  --accent-rgb: 234 106 30;
  --gold-rgb: 233 162 60;
  --bg-rgb: 244 243 239;

  --font-display: "Archivo", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;

  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 26px;
  --shadow-sm: 0 2px 10px rgba(23, 20, 15, 0.06);
  --shadow: 0 20px 55px -22px rgba(23, 20, 15, 0.30);
  --shadow-lg: 0 44px 100px -34px rgba(23, 20, 15, 0.45);
  --container: 1360px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* ═══ SCARĂ TIPOGRAFICĂ FLUIDĂ ═══
     Fiecare valoare crește liniar între 360px (telefon) și 1440px (desktop) lățime ecran.
     Nu mai e nevoie de font-size per breakpoint: schimbi aici și se schimbă tot site-ul. */
  --fs-2xs:  clamp(0.55rem, 0.53rem + 0.06vw, 0.62rem);  /*  8.8 → 10 px */
  --fs-xs:   clamp(0.75rem, 0.72rem + 0.09vw, 0.81rem);  /*   12 → 13 px */
  --fs-sm:   clamp(0.81rem, 0.78rem + 0.14vw, 0.91rem);  /*   13 → 14.5 px */
  --fs-base: clamp(0.94rem, 0.90rem + 0.14vw, 1.03rem);  /*   15 → 16.5 px */
  --fs-md:   clamp(1.00rem, 0.96rem + 0.19vw, 1.13rem);  /*   16 → 18 px */
  --fs-lead: clamp(1.06rem, 0.96rem + 0.46vw, 1.38rem);  /*   17 → 22 px */
  --fs-h4:   clamp(1.06rem, 1.02rem + 0.19vw, 1.19rem);  /*   17 → 19 px */
  --fs-h3:   clamp(1.13rem, 1.06rem + 0.28vw, 1.31rem);  /*   18 → 21 px */
  --fs-h2s:  clamp(1.38rem, 1.15rem + 1.02vw, 2.00rem);  /*   22 → 32 px */
  --fs-h2:   clamp(1.63rem, 1.30rem + 1.48vw, 2.63rem);  /*   26 → 42 px */
  --fs-h1:   clamp(2.13rem, 1.44rem + 3.15vw, 4.25rem);  /*   34 → 68 px */
  --fs-num:  clamp(1.63rem, 1.38rem + 1.11vw, 2.38rem);  /*   26 → 38 px */

  /* ═══ SCARĂ DE SPAȚIERE FLUIDĂ ═══ */
  --sp-edge:    clamp(1.00rem, 0.83rem + 0.74vw, 1.50rem);  /* 16 → 24 px  margine ecran */
  --sp-gap:     clamp(0.75rem, 0.54rem + 0.93vw, 1.38rem);  /* 12 → 22 px  spații în grile */
  --sp-gap-lg:  clamp(1.50rem, 1.00rem + 2.22vw, 3.00rem);  /* 24 → 48 px  între coloane mari */
  --sp-block:   clamp(0.88rem, 0.68rem + 0.89vw, 1.63rem);  /* 14 → 26 px  ritm vertical în bloc */
  --sp-card:    clamp(1.25rem, 1.00rem + 1.11vw, 2.00rem);  /* 20 → 32 px  padding în carduri */
  --sp-head:    clamp(1.63rem, 1.09rem + 2.41vw, 3.25rem);  /* 26 → 52 px  sub titlu de secțiune */
  --sp-section: clamp(2.75rem, 2.13rem + 2.78vw, 6.00rem);  /* 44 → 96 px  padding secțiune */
  --sp-nav:     clamp(0.70rem, 0.55rem + 0.50vw, 1.13rem);  /* 11 → 18 px  padding nav */
}

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

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

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  font-size: var(--fs-base);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* textele lungi fără spații (email, telefon, linkuri) se rup în loc să lățească pagina;
   „pretty” împiedică rămânerea unui singur cuvânt orfan pe ultimul rând */
body { overflow-wrap: break-word; text-wrap: pretty; }
/* Copiii de grid/flex pot scădea sub lățimea conținutului lor.
   Fără asta, o coloană „1fr” crește după cel mai lat element din ea
   (un <select> cu opțiuni lungi, un email fără spații) și lățește toată pagina. */
.about > *, .contact > *, .faq-wrap > *, .areas > *, .services > *, .gallery > *,
.steps > *, .testimonials > *, .guarantees__grid > *, .footer__grid > *, .compare > *,
.contact__list li, .contact__list li > div, .footer__contact, .quote figcaption,
.field input, .field select, .field textarea { min-width: 0; }
.contact__list a, .contact__list span, .footer__contact a { overflow-wrap: anywhere; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
::selection { background: var(--accent); color: #fff; }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.08; letter-spacing: -0.015em; }

/* ═══ Textură fină (grain) ═══ */
.grain {
  position: fixed; inset: 0; z-index: 300; pointer-events: none; opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ═══ Bară progres ═══ */
.progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--accent), var(--gold)); z-index: 200;
  transition: width 0.1s linear;
}

/* ═══ Layout utils ═══ */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--sp-edge); }

.section { padding: var(--sp-section) 0; position: relative; }
.section--alt { background: var(--bg-2); }
.section--dark { background: var(--ink); color: #EDE7DD; }

.section__head { max-width: 660px; margin: 0 auto var(--sp-head); text-align: center; }
.section__head--left { text-align: left; margin-inline: 0; }
/* pentru titlurile care trebuie să încapă pe un rând */
.section__head--wide { max-width: 900px; }
.section__head--wide .section__title { text-wrap: balance; }
.section__title { font-size: var(--fs-h2); margin: 0.3em 0 0.34em; }
.section__sub { color: var(--muted); font-size: var(--fs-md); }
.section--dark .section__sub { color: #B7AE9F; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent-strong);
}
.eyebrow__line { width: 26px; height: 2px; background: var(--accent); display: inline-block; border-radius: 2px; }
.eyebrow--light { color: var(--gold); }
.eyebrow--light .eyebrow__line { background: var(--gold); }
.section__head:not(.section__head--left) .eyebrow { justify-content: center; }

.skip-link { position: absolute; left: 12px; top: -60px; z-index: 400; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 8px; transition: top 0.2s; }
.skip-link:focus { top: 12px; }

/* ═══ Butoane ═══ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 0.85em 1.7em; border-radius: 999px; font-weight: 600; font-size: var(--fs-base);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s, color 0.25s;
  /* fără nowrap: pe ecrane foarte înguste textul se rupe echilibrat în loc să iasă din ecran */
  white-space: normal; text-wrap: balance; text-align: center; position: relative; overflow: hidden;
}
.btn--primary { background: var(--accent); color: #fff; box-shadow: 0 12px 26px -10px rgb(var(--accent-rgb) / 0.55); }
.btn--primary:hover { background: var(--accent-strong); transform: translateY(-2px); box-shadow: 0 18px 34px -12px rgb(var(--accent-rgb) / 0.6); }
.btn--primary::after {
  content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.35), transparent);
  transition: left 0.6s var(--ease);
}
.btn--primary:hover::after { left: 130%; }
.btn--ghost { background: rgba(255, 255, 255, 0.1); color: #fff; border: 1.5px solid rgba(255, 255, 255, 0.55); backdrop-filter: blur(6px); }
.btn--ghost:hover { background: #fff; color: var(--ink); transform: translateY(-2px); }
.btn--ghost-dark { background: rgba(255, 255, 255, 0.12); color: #fff; border: 1.5px solid rgba(255, 255, 255, 0.6); }
.btn--ghost-dark:hover { background: #fff; color: var(--accent-strong); transform: translateY(-2px); }
.btn--lg { padding: 0.95em 1.9em; font-size: var(--fs-md); }
.btn--sm { padding: 0.6em 1.2em; font-size: var(--fs-sm); }
.btn--block { width: 100%; }

/* ═══════════════════ NAV ═══════════════════ */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: var(--sp-nav) 0; transition: padding 0.35s var(--ease), background 0.35s, box-shadow 0.35s, border-color 0.35s; border-bottom: 1px solid transparent; }
.nav.scrolled { background: rgb(var(--bg-rgb) / 0.85); backdrop-filter: saturate(180%) blur(14px); box-shadow: var(--shadow-sm); border-bottom-color: var(--line); padding: calc(var(--sp-nav) * 0.62) 0; }
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; }

.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand__mark { height: clamp(30px, 2.4vw, 36px); width: auto; transition: height 0.35s var(--ease), filter 0.35s; }
.nav.scrolled .brand__mark { height: clamp(26px, 2.1vw, 31px); }
/* logo-ul e desenat în tonuri închise → pe hero (fundal foto) îl facem alb */
.nav:not(.scrolled) .brand__mark,
.footer .brand__mark { filter: brightness(0) invert(1) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45)); }

.brand__words { display: flex; flex-direction: column; gap: 3px; }
.brand__text { font-family: var(--font-display); font-size: var(--fs-md); font-weight: 600; text-transform: uppercase; color: var(--ink); letter-spacing: 0.01em; line-height: 1; }
.brand__text strong { color: var(--brand-blue); font-weight: 600; margin-left: 5px; }
.nav:not(.scrolled) .brand__text { color: #fff; }
.brand__tagline { font-size: var(--fs-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.13em; color: var(--ink-2); line-height: 1; white-space: nowrap; }
.nav:not(.scrolled) .brand__tagline { color: rgba(255, 255, 255, 0.78); }
.footer .brand__tagline { color: rgba(255, 255, 255, 0.6); }
.nav:not(.scrolled) .nav__links > a:not(.btn) { color: rgba(255, 255, 255, 0.9); }

.nav__links { display: flex; align-items: center; gap: clamp(18px, 2vw, 30px); }
.nav__links > a:not(.btn) { font-size: var(--fs-sm); font-weight: 500; color: var(--ink-2); position: relative; transition: color 0.2s; }
.nav__links > a:not(.btn)::after { content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0; background: var(--accent); transition: width 0.25s var(--ease); }
.nav__links > a:not(.btn):hover { color: var(--accent); }
.nav__links > a:not(.btn):hover::after,
.nav__links > a.active::after { width: 100%; }
.nav__links > a.active { color: var(--accent); }
.nav:not(.scrolled) .nav__links > a.active { color: #fff; }

/* WhatsApp + TikTok apar doar în sertarul de pe telefon; pe bara de sus n-au loc */
.nav__social { display: none; }
.nav__toggle { display: none; flex-direction: column; gap: 5px; padding: 8px; z-index: 110; }
.nav__toggle span { width: 26px; height: 2.5px; background: var(--ink); border-radius: 2px; transition: transform 0.3s var(--ease), opacity 0.3s; }
.nav:not(.scrolled) .nav__toggle span { background: #fff; }
/* X-ul trebuie negru pe panoul deschis (fundal deschis la culoare).
   Fără prima parte a selectorului, regula de mai sus („pe hero, liniuțe albe")
   e mai specifică și lasă X-ul alb pe alb. */
.nav:not(.scrolled) .nav__toggle.open span,
.nav__toggle.open span { background: var(--ink); }
.nav__toggle.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav__toggle.open span:nth-child(2) { opacity: 0; }
.nav__toggle.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ═══════════════════ HERO ═══════════════════ */
/* 90vh ≈ proporția pozei (16:9) → se vede aproape toată casa, fără crop agresiv */
.hero { position: relative; min-height: 74vh; min-height: 74svh; display: flex; align-items: center; color: #fff; overflow: hidden; background: var(--ink); }
/* PNG-ul original, cover, fără zoom */
.hero__bg { position: absolute; inset: 0; background-image: url("graphics/hero.jpg");
  /* WebP unde se poate (197 KB), JPG pentru browserele vechi (462 KB) */
  background-image: image-set(url("graphics/hero.webp") type("image/webp"), url("graphics/hero.jpg") type("image/jpeg")); background-size: cover; background-position: center; background-repeat: no-repeat; }
/* întunecă puternic doar stânga (unde stă textul) și lasă casa + apusul să se vadă în dreapta */
/* întunecat doar pe coloana textului (0–45%), apoi cade repede ca poza să rămână curată în dreapta */
.hero__overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18,13,9,0.86) 0%, rgba(18,13,9,0.80) 30%, rgba(18,13,9,0.56) 48%, rgba(18,13,9,0.12) 66%, rgba(18,13,9,0) 100%), linear-gradient(180deg, rgba(18,13,9,0.22) 0%, rgba(18,13,9,0.06) 40%, rgba(18,13,9,0.58) 100%); }
/* voalul e mai subțire acum → umbra ține textul lizibil peste poză */
.hero__copy { text-shadow: 0 2px 20px rgba(12, 9, 6, 0.55); }
.hero__content { position: relative; z-index: 2; padding-top: clamp(90px, 7vw, 104px); padding-bottom: clamp(48px, 5vw, 88px); }
/* textul stă aliniat la stânga în container, nu centrat pe mijloc.
   900px = suficient ca "Construim încredere," să încapă pe un rând */
.hero__copy { max-width: 900px; }

.hero__eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-sm); font-weight: 600; color: #F0E4D6; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.18); padding: 0.5em 1.1em; border-radius: 999px; backdrop-filter: blur(6px); margin-bottom: var(--sp-block); }
.hero__eyebrow .stars { color: var(--gold); letter-spacing: 1px; }

.hero__title { font-size: var(--fs-h1); font-weight: 600; margin-bottom: 0.1em; }
.hero__title em { font-style: normal; color: var(--gold); }
.hero__slogan { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-md); letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin: 0.45em 0 var(--sp-block); }
.hero__lead { font-size: var(--fs-lead); max-width: 44ch; color: #EAE3D8; margin-bottom: var(--sp-block); }
.hero__lead strong { color: #fff; }

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-gap); }


.hero__card { position: absolute; right: max(24px, calc((100vw - var(--container)) / 2 + 24px)); bottom: 96px; z-index: 3; width: 300px; padding: 22px 24px; border-radius: var(--radius); background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); backdrop-filter: blur(16px) saturate(160%); box-shadow: var(--shadow-lg); color: #fff; }
.hero__card-stars { color: var(--gold); letter-spacing: 2px; margin-bottom: 10px; }
.hero__card p { font-size: 0.98rem; line-height: 1.5; margin-bottom: 12px; }
.hero__card-name { font-size: 0.82rem; color: #D8CFC1; }

.hero__scroll { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 2; width: 26px; height: 44px; border: 2px solid rgba(255, 255, 255, 0.55); border-radius: 14px; display: flex; justify-content: center; padding-top: 8px; }
.hero__scroll span { width: 4px; height: 9px; border-radius: 3px; background: #fff; animation: scrollDot 1.6s infinite; }
@keyframes scrollDot { 0% { opacity: 0; transform: translateY(-4px); } 40% { opacity: 1; } 80%, 100% { opacity: 0; transform: translateY(12px); } }

/* ═══════════════════ ÎNCREDERE (cele 4 bife) ═══════════════════ */
/* position + z-index: cardurile ies deasupra hero-ului. Fără ele, hero (care e
   position: relative) se desenează peste partea de card trasă în sus de marjă. */
.guarantees { position: relative; z-index: 3; background: var(--ink); padding: 0 0 clamp(16px, 2.2vw, 30px); }
/* Tragerea în sus e legată de 3.9vw, la fel ca spațiul de sub butoanele din hero
   (5vw). Așa rămâne mereu o distanță de ~15px între butoane și carduri, la orice
   lățime de ecran, și cardurile stau tot călare pe granița cu secțiunea următoare. */
.guarantees__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-gap); margin-top: clamp(-60px, -3.9vw, -34px); }
/* iconița sus, centrat, textele dedesubt tot centrate */
.guarantee { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 11px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 18px 22px; box-shadow: var(--shadow); transition: transform 0.3s var(--ease); }
.guarantee:hover { transform: translateY(-4px); }
/* flex + mărime fixă la svg: cu „height: 56%" glifa rămânea lipită de marginea
   de sus a pătrățelului, pentru că procentul nu se centrează în grilă */
.guarantee__ic { flex: none; width: clamp(40px, 3.4vw, 48px); height: clamp(40px, 3.4vw, 48px); border-radius: 13px; background: var(--accent-soft); color: var(--accent-strong); display: flex; align-items: center; justify-content: center; }
.guarantee__ic svg { display: block; width: clamp(22px, 1.9vw, 27px); height: clamp(22px, 1.9vw, 27px); }
.guarantee strong { display: block; font-family: var(--font-display); font-size: 1rem; line-height: 1.2; color: var(--ink); }
/* „.guarantee div span", nu „.guarantee span": altfel regula prinde și
   <span class="guarantee__ic"> și îi strică centrarea (îi pune display: block) */
.guarantee div span { display: block; font-size: var(--fs-sm); line-height: 1.3; color: var(--muted); margin-top: 2px; }

/* ═══════════════════ STATS ═══════════════════ */
.stats { background: var(--ink); color: #fff; padding: 0 0 clamp(26px, 3.2vw, 40px); }
.stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-gap); text-align: center; }
.stat { position: relative; }
.stat:not(:last-child)::after { content: ""; position: absolute; right: -12px; top: 15%; height: 70%; width: 1px; background: rgba(255, 255, 255, 0.14); }
.stat__num { font-family: var(--font-display); font-size: var(--fs-num); font-weight: 600; color: #fff; line-height: 1; }
.stat__num span { color: var(--gold); }
.stat__label { margin-top: 5px; font-size: var(--fs-sm); letter-spacing: 0.03em; color: #B7AE9F; }

/* ═══════════════════ MARQUEE ═══════════════════ */
.marquee { background: var(--accent); color: #fff; overflow: hidden; padding: clamp(10px, 1.1vw, 16px) 0; white-space: nowrap; }
/* 4 copii identice, animația mută exact 2 (-50%) → buclă continuă, fără gol la final.
   O copie ≈ 4760px; 160s ≈ 60px/s, adică același ritm calm ca înainte. */
/* 70s pentru ~87 px/secundă. La 160s mergea cu 38 px/s: se mișca, dar atât de
   încet că pe telefon, unde te uiți 2 secunde, părea oprită. */
.marquee__track { display: inline-flex; will-change: transform; animation: marquee 70s linear infinite; }
.marquee__track span { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 500; letter-spacing: 0.04em; padding-right: 1.1rem; }
.marquee__track b { color: var(--gold); font-weight: 400; margin: 0 0.9rem; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee:hover .marquee__track { animation-play-state: paused; }

/* ═══════════════════ SERVICII ═══════════════════ */
.services { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-gap); }
.service { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-card); transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s; position: relative; overflow: hidden; }
.service::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--accent), var(--gold)); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease); }
.service:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent; }
.service:hover::before { transform: scaleX(1); }
.service--featured { border-color: var(--accent); box-shadow: 0 20px 50px -28px rgb(var(--accent-rgb) / 0.4); }
.service--featured::before { transform: scaleX(1); }
.service__tag { position: absolute; top: 14px; right: 14px; background: var(--accent); color: #fff; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; }
.service__icon { display: inline-flex; align-items: center; justify-content: center; width: clamp(46px, 3.8vw, 58px); height: clamp(46px, 3.8vw, 58px); border-radius: 14px; background: var(--accent-soft); color: var(--accent-strong); margin-bottom: var(--sp-block); transition: transform 0.35s var(--ease); }
.service:hover .service__icon { transform: scale(1.08) rotate(-4deg); }
.service h3 { font-size: var(--fs-h3); margin-bottom: 0.4em; }
.service p { color: var(--muted); font-size: var(--fs-base); }

/* ═══════════════════ COMPARAȚIE ═══════════════════ */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-gap); max-width: 960px; margin: 0 auto; }
.compare__col { border-radius: var(--radius-lg); padding: var(--sp-card); }
.compare__col--us { background: var(--ink); color: #F1EADE; box-shadow: var(--shadow-lg); position: relative; }
.compare__col--us::before { content: ""; position: absolute; inset: 0; border-radius: var(--radius-lg); padding: 1.5px; background: linear-gradient(135deg, var(--gold), transparent 40%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.compare__col--them { background: var(--surface); border: 1px solid var(--line); color: var(--muted); }
.compare__head { margin-bottom: var(--sp-block); }
.compare__badge { display: inline-flex; align-items: center; font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600; }
.compare__badge--us { color: #fff; }
.compare__badge--them { color: var(--ink-2); }
.compare__col ul { display: grid; gap: var(--sp-gap); }
.compare__col li { display: flex; gap: 12px; align-items: flex-start; font-size: var(--fs-base); line-height: 1.45; }
.compare__col--us li { color: #EAE1D4; }
.ic { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 0.72rem; font-weight: 800; margin-top: 2px; }
.ic--yes { background: rgb(var(--gold-rgb) / 0.2); color: var(--gold); }
.ic--no { background: rgba(180, 85, 63, 0.14); color: var(--danger); }
.compare__cta { text-align: center; margin-top: var(--sp-head); }

/* ═══════════════════ PROIECTE / GALERIE ═══════════════════ */
.filters { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-gap); margin-bottom: var(--sp-head); }
.filter { padding: 0.55em 1.2em; border-radius: 999px; font-weight: 500; font-size: var(--fs-sm); color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); transition: all 0.25s var(--ease); }
.filter:hover { border-color: var(--accent); color: var(--accent); }
.filter.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }

.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-gap); }
/* pozele de pe șantier sunt făcute pe telefon (portret) → ramă 3/4, se taie mult mai puțin */
.tile { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 5; background: var(--accent-soft); text-align: left; transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), opacity 0.4s; display: block; width: 100%; }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.tile__info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: var(--sp-card); color: #fff; background: linear-gradient(180deg, transparent, rgba(23, 20, 15, 0.85)); display: flex; flex-direction: column; gap: 3px; transform: translateY(12px); opacity: 0.9; transition: transform 0.4s var(--ease), opacity 0.4s; }
.tile__info strong { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 600; }
.tile__info span { font-size: var(--fs-sm); color: #E7DFD3; }
.tile:hover { box-shadow: var(--shadow-lg); }
.tile:hover img { transform: scale(1.09); }
.tile:hover .tile__info { transform: translateY(0); opacity: 1; }
.tile::after { content: "⤢"; position: absolute; top: 14px; right: 14px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.9); color: var(--ink); font-size: 1rem; opacity: 0; transform: scale(0.7); transition: opacity 0.3s, transform 0.3s var(--ease); }
.tile:hover::after { opacity: 1; transform: scale(1); }
.tile.is-hidden { display: none; }
/* dalele cu filmare: buton de play în mijloc, fără iconița de lupă din colț */
.tile--video::after { content: none; }
.tile__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; width: clamp(48px, 4.4vw, 62px); height: clamp(48px, 4.4vw, 62px); border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: var(--accent-strong); display: grid; place-items: center; box-shadow: 0 12px 30px -8px rgba(23, 20, 15, 0.55); transition: transform 0.35s var(--ease), background 0.25s; }
.tile--video:hover .tile__play { transform: translate(-50%, -50%) scale(1.09); background: #fff; }

/* ═══════════════════ ZONE DESERVITE ═══════════════════ */
.areas { display: grid; grid-template-columns: 1.35fr 0.85fr 0.9fr; gap: var(--sp-gap-lg); align-items: start; }
.areas__col { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-card); box-shadow: var(--shadow-sm); height: 100%; }
.areas__col h3 { font-size: var(--fs-h3); margin-bottom: 0.4em; }
.areas__col p { color: var(--muted); font-size: var(--fs-base); }
.areas__list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.areas__list li { font-size: var(--fs-sm); font-weight: 500; color: var(--ink-2); background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; transition: border-color 0.25s, color 0.25s; }
.areas__list li:hover { border-color: var(--accent); color: var(--accent-strong); }
.areas__note { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); font-size: var(--fs-sm); }
.areas__cta { margin-top: 20px; width: 100%; }

/* ═══════════════════ PROCES ═══════════════════ */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-gap); }
.step { position: relative; padding: var(--sp-card); background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: var(--radius); transition: transform 0.35s var(--ease), background 0.35s, border-color 0.35s; }
.step:hover { transform: translateY(-6px); background: rgba(255, 255, 255, 0.07); border-color: rgb(var(--gold-rgb) / 0.4); }
.step__num { font-family: var(--font-display); font-size: var(--fs-num); font-weight: 600; color: transparent; -webkit-text-stroke: 1.4px var(--gold); display: block; margin-bottom: 14px; line-height: 1; }
.step h3 { font-size: var(--fs-h3); margin-bottom: 0.35em; color: #fff; }
.step p { color: #B7AE9F; font-size: var(--fs-base); }
.step:not(:last-child)::after { content: "→"; position: absolute; right: -16px; top: 42px; color: var(--gold); font-size: 1.3rem; z-index: 2; }

/* ═══════════════════ DESPRE ═══════════════════ */
.about { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--sp-gap-lg); align-items: center; }
.about__content .section__title { text-align: left; margin-bottom: var(--sp-block); }
.about__content p { color: var(--muted); margin-bottom: 0.85em; }
.about__sign { margin-top: var(--sp-block); padding-top: var(--sp-block); border-top: 1px solid var(--line); }
.about__name { font-family: var(--font-display); font-size: var(--fs-h2s); font-weight: 700; color: var(--accent); display: block; letter-spacing: -0.01em; }
.about__role { font-size: var(--fs-sm); color: var(--muted); }
.about__media { position: relative; }
/* ramă lată (5/4) + încadrare pe oameni → se taie ~24% din poză de sus (copaci/cer) */
.about__media img { border-radius: var(--radius-lg); box-shadow: var(--shadow); aspect-ratio: 11 / 12; object-fit: cover; object-position: center 50%; width: 100%; height: auto; }
.about__badge { position: absolute; left: -18px; bottom: 34px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: calc(var(--sp-card) * 0.7) var(--sp-card); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 2px; }
.about__badge strong { font-family: var(--font-display); font-size: var(--fs-h2s); color: var(--accent); line-height: 1; }
.about__badge span { font-size: var(--fs-xs); color: var(--muted); max-width: 120px; }

/* ═══════════════════ TESTIMONIALE ═══════════════════ */
.reviews__badge { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-size: var(--fs-sm); color: var(--muted); background: var(--surface); border: 1px solid var(--line); padding: 8px 18px; border-radius: 999px; }
.reviews__badge .stars { color: var(--gold); letter-spacing: 1px; }
.reviews__badge strong { color: var(--ink); }

.testimonials { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-gap); }
.quote { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-card); transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease); position: relative; }
.quote::before { content: "\201C"; position: absolute; top: 6px; right: 24px; font-family: var(--font-display); font-size: 4rem; color: var(--accent-soft); line-height: 1; z-index: 0; }
.quote:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.quote__stars { color: var(--gold); letter-spacing: 2px; margin-bottom: 14px; position: relative; z-index: 1; }
.quote blockquote { font-size: var(--fs-base); color: var(--ink-2); margin-bottom: var(--sp-block); position: relative; z-index: 1; }
.quote figcaption { display: flex; flex-direction: column; gap: 2px; }
.quote figcaption strong { color: var(--ink); }
.quote figcaption span { font-size: var(--fs-sm); color: var(--muted); }

/* ═══════════════════ FAQ ═══════════════════ */
.faq-wrap { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--sp-gap-lg); align-items: start; }
.faq-wrap__cta { margin-top: 24px; }
.faq { display: grid; gap: var(--sp-gap); }
.faq__item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: border-color 0.3s, box-shadow 0.3s; }
.faq__item.open { border-color: var(--accent); box-shadow: var(--shadow); }
.faq__q { width: 100%; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: calc(var(--sp-card) * 0.72) var(--sp-card); font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 600; color: var(--ink); }
.faq__ic { flex: none; width: 26px; height: 26px; position: relative; }
.faq__ic::before, .faq__ic::after { content: ""; position: absolute; top: 50%; left: 50%; width: 13px; height: 2.4px; background: var(--accent); border-radius: 2px; transform: translate(-50%, -50%); transition: transform 0.3s var(--ease); }
.faq__ic::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item.open .faq__ic::after { transform: translate(-50%, -50%) rotate(0); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s var(--ease); }
.faq__item.open .faq__a { grid-template-rows: 1fr; }
.faq__a > p { overflow: hidden; padding: 0 var(--sp-card); color: var(--muted); font-size: var(--fs-base); transition: padding 0.35s var(--ease); }
.faq__item.open .faq__a > p { padding: 0 var(--sp-card) var(--sp-block); }

/* ═══════════════════ CTA BAND ═══════════════════ */
.cta-band { background: linear-gradient(120deg, var(--accent-strong), var(--accent) 55%, var(--gold)); color: #fff; position: relative; overflow: hidden; }
.cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.18), transparent 42%); }
.cta-band__inner { position: relative; z-index: 1; padding: var(--sp-section) var(--sp-edge); display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.cta-band h2 { font-size: var(--fs-h2); margin-bottom: 0.25em; color: #fff; }
.cta-band p { color: rgba(255, 255, 255, 0.92); max-width: 480px; }
.cta-band__actions { display: flex; gap: var(--sp-gap); flex-wrap: wrap; }
.cta-band .btn--primary { background: #fff; color: var(--accent-strong); box-shadow: var(--shadow); }
.cta-band .btn--primary:hover { background: var(--ink); color: #fff; }

/* ═══════════════════ CONTACT ═══════════════════ */
.contact { display: grid; grid-template-columns: 1fr 1.05fr; gap: var(--sp-gap-lg); align-items: start; }
.contact__info .section__title { text-align: left; }
.contact__info .section__sub { margin-bottom: 0; }
.contact__list { margin-top: var(--sp-block); display: grid; gap: var(--sp-gap); }
.contact__list li { display: flex; gap: var(--sp-gap); align-items: center; }
.contact__ic { flex: 0 0 clamp(38px, 3vw, 46px); width: clamp(38px, 3vw, 46px); height: clamp(38px, 3vw, 46px); border-radius: 12px; background: var(--accent-soft); color: var(--accent-strong); display: grid; place-items: center; }
.contact__label { display: block; font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 1px; }
.contact__list a { font-weight: 600; transition: color 0.2s; }
.contact__list a:hover { color: var(--accent); }

.contact__form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--sp-card); box-shadow: var(--shadow); }
.contact__form h3 { font-size: var(--fs-h2s); margin-bottom: 0.2em; }
.form__hint { color: var(--muted); font-size: var(--fs-sm); margin-bottom: var(--sp-block); }
.field { margin-bottom: var(--sp-gap); }
.field label { display: block; font-size: var(--fs-sm); font-weight: 600; margin-bottom: 7px; color: var(--ink-2); }
.field input, .field select, .field textarea { width: 100%; padding: 0.78em 0.95em; border: 1.5px solid var(--line); border-radius: var(--radius-sm); font-family: inherit; font-size: var(--fs-base); color: var(--ink); background: var(--bg-2); transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; }
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); background: #fff; box-shadow: 0 0 0 4px rgb(var(--accent-rgb) / 0.12); }
.field input.invalid, .field select.invalid { border-color: var(--danger); box-shadow: 0 0 0 4px rgba(180, 85, 63, 0.1); }
.form__note { text-align: center; font-size: var(--fs-xs); color: var(--muted); margin-top: 12px; }

/* ═══════════════════ FOOTER ═══════════════════ */
.footer { background: var(--ink); color: #C6BEB1; padding-top: var(--sp-section); }
.footer__grid { display: grid; grid-template-columns: 1.5fr 0.85fr 2fr; gap: var(--sp-gap-lg); padding-bottom: var(--sp-head); }
/* „Ce executăm” + „Contact” într-o grilă a lor, ca siglele ANPC de dedesubt să
   se lipească de ele. Ca frați direcți în grila mare, siglele ar fi coborât pe
   al doilea rând al footerului, adică sub coloana de brand, care e mai înaltă. */
.footer__end { display: grid; grid-template-columns: 0.95fr 1.05fr; column-gap: var(--sp-gap-lg); row-gap: var(--sp-block); align-content: start; }
.footer .brand__text { color: #fff; }
.footer__slogan { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin: 16px 0 6px; }
.footer__brand p:not(.footer__slogan) { margin: 6px 0 var(--sp-block); font-size: var(--fs-base); max-width: 40ch; }
.footer__social { display: flex; gap: 12px; }
.footer__social a { width: clamp(36px, 3vw, 42px); height: clamp(36px, 3vw, 42px); border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.07); color: #fff; transition: all 0.28s var(--ease); }
.footer__social a:hover { background: var(--accent); transform: translateY(-3px); }
.footer h4 { color: #fff; font-family: var(--font-body); font-weight: 600; font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: var(--sp-block); }
.footer__nav, .footer__contact { display: flex; flex-direction: column; gap: 10px; }
.footer__nav a, .footer__contact a, .footer__contact span { font-size: var(--fs-base); transition: color 0.2s; }
.footer__nav a:hover, .footer__contact a:hover { color: var(--accent); }
.footer__bottom { border-top: 1px solid rgba(255, 255, 255, 0.09); padding: var(--sp-block) 0; }
.footer__bottom .container { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: var(--fs-xs); color: #8B8375; }

/* ═══════════════════ FAB + TO TOP ═══════════════════ */
.call-fab { position: fixed; bottom: 18px; left: 18px; right: 18px; z-index: 90; display: none; align-items: center; justify-content: center; gap: 10px; background: var(--accent); color: #fff; font-weight: 600; font-size: var(--fs-md); padding: 0.85em; border-radius: 999px; box-shadow: 0 14px 34px -8px rgb(var(--accent-rgb) / 0.7); }
.call-fab:active { transform: scale(0.98); }
.to-top { position: fixed; bottom: 26px; right: 26px; z-index: 90; width: 48px; height: 48px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity 0.3s, transform 0.3s var(--ease), visibility 0.3s, background 0.25s; }
.to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--accent); }

/* ═══════════════════ LIGHTBOX ═══════════════════ */
.lightbox { position: fixed; inset: 0; z-index: 210; display: none; background: rgba(15, 12, 8, 0.92); backdrop-filter: blur(6px); align-items: center; justify-content: center; flex-direction: column; padding: 30px; }
.lightbox.open { display: flex; animation: fadeIn 0.3s ease; }
.lightbox img, .lightbox video { max-width: 92vw; max-height: 80vh; border-radius: var(--radius); box-shadow: var(--shadow-lg); }
/* filmările sunt făcute pe telefon (portret): limităm lățimea ca să nu urce peste ecran */
.lightbox video { width: auto; max-width: min(92vw, 460px); background: #000; }
.lightbox__caption { color: #EAE3D8; margin-top: 18px; font-size: var(--fs-base); }
.lightbox__close { position: absolute; top: 22px; right: 26px; color: #fff; font-size: 2.4rem; line-height: 1; width: 48px; height: 48px; border-radius: 50%; transition: background 0.2s; z-index: 2; }
.lightbox__close:hover { background: rgba(255, 255, 255, 0.12); }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.28); transition: background 0.25s, transform 0.25s var(--ease); }
.lightbox__nav:hover { background: rgba(255, 255, 255, 0.28); }
.lightbox__nav--prev { left: 26px; }
.lightbox__nav--next { right: 26px; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ═══════════════════ TOAST ═══════════════════ */
.toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(120px); z-index: 220; background: var(--ink); color: #fff; padding: 15px 24px; border-radius: 999px; box-shadow: var(--shadow-lg); font-weight: 500; font-size: var(--fs-base); max-width: 90vw; display: flex; align-items: center; gap: 10px; opacity: 0; transition: transform 0.4s var(--ease), opacity 0.4s; }
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
.toast::before { content: "✓"; color: var(--gold); font-weight: 700; }

/* ═══════════════════ REVEAL ═══════════════════ */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.in-view { opacity: 1; transform: none; }
.services .reveal.in-view, .gallery .reveal.in-view, .steps .reveal.in-view, .testimonials .reveal.in-view, .guarantees .reveal.in-view { transition-delay: var(--d, 0s); }

/* ═══════════════════ RESPONSIVE ═══════════════════
   Mărimile de font și spațiile NU se rescriu aici — le rezolvă scările fluide
   din :root (clamp). Mai jos stau doar schimbările de AȘEZARE (câte coloane).
   Praguri: 1180 laptop mic · 980 tabletă · 760 telefon mare · 480 telefon mic
   ══════════════════════════════════════════════════════════════════════════ */

/* ── LAPTOP (până la 1180px): grilele de 4 se rup în 2, altfel cardurile se înghesuie ── */
@media (max-width: 1180px) {
  .guarantees__grid, .steps { grid-template-columns: repeat(2, 1fr); }
  .step:not(:last-child)::after { display: none; }
  .footer__grid { grid-template-columns: 0.9fr 2.1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 980px) {
  .services, .gallery, .steps, .testimonials, .guarantees__grid { grid-template-columns: repeat(2, 1fr); }
  .about, .contact, .faq-wrap { grid-template-columns: 1fr; }
  .areas { grid-template-columns: 1fr 1fr; }
  .areas__col:first-child { grid-column: 1 / -1; }
  .about__media { order: -1; max-width: 440px; margin-inline: auto; }
  .step:not(:last-child)::after { display: none; }
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  .stat::after { display: none !important; }
  .hero__card { display: none; }
  .guarantees__grid { margin-top: -46px; }
  /* meniul nu mai încape pe o linie sub 980px → hamburger */
  .nav__toggle { display: flex; }
  /* „safe center” + overflow: pe ecran scund (telefon în landscape) meniul nu mai
     încape; fără ele, ultimul link rămâne tăiat în afara sertarului și inaccesibil. */
  .nav__links { position: fixed; inset: 0 0 0 auto; width: min(320px, 82vw); height: 100vh; height: 100dvh; flex-direction: column; align-items: flex-start; justify-content: safe center; gap: 26px; overflow-y: auto; overscroll-behavior: contain; background: var(--bg); padding: 40px; box-shadow: -20px 0 60px -20px rgba(0,0,0,0.4); transform: translateX(100%); transition: transform 0.4s var(--ease); z-index: 105; }
  .nav__links.open { transform: translateX(0); }
  .nav__links > a:not(.btn) { font-size: 1.3rem; font-family: var(--font-display); color: var(--ink) !important; }
  .nav__cta { margin-top: 8px; }
  /* WhatsApp și TikTok, sub butonul de sunat, despărțite printr-o linie subțire.
     Ținta de atins e de 44px, ca la butoane, ca să nu se rateze cu degetul. */
  .nav__social { display: flex; flex-direction: column; align-items: stretch; gap: 4px; width: 100%; margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--line); }
  .nav__social a { display: flex; align-items: center; gap: 11px; min-height: 44px; font-size: var(--fs-base); font-weight: 500; color: var(--ink); transition: color 0.2s; }
  .nav__social a:hover { color: var(--accent-strong); }
  .nav__social svg { flex: none; }
}

@media (max-width: 767px) {
  /* Pe telefon cardurile de încredere ies din pagină: pe un rând îngust ar fi
     ocupat patru ecrane întregi între hero și restul site-ului. Ce scrie pe ele
     se regăsește oricum în secțiunea „Cum lucrăm”. */
  .guarantees { display: none; }
  /* Banda „Ai un teren în Vrancea? / Hai să vorbim” iese și ea pe telefon: butonul
     lipit jos („Sună acum”) face oricum aceeași treabă, fără să lungească pagina.
     WhatsApp și telefonul rămân în secțiunea de contact, pe fiecare pagină. */
  .cta-band { display: none; }
  /* Coloana „Contact” din footer (telefon, email, oraș, program) iese pe telefon:
     aceleași date sunt mai sus, în secțiunea de contact, iar pentru Google rămân
     oricum în datele structurate din <head>. */
  .footer__contact { display: none; }
  /* .stats n-are padding sus — se baza pe spațiul lăsat de carduri deasupra.
     Fără carduri, cifrele s-ar lipi de hero, așa că îl punem înapoi aici. */
  .stats { padding-top: clamp(28px, 7vw, 44px); }
  /* Pe telefon textul din hero stă pe toată lățimea, deci trece și peste peretele
     alb al casei → voal uniform, mai închis decât pe desktop, ca să se citească. */
  .hero__overlay { background: linear-gradient(180deg, rgba(18,13,9,0.74) 0%, rgba(18,13,9,0.68) 45%, rgba(18,13,9,0.88) 100%); }
  /* Butoanele pe telefon: le strângem puțin, dar nu sub ~44px înălțime — sub atât
     degetul ratează ținta, iar butonul de sunat e tot ce contează pe mobil. */
  .btn { padding: 0.72em 1.4em; }
  .btn--lg { padding: 0.86em 1.5em; font-size: var(--fs-base); }
  .call-fab { font-size: var(--fs-base); padding: 0.78em; }
  /* Pe telefon fraza a doua din subtitlu pleacă de pe rând nou, ca să nu se lipească
     de „un singur constructor” într-un bloc greu de citit. */
  .section__sub-line { display: block; }
}

@media (max-width: 760px) {
  /* pe telefon ecranul e îngust → încadrăm spre casă, nu pe gazon */
  /* pe telefon încarcă poza mică: 162 KB în loc de 462 KB */
  .hero__bg { background-image: url("graphics/hero-mobile.jpg");
    background-image: image-set(url("graphics/hero-mobile.webp") type("image/webp"), url("graphics/hero-mobile.jpg") type("image/jpeg")); background-position: 74% 45%; }
  /* pe telefon căsuțele din galerie sunt pe toată lățimea → ramă lată, altfel
     o singură poză ocupa jumătate de ecran și derulai o veșnicie prin galerie */
  .tile { aspect-ratio: 5 / 4; }
  .compare { grid-template-columns: 1fr; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }
  .areas { grid-template-columns: 1fr; }
  /* pe telefon coloanele footerului stau una sub alta → spațiu mai mic între ele,
     ca siglele ANPC să nu rămână rupte jos de tot */
  .footer__grid { grid-template-columns: 1fr; gap: var(--sp-block); }
  .footer__end { grid-template-columns: 1fr; row-gap: var(--sp-block); }
  .footer__anpc { margin-top: -4px; }
  .about__badge { left: 14px; bottom: 14px; }
  .call-fab { display: flex; }
  .lightbox__nav { width: 46px; height: 46px; }
  .lightbox__nav--prev { left: 10px; }
  .lightbox__nav--next { right: 10px; }
  .to-top { bottom: 84px; right: 18px; }
  .footer { padding-bottom: 80px; }
}

@media (max-width: 480px) {
  .services, .gallery, .steps, .testimonials, .guarantees__grid { grid-template-columns: 1fr; }
  .guarantees__grid { margin-top: -38px; }
}

/* ═══ Reduced motion ═══ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  .hero__bg { transform: none; animation: none; }
  .marquee__track { animation: none; }
}


/* ═══════════════════════════════════════════════════════════
   PAGINI INTERIOARE (case-la-cheie, case-la-rosu, costuri…)
   ═══════════════════════════════════════════════════════════ */

/* meniul pe fundal deschis (paginile interioare nu au hero cu poză) */
.nav--solid { background: rgb(var(--bg-rgb) / 0.9); backdrop-filter: saturate(180%) blur(14px); border-bottom-color: var(--line); }
.nav--solid:not(.scrolled) .brand__mark { filter: none; }
.nav--solid:not(.scrolled) .brand__text { color: var(--ink); }
.nav--solid:not(.scrolled) .brand__tagline { color: var(--ink-2); }
.nav--solid:not(.scrolled) .nav__links > a:not(.btn) { color: var(--ink-2); }
.nav--solid:not(.scrolled) .nav__links > a.active { color: var(--accent); }

/* capul paginii */
.page-hero { padding: clamp(104px, 9vw, 130px) 0 var(--sp-head); background: linear-gradient(180deg, var(--bg-2), var(--bg)); border-bottom: 1px solid var(--line); }
.page-hero__inner { max-width: 860px; }
.page-hero h1 { font-size: var(--fs-h2); margin: 0.3em 0 0.35em; }
.page-hero__lead { font-size: var(--fs-md); color: var(--ink-2); max-width: 62ch; }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-gap); margin-top: var(--sp-block); }

.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--fs-xs); color: var(--muted); }
.breadcrumbs a { color: var(--accent-strong); font-weight: 500; }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs span[aria-current] { color: var(--muted); }

/* text lung, lizibil */
.prose { max-width: 860px; }
.prose > * + * { margin-top: var(--sp-block); }
.prose h2 { font-size: var(--fs-h2s); margin-top: var(--sp-head); }
.prose h3 { font-size: var(--fs-h3); margin-top: var(--sp-block); }
.prose p, .prose li { color: var(--ink-2); }
.prose p { font-size: var(--fs-md); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a:not(.btn) { color: var(--accent-strong); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose ul, .prose ol { display: grid; gap: 10px; margin-top: var(--sp-block); }
.prose ul li { position: relative; padding-left: 30px; font-size: var(--fs-base); }
.prose ul li::before { content: ""; position: absolute; left: 8px; top: 11px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.prose ol { counter-reset: n; }
.prose ol li { position: relative; padding-left: 40px; counter-increment: n; font-size: var(--fs-base); }
.prose ol li::before { content: counter(n); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-strong); font-size: 0.82rem; font-weight: 700; display: grid; place-items: center; }

/* tabel (etape, costuri) */
.table-wrap { overflow-x: auto; margin-top: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 520px; }
.prose th, .prose td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.prose thead th { background: var(--bg-2); font-family: var(--font-display); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink); }
.prose tbody tr:last-child td { border-bottom: 0; }
.prose td:first-child { font-weight: 600; color: var(--ink); }

/* casetă de atenționare / notă */
.callout { margin-top: var(--sp-block); padding: var(--sp-card); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow-sm); }
.callout p { font-size: var(--fs-base); }
.callout p + p { margin-top: 10px; }
.callout--dark { background: var(--ink); border-left-color: var(--gold); }
.callout--dark p { color: #D9D2C6; }
.callout--dark strong { color: #fff; }

/* linkuri către paginile surori */
.pagelinks { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-gap); margin-top: var(--sp-block); }
.pagelink { display: block; padding: var(--sp-card); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s; }
.pagelink:hover { transform: translateY(-5px); border-color: var(--accent); box-shadow: var(--shadow); }
.pagelink strong { display: block; font-family: var(--font-display); font-size: var(--fs-h4); color: var(--ink); margin-bottom: 6px; }
.pagelink span { font-size: var(--fs-sm); color: var(--muted); }
.pagelink::after { content: "→"; display: inline-block; margin-top: 12px; color: var(--accent); font-weight: 700; }

/* link „vezi detalii” pe cardurile de servicii din prima pagină */
.service__link { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: var(--fs-sm); font-weight: 600; color: var(--accent-strong); transition: gap 0.25s var(--ease); }
.service__link::after { content: "→"; }
.service__link:hover { gap: 11px; }

/* pagina 404 */
.notfound { min-height: 74vh; display: grid; place-items: center; text-align: center; padding: 140px 0 80px; }
.notfound__code { font-family: var(--font-display); font-size: clamp(4.5rem, 14vw, 9rem); line-height: 1; color: transparent; -webkit-text-stroke: 2px var(--accent); }

@media (max-width: 980px) {
  .footer__grid { grid-template-columns: 0.8fr 2fr; }
  .pagelinks { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .pagelinks { grid-template-columns: 1fr; }
  .page-hero { padding-top: 112px; }
  .page-hero__actions .btn { width: 100%; }
}

/* buton secundar pentru fundal deschis (paginile interioare) */
.btn--outline { background: var(--surface); color: var(--ink); border: 1.5px solid var(--line); box-shadow: var(--shadow-sm); }
.btn--outline:hover { border-color: var(--accent); color: var(--accent-strong); transform: translateY(-2px); }

/* primul bloc de text vine mai aproape de titlu */
.page-hero + .section { padding-top: var(--sp-head); }

/* ═══════════════════ BANNER COOKIE-URI ═══════════════════ */
.cookiebar {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  z-index: 250; width: min(920px, calc(100vw - 28px));
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 18px 20px;
  animation: cookieUp 0.4s var(--ease) both;
}
.cookiebar[hidden] { display: none; }
.cookiebar.is-hiding { animation: cookieDown 0.3s var(--ease) both; }
@keyframes cookieUp   { from { opacity: 0; transform: translate(-50%, 22px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes cookieDown { from { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, 22px); } }
.cookiebar__inner { display: flex; align-items: center; gap: 20px; }
.cookiebar__text { flex: 1; }
.cookiebar__text strong { display: block; font-family: var(--font-display); font-size: 1rem; color: var(--ink); margin-bottom: 3px; }
.cookiebar__text span { font-size: var(--fs-sm); line-height: 1.45; color: var(--muted); }
.cookiebar__text a { color: var(--accent-strong); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.cookiebar__actions { display: flex; gap: 10px; flex: none; }
.cookiebar__decline { background: var(--bg); color: var(--ink-2); border: 1px solid var(--line); }
.cookiebar__decline:hover { border-color: var(--ink-2); color: var(--ink); }

@media (max-width: 700px) {
  .cookiebar { bottom: 12px; padding: 16px; }
  .cookiebar__inner { flex-direction: column; align-items: stretch; gap: 14px; }
  .cookiebar__actions { justify-content: stretch; }
  .cookiebar__actions .btn { flex: 1; }
  /* nu acoperim butonul flotant de apel */
  .cookiebar { bottom: 76px; }
}

/* bifa de acord din formular */
.field__check { display: flex; align-items: flex-start; gap: 11px; margin-top: 4px; cursor: pointer; }
.field__check input { flex: none; width: 19px; height: 19px; margin-top: 2px; accent-color: var(--accent); cursor: pointer; }
.field__check span { font-size: var(--fs-sm); line-height: 1.45; color: var(--muted); }
.field__check a { color: var(--accent-strong); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.field__check.invalid span { color: var(--danger); }
.field__check.invalid input { outline: 2px solid var(--danger); outline-offset: 2px; border-radius: 4px; }

/* linkuri legale în bara de jos */
.footer__legal { display: inline-flex; flex-wrap: wrap; gap: 18px; }
.footer__legal a { transition: color 0.2s; }
.footer__legal a:hover { color: var(--accent); text-decoration: underline; }

/* data de pe paginile legale */
.legal-date { margin-top: 16px; font-size: var(--fs-sm); color: var(--muted); }

/* Fundal întunecat cât timp meniul mobil e deschis: se vede clar că restul
   paginii e „în spate" și că un click acolo închide meniul.
   z-index 95 = peste butoanele flotante (90), dar SUB bara de meniu (100).
   Panoul are 105, dar e în interiorul barei, deci se desenează la nivelul ei —
   de aceea orice valoare peste 100 ar acoperi chiar meniul. */
body.menu-open::after {
  content: ""; position: fixed; inset: 0; z-index: 95;
  background: rgba(15, 12, 8, 0.5);
  animation: fadeIn 0.3s var(--ease) both;
}
/* bannerul de cookie-uri (250) ar rămâne aprins peste fundal; îl ascundem cât e meniul deschis */
body.menu-open .cookiebar { opacity: 0; pointer-events: none; transition: opacity 0.2s; }

/* ═══════════════════ INSIGNE ANPC ═══════════════════ */
/* Stau pe toată lățimea lui .footer__end, adică fix sub „Ce executăm” și
   „Contact”. Cele două insigne împart spațiul în două, deci rămân una lângă
   alta oricât de îngustă ar fi zona. Pe telefon, unde coloana Contact e
   ascunsă, rămân vizibile sub „Ce executăm”. */
.footer__anpc { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; }
.footer__anpc a { flex: 1 1 0; min-width: 0; max-width: 152px; display: block; border-radius: 5px; opacity: 0.8; transition: opacity 0.25s, transform 0.25s var(--ease); }
.footer__anpc a:hover { opacity: 1; transform: translateY(-2px); }
.footer__anpc img { width: 100%; height: auto; display: block; border-radius: 4px; }
/* pe ecrane mici nu le lăsăm să se întindă cât toată lățimea paginii */
@media (max-width: 980px) { .footer__anpc { max-width: 340px; margin-top: 4px; } }

/* text care dispare pe telefon, ca fraza să rămână scurtă */
@media (max-width: 760px) { .hide-mobile { display: none; } }