:root {
  --bg1:#041022;
  --bg2:#0d3269;
  --text:#eef3ff;
  --muted:#cfdbf4;
  --gold:#f4c15c;
  --line:rgba(169,214,255,.35);
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:"Segoe UI","Trebuchet MS",Verdana,sans-serif;
  color:var(--text);
  background:linear-gradient(160deg,var(--bg1) 0%,var(--bg2) 100%);
}
.wrap{
  width:min(980px,100%);
  margin:0 auto;
  padding:22px 14px 34px;
}
.card{
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(4,15,34,.72);
  padding:16px;
  margin-top:14px;
}
h1{font-size:clamp(1.5rem,3.2vw,2.2rem); margin:0 0 10px; color:#ffe7b0}
h2{font-size:clamp(1.16rem,2.3vw,1.55rem); margin:0 0 10px; color:#ffe4a0}
p,li{color:var(--muted); line-height:1.55}
a{color:#ffe9b6}
ul{margin:0; padding-left:18px}
.nav{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:0 0 14px;
}
.nav a{
  text-decoration:none;
  color:#102445;
  background:linear-gradient(90deg,#f2c15d,#ffeab8);
  padding:9px 14px;
  border-radius:999px;
  font-weight:700;
}
.nav a:hover{filter:brightness(1.06)}
.cta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.cta a{
  text-decoration:none;
  padding:10px 14px;
  border-radius:999px;
  font-weight:700;
}
.cta .wa{background:#25d366; color:#06250e}
.cta .tg{background:#2aabee; color:#052235}
.badge{
  display:inline-block;
  padding:4px 8px;
  border-radius:999px;
  font-size:.84rem;
  font-weight:700;
  background:rgba(255,199,102,.18);
  border:1px solid rgba(255,212,131,.45);
  color:#ffe8b8;
}
.todo{
  background:rgba(255,130,130,.16);
  border:1px solid rgba(255,166,166,.45);
  padding:8px 10px;
  border-radius:10px;
  color:#ffd8d8;
}
footer{margin-top:16px; font-size:.95rem; color:#d6e0f6}