/* Mobila VD — stil site prezentare
   Un singur fisier, fara framework, fara fonturi externe.
   Fonturile externe ar incetini site-ul si ar trimite date catre alt server,
   ceea ce ridica probleme de GDPR. Folosim fonturile din sistem. */

:root {
  --ground: #f7f5f1;
  --surface: #ffffff;
  --surface-2: #efece6;
  --ink: #191713;
  --ink-2: #3a352e;
  --muted: #6e6960;
  --line: #e4dfd7;
  --line-2: #d3cdc2;

  --brass: #9c6b1e;
  --brass-dark: #7d5416;
  --action: #1e5641;
  --action-dark: #17422f;

  --serif: "Iowan Old Style", "Charter", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --wrap: 1180px;
  --r: 4px;
  /* Inaltimea antetului fix. Folosita si la decalajul de derulare
     catre ancore, ca sa nu acopere titlul sectiunii. */
  --head-h: 69px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* Antetul este fix, deci o ancora ar ajunge sub el. Decalajul opreste
   derularea putin mai sus, ca titlul sectiunii sa ramana vizibil. */
[id] { scroll-margin-top: calc(var(--head-h) + 24px); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--brass-dark); }
a:focus-visible,
button:focus-visible { outline: 3px solid var(--action); outline-offset: 2px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 22px; }
.prose { max-width: 68ch; }

/* Pe unele pagini .wrap si .prose stau pe acelasi element. Fara regula asta,
   .prose ar micsora containerul, iar textul ar aparea centrat in pagina si
   nealiniat cu celelalte sectiuni. Containerul ramane larg, textul se
   ingusteaza. */
.wrap.prose { max-width: var(--wrap); }
.wrap.prose > * { max-width: 68ch; }

h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -.015em; text-wrap: balance; }
h1 { font-size: clamp(2.05rem, 1.35rem + 2.9vw, 3.35rem); line-height: 1.1; margin: 0 0 16px; }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.05rem); line-height: 1.18; margin: 0 0 18px; }
h3 { font-size: 1.14rem; line-height: 1.3; margin: 0 0 8px; font-family: var(--sans); font-weight: 650; }
p { margin: 0 0 16px; }

.eyebrow {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 12px;
}

/* ---------- marcaj pentru informatii lipsa ---------- */
.de-completat {
  background: #ffe9a8;
  color: #6b4c00;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: .93em;
  border-bottom: 2px dotted #b58900;
}

/* ---------- antet ---------- */
.head {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.head-in {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 22px;
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: calc(var(--head-h) - 1px);  /* 1px este bordura de jos */
}
.logo { display: block; text-decoration: none; line-height: 1.1; }
/* Latimea se calculeaza singura din inaltime, ca sa nu se deformeze logoul.
   Sursa are 500x149 px, deci ramane clar si pe ecrane retina. */
.logo img { height: 32px; width: auto; display: block; }
.logo span { display: block; margin-top: 4px; font-family: var(--sans); font-size: .6rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.nav { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.nav a { color: var(--ink-2); text-decoration: none; font-size: .93rem; font-weight: 550; }
.nav a:hover { color: var(--brass-dark); }
.nav .tel {
  background: var(--action);
  color: #fff;
  padding: 10px 17px;
  border-radius: var(--r);
  font-weight: 650;
  white-space: nowrap;
}
.nav .tel:hover { background: var(--action-dark); color: #fff; }
.burger { display: none; margin-left: auto; background: none; border: 1px solid var(--line-2); border-radius: var(--r); padding: 9px 12px; font-size: .9rem; font-weight: 600; cursor: pointer; color: var(--ink); }

@media (max-width: 900px) {
  .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--surface); border-bottom: 1px solid var(--line); flex-direction: column; align-items: stretch; gap: 0; padding: 8px 22px 18px; }
  .nav.open { display: flex; }
  .nav a { padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 1rem; }
  .nav .tel { text-align: center; margin-top: 12px; border-bottom: none; }
  .burger { display: block; }
}

/* ---------- hero ---------- */
/* Fotografia sta in fundal, absolut pozitionata, iar textul curge normal peste
   ea. Asa sectiunea creste cu textul: pe telefoanele mici textul nu mai iese
   din poza si nu se suprapune peste sectiunea urmatoare. */
.hero { position: relative; background: var(--ink); overflow: hidden; }
.hero img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; opacity: .92;
}
/* Voal intunecat doar peste partea din stanga, unde stau titlul si butoanele.
   Asa textul alb ramane lizibil, iar dreapta fotografiei isi pastreaza
   culorile. Fara el, contrastul pe o poza deschisa scade sub pragul de 4,5:1. */
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg,
              rgba(14,12,10,.86) 0%,
              rgba(14,12,10,.72) 34%,
              rgba(14,12,10,.34) 62%,
              rgba(14,12,10,.06) 100%);
  pointer-events: none;
}
/* Pe telefon textul ocupa toata latimea, deci voalul devine uniform. */
@media (max-width: 760px) {
  .hero::after {
    background: linear-gradient(180deg,
                rgba(14,12,10,.72) 0%,
                rgba(14,12,10,.78) 100%);
  }
}
.hero-in {
  position: relative;
  z-index: 1;
  min-height: clamp(340px, 56vh, 560px);
  padding: clamp(44px, 7vw, 84px) 0;
  display: flex; align-items: center;
}
.hero-in .wrap { width: 100%; }
.hero h1 { color: #fff; max-width: 17ch; margin-bottom: 14px; }
.hero p { color: #ede9e2; max-width: 52ch; font-size: 1.08rem; }
.hero .eyebrow { color: #e8c07a; }

.hero-small { padding: 46px 0 34px; background: var(--surface); border-bottom: 1px solid var(--line); }
.hero-small h1 { margin-bottom: 12px; }
.hero-small .raspuns { font-size: 1.1rem; color: var(--ink-2); max-width: 68ch; margin: 0; }

.btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.btn {
  display: inline-block;
  padding: 14px 24px;
  border-radius: var(--r);
  font-weight: 650;
  text-decoration: none;
  font-size: 1rem;
  border: 2px solid transparent;
}
.btn-1 { background: var(--action); color: #fff; }
.btn-1:hover { background: var(--action-dark); color: #fff; }
.btn-2 { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.65); }
.btn-2:hover { background: #fff; color: var(--ink); }
.btn-3 { background: var(--surface); color: var(--ink); border-color: var(--line-2); }
.btn-3:hover { border-color: var(--ink); }

/* ---------- bara de dovezi ---------- */
.proof { background: var(--ink); color: #f2efe9; }
.proof-g {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: #2e2a24;
}
.proof-g div { background: var(--ink); padding: 26px 20px; }
.proof b { display: block; font-family: var(--serif); font-size: 1.75rem; line-height: 1.1; margin-bottom: 4px; color: #fff; }
.proof span { font-size: .89rem; color: #b9b2a6; }
@media (max-width: 780px) { .proof-g { grid-template-columns: repeat(2, 1fr); } }

/* ---------- sectiuni ---------- */
section { padding: 62px 0; }
section.tight { padding: 44px 0; }
section.alt { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sec-head { margin-bottom: 34px; max-width: 66ch; }
.sec-head p { color: var(--muted); margin: 0; }

/* ---------- grile ---------- */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 1000px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cards { grid-template-columns: 1fr; } }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  transition: border-color .18s ease, transform .18s ease;
}
.card:hover { border-color: var(--ink); transform: translateY(-2px); }
/* height:auto este obligatoriu: atributele width/height din HTML (puse ca sa nu
   sara pagina la incarcare) ar anula altfel aspect-ratio, iar pozele ar iesi
   de inaltimi diferite pe acelasi rand. */
.card img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; }
.card-b { padding: 15px 17px 18px; }
.card-b h3 { margin: 0 0 5px; }
.card-b p { margin: 0; font-size: .89rem; color: var(--muted); }
.card-b .go { display: inline-block; margin-top: 10px; font-size: .85rem; font-weight: 650; color: var(--brass-dark); }

/* ---------- galerie ---------- */
.gal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 900px) { .gal { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .gal { grid-template-columns: 1fr; } }
.gal button {
  padding: 0; border: 1px solid var(--line); background: var(--surface);
  border-radius: var(--r); overflow: hidden; cursor: zoom-in; display: block; width: 100%;
}
.gal img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; transition: transform .3s ease; }
.gal button:hover img { transform: scale(1.03); }

/* ---------- lista de argumente ---------- */
.feats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px 34px; }
@media (max-width: 780px) { .feats { grid-template-columns: 1fr; } }
.feat h3 { margin-bottom: 5px; }
.feat p { margin: 0; color: var(--muted); font-size: .96rem; }

/* ---------- pasii procesului ---------- */
.steps { counter-reset: st; display: grid; gap: 2px; }
.step {
  counter-increment: st;
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 22px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.step:last-child { border-bottom: none; }
.step::before {
  content: counter(st);
  font-family: var(--serif);
  font-size: 2rem;
  color: var(--brass);
  line-height: 1;
}
.step p { margin: 0; color: var(--muted); }
@media (max-width: 560px) { .step { grid-template-columns: 40px 1fr; gap: 14px; } .step::before { font-size: 1.5rem; } }

/* ---------- servicii gratuite ---------- */
.free { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
@media (max-width: 900px) { .free { grid-template-columns: repeat(2, 1fr); } }
.free div { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--action); border-radius: var(--r); padding: 15px 16px; }
.free b { display: block; margin-bottom: 3px; font-size: .97rem; }
.free span { font-size: .87rem; color: var(--muted); }

/* ---------- intrebari ---------- */
.qa { border-top: 1px solid var(--line); }
.qa details { border-bottom: 1px solid var(--line); }
.qa summary {
  cursor: pointer; padding: 18px 0; font-weight: 650; font-size: 1.04rem;
  list-style: none; display: flex; justify-content: space-between; gap: 20px; align-items: baseline;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; color: var(--brass); font-size: 1.4rem; line-height: 1; flex-shrink: 0; }
.qa details[open] summary::after { content: "–"; }
.qa .a { padding: 0 0 20px; color: var(--ink-2); max-width: 70ch; }
.qa .a p:last-child { margin-bottom: 0; }

/* ---------- tabel materiale ---------- */
.mat { display: grid; gap: 16px; }
.mat article { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 20px 22px; }
.mat h3 { margin-bottom: 6px; }
.mat p { margin: 0 0 8px; }
.mat .use { font-size: .88rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: 9px; margin: 0; }

/* ---------- localitati ---------- */
.locs { display: flex; flex-wrap: wrap; gap: 9px; padding: 0; margin: 0; list-style: none; }
.locs li { background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 7px 15px; font-size: .93rem; }

/* ---------- blocul de contact final ---------- */
.cta-block { background: var(--ink); color: #f2efe9; }
.cta-block h2 { color: #fff; }
.cta-block p { color: #c4bdb1; max-width: 56ch; }
.cta-block .btn-3 { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.cta-block .btn-3:hover { background: #fff; color: var(--ink); }

/* ---------- contact ---------- */
.contact-g { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
@media (max-width: 860px) { .contact-g { grid-template-columns: 1fr; } }
.dl { margin: 0; }
.dl div { display: flex; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.dl dt { font-weight: 650; min-width: 108px; flex-shrink: 0; }
.dl dd { margin: 0; }
.dl a { font-weight: 600; }

/* ---------- subsol ---------- */
.foot { background: var(--surface); border-top: 1px solid var(--line); padding: 52px 0 30px; font-size: .93rem; }
.foot-g { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 34px; margin-bottom: 34px; }
@media (max-width: 780px) { .foot-g { grid-template-columns: 1fr; gap: 26px; } }
.foot h4 { font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; font-weight: 700; }
.foot ul { list-style: none; padding: 0; margin: 0; }
.foot li { margin-bottom: 8px; }
.foot a { color: var(--ink-2); text-decoration: none; }
.foot a:hover { color: var(--brass-dark); text-decoration: underline; }
.foot .bottom { border-top: 1px solid var(--line); padding-top: 20px; color: var(--muted); font-size: .86rem; display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; }

/* ---------- bara fixa de pe telefon ---------- */
.callbar { display: none; }
@media (max-width: 760px) {
  .callbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 80;
    border-top: 1px solid var(--line-2);
  }
  .callbar a {
    padding: 15px 8px; text-align: center; text-decoration: none;
    font-weight: 700; font-size: .97rem;
  }
  .callbar .c1 { background: var(--action); color: #fff; }
  .callbar .c2 { background: var(--surface); color: var(--ink); }
  body { padding-bottom: 56px; }
}

/* ---------- lightbox ---------- */
.lb {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(15,13,11,.94);
  display: none; align-items: center; justify-content: center; padding: 22px;
}
.lb.open { display: flex; }
.lb img { max-width: 100%; max-height: 88vh; object-fit: contain; border-radius: var(--r); }
.lb button {
  position: absolute; background: rgba(255,255,255,.14); color: #fff;
  border: none; cursor: pointer; font-size: 1.6rem; line-height: 1;
  width: 50px; height: 50px; border-radius: 50%;
}
.lb .x { top: 20px; right: 20px; }
.lb .prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lb .next { right: 16px; top: 50%; transform: translateY(-50%); }
.lb button:hover { background: rgba(255,255,255,.3); }
.lb .cap { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; color: #ddd6c9; font-size: .87rem; }

/* ---------- breadcrumb ---------- */
.crumb { font-size: .85rem; color: var(--muted); padding: 14px 0 0; }
.crumb a { color: var(--muted); text-decoration: none; }
.crumb a:hover { color: var(--brass-dark); text-decoration: underline; }

/* ---------- adresa, peste tot la fel, cu link catre Google Maps ---------- */
/* Adresa e un element de conversie: trebuie sa se vada ca se poate apasa.
   Foloseste aceeasi culoare ca restul linkurilor, iar pe fundal inchis (blocul
   de indemn final) devine alba. */
.adr {
  color: var(--brass-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(125, 84, 22, .45);
}
.adr:hover { text-decoration-color: currentColor; }
/* Pe fundal inchis - fotografia din antet si blocul de indemn final - culoarea
   de bronz nu s-ar citi, deci adresa devine alba. */
.cta-block .adr,
.hero .adr { color: #fff; text-decoration-color: rgba(255, 255, 255, .55); }
.cta-block .adr:hover,
.hero .adr:hover { text-decoration-color: #fff; }
.dl .adr { font-weight: 600; }
/* In subsol, `.foot a` scoate sublinierea si schimba culoarea. Fara regula
   asta, adresa din subsol nu s-ar vedea deloc ca link catre harta. */
.foot .adr {
  color: var(--ink-2);
  text-decoration: underline;
  text-decoration-color: var(--line-2);
}
.foot .adr:hover { color: var(--brass-dark); text-decoration-color: currentColor; }

/* ---------- fotografie mare in pagina ---------- */
.foto { margin: 0; }
.foto figcaption {
  margin-top: 10px;
  font-size: .92rem;
  color: var(--muted);
}
.foto img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--r);
}

/* ---------- harta, incarcata doar la cerere ---------- */
/* Harta Google aduce scripturi si cookie-uri de pe alt server. O incarcam doar
   daca vizitatorul apasa: pagina ramane rapida, iar pana atunci nu pleaca
   nimic catre Google. */
.harta {
  margin-top: 20px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--surface-2);
  aspect-ratio: 16 / 9;
  display: flex;
}
.harta-cerere {
  margin: auto;
  padding: 24px 22px;
  text-align: center;
  max-width: 46ch;
}
.harta-cerere p { margin: 0 0 8px; color: var(--muted); font-size: .95rem; }
.harta-cerere p strong { color: var(--ink); font-size: 1.05rem; }
.harta-cerere .btns { justify-content: center; margin-top: 16px; }
.harta-cerere .btn { cursor: pointer; font-family: inherit; }
.harta iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 620px) { .harta { aspect-ratio: 4 / 3; } }