/* ============================================================================
   MARIAN CRINGUȘ · TERASAMENTE OLT
   Direcție: industrial onest. Oțel închis, amber de siguranță, tipar greu.
   Culorile utilajului, nu ale unei agenții. Mobil întâi — omul caută din curte.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Archivo:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root{
  --otel-900:#0E0F11;      /* fundalul de bază: oțel aproape negru */
  --otel-800:#15171A;
  --otel-700:#1D2025;
  --otel-600:#2A2E35;
  --linie:#343941;

  --amber:#FFB302;         /* amberul de pe utilaj — singurul accent tare */
  --amber-cald:#FFC94A;
  --rugina:#C2410C;        /* pământ răscolit, folosit rar */

  /* Verdele oficial WhatsApp. NU face parte din paletă și nu se folosește
     nicăieri altundeva decât pe butoanele de WhatsApp — omul îl recunoaște
     înainte să citească textul, de aia se ține exact culoarea lor. */
  --whatsapp:#25D366;

  --alb:#F7F5F1;           /* alb cald, nu clinic */
  --gri:#A8ADB6;
  --gri-slab:#6E7480;

  --max:1180px;
  --pas:clamp(56px, 9vw, 104px);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--otel-900);
  color:var(--alb);
  font-family:'IBM Plex Sans',system-ui,sans-serif;
  font-size:17px;
  line-height:1.65;
  overflow-x:hidden;
  padding-bottom:76px;              /* loc pentru bara fixă de apel, pe telefon */
}
@media(min-width:860px){ body{padding-bottom:0} }

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* --- textură: granulație fină peste tot, ca să nu fie plat digital --- */
body::before{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap{max-width:var(--max);margin:0 auto;padding:0 22px}
@media(min-width:860px){ .wrap{padding:0 40px} }

/* ============================ TIPOGRAFIE ============================ */
.display{
  font-family:'Archivo Black',sans-serif;
  font-weight:400;
  line-height:.94;
  letter-spacing:-.028em;
  text-transform:uppercase;
}
h1{font-size:clamp(40px,10.5vw,92px)}
h2{font-size:clamp(29px,6.2vw,54px)}
h3{font-size:clamp(19px,3vw,25px)}

.eticheta{
  font-family:'Archivo',sans-serif;
  font-size:11.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--amber);
  display:flex;align-items:center;gap:11px;
}
.eticheta::before{content:"";width:26px;height:2px;background:var(--amber);flex:none}

/* banda de avertizare de pe utilaje — semnătura vizuală a site-ului */
.hazard{
  height:9px;
  background:repeating-linear-gradient(-45deg,var(--amber) 0 15px,var(--otel-900) 15px 30px);
}
.hazard.subtire{height:5px;opacity:.85}

/* ============================ ANTET ============================ */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(14,15,17,.93);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--linie);
}
.bara{display:flex;align-items:center;justify-content:space-between;gap:16px;height:70px}
.marca{display:flex;align-items:center;gap:12px;min-width:0}
.marca .sigla{
  width:40px;height:40px;flex:none;border-radius:3px;
  background:var(--amber);color:var(--otel-900);
  font-family:'Archivo Black',sans-serif;font-size:19px;
  display:grid;place-items:center;letter-spacing:-.04em;
}
.marca .nume{font-family:'Archivo Black',sans-serif;font-size:15.5px;letter-spacing:-.01em;line-height:1.1;text-transform:uppercase}
.marca .sub{font-size:11px;color:var(--gri-slab);letter-spacing:.1em;text-transform:uppercase;margin-top:2px}

.sun-sus{
  display:none;align-items:center;gap:9px;
  background:var(--amber);color:var(--otel-900);
  font-family:'Archivo Black',sans-serif;font-size:16px;letter-spacing:-.01em;
  padding:12px 20px;border-radius:3px;white-space:nowrap;
  transition:transform .15s ease, box-shadow .15s ease;
}
.sun-sus:hover{transform:translateY(-2px);box-shadow:0 8px 22px -8px rgba(255,179,2,.7)}
@media(min-width:640px){ .sun-sus{display:flex} }

/* Butonul de WhatsApp. Aceeași formă ca butonul de apel — aceeași rază, același
   tipar greu, același text închis — doar verdele e al lor. Se recunoaște înainte
   să fie citit, de aia merită singura culoare din afara paletei. */
.wa{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--whatsapp);color:var(--otel-900);
  font-family:'Archivo Black',sans-serif;font-size:16px;letter-spacing:-.01em;
  padding:12px 20px;border-radius:3px;white-space:nowrap;
  transition:transform .15s ease, box-shadow .15s ease;
}
.wa:hover{transform:translateY(-2px);box-shadow:0 8px 22px -8px rgba(37,211,102,.7)}

/* În antet, telefonul și WhatsApp-ul stau unul lângă altul, lipite de marginea
   dreaptă. WhatsApp apare doar pe ecrane mari: sub 900px, lângă marcă și numărul
   de telefon, al doilea buton ar înghesui antetul — pe telefon omul are oricum
   ambele butoane în bara fixă de jos, la degetul mare. */
.apel-antet{display:flex;align-items:center;gap:10px}
.wa-sus{display:none}
@media(min-width:900px){ .wa-sus{display:inline-flex} }

/* Bara fixă de jos, pe telefon — la degetul mare, nu sus.
   Sunt două butoane lipite: stânga apelul (amber), dreapta WhatsApp (verde),
   despărțite de aceeași dungă de oțel cu care bara se desprinde de pagină.
   Textul fiecărei jumătăți stă pe UN rând, ca înălțimea barei să rămână cea
   dinainte — `body` rezervă 76px pentru ea și nu se atinge. */
.sun-jos{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:flex;
  border-top:3px solid var(--otel-900);
}
.sun-jos > a{
  flex:1 1 50%;min-width:0;
  display:flex;align-items:center;justify-content:center;gap:9px;
  font-family:'Archivo Black',sans-serif;font-size:19px;
  padding:19px 12px;white-space:nowrap;
}
.sun-jos .apel{background:var(--amber);color:var(--otel-900)}
.sun-jos .wa{
  border-radius:0;border-left:3px solid var(--otel-900);
  font-size:19px;padding:19px 12px;
}
/* în bara fixă butoanele nu se ridică la hover — bara stă lipită de ecran */
.sun-jos .wa:hover{transform:none;box-shadow:none}
.sun-jos small{font-family:'IBM Plex Sans';font-weight:600;font-size:12px;letter-spacing:.08em;opacity:.72;text-transform:uppercase}
@media(min-width:860px){ .sun-jos{display:none} }

/* Un singur link in antet, spre portofoliu (lucrari.html). Apare doar de la 1000px in sus,
   unde mai rama loc intre marca si butoanele de apel si WhatsApp; mai jos de atat antetul
   s-ar inghesui, iar linkul se gaseste oricum in subsol, pe toate paginile. */
.nav-sus{display:none}
@media(min-width:1000px){
  .nav-sus{
    display:flex;align-items:center;gap:22px;margin-left:auto;margin-right:24px;
    font-family:'Archivo',sans-serif;font-size:14.5px;font-weight:600;
    letter-spacing:.04em;text-transform:uppercase;
  }
  .nav-sus a{color:var(--gri);transition:color .16s ease}
  .nav-sus a:hover{color:var(--amber)}
  .nav-sus a.activ{color:var(--amber)}
}
/* ============================ EROU ============================ */
.erou{position:relative;overflow:hidden;border-bottom:1px solid var(--linie)}
.erou .fundal{position:absolute;inset:0}
.erou .fundal img{width:100%;height:100%;object-fit:cover;filter:grayscale(.12) contrast(1.12) brightness(.74) saturate(1.06)}
.erou .fundal::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(14,15,17,.28) 0%,rgba(14,15,17,.55) 38%,rgba(14,15,17,.9) 80%,var(--otel-900) 100%),
             radial-gradient(120% 80% at 12% 0%,rgba(255,179,2,.13),transparent 60%);
}
/* Atenție la scurtătura `padding: X 0 Y`: elementul are și clasa `.wrap`, iar scurtătura
   aceea îi ștergea marginea laterală de 22px. Pe telefon, titlul, paragraful și insignele
   din erou ajungeau lipite de marginea ecranului (măsurat 0px pe 12 septembrie 2026, față
   de 22px la antet și la restul secțiunilor). Se scriu doar sus și jos, ca lateralul să
   rămână cel din `.wrap` — 22px pe telefon, 40px pe ecran mare. */
.erou .continut{position:relative;z-index:2;padding-top:var(--pas);padding-bottom:calc(var(--pas) - 10px)}
.erou h1{margin:20px 0 0;max-width:15ch}
.erou h1 em{font-style:normal;color:var(--amber);display:block}

/* Pe telefon, titlul erou nu poate depăși lățimea ecranului.
   Măsurat pe 12 septembrie 2026, la 375 px: cuvântul „Buldoexcavator" ieșea cu 32 px
   în afara ecranului pe toate cele șase pagini de localitate și se citea
   „BULDOEXCAVATO" — tăietura nu se vedea la verificare pentru că `body` are
   `overflow-x:hidden`, adică ascunde exact dovada. Vinovate erau două reguli de mai sus:
   minimul de 40px din `h1{font-size:clamp(40px,...)}` și `max-width:15ch`, iar cuvântul
   are nevoie de ~16,3ch. Aici se scade titlul sub pragul acela și se lărgește limita,
   ca orice pagină — inclusiv una făcută mâine din șablon — să intre în ecran. */
@media (max-width:430px){
  .erou h1{font-size:clamp(26px,8.4vw,34px);max-width:18ch}
}
.erou .intro{font-size:clamp(17px,2.4vw,21px);color:var(--gri);max-width:44ch;margin-top:24px;line-height:1.55}

.insigne{display:flex;flex-wrap:wrap;gap:9px;margin-top:30px}
.insigna{
  font-family:'Archivo',sans-serif;font-size:12px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--alb);
  border:1px solid var(--linie);background:rgba(255,255,255,.035);
  padding:9px 14px;border-radius:2px;
}
.insigna b{color:var(--amber);font-weight:700}

/* ============================ PROMISIUNEA ============================ */
.promisiune{background:var(--otel-800);border-bottom:1px solid var(--linie)}
.stalpi{display:grid;gap:2px;background:var(--linie)}
@media(min-width:860px){ .stalpi{grid-template-columns:1fr 1fr} }
.stalp{background:var(--otel-800);padding:clamp(34px,5.5vw,58px) clamp(24px,4vw,52px);position:relative}
.stalp .cifra{
  font-family:'Archivo Black',sans-serif;font-size:74px;line-height:1;
  color:transparent;-webkit-text-stroke:1.5px var(--otel-600);
  position:absolute;top:20px;right:24px;user-select:none;
}
.stalp h3{margin:16px 0 12px;max-width:17ch}
.stalp h3 span{color:var(--amber)}
.stalp p{color:var(--gri);max-width:46ch}
.stalp p + p{margin-top:13px}

/* ============================ SERVICII ============================ */
.sectiune{padding:var(--pas) 0}
.cap{margin-bottom:clamp(30px,4.5vw,50px);max-width:60ch}
.cap h2{margin:18px 0 16px}
.cap p{color:var(--gri);font-size:clamp(16px,2vw,18.5px)}

.servicii{display:grid;gap:2px;background:var(--linie);border:1px solid var(--linie)}
@media(min-width:560px){ .servicii{grid-template-columns:1fr 1fr} }
@media(min-width:1000px){ .servicii{grid-template-columns:repeat(4,1fr)} }
.serviciu{
  background:var(--otel-800);padding:26px 22px 24px;
  display:flex;flex-direction:column;gap:9px;min-height:172px;
  position:relative;overflow:hidden;
  transition:background .18s ease;
}
.serviciu::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:var(--amber);transform:scaleX(0);transform-origin:left;
  transition:transform .26s cubic-bezier(.4,0,.2,1);
}
.serviciu:hover{background:var(--otel-700)}
.serviciu:hover::after{transform:scaleX(1)}
.serviciu .nr{
  font-family:'Archivo Black',sans-serif;font-size:12px;color:var(--gri-slab);
  letter-spacing:.06em;
}
.serviciu h3{font-size:20px;letter-spacing:-.01em;line-height:1.15}
.serviciu p{font-size:14.5px;color:var(--gri);line-height:1.55;flex:1}
.serviciu .mai{
  font-family:'Archivo',sans-serif;font-size:12px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--amber);margin-top:4px;
}

/* ============================ DOVADĂ / FOTO ============================ */
.fasie{position:relative;min-height:clamp(280px,45vw,440px);display:grid;place-items:center;overflow:hidden}
.fasie img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.1) brightness(.55) contrast(1.12)}
.fasie .peste{position:relative;z-index:2;text-align:center;padding:56px 22px;max-width:34ch}
.fasie .peste h2{margin-bottom:18px}
.fasie .peste p{color:var(--gri);font-size:clamp(16px,2vw,19px)}

/* ============================ ZONA ============================ */
.zone{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.zona{
  font-family:'Archivo',sans-serif;font-weight:600;font-size:15px;
  border:1px solid var(--linie);padding:13px 19px;border-radius:2px;
  background:var(--otel-800);transition:border-color .16s ease,color .16s ease;
}
.zona:hover{border-color:var(--amber);color:var(--amber)}
.zona.baza{background:var(--amber);color:var(--otel-900);border-color:var(--amber);font-weight:700}

/* ============================ APELUL DIN EROU ============================
   Pe paginile de serviciu, sub insigne, stau cele două chemări la acțiune: apelul
   și WhatsApp. Pentru WhatsApp se folosește `.wa` de mai sus, neschimbată. Pentru
   apel e nevoie de un buton amber care se vede la ORICE lățime, și `.sun-sus` nu
   poate fi refolosit: el e ascuns sub 640px, pentru că acolo apelul stă în bara
   fixă de jos. În erou, însă, butonul trebuie să existe și pe telefon. De aceea
   `.buton` — aceeași formă, aceeași rază și același tipar ca `.wa`, ca cele două
   să arate ca o pereche, nu ca două butoane luate din locuri diferite. */
.butoane{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.buton{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--amber);color:var(--otel-900);
  font-family:'Archivo Black',sans-serif;font-size:16px;letter-spacing:-.01em;
  padding:12px 20px;border-radius:3px;white-space:nowrap;
  transition:transform .15s ease, box-shadow .15s ease;
}
.buton:hover{transform:translateY(-2px);box-shadow:0 8px 22px -8px rgba(255,179,2,.7)}

/* ============================ CONTACT ============================ */
.contact{background:var(--otel-800);border-top:1px solid var(--linie)}
/* Aceeași scurtătură ca la erou: `.contact-in` are și clasa `.wrap`, deci se scriu
   doar sus și jos, ca textul de contact să nu ajungă lipit de marginea ecranului. */
.contact-in{display:grid;gap:38px;padding-top:var(--pas);padding-bottom:var(--pas)}
@media(min-width:860px){ .contact-in{grid-template-columns:1.1fr .9fr;align-items:center;gap:70px} }
.tel-mare{
  display:inline-flex;align-items:center;gap:14px;
  font-family:'Archivo Black',sans-serif;
  font-size:clamp(30px,6vw,46px);letter-spacing:-.02em;color:var(--amber);
  margin:20px 0 14px;
}
/* Rândul de chemare la acțiune din secțiunea de contact: numărul mare de telefon
   și butonul de WhatsApp. Pe ecran mare stau pe același rând, butonul aliniat la
   mijlocul numărului; pe telefon butonul coboară sub el. `.tel-mare` își păstrează
   marginile proprii, ca ritmul secțiunii să rămână neschimbat. */
.apeluri{display:flex;flex-wrap:wrap;align-items:center;gap:18px}
.contact p{color:var(--gri);max-width:44ch}
.ore{border-left:2px solid var(--amber);padding-left:20px;margin-top:26px}
.ore div{display:flex;justify-content:space-between;gap:20px;padding:7px 0;border-bottom:1px solid var(--linie);font-size:15px;max-width:330px}
.ore div:last-child{border:0}
.ore span:last-child{color:var(--gri)}

/* ============================ PORTOFOLIU (lucrari.html) ============================ */

/* Caseta cinstită despre poze. Stă sus de tot, pe pagina de lucrări: pozele din banca
   provizorie NU sunt ale lui Marian și nu se prezintă ca ale lui. Când intră primele poze
   reale, caseta se scoate — nu se lasă un text care minte în cealaltă direcție. */
.onest{
  background:var(--otel-800);
  border:1px solid var(--linie);
  border-left:4px solid var(--amber);
  padding:clamp(20px,3.4vw,30px);
  max-width:74ch;
}
.onest h2{font-size:clamp(19px,2.8vw,26px);margin:14px 0 12px}
.onest p{color:var(--gri);font-size:15.5px;line-height:1.62}
.onest p + p{margin-top:11px}
.onest b{color:var(--alb);font-weight:600}

/* Un grup = o categorie de lucrare (fundații, fose, șanțuri, nivelări, demolări). */
.grup + .grup{margin-top:var(--pas)}
.grup-cap{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:16px 26px;flex-wrap:wrap;
  border-bottom:1px solid var(--linie);
  padding-bottom:15px;margin-bottom:26px;
}
.grup-cap h2{font-size:clamp(24px,4.6vw,40px);margin-top:14px}

.galerie{display:grid;gap:2px;background:var(--linie);border:1px solid var(--linie)}
@media(min-width:640px){ .galerie{grid-template-columns:1fr 1fr} }

.lucrare{background:var(--otel-800);display:flex;flex-direction:column}
.lucrare .poza{position:relative;overflow:hidden;background:var(--otel-700);aspect-ratio:4/3}
.lucrare .poza img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(.12) contrast(1.08) brightness(.88) saturate(1.02);
  transition:transform .45s cubic-bezier(.22,1,.36,1);
}
.lucrare:hover .poza img{transform:scale(1.035)}
.lucrare .text{padding:22px 22px 24px;display:flex;flex-direction:column;gap:9px}
.lucrare .nr{
  font-family:'Archivo Black',sans-serif;font-size:12px;color:var(--gri-slab);letter-spacing:.06em;
}
.lucrare h3{font-size:19px;letter-spacing:-.01em;line-height:1.15}
.lucrare p{font-size:14.5px;color:var(--gri);line-height:1.58}

/* ============================ SUBSOL ============================ */
footer{border-top:1px solid var(--linie);padding:40px 0 46px;font-size:14px;color:var(--gri-slab)}
.nav-jos{display:flex;flex-wrap:wrap;gap:9px 22px;margin-bottom:26px}
.nav-jos a{color:var(--gri);font-size:14.5px}
.nav-jos a:hover{color:var(--amber)}

/* Legăturile din subsol: Facebook și WhatsApp. În subsol nu se pun butoane pline —
   aici e locul liniștit al paginii — așa că iau forma de pastilă conturată a
   localităților din `.zone`, cu aceeași reacție la hover. */
.social{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:24px}
.social a{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'Archivo',sans-serif;font-size:13px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--gri);
  border:1px solid var(--linie);background:var(--otel-800);
  padding:10px 15px;border-radius:2px;
  transition:border-color .16s ease,color .16s ease;
}
.social a:hover{border-color:var(--amber);color:var(--amber)}

/* ============================ MIȘCARE ============================ */
@media(prefers-reduced-motion:no-preference){
  .apare{opacity:0;transform:translateY(18px);animation:sus .62s cubic-bezier(.22,1,.36,1) forwards}
  .apare:nth-child(2){animation-delay:.07s}
  .apare:nth-child(3){animation-delay:.14s}
  .apare:nth-child(4){animation-delay:.21s}
  @keyframes sus{to{opacity:1;transform:none}}
}