:root{
--primary:#2563eb;
--dark:#0f172a;
--muted:#64748b;
--bg:#f4f7fb;
--card:#ffffff;
--radius:18px;
}

body{
margin:0;
font-family:Inter,system-ui,Arial;
background:var(--bg);
color:var(--dark);
line-height:1.7;
}

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

section{margin-bottom:80px;}

h1{font-size:42px;}
h2{text-align:center;font-size:32px;margin-bottom:24px;}
h3{font-size:22px;}
p{color:var(--muted);}

.hero{
display:grid;
grid-template-columns:1.1fr 0.9fr;
gap:40px;
align-items:center;
}

.hero img{
width:100%;
border-radius:24px;
box-shadow:0 20px 40px rgba(0,0,0,.08);
}

.badge{
display:inline-block;
background:#e0ebff;
color:#2563eb;
padding:8px 16px;
border-radius:999px;
font-weight:600;
margin-bottom:15px;
}

.btn{
display:inline-block;
background:linear-gradient(135deg,#2563eb,#1e40af);
color:#fff;
padding:16px 32px;
border-radius:999px;
text-decoration:none;
font-weight:600;
margin-top:20px;
}

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

.card{
background:var(--card);
padding:30px;
border-radius:var(--radius);
box-shadow:0 10px 25px rgba(0,0,0,.05);
}

.beforeafter{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:24px;
}

.beforeafter img{
width:100%;
border-radius:14px;
}

table{
width:100%;
border-collapse:collapse;
background:#fff;
border-radius:18px;
overflow:hidden;
}

th,td{
padding:16px;
border-bottom:1px solid #e5e7eb;
text-align:left;
}

th{background:#f1f5f9;}

.faq-item{
background:#fff;
padding:24px;
border-radius:16px;
margin-bottom:16px;
}

@media(max-width:900px){
.hero{grid-template-columns:1fr;}
h1{font-size:32px;}
}