:root {
  --bg: #ffffff; /* fundal pagină */
  --surface: #ffffff; /* fundal secțiuni principale */
  --card: #f5f7fb; /* fundal carduri servicii */
  --text: #0b132b; /* culoare text principal */
  --muted: #243b53; /* text secundar */
  --primary: #0e7f98; /* culoare linkuri/accent */
  --primary-2: #0b5c6e; /* culoare titluri */
  --accent: #1f7a8c; /* culoare alternativă accent */
  --border: #d7e3eb; /* culoare borduri */
  --shadow: 0 6px 20px rgba(0,0,0,.06); /* umbră mai discretă */
  --radius: 16px; /* rotunjire colțuri */
  --space: clamp(14px, 2.5vw, 24px); /* spațiere variabilă */
  --focus: 2px solid #0e7f98; /* outline focus accesibilitate */
}

/* prevenim overflow din padding/border */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; } /* scroll lin */
body {
  margin: 0; /* elimină marginea implicită */
  background: var(--bg); /* fundal pagină */
  color: var(--text); /* culoare text */
  /* folosim Montserrat (e deja încărcat în HTML) cu fallback-uri sigure */
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 18px;          /* desktop: setare stabilă, lizibilă */
  line-height: 1.6;         /* mai strâns pe desktop pentru coeziune */
  -webkit-font-smoothing: antialiased; /* netezire font pe WebKit */
  text-rendering: optimizeLegibility;  /* claritate text */
}

html, body {
  max-width: 100%; /* previne lărgirea peste ecran */
  overflow-x: hidden; /* ascunde scroll orizontal */
}

img {
  max-width: 100%; /* imaginea nu depășește containerul */
  height: auto; /* păstrează proporțiile */
}

a {
  color: var(--primary); /* culoare link */
  text-decoration: none; /* fără subliniere */
}
a:hover { text-decoration: underline; } /* subliniere la hover */

:focus {
  outline: var(--focus); /* contur accesibilitate */
  outline-offset: 2px; /* distanță față de element */
}

/* ====== CONTAINERE PRINCIPALE ====== */
header, .about-section, #servicii, footer {
  max-width: 1100px;             /* lățime maximă secțiuni */
  width: 100%;                   /* ocupă lățimea disponibilă */
  margin: clamp(16px, 3.5vw, 32px) auto; /* centrare + spațiere adaptivă */
  background: var(--surface);    /* fundal secțiuni */
  border-radius: var(--radius);  /* colțuri rotunjite */
  box-shadow: none;              /* mai aerisit: fără umbră globală */
  padding: clamp(16px, 3vw, 28px); /* padding adaptiv */
  border: 1px solid #e9f1f6;     /* contur mai subtil decât var(--border) */
}

/* ====== HEADER (2 rânduri) ======
   rând 1: logo (stânga) + adresă (dreapta)
   rând 2: meniu/butoane
*/
.header-top {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "logo address"
    "nav  nav";
  align-items: center;
  gap: clamp(10px, 2vw, 18px);
}

/* plasare în grid */
.logo {
  grid-area: logo;
  display: inline-flex;
  align-items: center;
  min-width: 120px;
}
.logo img {
  max-height: 300px;  /* ușor mai mare pe desktop */
  max-width: 200px;
  padding-top:0px;
  margin-top:15px;
  margin-left:10px;
  
}

.address {
  grid-area: address;
  margin: 0;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .2px;
  overflow-wrap: anywhere;
  text-align: right;  /* aliniere la stânga pe desktop */
  padding-right: 3vw;
}

/* rând 2: meniul */
.contact-links { grid-area: nav; }
.contact-links nav {
  display: flex;
  gap: clamp(10px, 2vw, 16px);
  flex-wrap: wrap;
  justify-content: flex-start;        /* aliniat central sub logo+adresă */
  padding-top: clamp(8px, 1.6vw, 12px);
  border-top: 1px solid var(--border); /* separator discret */
}

/* ====== BUTOANE MENIU (pastilă) ====== */
.contact-links .icon-link {
  --btn-bg: #fff;
  --btn-text: var(--primary-2);
  --btn-border: var(--border);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 999px;              /* pastilă */
  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--btn-text);
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 2px 0 rgba(0,0,0,.02);
  transition: transform .06s ease, box-shadow .12s ease, background .2s, color .2s, border-color .2s;
}
.contact-links .icon-link:hover {
  background: #eef7fa;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}
.contact-links .icon-link:active { transform: translateY(1px); }
.contact-links .icon-link:focus-visible { outline: var(--focus); outline-offset: 2px; }
.contact-links .icon-link img { width: 20px; height: 20px; display: inline-block; }

/* variantă SOLID pentru CTA primar (aplicată automat pe WhatsApp) */
.contact-links a[href*="wa.me"] {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.contact-links a[href*="wa.me"]:hover { filter: brightness(.95); box-shadow: 0 10px 24px rgba(0,0,0,.08); }

/* (Curățare stiluri generice nav a – nu mai avem nevoie de duplicat) */
nav a { max-width: 100%; }

/* buton English */
.icon-link--lang {
   margin-left: auto;
  background: #fff;
  border: 1px solid var(--border);
  color: var(--primary-2);
  font-weight: 800;
}
.icon-link--lang:hover {
  background: #eef7fa;
}

/* ====== HERO / ABOUT ====== */
.about-title {
  font-size: clamp(30px, 3.6vw, 44px);
  text-align: left;
  color: var(--primary-2);
  margin: 0 0 12px;
  line-height: 1.2;       /* titlu mai compact */
  letter-spacing: .2px;
}
.about-content {
  display: grid;
  grid-template-columns: 1.2fr .8fr; /* text mai lat decât imaginea */
  gap: clamp(16px, 3vw, 28px);
  align-items: center;
}
.about-text { max-width: 68ch; } /* lățime confortabilă de citire */
.about-text p {
  margin: 0 0 12px;
  color: var(--text);
  text-align: left;
}
.about-img { display: flex; justify-content: center; }
.about-img img {
  border-radius: 14px;
  box-shadow: var(--shadow);         /* umbră discretă doar pe elemente vizuale */
  border: 1px solid var(--border);
}

/* ====== SERVICII ====== */
#servicii { background: var(--surface); }
#servicii h2 {
  text-align: left;
  color: var(--primary-2);
  font-size: clamp(24px, 3vw, 36px);
  margin: 0 0 12px;
  line-height: 1.2;
  letter-spacing: .2px;
}
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 coloane pe desktop */
  gap: clamp(12px, 2.2vw, 18px);
  margin-bottom: clamp(12px, 2vw, 16px);
}
.service-card {
  background: #fff;
  border: 1px solid #e6eef3;  /* ușor mai subtil decât var(--border) */
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: clamp(14px, 2vw, 18px);
  text-align: center;
  font-weight: 700;            /* 700 în loc de 800 — mai „premium” */
  font-size: 1.05em;
  letter-spacing: .2px;
  cursor: pointer;
  transition: transform .08s ease-out, box-shadow .12s ease-out;
}
.service-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,.10);
}

/* ====== LISTĂ PREȚURI ====== */
.price-container {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: clamp(8px, 2vw, 14px);
}
.price-item {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 2px;
  border-bottom: 1px solid #e8eef3;
  font-size: 0.95em;
  font-variant-numeric: tabular-nums; /* cifre monospaced pentru aliniere impecabilă */
}
.price-item span:first-child {
  color: var(--muted);
}
.price-item span:last-child { 
  font-weight: 900; 
  color: var(--primary-2);
  text-align: right;      /* aliniere la dreapta */
  flex-shrink: 0;         /* nu lasă prețul să se micșoreze */
  min-width: 88px;        /* lățime mai sigură pentru tarife */
}

/* ====== FOOTER ====== */
footer {
  background: #0b1f26;
  color: #e8f1f6;
  border: none;
  box-shadow: none;
}
footer a { color: #cfe8ef; }