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

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

html{
    scroll-behavior:smooth;
}

body{

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

    background:#0b0b0b;

    color:#fff;

    overflow-x:hidden;

}

/*==============================
    HEADER
================================*/

.header{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 25px 60px;
    background: transparent;
    position: relative;
    z-index: 2;
}

.nav{
    display: flex;
    gap: 45px;
    flex: 1;
}

.nav a{
    color: #8a8a8a;
    text-decoration: none;
    font-size: 14px;
    letter-spacing: 3px;
    transition: 0.3s;
}

.nav a:hover{
    color: white;
}

.btn-header{
    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: #d4af37;
    color: #000;
    text-decoration: none;
    padding: 18px 35px;
    border-radius: 3px;
    font-weight: bold;
    font-size: 13px;
    letter-spacing: 2px;
    transition: 0.3s;
}

.btn-header:hover{
    transform: translateY(-3px);
    box-shadow:
        0 0 15px rgba(212,175,55,.45),
        0 0 35px rgba(212,175,55,.25);
}

@media(max-width:768px){

    .header{
        flex-direction: column;
        gap: 20px;
        padding: 20px;
    }

    .nav{
        gap: 20px;
        flex-wrap: wrap;
        justify-content: center;
    }

}

/*==============================
    FUNDO
================================*/

body::before{

content:"";

position:fixed;

width:600px;
height:600px;

background:radial-gradient(circle,#b8860b25,transparent 70%);

top:-250px;
right:-200px;

filter:blur(60px);

z-index:-2;

}

body::after{

content:"";

position:fixed;

width:500px;
height:500px;

background:radial-gradient(circle,#f4d16015,transparent 70%);

bottom:-250px;
left:-200px;

filter:blur(60px);

z-index:-2;

}

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

.hero{

padding:140px 8%;

min-height:100vh;

display:flex;

align-items:center;

justify-content:center;

text-align:center;

}

.hero-content{

max-width:900px;

}

.badge{

display:inline-flex;

align-items:center;

gap:10px;

padding:12px 24px;

border:1px solid rgba(212,175,55,.30);

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

border-radius:40px;

color:#d4af37;

font-size:14px;

margin-bottom:35px;

backdrop-filter:blur(15px);

}

.hero h1{

font-size:65px;

line-height:1.1;

margin-bottom:30px;

font-weight:700;

}

.hero h1 span{

background:linear-gradient(135deg,#d4af37,#fff1b0);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.hero p{

font-size:20px;

color:#cfcfcf;

line-height:1.8;

margin-bottom:50px;

}

/*==============================
BOTÕES
===============================*/

.hero-buttons{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}

.btn,
.btn-secondary{

padding:17px 35px;

border-radius:12px;

font-weight:600;

text-decoration:none;

transition:.35s;

position:relative;

overflow:hidden;

display:inline-flex;

align-items:center;

justify-content:center;

}

/*==============================
BOTÃO PRINCIPAL
===============================*/

.btn{

background:linear-gradient(135deg,#b8860b,#f4d160);

color:#111;

box-shadow:0 10px 30px rgba(212,175,55,.25);

}

/*==============================
BOTÃO SECUNDÁRIO
===============================*/

.btn-secondary{

border:1px solid rgba(212,175,55,.30);

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

color:white;

}

/*==============================
BRILHO
===============================*/

.btn::before,
.btn-secondary::before{

content:"";

position:absolute;

top:0;

left:-120%;

width:60%;

height:100%;

background:linear-gradient(
120deg,
transparent,
rgba(255,255,255,.5),
transparent
);

transform:skewX(-25deg);

}

/*==============================
HOVER
===============================*/

.btn:hover,
.btn-secondary:hover{

background:linear-gradient(135deg,#c89818,#ffd978,#c89818);

transform:translateY(-8px);

box-shadow:

0 18px 40px rgba(212,175,55,.35),

0 0 35px rgba(212,175,55,.18);

animation:flutuar .9s infinite alternate;

color:#111;

}

.btn:hover::before,
.btn-secondary:hover::before{

animation:brilho .7s forwards;

}

.btn:active,
.btn-secondary:active{

transform:scale(.98);

}

@keyframes brilho{

100%{

left:150%;

}

}

@keyframes flutuar{

from{

transform:translateY(-6px);

}

to{

transform:translateY(-12px);

}

}

/*==============================
 TITULOS
===============================*/

.section-title{

text-align:center;

margin-bottom:70px;

}

.section-title h2{

font-size:46px;

margin-bottom:20px;

}

.section-title p{

color:#bdbdbd;

font-size:18px;

}

/*==============================
 PROCESSO
===============================*/

.process{

padding:120px 8%;

}

.timeline{

max-width:1000px;

margin:auto;

display:flex;

flex-direction:column;

gap:35px;

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

.timeline-item{

    display:flex;
    align-items:flex-start;
    gap:30px;

    padding:35px;

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

    border:1px solid rgba(212,175,55,.15);

    border-radius:18px;

    transition:.35s;

    backdrop-filter:blur(10px);

}

.timeline-item:hover{

    transform:translateY(-8px);

    border-color:#d4af37;

    box-shadow:
    0 15px 40px rgba(212,175,55,.15),
    0 0 25px rgba(212,175,55,.08);

}

.number{

    min-width:70px;
    width:70px;
    height:70px;

    border-radius:50%;

    background:linear-gradient(135deg,#b8860b,#f5d97b);

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

    color:#111;

    font-size:22px;

    font-weight:bold;

}

.timeline-content h3{

    font-size:28px;

    margin-bottom:15px;

    color:#d4af37;

}

.timeline-content p{

    color:#d1d1d1;

    line-height:1.8;

}

/* ==========================================
   CARDS
========================================== */

.features{

    padding:120px 8%;

}

.cards{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:30px;

}

.card{

    background:#111;

    border:1px solid rgba(212,175,55,.15);

    border-radius:20px;

    padding:45px 35px;

    text-align:center;

    transition:.35s;

    position:relative;

    overflow:hidden;

}

.card::before{

    content:"";

    position:absolute;

    width:250px;
    height:250px;

    background:radial-gradient(circle,
    rgba(212,175,55,.12),
    transparent 70%);

    top:-130px;
    right:-130px;

    transition:.4s;

}

.card:hover{

    transform:translateY(-12px);

    border-color:#d4af37;

    box-shadow:
    0 20px 45px rgba(212,175,55,.18);

}

.card:hover::before{

    transform:scale(1.3);

}

.card i{

    font-size:42px;

    color:#d4af37;

    margin-bottom:25px;

}

.card h3{

    font-size:24px;

    margin-bottom:15px;

}

.card p{

    color:#cfcfcf;

    line-height:1.8;

}

/* ==========================================
   CTA
========================================== */

.cta{

    margin:120px auto;

    width:90%;
    max-width:1200px;

    padding:90px 60px;

    border-radius:30px;

    background:linear-gradient(
        135deg,
        #111,
        #1b1b1b
    );

    border:1px solid rgba(212,175,55,.20);

    text-align:center;

    position:relative;

    overflow:hidden;

}

.cta::before{

    content:"";

    position:absolute;

    width:450px;
    height:450px;

    background:radial-gradient(circle,
    rgba(212,175,55,.20),
    transparent 70%);

    top:-220px;
    right:-150px;

}

.cta h2{

    font-size:48px;

    margin-bottom:25px;

}

.cta p{

    max-width:700px;

    margin:auto;

    color:#d4d4d4;

    line-height:1.9;

    font-size:18px;

    margin-bottom:45px;

}

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

@media(max-width:991px){

.hero{

padding-top:120px;

}

.hero h1{

font-size:48px;

}

.hero p{

font-size:18px;

}

.timeline-item{

flex-direction:column;

align-items:center;

text-align:center;

}

.number{

margin-bottom:20px;

}

.section-title h2{

font-size:36px;

}

.cta h2{

font-size:36px;

}

}

@media(max-width:768px){

.hero{

padding:120px 25px;

}

.hero h1{

font-size:38px;

}

.hero-buttons{

flex-direction:column;

}

.btn,
.btn-secondary{

width:100%;

}

.timeline-item{

padding:25px;

}

.card{

padding:35px 25px;

}

.cta{

padding:60px 30px;

}

.cta h2{

font-size:30px;

}

}

@media(max-width:480px){

.hero h1{

font-size:30px;

}

.hero p{

font-size:16px;

}

.section-title h2{

font-size:30px;

}

.timeline-content h3{

font-size:22px;

}

}