:root {

  --bg:#0b1020;
  --bg-soft:#11182d;

  --card:rgba(17,24,45,0.75);

  --text:#f5f7ff;
  --muted:#a9b3cf;

  --primary:#5b2eff;
  --primary-light:#7c5cff;

  --accent:#00e7ff;

  --radius:22px;

  --container:1100px;

}

/* RESET */

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

body{

font-family:Inter,system-ui,-apple-system,sans-serif;

background:linear-gradient(180deg,#0b1020,#0a0f1d);

color:var(--text);

line-height:1.6;

}

/* CONTAINER */

.container{

max-width:var(--container);
margin:auto;
padding:0 20px;

}

/* HEADER */

header{

text-align:center;
padding:80px 20px 40px;

}

header h1{

font-size:42px;
font-weight:700;

background:linear-gradient(90deg,#ffffff,#b8c3ff);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

margin-bottom:20px;

}

header p{

color:var(--muted);
font-size:18px;

max-width:720px;
margin:auto;

}

/* SEÇÕES */

section{

max-width:var(--container);
margin:auto;

padding:60px 20px;

}

/* TITULOS */

h2{

font-size:28px;
margin-bottom:18px;

}

h3{

margin-top:20px;
margin-bottom:8px;

}

/* LISTAS */

ul{

margin-top:20px;
padding-left:18px;

}

li{

margin-bottom:10px;

}

/* TYPEBOT */

.typebot-container{

margin-top:30px;

border-radius:var(--radius);

overflow:hidden;

background:var(--card);

border:1px solid rgba(255,255,255,0.05);

box-shadow:0 20px 60px rgba(0,0,0,0.35);

}

/* CARDS BASE */

.card{

background:var(--card);

padding:28px;

border-radius:var(--radius);

border:1px solid rgba(255,255,255,0.05);

backdrop-filter:blur(12px);

box-shadow:0 15px 40px rgba(0,0,0,0.3);

}

/* GRID DE LINKS */

.cards{

display:grid;

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

gap:20px;

margin-top:30px;

}

.cards .card{

display:block;

padding:18px 22px;

border-radius:16px;

background:rgba(17,24,45,0.8);

border:1px solid rgba(255,255,255,0.06);

transition:0.25s;

font-weight:500;

color:var(--accent);

text-align:center;

min-height:60px;

}

.cards{
margin-bottom:40px;
}

.cards .card:hover{

transform:translateY(-4px);

border-color:rgba(255,255,255,0.15);

}


.cta-button{

display:inline-block;

margin-top:20px;

padding:14px 28px;

border-radius:30px;

background:linear-gradient(90deg,var(--primary),var(--primary-light));

color:white;

font-weight:600;

text-decoration:none;

transition:0.25s;

box-shadow:0 10px 30px rgba(91,46,255,0.35);

}

.cta-button:hover{

transform:translateY(-2px);

box-shadow:0 14px 40px rgba(91,46,255,0.45);

}

.cta-mensagens{

display:inline-block;

margin-top:22px;

padding:14px 32px;

border-radius:30px;

font-weight:600;

font-size:16px;

color:white;

background:linear-gradient(90deg,var(--primary),var(--primary-light));

text-decoration:none;

box-shadow:0 10px 30px rgba(91,46,255,0.35);

transition:all .25s ease;

}

.cta-mensagens:hover{

transform:translateY(-3px);

box-shadow:0 14px 45px rgba(91,46,255,0.45);

}

.cta-mensagens:hover{

transform:translateY(-2px);

box-shadow:0 14px 40px rgba(91,46,255,0.45);

}

.cta-box{

margin-top:60px;

padding:40px;

border-radius:24px;

background:rgba(17,24,45,0.7);

border:1px solid rgba(255,255,255,0.06);

backdrop-filter:blur(12px);

box-shadow:0 20px 60px rgba(0,0,0,0.35);

text-align:center;

}

.cta-box p{

max-width:650px;

margin:auto;

margin-top:12px;

color:var(--muted);

}

/* LINKS */

a{

color:var(--accent);
text-decoration:none;

}

a:hover{

opacity:0.8;

}

/* BREADCRUMB */

.breadcrumb{

display:flex;
align-items:center;
flex-wrap:wrap;

gap:6px;

margin-top:20px;
margin-bottom:40px;

padding:10px 16px;

background:rgba(17,24,45,0.55);

border:1px solid rgba(255,255,255,0.06);

border-radius:14px;

backdrop-filter:blur(10px);

font-size:14px;

}

.breadcrumb a{

color:#a9b3cf;

text-decoration:none;

transition:0.2s;

}

.breadcrumb a:hover{

color:#ffffff;

}

.separator{

opacity:0.6;

margin:0 4px;

}

.current{

color:#ffffff;
font-weight:500;

}

/* FAQ */

.faq{

margin-top:40px;

}

.faq-item{

background:rgba(17,24,45,0.7);

padding:22px;

border-radius:18px;

border:1px solid rgba(255,255,255,0.06);

margin-bottom:16px;

}

.faq-item h3{

font-size:18px;

margin-bottom:8px;

}

.faq-item p{

color:#a9b3cf;

}

/* FOOTER */

footer{

margin-top:80px;

padding:40px 20px;

text-align:center;

color:var(--muted);

border-top:1px solid rgba(255,255,255,0.05);

}

/* RESPONSIVO */

@media(max-width:768px){

header{

padding:60px 20px 20px;

}

header h1{

font-size:30px;

}

header p{

font-size:16px;

}

section{

padding:40px 20px;

}

.cards{

grid-template-columns:1fr;

}

}