/* container centraliza sem comprimir */
.landing{
  margin: 50px auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* evita distorção em qualquer viewport */
.landing-logo{
  width: clamp(220px, 60vw, 360px); /* escala fluida */
  max-width: 100%;
  height: auto;                    /* mantém proporção */
  aspect-ratio: auto;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 0 8px rgba(0,0,0,0.25)) blur(0.6px);
  mask-image: radial-gradient(circle at center, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: radial-gradient(circle at center, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 100%);
  transition: transform .5s cubic-bezier(.22,1,.36,1), filter .3s ease;
  will-change: transform;
}
.landing-logo:hover { filter: drop-shadow(0 0 10px rgba(0,0,0,0.35)) blur(1px); }

@keyframes logoIn {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Slogan */
.slogan {
  display: grid;
  place-items: center;
  padding: 8px 16px 36px;
  text-align: center;
}
.slogan h1 {
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: .2px;
  color: rgba(250,250,250,.9); /* base neutra para contraste */
  font-size: clamp(1.35rem, 2.6vw + .6rem, 2.2rem);
  margin-top: 8px;
}

/* Palavras entram da esquerda com leve blur */
.slogan .word {
  display: inline-block;
  opacity: 0;
  transform: translateX(-14px) translateY(2px) skewX(-1deg);
  filter: blur(6px);
  transition:
    opacity .42s ease-out,
    transform .42s cubic-bezier(.22,.61,.36,1),
    filter .42s ease-out,
    text-shadow .3s ease-out;
  will-change: opacity, transform, filter;
  color: rgba(250,250,250,.9);
}
.slogan .word.in {
  opacity: 1;
  transform: translateX(0) translateY(0) skewX(0);
  filter: blur(0);
}

/* Destaques em verde escuro com gradiente */
.slogan .word.accent {
  background: linear-gradient(90deg, var(--accent-hover), var(--accent) 60%, var(--accent-hover));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, var(--accent) 70%, white 30%);
  text-decoration-thickness: .09em;
  text-underline-offset: .18em;
  text-shadow: 0 0 0 rgba(0,0,0,0); /* evita herdar sombras */
}

/* mobile: reduz um pouco para evitar “afinar” visual */
@media (max-width: 480px){
  .landing{ margin: 32px auto; }
  .landing-logo{
    width: clamp(200px, 68vw, 320px);
  }
}