/* garante um novo contexto e o canvas no fundo */
#particles-js{
    position: relative;
    z-index: 0;
    width: 100%;
    height: 60vh;
    background: white;
    isolation: isolate; /* evita conflitos de pilha */
}

/* o canvas que o particles.js injeta */
#particles-js > canvas,
#particles-js .particles-js-canvas-el{
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;         /* atrás */
    pointer-events: none !important;/* não bloqueia cliques */
}

/* overlay por cima das partículas */
.hero-overlay{
    position: absolute;
    inset: 0;
    z-index: 2;                     /* na frente do canvas */
    display: grid;
    place-items: center;
    text-align: center;
    pointer-events: none;           /* só exibe; remova se tiver botões aqui */
}

/* bloco da marca */
.hero-brand{
    width: min(70%, 1100px);        /* 70% do container, com limite */
    margin-inline: auto;
}

/* logo 70% */
.hero-logo{
    width: 100%;
    height: auto;
    display: block;
}

/* frase abaixo da logo */
.hero-tagline{
    display: block;
    margin-top: 12px;
    font-size: clamp(20px, 2.6vw, 42px); /* responsivo */
    font-weight: 400;
    color: #000;     /* ajuste se quiser cinza (#64748B) */
    opacity: .75;
    text-decoration: underline;
}

/* se ainda usa o antigo .title, mantenha por segurança mas atrás do overlay */
.title{ z-index: 1; }