:root{
  --navy:#0F2B4C;
  --teal:#19A3A3;
  --blue:#2C77D1;
  --coral:#F0657A;
  --orange:#F39A29;
  --bg:#F7FAFE;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--navy);
  background: radial-gradient(1200px 600px at 20% 10%, #E9F6F7 0, transparent 60%),
              radial-gradient(1200px 600px at 90% 40%, #FDECEF 0, transparent 60%),
              var(--bg);
}

.shell{
  min-height:100%;
  display:grid;
  place-items:center;
  padding:4rem 1rem;
}
.card{
  width:min(920px, 92vw);
  text-align:center;
  background:#fff;
  border-radius:24px;
  box-shadow:0 8px 40px rgba(15,43,76,.08);
  padding:56px 28px 40px;
}
.logo{
  width:88px;
  height:auto;
  display:block;
  margin:0 auto 12px;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.06));
}
.brand{
  margin:0 0 12px;
  font-weight:800;
  font-size: clamp(28px, 4vw, 44px);
  letter-spacing:.3px;
}
.pill{
  display:inline-block;
  margin:6px 0 16px;
  padding:10px 18px;
  border-radius:999px;
  background:linear-gradient(90deg, var(--teal), var(--blue));
  color:#fff;
  font-weight:600;
  box-shadow:0 2px 10px rgba(44,119,209,.25);
}
.headline{
  font-size: clamp(22px, 3.2vw, 36px);
  font-weight:700;
  margin:22px 0 28px;
}
.cta{
  display:inline-block;
  padding:14px 22px;
  border-radius:14px;
  background:linear-gradient(90deg, var(--blue), var(--coral));
  color:#fff;
  text-decoration:none;
  font-weight:700;
  box-shadow:0 6px 20px rgba(240,101,122,.25);
}
.cta:hover{ transform:translateY(-1px) }
.links{
  margin:20px 0 8px;
  color:#5b6b80;
}
.links a{
  color:var(--navy);
  text-decoration:none;
  font-weight:600;
}
.links a:hover{ text-decoration:underline }
.dot{ margin:0 .5rem }
footer{ color:#7b8aa1; font-size:14px; margin-top:10px }