/* Pagina de mentenanță (design: Mentenanta / MentenantaMobil): fundalul primit, cu textul pus în pagină (nu în poză),
   ca să se citească și pe telefon. Rețelele sunt componenta din subsol (.fdm-social), cu aspectul din design. */
.fdm-mentenanta { background: #0D141A; }
.mt a { color: #FFFFFF; }
.mt a:hover { color: #71D16A; }

.mt { position: relative; min-height: 100vh; min-height: 100dvh; box-sizing: border-box; display: flex; align-items: center; overflow: hidden;
  font-family: 'DM Sans', system-ui, sans-serif; color: #FFFFFF; background: #0D141A url(../img/mentenanta.webp) 72% center / cover no-repeat; }
.mt::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9, 14, 19, .82) 0%, rgba(9, 14, 19, .62) 32%, rgba(9, 14, 19, .18) 48%, rgba(9, 14, 19, 0) 56%); }
.mt__col { position: relative; width: 100%; max-width: 46rem; box-sizing: border-box; padding: 3.5rem 2rem 3.5rem clamp(2rem, 6vw, 6rem);
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.75rem; }
.mt__brand { display: flex; flex-direction: column; align-items: flex-end; gap: .125rem; }
.mt__logo { display: block; width: clamp(15rem, 30vw, 25rem); height: auto; }
.mt__slogan { font-family: 'Baloo 2', 'Figtree', system-ui, sans-serif; font-weight: 800; font-size: clamp(1.125rem, 1.75vw, 1.5rem); line-height: 1; letter-spacing: .01em;
  color: #FFFFFF; margin: -.5rem 6% 0 0; -webkit-text-stroke: 5px #0D141A; paint-order: stroke fill; text-shadow: 0 2px 8px rgba(0, 0, 0, .6); }
.mt__titlu { margin: 0; font-family: 'Bebas Neue', 'Oswald', sans-serif; font-weight: 400; line-height: .95; letter-spacing: .01em; font-size: clamp(3.5rem, 7.6vw, 7rem); color: #FFFFFF; }
.mt__titlu span { color: #71D16A; }
.mt__pensula { display: block; width: min(30rem, 90%); height: auto; margin-top: -.75rem; }
.mt__text { margin: 0; max-width: 34rem; font-size: clamp(1.0625rem, 1.5vw, 1.375rem); line-height: 1.5; color: #E8EAE8; }
.mt__pasi { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; max-width: 36rem; }
.mt__pasi li { display: flex; flex-direction: column; align-items: center; gap: .875rem; padding: 0 1rem; font-family: 'Figtree', system-ui, sans-serif; font-weight: 800;
  font-size: clamp(.875rem, 1.15vw, 1.0625rem); line-height: 1.3; letter-spacing: .02em; text-transform: uppercase; color: #FFFFFF; }
.mt__pasi li + li { border-left: 1px solid rgba(255, 255, 255, .28); }
.mt__pasi svg { width: 3.25rem; height: 3.25rem; stroke: #71D16A; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mt__social { width: 100%; max-width: 36rem; border-top: 1px solid rgba(255, 255, 255, .24); padding-top: 1.5rem; margin-top: .5rem;
  display: flex; align-items: center; justify-content: flex-start; gap: .5rem; flex-wrap: wrap; }
.mt__social p { margin: 0 .75rem 0 0; font-size: 1rem; color: #E8EAE8; }
.mt__social .fdm-social { gap: .5rem; }
.mt__social .fdm-social a { width: 2.75rem; height: 2.75rem; border: 0; border-radius: .75rem; background: none; color: #FFFFFF; }
.mt__social .fdm-social a:hover { background: rgba(255, 255, 255, .1); border-color: transparent; color: #FFFFFF !important; }
.mt__social .fdm-social a:focus-visible { outline: 2px solid #71D16A; outline-offset: 2px; }
.mt__social .fdm-social .fdm-ico { width: 1.75rem; height: 1.75rem; font-size: 1.75rem; stroke-width: 2; }

@media (min-width: 761px) {
  .mt::before { display: none; }
  .mt__col { z-index: 1; }
  .mt__titlu, .mt__text, .mt__pasi, .mt__social { position: relative; isolation: isolate; }
  .mt__titlu::before, .mt__text::before, .mt__pasi::before, .mt__social::before { content: ""; position: absolute; inset: -.75rem -1.5rem; z-index: -1; pointer-events: none;
    background: rgba(9, 14, 19, .4); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
    -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 100%); mask-image: radial-gradient(closest-side, #000 62%, transparent 100%); }
}
@media (max-width: 760px) {
  .mt { align-items: flex-start; background-position: 80% 100%; background-size: auto 62%; background-color: #0D141A; }
  .mt::before { background: linear-gradient(180deg, rgba(9, 14, 19, 1) 0%, rgba(9, 14, 19, .97) 52%, rgba(9, 14, 19, .55) 72%, rgba(9, 14, 19, .2) 100%); }
  .mt__col { padding: 2.5rem 1.25rem 18rem; gap: 1.375rem; }
  .mt__pasi li { padding: 0 .5rem; font-size: .8125rem; }
  .mt__pasi svg { width: 2.5rem; height: 2.5rem; }
  .mt__social { justify-content: center; }
  .mt__social p { width: 100%; margin: 0 0 .25rem; text-align: center; }
}