*{
box-sizing:border-box;
}

html,body{
overflow-x:hidden;
}

svg,img{
max-width:100%;
height:auto;
display:block;
}

body{
font-family:'Inter',sans-serif;
margin:0;
background:#f6f6f6;
color:#222;
}

/* container */

.container{
max-width:1100px;
margin:auto;
padding:40px 20px;
}

/* HERO */

.hero{
background:linear-gradient(135deg,#111,#2b2b2b);
color:white;
padding:90px 20px;
position:relative;
overflow:hidden;
}

/* glow moderno */

.hero::before{
content:"";
position:absolute;
width:500px;
height:500px;
background:radial-gradient(circle,#c6a76955,transparent 70%);
top:-200px;
right:-150px;
filter:blur(60px);
}

/* grid */

.hero-grid{
display:grid;
grid-template-columns:1fr 1fr;
align-items:center;
gap:40px;
position:relative;
z-index:2;
}

.hero-text h1{
font-size:42px;
margin-bottom:15px;
}

.hero-text p{
font-size:18px;
color:#ddd;
max-width:520px;
}

.hero .phone-mockup{
margin:0 auto;
}

/* CTA */

.cta{
display:inline-block;
margin-top:25px;
background:#c6a769;
color:#111;
padding:16px 28px;
border-radius:10px;
text-decoration:none;
font-weight:600;
font-size:18px;
transition:0.2s;
}

/* micro interação */

.cta:hover{
transform:translateY(-2px);
box-shadow:0 10px 30px rgba(0,0,0,0.25);
}

.badges{
margin-top:20px;
color:#ddd;
font-size:14px;
}

/* sections */

.section{
padding:70px 20px;
}

.section h2{
text-align:center;
margin-bottom:40px;
font-size:28px;
}

.phone-mock{
position:relative;
max-width:320px;
margin:40px auto;
}

.phone-frame{
width:100%;
display:block;
position:relative;
z-index:2;
}

.phone-screen{
  position:absolute;
  top:8%;
  left:7%;
  width:86%;
  height:84%;
  object-fit:cover;
  border-radius:18px;
  display:block;
  z-index:1;
}

.como-funciona{
  text-align:center;
  padding:80px 20px;
}

.como-funciona h2{
  font-size:32px;
  margin-bottom:20px;
}

.explicacao{
  max-width:600px;
  margin:20px auto 0;
  font-size:18px;
  line-height:1.5;
  color:#555;
}

/* cards */

.cards{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:20px;
}

.card{
background:white;
padding:25px;
border-radius:14px;
box-shadow:0 10px 25px rgba(0,0,0,0.08);
border-top:4px solid #c6a769;
transition:0.2s;
}

.card:hover{
transform:translateY(-4px);
box-shadow:0 18px 35px rgba(0,0,0,0.12);
}

/* compare */

.compare{
display:flex;
justify-content:center;
align-items:center;
gap:30px;
flex-wrap:wrap;
}

.compare-card{
background:white;
padding:20px;
border-radius:12px;
box-shadow:0 8px 20px rgba(0,0,0,0.08);
max-width:260px;
}

.msg{
background:#f1f1f1;
padding:10px;
border-radius:8px;
margin-bottom:10px;
}

.highlight{
background:#c6a769;
color:#111;
font-weight:600;
}

.compare-arrow{
font-size:32px;
color:#c6a769;
font-weight:700;
}

/* screenshot */

.screenshot{
text-align:center;
}

.screenshot img{
max-width:100%;
border-radius:12px;
box-shadow:0 20px 40px rgba(0,0,0,0.2);
}

/* form */

.form-box{
max-width:600px;
margin:40px auto;
display:flex;
flex-direction:column;
gap:12px;
}

.form-box input{
padding:14px;
border-radius:8px;
border:1px solid #ddd;
font-size:15px;
width:100%;
}

.form-box button{
background:#c6a769;
color:#111;
padding:16px;
border:none;
border-radius:10px;
font-size:16px;
font-weight:600;
cursor:pointer;
transition:0.2s;
}

.form-box button:hover{
transform:translateY(-2px);
box-shadow:0 10px 25px rgba(0,0,0,0.2);
}

/* add service */

.add-servico{
background:none;
border:2px dashed #c6a769;
padding:12px;
border-radius:8px;
cursor:pointer;
font-weight:600;
color:#c6a769;
margin-top:5px;
}

.add-servico:hover{
background:#c6a76920;
}

/* social proof */

.atividade{

display:inline-block;

background:#ffffff;

padding:10px 18px;

border-radius:30px;

box-shadow:0 8px 25px rgba(0,0,0,0.08);

font-size:14px;

color:#555;

margin:25px auto 35px auto;

}

#contador{
color:#c6a769;
font-weight:700;
}

/* tempo */

.tempo{
text-align:center;
font-size:13px;
color:#777;
margin-top:8px;
}

/* exemplo */

.exemplo{
background:#ffffff;
text-align:center;
}

.exemplo-texto{
max-width:600px;
margin:10px auto 25px auto;
color:#666;
font-size:16px;
}

.exemplo-link{
display:inline-block;
background:#111;
color:#fff;
padding:14px 22px;
border-radius:8px;
text-decoration:none;
font-weight:600;
transition:0.2s;
}

.exemplo-link:hover{
background:#c6a769;
color:#111;
}

/* footer */

.final{
text-align:center;
background:#111;
color:white;
padding:70px 20px;
}

.footer{
text-align:center;
font-size:13px;
color:#888;
padding:30px;
}

.footer a{
color:#888;
text-decoration:none;
}

/* responsive */

@media(max-width:900px){

.hero-grid{
grid-template-columns:1fr;
text-align:center;
}

.hero-text h1{
font-size:32px;
}

.hero-text p{
margin:auto;
}

}

@media(max-width:600px){

.container{
padding:30px 18px;
}

.section{
padding:50px 10px;
}

.cards{
grid-template-columns:1fr;
}

.compare-arrow{
display:none;
}

}
.section{
text-align:center;
}

.gatilho{
text-align:center;
font-size:18px;
color:#666;
margin-bottom:10px;
font-weight:600;
}


/* mockup celular no hero */

.phone-mockup{
width:240px;
margin:40px auto;
background:#000;
padding:10px;
border-radius:28px;
box-shadow:0 40px 80px rgba(0,0,0,0.45);
overflow:hidden;
}

.phone-mockup img,
.phone-mockup video{
width:100%;
display:block;
border-radius:20px;
}


.cliente{
background:#e8f5e9;
}

.salao{
background:#f1f1f1;
}

.sumiu{
background:#fff;
text-align:center;
color:#aaa;
font-size:20px;
letter-spacing:4px;
}

.compare-card h3{
margin-bottom:20px;
}

.unica{
background:#e8f5e9;
border-left:4px solid #25D366;
font-weight:500;
}
.reduz{
text-align:center;
font-size:16px;
color:#777;
margin-top:8px;
}

.faq{
background:#ffffff;
}

.faq-item{
max-width:720px;
margin:0 auto 20px auto;
background:white;
padding:22px;
border-radius:12px;
box-shadow:0 8px 20px rgba(0,0,0,0.06);
text-align:left;
}

.faq-item h3{
margin-top:0;
font-size:18px;
margin-bottom:6px;
}

.faq-item p{
margin:0;
color:#555;
line-height:1.5;
}
.demo-info{
font-size:13px;
color:#777;
margin-top:8px;
}


@media(max-width:900px){

.hero-illustration{
margin-top:40px;
}

}