:root{
  --azul:#0558FD;
  --azul-dark:#0340BD;
  --lima:#99FF00;
  --ink:#0A0A0A;
  --paper:#FFFFFF;
  --muted:#5A6B85;
  --wa:#25D366;
  --wa-dark:#1FAF54;
  --radius:14px;
  --shadow:0 12px 32px rgba(5,88,253,.18);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Arial,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(153,255,0,.18), transparent 60%),
    radial-gradient(1000px 700px at -10% 110%, rgba(5,88,253,.16), transparent 55%),
    var(--paper);
  -webkit-font-smoothing:antialiased;
}
.wrap{
  min-height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  padding:32px 20px;
}
.brand{
  display:flex;
  gap:6px;
  align-items:baseline;
  font-weight:800;
  letter-spacing:.5px;
  font-size:18px;
}
.brand__mark{color:var(--azul)}
.brand__mark--accent{color:var(--ink)}
.brand__mark--accent::before{content:"·";color:var(--lima);margin-right:6px;font-weight:900}

.hero{
  max-width:640px;
  width:100%;
  text-align:center;
  padding:48px 8px;
}
.badge{
  display:inline-block;
  background:rgba(5,88,253,.08);
  color:var(--azul);
  border:1px solid rgba(5,88,253,.25);
  border-radius:999px;
  padding:6px 14px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.6px;
  text-transform:uppercase;
  margin-bottom:24px;
}
.hero__title{
  font-size:clamp(28px,5vw,44px);
  line-height:1.15;
  font-weight:800;
  color:var(--ink);
  margin-bottom:16px;
}
.hero__lead{
  font-size:clamp(15px,2.2vw,18px);
  line-height:1.55;
  color:var(--muted);
  margin-bottom:36px;
}
.cta{
  display:inline-flex;
  align-items:center;
  gap:12px;
  background:var(--wa);
  color:#fff;
  text-decoration:none;
  font-weight:700;
  font-size:16px;
  padding:16px 28px;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  transition:transform .15s ease, background .2s ease, box-shadow .2s ease;
}
.cta:hover{background:var(--wa-dark);transform:translateY(-2px);box-shadow:0 16px 36px rgba(37,211,102,.32)}
.cta:active{transform:translateY(0)}
.cta__icon{width:22px;height:22px;flex:none}

.phone{
  margin-top:18px;
  font-size:14px;
  color:var(--muted);
  letter-spacing:.4px;
}

.foot{
  font-size:12px;
  color:var(--muted);
  text-align:center;
  padding-top:24px;
}

@media (max-width:480px){
  .wrap{padding:24px 16px}
  .hero{padding:32px 4px}
  .cta{width:100%;justify-content:center;padding:18px 20px}
}