:root{
  --brand:#0ea5a4;
  --brand-2:#2563eb;
  --bg:#f3f6fb;
}
body{background:var(--bg)}
.hero{
  background: radial-gradient(1200px 600px at 15% 20%, rgba(14,165,164,0.18), transparent 55%),
              radial-gradient(1000px 520px at 80% 10%, rgba(37,99,235,0.16), transparent 55%),
              linear-gradient(180deg,#ffffff 0%,#f3f6fb 100%);
}
.brand-badge{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.35rem .6rem; border-radius:999px;
  background:rgba(14,165,164,0.10); color:#0f172a;
  border:1px solid rgba(14,165,164,0.18);
  font-weight:600; font-size:.9rem;
}
.card{border:0; border-radius:14px}
.card.shadow-soft{box-shadow:0 10px 30px rgba(2,6,23,0.08)}
.form-control, .form-select{border-radius:10px}
.btn{border-radius:10px}
.help-chip{display:inline-flex; gap:.4rem; align-items:center; padding:.2rem .5rem; border-radius:999px; font-size:.8rem; background:#eef2ff; color:#1e293b}
.muted{color:#64748b}
.code-input{letter-spacing:.35rem; font-variant-numeric: tabular-nums; font-size:1.25rem; text-align:center}
.footer-links a{color:#64748b; text-decoration:none}
.footer-links a:hover{color:#0f172a; text-decoration:underline}