body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
               'Segoe UI', Arial, sans-serif;
}









:root {
      /* Poți ajusta intensitatea întunecării de pe imagine */
      --overlay-dark: rgba(0, 0, 0, 0.2);
    }

    /* --------- Secțiunea Hero --------- */
    #hero {
      position: relative;
      min-height: 100vh;
      /* Full viewport */
            overflow: hidden; 
      color: #fff;
      display: flex;
      align-items: center;
      isolation: isolate;
      /* asigură layering corect pentru blend-mode */
      background: #0b0f19;
      /* fallback */
    }

/* ================= HERO VIDEO (înlocuiește imaginile) ================= */

/* Containerul media rămâne neschimbat */
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 1;
        overflow: hidden; 
  will-change: transform;
}

/* Video ca background cover */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;

  /* Look & feel similar cu imaginea ta */
  filter: brightness(0.62) saturate(1.05);

  /* Mică stabilizare GPU */
  transform: translateZ(0);
  will-change: transform;

  /* Fără fade CSS — video e controlat din browser */
  opacity: 1;
}

/* Varianta mobile ascunsă implicit */
.hero-video--mobile {
  display: none;
}

/* Mobile: folosim video-ul optimizat */
@media (max-width: 991.98px) {
  #heroVideoDesktop {
    display: none;
  }

  .hero-video--mobile {
    display: block;
  }
}




    /* Overlay întunecat pentru contrast bun la text */
    .hero-dark {
      position: absolute;
      inset: 0;
      z-index: 2;
      background: var(--overlay-dark);
      pointer-events: none;
    }

    /* Gradient animat, discret, pentru profunzime */
    .hero-gradient {
      position: absolute;
      inset: -12%;
      /* puțin mai mare decât ecranul, ca să nu se vadă marginile la mișcare */
      z-index: 3;
      background:
        radial-gradient(60% 60% at 18% 28%, rgba(14, 165, 234, .24), transparent 60%),
        radial-gradient(50% 50% at 82% 42%, rgba(123, 97, 255, .22), transparent 60%),
        radial-gradient(40% 40% at 48% 82%, rgba(255, 149, 0, .15), transparent 60%);
      mix-blend-mode: soft-light;
      animation: floatGradient 18s ease-in-out infinite alternate;
      pointer-events: none;
    }

    @keyframes floatGradient {
      0% {
        transform: translate3d(0, 0, 0) scale(1);
      }

      100% {
        transform: translate3d(0, -2%, 0) scale(1.03);
      }
    }

    /* Conținutul */
    .hero-content {
      position: relative;
      z-index: 4;
      width: 100%;
    }

    .hero-title {
      font-weight: 600;
      line-height: 1.1;
      letter-spacing: 0.2px;
      font-size: clamp(2rem, 3.6vw + .5rem, 4rem);
    }

    .hero-lead {
      font-size: clamp(1rem, 1.1vw + .6rem, 1.25rem);
      opacity: .95;
      max-width: 60ch;
    }


    .hero-media img {
      transition: opacity 900ms ease;
      /* durata fade-ului */
      opacity: 1;
      /* vizibil la start */
    }


    /* Apariție elegantă */
    .fade-up {
      opacity: 0;
      transform: translateY(16px);
      animation: fadeUp .9s ease forwards;
    }

    .fade-up.delay-1 {
      animation-delay: .15s;
    }

    .fade-up.delay-2 {
      animation-delay: .35s;
    }

    @keyframes fadeUp {
      to {
        opacity: 1;
        transform: none;
      }
    }









    @keyframes gentleFloat {
      from {
        transform: translateY(0) scale(1);
      }

      to {
        transform: translateY(-6px) scale(1.01);
      }
    }

    /* Parallax: aplicăm un mic translate pe stratul cu imagine */
    .parallax-on .hero-media {
      transform: translateY(var(--parallax, 0px));
    }

    /* Respectă preferința de reduce motion */

@media (prefers-reduced-motion: reduce) {
  .hero-gradient {
    animation: none;
  }



  .hero-video {
    filter: brightness(0.7) saturate(1);
  }
}


    /* Spațiere pe mobil */


@media (max-width: 991.98px) {
  #hero {
    padding-top: clamp(2rem, 6vh, 3rem);
    padding-bottom: clamp(2rem, 6vh, 3rem);
  }



  .hero-lead {
    max-width: 65ch;
  }
}








    /* --- HERO Search --- */
    .hero-search.glass {
      background: rgba(14, 16, 24, .42);
      /* sticlă închisă */
      backdrop-filter: blur(8px) saturate(115%);
      border: 1px solid rgba(255, 255, 255, .12);
      border-radius: 16px;
      padding: 1.25rem;
      color: #fff;
    }

    .hero-search__title {
      line-height: 1.25;
    }

    .hero-search__input {
      background: rgba(255, 255, 255, .1);
      border: 1px solid rgba(255, 255, 255, .2);
      color: #fff;
      padding-right: 2.75rem;
    }

    .hero-search__input::placeholder {
      color: rgba(255, 255, 255, .75);
    }

    .hero-search__input:focus {
      background: rgba(255, 255, 255, .12);
      border-color: rgba(255, 255, 255, .35);
      box-shadow: 0 0 0 .25rem rgba(123, 97, 255, .25);
    }

    /* Sugestii */
    .hero-search__suggestions {
      position: absolute;
      top: calc(100% + 6px);
      left: 0;
      right: 0;
      max-height: min(40vh, 360px);
      overflow: auto;
      background: rgba(13, 15, 23, .9);
      border: 1px solid rgba(255, 255, 255, .15);
      border-radius: 12px;
      padding: .25rem;
      display: none;
      /* ascuns implicit */
      z-index: 20;
    }

    .hero-search__suggestions.show {
      display: block;
    }

    .hero-search__suggestions li {
      padding: .6rem .75rem;
      border-radius: 8px;
      cursor: pointer;
      color: #f8f9fa;
    }

    .hero-search__suggestions li[aria-selected="true"],
    .hero-search__suggestions li:hover {
      background: rgba(255, 255, 255, .08);
    }

    .hero-search__suggestions .subtle {
      color: #adb5bd;
      font-size: .9em;
    }

    /* Evidențierea potrivirii */
    mark.match {
      background: transparent;
      color: #fff;
      font-weight: 700;
      /* text-decoration: underline;  */
      /* text-underline-offset: 2px;  */
    }

    /* Butoane */
    #goToMap.btn-primary {
      background: linear-gradient(135deg, #7b61ff, #0ea5ea);
      border: none;
    }

    #clearSearch.btn {
      color: #fff;
      border-color: rgba(255, 255, 255, .25);
    }

    /* Mobil: spațiere */
    @media (max-width: 991.98px) {
      .hero-search.glass {
        padding: 1rem;
      }
    }




    /* 1) Forțează culoarea textului introdus (peste Bootstrap) */
    .hero-search.glass .hero-search__input.form-control.form-control-lg {
      color: #fff !important;
      /* text tastat */
      caret-color: #fff;
      /* culoarea cursorului */
    }

    /* 2) Placeholder – îl ai deja, dar completăm pentru compatibilitate */
    .hero-search__input::placeholder {
      color: rgba(255, 255, 255, .75);
    }

    .hero-search__input::-webkit-input-placeholder {
      color: rgba(255, 255, 255, .75);
    }

    .hero-search__input::-moz-placeholder {
      color: rgba(255, 255, 255, .75);
    }

    .hero-search__input:-ms-input-placeholder {
      color: rgba(255, 255, 255, .75);
    }

    /* 3) Autofill (Chrome/Safari) – controlează explicit culoarea textului */
    .hero-search__input:-webkit-autofill,
    .hero-search__input:-webkit-autofill:hover,
    .hero-search__input:-webkit-autofill:focus {
      -webkit-text-fill-color: #fff !important;
      /* text alb când câmpul e completat automat */
      caret-color: #fff;
      transition: background-color 9999s ease-in-out 0s;
      /* maschează galbenul implicit */
      box-shadow: 0 0 0 1000px rgba(255, 255, 255, .1) inset;
      /* păstrează efectul de „sticlă” */
    }

    /* 4) (Opțional) Mod high-contrast – respectă culorile de sistem */
    @media (forced-colors: active) {
      .hero-search__input {
        color: CanvasText !important;
      }
    }




    /* Aliniază fontul sugestiilor la cel al inputului de căutare */
    .hero-search .hero-search__suggestions,
    .hero-search .hero-search__suggestions li {
      font-family: inherit;
      /* moștenește din .hero-search (același cu input-ul) */
      line-height: 1.5;
      /* similar Bootstrap pentru lizibilitate */
    }

    /* Potrivește dimensiunea cu form-control-lg (Bootstrap 5) */
    .hero-search .hero-search__suggestions,
    .hero-search .hero-search__suggestions li {
      font-size: 1.25rem;
      /* dimensiune implicită pt .form-control-lg */
    }


    /* Normalizează complet <mark> ca să nu rupă alinierea */
    .hero-search__suggestions mark.match {
      background: transparent;
      color: inherit;

      font: inherit;
      /* MOST IMPORTANT */
      line-height: inherit;
      /* MOST IMPORTANT */

      display: inline;
      /* explicit */
      vertical-align: baseline;

      padding: 0;
      /* elimină spațiile implicite */
      margin: 0;

      font-weight: 700;
      /* păstrează highlight-ul */
    }








/* Navbar overlay peste video */


.hero-navbar{
  position: absolute;
  top: 16px;
  left: 120px;          /* implicit: ecrane mici */
  right: 24px;
  width: auto;
  z-index: 5;

  background: rgba(0,0,0,0.20);
  border-radius: 18px;
  padding: 10px 14px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.12);
}

/* md ≥ 768px */
@media (min-width: 768px){
  .hero-navbar{
    left: 160px;
  }
}

/* lg ≥ 992px */
@media (min-width: 992px){
  .hero-navbar{
    left: 200px;
  }
}



/* Linkuri mai lizibile pe fundal negru */
.hero-navbar .nav-link,
.hero-navbar .navbar-brand{
  color: rgba(255,255,255,0.92);
}

.hero-navbar .nav-link:hover{
  color: #fff;
}

/* Toggler vizibil pe fundal întunecat */
.hero-navbar .navbar-toggler{
  border-color: rgba(255,255,255,0.25);
}



/* Dropdown/Collapse fundal (pe mobil când se deschide meniul) */
@media (max-width: 991.98px){
  .hero-navbar .navbar-collapse{
    margin-top: 8px;
    background: rgba(0,0,0,0.75);
    border-radius: 14px;
    padding: 10px 12px;
      z-index: 6;
  }
}