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

body{
background:white;
color:#050816;
}

main{

max-width:1100px;

margin:auto;

padding:80px 40px;
}



/* HERO */

.hero{

max-width:700px;

margin:auto;

}

.hero h1{

font-size:4rem;

line-height:1.05;

margin-bottom:30px;

}

.hero span{

color:#14b814;

}

.hero p{

font-size:1.1rem;

line-height:1.8;

color:#64748b;

margin-bottom:40px;

}



/* BUTTONS */

.actions{

display:flex;

gap:12px;

margin-bottom:40px;

}

.primary{

padding:16px 24px;

background:#050816;

color:white;

text-decoration:none;

border-radius:10px;

}

.secondary{

padding:16px 24px;

border:1px solid #ddd;

text-decoration:none;

color:#050816;

border-radius:10px;

}



/* SNIPPET */

.snippet{

border:1px solid #e2e8f0;

border-radius:10px;

overflow:hidden;

margin-bottom:80px;

}

.bar{

padding:14px 20px;

background:#f8fafc;

border-bottom:1px solid #e2e8f0;

color:#64748b;

}

pre{

padding:30px;

line-height:1.8;

overflow:auto;

}



/* STEPS */

.steps{

display:grid;

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

gap:60px;

margin-bottom:90px;

}

.steps span{

color:#14b814;

font-size:.8rem;

}

.steps h3{

margin:14px 0;

}

.steps p{

color:#64748b;

}



/* PRICING */

.pricing{

display:grid;

grid-template-columns:1fr 1fr;

gap:20px;

}

.card{

padding:40px;

border:1px solid #e2e8f0;

border-radius:10px;

}

.card h2{

font-size:3rem;

margin:20px 0;

}

.card span{

font-size:1rem;

}

.pro{

border:2px solid #14b814;

background:#f8fff8;

}



/* MOBILE */

@media(max-width:768px){

main{

padding:40px 24px;

}

.hero h1{

font-size:2.8rem;

}

.steps{

grid-template-columns:1fr;

}

.pricing{

grid-template-columns:1fr;

}

.actions{

flex-direction:column;

}

}