@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

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

html, body { max-width: 100%; overflow-x: hidden; }

html {
  --lumo-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Titluri cu alt font, distinct */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  letter-spacing: -0.01em;
}

/* Nu lasa continutul sa depaseasca pe orizontala */
vaadin-app-layout::part(content) { overflow-x: hidden; }

/* ===== Navbar responsive (stil Vaadin) ===== */
.nav-toggle { display: none; }

.nav-menu-desktop a {
  text-decoration: none;
  color: var(--lumo-body-text-color);
  font-weight: 500;
  white-space: nowrap;
}
.nav-menu-desktop a:hover { color: var(--lumo-primary-text-color); }

/* Desktop: meniul e inline (centrat), fara drawer/hamburger */
@media (min-width: 901px) {
  vaadin-app-layout::part(drawer) { display: none; }
}

/* Mobil: ascunde meniul inline + Creeaza cont, arata hamburger, centreaza logo */
@media (max-width: 900px) {
  .nav-menu-desktop { display: none !important; }
  .nav-create { display: none !important; }
  .nav-toggle { display: inline-flex !important; }
  .nav-logo { margin-inline: auto; }
}

/* ===== Hero cu gradient + val animat ===== */
.hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(120deg, #1b4dff 0%, #7a3ff0 100%);
}
.hero-wave {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  line-height: 0;
  overflow: hidden;
}
.hero-wave .wave {
  display: block;
  width: 200%;
  height: 90px;
  animation: heroWave 16s linear infinite;
}
@keyframes heroWave {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.hero-field::part(input-field) { background: #fff; }

/* ===== Hero gradient per pagină (toate folosesc .hero-wave) ===== */
.page-hero { position: relative; overflow: hidden; color: #fff; }
.grad-servicii { background: linear-gradient(120deg, #0ea5e9 0%, #2563eb 100%); }
.grad-proces   { background: linear-gradient(120deg, #f97316 0%, #db2777 100%); }
.grad-lucrari  { background: linear-gradient(120deg, #10b981 0%, #0891b2 100%); }
.grad-contact  { background: linear-gradient(120deg, #7c3aed 0%, #db2777 100%); }