*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Inter',sans-serif
}

body{
background:#0b1220;
color:#fff;
padding-top:60px;
}

.container{
max-width:1200px;
margin:auto;
padding:40px 20px
}

/* NAVBAR */

.navbar{
position:fixed;
width:100%;
top:0;
background:rgba(11,18,32,.9);
backdrop-filter:blur(10px);
border-bottom:1px solid #1f2a44;
z-index:1000
}

.nav-container{
max-width:1200px;
margin:auto;
padding:10px 20px;
display:flex;
justify-content:space-between;
align-items:center
}

.logo img{width:110px}

.nav-menu{
display:flex;
gap:30px;
align-items:center
}

.nav-menu a{
text-decoration:none;
color:#fff;
font-weight:500;
transition:.3s
}

.nav-menu a:hover{color:#818cf8}

.nav-cta{
background:#4f46e5;
padding:10px 18px;
border-radius:8px
}

.nav-cta:hover{background:#6366f1}

.navbar{
transition:all .3s ease;
}

/* HAMBURGER */

.hamburger{
display:none;
flex-direction:column;
cursor:pointer;
gap:5px
}

.hamburger span{
width:25px;
height:3px;
background:#fff
}

/* HERO */

.hero{
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
padding:80px 20px;
background:linear-gradient(180deg,#0b1220,#0e1a33)
}

.hero img{width:320px;margin-bottom:30px}

.hero h1{
font-size:2.8rem;
font-weight:800;
margin-bottom:20px
}

.hero p{
font-size:1.2rem;
color:#c7d2fe;
max-width:700px;
margin-bottom:30px
}

.cta{
display:flex;
gap:20px;
flex-wrap:wrap;
justify-content:center;
margin-top:30px;
}

.btn{
padding:16px 26px;
border-radius:10px;
font-weight:600;
text-decoration:none;
transition:.3s
}

.primary{background:#4f46e5;color:#fff}
.primary:hover{background:#6366f1}
.secondary{border:1px solid #6366f1;color:#a5b4fc}
.secondary:hover{background:#6366f1;color:#fff}

.section{padding:40px 0}
.section h2{text-align:center;font-size:2.2rem;margin-bottom:50px}

.grid{display:grid;gap:25px}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}

.card{
background:#111a2e;
padding:30px;
border-radius:16px;
border:1px solid #1f2a44;
transition:.3s
}

.card:hover{
transform:translateY(-6px);
border-color:#6366f1
}

.pain{background:#111827}
.pain ul{max-width:700px;margin:auto;list-style:none}
.pain li{padding:18px;border-bottom:1px solid #1f2937;font-size:1.1rem}

.features{background:#0e172a}
.highlight{color:#818cf8;font-weight:600}

.faq{background:#111827}

.faq-item{border-bottom:1px solid #1f2937}

.faq-question{
width:100%;
background:#111a2e;
border:1px solid #1f2a44;
color:#fff;
padding:18px 20px;
text-align:left;
font-size:1.05rem;
font-weight:600;
display:flex;
justify-content:space-between;
align-items:center;
cursor:pointer;
border-radius:10px;
transition:all .2s ease;
}

.faq-question:hover{
border-color:#6366f1;
}

.faq-answer{
background:#0f172a;
margin-top:10px;
border-left:3px solid #6366f1;
border-radius:6px;

max-height:0;
overflow:hidden;
transition:max-height .35s ease;
}

.faq-item.active .faq-answer{
max-height:600px
}

.faq-item{
margin-bottom:16px;
}

.faq-icon{
font-size:20px;
color:#94a3b8;
margin-left:15px;
transition:transform .3s ease;
}

.faq-item.active .faq-icon{
transform:rotate(45deg);
color:#6366f1;
}

.cta-final{
text-align:center;
padding:100px 20px;
background:linear-gradient(180deg,#0e172a,#0b1220);
display:flex;
flex-direction:column;
align-items:center;
gap:20px;
}

footer{
text-align:center;
padding:40px 20px;
color:#94a3b8;
font-size:.9rem
}

/* RESPONSIVO */

@media (max-width:768px){

.nav-menu{
position:absolute;
top:70px;
right:0;
background:#0e172a;
flex-direction:column;
width:200px;
padding:20px;
display:none
}

.nav-menu.active{display:flex}

.hamburger{display:flex}

.hero h1{font-size:2rem}
}

/* CTA FINAL PROFISSIONAL */

.cta-final{
padding:80px 20px;
background:linear-gradient(180deg,#0e172a,#020617);
text-align:center;
}

.cta-container{
max-width:700px;
margin:auto;
display:flex;
flex-direction:column;
gap:25px;
align-items:center;
}

.cta-final h2{
font-size:2.4rem;
font-weight:800;
}

.cta-subtitle{
font-size:1.2rem;
color:#cbd5e1;
line-height:1.6;
max-width:600px;
}

/* BOTÃO PREMIUM */

.cta-button{
background:linear-gradient(135deg,#6366f1,#4f46e5);
padding:16px 34px;
border-radius:12px;
text-decoration:none;
color:white;
font-weight:600;
font-size:1.05rem;
transition:all .3s ease;
box-shadow:0 10px 30px rgba(99,102,241,0.35);
}

.cta-button:hover{
transform:translateY(-3px);
box-shadow:0 15px 40px rgba(99,102,241,0.55);
}

/* TRUST ELEMENTS */

.cta-trust{
display:flex;
gap:25px;
flex-wrap:wrap;
justify-content:center;
margin-top:10px;
color:#94a3b8;
font-size:0.95rem;
}

/* PROBLEM SECTION */

.problem{
background:#0b1220;
}

.problem-title{
text-align:center;
font-size:2.2rem;
font-weight:800;
max-width:800px;
margin:auto;
margin-bottom:20px;
}

.problem-subtitle{
text-align:center;
color:#94a3b8;
max-width:650px;
margin:auto;
margin-bottom:60px;
font-size:1.1rem;
}

.problem-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:30px;
margin-top:40px;
}

.problem-card{
background:#111a2e;
padding:30px;
border-radius:14px;
border:1px solid #1f2a44;
transition:all .3s ease;
}

.problem-card:hover{
transform:translateY(-5px);
border-color:#6366f1;
}

.problem-icon{
font-size:28px;
display:block;
margin-bottom:15px;
}

.problem-card h3{
margin-bottom:10px;
font-size:1.2rem;
}

.problem-card p{
color:#94a3b8;
font-size:.95rem;
}

/* FEATURES SECTION */

.features-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:30px;
margin-top:50px;
}

.feature-card{
background:#111a2e;
padding:30px;
border-radius:14px;
border:1px solid #1f2a44;
transition:all .3s ease;
}

.feature-card:hover{
transform:translateY(-6px);
border-color:#6366f1;
}

.feature-card i{
color:#6366f1;
width:28px;
height:28px;
margin-bottom:15px;
}

.feature-card h3{
font-size:1.2rem;
margin-bottom:8px;
}

.feature-card p{
color:#94a3b8;
font-size:.95rem;
line-height:1.5;
}

.features-intro{
text-align:center;
max-width:700px;
margin:20px auto 50px auto;
color:#94a3b8;
font-size:1.1rem;
line-height:1.6;
}

/* PRICING SECTION */

.pricing{
background:#0b1220;
padding:70px 20px;
text-align:center;
}

.pricing-title{
font-size:2.2rem;
font-weight:800;
max-width:700px;
margin:auto;
margin-bottom:15px;
}

.pricing-subtitle{
color:#94a3b8;
font-size:1.1rem;
margin-bottom:40px;
}

.pricing-card{
background:#111a2e;
border:1px solid #1f2a44;
border-radius:16px;
padding:40px;
max-width:420px;
margin:auto;
box-shadow:0 10px 40px rgba(0,0,0,0.4);
}

.pricing-price{
margin-bottom:25px;
}

.price{
font-size:3rem;
font-weight:800;
color:#6366f1;
}

.period{
color:#94a3b8;
margin-left:5px;
}

.pricing-features{
list-style:none;
text-align:left;
margin-bottom:30px;
}

.pricing-features li{
padding:10px 0;
color:#cbd5e1;
border-bottom:1px solid #1f2a44;
}

.pricing-button{
width:100%;
display:inline-block;
margin-top:10px;
}

.pricing-note{
margin-top:18px;
font-size:.85rem;
color:#64748b;
line-height:1.5;
max-width:320px;
margin-left:auto;
margin-right:auto;
}