/* === Reset & Base === */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,sans-serif;color:#333;line-height:1.6;background:#fff}
img{max-width:100%;height:auto}
a{color:#0066CC;text-decoration:none}
a:hover{text-decoration:underline}

/* === Container === */
.container{max-width:1100px;margin:0 auto;padding:0 20px}

/* === Buttons === */
.btn{display:inline-block;padding:14px 32px;border-radius:8px;font-weight:700;font-size:1.1rem;text-align:center;transition:all .3s ease;text-decoration:none;cursor:pointer;border:none}
.btn-primary{background:#25D366;color:#fff;box-shadow:0 4px 14px rgba(37,211,102,.35)}
.btn-primary:hover{background:#1eba59;transform:translateY(-2px);box-shadow:0 6px 20px rgba(37,211,102,.45);text-decoration:none}
.btn-lg{padding:16px 40px;font-size:1.2rem}
.btn-xl{padding:20px 48px;font-size:1.3rem}

/* === Hero === */
.hero{background:linear-gradient(135deg,#0066CC 0%,#004999 100%);color:#fff;padding:80px 0 90px;text-align:center}
.hero h1{font-size:2.4rem;max-width:800px;margin:0 auto 20px;line-height:1.25}
.hero .subtitle{font-size:1.2rem;opacity:.9;max-width:600px;margin:0 auto 36px}

/* === Sections shared === */
section{padding:70px 0}
section h2{text-align:center;font-size:2rem;margin-bottom:48px;color:#222}

/* === Pains === */
.pains{background:#F5F5F5}
.cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.card{background:#fff;border-radius:12px;padding:32px 24px;text-align:center;box-shadow:0 2px 12px rgba(0,0,0,.06);transition:transform .3s}
.card:hover{transform:translateY(-4px)}
.card-icon{font-size:2.4rem;margin-bottom:12px}
.card h3{margin-bottom:10px;color:#0066CC}
.card p{color:#555;font-size:.95rem}

/* === Solution / Steps === */
.steps{display:flex;align-items:flex-start;justify-content:center;gap:16px;flex-wrap:wrap}
.step{background:#F5F5F5;border-radius:12px;padding:28px 24px;text-align:center;flex:1;min-width:220px;max-width:300px}
.step-number{width:48px;height:48px;background:#0066CC;color:#fff;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:1.4rem;font-weight:700;margin-bottom:14px}
.step h3{margin-bottom:8px;color:#222}
.step p{color:#555;font-size:.9rem}
.step-arrow{font-size:2rem;color:#0066CC;align-self:center;margin-top:30px}

/* === Benefits === */
.benefits{background:#F5F5F5}
.four-cols{grid-template-columns:repeat(4,1fr)}
.benefit-card{background:#fff;border-radius:12px;padding:28px 20px;text-align:center;box-shadow:0 2px 12px rgba(0,0,0,.06)}
.benefit-icon{font-size:2.2rem;margin-bottom:10px}
.benefit-card h3{color:#0066CC;margin-bottom:8px;font-size:1.05rem}
.benefit-card p{color:#555;font-size:.9rem}

/* === Audience === */
.audience-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.audience-col h3{font-size:1.4rem;margin-bottom:16px;color:#0066CC}
.audience-col ul{list-style:none;padding:0}
.audience-col li{padding:10px 0;border-bottom:1px solid #eee;font-size:.95rem}
.audience-col li strong{color:#222}

/* === Social Proof === */
.social-proof{background:#0066CC;color:#fff;text-align:center}
.social-proof h2{color:#fff}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.stat{padding:20px}
.stat-number{font-size:2.8rem;font-weight:800;line-height:1}
.stat-label{font-size:.95rem;opacity:.85;margin-top:8px}

/* === CTA Final === */
.cta-final{text-align:center;padding:80px 0;background:#f9f9f9}
.cta-final h2{margin-bottom:16px}
.cta-final p{font-size:1.1rem;color:#555;margin-bottom:28px;max-width:550px;margin-left:auto;margin-right:auto}
.cta-subtext{margin-top:16px;font-size:.9rem;color:#888}

/* === Footer === */
footer{background:#222;color:#aaa;text-align:center;padding:28px 0;font-size:.85rem}
footer a{color:#ccc}

/* === Responsive === */
@media(max-width:900px){
    .cards-grid,.four-cols,.stats-grid{grid-template-columns:repeat(2,1fr)}
    .audience-grid{grid-template-columns:1fr}
    .hero h1{font-size:1.8rem}
    .step-arrow{display:none}
}
@media(max-width:600px){
    .cards-grid,.four-cols,.stats-grid{grid-template-columns:1fr}
    .hero{padding:50px 0 60px}
    .hero h1{font-size:1.5rem}
    section{padding:50px 0}
    section h2{font-size:1.5rem;margin-bottom:32px}
    .btn-xl{padding:16px 32px;font-size:1.1rem}
}