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

html{
    scroll-behavior:smooth;
}

body{
    font-family:"Segoe UI",sans-serif;
    background:#111;
    color:#fff;
    overflow-x:hidden;
}

/* ===========================
   HERO
=========================== */

.hero{
    position:relative;
    width:100%;
    height:100vh;
    overflow:hidden;

    display:flex;
    justify-content:center;
    align-items:center;

    background:linear-gradient(
        180deg,
        #ff6fa5 0%,
        #ff9ec4 45%,
        #ffd6e7 100%
    );
}

.overlay{
    position:absolute;
    inset:0;
    background:rgba(255,255,255,.08);
    z-index:1;
}

.hearts{
    position:absolute;
    inset:0;
    overflow:hidden;
    z-index:2;
    pointer-events:none;
}

.heart{
    position:absolute;
    top:-60px;
    color:#ffffff;
    opacity:.8;
    user-select:none;
    animation:fall linear forwards;
    text-shadow:0 0 10px rgba(255,255,255,.5);
}

@keyframes fall{

    0%{
        transform:
            translateY(-60px)
            translateX(0)
            rotate(0deg)
            scale(.8);
        opacity:0;
    }

    10%{
        opacity:.9;
    }

    50%{
        transform:
            translateY(50vh)
            translateX(30px)
            rotate(180deg)
            scale(1);
    }

    100%{
        transform:
            translateY(110vh)
            translateX(-30px)
            rotate(360deg)
            scale(.7);

        opacity:0;
    }

}

.hero-content{
    position:relative;
    z-index:3;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    text-align:center;

    padding:20px;
    max-width:800px;
}

.hero-content h1{
    font-size:4rem;
    margin-bottom:20px;
    text-shadow:0 5px 20px rgba(0,0,0,.25);
}

.hero-content p{
    font-size:1.3rem;
    line-height:1.7;
    max-width:600px;
    text-shadow:0 3px 10px rgba(0,0,0,.2);
}

.btn{
    display:inline-block;

    margin-top:35px;

    padding:16px 36px;

    background:#ff4d6d;
    color:#fff;

    text-decoration:none;

    border-radius:999px;

    font-weight:bold;

    transition:.3s;
}

.btn:hover{

    transform:translateY(-4px) scale(1.05);

    box-shadow:0 10px 30px rgba(255,77,109,.4);

}

/* ===========================
   CONTADOR
=========================== */

.contador{

    padding:100px 20px;

    background:#181818;

    text-align:center;

}

.contador h2{

    font-size:2.5rem;

    margin-bottom:20px;

}

.tempo{

    margin-top:40px;

    font-size:2rem;

    font-weight:bold;

    line-height:1.8;

}

/* ===========================
   TIMELINE
=========================== */

.timeline{

    padding:100px 10%;

    background:#121212;

}

.timeline h2{

    text-align:center;

    font-size:2.5rem;

    margin-bottom:60px;

}

.card{

    background:#1e1e1e;

    border-radius:20px;

    overflow:hidden;

    margin-bottom:35px;

    transition:.3s;

    box-shadow:0 10px 30px rgba(0,0,0,.2);

}

.card:hover{

    transform:translateY(-8px);

}

.card img{

    width:100%;

    aspect-ratio:1/1;

    object-fit:cover;

}

.card h3{

    padding:20px;

    font-size:1.5rem;

}

.card p{

    padding:0 20px 25px;

    line-height:1.7;

    color:#d9d9d9;

}

/* ===========================
   MOTIVOS
=========================== */

.motivos{

    padding:100px 10%;

    background:#181818;

}

.motivos h2{

    text-align:center;

    font-size:2.5rem;

    margin-bottom:40px;

}

.motivos ul{

    max-width:700px;

    margin:auto;

    list-style:none;

}

.motivos li{

    margin:18px 0;

    padding:18px 22px;

    background:#242424;

    border-radius:15px;

    font-size:1.1rem;

    transition:.3s;

}

.motivos li:hover{

    transform:translateX(8px);

    background:#2f2f2f;

}

/* ===========================
   FINAL
=========================== */

.final{

    padding:120px 20px;

    text-align:center;

    background:#101010;

}

.final h2{

    font-size:3rem;

    margin-bottom:25px;

}

.final p{

    font-size:1.2rem;

    line-height:1.8;

    max-width:700px;

    margin:auto;

}

/* ===========================
   RESPONSIVO
=========================== */

@media(max-width:768px){

    .hero-content h1{

        font-size:2.5rem;

    }

    .hero-content p{

        font-size:1.1rem;

    }

    .contador h2,
    .timeline h2,
    .motivos h2,
    .final h2{

        font-size:2rem;

    }

    .tempo{

        font-size:1.4rem;

    }

}