/* ==============================
   GLOBAL
============================== */

html{

    scroll-behavior:smooth;

}

body{

    background:
        radial-gradient(circle at top,
            rgba(56,189,248,.06),
            transparent 35%),
        linear-gradient(
            180deg,
            var(--bg),
            var(--bg-secondary)
        );
        

    color:var(--text);

}

/* Container */

.container{

    width:min(1120px, calc(100% - 32px));

    margin:auto;

}

/* Sections */

section{

    padding:96px 0;

}

/* Títulos */

.section-title{

    font-family:var(--title);

    font-size:2rem;

    font-weight:700;

    color:var(--white);

    margin-bottom:16px;

    text-align:center;

}

.section-subtitle{

    max-width:700px;

    margin:0 auto 48px;

    color:var(--text-light);

    text-align:center;

}

/* Botão padrão */

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:16px 32px;

    border-radius:999px;

    position:relative;

    overflow:hidden;

    background:linear-gradient(

        135deg,

        var(--primary),

        var(--secondary)

    );

    color:#fff;

    font-weight:700;

    transition:var(--transition);
}

.btn::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            120deg,

            transparent,

            rgba(255,255,255,.18),

            transparent

        );

    transform:translateX(-140%);

    transition:.6s;

}

.btn:hover::before{

    transform:translateX(140%);

}

.btn:hover{

    transform:translateY(-3px);

    box-shadow:

        0 2px 10px rgba(56,189,248,.25);

}

/* Cards */

.card{

    background:rgba(255,255,255,.03);

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

    border-radius:var(--radius);

    backdrop-filter:blur(10px);

    transition:var(--transition);

}

.card:hover{

    transform:translateY(-8px) scale(1.01);

    border-color:rgba(56,189,248,.25);

    box-shadow:var(--shadow);

}

/* Placeholder */

.placeholder{

    width:100%;

    aspect-ratio:16/9;

    border-radius:var(--radius);

    border:2px dashed rgba(255,255,255,.25);

    display:flex;

    align-items:center;

    justify-content:center;

    color:var(--text-light);

    font-size:.9rem;

}

/*==============================
        ANIMAÇÕES
==============================*/

.fade{

    opacity:0;

    transform:translateY(40px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.fade.show{

    opacity:1;

    transform:translateY(0);

}