/* Página institucional: mantém as áreas abertas na mesma paleta do app. */
.site-page {
    background: #06171c;
    color: #eef8f4;
}

/* style.css aplica um recuo global no main em telas menores; ele criava
   uma faixa clara entre o cabeçalho e o hero da página institucional. */
.site-page main {
    padding-top: 0 !important;
}

.site-page .site-header,
.site-page .hero,
.site-page .numbers,
.site-page .solution,
.site-page .site-footer {
    color-scheme: dark;
}

.site-page .numbers {
    background:
        radial-gradient(ellipse at 82% 0%, #126647 0%, transparent 37%),
        linear-gradient(110deg, #06171c, #092c2b 58%, #073c30);
}

.site-page .solution {
    background: #081b20;
}

.site-page .site-footer {
    background: #06171c;
}

.site-page :focus-visible {
    outline: 3px solid #4ade80;
    outline-offset: 3px;
}

/* Os temas globais antigos aplicam fundo azul em qualquer span de botão
   e em qualquer span dentro da marca. Na landing page, esses spans são
   apenas os caracteres do logo e as setas dos links. */
.site-page .brand .brand-x,
.site-page .brand > span:last-child .brand-x {
    background: transparent !important;
    background-color: transparent !important;
    color: inherit !important;
}

.site-page .hero-actions .button span {
    display: inline-block;
    min-width: 0;
    padding: 0;
    background: transparent !important;
    background-color: transparent !important;
    color: #4ade80 !important;
}

.site-page .hero-actions .button-primary span {
    color: #fff !important;
}

@media (max-width: 760px) {
    .site-page .site-header {
        background: #06171c;
    }

    .site-page .numbers {
        background:
            radial-gradient(ellipse at 85% 0%, #126647 0%, transparent 48%),
            linear-gradient(110deg, #06171c, #092c2b 58%, #073c30);
    }
}