:root{
  --brand-red:#e21b23;
  --surface:#f6f7f9;
}
.bg-surface{ background: var(--surface); }

.hero{
  background:
    radial-gradient(1200px 600px at 10% 10%, rgba(226,27,35,.12), transparent 50%),
    radial-gradient(900px 500px at 90% 20%, rgba(0,0,0,.08), transparent 55%);
}

.icon-bubble{
  width:42px; height:42px; display:flex; align-items:center; justify-content:center;
  border-radius:14px; background: rgba(226,27,35,.12); color: var(--brand-red);
  font-size: 1.25rem;
}

.mini-tile{
  border:1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  padding: 14px;
  background: #fff;
}
.mini-ico{
  width:34px;height:34px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background: rgba(226,27,35,.10);
  color: var(--brand-red);
  margin-bottom: 8px;
  font-size: 1.1rem;
}
.mini-title{ font-weight: 600; line-height: 1.15; }
.mini-sub{ font-size: .85rem; color: rgba(0,0,0,.55); }

.step{
  display:flex; gap: 14px; align-items:flex-start;
  padding: 12px 0;
}
.step-num{
  width: 34px; height: 34px;
  border-radius: 12px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(0,0,0,.06);
  font-weight: 700;
}

code{ background: rgba(0,0,0,.06); padding: .15rem .35rem; border-radius: .35rem; }