:root{
  --blue:#2957FF;
  --deep:#0B2A53;
  --soft:#EEF3FF;
  --text:#1a2330;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:Inter,system-ui,'Segoe UI',Arial,sans-serif;color:var(--text);background:#fff;line-height:1.6}
a{text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
/* NAV */
.navbar{position:sticky;top:0;z-index:99;background:#fff;border-bottom:1px solid #eef1f6}
.navbar .wrap{display:flex;align-items:center;justify-content:space-between;height:70px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:42px}
.nav-links a{color:#0c1b33;margin:0 14px;font-weight:600}
.btn{display:inline-flex;align-items:center;gap:8px;padding:.65rem 1rem;border-radius:999px;border:1px solid transparent;font-weight:700}
.btn-primary{background:var(--blue);color:#fff}
.btn-outline{background:#fff;border-color:#d7e2ff;color:var(--deep)}
/* HERO */
.hero{position:relative;background:linear-gradient(180deg,#fff 0%,#f6f9ff 70%);overflow:hidden}
.hero .skew{position:absolute;right:-20vw;top:-10vh;width:70vw;height:110vh;background:var(--blue);transform:skew(-18deg);border-radius:28px;box-shadow:0 40px 100px rgba(41,87,255,.35)}
.hero .content{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center;padding:72px 0}
.headline{font-size:52px;line-height:1.05;margin:0;font-weight:900;color:var(--deep)}
.headline .accent{color:var(--blue)}
.hero p.lead{font-size:18px;color:#4a5568;margin-top:12px}
.hero .imgwrap{position:relative}
.hero .imgwrap img{width:100%;border-radius:18px;box-shadow:0 30px 80px rgba(11,42,83,.25)}
.badge-float{position:absolute;background:#fff;color:#0b2a53;border-radius:16px;box-shadow:0 12px 30px rgba(11,42,83,.15);padding:10px 14px;display:flex;align-items:center;gap:10px;font-weight:700}
.badge-1{top:8%;left:-12%}
.badge-2{bottom:6%;right:-10%}
/* LOGOS ROW */
.logos{display:flex;gap:28px;flex-wrap:wrap;align-items:center;opacity:.75;margin-top:24px}
.logo-pill{background:#fff;border:1px solid #eef1f6;border-radius:999px;padding:10px 16px;font-weight:700;color:#587}
/* SECTIONS */
.section{padding:72px 0}
.section h2{font-size:34px;font-weight:900;color:var(--deep);margin:0 0 10px}
.section .sub{color:#6a7280}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:#fff;border:1px solid #eef1f6;border-radius:18px;padding:22px;box-shadow:0 16px 40px rgba(11,42,83,.06)}
.icon{width:46px;height:46px;border-radius:12px;background:var(--soft);color:var(--blue);display:flex;align-items:center;justify-content:center;font-weight:800;margin-bottom:10px}
/* HOW */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.step{background:#fff;border:1px solid #eef1f6;border-radius:16px;padding:18px;text-align:left}
.step h6{margin:6px 0 4px;font-size:14px;text-transform:uppercase;letter-spacing:.2px;color:#324}
/* PRICING */
.pricing{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.price{font-size:38px;font-weight:900;color:var(--deep)}
/* CONTACT */
form .row{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
form .row .full{grid-column:1/-1}
.input, select, textarea{width:100%;padding:.85rem 1rem;border:1px solid #dfe6f7;border-radius:12px}
/* FOOTER */
footer{background:#0B2A53;color:#DDE6FF;padding:28px 0}
footer .fwrap{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
/* WHATSAPP FAB */
.wa{position:fixed;right:18px;bottom:18px;background:#25D366;color:#fff;width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:26px;box-shadow:0 14px 28px rgba(0,0,0,.24);z-index:99}
/* RESPONSIVE */
@media(max-width:1024px){.hero .content{grid-template-columns:1fr;gap:12px}.hero .skew{display:none}}
@media(max-width:920px){.grid-3{grid-template-columns:1fr 1fr}.steps{grid-template-columns:1fr 1fr}.pricing{grid-template-columns:1fr}}
@media(max-width:560px){.grid-3,.steps{grid-template-columns:1fr}.headline{font-size:40px}}