/*==================================================
  COMO FUNCIONA - REPASSE BRASIL
==================================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Inter,Arial,sans-serif;
}

html{
    scroll-behavior:smooth;
}

body{

    background:
    radial-gradient(circle at top,#12365d22,transparent 45%),
    linear-gradient(180deg,#07111c,#0d1724);

    color:#fff;
}

a{
    text-decoration:none;
}

.how-page{

    width:100%;
}

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

.how-header{

    width:100%;
    max-width:1380px;

    margin:auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:30px 25px;
}

.how-logo img{

    height:82px;
}

.how-header nav{

    display:flex;

    align-items:center;

    gap:35px;
}

.how-header nav a{

    color:#d7dde8;

    font-weight:600;

    transition:.25s;
}

.how-header nav a:hover{

    color:#22c55e;
}

.how-header nav a.active{

    color:#22c55e;
}

.login-btn{

    background:#22c55e;

    color:#fff!important;

    padding:13px 28px;

    border-radius:12px;
}

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

.how-hero{

    max-width:1380px;

    margin:auto;

    display:grid;

    grid-template-columns:1.1fr .9fr;

    gap:60px;

    align-items:center;

    padding:70px 25px 120px;
}

.how-hero-content span{

    display:inline-block;

    padding:8px 18px;

    border-radius:999px;

    background:#16311d;

    color:#22c55e;

    font-weight:700;

    margin-bottom:25px;
}

.how-hero h1{

    font-size:58px;

    line-height:1.05;

    margin-bottom:28px;
}

.how-hero p{

    font-size:21px;

    color:#b8c3d4;

    line-height:1.8;

    max-width:650px;
}

.hero-actions{

    display:flex;

    gap:20px;

    margin-top:45px;
}

.primary-action{

    background:#22c55e;

    color:#fff;

    padding:18px 34px;

    border-radius:14px;

    font-weight:700;

    transition:.25s;
}

.primary-action:hover{

    transform:translateY(-4px);
}

.secondary-action{

    border:2px solid rgba(255,255,255,.12);

    color:#fff;

    padding:18px 34px;

    border-radius:14px;

    transition:.25s;
}

.secondary-action:hover{

    background:#fff;

    color:#111827;
}

.hero-trust-card{

    background:#111d2b;

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

    border-radius:28px;

    padding:55px;

    text-align:center;

    box-shadow:0 35px 60px rgba(0,0,0,.35);
}

.hero-trust-card .trust-icon{

    font-size:65px;

    display:block;

    margin-bottom:20px;
}

.hero-trust-card strong{

    display:block;

    font-size:30px;

    margin-bottom:15px;
}

.hero-trust-card small{

    color:#b5c0d1;

    font-size:18px;

    line-height:1.7;
}

/*==================================================
SECTIONS
==================================================*/

.steps-section,
.benefits-section,
.faq-section{

    max-width:1380px;

    margin:auto;

    padding:90px 25px;
}

.section-label{

    color:#22c55e;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:2px;
}

.steps-section h2,
.benefits-section h2,
.faq-section h2{

    font-size:46px;

    margin-top:18px;

    margin-bottom:60px;
}

/*==================================================
PASSOS
==================================================*/

.steps-grid{

    display:grid;

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

    gap:28px;
}

.step-card{

    background:#121d2b;

    border-radius:24px;

    padding:40px;

    position:relative;

    transition:.3s;

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

.step-card:hover{

    transform:translateY(-8px);

    border-color:#22c55e;
}

.step-number{

    position:absolute;

    right:25px;

    top:25px;

    width:42px;

    height:42px;

    border-radius:50%;

    background:#22c55e;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;
}

.step-icon{

    font-size:56px;

    margin-bottom:25px;
}

.step-card h3{

    font-size:24px;

    margin-bottom:15px;
}

.step-card p{

    color:#b8c3d4;

    line-height:1.8;
}

/*==================================================
BENEFÍCIOS
==================================================*/

.benefits-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;
}

.benefit-card{

    background:#121d2b;

    border-radius:26px;

    padding:42px;

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

    transition:.25s;
}

.benefit-card:hover{

    transform:translateY(-6px);

    border-color:#22c55e;
}

.benefit-icon{

    font-size:55px;

    margin-bottom:22px;
}

.benefit-card h3{

    font-size:28px;

    margin-bottom:8px;
}

.benefit-card strong{

    color:#22c55e;

    display:block;

    margin-bottom:25px;
}

.benefit-card ul{

    list-style:none;
}

.benefit-card li{

    margin-bottom:16px;

    color:#c4cedd;

    line-height:1.6;

    position:relative;

    padding-left:26px;
}

.benefit-card li:before{

    content:"✓";

    position:absolute;

    left:0;

    color:#22c55e;

    font-weight:bold;
}

.benefit-card a{

    display:inline-block;

    margin-top:28px;

    color:#22c55e;

    font-weight:700;
}

/*==================================================
NÚMEROS
==================================================*/

.numbers-section{

    max-width:1380px;

    margin:auto;

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

    padding:20px 25px 100px;
}

.numbers-section article{

    background:#121d2b;

    border-radius:22px;

    padding:45px;

    text-align:center;
}

.numbers-section strong{

    display:block;

    font-size:52px;

    color:#22c55e;

    margin-bottom:12px;
}

.numbers-section span{

    color:#b8c3d4;

    line-height:1.6;
}

/*==================================================
FAQ
==================================================*/

.faq-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:28px;
}

.faq-grid article{

    background:#121d2b;

    border-radius:22px;

    padding:35px;
}

.faq-grid h3{

    margin-bottom:16px;

    font-size:22px;
}

.faq-grid p{

    color:#b8c3d4;

    line-height:1.8;
}

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

.final-cta{

    max-width:1380px;

    margin:40px auto 120px;

    background:linear-gradient(135deg,#16a34a,#22c55e);

    border-radius:30px;

    padding:70px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:40px;
}

.final-cta h2{

    font-size:46px;

    margin-bottom:20px;
}

.final-cta p{

    font-size:19px;

    color:#eefef3;

    line-height:1.7;
}

.cta-actions{

    display:flex;

    gap:18px;
}

.final-cta .primary-action{

    background:#fff;

    color:#15803d;
}

.final-cta .secondary-action{

    border:2px solid rgba(255,255,255,.4);

    color:#fff;
}

/*========================*/

.step-card,
.benefit-card,
.hero-trust-card,
.numbers-section article,
.faq-grid article{

    opacity:0;

    transform:translateY(40px);

    transition:.7s;
}

.show{

    opacity:1!important;

    transform:none!important;
}

/*========================*/

.header-fixed{

    position:fixed;

    top:0;

    left:50%;

    transform:translateX(-50%);

    width:100%;

    max-width:1380px;

    background:rgba(8,15,25,.92);

    backdrop-filter:blur(18px);

    border-radius:0 0 20px 20px;

    z-index:999;

    transition:.3s;
}

/*========================*/

.faq-grid article{

    transition:.25s;
}

.faq-grid article:hover{

    border-color:#22c55e;

    transform:translateY(-3px);
}
/*==================================================
RESPONSIVO
==================================================*/

@media(max-width:1200px){

.how-hero{

grid-template-columns:1fr;

}

.benefits-grid{

grid-template-columns:1fr;

}

.numbers-section{

grid-template-columns:repeat(2,1fr);

}

.final-cta{

flex-direction:column;

text-align:center;

}

}

@media(max-width:768px){

.how-header{

flex-direction:column;

gap:30px;

}

.how-header nav{

flex-wrap:wrap;

justify-content:center;

}

.how-hero h1{

font-size:40px;

}

.steps-section h2,
.benefits-section h2,
.faq-section h2{

font-size:34px;

}

.faq-grid{

grid-template-columns:1fr;

}

.numbers-section{

grid-template-columns:1fr;

}

.hero-actions,
.cta-actions{

flex-direction:column;

}

.final-cta{

padding:45px 30px;

}

}