:root{
  --bg-soft: #f6f7fb;
}

body{
  background: #fff;
}

.brand-dot{
  display:inline-block;
  width:10px;height:10px;
  border-radius:50%;
  background:#0d6efd;
  margin-right:10px;
  box-shadow: 0 0 0 4px rgba(13,110,253,.18);
  vertical-align: middle;
}

.hero{
  background:
    radial-gradient(900px 420px at 15% 20%, rgba(13,110,253,.16), transparent 60%),
    radial-gradient(900px 420px at 80% 10%, rgba(111,66,193,.14), transparent 55%),
    linear-gradient(180deg, #ffffff, var(--bg-soft));
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.hero-badge{
  border-radius: 999px;
}

.hero-stats{
  display:flex;
  gap:16px;
  flex-wrap: wrap;
}

.stat{
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  padding: 10px 14px;
  min-width: 150px;
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
}

.stat-num{
  font-weight: 800;
  font-size: 1.05rem;
}

.stat-label{
  font-size: .85rem;
  color: #6c757d;
}

.hero-illustration{
  border-radius: 18px;
}

.mini-pill{
  width: 10px;
  height: 10px;
  border-radius: 99px;
  display:inline-block;
  background: rgba(0,0,0,.18);
}

.icon-bubble{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 800;
  background: rgba(13,110,253,.12);
  color: #0d6efd;
  border: 1px solid rgba(13,110,253,.18);
}

.auth-side{
  background:
    radial-gradient(520px 240px at 20% 20%, rgba(13,110,253,.18), transparent 60%),
    radial-gradient(520px 240px at 80% 0%, rgba(25,135,84,.12), transparent 60%),
    linear-gradient(180deg, #ffffff, #f8f9fa);
  border-right: 1px solid rgba(0,0,0,.06);
}

@media (max-width: 767.98px){
  .auth-side{
    border-right: none;
    border-bottom: 1px solid rgba(0,0,0,.06);
  }
}