/* ==========================================
   RESET
========================================== */

*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/* Remove o retângulo/realce azulado que navegadores mobile (Chrome
   Android principalmente) desenham em cima de qualquer elemento
   clicável durante o toque — cobre o site inteiro de uma vez, em vez
   de precisar repetir em cada botão/link individualmente. Não mexe no
   outline de :focus-visible (navegação por teclado continua com o
   indicador de foco normal). */
a,
button,
input,
select,
textarea,
label,
[role="button"],
[tabindex]{
    -webkit-tap-highlight-color:transparent;
}


/* ==========================================
   HTML
========================================== */

html{
    scroll-behavior:smooth;
    scroll-padding-top:120px;
}


/* ==========================================
   BODY
========================================== */

body{

    min-height:100vh;

    overflow-x:hidden;

    position:relative;

    font-family:"Nunito",sans-serif;

    color:var(--text);

    background:
        radial-gradient(
            circle at top left,
            rgba(69,172,171,.18),
            transparent 28%
        ),

        radial-gradient(
            circle at right,
            rgba(40,74,111,.18),
            transparent 30%
        ),

        linear-gradient(
            135deg,
            var(--deep),
            #070816 65%,
            var(--navy)
        );

}


/* ==========================================
   IMAGENS
========================================== */

img{

    display:block;

    max-width:100%;

    height:auto;

}


/* ==========================================
   LINKS
========================================== */

a{

    color:inherit;

}


/* ==========================================
   CANVAS
========================================== */

.particles-canvas{

    position:fixed;

    inset:0;

    width:100%;

    height:100%;

    z-index:-2;

    pointer-events:none;

    opacity:.75;

}


/* ==========================================
   AURORA
========================================== */

.aurora{

    position:fixed;

    border-radius:50%;

    filter:blur(80px);

    opacity:.25;

    pointer-events:none;

    z-index:-1;

}

.aurora-one{

    width:340px;
    height:340px;

    top:-90px;
    left:-60px;

    background:var(--cyan);

}

.aurora-two{

    width:260px;
    height:260px;

    bottom:20px;
    right:-50px;

    background:var(--blue);

}


/* ==========================================
   MAIN
========================================== */

main{

    max-width:1200px;

    margin:0 auto;

    padding:120px 5vw 70px;

}

main>section{

    margin-bottom:32px;

}

main>section:last-child{

    margin-bottom:0;

}

/*
   Blocos longos no fim da página. Quando algo acima muda de altura —
   abrir uma pergunta do FAQ, por exemplo — o navegador precisa
   reposicionar tudo que vem depois a cada quadro da animação; sem esta
   dica ele refazia o layout e a pintura de contato e rodapé inteiros,
   e era daí que vinha a engasgada. Com o containment ele sabe que o
   conteúdo interno dessas seções não muda: basta deslocá-las.
   (`content-visibility:auto` dava o mesmo ganho, mas mexe na altura
   estimada da página e faz a barra de rolagem pular.)

   Só no mobile: `contain:paint` cria um contexto de empilhamento e o
   texto passa a ser suavizado em escala de cinza — no desktop isso é
   visível e a CPU de lá não precisa da ajuda.
*/
@media(max-width:960px){

    #contato,
    #site-footer{

        contain:layout paint;

    }

}


/* ==========================================
   PAINÉIS
========================================== */

.panel{

    position:relative;

    overflow:hidden;

    padding:32px;

    border-radius:var(--radius);

    background:var(--panel);

    border:1px solid var(--border);

    box-shadow:var(--shadow);

}

.panel::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    border:1px solid rgba(255,255,255,.06);

    pointer-events:none;

}


/* ==========================================
   TÍTULOS DAS SEÇÕES
========================================== */

.section-title{

    display:flex;

    align-items:center;

    justify-content:space-between;

    /* evita que título e subtítulo se espremam em telas estreitas */
    flex-wrap:wrap;

    gap:12px;

    margin-bottom:20px;

}

.section-title h2{

    margin:0;

    font-size:clamp(1.3rem,2vw,1.7rem);

}

.section-title span{

    color:var(--muted);

    font-size:.95rem;

}